SAP AppGyver x Firebase③ Cloud FirestoreとFirebase Storageによるデータベース・ス...

はじめに

本ブログではSAPのローコード・ノーコードプログラミングツールであるSAP AppGyverとGoogle Firebaseの連携について３回にわたって紹介します。

SAP AppGyver

モバイル、デスクトップ、ブラウザ、テレビなど、あらゆるデバイスに対応したアプリケーションが作成可能なノーコードプラットフォームです。ドラッグ＆ドロップの操作を中心に少ないコーディングで簡単にアプリケーションを開発できます。

参考：SAP AppGyverの基本　変数の操作

今回は、SAP AppGyverで接続やロジックの作成が標準でサポートされているGoogle Firebaseを使用します。Google Firebaseと連携させることで、簡単にユーザー認証機能やデータベース機能、ストレージ機能を付け加えることができ、開発できるアプリケーションの幅を広げることができます。近々に、SAP AppGyverオリジナルとなるBackend as a Serviceの機能がリリース予定となっていますので、そちらの機能にもご期待ください。

前回は、Firebase Authenticationによるユーザー認証機能について説明しました。今回は、Cloud FirestoreとFirebase Storageによるデータベース機能、ストレージ機能の追加について説明します。目次は以下の通りです。

1. Cloud Firestore
   1. Firebase側の設定
   2. Firebaseコレクションの作成
   3. ルールの変更
   4. Dataの設定
   5. Data variableの設定
2. Firebase Storage
   1. Firebase側の設定
   2. Firebaseコレクションの作成
   3. ルールの変更
   4. Firestorage upload files機能

• SAP AppGyverの基本が分かる人
• Firebaseを初めて触る人

• SAP AppGyver、Firebaseのアカウントの作成
• SAP AppGyverとFirebaseの連携済み（第1回のブログの内容）

1. Cloud Firestore

Firebaseでは、Cloud FirestoreとRealtime Databaseの2つのクラウドデータベースを提供していますが、SAP AppGyverでは、Cloud Firestoreをサポートしているので、今回はCloud Firestoreを使用します。

1-1. Firebase側の設定

まず、FirebaseのダッシュボードよりFirebase Databaseを開き、データベースの作成をクリックします。

本番環境モードとテストモードのどちらかを選ぶようになりますが、今回は、オープン状態で迅速なセットアップが可能なテストモードを使用します。次のステップでは、Cloud Firestoreのロケーションが出てきますが、東京リージョンであるasia-northeast1を選択します。

1-2. Firebaseコレクションの作成

それでは実際にデータ構造を定義していきます。Cloud FirestoreはNoSQLドキュメント指向データベースであるため、テーブルや行はなく、以下のようなデータモデルになっています。

まず、コレクションを開始をクリックし、コレクションidを設定します。今回はユーザー情報に関するデータベースを作成するため、usersとします。

続いて、ドキュメントIDを手入力または自動IDを用いて設定します。フィールドの内容については、SAP AppGyver側で設定するので、未記入で問題ありませんが、姓や名といった項目を作成します。

1-3. ルールの確認

ルールタブでは、データにアクセスできるユーザーやデータの構成の定義ルールを設定し、データを保護します。今回は、2022/6/26までであれば、自由に読み書きできる設定になっています。

1-4. Data Resourceの設定

続いて、SAP AppGyver側の設定を行います。DATAタブよりDATA RESOURCESを開き、新しいデータリソースを追加します。今回は、追加するデータリソースとしてGoogle Firebase/Cloud Firestoreを使用します。設定の画面では任意の名前と先ほど作成したコレクション名を設定します。

そして、Resource Schemeにおいて、先ほどの各ドキュメント内のフィールドの項目を制御します。下部のAdd new propertyより新しいフィールドの項目を追加できます。

1-5. Data variableの設定

次に、実際にCloud Firestoreにあるデータを利用するために、Data variableの設定を行います。今回のusersのデータを使いたいページを開き、Variablesビューに変更します。

Data variablesタブを開き、Add Data variablesより、USERS1を追加します。

以上の設定によって、Data variablesを介し、データの取得、追加、変更といったアクションを行うことができるようになります。

1-6. データの取り扱いについて

データの取得

表示させたいテキストのPropertiesより、ContentでFormulaを選択すると下のような画面が出てきます。左側の項目よりData variablesを選択することで、候補が出てきます。

