ねえ、＆＃039;はJamstackを使用して機能的なカレンダーアプリを作成しました

ねえ、＆＃039;はJamstackを使用して機能的なカレンダーアプリを作成しました

私はいつもダイナミックなスケジューリングがどのように機能したか疑問に思っていたので、広範な研究を行い、新しいことを学び、旅の技術的な部分について書くことにしました。あなたに警告するのは公平です。ここで私がカバーするものはすべて、3週間の研究が単一の記事に凝縮されていることです。初心者に優しいですが、健康的な量の読書です。それで、椅子を引き上げて、座って冒険をしましょう。

私の計画は、Googleカレンダーのように見えるが、3つのコア機能を示すもののみを作成することでした。

1. カレンダーに既存のすべてのイベントをリストします
2. 新しいイベントを作成します
3. 作成中に選択された日付に基づくスケジュールと電子メールの通知。スケジュールは、時間が正しいときにユーザーに電子メールを送信するためのコードを実行する必要があります。

かなり、そうですか？これが私たちが作るものだからです。

私がコードに後で実行するように依頼することについての唯一の知識は、Cronの仕事でした。 Cronジョブを使用する最も簡単な方法は、コード内のジョブを静的に定義することです。これはアドホックです。静的には、Googleカレンダーのようなイベントを単純にスケジュールすることができず、Cronコードを簡単に更新できないことを意味します。 Cronトリガーの執筆の経験がある場合、あなたは私の痛みを感じます。そうでない場合は、この方法でCronを使用する必要がないかもしれません。

私のフラストレーションについてさらに詳しく説明するために、HTTPリクエストのペイロードに基づいてスケジュールをトリガーする必要がありました。このスケジュールに関する日付と情報は、HTTPリクエストを介して渡されます。これは、事前に予定されている日付のようなことを知る方法がないことを意味します。

私たち（私の同僚と私）は、この仕事をする方法を考え出しました。イベントの作成から電子メールのスケジューリング、カレンダーリストまで、この記事で私が作ったすべてについて学びます。これがアクション中のアプリのビデオです：

https://www.youtube.com/watch?v=simam4fxpoo&

微妙な遅延に気付くかもしれません。これは、スケジュールの実行タイミングやコードの実行とは何の関係もありません。何らかの形のレイテンシがあると思われる無料のSendGridアカウントでテストしています。これは、電子メールを送信せずにサーバーレス関数をテストすることで確認できます。コードが正確にスケジュールされた時間に実行されることに気付くでしょう。

ツールとアーキテクチャ

このプロジェクトの3つの基本ユニットは次のとおりです。

1. React FrontEnd ：カレンダーUI、UIを含むイベントを作成、更新、または削除します。
2. 8ベースGraphQL ：アプリのバックエンドデータベースレイヤー。ここで、日付を保存、読み取り、更新します。楽しい部分は、このバックエンドのコードを書いていないことです。
3. 耐久性のある関数：耐久性のある関数は、以前の実行から状態を記憶する力を持つサーバーレス関数の一種です。これがCronの仕事に取って代わるものであり、前述のアドホックな問題を解決します。

この投稿の残りの部分には、上記の3つのユニットに基づいた3つの主要なセクションがあります。私たちはそれらを次々と取り、それらを構築し、テストし、作業を展開します。それに取り組む前に、私が始めたスタータープロジェクトを使用してセットアップしましょう。

プロジェクトレポ

はじめる

このプロジェクトをさまざまな方法で設定できます。1つのプロジェクトに3つのユニットを備えたフルスタックプロジェクトとして、または各ユニットが独自のルートに住んでいるスタンドアロンプ​​ロジェクトとして。まあ、私は1つのプロジェクトであるため、より簡潔で、教えるのが簡単で、管理しやすいので、私は最初に行きました。

このアプリはCreate-React-Appプロジェクトとなり、セットアップする障壁を下げるためのスターターを作成しました。補足コードとロジックには、記事の範囲外であるため、説明する必要はありません。以下が私たちのために設定されています：

