Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
NaotoAkiyama
Advisor
Advisor


はじめに


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

SAP AppGyver

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

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

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

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

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

参考:Google Firebase connector