嘿，讓我們使用Jamstack創(chuàng)建功能日歷應(yīng)用程序

我一直想知道動態(tài)安排是如何工作的，所以我決定進行廣泛的研究，學(xué)習(xí)新事物并撰寫有關(guān)旅程的技術(shù)部分。警告您是很公平的：我涵蓋的所有內(nèi)容都是三個星期的研究凝結(jié)成一篇文章。即使對初學(xué)者友好，但它還是很健康的閱讀量。因此，請拉起椅子，坐下來，讓我們冒險。

我的計劃是構(gòu)建看起來像Google日歷的東西，但僅展示了三個核心功能：

1. 在日歷上列出所有現(xiàn)有事件
2. 創(chuàng)建新事件
3. 根據(jù)創(chuàng)建期間選擇的日期計劃和電子郵件通知。時間表應(yīng)運行一些代碼，以在時間合適時通過電子郵件發(fā)送給用戶。

漂亮，對嗎？到本文的結(jié)尾，因為這就是我們將要做的。

我要求我的代碼在以后或延期時間運行的唯一知識是Cron Jobs。使用CRON作業(yè)的最簡單方法是在您的代碼中靜態(tài)定義作業(yè)。這是臨時的 -從靜態(tài)上講，我不能簡單地安排像Google日歷這樣的事件，并可以輕松地更新我的Cron代碼。如果您在寫Cron Triggers方面經(jīng)驗豐富，您會感到我的痛苦。如果不是，您很幸運，您可能永遠不必以這種方式使用Cron。

為了詳細說明我的挫敗感，我需要根據(jù)HTTP請求的有效載荷觸發(fā)時間表。有關(guān)此時間表的日期和信息將通過HTTP請求傳遞。這意味著沒有辦法事先知道預(yù)定日期之類的事情。

我們（我和我的同事）想出了一種做出這項工作的方法，并且在莎拉·德拉斯納（Sarah Drasner）關(guān)于持久功能的文章的幫助下，我理解了我需要學(xué)習(xí)的東西（并且在此方面不理）。您將了解我在本文中工作的所有內(nèi)容，從活動創(chuàng)建到電子郵件計劃再到日歷列表。這是該應(yīng)用程序中的視頻：

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

您可能會注意到微妙的延遲。這與時間表的執(zhí)行時間或運行代碼無關(guān)。我正在使用一個免費的SendGrid帳戶進行測試，我懷疑該帳戶具有某種形式的延遲。您可以通過在不發(fā)送電子郵件的情況下測試無服務(wù)器函數(shù)來確認這一點。您會注意到該代碼在計劃的時間正好運行。

工具和架構(gòu)

這是該項目的三個基本單元：

1. React Frontend ：日歷UI，包括用于創(chuàng)建，更新或刪除事件的UI。
2. 8Base GraphQl ：應(yīng)用程序的后端數(shù)據(jù)庫層。這是我們將存儲，閱讀和更新日期的地方。有趣的部分是您不會為此后端編寫任何代碼。
3. 耐用功能：耐用功能是一種無服務(wù)器功能，具有從先前執(zhí)行中記住其狀態(tài)的功能。這就是替代Cron作業(yè)的原因，并解決了我們前面描述的臨時問題。

本文的其余部分將根據(jù)我們在上面看到的三個單元進行三個主要部分。我們將彼此接一個，將它們構(gòu)建，對其進行測試，甚至部署工作。在進行此操作之前，讓我們使用我為我們開始的開頭項目進行設(shè)置。

項目回購

入門

您可以以不同的方式設(shè)置此項目 - 要么是一個全堆棧項目，其中一個項目中的三個單元，要么是一個獨立項目，每個單元都生活在其根本上。好吧，我選擇了第一個，因為它更簡潔，更易于教學(xué)，并且可以管理，因為它是一個項目。