1. カレンダーコンポーネント
2. イベントフォームを提示するためのモーダルおよびポップオーバーコンポーネント
3. イベントフォームコンポーネント
4. データをクエリして変異させるためのいくつかのGraphQLロジック
5. スケジューラを書き込む耐久性のあるサーバーレス機能足場

ヒント：私たちが気にする既存の各ファイルには、ドキュメントの上部にコメントブロックがあります。コメントブロックは、コードファイルで現在起こっていることと、次に行うために必要なことを説明するTo Doセクションを教えてくれます。

スターターフォームGithubをクローニングすることから始めます。

 git clone -bスターター - シングルブランチhttps://github.com/christiannwamba/calendar-app.git

root package.jsonファイルとserverless package.jsonに記載されているNPM依存関係をインストールします。

 NPMインストール

スケジューリングのための耐久性のある編成機能

この用語が何であるかを理解する前に、最初に邪魔にならないようにする必要がある2つの単語があります -オーケストレーションと耐久性。

オーケストレーションは、もともと、適切に調整されたイベント、アクションなどのアセンブリを説明するために使用されていました。コンピュータシステムのスムーズな調整を記述するために、コンピューティングで大幅に借用されています。キーワードは座標です。システムの2つ以上のユニットを調整された方法でまとめる必要があります。

耐久性は、長続きするという優れた機能を持つものを説明するために使用されます。

システムの調整と長持ちすると、耐久性のある機能が得られます。 Azureのサーバーレス機能の場合、これは最も強力な機能です。私たちが知っているものに基づいて耐久性のある関数は、これらの2つの機能を持っています。

1. それらを使用して、2つ以上の関数の実行を組み立て、それらを調整することができ、人種条件が発生しない（オーケストレーション）。
2. 耐久性のある機能は物事を覚えています。これがそれをとても強力にしている理由です。 http：statelessのナンバーワンルールを破ります。耐久性のある機能は、どれだけ長く待たなければならないとしても、状態をそのままに保ちます。未来の1、000、000年のスケジュールを作成すると、トリガーの日に渡されたパラメーターを覚えている間、100万年後に耐久性のある機能が実行されます。つまり、耐久性のある機能はステートフルです。

これらの耐久性機能は、サーバーレス機能の機会の新しい領域のロックを解除しているため、今日の機能の1つを調査しています。耐久性のある機能のいくつかの可能なユースケースのいくつかの視覚化されたバージョンについては、サラの記事をもう一度強くお勧めします。

また、今日書く耐久性のある機能の動作を視覚的に表現しました。これをアニメーション化されたアーキテクチャ図として取る：

外部システム（8ベース）からのデータ変異は、HTTPトリガーを呼び出すことによりオーケストレーションをトリガーします。トリガーは、イベントをスケジュールするオーケストレーション関数を呼び出します。実行の時間が期限になると、オーケストレーション関数が再び呼び出されますが、今回はオーケストレーションをスキップし、アクティビティ関数を呼び出します。アクティビティ関数はアクションパフォーマーです。これは、「電子メール通知の送信」などの実際のことです。

編成された耐久性のある関数を作成します

VSコードを使用して関数の作成を説明します。 2つのことが必要です。

1. Azureアカウント
2. VSコード

両方のセットアップを取得したら、それらを結び付ける必要があります。これを行うには、VSコード拡張機能とノードCLIツールを使用できます。 CLIツールのインストールから始めます：

NPMインストール-G Azure-Functions-Core-Tools

＃ または

Brew Tap Azure/関数
Brew Install Azure-Functions-Core-Tools

次に、Azure関数拡張機能をインストールして、VSコードをAzureの関数に結び付けます。以前の記事からAzure関数のセットアップの詳細を読むことができます。

すべてのセットアップが完了したので、これらの関数を作成してみましょう。作成する機能は、次のフォルダーにマッピングされます。

フォルダ	関数
スケジュール	耐久性のあるHTTPトリガー
ScheduelOrchestrator	耐久性のあるオーケストレーション
sendemail	耐久性のあるアクティビティ

