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

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

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

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

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

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

為了詳細(xì)說(shuō)明我的挫敗感，我需要根據(jù)HTTP請(qǐng)求的有效載荷觸發(fā)時(shí)間表。有關(guān)此時(shí)間表的日期和信息將通過(guò)HTTP請(qǐng)求傳遞。這意味著沒(méi)有辦法事先知道預(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)行代碼無(wú)關(guān)。我正在使用一個(gè)免費(fèi)的SendGrid帳戶進(jìn)行測(cè)試，我懷疑該帳戶具有某種形式的延遲。您可以通過(guò)在不發(fā)送電子郵件的情況下測(cè)試無(wú)服務(wù)器函數(shù)來(lái)確認(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ù)庫(kù)層。這是我們將存儲(chǔ)，閱讀和更新日期的地方。有趣的部分是您不會(huì)為此后端編寫(xiě)任何代碼。
3. 耐用功能：耐用功能是一種無(wú)服務(wù)器功能，具有從先前執(zhí)行中記住其狀態(tài)的功能。這就是替代Cron作業(yè)的原因，并解決了我們前面描述的臨時(shí)問(wèn)題。

本文的其余部分將根據(jù)我們?cè)谏厦婵吹降娜齻€(gè)單元進(jìn)行三個(gè)主要部分。我們將彼此接一個(gè)，將它們構(gòu)建，對(duì)其進(jìn)行測(cè)試，甚至部署工作。在進(jìn)行此操作之前，讓我們使用我為我們開(kāi)始的開(kāi)頭項(xiàng)目進(jìn)行設(shè)置。

項(xiàng)目回購(gòu)

入門(mén)

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

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

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

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

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

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

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

 NPM安裝

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

在我們了解這個(gè)術(shù)語(yǔ)是什么之前，我們需要首先擺脫兩個(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)單元放在一起。

耐用的用來(lái)描述具有持久更長(zhǎng)的出色功能的任何事物。

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

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

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

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

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

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

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

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

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

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

＃ 或者

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

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

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

從扳機(jī)開(kāi)始。

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

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

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

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

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

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

無(wú)需觸摸的無(wú)服務(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. 我們正在基于請(qǐng)求上下文的客戶端創(chuàng)建一個(gè)耐用的功能。
2. 我們使用客戶端的startNew（）函數(shù)來(lái)調(diào)用編排器。樂(lè)隊(duì)函數(shù)名稱被作為第一個(gè)通過(guò)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看起來(lái)像這樣：

 http：// localhost：7071/api/排請(qǐng)求/{functionName}

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

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

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

用耐用的編排編排

HTTP Trigger Startnew調(diào)用呼叫調(diào)用函數(shù)，該函數(shù)基于我們傳遞給它的名稱。該名稱對(duì)應(yīng)于保存編排邏輯的功能和文件夾的名稱。無(wú)服務(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ā)器檢索請(qǐng)求主體。

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

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

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

當(dāng)此功能執(zhí)行并到達(dá)此處時(shí)，它將觸發(fā)計(jì)時(shí)器并臨時(shí)保釋。時(shí)間表到期時(shí)，它將返回，跳過(guò)此行，并撥打以下行，您應(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ì)回來(lái)調(diào)用活動(dòng)?；顒?dòng)文件屬于無(wú)服務(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密鑰。您可以按照以下說(shuō)明獲取API密鑰。

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

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

替換todo -1用以下行：

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

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

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

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

 const msg = {
  到：電子郵件，
  來(lái)自：{電子郵件：'[[電子郵件保護(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 = {
    到：電子郵件，
    來(lái)自：{電子郵件：'[[電子郵件保護(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)步！在這里休息一下，午睡，伸展或休息是完全可以的。我在寫(xiě)這篇文章時(shí)肯定做到了。

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

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

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

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

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

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

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

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

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

接下來(lái)，創(chuàng)建一個(gè)表，命名表事件并填寫(xiě)表字段。

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

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

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

測(cè)試操場(chǎng)上的GraphQl查詢和突變

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

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

詢問(wèn) {
  eventslist {
    數(shù)數(shù)
    項(xiàng)目 {
      ID
      標(biāo)題
      Startat
      Endat
      描述
      Allday
      電子郵件
    }
  }
}

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

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

日歷和事件形式接口

我們項(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ù)源的工具。原始提供商允許您使用高階組件或渲染道具來(lái)查詢和突變數(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配置客戶端，我們?cè)?base設(shè)置階段中獲得：

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

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

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

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

在日歷上顯示事件

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

1. 我們渲染日歷，其中包括事件列表。
2. 我們?yōu)槿諝v提供了一個(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庫(kù)和文件開(kāi)頭的Events_query：

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

events_query與我們?cè)?Base Explorer中測(cè)試的查詢完全相同。它生活在SRC/查詢中，看起來(lái)像這樣：

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

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

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

請(qǐng)注意，日歷組件使用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（））;

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

 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)用來(lái)自8Base的耐用功能HTTP觸發(fā)器

我們花了很多時(shí)間來(lái)構(gòu)建日歷應(yīng)用程序的無(wú)服務(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ù)，但我們沒(méi)有在8base中任何地方調(diào)用無(wú)服務(wù)器功能。

8base允許您編寫(xiě)自定義邏輯，這就是使其非常強(qiáng)大且可擴(kuò)展的原因。自定義邏輯是基于在8Base數(shù)據(jù)庫(kù)上執(zhí)行的操作調(diào)用的簡(jiǎn)單函數(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è)入門(mén)邏輯：

 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。您可以通過(guò)轉(zhuǎn)到Azure URL中的功能來(lái)獲取URL，然后單擊“復(fù)制URL”。

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

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

8base邏輯配置

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

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

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

我們想部署所有的東西

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

 8base登錄

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

 8base部署

測(cè)試整個(gè)流程

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

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

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

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