今回のハンズオンでは以下のサンプルプロジェクトを例に説明を進めます。
Flutter Web と LIFF を組み合わせてスケジュール共有アプリを作りました。
スケジュールを追加、一覧表示できて、指定した時間にpushMessageでLINEチャネルに通知が来るようになっています。
-
スケジュール一覧
-
一覧画面の左下にある
Floating Action Buttonを押すと登録画面に遷移します。
-
スケジュール名と日時を入れて
スケジュール登録を押すとGASに登録されて、時間になったらbotに通知が来ます。
アーキテクチャ
構成の全体像は以下のようになっています。
Flutter webで作成したWebアプリをFirebase HostingでSPAとしてホスティングします。
バックエンドとしては、今回流用が簡単なようにGASで作成し、データはスプレッドシート上で管理します。
GASがスケジュールに従ってLINE Messaging APIをcallし、ユーザーのLINEアプリ上でスケジュールの通知が行われます。
本資料での流れ
このサンプルプロジェクトはFlutterでアプリを動かす体験をしてもらうことを目的としています。その導入としてまずは動かすことを主軸に進めていくことをおすすめします。
- Flutterの環境構築＆LINEプロバイダ登録
↓ - プロジェクトのクローン
↓ - GASの用意とデプロイ
↓ - Firebase Hosingへのデプロイ