トリガーから始めます。

1. Azure Extensionアイコンをクリックして、下の画像に従ってスケジュール機能を作成します
   
2. これは最初の関数であるため、関数プロジェクトを作成するためにフォルダーアイコンを選択しました。その後のアイコンは、単一の関数（プロジェクトではなく）を作成します。
3. [閲覧]をクリックして、プロジェクト内のサーバーレスフォルダーを作成します。新しいサーバーレスフォルダーを選択します。
4. 言語としてJavaScriptを選択します。 TypeScript（または他の言語）がジャムである場合は、お気軽にお問い合わせください。
5. 耐久性のある機能HTTPスターターを選択します。これがトリガーです。
6. 最初の関数にスケジュールとして名前を付けます

次に、オーケストレーターを作成します。関数プロジェクトを作成する代わりに、代わりに関数を作成します。

1. 関数アイコンをクリックします：
   
2. 耐久性のある関数オーケストレーターを選択します。
3. 名前を付けて、Schedule -orchestratorを掲載し、 Enterを押してください。
4. ストレージアカウントを選択するように求められます。オーケストレーターは、ストレージを使用して、プロセスの機能の状態を保持します。
5. Azureアカウントでサブスクリプションを選択します。私の場合、私は無料の試用サブスクリプションを選択しました。
6. 残りのいくつかの手順に従って、ストレージアカウントを作成します。

最後に、以前の手順を繰り返してアクティビティを作成します。今回は、以下が異なるはずです：

• 耐久性のある機能アクティビティを選択します。
• sendemailに名前を付けます。
• ストレージアカウントは必要ありません。

耐久性のあるHTTPトリガーを使用したスケジューリング

サーバーレス/スケジュール/index.jsのコードに触れる必要はありません。これは、VSコードまたはCLIツールを使用して機能が足場になったときの元々のように見えるものです。

 const df = require（ "durable-functions"）;
module.exports = async function（context、req）{
  const client = df.getClient（context）;
  const instanceId = await client.startnew（req.params.functionname、undefined、req.body）;
  context.log（ `id = '$ {instanceId}'。`）でオーケストレーションを開始しました。
  return client.createcheckstatusResponse（context.bindingdata.req、instanceId）;
};

ここで何が起こっているのですか？

1. リクエストのコンテキストに基づいて、クライアント側に耐久性のある機能を作成しています。
2. クライアントのstartnew（）関数を使用してオーケストレーターを呼び出しています。オーケストレーターの関数名は、paramsオブジェクトを介してstartnew（）の最初の引数として渡されます。 req.bodyは、オーケストレーターに転送される3番目の引数としてstartnew（）に渡されます。
3. 最後に、オーケストレーター機能のステータスを確認するために使用できるデータのセットを返したり、完了する前にプロセスをキャンセルしたりできます。

上記の関数を呼び出すURLは次のようになります。

 http：// localhost：7071/api/orchestrators/{functionname}

ここで、functionnameはstartnewに渡された名前です。私たちの場合、それは次のとおりです。

 // localhost：7071/api/orchestrators/schedule -orchestrator

また、このURLの外観を変更できることを知っておくとよいでしょう。

耐久性のあるオーケストレーターで調整

HTTPトリガーStartNew Callは、渡す名前に基づいて関数を呼び出します。その名前は、オーケストレーションロジックを保持する関数とフォルダーの名前に対応しています。 ServerLess/ScheduleOrchestrator/index.jsファイルは、耐久性のある機能をエクスポートします。コンテンツを次のものに置き換えます。

 const df = require（ "durable-functions"）;
module.exports = df.orchestrator（function*（context）{
  const input = context.df.getInput（）
  // todo -1
  
  // todo -2
}）;

オーケストレーター関数は、Context.df.getInput（）を使用してHTTPトリガーからリクエスト本体を取得します。

TODO -1を、このデモ全体で最も重要なことである可能性のある次のコードの行に置き換えます。

 edvey Context.df.createtimer（new Date（input.startat）））

