Technical Articles
SAP AppGyver x Firebase① Google Firebaseとの連携
はじめに
本ブログではSAPのローコード・ノーコードプログラミングツールであるSAP AppGyverとGoogle Firebaseの連携について３回にわたって紹介します。
- 第２回：SAP AppGyver x Firebase② Firebase Authenticationによるユーザー認証機能
- 第３回：SAP AppGyver x Firebase③ Cloud FirestoreとFirebase Storageによるデータベース・ストレージ機能
SAP AppGyver
モバイル、デスクトップ、ブラウザ、テレビなど、あらゆるデバイスに対応したアプリケーションが作成可能なノーコードプラットフォームです。ドラッグ＆ドロップの操作を中心に少ないコーディングで簡単にアプリケーションを開発できます。
今回は、SAP AppGyverで接続やロジックの作成が標準でサポートされているGoogle Firebaseを使用します。Google Firebaseと連携させることで、簡単にユーザー認証機能やデータベース機能、ストレージ機能を付け加えることができ、開発できるアプリケーションの幅を広げることができます。近々に、SAP AppGyverオリジナルとなるBackend as a Serviceの機能がリリース予定となっていますので、そちらの機能にもご期待ください。
第１回ではGoogle Firebaseの連携に必要な基本設定について説明します。
目次は以下の通りです。
- Firebase プロジェクトの作成
- 各アプリケーションの追加
- SAP AppGyver Connectorの設定
対象者
- SAP AppGyverでアプリを作ったことがある人（簡易的なものでもOK）
- Firebaseを初めて触る人
必要準備
- SAP AppGyver、Firebaseのアカウントの作成
1. Firebase プロジェクトの作成
以下の画面でプロジェクトの名前を設定します。規約に同意し、続行を押すとGoogle Analyticsの設定画面が出てくるので、有効にします。（ここで、Google Analyticsを有効にしない場合、後ほど使用するmeasurementIdが表示されないのでご注意ください。）
ステップを進め以下のような画面が表示されれば、無事プロジェクトの作成が完了しています。
2. 各アプリケーションの追加
2.1 Webアプリの追加
続いては、FirebaseにWebアプリ、iOSアプリ、Androidアプリを追加していきます。
まずは、Webアプリを追加します。
ステップ1：アプリの名前を付けて登録します。
ステップ2：こちらの内容は後ほど利用しますが、そのまま次へを押します。
ステップ3およびステップ4の内容は今回必要ないので、スキップします。
以上で、Webアプリが追加されました。
2-2 iOSアプリの追加
続いて、iOSアプリをFirebaseに追加します。
ステップ1：AppleハンドルIDおよび名前を付けて登録します。今回はSAP AppGyverを使うため、AppleハンドルIDは任意のIDで問題ありません。
ステップ2：後ほどSAP AppGyver側の設定で利用するGoogleService-info.plistファイルをダウンロードしておきます。
ステップ3、4、5は今回必要ないので飛ばします。
2-3 Androidアプリの追加
最後にiOSアプリと同様にAndroidアプリを追加します。
ステップ1：Androidパッケージ名および名前を付けて登録します。今回はSAP AppGyverを使うため、Androidパッケージ名は任意のIDで問題ありません。
ステップ2：後ほどSAP AppGyver側の設定で利用するgoogle-services.jsonファイルをダウンロードしておきます。
ステップ3、4は今回必要ないので飛ばします。
以上で、Webアプリ、iOSアプリ、Androidアプリの作成が終わりました。
3. SAP AppGyver Connectorの設定
続いて、SAP AppGyver側の設定を行っていきます。
まず、下の画面のようにDATAタブのCONNECTIONSを開きます。今はGoogle FirebaseのトグルがOFFになっているので、ONに変更します。
さらに、各アプリのapp configurationをONに変更します。
以下の表のように、IDやkeyを設定していきます。
- 全体
| Project ID | projectId |
| Auth domain | authDomain |
| Measurement ID | measurementId |
| Storage bucket | storageBucket |
| Messaging sender ID | MessagingSenderId |
- Web app configuration
| Web app ID | appId |
| Web API key | apiKey |
- iOS app configuration
| iOS app ID | GOOGLE_APP_ID |
| iOS API key | API_KEY |
| iOS client ID | CLIENT_ID |
- Android app configuration
| Android app id | client_info.mobilesdk_app_id |
| Android API key | api_key.current_key |
| Android client id | oauth_client.client_id |
全体の設定およびWebの設定は、プロジェクト設定の下部のWebアプリの設定を参照します。
iOSアプリの設定は、先ほどiOSアプリを作成したときにダウンロードしたGoogleService-Info.plistファイルを、Androidアプリの設定は、Androidアプリを作成したときにダウンロードしたgoogle-services.jsonファイルを参照します。
以上で、SAP AppGyver側の設定を終わります。
まとめ
今回は、SAP AppGyverとGoogle Firebaseの連携の基本設定を行いました。SAP AppGyverで標準でサポートされているGoogle Firebaseを使うことで、ユーザー認証機能やデータベース機能、ストレージ機能を簡単に付け加え、アプリ開発の幅を広げます。
次回は、各機能の追加方法について紹介します。ぜひご覧ください。