Chapter 04

【基礎解説】ハンズオンで作成するアプリについて

tokku5552
tokku5552
2022.11.23に更新
このチャプターの目次

今回のハンズオンでは以下のサンプルプロジェクトを例に説明を進めます。

https://github.com/tokku5552/flutter_liff_scheduler

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へのデプロイ