![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。 -[[戻る>Flutter]] --[[Flutterのファースト・ステップ]] --[[Flutterのセカンド・ステップ]] --Flutterのサード・ステップ --[[Flutterの4thステップ]] --[[Flutterの5thステップ]] --...[[Flutterのファースト・ステップ２]] *目次 [#v04cf1e9] #contents *概要 [#x84d2ef3] [[Flutter]] の step by step（其の三）。 *手順１：[[プッシュ通知]] [#p7b4ca10] [[CIBAのAD>https://techinfoofmicrosofttech.osscons.jp/index.php?CIBA%28Client%20Initiated%20Backchannel%20Authentication%29#n4cd6119]]実装の準備 **[[mBaaS]]選定 [#zd22e05a] -色々なプラグインがあるが、~ 使うと[[mBaaS]]にロックインされる。 -[[FCM>Android (FCM)]]は実質デファクトなので~ ロックインの影響も少ない。 -以下は、[[FCM>Android (FCM)]]での設定手順。 **設定手順 [#l06e8a86] ***準備（iOSのみ） [#d438a17d] -[[APNs>iOS (APNs)]]入手 -[[APNs>iOS (APNs)]]認証キー、または[[APNs>iOS (APNs)]]証明書の入手 ***[[FCM>Android (FCM)]]関連の設定 [#f3a52b61] -[[Firebaseにログイン>#y7a528d1]] -[[プロジェクトの作成>#l37768a2]] -[[FCMへアプリを登録>#x8599532]] -[[ファイルのダウンロード>#iaf16f27]] -[[設定と実装>#cd6cf047]] --[[ビルド・プロセスへの組込>#y3988af9]] --[[プッシュ通知のコード実装>#a7a9f6e1]] **[[Firebaseにログイン>Android (FCM)#k71a6dd8]] [#y7a528d1] **[[プロジェクトの作成>Android (FCM)#sa05a1ad]] [#l37768a2] **[[FCMへアプリを登録>Android (FCM)#u8f35bcd]] [#o625048d] **[[ファイルのダウンロード>Android (FCM)#h236aa91]] [#f3bf9869] **設定と実装 [#cd6cf047] -以下については、[[参考>#ved7091a]]の「ZUMA Lab」が参考になる。 -若しくは、以下のコミット・ログを参照。 >https://github.com/OpenTouryoProject/SampleProgram/commit/05aa697751eae228e2ef72cd8449deea9bd4c14e ***[[ビルド・プロセスへの組込>Android (FCM)#v1a2d3ea]] [#j41edff5] Android、iOS、其々のプラットフォームに向けて、 -[[前述のダウンロード・ファイル>#iaf16f27]]をビルド・プロセスへ組み込む。 -メイク・ファイル的なものを一部、手修正する。 ***パッケージのインストール [#hb8bfd11] firebase_messaging[[パッケージを追加する必要がある。>Flutterのファースト・ステップ#wdf201cb]] -firebase_messaging | Flutter Package~ https://pub.dev/packages/firebase_messaging/install import 'package:firebase_messaging/firebase_messaging.dart'; ***[[プッシュ通知のコード実装>Android (FCM)#uf6bbe9e]] [#a8f2163f] -デバイスの登録 --デバイスIDを取得し、 --サーバに送信して登録 -送信・受信 --送信~ [[サーバから送信>Android (FCM)#e29bc61e]] --受信~ プッシュ通知の受信。 **参考 [#ved7091a] ***Qiita [#kedd4899] -【Flutter】FCMで初めてのプッシュ通知 2020年12月版~ https://qiita.com/yana1316/items/9bd3806efc9cbdddcba9 -FlutterでFCMを使ってプッシュ通知を受け取る~ https://qiita.com/0maru/items/2b438a4c4fc87b7e10f9 -FulutterでGoogleService-Info.plist(google-services.json)を切り替える~ https://qiita.com/yana1316/items/314fbe3eb8d4a95ea78c ***FlutterFire [#bd8e3bde] -Firebase Cloud Messaging~ https://firebase.flutter.dev/docs/messaging/overview/ -FCM via APNs Integration~ https://firebase.flutter.dev/docs/messaging/apple-integration/ ***その他 [#pdc8a5bb] -FlutterでFCMを使ったプッシュ通知の実装方法 (Android) - たけログ~ https://takelg.com/flutter_push_notification_android/ -Flutter初心者がFCMを使ってプッシュ通知を受け取る | ZUMA Lab --〜設定編〜(2021/3/22版)~ https://zuma-lab.com/posts/flutter-fcm-push-notify-settings --〜アプリ実装編〜(2021/3/22版)~ https://zuma-lab.com/posts/flutter-fcm-push-notify-development -FirebaseCloudMessaging(FCM)を使って、~ Flutterでプッシュ通知を実装するまとめ｜うぇるち｜note~ https://note.com/welchi/n/n649728c5574d -FlutterでFCMを使ったプッシュ通知を実装してみた | DevelopersIO~ https://dev.classmethod.jp/articles/flutter_fcm_push1/ -【Flutter】FCMでプッシュ通知を送る際のOS毎の注意点~ https://zenn.dev/shunyaendoh1215/articles/1d66e2612d23254ce2d1 *手順２：全体構成の見直し [#dd29a972] サイズも増えて来たので、この辺りで、アプリの全体構成を見直してみる。 **[[MaterialApp>#z4e1bf0b]]と[[Scaffold>#cd3cecf6]] [#w675a86f] ***MaterialApp [#z4e1bf0b] -全体を構成する。 -app.dartのWidget buildメソッドでreturnされる。 ***Scaffold [#cd3cecf6] -Pageを構成する。 -PageのWidgetのWidget buildメソッドでreturnされる。 **フォルダ構成 [#jad39c19] ***main.dart [#z29eb407] -runAppする。 -その他、初期設定等。 ***common [#u6459cfd] ButtonやView等のWidgetクラスを配置 ***components [#d897b5be] PageのWidgetクラスを配置 -app.dart --runAppするApp。 --MaterialApp を返す。 -importer.dart --componentで使用されるライブラリをexportし、 export 'package:flutter/material.dart'; --componentでimporter.dartをimportする。 import '../importer.dart'; -Page毎のファイル or ディレクトリ~ ディレクトリの場合、[[common>#u6459cfd]]でないWidgetクラスも配置 ***configs [#vc2278c4] -グローバルな変数/定数クラスを配置 -または、[[services>#o8aca8f8]]のシングルトン化 ***helpers [#u4ee8972] staticな関数クラスを配置 ***models [#mabbc1fc] モデルクラスを配置 ***routes [#o3100da8] -ルーティングの設定クラスを配置 -fluro の configureなど。 ***services [#o8aca8f8] -サービス・クラスを配置 -[[configs>#vc2278c4]]でシングルトン化 ***[[クリーン・アーキテクチャ]]系 [#cea4600b] 以下のようなモノがあってもイイが、~ -Interactor（業務ロジック） -Repository（DBアクセス） WebAPIのクライアントに終始するようなケースでは不要か。 **画面分割 [#te4bcc17] → [[components>#d897b5be]] ***runAppするApp。 [#i1912042] app.dartのWidget buildメソッドで[[MaterialApp>#z4e1bf0b]]をreturnする。 ***Page毎のWidget [#zd4bb904] PageのWidgetのWidget buildメソッドで[[Scaffold>#cd3cecf6]]をreturnする。 **部品化 [#q43b5842] ***Widget [#eb143275] → [[common>#u6459cfd]] ***自作クラス [#qf215cf6] パッケージ / プラグイン化（≒個別にプロジェクト化）しない~ 自作クラスは、[[configs>#vc2278c4]]、[[helpers>#u4ee8972]]、[[services>#o8aca8f8]]に格納する。 **参考 [#f5c54b43] -[[Flutterで本格的にアプリを書き始める前にやること > ディレクトリ構成を決める>https://zenn.dev/razokulover/articles/fa15728b1d98b39c6998#%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA%E6%A7%8B%E6%88%90%E3%82%92%E6%B1%BA%E3%82%81%E3%82%8B]] -【Flutter入門】100画面を超える規模のアプリ~ を開発してみた感想 | 東京のアプリ開発会社~ https://pentagon.tokyo/app/2937/ -FlutterのUIウィジェットを理解するための~ 基本を知ろう！ (1/3)：CodeZine（コードジン）~ https://codezine.jp/article/detail/13329 ***Qiita [#od9473f9] -管理しやすい(と思う)Flutterプロジェクトのディレクトリ構造~ https://qiita.com/tanakeiQ/items/2c4a7fcb8e95b9aa55ad -(日本語訳) --Flutter - Create Library Packages~ https://qiita.com/jugyo/items/21605821117ab0285de5 --Flutter - Developing Packages & Plugins~ https://qiita.com/jugyo/items/9f678123533ffd8b39cd *[[参考>Flutter#a9ed99c8]] [#uf568e02] *参考 [#uf568e02] -FrontendTemplates/UI/XPlat at develop · OpenTouryoProject/FrontendTemplates~ https://github.com/OpenTouryoProject/FrontendTemplates/tree/develop/UI/XPlat/ --https://github.com/OpenTouryoProject/FrontendTemplates/tree/develop/UI/XPlat/old/flutter_template **[[Flutterの参考>Flutter#a9ed99c8]] [#a6f44fef] **[[Flutterの4thステップ]] [#h31d7fa2]
