小編精選 - 技術文章翻譯  ·  11月22日

🚀 發送 Github 星星監測通知的 4 種方式 ⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️

🚀 發送 Github 星星監測通知的 4 種方式 ⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️

簡介

在上一篇文章中，我討論了建立一個GitHub stars 監視器。

在這篇文章中，我想向您展示如何每天了解新星的資訊。

我們將學習：

  • 如何建立通用系統來建立和使用提供者。

  • 如何使用提供者發送通知。

  • 使用不同提供者的不同用例。

通知

你的後台工作平台🔌

Trigger.dev 是一個開源程式庫，可讓您使用 NextJS、Remix、Astro 等為您的應用程式建立和監控長時間執行的作業！

 

GiveUsStars

請幫我們一顆星🥹。

這將幫助我們建立更多這樣的文章💖

https://github.com/triggerdotdev/trigger.dev

讓我們來設定一下 🔥

我們將建立不同的提供者來通知我們何時有新的明星。我們將設定「電子郵件」、「簡訊」、「Slack」和「Discord」通知。

我們的目標是讓每個貢獻者都足夠簡單，以便在未來貢獻更多的提供者。

每個提供者都會有一組不同的參數，有些只有“API 金鑰”，有些則有電話號碼，具體取決於提供者。

為了驗證這些金鑰，讓我們安裝“zod”；它是一個很棒的庫，可以定義模式並根據模式檢查資料。

您可以透過執行以下命令開始：

npm install zod --save

完成後，建立一個名為「providers」的新資料夾，然後在其中建立一個名為「register.provider.ts」的新檔案。

這是文件的程式碼：

import {Schema} from "zod";

export function registerProvider<T>(
    name: string,
    options: {active: boolean},
    validation: Schema<T>,
    run: (libName: string, stars: number, values: T) => Promise<void>
) {
    // if not active, we can just pass an empty function, nothing will run
    if (!options.active) {
        return () => {};
    }

    // will validate and remove unnecessary values (Security wise)
    const env = validation.parse(process.env);

    // return the function we will run at the end of the job
    return async (libName: string, stars: number) => {
        console.log(`Running provider ${name}`);
        await run(libName, stars, env as T);
        console.log(`Finished running provider ${name}`);
    }
}

程式碼不多，但可能有點複雜。

我們首先建立一個名為「registerProvider」的新函數。該函數獲得一個通用類型“T”，基本上是我們所需的環境變數。

然後我們還有 4 個參數：

  • 名稱 - 可以是「Twilio」、「Discord」、「Slack」或「Resend」中的任何一個。

  • 選項 - 目前，一個參數是提供者是否處於活動狀態？

  • 驗證 - 在這裡，我們在 .env 檔案中傳遞所需參數的「zod」模式。

  • run - 實際上用於發送通知。請注意，傳入其中的參數是庫名稱、星星數量以及我們在「validation」中指定的環境變數

然後我們就有了實際的功能：

首先，我們檢查提供者是否處於活動狀態。如果沒有，我們發送一個空函數。

然後，我們驗證並提取我們在模式中指定的變數。如果變數缺少 zod 將發送錯誤並且不會讓應用程式執行。

最後，我們傳回一個函數，該函數會取得庫名稱和星星數量並觸發通知。

在我們的「providers」資料夾中，建立一個名為「providers.ts」的新文件，並在其中新增以下程式碼：

export const Providers = [];

稍後，我們將在那裡加入所有提供者。

修改 TriggerDev 作業

本文是上一篇關於建立 GitHub stars 監視器。

編輯檔案 jobs/sync.stars.ts 並將以下程式碼加入檔案底部：

const triggerNotification = client.defineJob({
    id: "trigger-notification",
    name: "Trigger Notification",
    version: "0.0.1",
    trigger: invokeTrigger({
      schema: z.object({
        stars: z.number(),
        library: z.string(),
        providerNumber: z.number(),
      })
    }),
    run: async (payload, io, ctx) => {
      await io.runTask("trigger-notification", async () => {
        return Providers[payload.providerNumber](payload.library, payload.stars);
      });
    }
});

此作業取得星星數量、圖書館名稱和提供者編號，並從先前定義的提供者觸發特定提供者的通知。

現在，我們繼續修改“getStars”，在函數末尾加入以下程式碼：

for (let i = 0; i < Providers.length; i++) {
      await triggerNotification.invoke(payload.name + '-' + i, {
          library: payload.name,
          stars: stargazers_count - payload.previousStarCount,
          providerNumber: i,
      });
  }

