💭

flutter flow初日：アプリ作成

2024/08/11に公開

 背景flutterの学習を進めていましたが、環境構築で苦戦してしまい・・まずは本来の目的であるアプリを作る為にノーコードアプリを触ってみることにしました
ログインなどの初期設定は省略します
メモベースで記載していますので、抜け漏れ、間違いなどありましたらご指摘いただけると幸いです。

 手順
 新しいプロジェクトを作成「Create New」をクリック

[Enter your project name]の部分に自分のプロジェクト名を入力
以下に使えそうなテンプレートがあったら利用。なければblankで作成していく。

Project Setup Step１：クリエイトプロジェクト
Project Name：プロジェクト名を決める（基本2で決めているのでいじらなくてOK）
Package Name：Apple Storeなどでアプリを識別するために利用。全てのアプリで一意のものである必要あり
Select Theme：アプリの配色を決める
Enable web：webサイトしても使えるようにする場合はON
Setuf Firebase：ログイン機能などのFirebase（バックエンド）を利用する場合はON

Project Setup Step２：ファイアーベース（バックエンド）の設定
Create Project：FirebaseのプロジェクトID作成。プロジェクトを新規作成する場合は、以下「Firebaseプロジェクト作成」を参照。（事前に作成したFirebaseと繋げる場合はプロジェクトIDを入力）
Enable Authentication：ログイン認証を行う場合はON（基本的にONでOK）
Create User Collection：ログイン時に作成したユーザーデータをFirebaseに自動追加する場合はON（基本的にONでOK）

参照：「Firebaseプロジェクト作成」
Project name：先ほど決めたものと同様でOK
Firebase project region：一番近いリージョンを設定（私の場合は「東京」）
[Sign in with Google]でFirebaseにサインインを行う

↓接続完了

Enable Auth On Firebase：メールサインインを有効にする

(1) Firebaseのページを開き、「始める」をクリック

(2) ログイン方法として利用したいものをクリックし、有効にしていきます。

補足：今回は、メール／パスワードを有効にして保存

補足：他の認証を追加したい場合は、「新しいプロパイダを追加」をクリック

Enable Storage On Firebase：ストレージの利用を有効にする　→非対応
有料プランへのアップグレードが必要になる為、今回は非対応とする。必要に応じて追加を検討する。
Project Setup Step３：追加セットアップ
4でFirebaseの設定を行なっている場合
→「deproyed」を押下

4でFirebaseの設定を行なっていない場合
Firebaseを追加するために必要な手順があるので、[Prerequisites]の内容に従って手続きを行う（Firebase プロジェクトIDの作成）
必要な時に準備したらいいので、後回しにして[Start Bullding]でもOK

以上でアプリ作成の準備が完了！

次回から実際のアプリ開発に入っていきます！

ちなみに今回はテンプレートを使ったので、今の時点でUIがほぼ出来上がっています。

========前回までのフローログ（テンプレでなく空欄で作成した場合========

* Googleアカウントとの連携

* Select Initial Page：最初のページの設定。私はテンプレから[Auth2]を選択

 補足：FirebaseでできることFirebaseではさまざまなバックエンド機能を簡単に活用出来るように準備しています。
認証：メールアドレス、Facebook、Twitter、GitHub、GoogleのIDでログイン認証を行うことができる
ストレージ：ユーザー作成コンテンツの保存と取得
データ保存：リアルタイムでデータを保存して同期
分析：ユーザーのエンゲージメントを測定・分析する

など

 料金FlutterFlowは無料でも使えますが、課金することでさらに機能の幅が広がります。

背景

手順

新しいプロジェクトを作成

補足：Firebaseでできること

料金

Discussion