Netlify 기능을 사용하여 슬랙에 대한 사후 이벤트 알림

Virtual Coffee에서는 거의 매일 이벤트가 있고 매일 Slack에서 시간을 보냅니다! 따라서 Slack에서 일종의 이벤트 알림을 받는 것은 불가피했습니다. 우리의 첫 번째 패스는 고인이 된 Mike Rogers(Mike ❤️, 그리워요)가 맡았습니다. 우리 이벤트는 MeetingPlace.io에 나열되었으므로 Mike는 Ruby 앱을 작성하여 MeetingPlace에서 날짜를 가져와 Slack에 게시했습니다. Meetingplace Events Bot .

Meetingplace에서 자체 CMS로 옮겼을 때 일부 업그레이드를 수행하고 동시에 Javascript로 변환할 기회를 가졌습니다. 팔로우하시면 이벤트 알림을 받을 수 있습니다!

필요한 사항은 다음과 같습니다.

지정된 범위의 이벤트를 제공할 수 있는 데이터 소스입니다. 이제 이 데이터를 저장하는 맞춤형 CMS가 있지만 이 데이터는 Meetingplace, Meetup.com 또는 다른 곳에서 가져온 것일 수도 있습니다.

사용자가 만들어 Slack에 추가한 Slack 앱

일부 코드를 실행할 위치 - Netlify 기능을 사용하고 있습니다

.

Cron 작업을 실행할 수 있는 것 - cron-job.org을 사용하고 있습니다. 시간별 알림을 수행하려는 경우 GitHub Actions를 사용하지 않는 것이 좋습니다. 이벤트가 시작되는 시간에 충분히 가까워질 것이라고 기대할 수 없습니다.

Netlify에서 함수 만들기

Netlify 기능은 URL에 있는 Javascript 파일입니다. GET 또는 POST 매개변수를 수신하고 응답을 제공할 수 있습니다.

우리 함수는 크론 작업에 의해 호출될 것이며(자세한 내용은 잠시 후) Slack에 메시지를 보낼 것입니다.

함수가 호출될 때 발생하는 기본 개요는 다음과 같습니다.

Cron 작업은 GET 매개변수가 GET , type=weekly 또는 type=daily인 type=hourly 요청을 함수의 URL로 보냅니다.

이 함수는 적절한 매개변수를 사용하여 이벤트 데이터 소스에서 이벤트를 가져옵니다

.

이 함수는 필요에 따라 이벤트를 구문 분석합니다

.

다음으로 위의 블록 템플릿을 사용하여 일부 블록을 생성합니다

.

마지막으로 함수는 Slack Web API Client을 사용하여 Slack에 메시지를 보냅니다.

모든 이벤트 API는 모양이 조금씩 다르기 때문에 2단계와 3단계에 대해 깊이 파고들지는 않겠습니다.

당신을 위한 GitHub 템플릿!

동일한 아이디어를 따르는 사용할 수 있는 기본 GitHub 템플릿을 만들었습니다. slack-event-reminders-template

거기에 있는 지침을 따른 후에 필요한 모든 작업을 수행하는 Netlify Function + Slack 앱이 작동하게 됩니다!

보너스: Slack 메시지 디자인하기

Slack 메시지를 일반 텍스트로 게시할 수 있지만 SlackBlock Kit Builder을 사용하여 위의 스크린샷과 같이 메시지를 디자인하는 것이 매우 훌륭하고 간단하다는 것을 알았습니다.

주간 메시지( open in builder )의 블록은 다음과 같습니다.

{
  "blocks": [
    {
      "type": "header",
      "text": {
        "type": "plain_text",
        "text": "📆 This Week's Events Are:",
        "emoji": true
      }
    },
    {
      "type": "section",
      "text": {
        "type": "mrkdwn",
        "text": "*<!date^1649768400^{date_long_pretty} {time}|Tuesday, April 12, 2022, 9:00 AM EDT>*\nVirtual Coffee - Morning Crowd"
      }
    },
    {
      "type": "section",
      "text": {
        "type": "mrkdwn",
        "text": "*<!date^1649952000^{date_long_pretty} {time}|Thursday, April 14, 2022, 12:00 PM EDT>*\nVirtual Coffee - Afternoon Crowd"
      }
    },
    {
      "type": "section",
      "text": {
        "type": "mrkdwn",
        "text": "*<!date^1650373200^{date_long_pretty} {time}|Tuesday, April 19, 2022, 9:00 AM EDT>*\nVirtual Coffee - Morning Crowd"
      }
    },
    {
      "type": "context",
      "elements": [
        {
          "type": "mrkdwn",
          "text": "See details and more events at <https://virtualcoffee.io/events|VirtualCoffee.IO>!"
        }
      ]
    }
  ]
}

다음은 시간별 메시지( open in builder )의 예입니다.

{
  "blocks": [
    {
      "type": "header",
      "text": {
        "type": "plain_text",
        "text": "⏰ Starting Soon:",
        "emoji": true
      }
    },
    {
      "type": "section",
      "text": {
        "type": "mrkdwn",
        "text": "*Test Event*\n<!date^1649790000^{date_long_pretty} {time}|Tuesday, April 12, 2022, 3:00 PM EDT>"
      },
      "accessory": {
        "type": "button",
        "text": {
          "type": "plain_text",
          "text": "Join Event",
          "emoji": true
        },
        "value": "join_event_173",
        "url": "https://virtualcoffee.io",
        "action_id": "button-join-event"
      }
    },
    {
      "type": "context",
      "elements": [
        {
          "type": "mrkdwn",
          "text": "An hour-long chat with devs at all stages of the journey. You can come to hang out with great people, ask questions or bring up a topic, or just sit back and listen to others talk about tech. Currently open to slack members only. Check announcements for the Join Event button.Every Tuesday at 9AM ET!"
        }
      ]
    },
    {
      "type": "divider"
    }
  ]
}

여기서 주목해야 할 몇 가지 멋진 사항:

<!date> command은 사용자의 현지 시간대로 날짜 형식을 지정합니다. 따라서 날짜가 오후 12시(EST)에 시작하는 경우 <!date> 명령을 사용할 수 있으며 캘리포니아에 있는 사용자의 경우 오전 9시로 출력됩니다!

button accessory은 링크를 여는 멋진 모양의 버튼을 제공합니다. 원하는 경우 확인 대화 상자를 추가하거나 다른 작업을 수행할 수도 있습니다!

그게 다야!

질문이 있는 경우 언제든지 알려주거나 개선할 수 있는 부분이 있으면 GitHub 템플릿에 문제를 제출하세요!