NetLify機能とZapierウェブフックであなた自身のJamstack APIを構築してください、パート1

APIを持っているすべてのものに慣れてきたので、APIを介してタスクを実行できない状況に遭遇すると、少しdisdisentingすることができます.これは、いくつかの並べ替えのAPIを介して任意の動的機能性が達成されているJamstackの世界では特に難しいことがあります.このポストでは、APIが存在しないか、必ずしもあなたが達成したいことを必ずしもしない場合に多くの場合に働くことができる解決策について話したい.
私は使用しているZapier しばらくの間.同様のサービスのようなIFTTT , それはあなたが“Xのイベントが発生するときにタスクをマッシュすることができますy”ファッションのタイプです.たとえば、私は自動的にメーリングリストのために誰かをサインアップするようなものを行うために使用しているときに、彼らは私が実行しているイベントを登録するか、または特定の時刻に新しいNetlifyビルドを実行します.しかし、Zapierも機能と呼ばれるWebhooks それは一種の“あなた自身のAPIを作成する”任意のサービスZapierにWebhookを接続することによって統合することができます.(注意: iftttも提供します.webhooks よく似ているようですね.
このチュートリアルでは、サードパーティ製のサービスに情報を送信し、Jamstackサイトにそれらを統合する方法Netlify Functions . この組み合わせを使用すると、迅速かつ簡単にJamstackサイト上で動的な機能を作成し、既存のAPIをサポートしていない可能性があります物事を行うサービスを作成することができます.

Note webhooks by Zapier are currently a premium feature.

この投稿からのサンプルコードはhttps://github.com/remotesynth/webhooks .

Webフック経由でデータを送信する

我々が見る最初のシナリオは、あなたのサイトからデータを受け取り、既存のサービスZapierにそのデータを渡すエンドポイントを持つWebhookを作成することです.

でのフックの設定

Zapierの中でエンドポイントとして新しいWebhookを作成することから始めましょう.開始するには、新しいZapとZapierによるwebhooksの検索を行います.その後、トリガイベントの種類を選択する“キャッチフック”は、私たちに投稿するZapierエンドポイントのURLを与える.

あなたが次のステップに続くとき、Zapierはあなたにあなたの終点URLを与えます.これは、我々が我々のGETまたはPOSTリクエストを送るところです.

あなたが複雑なデータを持っているならば、チャイルドキーはあなたが特定のキーの下でデータだけを選ぶのを援助することができました、しかし、我々の目的のために、それは必要でありません.ここで最善のことは、URLをプラグインのようなものにすることですPostman サンプルリクエストを送信します.あなたは、なぜ瞬間にわかるでしょう.私の場合では、これは単に名前と電子メールを取る単純なAPIになります.

webhookは成功ステータスを返す必要があります.それは本当に何のデータを送信する問題ではない、webhookはどんなデータを取るために設計されており、それを渡します.戻ってZapierで、[続行]をクリックし、サンプルデータを使用して要求を見る必要があります-これは我々がサンプルのリクエストを送信理由です.あなたが追加のリクエストを送信することができます、彼らはここに記載されます.つを選択すると、Zapの残りに送信されたデータをマップすることができます.をクリックして次のステップに移動します.

この例では、かなり簡単なことをしています.これは、データをGoogleシートに渡すことです.それで、明らかに、あなたはシートをセットアップする必要があります.それはデータをはるかに簡単にマッピングするようにヘッダーを含めることが最善です.Webhookに送られたデータに私の列マップを見ることができます.

次に、“これを行うには…”GoogleシートのZapier検索でステップ.アクションイベントの「スプレッドシート行を作成」を選択します.

あなたのアカウントを選択する必要があります-あなたはまた、ここでもZapier許可を認証し、付与する必要があります.

Googleアカウントが選択されたら、使用するスプレッドシート(私は以前に作成した簡単なシート)を選択し、そのスプレッドシート内のワークシートを選択し、最終的に列(ヘッダーヘッダーに基づいて)をZapier Webhook Endpointへの前の投稿からサンプルデータにマップします.

よろしい.我々はZapierで行われている-クリックして“テスト＆続行”を完了し、あなたのザップを有効にします.次に、私たちのJamstackサイトがZapier Webhookエンドポイントを呼び出すために使用されるnetlify関数を設定する必要があります.

Netlify関数の作成

netlify関数は、AIS上で実行されるServerless関数であり、APIを接続したり動的なタスクを実行することで、静的サイトからJamstackサイトにサイトを切り替えることができます.これは明らかにどんなプロバイダーの上でまっすぐなServerlessな雲機能を使用することによって達成されることができますが、NetLify機能の利点はJamstackアプリケーションの文脈の中でテストと配備を簡素化するということです.
起動するには、私たちのnetlify関数を配置するフォルダを作成しますlambda しかし、あなたはそれに名前を付けることができます.次に、netlify.toml サイトのルートで設定ファイルを設定し、次の設定を追加して、NetLifyにどこで関数を見つけます.

[build]
  functions = "./lambda"

さあ、我々の機能を作りましょう.私たちはAxios HTTPリクエストを処理するためには、まずnpm install axios --savedev . その後、.js ファイルをlambda フォルダ.それが何であるかは重要ではないが、私は私の名前zapierSend.js . そのファイルのソースを見てみましょう.

const axios = require('axios');


exports.handler = async (event, context, callback) => {
  try {
    if(!event.body) {
        return { 
            statusCode: 500, 
            body: 'Name and email are required.'
        };
    }

    const body = JSON.parse(event.body);
    const email = body.email;
    const fullName = body.fullName;
    if(!email) {
        return { 
            statusCode: 500, 
            body: 'email parameter required' 
        };
    }
    if(!fullName) {
        return { 
            statusCode: 500, 
            body: 'name parameter required' 
        };
    }

    return axios({
      method: 'post',
      url: 'https://hooks.zapier.com/hooks/catch/2422393/otw0s6l/',
      data:{
            'email':email,
            'fullName':fullName
      }
    }).then(res => {
      console.log(res);
      return {
        statusCode:200, 
        body: JSON.stringify(res.data)
      }
    })
    .catch(err => {
      return { statusCode: 200, body: JSON.stringify(err.response.data.errors[0]) };
    });

  } catch (err) {[]
    return { statusCode: 500, body: err.toString() };
  }

};

これは、主な機能がAxiosによって実行されるHTTP要求をラップすることであるかなり標準的なNetlify機能です.最初の部分は、event 渡されるオブジェクトfullName and email . 我々は、我々が郵便配達人と以前にしたように、我々が我々のアプリケーション内でJavaScriptから機能を呼ぶとき、これらを通過しています.要求が成功するならば、我々は200のステータスコードで送られるどんなデータも返します、あるいは、それが失敗するならば、我々は500のステータスコードで誤りを返します.

関数のテスト

では、関数を使ってテストしましょうNetlify Dev . netlify devは、Netlify CLI これにより、関数のローカルテストを含むNetLifyに配備されたJamstackサイトのローカルテストを簡単に行うことができます.
私は関数のテストが局所的に一般的には関数が最初にnetlifyに存在することを要求します.その後、任意の変更を再配備する必要がなくローカルでテストすることができます.一度それを行うと、ローカルで使用してサイトを起動netlify dev そして、postmanのようなツールを開き、新しいPOSTリクエストを作成します.サイトが88 8888(netlify devのデフォルトである)で動作していると仮定すると、関数のURLはlocalhost:8888/.netlify/functions/zapierSend . 以下のようにJSONペイロードを渡す必要があります.

すべてが正しく設定されている場合は、成功ステータスを受け取る必要があります.今では我々のアプリケーション内から関数を呼び出す時間です.

関数の呼び出し

名前とメールを提出する簡単なフォームを作成しましょう.

<h1>Sending a Webhook</h1>
<form id="sendWebhookForm" onsubmit="return sendWebhook(this);">
    <label for="fullName">Name:</label> <input type="text" name="fullName"> 
    <label for="email">Email:</label> <input type="email" name="email"> 
    <input name="sendInfo" type="submit" value="Submit">
</form>

Axiosを使ってブラウザからリクエストを送信しますので、Axiosライブラリをロードしたり、sendWebhook() フォームで呼び出される関数.

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="main.js"></script>

The sendWebhook() フォームが送信されるときに呼び出される関数は、netlify関数への非常に単純なHTTPリクエストです.

function sendWebhook(form) {
    axios.post('/.netlify/functions/zapierSend', {
        email: form.email.value,
        fullName: form.fullName.value
    })
    .then(function (response) {
        if (response.data.status === 'success') {
        form.sendInfo.disabled = true;
        form.email.value = '';
        form.sendInfo.value = 'Saved!';
        }
        else {
            alert('We apologize, there was a problem registering you.');
        }
    })
    .catch(function (error) {
        alert('We apologize, there was a problem registering you.');
    });

    return false;
}

私は、例のために、このコードが妥当性検査とエラーチェックの方法で多くを含んでいないことに注意しなければなりません.それは私たちのNetLify機能へのフォームの詳細をポストリクエストを送信し、それをZapier Webhookに渡し、そしてすべてがうまくいくなら、Googleスプレッドシートに情報を投稿します.

次の手順

素晴らしいことは、この同じプロセスは簡単にあなたのJamstackアプリケーションをZapierが統合している1500 +アプリのいずれかに接続できるようにすることができることです.これは、既存のAPIを使用して困難または不可能でも可能性があります多くのことが可能になります.あなたはで完全なコードを探索することができますhttps://github.com/remotesynth/webhooks .
次の部分では、我々は物事を反転させます.あなたのアプリケーションからデータを受け取るのではなく、あなたのアプリケーションにデータを送信するWebhookを使用する場合はどうですか?