這將觸發每個圖書館的通知。

完整頁面程式碼：

import { cronTrigger, invokeTrigger } from "@trigger.dev/sdk";
import { client } from "@/trigger";
import { prisma } from "../../helper/prisma";
import axios from "axios";
import { z } from "zod";
import {Providers} from "@/providers/providers";

// Your first job
// This Job will be triggered by an event, log a joke to the console, and then wait 5 seconds before logging the punchline.
client.defineJob({
  id: "sync-stars",
  name: "Sync Stars Daily",
  version: "0.0.1",
  // Run a cron every day at 23:00 AM
  trigger: cronTrigger({
    cron: "0 23 * * *",
  }),
  run: async (payload, io, ctx) => {
    const repos = await io.runTask("get-stars", async () => {
      // get all libraries and current amount of stars
      return await prisma.repository.groupBy({
        by: ["name"],
        _sum: {
          stars: true,
        },
      });
    });

    //loop through all repos and invoke the Job that gets the latest stars
    for (const repo of repos) {
      await getStars.invoke(repo.name, {
        name: repo.name,
        previousStarCount: repo?._sum?.stars || 0,
      });
    }
  },
});

const getStars = client.defineJob({
  id: "get-latest-stars",
  name: "Get latest stars",
  version: "0.0.1",
  // Run a cron every day at 23:00 AM
  trigger: invokeTrigger({
    schema: z.object({
      name: z.string(),
      previousStarCount: z.number(),
    }),
  }),
  run: async (payload, io, ctx) => {
    const stargazers_count = await io.runTask("get-stars", async () => {
      const {data} = await axios.get(`https://api.github.com/repos/${payload.name}`, {
        headers: {
          authorization: `token ${process.env.TOKEN}`,
        },
      });
      return data.stargazers_count as number;
    });

    await io.runTask("upsert-stars", async () => {
      await prisma.repository.upsert({
        where: {
          name_day_month_year: {
            name: payload.name, month: new Date().getMonth() + 1, year: new Date().getFullYear(), day: new Date().getDate(),
          },
        }, update: {
          stars: stargazers_count - payload.previousStarCount,
        }, create: {
          name: payload.name, stars: stargazers_count - payload.previousStarCount, month: new Date().getMonth() + 1, year: new Date().getFullYear(), day: new Date().getDate(),
        },
      });
    });

    for (let i = 0; i < Providers.length; i++) {
        await triggerNotification.invoke(payload.name + '-' + i, {
            library: payload.name,
            stars: stargazers_count - payload.previousStarCount,
            providerNumber: i,
        });
    }
  },
});

const triggerNotification = client.defineJob({
    id: "trigger-notification",
    name: "Trigger Notification",
    version: "0.0.1",
    trigger: invokeTrigger({
      schema: z.object({
        stars: z.number(),
        library: z.string(),
        providerNumber: z.number(),
      })
    }),
    run: async (payload, io, ctx) => {
      await io.runTask("trigger-notification", async () => {
        return Providers[payload.providerNumber](payload.library, payload.stars);
      });
    }
});

現在，有趣的部分🎉

讓我們繼續建立我們的提供者！

首先建立一個名為「providers/lists」的新資料夾

1. Discord

Discord

建立一個名為「discord.provider.ts」的新檔案並新增以下程式碼：

import {object, string} from "zod";
import {registerProvider} from "@/providers/register.provider";
import axios from "axios";

export const DiscordProvider = registerProvider(
    "discord",
    {active: true},
    object({
        DISCORD_WEBHOOK_URL: string(),
    }),
    async (libName, stars, values) => {
        await axios.post(values.DISCORD_WEBHOOK_URL, {content: `The library ${libName} has ${stars} new stars!`});
    }
);

如您所見，我們正在使用 registerProvider 建立一個名為 DiscordProvider 的新提供程序

  • 我們將名稱設定為“discord”

  • 我們將其設定為活動狀態

  • 我們指定需要一個名為「DISCORD_WEBHOOK_URL」的環境變數。

  • 我們使用 Axios 的簡單 post 指令將資訊加入支票中。

若要取得“DISCORD_WEBHOOK_URL”：

  1. 前往您的 Discord 伺服器

  2. 點選其中一個頻道的“編輯”

  3. 轉到“整合”

  4. 點選“建立 Webhook”

  5. 點選建立的 webhook，然後點選“複製 webhook URL”

在根專案上編輯“.env”檔案並加入

