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

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

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

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

漂亮，對(duì)嗎？到本文的結(jié)尾，因?yàn)檫@就是我們將要做的。

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

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

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

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

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

工具和架構(gòu)

這是該項(xiàng)目的三個(gè)基本單元：

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

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

項(xiàng)目回購

入門

您可以以不同的方式設(shè)置此項(xiàng)目 - 要么是一個(gè)全堆棧項(xiàng)目，其中一個(gè)項(xiàng)目中的三個(gè)單元，要么是一個(gè)獨(dú)立項(xiàng)目，每個(gè)單元都生活在其根本上。好吧，我選擇了第一個(gè)，因?yàn)樗啙?，更易於教學(xué)，並且可以管理，因?yàn)樗且粋€(gè)項(xiàng)目。

該應(yīng)用程序?qū)⑹且粋€(gè)創(chuàng)建反應(yīng)項(xiàng)目，我為我們降低設(shè)置的障礙而做了一個(gè)開始。它帶有補(bǔ)充代碼和邏輯，我們不需要解釋，因?yàn)樗鼈儾怀鑫恼碌墓?fàn)圍。為我們設(shè)置以下內(nèi)容：

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

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

首先將起動(dòng)器形式github克隆出來：

 git克隆-b啟動(dòng)器-Single-Branch https：//github.com/christiannwamba/calendar-app.git

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

 NPM安裝

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

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

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

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

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

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

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

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

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

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

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

1. 一個(gè)Azure帳戶
2. VS代碼

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

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

＃ 或者

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

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

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

從扳機(jī)開始。

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

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

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

最後，重複上一步以創(chuàng)建活動(dòng)。這次，以下內(nèi)容應(yīng)不同：

• 選擇耐用的功能活動(dòng)。
• 命名它。
• 不需要存儲(chǔ)帳戶。

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

無需觸摸的無服務(wù)器/附表/index.js中的代碼。這是最初使用VS代碼或CLI工具腳手架的函數(shù)時(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（``啟動(dòng)以id ='$ {instanceid}'。
  返回client.createcheckstatusresponse（context.bindingdata.req，instanceid）;
};

這裡發(fā)生了什麼？

1. 我們正在基於請求上下文的客戶端創(chuàng)建一個(gè)耐用的功能。
2. 我們使用客戶端的startNew（）函數(shù)來調(diào)用編排器。樂隊(duì)函數(shù)名稱被作為第一個(gè)通過params對(duì)像作為startNew（）的參數(shù)傳遞。 Req.body也將傳遞給StartNew（）作為第三個(gè)參數(shù)，該論點(diǎn)轉(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ù)基於我們傳遞給它的名稱。該名稱對(duì)應(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用以下代碼行替換，這可能是整個(gè)演示中最重要的事情：

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

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

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

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

該功能將調(diào)用活動(dòng)函數(shù)發(fā)送電子郵件。我們還將有效載荷作為第二個(gè)參數(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)的電子郵件

當(dāng)定期時(shí)間表時(shí)，編排者會(huì)回來調(diào)用活動(dòng)?；顒?dòng)文件屬於無服務(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鍵來安全地存儲(chǔ)自己的方式：

 {
  “ 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並將名稱值更改為有效負(fù)載：

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

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

 const msg = {
  到：電子郵件，
  來自：{電子郵件：'[[電子郵件保護(hù)]'，名稱：'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 = {
    到：電子郵件，
    來自：{電子郵件：'[[電子郵件保護(hù)]'，名稱：'codebeast日曆'}，
    主題：`事件：$ {title}`，
    html：`<h4> $ {title} @ $ {startat} </h4> <p> $ {description} </p>``
  };
  sgmail.send（msg）;

  返回msg;
};

將功能部署到Azure

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

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

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

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

描述8個(gè)鍵在堆棧中的最佳方法是繪製場景的圖片。

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

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

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

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

創(chuàng)建一個(gè)用於事件存儲(chǔ)和檢索的8base表

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

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

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

設(shè)置auth具有8個(gè)鍵，因?yàn)樗cauth0集成在一起。如果您的實(shí)體需要受到保護(hù)或想擴(kuò)展我們的示例以使用AUTH，請瘋狂。

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

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

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

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

詢問 {
  eventslist {
    數(shù)數(shù)
    專案 {
      ID
      標(biāo)題
      Startat
      Endat
      描述
      Allday
      電子郵件
    }
  }
}

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

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

日曆和事件形式接口

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

1. 日曆：列出所有現(xiàn)有事件的日曆UI
2. 事件模態(tài)：一種反應(yīng)模式，它渲染事件形式組件創(chuàng)建一個(gè)組件
3. 事件popover： popover UI讀取單個(gè)事件，使用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，用端點(diǎn)URL配置客戶端，我們在8base設(shè)置階段中獲得：

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

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

使用此客戶端將整個(gè)應(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)槿諘烟峁┝艘粋€(gè)自定義的彈出式（EventPopover）組件，該組件將用於編輯事件。
3. 我們渲染將用於創(chuàng)建新事件的模態(tài)（事件模式）。

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

替換todo -1用以下行：

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

從NPM導(dǎo)入U(xiǎn)SEQUERY庫和文件開頭的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
        ...
      }
    }
  }
`;

讓我們添加一個(gè)簡單的錯(cuò)誤，並在todo上加載處理程序-2：

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

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

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

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

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

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

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

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

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

這些是我寫的自定義鉤子，以包裝React Apollo鉤子所揭示的用戶。每個(gè)鉤子都會(huì)產(chǎn)生一個(gè)突變，並將突變變量傳遞到用戶符號(hào)查詢。在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ā)器

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

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

首先安裝8base CLI：

 NPM安裝-G 8Base

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

 8base Init 8base

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

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

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

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

模塊。 Exports= async event => {
  const res =等待fetch（'<http>'，{
    方法：“帖子”，
    正文：json.stringify（event.data），
    標(biāo)題：{'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，然後單擊“複製URL”。

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

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

8base邏輯配置

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

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

從某種意義上說，這就是說，當(dāng)事件表上發(fā)生創(chuàng)建突變時(shí)，請?jiān)谕蛔儼l(fā)生後致電src/triggerschedule.js。

我們想部署所有的東西

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

 8base登錄

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

 8base部署

測試整個(gè)流程

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

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

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

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