この行が耐久性のある関数を使用して、HTTPトリガーを介してリクエスト本体から渡された日付に基づいてタイマーを作成します。

この関数が実行されてここに到達すると、タイマーと保釈が一時的にトリガーされます。スケジュールが予定されている場合、それは戻ってきて、この行をスキップして、TODOの代わりに使用する必要がある次の行を呼び出します-2。

 return regjectoncement.df.callactivity（ 'sendemail'、input）;

この関数は、アクティビティ関数を呼び出して電子メールを送信します。また、2番目の引数としてペイロードを渡しています。

これは、完成した関数がどのように見えるかです：

 const df = require（ "durable-functions"）;

module.exports = df.orchestrator（function*（context）{
  const input = context.df.getInput（）
    
  edvey Context.df.createtimer（new Date（input.startat）））
    
  return regjectoncement.df.callactivity（ 'sendemail'、input）;
}）;

耐久性のあるアクティビティで電子メールを送信します

スケジュールが期限が来ると、オーケストレーターが戻ってアクティビティを呼び出します。アクティビティファイルは、ServerLess/sendemail/index.jsに存在します。そこにあるものを次のものに置き換えます。

 const sgmail = require（ '@sendgrid/mail'）;
sgmail.setapikey（process.env ['sendgrid_api_key']）;

module.exports = async function（context）{
  // todo -1
  const msg = {}
  // todo -2
  MSGを返します。
};

現在、SendGridのメーラーをインポートし、APIキーを設定しています。これらの指示に従ってAPIキーを取得できます。

資格を安全に保つために、環境変数にキーを設定しています。 SERDGRID_API_KEYキーをServerLess/local.settings.jsonで、sendgridキーを値として作成することで、同じ方法で安全に保存できます。

 {
  「Isencrypted」：False、
  「値」：{
    「azurewebjobsstorage "："  "、
    "functions_worker_runtime"： "node"、
    「sendgrid_api_key」： ""
  }
}

TODO -1を次の行に置き換えます。

 const {email、title、startat、description} = context.bindings.payload;

これにより、オーケストレーター関数からの入力からイベント情報が引き出されます。入力はContext.bindingsに添付されています。ペイロードはあなたがそれに名前を付けるものになる可能性があるので、サーバーレス/sendemail/function.jsonに移動し、ペイロードに名前の値を変更します。

 {
  「バインディング」：[
    {
      「名前」：「ペイロード」、
      「タイプ」：「ActivityTrigger」、
      「方向」：「in」
    }
  ]
}

次に、TODOを更新します-2次のブロックで電子メールを送信します。

 const msg = {
  宛先：メール、
  from：{email： '[電子メール保護]'、name： 'codebeast calendar'}、
  件名： `event：$ {title}`、
  html： `<h4 id="title-startat"> $ {title} @ $ {startat} </h4> <p> $ {説明} </p>`
};
sgmail.send（msg）;

MSGを返します。

これが完全なバージョンです：

 const sgmail = require（ '@sendgrid/mail'）;
sgmail.setapikey（process.env ['sendgrid_api_key']）;

module.exports = async function（context）{
  const {email、title、startat、description} = context.bindings.payload;
  const msg = {
    宛先：メール、
    from：{email： '[電子メール保護]'、name： 'codebeast calendar'}、
    件名： `event：$ {title}`、
    html： `<h4 id="title-startat"> $ {title} @ $ {startat} </h4> <p> $ {説明} </p>`
  };
  sgmail.send（msg）;

  MSGを返します。
};

Azureに関数を展開します

Azureに機能を展開するのは簡単です。これは、VSコードエディターから離れたクリックです。丸型アイコンをクリックして展開し、展開URLを取得します。

まだ私と一緒にここまで？あなたは大きな進歩を遂げています！ここで休憩したり、昼寝をしたり、ストレッチしたり、休んだりすることはまったく大丈夫です。この投稿を書いている間、私は間違いなくやった。

8ベース付きのデータとGraphQLレイヤー