SLACK_WEBHOOK_URL=<your copied url>

Spidy

2. Slack

Slack

建立一個名為「slack.provider.ts」的新檔案並新增以下程式碼：

import {object, string} from "zod";
import {registerProvider} from "@/providers/register.provider";
import axios from "axios";

export const SlackProvider = registerProvider(
    "slack",
    {active: true},
    object({
        SLACK_WEBHOOK_URL: string(),
    }),
    async (libName, stars, values) => {
        await axios.post(values.SLACK_WEBHOOK_URL, {text: `The library ${libName} has ${stars} new stars!`});
    }
);

如您所見，我們正在使用 registerProvider 建立一個名為 SlackProvider 的新提供者

  • 我們將名稱設定為“slack”

  • 我們將其設定為活動狀態

  • 我們指定需要一個名為「SLACK_WEBHOOK_URL」的環境變數。

  • 我們使用 Axios 的簡單 post 指令將資訊加入支票中。

要取得“SLACK_WEBHOOK_URL”：

  1. 使用下列 URL 建立新的 Slack 應用程式：https://api.slack.com/apps?new_app=1

  2. 選擇第一個選項：“從頭開始”

  3. 指定應用程式名稱（任意）以及您想要新增通知的 Slack 工作區。點擊“建立應用程式”。

  4. 在“新增特性和功能”中，按一下“傳入掛鉤”

  5. 在啟動傳入 Webhooks 中，將其變更為「開啟」。

  6. 按一下「將新 Webhook 新增至工作區」。

  7. 選擇您想要的頻道並點選「允許」。

  8. 複製 Webhook URL。

在根專案上編輯“.env”檔案並加入

SLACK_WEBHOOK_URL=<your copied url>

SlackBot

3. 電子郵件

電子郵件

您可以使用不同類型的電子郵件提供者。例如，我們將使用Resend來傳送電子郵件。

為此，讓我們在我們的專案上安裝重新發送：

npm install resend --save

建立一個名為「resend.provider.ts」的新檔案並新增以下程式碼：

import {object, string} from "zod";
import {registerProvider} from "@/providers/register.provider";
import axios from "axios";
import { Resend } from 'resend';

export const ResendProvider = registerProvider(
    "resend",
    {active: true},
    object({
        RESEND_API_KEY: string(),
    }),
    async (libName, stars, values) => {
        const resend = new Resend(values.RESEND_API_KEY);
        await resend.emails.send({
            from: "Eric Allam <[email protected]>",
            to: ['[email protected]'],
            subject: 'New GitHub stars',
            html: `The library ${libName} has ${stars} new stars!`,
        });
    }
);

如您所見，我們正在使用 registerProvider 建立一個名為 ResendProvider 的新提供程序

  • 我們將名稱設定為“重新發送”

  • 我們將其設定為活動狀態

  • 我們指定需要一個名為「RESEND_API_KEY」的環境變數。

  • 我們使用重新發送庫向自己發送一封包含新星數的電子郵件。

若要取得“RESEND_API_KEY”：

  1. 建立一個新帳戶：https://resend.com

  2. 前往「API 金鑰」或使用此 URL https://resend.com/api-keys

  3. 按一下“+ 建立 API 金鑰”，新增金鑰名稱，選擇“傳送存取”並使用預設的“所有網域”。單擊新增。

  4. 複製 API 金鑰。

在根專案上編輯“.env”檔案並加入

RESEND_API_KEY=<your API key>

埃里克·阿拉姆

4.簡訊

Twilio

SMS 有點複雜，因為它們需要多個變數。

為此，我們在專案中安裝 Twilio：

npm install twilio --save

建立一個名為「twilio.provider.ts」的新檔案並新增以下程式碼：

import {object, string} from "zod";
import {registerProvider} from "@/providers/register.provider";
import axios from "axios";
import client from 'twilio';

export const TwilioProvider = registerProvider(
    "twilio",
    {active: true},
    object({
        TWILIO_SID: string(),
        TWILIO_AUTH_TOKEN: string(),
        TWILIO_FROM_NUMBER: string(),
        TWILIO_TO_NUMBER: string(),
    }),
    async (libName, stars, values) => {
        const twilio = client(values.TWILIO_SID, values.TWILIO_AUTH_TOKEN);
        await twilio.messages.create({
            body: `The library ${libName} has ${stars} new stars!`,
            from: values.TWILIO_FROM_NUMBER,
            to: values.TWILIO_TO_NUMBER,
        });
    }
);