該應(yīng)用程序?qū)⑹且粋€創(chuàng)建反應(yīng)項目，我為我們降低設(shè)置的障礙而做了一個開始。它帶有補充代碼和邏輯，我們不需要解釋，因為它們不超出文章的范圍。為我們設(shè)置以下內(nèi)容：

1. 日歷組件
2. 表示事件表格的模態(tài)和彈出組件
3. 事件形式組件
4. 一些GraphQl邏輯查詢和突變數(shù)據(jù)
5. 耐用的無服務(wù)器功能腳手架，我們將編寫調(diào)度程序

提示：我們關(guān)心的每個現(xiàn)有文件都在文檔頂部都有一個評論塊。該注釋塊告訴您代碼文件中當(dāng)前正在發(fā)生的事情和待辦事項部分，該部分描述了我們接下來需要做的事情。

首先將起動器形式github克隆出來：

 git克隆-b啟動器-Single-Branch https：//github.com/christiannwamba/calendar-app.git

安裝root package.json文件以及無服務(wù)器軟件包中描述的NPM依賴項。

 NPM安裝

精心策劃的耐用功能用于調(diào)度

在我們了解這個術(shù)語是什么之前，我們需要首先擺脫兩個詞：編排和耐用。

編排最初用于描述一個協(xié)調(diào)良好的事件，動作等的組裝。在計算中，它大量借用了計算機系統(tǒng)的平滑協(xié)調(diào)。關(guān)鍵詞是坐標。我們需要以協(xié)調(diào)的方式將兩個或多個系統(tǒng)單元放在一起。

耐用的用來描述具有持久更長的出色功能的任何事物。

將系統(tǒng)協(xié)調(diào)和持久放在一起，您將獲得持久的功能。如果Azure的無服務(wù)器功能，這是最強大的功能。耐用的功能基于我們現(xiàn)在知道的這兩個功能：

1. 它們可用于組裝兩個或多個功能的執(zhí)行并協(xié)調(diào)它們，以免發(fā)生種族條件（編排）。
2. 耐用的功能記住事情。這就是使它如此強大的原因。它打破了HTTP：無狀態(tài)的第一規(guī)則。耐用的功能使其狀態(tài)保持完整，無論他們必須等待多長時間。創(chuàng)建未來1,000年的時間表，持久功能將在一百萬年后執(zhí)行，同時記住在觸發(fā)之日傳遞給它的參數(shù)。這意味著耐用的功能是有狀態(tài)的。

這些耐用性功能可以解鎖無服務(wù)器功能的新機會，這就是為什么我們今天探索這些功能之一的原因。我強烈建議莎拉（Sarah）的文章又一次，用于可視化的某些耐用功能的可能用例的可視化版本。

我還對我們今天要寫的耐用功能的行為進行了視覺表示。以動畫架構(gòu)圖為動畫：

來自外部系統(tǒng)（8Base）的數(shù)據(jù)突變通過調(diào)用HTTP觸發(fā)器觸發(fā)編排。然后觸發(fā)器調(diào)用安排事件的編排功能。當(dāng)?shù)狡趫?zhí)行時間時，編排功能再次調(diào)用，但是這次跳過了編排并調(diào)用活動功能?；顒雍瘮?shù)是動作表演者。這是發(fā)生的實際事情，例如“發(fā)送電子郵件通知”。

創(chuàng)建精心策劃的耐用功能

讓我通過使用VS代碼來引導(dǎo)您通過創(chuàng)建功能。您需要兩件事：

1. 一個Azure帳戶
2. VS代碼

兩者都設(shè)置后，您需要將它們綁在一起。您可以使用VS代碼擴展名和節(jié)點CLI工具來執(zhí)行此操作。從安裝CLI工具開始：

NPM安裝-g azure-functions核心工具

＃ 或者

釀造淡淡的Azure/功能
釀造安裝Azure-funnctions核心工具

接下來，安裝Azure函數(shù)擴展程序以使VS代碼與Azure上的函數(shù)相關(guān)。您可以從我上一篇文章中閱讀有關(guān)設(shè)置Azure功能的更多信息。

