おすすめ記事

おすすめ記事一覧

Bubble・APIの使用例

Image result for ノーコード bubble

みなさんこんにちは。ノーコードツールbubbleには慣れてきたでしょうか。本日はAPIの使用例についていくつかご紹介します。それでは早速行ってみましょう!

APIの使用例

APIは外部サービスにアプリに接続させるためのものなので、それぞれのケースで実装が異なります。ここでは、実際の状況でbubble APIを使用する方法の3つの異なる例を紹介します。

Stripeのサブスクリプション料金が失敗した場合のユーザーへの通知

 他のサービス側で何かが起こったときにアプリが何らかのアクションを取るようにする ことは、bubble APIの典型的なユースケースです。ここでは、bubble側とStripe側の両方の異なるステップを説明します。まず、Stripeプラグインがすでにインストールされていて、関連するキーが「プラグイン」タブに入力されているアプリから始めます。また、私たちの支払いワークフローがユーザーのStripeの顧客IDをユーザーに保存していることを想定しています。Stripeが提供するIDからユーザーのモノ(thingのことです)に移動し、メールを取得します。

この例では、アプリのドメインを

https://stripeexample.bubbleapps.io

にすることを想定しています。

トップナビのページナビゲータからアクセスできるBackend Workflowsページのbubble側から始めます。Stripeがクレジットカードのチャージに失敗した時に呼び出されるAPIエンドポイントを定義する必要があります。このAPIワークフローは、顧客にカードの更新を促すメッセージをメールで送信するアクションを持つ必要があります。それではまず、’chargefailed’と呼ぶ新しいAPIイベントを作成してみましょう。

このエンドポイントを公開して、Stripeがwebhook(下記参照)を介してトリガーできるようにし、シンプルにするために認証なしで実行できるようにしています。

Stripeのドキュメントを見ると、StripeがWebhookをトリガーしたときに何を送るかがわかります。Stripeのサーバーはエンドポイントへのリクエストを行い、リクエストのボディにイベントIDを送信します。そのため、 idパラメータをtext型の呼び出しに追加しています 

これで、メール送信アクションの構築を始めることができます。そのためには、下記のいくつかのことをしなければなりません。

1, このユーザーに電子メールを送信するには、電子メール送信アクションを使用します。

2, Stripeから送られてきたイベントIDを使用して、イベントオブジェクトを取得します。このイベントには、チャージオブジェクトと顧客IDが含まれています。

3, この顧客IDを持つユーザーを検索するには、bubble内で検索を実行します。

4, 親切な注意書き(注意喚起)を書く

まずはアクションを追加するところから始めて、Toフィールドに取り組んでいきます。この作業では、何が必要なのかから考えて、そこから上に行くことが重要です。そこで、まずはUsersの検索から始め、Customer IDフィールドに制約を追加し、StripeからのAPIコールの結果として値を定義します。以下がその検索です。

preventイベントの顧客IDを取得するには Stripeプラグインでは、 イベントIDからイベントオブジェクトを取得するための呼び出し を提供しています。Stripeへの呼び出しを行うと、イベントIDが検証され、イベントオブジェクトが返されます。このオブジェクトから、Stripeの顧客IDを取得することができます。そこで、ここで必要なのが「APIからデータを取得する」というデータソースです。

APIコールは’Get Stripe event’で、Stripeに送信する必要があるevent_idは、最初のリクエスト(webhook)から取得したものを正確に表しています。このパラメータはドロップダウンの最初のエントリで、我々はそれを選択します。

この段階では、我々はStripe Eventオブジェクトを取得していて、顧客IDを取得する必要があり、私たちの検索(サーチ)は準備ができているでしょう。

「メール送信」検索のToフィールドに戻って、そのユーザーのメールを取得することができます。検索はユーザーのリストを返すことに注意してください。この場合、顧客IDが各ユーザーに固有のものであることはわかっていますが、 1人のユーザーのリストからそのユーザーのリストに移動してメールを取得するためには、リストの最初の項目を取得する必要があります。 

これで、送りたいメッセージを追加してアクションを完成させることができました。

bubble側の準備は万端です。ワークフローが何をするのかまとめてみましょう。

1, Stripeから送られてきたイベントIDをwebhookで取得します。
2, イベントオブジェクトをフェッチして、顧客IDを取得します。
3, アプリケーションのデータベースで検索を実行し、この顧客IDを持つユーザーを取得します。
4, 検索で取得したユーザーにメールを送信します。

Webhookを設定するためにStripeに向かいます。チャージが失敗した時に、このURLへのウェブフックをトリガーします。

https://stripeexample.bubbleapps.io/api/1.1/wf/chargefailed