8ベースの私の最も簡単な説明と理解は、「GraphQLのFirebase」です。 8ベースは、考えることができるあらゆる種類のアプリのデータベースレイヤーであり、その最も興味深い側面は、GraphQLに基づいていることです。

スタックの8ベースがどこに収まるかを説明する最良の方法は、シナリオの絵を描くことです。

あなたがクライアントのためのeコマースストアを構築するための小規模なスケール契約を備えたフリーランス開発者であると想像してください。あなたのコアスキルはウェブ上にあるので、バックエンドであまり快適ではありません。少しノードを書くことはできますが。

残念ながら、eコマースでは、在庫の管理、注文管理、購入の管理、認証とアイデンティティの管理などが必要です。基本レベルでの「管理」は、データCRUDとデータアクセスを意味します。

バックエンドコードのエンティティのアクセスを作成、読み取り、更新、削除、および管理する冗長で退屈なプロセスの代わりに、これらのビジネス要件をUIで説明できたらどうでしょうか？ CRUD操作、AUTH、およびアクセスを構成できるテーブルを作成できる場合はどうなりますか？そのようなヘルプがあり、フロントエンドコードの構築とクエリの書き込みにのみ集中した場合はどうなりますか？私たちが今まで説明したすべては、8ベースで取り組まれています

以下は、データレイヤーのために8ベースに依存するバックエンドのないアプリのアーキテクチャです。

イベントストレージと取得用の8ベーステーブルを作成します

テーブルを作成する前に最初に行う必要があることは、アカウントを作成することです。アカウントを取得したら、特定のプロジェクトのすべてのテーブルとロジックを保持するワークスペースを作成します。

次に、テーブルを作成し、テーブルイベントに名前を付けて、テーブルフィールドに記入します。

アクセスレベルを構成する必要があります。現在、各ユーザーから隠すものは何もないので、作成したイベントテーブルへのすべてのアクセスをオンにすることができます。

Authのセットアップは、Auth0と統合されるため、8Baseで非常にシンプルです。保護する必要があるエンティティがある場合、またはAUTHを使用するために模範を拡張したい場合は、ワイルドにしてください。

最後に、Reactアプリで使用するためにエンドポイントURLをつかみます。

GraphQLクエリと遊び場での突然変異のテスト

URLをワイルドに持ち込み、クライアントの構築を開始する準備ができていることを確認するために、最初にAPIをGraphQLプレイグラウンドでテストし、セットアップが問題ないかどうかを確認しましょう。エクスプローラーをクリックします。

エディターに次のクエリを貼り付けます。

クエリ{
  イベントスリスト{
    カウント
    アイテム{
      id
      タイトル
      startat
      エンダット
      説明
      Allday
      メール
    }
  }
}

8ベースUIを介していくつかのテストデータを作成し、クエリを実行すると結果が戻ります。

Exploreページの右端にあるスキーマドキュメントを使用して、データベース全体を探索できます。

カレンダーとイベントフォームインターフェイス

プロジェクトの3番目の（および最後の）ユニットは、ユーザーインターフェイスを構築するReactアプリです。 UIを構成する4つの主要なコンポーネントがあり、次のものが含まれます。

1. カレンダー：既存のすべてのイベントをリストするカレンダーUI
2. イベントモーダル：イベントフォームコンポーネントをレンダリングしてコンポーネントを作成する反応モーダル
3. イベントポップオーバー：ポップオーバーUIで1つのイベントを読む、EventFormまたは削除イベントを使用してイベントを更新する
4. イベントフォーム：新しいイベントを作成するためのHTMLフォーム

カレンダーコンポーネントに飛び込む前に、React Apolloクライアントをセットアップする必要があります。 React Apolloプロバイダーは、Reactパターンを使用してGraphQLデータソースを照会するツールを使用します。元のプロバイダーを使用すると、高次コンポーネントを使用したり、プロップをレンダリングしてデータをクエリしたり変異させたりできます。元のプロバイダーにラッパーを使用して、Reactフックを使用してクエリして変異させることができます。

