このチュートリアルでは、どのようにすれば Bubbleと AppMaster.開発中のアプリケーションのフロントエンドはBubble で作られていますが、バックエンドと連携するための機能が不十分であることが判明し、AppMaster の機能を使用することになったとします。
方法を考えてみましょう。
- AppMaster をデータベースとして使用しBubble
- APIリクエストの送信先Appmaster
- ユーザー認証を行う
- リクエストヘッダで認可トークンを使用する
設定するAPI Connector
まず最初に、Bubble から外部APIリクエストを送信できるようにする必要があります。 これを行うには API Connectorプラグインを追加します。
早速、AppMaster に認証リクエストを送信するように設定しましょう。私たちのタスクは、ログイン名とパスワードを送信して、その応答として認証トークンを受け取ることです。デフォルトですべてのプロジェクトに作成される標準的なエンドポイントを使用します。 POST /auth/ (Auth: Authentication).これに関する完全な情報、およびあなたのプロジェクトで要求する正確なアドレスは、Swaggerから取得できます。
API Connector を設定するには、次のボタンをクリックします。 Add Another APIボタンをクリックし、使用するリクエストパラメータを設定します。重要なパラメータは以下の通りです。
- リクエストの方法POST
- URLを指定します。からRequest URL と同じ。Swagger
- Use as. Data.応答として、認証トークンデータを受け取る必要があります。
- Data type. JSON
- Body.その中で最も重要な設定は、AppMaster サーバーに送信されるデータを指定する必要があることです。同時に、<>には、対応する入力フィールドから取得する必要がある動的な値が含まれています。
{
"login": "<login>",
"password": "<password>"
}
入力の際には、テストリクエストのデータを指定し (Body parameters にログインとパスワードの値を入力し)、リクエストを初期化し、正しく動作して本当に回答が来ることを確認する必要があります。
入力フィールドのセットアップ
次のステップはアプリケーションのインターフェイスを作成することです。ここでは必要最小限のものに限定しています。3つの入力フィールドを作成する必要があります。
- ログイン
- パスワード
- 認証トークン
最初の2つはごく当たり前のことです。これらは、認証のためのユーザーのユーザー名とパスワードを示します。最も興味深いのは、3番目のフィールド - トークンのフィールドです。トークンの値は手動で入力することもできますが、私たちのタスクは、AppMaster バックエンドからデータを受け取り、そこに表示することを可能にすることです。
これを行うには、コンテンツの初期値を設定する必要があります。
- Get data from an External API を、 (この例では、名前は ) で以前に作成されたリクエストの選択で設定する必要があります。API Connector AppMaster Auth Call
- (body) login と(body) password のフィールドに、対応する入力フィールドから値を指定する必要があります。
- token の値を選択する (リクエストに対するレスポンスにはさまざまなデータが含まれるが、この例ではtoken のみが注目される)
その結果をテストすることができます。ログインとパスワードのフィールドにデータを入力すると、AppMaster バックエンドに自動的にリクエストが行われます。データが正しく入力され、リクエストが成功した場合、受け取った認証トークンが3番目のフィールドに表示されます。
GET データベースへのリクエスト
次のステップでは、新しいAPIリクエストを作成します。今回のタスクは、データベースからデータを取得することになります。同時に、これらのデータは自由に利用できるものではなく、認可されたユーザーのみが利用できるという事実が、状況を複雑にしています。
これを行うには、リクエストに特別なヘッダを追加する必要があります。これはAuthorization と呼ばれるもので、その値は "Bearer" と先ほど取得した認証キーである必要があります。
実際にやってみましょう。API Connector プラグインに戻り、新しい API リクエストを作成する必要があります。スクリーンショットの例では、これは料理リストを取得し、メニューを作成するためにレストランのデータベースを呼び出すものです。
前のリクエストとの重要な違いは、パラメータの代わりに（パラメータを追加することもできますが）、ヘッダーが使用されていることです。
- Key = Authorization
- Value = Bearer {authorization token}(リクエストの初期化には、すぐに先ほど受け取った実トークンを指定する必要があります)
ヘッダーの設定で、Private のチェックボックスをオフにする必要があることに注意してください。さもないと、動的に生成することができません。最後に、リクエストを初期化して、それが動作することを確認することを忘れないでください。
Repeating Group 設定
さて、デザイナーに戻り、新しいRepeating Group要素を追加し、設定しましょう。
- Type of content- リクエストのデータ AppMaster Get Data.
- Data source- ヘッダを正しく指定することが重要です。 Authorizationヘッダを正しく指定することが重要です。これは2つの部分からなる。最初の定数は"Bearer."2番目の変数は認可トークンを含み、対応する入力フィールドから取得されなければなりません。
すべてが正しく行われた場合、データは受信され、最後のステップだけが残っています - あなたはそれらを表示する必要があります。これを行うには、2つのテキストフィールドを Repeating Groupに2つのテキストフィールドを追加し、それらをカスタマイズします。1つは料理の名前を表示し、もう1つはその価格を表示します。
出来上がったアプリを開いて、Bubble とAppMaster の統合が成功したことを確認することができます。フロントエンドはBubble.io で作られ、バックエンドに関連するものはすべてAppMaster.io で動きます。
- ユーザー認証が実行されている
- 受け取った認証トークンが表示される
- データベースとの連携が行われている
- 認証されたユーザーのみが利用可能なデータが表示される
