DNET_FlutterThirdStep

Flutterのサード・ステップ

• 戻る
  • Flutterのファースト・ステップ
  • Flutterのセカンド・ステップ
  • Flutterのサード・ステップ（本ページ）
  • Flutterの4thステップ
  • Flutterの5thステップ
  • ...Flutterのファースト・ステップ２

概要

Flutter の step by step（其の三）。

手順１：プッシュ通知

• プッシュ通知

CIBAのAD（CIBA(Client Initiated Backchannel Authentication)の該当節を参照）実装の準備

mBaaS選定

• 色々なプラグインがあるが、
  使うとmBaaSにロックインされる。

• FCMは実質デファクトなので
  ロックインの影響も少ない。

• 以下は、FCMでの設定手順。

設定手順

準備（iOSのみ）

• APNs入手
• APNs認証キー、またはAPNs証明書の入手

FCM関連の設定

• Firebaseにログイン
• プロジェクトの作成
• FCMへアプリを登録
• ファイルのダウンロード
• 設定と実装
  • ビルド・プロセスへの組込
  • プッシュ通知のコード実装

Firebaseにログイン

• Firebaseにログイン（Android (FCM)の該当節を参照）

プロジェクトの作成

• プロジェクトの作成（Android (FCM)の該当節を参照）

FCMへアプリを登録

• FCMへアプリを登録（Android (FCM)の該当節を参照）

ファイルのダウンロード

• ファイルのダウンロード（Android (FCM)の該当節を参照）

設定と実装

• 以下については、参考の「ZUMA Lab」が参考になる。

• 若しくは、以下のコミット・ログを参照。

  https://github.com/OpenTouryoProject/SampleProgram/commit/05aa697751eae228e2ef72cd8449deea9bd4c14e

ビルド・プロセスへの組込

• ビルド・プロセスへの組込（Android (FCM)の該当節を参照）

Android、iOS、其々のプラットフォームに向けて、

• 前述のダウンロード・ファイルをビルド・プロセスへ組み込む。
• メイク・ファイル的なものを一部、手修正する。

パッケージのインストール

firebase_messaging パッケージを追加する必要がある（Flutterのファースト・ステップの該当節を参照）。

• firebase_messaging | Flutter Package
  https://pub.dev/packages/firebase_messaging/install

  import 'package:firebase_messaging/firebase_messaging.dart';

プッシュ通知のコード実装

• プッシュ通知のコード実装（Android (FCM)の該当節を参照）

• デバイスの登録

  • デバイスIDを取得し、
  • サーバに送信して登録

• 送信・受信

  • 送信
    サーバから送信（Android (FCM)の該当節を参照）
  • 受信
    プッシュ通知の受信。

参考（手順１）

Qiita（手順１）

• 【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

• Firebase Cloud Messaging
  https://firebase.flutter.dev/docs/messaging/overview/

• FCM via APNs Integration
  https://firebase.flutter.dev/docs/messaging/apple-integration/

その他（手順１）

• 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

手順２：全体構成の見直し

サイズも増えて来たので、この辺りで、アプリの全体構成を見直してみる。

MaterialAppとScaffold

MaterialApp

• 全体を構成する。
• app.dartのWidget buildメソッドでreturnされる。

Scaffold

• Pageを構成する。
• PageのWidgetのWidget buildメソッドでreturnされる。

フォルダ構成

main.dart

• runAppする。
• その他、初期設定等。

common

ButtonやView等のWidgetクラスを配置

components

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でないWidgetクラスも配置

configs

• グローバルな変数/定数クラスを配置
• または、servicesのシングルトン化

helpers

staticな関数クラスを配置

models

モデルクラスを配置

routes

• ルーティングの設定クラスを配置
• fluro の configureなど。

services

• サービス・クラスを配置
• configsでシングルトン化

クリーン・アーキテクチャ系

• クリーン・アーキテクチャ

以下のようなモノがあってもイイが、

• Interactor（業務ロジック）
• Repository（DBアクセス）

WebAPIのクライアントに終始するようなケースでは不要か。

画面分割

→ components

runAppするApp。

app.dartのWidget buildメソッドでMaterialAppをreturnする。

Page毎のWidget

PageのWidgetのWidget buildメソッドでScaffoldをreturnする。

部品化

Widget

→ common

自作クラス

パッケージ / プラグイン化（≒個別にプロジェクト化）しない
自作クラスは、configs、helpers、servicesに格納する。

参考（手順２）

• Flutterで本格的にアプリを書き始める前にやること > ディレクトリ構成を決める

• 【Flutter入門】100画面を超える規模のアプリ
  を開発してみた感想 | 東京のアプリ開発会社
  https://pentagon.tokyo/app/2937/

• FlutterのUIウィジェットを理解するための
  基本を知ろう！ (1/3)：CodeZine（コードジン）
  https://codezine.jp/article/detail/13329

Qiita（手順２）

• 管理しやすい(と思う)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

参考

• 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の参考（Flutterの該当節を参照）

Flutterの4thステップ

• Flutterの4thステップ

移行メモ

• 元 Wiki では見出しそのものが他ページ・同ページ内へのリンクになっていた箇所 （「手順１：プッシュ通知」「Firebaseにログイン」「プロジェクトの作成」 「FCMへアプリを登録」「ファイルのダウンロード」「ビルド・プロセスへの組込」 「プッシュ通知のコード実装」「クリーン・アーキテクチャ系」「MaterialAppとScaffold」 「Flutterの参考」「Flutterの4thステップ」）は、GitHub Wiki では 見出しからアンカが生成されるため、見出しをプレーン・テキストとし、 リンクは直下の本文に置いた。
• 同名の見出し（「参考」「Qiita」「その他」）が複数あり GitHub Wiki でアンカが衝突するため、括弧で文脈を補って一意にした。
• PukiWiki のページ内アンカ（#xxxxxxxx）は GitHub Wiki では再現できないため、 同一ページ内のアンカは見出しから生成されるアンカに張り替え、 他ページのアンカを指すリンクは「〜（ページ名 の該当節を参照）」の形に置き換えた。
• マイクロソフト系技術情報 Wiki（techinfoofmicrosofttech.osscons.jp）への URL リンクは、移行済みの CIBA(Client Initiated Backchannel Authentication) に張り替えた。
• リンク先が未移行のページは、移行先のファイル名を `DNET_○○.md` の形で示し TODO.md に登録した。

---

Tags: 移行, Flutter, プッシュ通知, FCM, APNs, firebase_messaging, フォルダ構成, MaterialApp, Scaffold, クリーン・アーキテクチャ