SAP AppGyverとGoogle Firebaseの連携について

2023年12月27日

GSL Tech Blogでは、過去にSAP AppGyverについてご紹介してきました。

SAP AppGyverは、SAP BuildにおけるiOS、Android、デスクトップ、Webなど多くのデバイスに対応したアプリケーションを簡単な操作で作成できるローコード・ノーコードツールです。

しかし、SAP AppGyverには、ユーザー認証機能など一般的に必要となる機能が、まだ標準で提供されていません。そのため、スクラッチでの開発が必要です。

そこで、Google社が提供するGoogle Firebase(以下 Firebase)を利用します。

Firebase は、SAP AppGyverとの接続が標準でサポートされており、ユーザー認証だけでなく、ストレージ機能なども用意されています。このサポートのおかげで、SAP AppGyverをFirebaseと連携させ、より簡単にアプリケーションを作成することが可能です。

今回は、SAP AppGyverとFirebaseの連携までをご紹介します。ぜひ、ご一読ください。

1．今回の検証範囲

今回の検証は、SAP AppGyverとFirebaseの連携です。

なお本記事では、SAP AppGyverとFirebaseには、すでにユーザ登録されている前提で解説します。実施する場合、事前に両サービスへのユーザ登録をお願いします。

2．SAP AppGyverとFirebaseの連携の流れ

SAP AppGyverとFirebaseの連携の流れは、以下の通りです。

2-1．Firebaseでプロジェクト作成

2-2．Firebaseアプリケーションの作成

2-3．SAP AppGyverでプロジェクト作成

2-4．SAP AppGyver Connectorの設定

以下で、詳細を順に見ていきます。

2-1．Firebaseでプロジェクト作成

2-1-1．Firebase(Firebase | Google’s Mobile and Web App Development Platform)からプロジェクトを作成します。任意のプロジェクト名を設定します。

2-1-2．Googleアナリティクスを使用するため、トグルを有効に設定します。Googleアナリティクスアカウントを選択し、プロジェクトを作成します。

2-2．Firebaseアプリケーションの作成

2-2-1．Firebaseプロジェクトが作成後、Web、iOS、Androidの各アプリケーション(以下アプリ)を追加します。

2-2-2．Webアプリを追加します。アプリのニックネームを設定し、Firebase Hostingのチェックボックスにチェックをいれ、アプリを登録します。最後のステップまで進み、Firebase Hostingへのデプロイを完了させます。

2-2-3．iOSアプリを追加します。AppleバンドルIDとアプリのニックネームを設定し、アプリを登録します。

【２設定ファイルのダウンロード】でGoogleService-info.plistをダウンロードします。

ダウンロード後、最後のステップまで進み、iOSアプリの登録は完了です。

2-2-4．Androidアプリを追加します。Androidパッケージ名とアプリのニックネームを設定し、アプリを登録します。

【２構成ファイルをダウンロードして追加する】でgoogle-services.jsonをダウンロードします。

ダウンロード後、最後のステップまで進み、Androidアプリの登録は完了です。

2-3．SAP AppGyverでプロジェクト作成

2-3-1．SAP AppGyverのロビーからプロジェクトを作成します。

プロジェクト名はアルファベットで任意の名前を設定します。

作成ボタンを押して、SAP AppGyverプロジェクトの作成は完了です。

2-4. SAP AppGyver Connecterの設定

2-4-1．作成したSAP AppGyverプロジェクトのDataタブを選択し、【CONFIGURE GOOGLE FIREBASE】へ進みます。

Firebaseのトグルを有効に設定します。

2-4-2．Web、iOS、Androidのapp configuration設定が表示されるため、すべてのトグルを有効に設定します。

2-4-3． iOS app configurationを設定します。設定する項目はiOS app ID、iOS API Keyの2項目です。

FirebaseにiOSアプリを追加する際にダウンロードしたGoogleService-info.plistを開き、入力する値を確認します。

iOS app IDにはGOOGLE APP ID、iOS API KeyにはAPI_KEYの値を入力します。

2-4-4． Android app configurationを設定します。設定する項目はAndroid app ID、Android API Keyの2項目です。

FirebaseにAndroidアプリを追加する際にダウンロードしたgoogle-services.jsonを開き、入力する値を確認します。Android app IDにはclient_info.mobilesdk_app_id、Android API Keyにはapi_key.current_keyの値を入力します。