Skip to Content
Technical Articles
Author's profile photo Naoto Akiyama

SAP AppGyver x Firebase① Google Firebaseとの連携

はじめに

本ブログでは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

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.