今回は、ひとつめのデータのF_NAMEを選択します。

L_NAMEについても同様に設定すると以下のように、名前を表示することができます。

データの追加・更新・削除

データの追加・更新・削除するには、ロジックのGet record、Create record、Delete recordを使用します。今回は、サインアップするときに、姓、名、emailの情報をデータベースに追加する方法をご覧いただきます。

下の画面のようにテキストを追加、さらには新たに作成したPage variablesを設定した後、Sign upボタンのロジックを開きます。左の一覧よりCreate recordを選択し、下の画面のように接続します。

そして、左のProperties内のRecordを以下のように、それぞれのPage variablesと接続します。

以上のステップによって、サインアップするときに、usersコレクションのなかに姓、名、emailを追加することができます。

2. Firebase Storage

Firebase Storageは、画像や動画、音声ファイルを保管することができるサービスです。今回は、Firebase Storageを使って、ユーザーの写真をアップロード、そして表示させる機能を追加します。

2-1. Firebase側の設定

左側のメニューバーからStorageを選択すると、下のような画面になります。Firebase Storageはすでに使用できる状態になっております。

続いて、ルールタブを開き、ファイルのアップロード、読み取りのルールを設定します。下の画面のように、allow read, write: if false;　→　allow read, write: if true;　へと変更し、アップロードおよび読み取りを許可します。公開ボタンを押すことで、ルールの変更を反映させることができます。公開した変更が反映されるまでには最大1分ほど時間がかかるそうです。

2-2. 写真のアップロード機能の追加

まずは、デバイスより写真ファイルを取ってくることができる Pick image form libraryをFlow Function Marketよりインストールします。カメラアイコンを選択し、ロジックを開き、Component tapブロックとつなぎます。そうすることで、アイコンをタップすると、デバイスの写真フォルダが開きます。

そして、写真を選択することで、ファイルの名前や場所のパス、作成日時などの情報がアウトプットポートより出力されます。

続いて、Firebase Storageに写真をアップロードすることができる Firebase Storage upload filesをFlow Function Marketよりインストールします。下の画面のように Pick image from libraryブロックに接続します。

Firebase Storage upload files のプロパティより、Files to upload項目でList of valuesを選択します。そして、Add a valueによって、値を追加します。

パスや名前をひとつずつ、マッピングしていきます。ここで、直接 Output value of another nodeよりデータを選択しないのは、Pick image from libraryの出力するデータが、オブジェクト型であるのに対して、Firebase storage upload filesのインプットがリスト型とデータの型が違うからです。

path、name、size項目のみ、それぞれ Output value of another nodeより該当するデータを選択していきます。

以上によって、デバイスの写真をFirebase Storageにアップロードすることができます。実際に、Firebaseのダッシュボードを見て確認してみましょう。

2-3. 写真の表示

写真の表示は、Pick image from libraryから出力されたpathをImageコンポーネントに設定することで可能になります。そのため、ユーザーごとにURLを第２回のブログで作成したデータベースに保存します。

現在、ログインしているユーザーの写真のURLをCloud Firestoreに保存するために、下の画像のようにロジックを組みます。

更新するデータのidが求められるので、Formulaを使って設定します。ここでは、usersコレクションのデータのなかで、現在ログインしているユーザーのメールアドレスと同じドキュメントを選びだし、そのドキュメントのidを抽出しています。

そして、Recordプロパティでは、新しく追加したphoto_urlの項目のみ、Firebase Storage upload filesのdownloadUrlを設定します。

以上によって、Imageコンポーネントで、URLを設定してあげることで、ユーザーの写真を表示させることができます。

まとめ

今回は、Cloud Firestore および Firebase Storageによるデータベース機能、ストレージ機能について説明しました。Firebaseを使用することで、データや写真を追加したり、取得したりする機能を簡単に追加することができました。

第三回にわたりSAP AppGyverとGoogle Firebaseの連携について紹介してきましたが、いかがでしたでしょうか。Google Firebaseと連携することで、ユーザー認証機能やデータベース機能、ストレージ機能を加えることができ、SAP AppGyverでアプリを作る上で、いろいろな選択肢を与えることができると思います。

ぜひ、SAP AppGyverとFirebaseを連携して、さまざまなアプリを作ってみてください。