src/index.jsでは、todoでreact apolloフックと8ベースクライアントをインポートします-1：

 「race-apollo-hooks」から{apolloprovider}をインポートします。
'@8base/apollo-client'から{eightbaseapolloclient}をインポートします。

TODO -2では、8ベースのセットアップ段階で取得したエンドポイントURLでクライアントを構成します。

 const uri = 'https://api.8base.com/cjvuk51i0000701S0HVVCBNXG';

const apolloclient = new Eight Baseapolloclient（{
  uri：uri、
  withauth：false
}）;

このクライアントを使用して、アプリツリー全体をTODOでプロバイダーでラップします-3：

 Reactdom.Render（
  <apolloprovider client="{apolloclient}">
    <app></app>
  </apolloprovider>、
  document.getElementById（ 'root'）
）;

カレンダーにイベントを表示します

カレンダーコンポーネントは、アプリコンポーネント内でレンダリングされ、npmからBigCalendarコンポーネントをインポートします。それから ：

1. イベントのリストでカレンダーをレンダリングします。
2. カレンダーに、イベントの編集に使用されるカスタムポップオーバー（EventPopover）コンポーネントを提供します。
3. 新しいイベントを作成するために使用されるモーダル（EventModal）をレンダリングします。

更新する必要があるのは、イベントのリストです。イベントの静的配列を使用する代わりに、すべてのストアイベントに8ベースをクエリしたいと思います。

TODO -1を次の行に置き換えます。

 const {data、error、loading} = usequery（events_query）;

ファイルの先頭にあるNPMからUseQueryライブラリとevents_Queryをインポートします。

 「race-apollo-hooks」から{usequery}をインポートします。
'../../queries'から{events_Query}をインポートします。

Events_Queryは、8Base Explorerでテストしたクエリとまったく同じクエリです。それはSRC/クエリに住んでいて、次のように見えます：

 const events_query = gql`をエクスポートします
  クエリ{
    イベントスリスト{
      カウント
      アイテム{
        id
        ...
      }
    }
  }
`;

TODOに簡単なエラーとロードハンドラーを追加しましょう-2：

 if（error）return console.log（error）;
  if（ロード）
    戻る （
      <div classname="calendary">
        <p>読み込み... </p>
      </div>
    ）;

カレンダーコンポーネントがEventPopoverコンポーネントを使用してカスタムイベントをレンダリングすることに注意してください。また、カレンダーコンポーネントファイルがEventModalをレンダリングすることも観察できます。両方のコンポーネントがあなたのためにセットアップされており、それらの唯一の責任はイベントフォームをレンダリングすることです。

イベントフォームコンポーネントでイベントを作成、更新、削除します

src/components/event/eventform.jsのコンポーネントはフォームをレンダリングします。フォームは、イベントの作成、編集、削除に使用されます。 Todo -1では、usecreateupdatemutationとsudeletemutationをインポートします。

 './eventMutationhooks'から{usecreateupdatemutation、sudeletemutation}

• usecreateupdatemutation：この突然変異は、イベントが既に存在しているかどうかに応じて、イベントを作成または更新するかのいずれかです。
• UsedEleteMutation：この突然変異は、既存のイベントを削除します。

これらの関数のいずれかへの呼び出しは、別の関数を返します。返された関数は、均一なハンドラーとして機能します。

さて、先に進み、Todo -2を両方の機能への呼び出しに置き換えます。

 const createUpdateEvent = usecreateupdatemutation（
  ペイロード、
  イベント、
  EventExists、
  （）=> closeModal（）
）;
const deleteevent = useletemutation（event、（）=> closemodal（））;

これらは、React Apollo Hooksによって露出したUsemutationをラップするために書いたカスタムフックです。各フックは突然変異を作成し、突然変異変数をUsemutationクエリに渡します。 src/components/event/eventmutationhooks.jsで次のように見えるブロックが最も重要な部分です。

 usemutation（mutationType、{
  変数：{
    データ
  }、
  更新：（キャッシュ、{データ}）=> {
    const {eventslist} = cache.readquery（{
      クエリ：events_Query
    }）;
    cache.writequery（{
      クエリ：events_Query、
      データ： {
        イベントスリスト：transformcacheupdatedata（イベントスリスト、データ）
      }
    }）;
    // ..
  }
}）;