現(xiàn)在您已經(jīng)完成了所有設(shè)置，讓我們開始創(chuàng)建這些功能。我們將創(chuàng)建的功能將映射到以下文件夾。

從扳機開始。

1. 單擊Azure擴展圖標，然后按照下圖創(chuàng)建時間表功能
   
2. 由于這是第一個功能，因此我們選擇文件夾圖標來創(chuàng)建一個功能項目。之后的圖標創(chuàng)建一個單個函數(shù)（不是項目）。
3. 單擊“瀏覽”，然后在項目內(nèi)部創(chuàng)建無服務(wù)器文件夾。選擇新的無服務(wù)器文件夾。
4. 選擇JavaScript作為語言。如果您的果醬是打字稿（或任何其他語言），請自由。
5. 選擇耐用功能HTTP啟動器。這是觸發(fā)器。
6. 將第一個功能命名為時間表

接下來，創(chuàng)建編排者。而不是創(chuàng)建功能項目，而是創(chuàng)建功能。

1. 單擊功能圖標：
   
2. 選擇耐用功能編排。
3. 給它一個名字，scheworestertor，然后命中Enter 。
4. 您將被要求選擇一個存儲帳戶。樂隊使用存儲來保留在過程中的功能狀態(tài)。
5. 在您的Azure帳戶中選擇訂閱。就我而言，我選擇了免費的試用訂閱。
6. 請按照剩余的步驟創(chuàng)建存儲帳戶。

最后，重復(fù)上一步以創(chuàng)建活動。這次，以下內(nèi)容應(yīng)不同：

• 選擇耐用的功能活動。
• 命名它。
• 不需要存儲帳戶。

使用耐用的HTTP觸發(fā)器進行調(diào)度

無需觸摸的無服務(wù)器/附表/index.js中的代碼。這是最初使用VS代碼或CLI工具腳手架的函數(shù)時的樣子。

 const df = require（“耐用功能”）;
模塊。Exports= async函數(shù)（context，req）{
  const client = df.getClient（context）;
  const instanceID =等待client.startnew（req.params.functionName，undefined，req.body）;
  context.log（``啟動以id ='$ {instanceid}'。
  返回client.createcheckstatusresponse（context.bindingdata.req，instanceid）;
};

這里發(fā)生了什么？

1. 我們正在基于請求上下文的客戶端創(chuàng)建一個耐用的功能。
2. 我們使用客戶端的startNew（）函數(shù)來調(diào)用編排器。樂隊函數(shù)名稱被作為第一個通過params對象作為startNew（）的參數(shù)傳遞。 Req.body也將傳遞給StartNew（）作為第三個參數(shù)，該論點轉(zhuǎn)發(fā)給了編排者。
3. 最后，我們返回一組數(shù)據(jù)，可用于檢查編目功能的狀態(tài)，甚至可以在完成之前取消該數(shù)據(jù)的狀態(tài)。

調(diào)用上述函數(shù)的URL看起來像這樣：

 http：// localhost：7071/api/排請求/{functionName}

where functionName是傳遞給startnew的名稱。在我們的情況下，應(yīng)該是：

 // LOCALHOST：7071/API/編排/Scheperorchestrator

也很高興知道您可以更改此URL的外觀。

用耐用的編排編排

HTTP Trigger Startnew調(diào)用呼叫調(diào)用函數(shù)，該函數(shù)基于我們傳遞給它的名稱。該名稱對應(yīng)于保存編排邏輯的功能和文件夾的名稱。無服務(wù)器/scheperorchestrator/index.js文件導(dǎo)出耐用功能。用以下內(nèi)容替換內(nèi)容：

 const df = require（“耐用功能”）;
Module.exports = df.orchestrator（function*（context）{
  const input = context.df.getInput（）
  // todo- 1
  
  // todo- 2
}）;

編目函數(shù)使用Context.df.getInput（）從HTTP觸發(fā)器檢索請求主體。

