【bubble】APIで外部からbubbleにデータを登録する（Workflow API編）

Data APIについて書いたので、Workflow APIについても書きたいと思います。

前に作成した勤怠系システムでも利用しましたが、外部システムから特定のユーザーでデータを登録したいことがあると思います。たぶんData APIよりこっちが主流かもしれない。

必要なもの

・Personal以上の有料プラン

・外部からAPIを呼び出すコードを書く知識（なければZapierとか使ってみよう）

・対象アプリにログインしたユーザーが存在すること

なお、特定のユーザーではなくtokenで登録する場合は、Data APIのときと同じようにAjaxのheaderを設定し、ログインワークフローをしなければよいです。

Workflow APIの利用準備

Ｅｎａｂｌｅ　Ｗｏｒｋｆｌｏｗ　ＡＰＩ　ａｎｄ　ｂａｃｋｅｎｄ　ｗｏｒｋｆｌｏｗｓにチェックを入れます。エラー出ちゃったんで全角ですみません。

bubbleでは、通常のAPI呼び出しのようにユーザー名：パスワードで認証をするのではなく、ワークフロー内でログインをする必要があるのでtokenも作っておきます。

Workflow APIを定義

ここでは、Data APIでも利用したタイプdataに、入力したnameとnumberを新しく登録することにします。

backend workflowの画面でAPI workflowを作成し、名前をcreateDataとします。

この名前がエンドポイントになるので、エンドポイントは以下です（小文字）。

https://sample-template-app.bubbleapps.io/version-test/api/1.1/wf/createdata

このワークフロー内では、以下のような流れです。

パラメータを受け取り、ログインする
ログインが成功したら、Custom Eventを実行
Custom Event内ではパラメータから新しいdataを登録し、レスポンスを返却する

まず、createDataで受け取るパラメータを設定します。name、number、id（メールアドレス）、passを用意します。

ログインアクションを設定します。ログイン時のEmail、Passwordはワークフローで受け取るidとpassを設定します。

ログインが成功したら、Custom Eventを実行したいのでCustom Eventを作成します。Custom Eventでは、createDataのパラメータ name、numberを引き継ぎます。

createDataのフロー内で、上記のCustom Eventを呼び出します。パラメータはcreateDataで受け取ったパラメータをそのまま設定し、実行条件にログイン中であることとします。

Custom Event内で、受け取ったパラメータをdataタイプに登録します。

APIのレスポンスを設定します。アクションは「Return data from API」を選択します。

ここでは、登録結果をそのまま返却しています。

呼び出し元のAjaxを作る

ここでは簡易化のためにユーザー名、パスワードはソースコードに書き込んでしまいます（当然ですが本来はやらないでください）。HTMLファイルは、都道府県名と番号を入力し、送信するフォームのみにします。

都道府県名と番号を入力し送信をクリックすると、特定のユーザーでAPIにログインし、データを書き込む流れとします。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ajax 登録</title>
  </head>
  <body>
    <form>
      <p>
        <label>都道府県名</label>
        <input type="text" name="name" />
      </p>
      <p>
        <label>番号</label>
        <input type="number" name="number" />
      </p>
      <input type="button" id="button" value="button"/>
    </form>
    <br/>
    <div id="text"></div>

    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <script>
      $(function() {
        let user = 'ログインできるメールアドレス';
        let pass = 'ログインできるパスワード';
        let token = '作成したトークン';

        $('#button').click(function() {
          let sendData = {
            id : user,
            pass : pass,
            name : $('input[name="name"]').val(),
            number : $('input[name="number"]').val(),
          };

          $.ajax({
            url: 'https://アプリ名.bubbleapps.io/version-test/api/1.1/wf/createdata',
            dataType: 'json',
            type:'POST',
            data : sendData,
            headers: {
              Authorization: 'Bearer ' + token
            },
            success: function(data) {
              $('#text').html(JSON.stringify(data));
              console.log('完了');
              console.log(data);
            },
            error: function(err) {
              console.log(err);
              console.log(err.responseJSON);
              $('#text').html('Code:'+err.responseJSON.statusCode + '\nMsg:' + err.responseJSON.message);
            }
          });
        });
      });
    </script>
  </body>
</html>

ユーザー名とパスワードは、実際にログインできるアプリに登録済みのものを設定してください。

URLは先ほどのエンドポイントを指定します。

実行してみる

作成したHTMLをAjaxが実行できる環境で実行すると、inputフォームが2つとボタンが1つだけのシンプルな画面が表示されます。

都道府県名と番号を入力して、buttonをクリックしてください。

buttonクリック後、下部にsuccessとその他jsonが表示されれば成功しています。ここでは、ログインしたユーザー用のトークンと有効期限が表示されています。このトークンを使えば、有効期限内でこのユーザーとして認証できますが、今回の例ではログインしたらそのままデータを登録してしまっているのであまり関係ないです。

でもなんで登録結果が返却されないのだろう、謎🤔

ちなみに去年調べたときは有効期限は1年間で変更できなかったです。。

では、bubbleに登録されているか確認してみます。