使用 React 和 Supabase 建立自訂調度程序

介紹

調度是現代應用程式的關鍵功能之一。它可以使我們能夠運行可以自動化的定期任務。諸如發送提醒、安排貼文、更新資料或自動化工作流程等任務。

因此，在本文中，我們將建立一個調度程式來在 dev.to 上發布文章。雖然 dev.to 具有調度功能，但我們將以我們的方式實現它們，這可用於建立任何類型的調度程式應用程式。

那麼，讓我們開始吧。

技術堆疊

我們將使用以下技術堆疊：

• React： 我們將使用 React，特別是 ViteJS 和 React 來建立前端。
• Supabase：它為建置應用程式提供了一體化的解決方案。它提供資料庫、身份驗證、儲存、邊緣功能等等。我們將使用 Supbase 中的以下內容：
  • 資料庫：用於儲存文章資訊和排程時間。
  • Cron Job：用於定期運行以呼叫 Edge 函數
  • 邊緣功能：這將檢查是否有任何文章的當前時間與預定時間相同。如果那樣它就會發布這篇文章。

這足以輕鬆建立調度程式應用程式。

處理應用程式

讓我們討論一下應用程式是如何運作的，這使得理解應用程式的流程變得很容易。以下是流程一一：

1. 透過前端加入文章到資料庫。
2. Cron 作業將每分鐘執行一次以呼叫邊緣函數。
3. 將執行邊緣函數來檢查當前時間是否與預定文章一致。如果有文章就會發布文章。
4. post表中的文章資料將會更新。 # 建構前端

隨著大量生成式人工智慧的出現，建築前端最近變得安靜。我們將要使用的人工智慧之一是 Bolt.new。為什麼是螺栓.new？它可以產生具有依賴項和所有配置（例如 tailwindcss）的完整 React 應用程式。您可以使用 StackBlitz 直接編輯文章並部署應用程式。如果需要，可以下載程式碼在本地運行。額外的一點是它與 Supabase 整合得很好，因此您可以透過 Supbase 整合來產生一個工作的 React 應用程式。

我用它來產生正面。這是所有頁面。

應用程式.tsx

這將處理用於顯示元件並提供登陸頁面的頁面。

SchudledPost.tsx

這會顯示預定的文章。

PostForm.tsx

這將處理使用者可以提供有關文章的資訊的表單。

邊緣功能

邊緣函數是伺服器端 TypeScript 函數，分佈在全球邊緣（靠近使用者）。它們可用於監聽 Webhook 或將您的 Supabase 專案與 Stripe 等第三方整合。邊緣函數是使用 Deno 開發的。

要在本地運行和部署邊緣函數，您需要具備以下條件：

• Supbase CLI：您可以使用本指南在本機上安裝 CLI。只需使用 npm 和 npx 就很簡單。
• Docker 桌面：從這裡安裝 docker 桌面。

因此，安裝後，您可以使用前端程式碼目錄或其他目錄來建立 Supabase Edge Function。

執行以下指令來啟動一個supabase專案：

以下指令可用來建立邊緣函數

上面的指令將在supabase中建立一個目錄functions/xscheduler。在那裡你可以找到index.ts。邊緣函數使用 Deno 環境。

以下程式碼用於邊緣函數：

對於 SUPABASE_URL 和 SUPABASE_SERVICE_ROLE_KEY 等 ENV，您將自動可用。對於DEVTO_ACCESS_TOKEN，您可以從這裡產生它，然後進入項目設定→邊緣功能新增令牌。該代幣將在 Deno 環境中可用。

您可以使用這個指南來部署所需的邊緣函數。

計劃任務

Supbase 最近更新了 Cron 作業功能。現在，您可以使用儀表板建立玉米作業，之前您必須為此編寫程式碼。您可以建立一個可以執行以下命令的作業：

• SQL 片段
• 資料庫功能
• HTTP 請求
• Subase 邊緣函數

我們將使用 Edge Function，您可以使用 Anon 密鑰作為 Bearer Token 添加 Edge 函數的詳細信息，例如名稱和授權。

應用程式的工作

現在，我們已經創建了應用程序，讓我們看看現在的工作情況。使用以下命令運行前端：

新增標題、內容、時間和標籤等詳細資訊。新增後，點擊安排帖子。一旦文章的計劃時間與當前時間匹配，cron 作業就會每分鐘運行一次。將會發布。

當時間範圍相符時，文章將會發佈在 dev.to 上。

附加功能

使用上述技術，您可以為 X、Instagram、LinkedIn 等任何內容建立排程器應用程式。您可以對其進行處理並添加以下功能：

• 圖片：使用supabase儲存上傳和取得縮圖影像。
• 從 SQL 呼叫邊緣函數：您可以透過從 SQL 片段或資料庫函數呼叫邊緣函數來提高效率。這樣，只有當文章與當前時間相符時，才會呼叫邊緣函數。

您可以在 GitHub 上查看該專案的程式碼。

結論

建立調度程序應用程式可以簡化發布文章、發送提醒和管理工作流程等自動化任務。使用 React 作為前端，Supabase 作為後端，我們建立了一個利用資料庫、cron 作業和邊緣功能的可擴展解決方案。這種方法可以適應各種用例，從而實現高效的自動化。借助這些工具，您可以建立適合您需求的強大調度程序應用程式。

我希望這篇文章能讓您了解 cron 作業。感謝您閱讀這篇文章。

以上是使用 React 和 Supabase 建立自訂調度程序的詳細內容。更多資訊請關注PHP中文網其他相關文章！