如您所見，我們正在使用 registerProvider 建立一個名為 TwilioProvider 的新提供者

  • 我們將名稱設定為“twilio”

  • 我們將其設定為活動狀態

  • 我們指定需要環境變數：TWILIO_SID、TWILIO_AUTH_TOKEN、TWILIO_FROM_NUMBER 和 TWILIO_TO_NUMBER

  • 我們使用 Twilio「建立」功能發送簡訊。

取得“TWILIO_SID”、“TWILIO_AUTH_TOKEN”、“TWILIO_FROM_NUMBER”和“TWILIO_TO_NUMBER”

  1. 在 https://twilio.com 建立一個新帳戶

  2. 標記您要使用它來發送簡訊。

  3. 點選“取得電話號碼”

  4. 複製“帳戶 SID”、“身份驗證令牌”和“我的 Twilio 電話號碼”

在根專案上編輯“.env”檔案並加入

TWILIO_SID=<your SID key>
TWILIO_AUTH_TOKEN=<your AUTH TOKEN key>
TWILIO_FROM_NUMBER=<your FROM number>
TWILIO_TO_NUMBER=<your TO number>

TwilioSMS

建立新的提供者

正如您所看到的，現在建立提供者非常容易。

您也可以使用開源社群來建立新的提供程序，因為他們只需要在「providers/list」目錄中建立一個新檔案。

最後要做的事情是編輯“providers.ts”檔案並加入所有提供程序。

import {DiscordProvider} from "@/providers/list/discord.provider";
import {ResendProvider} from "@/providers/list/resend.provider";
import {SlackProvider} from "@/providers/list/slack.provider";
import {TwilioProvider} from "@/providers/list/twilio.provider";

export const Providers = [
    DiscordProvider,
    ResendProvider,
    SlackProvider,
    TwilioProvider,
];

請隨意建立更多推播通知、網路推播通知、應用程式內通知等提供者。

你就完成了🥳

讓我們聯絡吧！ 🔌

作為開源開發者，我們邀請您加入我們的社群，以做出貢獻並與維護者互動。請隨時造訪我們的 GitHub 儲存庫，貢獻並建立與 Trigger.dev 相關的問題。

本教學的源程式碼可在此處取得：

https://github.com/triggerdotdev/blog/tree/main/stars-monitor-notifications

感謝您的閱讀！

原文出處：https://dev.to/triggerdotdev/top-4-ways-to-send-notifications-about-new-stars-1cgb

0個讚   0留言 230瀏覽
共有 0 則留言
登入之後發表留言
小編精選 - 技術文章翻譯
精選技術文章翻譯，幫助開發者持續吸收新知。
熱門文章
🔥 🚀 發送 Github 星星監測通知的 4 種方式 ⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️
🔥 寫出 Clean Code 的一些技巧＆原則
🔥 使用 React.js、Node.js、SerpApi 和 MUI 建立求職網站 Web 應用程式
🔥 如何縮小 Docker 映像大小
🔥 10 個 JavaScript 語法小技巧
最新出爐作業包
⭐ 邁向資深之路：非同步 JS 訓練（二）—— 各種寫法的錯誤處理、收尾處理
⭐ 邁向資深之路：非同步 JS 訓練（一）—— 從 Callback Hell 到 Promise 介面
⭐ Github Desktop 新手入門教學 —— 用漂亮的 GUI 介面來學習 Git 基本觀念
⭐ 邁向資深之路：後端 JS 訓練（二）—— 玩玩看 Express，用純後端做做看部落格
⭐ 邁向資深之路：後端 JS 訓練（一）—— 玩玩看 Node，做做看老派 CLI 應用程式
熱門搜尋： ar java JavaScript ") error Html FB 伺服器 工作 學習 結構 使用 專案 開發 fb 分享 作為 COM Java 架構 作業 design 清單 gpt 網頁 "; js 主題 工程師 user Can 系列 研究 oop 作品 ＣＳＳ 技術 PHP 網站 react'_ 資料結構 語言 for 部落格 Ai vue api AI 套件 第一 onclick id git AWS json github 隨機 後端 嬰兒 搜尋 自學 全端 postgresql 熱情 Callback 作品集 非同步 with 畢業 開源 部署 jquery 測試 repositor 資料庫 ul 課程 分析 javascript 新手 排序 Django birdie Javascript app model JS 練習 遊戲 Ml Github 前端 JavaScript 系列 登入 React Line 入門 go models html
🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。