これで準備万端です!  チャージが失敗するたびにWebhookがトリガーされ、bubbleからメールが送られてきます。 このようなワークフローの実行は、サーバーログで見ることができます。

月に一度のニュースレターの配信

この例では、毎週のメールでユーザーがオプトインとオプトアウトができるシステムを作成する方法を紹介します。ここでは、毎週のアクションを設定するためのロジックとワークフローを説明しますが、メールの内容は説明しません。まず、設定タブのアプリでPOST/ワークフローAPIを有効にすることから始めます。これを行うには、bubbleの有料プランに加入している必要があることに注意してください。

これが終わったら、アプリのAPIページに向かい、新しい定期的なイベントを作成します。

このイベントを「ニュースレター」と呼んでみましょう。ニュースレターの購読はユーザーに紐付けられているので、モノ(thing) の種類としてユーザーを選びます。

このワークフローは、このワークフローに送信されるユーザ(「現在のワークフローユーザ」)に電子メールを送信するアクションを1つ持っています。

アプリ内のページに移動して、ユーザーにこのニュースレターからのオプトインまたはオプトアウトのオプションを提供します。ここでは、2つのボタンが表示されている非常にシンプルな「アカウント」ページで行います。

このページに2つのワークフローを追加する必要があります。このページでは、ユーザーはログインしていると仮定し、サンプルページではこれを強制していません。最初のワークフローでは、ユーザーにオプトインを許可します。これは、ユーザーが「オプトイン」ボタンをクリックしたときにトリガーされ、「定期的なイベントの設定/キャンセル」を使用します。

このアクションはイベントとモノを受け取ります。この場合、イベントは「ニュースレター」、モノは「現在のユーザー」です。翌日の午前9時から毎週ニュースレターが送信されるようにワークフローを構築しました。

オプトアウトのワークフローは、頻度が「none」になることを除いて、全く同じ構造を共有しています。 実質的に、これは予定されていた定期的なイベントをキャンセルします(最初にイベントが予定されていない場合は何もしません)。  

データベースからデータを読み込むスクリプトを書く

GET/Data APIを使用すると、プログラムでデータを読み込むことができます。これは他のアプリケーションが行うこともできますが、データを保存したり印刷したりするためのスクリプトで使用することもできます。この例では、Pythonでこれを行う方法を示しています。ドメインyourapp.comでホストされているアプリのためにこのスクリプトを書いていますが、目標はすべての請求書を取得することです。これは、アプリが’invoice’という名前のタイプを持っていると仮定しています。制約は追加していませんが、制約を追加するのは比較的簡単なことだと思います。

このようなスクリプトのキーコンセプトはページネーションです。APIへのリクエストを行う際には、どこから始めるか、取得するアイテムの数を定義する必要があります。GET APIからの各レスポンスは、残りのアイテム数を返します。この例では、前回の呼び出しの最後の項目に1を加えたところから開始したいと考えています。

このようなスクリプトは、データを印刷する代わりにデータを保存したり、いくつかの制約に適合するデータを照会したりするために使用することができます(そして適応させることができます)。

まとめ

いかがだったでしょうか。今回の記事ではノーコードツールbubbleのAPIの使用例についていくつかご紹介しました。写真が多かったので、写真をベースに理解されたかもしれませんが、同時に文章も読むとまた一段と深く理解することができると思います。それではまた別の記事でお会いしましょう。See You Soon!

 

 

 

 

 

Katsu

Katsu

高校まで日本で育ち、大学からアメリカ・ニューヨークへ。マスメディア、ジャーナリズム、インターネットメディア戦略を専門に修学。コロナ禍でオンライン主体になりつつある世の中で、記事が何かの手助けになれば幸いです。







関連記事

  1. 記事作成

    Bubbleアプリの公開・非公開の仕組みに迫る!!

  2. 記事作成

    Bubbleのプラグインにおける要素・アクションのビルドを説明してみた!!

  3. Adalo Resource・ACHペイメントと銀行送金(Stripe)(スクリーンとコンポーネント…

  4. 記事画像

    無料でも利用できるグラフィックデザインソフトはこれだ!!

  5. 記事作成

    Bubbleのパスワードポリシーとビジュアル設定を深堀りしてみた!!

  6. 記事作成

    Bubbleアプリに独自ドメイン名を使用する方法を解説してみた!!

  7. 記事作成

    Bubbleの専用クラスタについて解説!!

  8. 会社ロゴ

    .bubble

  9. 【体験談】記事作成中に使っているツールのご紹介!

人気記事

  1. topimage
  2. 記事画像
  3. 特集記事
  4. top_image

おすすめ記事一覧

  1. 記事画像
  2. 記事画像
  3. 記事画像
  4. 飲食店 会計
  5. 勤怠管理
PAGE TOP