替換todo -1用以下代碼行替換，這可能是整個演示中最重要的事情：

收益上下文。df.createTimer（新日期（input.startat））

該線路確實使用耐用函數(shù)來根據(jù)通過HTTP觸發(fā)器從請求主體傳遞的日期創(chuàng)建一個計時器。

當(dāng)此功能執(zhí)行并到達此處時，它將觸發(fā)計時器并臨時保釋。時間表到期時，它將返回，跳過此行，并撥打以下行，您應(yīng)該使用該行代替TODO -2。

返回收益率上下文。df.callactivity（'sendemail'，輸入）;

該功能將調(diào)用活動函數(shù)發(fā)送電子郵件。我們還將有效載荷作為第二個參數(shù)。

這就是完整的功能的樣子：

 const df = require（“耐用功能”）;

Module.exports = df.orchestrator（function*（context）{
  const input = context.df.getInput（）
    
  收益上下文。df.createTimer（新日期（input.startat））
    
  返回收益率上下文。df.callactivity（'sendemail'，輸入）;
}）;

發(fā)送帶有持久活動的電子郵件

當(dāng)定期時間表時，編排者會回來調(diào)用活動?；顒游募儆跓o服務(wù)器/sendemail/index.js。用以下內(nèi)容更換其中的內(nèi)容：

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

模塊。exports= async函數(shù)（上下文）{
  // todo- 1
  const msg = {}
  // todo- 2
  返回msg;
};

當(dāng)前，它導(dǎo)入SendGrid的郵件并設(shè)置API密鑰。您可以按照以下說明獲取API密鑰。

我正在設(shè)置環(huán)境變量中的鑰匙，以確保我的憑證安全。您可以通過在serverless/local.settings.json中使用sendgrid鍵在serverless/local.settings.json中使用sendgrid_api_key鍵來安全地存儲自己的方式：

 {
  “ isencrypted”：false，
  “值”：{
    “ azurewebjobsstorage”：“ ”，
    “ functions_worker_runtime”：“ node”，
    “ sendgrid_api_key”：“ ”
  }
}

替換todo -1用以下行：

 const {電子郵件，title，startat，description} = context.bindings.payload;

這從編目函數(shù)的輸入中汲取了事件信息。輸入連接到上下文。結(jié)合。有效載荷可以是您命名的任何東西，因此請轉(zhuǎn)到無服務(wù)器/sendemail/function.json并將名稱值更改為有效負載：

 {
  “綁定”：[
    {
      “名稱”：“有效載荷”，
      “ type”：“ ActivityTrigger”，
      “方向”：“在”
    }
  這是給出的
}

接下來，更新todo -2帶有以下塊發(fā)送電子郵件：

 const msg = {
  到：電子郵件，
  來自：{電子郵件：'[[電子郵件保護]'，名稱：'codebeast日歷'}，
  主題：`事件：$ {title}`，
  html：`<h4> $ {title} @ $ {startat} </h4> <p> $ {description} </p>``
};
sgmail.send（msg）;

返回msg;

這是完整版本：

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

模塊。exports= async函數(shù)（上下文）{
  const {電子郵件，title，startat，description} = context.bindings.payload;
  const msg = {
    到：電子郵件，
    來自：{電子郵件：'[[電子郵件保護]'，名稱：'codebeast日歷'}，
    主題：`事件：$ {title}`，
    html：`<h4> $ {title} @ $ {startat} </h4> <p> $ {description} </p>``
  };
  sgmail.send（msg）;

  返回msg;
};

將功能部署到Azure

將功能部署到Azure很容易。這僅僅是從VS代碼編輯器中單擊。單擊循環(huán)圖標以部署并獲得部署URL：

仍然和我在一起嗎？您正在取得巨大進步！在這里休息一下，午睡，伸展或休息是完全可以的。我在寫這篇文章時肯定做到了。

帶有8Base的數(shù)據(jù)和GraphQl層

