SAP AppGyver x Firebase① Google Firebaseとの連携

[NaotoAkiyama]

はじめに

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

• 第２回：SAP AppGyver x Firebase② Firebase Authenticationによるユーザー認証機能


• 第３回：SAP AppGyver x Firebase③ Cloud FirestoreとFirebase Storageによるデータベース・ストレージ機能

SAP AppGyver

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

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

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

第１回ではGoogle Firebaseの連携に必要な基本設定について説明します。

目次は以下の通りです。

1. Firebase プロジェクトの作成


2. 各アプリケーションの追加


3. SAP AppGyver Connectorの設定

対象者

• SAP AppGyverでアプリを作ったことがある人（簡易的なものでもOK）


• Firebaseを初めて触る人

必要準備

• SAP AppGyver、Firebaseのアカウントの作成

1. Firebase プロジェクトの作成

まず、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アプリの作成が終わりました。

これで、Firebase側の設定は終了です。

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を使うことで、ユーザー認証機能やデータベース機能、ストレージ機能を簡単に付け加え、アプリ開発の幅を広げます。

次回は、各機能の追加方法について紹介します。ぜひご覧ください。

• 第２回：SAP AppGyver x Firebase② Firebase Authenticationによるユーザー認証機能


• 第３回：SAP AppGyver x Firebase③ Cloud FirestoreとFirebase Storageによるデータベース・ストレージ機能

参考：Google Firebase connector