はじめに
ノーコード・ローコードツールとして最近注目している「Flutter Flow」を使って、ToDoアプリを作っていきたいと思います。
記事について
一気に記事にすると、長くなるので、Youtubeの動画に合わせて何回かに分けて、記事を書いていきます。
基本的には、Youtubeの内容の文字起こしと思ってください。
ノーコード・ローコード勉強チャンネル
https://www.youtube.com/watch?v=hGq1LZw2E5I
Todoアプリの機能
- ToDoを一覧で見れる。
- ToDoのステータス変更できる。
- ToDoが作成できる。
- ToDoを編集できる。
- ToDoを削除できる
Firebase
Firebaseの下記の機能を使っていきます。
- Authentication
- Firestore database
Firebaseの設定
Firebaseのページに移動して、右上にあるコンソールに移動をクリックします。
初めての場合は、プロジェクト作成と出るので、プロジェクト作成をします。
プロジェクト名は、アプリ名などわかるものを入れてください。
規約に同意と、利用目的の内容にチェックしてください。
アナリティクスは、今回はとりあえずなしで進めます。
プロジェクトを作成しているので、待ちましょう。
次にユーザーの設定をします。
プロジェクトの概要の横の歯車をクリックして、ユーザーと権限を選択します。
自分のユーザーが出ているので、メンバーを追加します。
firebase@flutterflow.io を追加します。
役割は、編集者にして完了します。
次にファイヤーベースの権限を追加します。
権限に関する詳細設定をクリックします。
初めての場合、利用規約が出てくるので、チェックして進めます。
一覧が出てきます。
このfirebase@flutterflow.io ユーザに対して別の権限を割り当てます。
鉛筆アイコンをクリックします。
別のロールを追加で、Cloud Function 管理者の権限を追加します。
保存を押して保存します。
Firebaseの画面に戻って、左下を見てください。
今はスパークという無料プランなのでこちらをアップグレードして、従量制のブレイズに切り替えます。
課金の設定が必要なので、情報を入力します。
クレジットカード情報などを入力して、画面をすすめると、課金予算設定となるので、適当には100円などにしておきましょう。
次にプロジェクトの概要の横にある歯車アイコンをクリックして、プロジェクト設定を見ます。
ここに記載されているプロジェクトプロジェクトIDを覚えておいてください。
Flutter Flowのページでアプリを作っていきます。
右上のCreate Newボタンを押します。
プロジェクト名には、今回作るToDoと入力します、
テンプレートは、ブランクAPPを選んで作ります。
プロジェクトネームとパッケージネームが表示されるので、適宜変更してください。
Setup Firebaseはチェックしたまま、次へ進みます。
FirebaseのプロジェクトIDの入力があるので、先程のFirebaseのプロジェクトIDのを入力してください。
終わったら、コネクトボタンを押します。
コネクトできたのでAuthenticationと、Create User Collectionはオンにして、進めます。
Start Buildingを押します。
何もないアプリを作れました。
今回は、終わりにしたいと思います。