我對8base的最簡單描述和理解是“ GraphQl的firebase”。 8base是您可以想到的任何類型的應(yīng)用程序的數(shù)據(jù)庫層，最有趣的方面是基于GraphQl。

描述8個鍵在堆棧中的最佳方法是繪制場景的圖片。

想象一下，您是一家自由職業(yè)者開發(fā)人員，擁有小型到中等規(guī)模的合同，為客戶建立電子商務(wù)商店。您的核心技能在網(wǎng)絡(luò)上，因此您的后端不太舒適。雖然您可以寫一些節(jié)點。

不幸的是，電子商務(wù)需要管理庫存，訂單管理，管理購買，管理身份驗證和身份等。在基本層面上“管理”只是意味著數(shù)據(jù)CRUD和數(shù)據(jù)訪問。

與其在后端代碼中創(chuàng)建，閱讀，更新，刪除和管理訪問訪問的多余和無聊的過程，如果我們可以在UI中描述這些業(yè)務(wù)需求，該怎么辦？如果我們可以創(chuàng)建允許我們配置CRUD操作，AUTH和訪問的表，該怎么辦？如果我們有這樣的幫助，只專注于構(gòu)建前端代碼和編寫查詢怎么辦？我們剛剛描述的一切都通過8base解決

這是一個無后端應(yīng)用程序的架構(gòu)，它依賴于8個鍵的數(shù)據(jù)層：

創(chuàng)建一個用于事件存儲和檢索的8base表

在創(chuàng)建表格之前，我們需要做的第一件事是創(chuàng)建一個帳戶。有一個帳戶后，創(chuàng)建一個工作空間，該工作空間可以保留給定項目的所有表和邏輯。

接下來，創(chuàng)建一個表，命名表事件并填寫表字段。

我們需要配置訪問級別。目前，每個用戶都沒有什么可隱藏的，因此我們可以打開對我們創(chuàng)建的事件表的所有訪問：

設(shè)置auth具有8個鍵，因為它與auth0集成在一起。如果您的實體需要受到保護或想擴展我們的示例以使用AUTH，請瘋狂。

最后，抓住您的端點URL以供在React應(yīng)用中使用：

測試操場上的GraphQl查詢和突變

只是為了確保我們準備將URL帶到野外并開始構(gòu)建客戶端，讓我們首先使用GraphQL操場測試API，然后看看設(shè)置是否還不錯。單擊探險家。

將以下查詢粘貼到編輯器中。

詢問 {
  eventslist {
    數(shù)數(shù)
    項目 {
      ID
      標題
      Startat
      Endat
      描述
      Allday
      電子郵件
    }
  }
}

我通過8Base UI創(chuàng)建了一些測試數(shù)據(jù)，并且在運行時會收回結(jié)果：

您可以使用探索頁面右端的架構(gòu)文檔探索整個數(shù)據(jù)庫。

日歷和事件形式接口

我們項目的第三個（也是最后一個）單元是構(gòu)建用戶界面的React應(yīng)用程序。有四個主要組件構(gòu)成了UI，其中包括：

1. 日歷：列出所有現(xiàn)有事件的日歷UI
2. 事件模態(tài)：一種反應(yīng)模式，它渲染事件形式組件創(chuàng)建一個組件
3. 事件popover： popover UI讀取單個事件，使用EventForm或Delete Event更新事件
4. 事件表格：用于創(chuàng)建新事件的HTML表格

在我們直接深入日歷組件之前，我們需要設(shè)置React React Apollo客戶端。 React Apollo提供商為您提供了使用React模式查詢GraphQL數(shù)據(jù)源的工具。原始提供商允許您使用高階組件或渲染道具來查詢和突變數(shù)據(jù)。我們將向原始提供商使用包裝器，該包裝器允許您使用React鉤查詢和突變。

在src/index.js中，導(dǎo)入React Apollo Hooks和Todo中的8base客戶端-1：

從“ react-apollo-hooks”中導(dǎo)入{apolloprovider};
從'@8base/apollo-client'導(dǎo)入{八baseapolloclient};