8ベースから耐久性のあるhttpトリガーを呼び出します

カレンダーアプリのサーバーレス構造、データストレージ、UIレイヤーの構築にかなりの時間を費やしました。要約すると、UIはデータを8ベースにストレージ用に送信し、 8ベースはデータを保存し、耐久性のある関数httpトリガーをトリガーし、HTTPトリガーはオーケストレーションをキックし、残りは歴史です。現在、私たちは突然変異を使用してデータを保存していますが、8ベースのどこにもサーバーレス機能を呼び出していません。

8Baseを使用すると、カスタムロジックを作成できます。これにより、非常に強力で拡張可能なものがあります。カスタムロジックは、8ベースデータベースで実行されたアクションに基づいて呼び出される単純な関数です。たとえば、テーブルで突然変異が発生するたびに、呼び出されるロジックを設定できます。イベントが作成されたときに呼ばれるものを作成しましょう。

8ベースCLIをインストールすることから始めます。

 NPMインストール-G 8Base

カレンダーアプリプロジェクトで次のコマンドを実行して、スターターロジックを作成します。

 8ベースinit 8ベース

8Base initコマンド新しい8ベースロジックプロジェクトを作成します。この場合、8Baseロジックフォルダー、8ベースに名前を付けているディレクトリ名を渡すことができます。ねじれないでください。

トリガースケジューリングロジック

すべてを8base/srcで削除し、SRCフォルダーにtrigerschedule.jsファイルを作成します。それを行ったら、以下をファイルにドロップします。

 const fetch = require（ 'node-fetch'）;

module.exports = async event => {
  const res = await fetch（ '<http>'、{
    方法：「投稿」、
    ボディ：json.stringify（event.data）、
    ヘッダー：{'content-type'： 'application/json'}
  }）
  const json = await res.json（）;
  console.log（イベント、json）
  jsonを返します。
};</http>

GraphQL変異に関する情報は、イベントオブジェクトでデータとして利用できます。

を、関数を展開した後に得たURLに置き換えます。 Azure URLの関数に移動し、[URLのコピー]をクリックすることでURLを取得できます。

また、Node-Fetchモジュールをインストールする必要があります。これにより、APIからのデータが取得されます。

 NPMインストール - 節約ノードフェッチ

8ベースロジック構成

次に行うことは、このロジックをトリガーする必要がある正確な突然変異またはクエリを8ベースに伝えることです。私たちの場合、イベントテーブルに突然変異を作成します。この情報は8base.ymlファイルで説明できます。

関数：
  トリガーシェード：
    ハンドラ：
      コード：src/triggerschedule.js
    タイプ：トリガー後
    操作：events.create

ある意味では、これは、イベントテーブルで作成された突然変異が発生したときに、突然変異が発生した後にSRC/Triggerschedule.jsに電話してください。

すべてのものを展開したいと思っています

何でも展開する前に、8Baseアカウントにログインする必要があります。これは、コマンドラインを介して行うことができます。

 8ベースログイン

次に、deployコマンドを実行して、ワークスペースインスタンスでアプリロジックを送信してセットアップします。

 8Base Deploy

フロー全体をテストします

すべての栄光でアプリを表示するには、カレンダーの日の1つをクリックしてください。フォームを含むイベントモーダルを取得する必要があります。それを記入して、将来の開始日を入れて、通知をトリガーします。私はそれよりも速く通知をトリガーできなかったので、現在から2〜5分以上日付を試してください。

https://www.youtube.com/watch?v=simam4fxpoo&

ええ、あなたのメールをチェックしてください！ SendGridのおかげでメールが届くはずです。これで、イベントを作成し、イベントの提出の詳細を通知できるアプリがあります。

以上がねえ、＆＃039;はJamstackを使用して機能的なカレンダーアプリを作成しましたの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。