ノーコードツールでデジタルスタンプラリーを製作した話（PART0)

はじめまして、ひらです。

大学の卒業研究をFlutterFlowというノーコードツール開発環境にて愛知県岡崎市をスタンプラリーを介して観光するスマホアプリを作成しました。今回はその経緯についてお話しします。

FlutterFlowは、UIデザイン、バックエンド、フロントエンドのすべての機能を提供するノーコード開発ツールです。また、IOS、Android、Web版に対応し、クロスプラットフォーム開発もできます。多くのサンプルコードを提供しており、開発者がコードを学ぶことができるようにもなっています。
ちなみに、FlutterFlowというツールは、ゼミの先生から紹介してもらい、ログイン関係やFireBaseとの連携など、基本的な事を学んだのち、デジタルスタンプラリーのアプリを作成しました。

デジタルスタンプラリーを作成するにあたって、必要な画面や機能を簡単に洗い出します。

画面

• スタンプスポットを記したマップ画面

• 押されたスタンプを確認する手帳画面

• ログイン関係の画面（ログインや新規登録、パスワードの再設定、プロフィール編集）

• スタンプスポットの詳細な説明画面

• アプリの取り扱い説明画面

機能

• QRコードを読み取るカメラ機能(web版で動作するにはパッケージ導入、カスタムウェジットの作成が必要）

• スタンプを取得→スタンプ帳にあるスポット画像にスタンプが押される機能

• GoogleMapの使用（APIを使用）

• ログイン関係に必要なAuthentication

その他

• スタンプスポットやスタンプの画像

では次に、FlutterFlowでデジタルスタンプラリーを作成した手順を紹介したいと思います。一度に紹介すると長くなってしまうため、何話かに分けて記述していきたいと思います。

【Step1. FlutterFlowのアカウントを作成する】

FlutterFlowの公式サイトにアクセスして、アカウントを作成します。アカウントを作成すると、アプリの開発に必要なツールやテンプレートが選択できるようになります。
次にGoogleが提供しているFireBaseにアクセスし、コンソールへ移動、プロジェクトを作成します（Googleのアカウントが必要になります）。

【Step2. 新しいプロジェクトを作成する】

FlutterFlowにログインしたら、画面右上にある「New Project」をクリックして、新しいプロジェクトを作成します。プロジェクト名を入力し、「Create Project」をクリックして、プロジェクトを作成します。

FireBaseとの連携はこちらを参考にしました。

https://note.jpn.pioneer/n/nf762ad592482

【Step3. デザインを設計する】

プロジェクトを作成したら、画面の下にある「Design」をクリックして、アプリのデザインを設計します。デザインに必要な要素を、左側のパネルからドラッグ＆ドロップして、画面上に配置していきます。

ログイン関係の作成

最初にアカウント作成、ログイン、パスワードを再設定、プロフィール画面を作成していきました。

1からGUIの作成をせずとも、NewPageからテンプレートを用途に合わせて改良することもできます。私もログイン関係はこちらを改良して作成いたしました。

Authのテンプレート

ログインページを作成を作成したら、左端のメニューバーの歯車→
Authentication→Enable Authenticationにチェックをいれましょう。
そうするとInitial Pageが出てくるので、EntryPageをLoginPage(もしくはログインページに該当するページ）、LoggedIn Pageをログイン後に表示したいページにしましょう。

今回はここまでにしておきます！！次回はログインアクションに関して記事を書こうと思います！！

参考
https://note.jpn.pioneer/n/nf762ad592482