在todo -2，用端點URL配置客戶端，我們在8base設(shè)置階段中獲得：

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

const apolloclient =新的八baseapolloclient（{{
  Uri：Uri，
  withauth：false
}）;

使用此客戶端將整個應(yīng)用程序樹包裹在TODO上的提供商-3：

 Reactdom.render（
  <apolloprovider client="{apolloclient}">
    <app></app>
  </apolloprovider>，
  document.getElementById（'root'）
）；

在日歷上顯示事件

日歷組件在應(yīng)用程序組件內(nèi)渲染，并從NPM渲染bigcalendar組件。然后 ：

1. 我們渲染日歷，其中包括事件列表。
2. 我們?yōu)槿諝v提供了一個自定義的彈出式（EventPopover）組件，該組件將用于編輯事件。
3. 我們渲染將用于創(chuàng)建新事件的模態(tài)（事件模式）。

我們唯一需要更新的是事件列表。我們不使用靜態(tài)事件，而是要查詢所有商店事件的8base。

替換todo -1用以下行：

 const {數(shù)據(jù)，錯誤，加載} = usequery（events_query）;

從NPM導(dǎo)入USEQUERY庫和文件開頭的Events_query：

從'react-apollo-hooks'導(dǎo)入{usequery};
從'../ ../ queries'導(dǎo)入{events_query};

events_query與我們在8Base Explorer中測試的查詢完全相同。它生活在SRC/查詢中，看起來像這樣：

導(dǎo)出const events_query = gql`
  詢問 {
    eventslist {
      數(shù)數(shù)
      項目 {
        ID
        ...
      }
    }
  }
`;

讓我們添加一個簡單的錯誤，并在todo上加載處理程序-2：

 if（error）return console.log（error）;
  如果（加載）
    返回 （
      <div classname="“" calendar>
        <p>加載... </p>
      </div>
    ）；

請注意，日歷組件使用EventPopover組件渲染自定義事件。您還可以觀察到日歷組件文件也呈現(xiàn)EventModal。這兩個組件均已為您設(shè)置，它們的唯一責(zé)任是渲染事件形式。

使用事件表單組件創(chuàng)建，更新和刪除事件

src/組件/event/eventform.js中的組件呈現(xiàn)一個表單。該表格用于創(chuàng)建，編輯或刪除事件。在Todo -1，導(dǎo)入UsecReateupDatemutt和usedeletemnout：

導(dǎo)入{usecreateupdatemuont，undereletemnount}從'./eventmunthooks'

• USECREATEUPDATEMUNT：此突變要么根據(jù)事件已經(jīng)存在，因此會創(chuàng)建或更新事件。
• USED??ERETEMENT：此突變刪除了現(xiàn)有事件。

對這些功能的任何一個呼叫都會返回另一個功能。返回的功能可以用作均勻處理程序。

現(xiàn)在，繼續(xù)替換todo -2呼叫兩個功能：

 const createUpdateEvent = usecreateupdatemunt（
  有效載荷，
  事件，
  EventExists，
  （）=> clocemodal（）
）；
const deleteevent = undereletemontoution（event，（）=> cockemodal（））;

這些是我寫的自定義鉤子，以包裝React Apollo鉤子所揭示的用戶。每個鉤子都會產(chǎn)生一個突變，并將突變變量傳遞到用戶符號查詢。在SRC/組件/事件/EventMunthooks.js中看起來如下的塊是最重要的部分：

 USEMUNT（MutationType，{
  變量：{
    數(shù)據(jù)
  }，，
  更新：（ cache，{data}）=> {
    const {eventList} = cache.readquery（{{
      查詢：events_query
    }）;
    cache.writequery（{
      查詢：events_query，
      數(shù)據(jù)： {
        eventslist：transformcacheupdatedata（eventlist，數(shù)據(jù)）
      }
    }）;
    // ..
  }
}）;

調(diào)用來自8Base的耐用功能HTTP觸發(fā)器

我們花了很多時間來構(gòu)建日歷應(yīng)用程序的無服務(wù)器結(jié)構(gòu)，數(shù)據(jù)存儲和UI層。為了回顧一下，UI將數(shù)據(jù)發(fā)送到8base進行存儲， 8Base保存數(shù)據(jù)并觸發(fā)耐用的功能HTTP觸發(fā)器，HTTP觸發(fā)器在編排中踢球，其余就是歷史記錄。當(dāng)前，我們正在使用突變保存數(shù)據(jù)，但我們沒有在8base中任何地方調(diào)用無服務(wù)器功能。

8base允許您編寫自定義邏輯，這就是使其非常強大且可擴展的原因。自定義邏輯是基于在8Base數(shù)據(jù)庫上執(zhí)行的操作調(diào)用的簡單函數(shù)。例如，我們可以設(shè)置一個邏輯，每次在表上發(fā)生突變時都被調(diào)用。讓我們創(chuàng)建創(chuàng)建事件時稱為的。

首先安裝8base CLI：

 NPM安裝-G 8Base

在日歷上，應(yīng)用程序項目運行以下命令以創(chuàng)建一個入門邏輯：

 8base Init 8base

8base Init命令創(chuàng)建一個新的8base邏輯項目。您可以將其傳遞一個目錄名稱，在這種情況下，我們將其命名為8base邏輯文件夾8base - 不要扭曲它。

觸發(fā)調(diào)度邏輯

刪除8base/src中的所有內(nèi)容，然后在SRC文件夾中創(chuàng)建一個triggerschedule.js文件。完成此操作后，將以下內(nèi)容放入文件中：

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

模塊。Exports= async event => {
  const res =等待fetch（'<http>'，{
    方法：“帖子”，
    正文：json.stringify（event.data），
    標題：{'content-type'：'application/json'}
  }））
  const json =等待res.json（）;
  console.log（event，json）
  返回JSON；
};</http>

有關(guān)GraphQL突變的信息可作為數(shù)據(jù)可用。

部署功能后，將替換為您獲得的URL。您可以通過轉(zhuǎn)到Azure URL中的功能來獲取URL，然后單擊“復(fù)制URL”。

您還需要安裝Node-fetch模塊，該模塊將從API中獲取數(shù)據(jù)：

 npm安裝 - 保存節(jié)點fetch

8base邏輯配置

接下來要做的是告訴8base觸發(fā)此邏輯需要什么確切的突變或查詢。在我們的情況下，在事件表上創(chuàng)建突變。您可以在8base.yml文件中描述此信息：

功能：
  triggerschedule：
    處理者：
      代碼：src/triggerschedule.js
    類型：觸發(fā)器
    操作：events.greate

從某種意義上說，這就是說，當(dāng)事件表上發(fā)生創(chuàng)建突變時，請在突變發(fā)生后致電src/triggerschedule.js。

我們想部署所有的東西

在部署任何內(nèi)容之前，我們需要登錄到8Base帳戶，我們可以通過命令行進行：

 8base登錄

然后，讓我們運行部署命令以在您的工作區(qū)實例中發(fā)送和設(shè)置APP邏輯。

 8base部署

測試整個流程

要在其所有榮耀中查看該應(yīng)用程序，請單擊日歷的日子之一。您應(yīng)該獲得包含表單的事件模式。填寫并放置未來的開始日期，以便我們觸發(fā)通知。嘗試與當(dāng)前時間相距超過2-5分鐘的日期，因為我無法更快地觸發(fā)通知。

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

是的，去檢查您的電子郵件！由于SendGrid，該電子郵件應(yīng)該到達?，F(xiàn)在，我們擁有一個應(yīng)用程序，該應(yīng)用程序允許我們創(chuàng)建事件并通過事件提交的詳細信息通知。

以上是嘿，讓我們使用Jamstack創(chuàng)建功能日歷應(yīng)用程序的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！