Slack Next-gen Platform – The Simplest “Hello World”

This is translation of Slack Next-gen Platform – The Simplest “Hello World” – DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» ” written by Kaz (SDK Engineering & DevRel at Slack), I do not include any personal opinion here except guessing when meaning of original text is not clear for me)

이 글은 μŠ¬λž™μ˜ SDK Engineering / DevRel 인 Kaz 의 글을 λ²ˆμ—­ν•œκ²ƒμž…λ‹ˆλ‹€. μ €μ˜ 개인 μ˜κ²¬μ€ 듀어가지 μ•ŠμœΌλ©°, 일뢀 μ›λ¬Έμ˜ μ˜λ―Έκ°€ μ• λ§€ν•œ κ²½μš°μ—λ§Œ λΆ€μ—° μ„€λͺ…을 λ‹¬μ•˜μŠ΅λ‹ˆλ‹€.


이 νŠœν† λ¦¬μ–Όμ—μ„œλŠ”, Slack 의 Next generation Platform(μ΄ν•˜ μ°¨μ„ΈλŒ€ ν”Œλž«νΌ) 을 μ‚¬μš©ν•˜λŠ” 방법에 λŒ€ν•΄μ„œ λ°°μ›Œλ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€.

μ•„μ‹€μˆ˜λ„ μžˆλŠ”λ°μš”, slack create λͺ…λ Ήμ–΄λ₯Ό μ‚¬μš©ν•˜μ—¬ μƒˆλ‘œμš΄ app 을 λ§Œλ“€ λ•Œ, μ˜€ν”Όμ…œ “ν—¬λ‘œμš° μ›”λ“œ” ν”„λ‘œμ νŠΈ ν…œν”Œλ¦Ώμ„ μ‚¬μš©ν•΄λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€. ν•΄λ‹Ή ν”„λ‘œμ νŠΈμ˜ ν…œν”Œλ¦Ώ μ½”λ“œλŠ” λ‹€μŒ λ§ν¬μ—μ„œ 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.

https://github.com/slack-samples/deno-hello-world

ν”Œλž«νΌμ„ λ°°μš°λŠ”λ° 쒋은 ν…œν”Œλ¦Ώμž…λ‹ˆλ‹€. λ§Žμ€ 것을 닀뀄볼 수 있기 λ•Œλ¬Έμž…λ‹ˆλ‹€. (μ•± λ§€λ‹ˆνŽ˜μŠ€νŠΈ, 트리거, μ›Œν¬ν”Œλ‘œ, 빌트인 폼 νŽ‘μ…˜, μ»€μŠ€ν…€ νŽ‘μ…˜, 빌트인 메세지 νŽ‘μ…˜, ν‘œμ€€ 디렉토리 ꡬ쑰 λ“±)

κ·Έλ ‡μ§€λ§Œ, 이번 νŠœν† λ¦¬μ–Όμ—μ„œλŠ” μ΅œμ†Œν•œμ˜ λΉŒλ”© 블락, μ•± λ§€λ‹ˆνŽ˜μŠ€νŠΈ, 트리거, μ›Œν¬ν”Œλ‘œ, 빌트인 메세지 νŽ‘μ…˜μ˜ μ˜λ―Έλ“€μ— λŒ€ν•΄μ„œλ§Œ λ°°μ›Œλ³΄κ² μŠ΅λ‹ˆλ‹€. λͺ¨λ“  것을 ν•˜λ‚˜μ”© μ΄ν•΄ν•΄κ°€λŠ”κ²ƒμ€ 우회둜 처럼 보이기도 ν•˜μ§€λ§Œ 지름길이기도 ν•©λ‹ˆλ‹€. (ν•˜λ‚˜ν•˜λ‚˜ μ΄ν•΄ν•˜λŠ” 것이 μ€‘μš”ν•˜λ‹€ λΌλŠ” 의미둜 쓴것 κ°™λ„€μš”)

Prerequisites (쀀비사항)

λ§Œμ•½ Slack 의 μ°¨μ„ΈλŒ€ ν”Œλž«νΌμ„ 처음 닀뀄보신닀면, 곡식 퀡 μŠ€νƒ€νŠΈ κ°€μ΄λ“œλ₯Ό μ½μ–΄λ³΄μ„Έμš”. 퀡 μŠ€νƒ€νŠΈ κ°€μ΄λ“œμ—μ„œ μ–ΈκΈ‰λœ 바와 같이, Slack CLI 을 μ„€μ •ν•˜κ³ , 유료 μŠ¬λž™ μ›Œν¬μŠ€νŽ˜μ΄μŠ€μ— 연결해두어야 ν•©λ‹ˆλ‹€.

이 글을 μ“°λŠ” ν˜„μž¬ μ‹œμ  (2022λ…„ 12μ›”) κΈ°μ€€μœΌλ‘œ, μ°¨μ„ΈλŒ€ν”Œλž«νΌμ€ 아직 μ˜€ν”ˆ 베타 μƒνƒœμž…λ‹ˆλ‹€. κ·Έλž˜μ„œ, Slack μ›Œν¬μŠ€νŽ˜μ΄μŠ€ κ΄€λ¦¬μžκ°€ beta feature λ₯Ό μΌœμ£Όμ–΄μ•Ό ν•©λ‹ˆλ‹€. (https://my.slack.com/admin/settings#permissions)

μ—¬κΈ°κΉŒμ§€ λλ‚¬μœΌλ©΄ 이제 첫번째 앱을 λ§Œλ“€ μ€€λΉ„κ°€ λ˜μ—ˆμŠ΅λ‹ˆλ‹€. μ‹œμž‘ν•΄λ³΄μ£ 

Create a black project (빈 ν”„λ‘œμ νŠΈ 생성)

μƒˆλ‘œμš΄ ν”„λ‘œμ νŠΈλ₯Ό μ‹œμž‘ν•  λ•Œ slack create λͺ…λ Ήμ–΄λ₯Ό μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

$ slack create
? Select a template to build from:

  Hello World
  A simple workflow that sends a greeting

  Scaffolded project
  A solid foundational project that uses a Slack datastore

> Blank project
  A, well.. blank project

  To see all available samples, visit github.com/slack-samples.

Hello World ν…œν”Œλ¦Ώλ„ λ³΄μ΄μ‹œκ² μ§€λ§Œ, μ§€κΈˆμ€ Blank Project λ₯Ό μ„ νƒν•΄μ£Όμ„Έμš”

ν”„λ‘œμ νŠΈκ°€ μƒμ„±λ˜κ³  λ‚˜λ©΄ slack run λͺ…λ Ήμ–΄κ°€ λ¬Έμ œμ—†μ΄ λ™μž‘ν•˜λŠ”μ§€ ν™•μΈν•΄λ΄…μ‹œλ‹€. 이 λͺ…λ Ήμ–΄λŠ” “dev”λ²„μ „μ˜ μƒˆλ‘œμš΄ 앱을 μ—¬λŸ¬λΆ„λ“€μ˜ Slack μ›Œν¬μŠ€νŽ˜μ΄μŠ€μ— μ„€μΉ˜ν•©λ‹ˆλ‹€. λλ‚˜λ©΄ μ•±μ˜ 봇 μœ μ €κ°€ μ›Œν¬μŠ€νŽ˜μ΄μŠ€λ‚΄μ— μ‘΄μž¬ν•˜κ²Œ 되며, μ•±μ˜ 봇이 API μ½œμ„ ν•  수 μžˆλ„λ‘ token 값을 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.

$ cd dreamy-gazelle-453
$ slack run
? Choose a workspace  seratch  T03E94MJU
   App is not installed to this workspace

Updating dev app install for workspace "Acme Corp"

⚠️  Outgoing domains
   No allowed outgoing domains are configured
   If your function makes network requests, you will need to allow the outgoing domains
   Learn more about upcoming changes to outgoing domains: https://api.slack.com/future/changelog
✨  seratch of Acme Corp
Connected, awaiting events

connected, awaiting events 메세지λ₯Ό 확인할 수 μžˆλ‹€λ©΄, 앱이 μ„±κ³΅μ μœΌλ‘œ Slack 에 μ—°κ²°λœ κ²ƒμž…λ‹ˆλ‹€. μ—¬κΈ°μ„œ “Ctrl + C” λ₯Ό 눌러, 이 μ•±μ˜ ν”„λ‘œμ„ΈμŠ€λ₯Ό μ’…λ£Œν•  수 μžˆμŠ΅λ‹ˆλ‹€.

이 μ•±μ—λŠ” 아직 아무것도 μ—†λŠ” μƒνƒœμž…λ‹ˆλ‹€. κ·ΈλŸ¬λ―€λ‘œ, λͺ‡κ°€μ§€ νŒŒμΌλ“€μ„ 이 ν”„λ‘œμ νŠΈμ— 좔가해보도둝 ν•˜μ£ . μ•„λ§ˆ 이미 보셨을텐데 , Slack 의 μ°¨μ„ΈλŒ€ ν”Œλž«νΌμ—μ„œ μ‹€ν–‰λ˜λŠ” 앱은 Deno(a novel JavaScript runtime) 으둜 μ‹€ν–‰λ©λ‹ˆλ‹€. κ·Έλž˜μ„œ ν”„λ‘œμ νŠΈλ₯Ό μœ„ν•œ μ½”λ”©/νŽΈμ§‘μ„ μœ„ν•΄μ„œλŠ” VS Code 와 곡식 Deno ν”ŒλŸ¬κ·ΈμΈμ„ μ‚¬μš©ν•˜λŠ” 것을 ꢌμž₯ν•©λ‹ˆλ‹€.

Hello World with Webhook Trigger

μ°¨μ„ΈλŒ€ν”Œλž«νΌμ˜ μ•±μ—μ„œλŠ” μ—¬λŸ¬κ°œμ˜ μ›Œν¬ν”Œλ‘œλ₯Ό κ°€μ§ˆ 수 μžˆμŠ΅λ‹ˆλ‹€. λ˜ν•œ 각 μ›Œν¬ν”Œλ‘œ λ³„λ‘œ 트리거λ₯Ό κ°€μ§ˆ 수 μžˆμŠ΅λ‹ˆλ‹€. νŠΈλ¦¬κ±°λŠ” μ—°λ™λœ μ›Œν¬ν”Œλ‘œλ₯Ό μ‹œμž‘ν•˜κΈ° μœ„ν•œ 방법이며, μ΄μ „μ˜ Slack ν”Œλž«νΌκ³Ό λ‹€λ₯Έμ μ€‘ ν•œκ°€μ§€ μž…λ‹ˆλ‹€.

μ–΄λ–»κ²Œ νŠΈλ¦¬κ±°κ°€ λ™μž‘ν•˜λŠ”μ§€ λ°°μ›Œλ³΄κΈ° μœ„ν•΄μ„œ, “Incoming Webhooks 트리거”λ₯Ό ν•œλ²ˆ 써보도둝 해보죠. λ‹€μŒκ³Ό 같은 과정을 κ±°μΉ  κ²ƒμž…λ‹ˆλ‹€.

  • μ›Œν¬ν”Œλ‘œμ™€ 트리거λ₯Ό ν¬ν•¨ν•œ workflow_and_trigger.ts 생성
  • Slack μ›Œν¬μŠ€νŽ˜μ΄μŠ€μ˜ 채널 ID ν™•μΈν•˜μ—¬ μ½”λ“œλ‚΄μ— 적용
  • manifest.ts 에 μ›Œν¬ν”Œλ‘œ μΆ”κ°€
  • slack run λͺ…λ Ήμ–΄λ₯Ό ν†΅ν•œ μ΅œμ’… μ…‹νŒ…μ΄ 적용된 μ•± μž¬μ„€μΉ˜
  • 트리거 생성 (slack triggers create –trigger-def ./workflow_and_trigger.ts λͺ…λ Ήμ–΄ μ‹€ν–‰)
  • webhook URL 둜 POST μš”μ²­μ„ λ³΄λ‚΄μ„œ μ›Œν¬ν”Œλ‘œ μ‹œμž‘

μ›Œν¬ν”Œλ‘œμ™€ 트리거λ₯Ό ν¬ν•¨ν•œ workflow_and_trigger.ts 생성

workflow_and_trigger.ts νŒŒμΌμ„ λ§Œλ“€κ³ , μ•„λž˜ λ‚΄μš©μœΌλ‘œ μ €μž₯ν•©λ‹ˆλ‹€.

// -------------------------
// Workflow definition
// -------------------------
import { DefineWorkflow, Schema } from "deno-slack-sdk/mod.ts";

// Don't forget to add this workflow to manifest.ts!
export const workflow = DefineWorkflow({
  callback_id: "hello-world-workflow",
  title: "Hello World Workflow",
  input_parameters: { properties: {}, required: [] },
});

// Send a message in a channel using the built-in function
workflow.addStep(Schema.slack.functions.SendMessage, {
  channel_id: "C03E94MKS", // TODO: Grab the ID in Slack UI
  message: "Hello World!",
});

// -------------------------
// Trigger Definition
// -------------------------
import { Trigger } from "deno-slack-api/types.ts";
// This trigger starts the workflow when the webhook URL receives an HTTP request
const trigger: Trigger<typeof workflow.definition> = {
  type: "webhook", // Incoming Webhooks
  name: "Hello World Trigger",
  // Need to embed the workflow's callback_id here
  workflow: `#/workflows/${workflow.definition.callback_id}`,
};

// As long as the trigger object is default exported,
// you can generate a trigger with this code:
// $ slack triggers create --trigger-def ./workflow_and_trigger.ts
export default trigger;

이 μ†ŒμŠ€νŒŒμΌμ€ 두가지 일을 ν•©λ‹ˆλ‹€.

  • 앱을 μœ„ν•œ μƒˆλ‘œμš΄ μ›Œν¬ν”Œλ‘œ μ •μ˜
  • μ›Œν¬ν”Œλ‘œλ₯Ό μ‹œμž‘ν•  수 μžˆλŠ” webhook 트리거 μ •μ˜

λͺ‡κ°€μ§€ 일이 더 λ‚¨μ•˜μŠ΅λ‹ˆλ‹€. λ‹€μŒμœΌλ‘œ λ„˜μ–΄κ°€λ³΄μ£ .

Slack μ›Œν¬μŠ€νŽ˜μ΄μŠ€μ˜ 채널 ID ν™•μΈν•˜μ—¬ μ½”λ“œλ‚΄μ— 적용

workflow_and_trigger.ts νŒŒμΌλ‚΄μ˜ TODO μ½”λ©˜νŠΈλ₯Ό λ³΄μ‹œλ©΄ λ‹€μŒκ³Ό 같은 ν•­λͺ©μ΄ μžˆμŠ΅λ‹ˆλ‹€.

channel_id: "C03E94MKS", // TODO: Grab the ID in Slack UI

채널 ID λ₯Ό ν™•μΈν•˜κΈ° μœ„ν•΄μ„œ 일단 κ³΅κ°œμ±„λ„μ„ ν•˜λ‚˜ κ³¨λΌμ£Όμ‹­μ‹œμš”. (ν˜„ μ‹œμ κΈ°μ€€μœΌλ‘œ, 베타 ν”Œλž«νΌμ—μ„œλŠ” κ³΅κ°œμ±„λ„λ§Œ μ§€μ›λ©λ‹ˆλ‹€. GA κ°€ 되면 λΉ„κ³΅κ°œμ±„λ„λ„ 지원할 κ²ƒμž…λ‹ˆλ‹€.)

채널 ID λ₯Ό ν™•μΈν•˜κΈ° μœ„ν•œ κ°€μž₯ μ‰¬μš΄ 방법은 Slack ν΄λΌμ΄μ–ΈνŠΈμ˜ UI μ—μ„œ 채널이름을 μ„ νƒν•œν›„, 우클릭 -> 채널 세뢀정보 보기λ₯Ό λ³΄μ‹œλ©΄ “C” 둜 μ‹œμž‘ν•˜λŠ” λ¬Έμžμ—΄μ„ 보싀 수 μžˆμŠ΅λ‹ˆλ‹€. 그게 μ±„λ„μ˜ ID κ°’ μž…λ‹ˆλ‹€.

이 λ°©λ²•μ™Έμ—λŠ” ν•΄λ‹Ήμ±„λ„μ˜ 메세지쀑 ν•˜λ‚˜λ₯Ό κ³ λ₯΄μ‹œκ³ , “링크 볡사” λ₯Ό ν•΄λ³΄μ‹œλ©΄, κ·Έ μ•ˆμ— λ™μΌν•˜κ²Œ “C” 둜 μ‹œμž‘ν•˜λŠ” 뢀뢄을 ν™•μΈν•˜μ‹€ 수 μžˆμŠ΅λ‹ˆλ‹€. (https://my.slack.com/archives/..)

채널 ID κ°€ ν™•μΈλ˜λ©΄, workflow_and_trigger.ts μ½”λ“œλ‚΄μ˜ 채널 ID λ₯Ό λ°”κΏ”μ€λ‹ˆλ‹€.

manifest.ts 에 μ›Œν¬ν”Œλ‘œ μΆ”κ°€

λ‹€μŒμœΌλ‘œ, manifest.ts νŒŒμΌμ— μ•„λž˜μ™€ 같이 μ›Œν¬ν”Œλ‘œλ₯Ό μΆ”κ°€ν•©λ‹ˆλ‹€. 그리고 manifest.ts νŒŒμΌλ‚΄μ˜ workflow μ •μˆ˜κ°’μ„ μž„ν¬νŠΈν•˜κ³ , workflow λ°°μ—΄λ‚΄μ˜ 객체에 레퍼런슀λ₯Ό μΆ”κ°€ν•˜μ—¬ μ€λ‹ˆλ‹€. (μ œκ°€ 개발μͺ½μ€ μΌμžλ¬΄μ‹μ΄λΌ λ²ˆμ—­μ΄ μ œλŒ€λ‘œ λœκ±΄μ§€ λͺ¨λ₯΄κ² λ„€μš”)

import { Manifest } from "deno-slack-sdk/mod.ts";
// Import the workflow you've just created
import { workflow as HelloWorld } from "./workflow_and_trigger.ts";

export default Manifest({
  name: "dreamy-gazelle-453",
  description: "Hello World!",
  icon: "assets/default_new_app_icon.png",
  // Add the imported workflow here
  workflows: [HelloWorld],
  outgoingDomains: [],
  botScopes: ["commands", "chat:write", "chat:write.public"],
});

slack run λͺ…λ Ήμ–΄λ₯Ό ν†΅ν•œ μ΅œμ’… μ…‹νŒ…μ΄ 적용된 μ•± μž¬μ„€μΉ˜

ν•„μš”ν•œ λͺ¨λ“  변경이 μ™„λ£Œλ˜μ—ˆμŠ΅λ‹ˆλ‹€. 아직 터미널을 열어두신 μƒνƒœλΌλ©΄, λ˜‘κ°™μ€ μ»€λ§¨λ“œλ₯Ό λ‹€μ‹œν•œλ²ˆ μ‹€ν–‰ν•΄μ£Όμ‹œλ©΄ λ©λ‹ˆλ‹€. (slack run), 별닀λ₯Έ μ—λŸ¬λ©”μ„Έμ§€κ°€ λ‚˜μ˜€μ§€ μ•ŠλŠ”λ‹€λ©΄ λͺ¨λ“ κ²Œ 쒋은 μƒνƒœμž…λ‹ˆλ‹€.

slack run μ»€λ§¨λ“œλ₯Ό μ’…λ£Œν•΄λ„ μ’‹μŠ΅λ‹ˆλ‹€λ§Œ(ctrl +c), 일단 λƒ…λ‘μ‹œκ³  λ‹€λ₯Έ 터미널 μœˆλ„μš°λ₯Ό ν•˜λ‚˜ 더 μ˜€ν”ˆν•˜μ—¬ λ‹€λ₯Έ λͺ…λ Ήμ–΄λ₯Ό 싀행해보도둝 ν•˜μ£ .

Webhook 트리거 생성

이제 μ›Œν¬ν”Œλ‘œκ°€ μ€€λΉ„λ˜μ—ˆμœΌλ©° 이 μ›Œν¬ν”Œλ‘œλŠ” Slack 의 ν΄λΌμš°λ“œ μΈν”„λΌμ—μ„œ μ‹€ν–‰λ©λ‹ˆλ‹€. 이제 이 μ›Œν¬ν”Œλ‘œλ₯Ό μ‹€ν–‰ν•˜κΈ° μœ„ν•œ webhook 트리거λ₯Ό λ§Œλ“€ 수 μžˆμŠ΅λ‹ˆλ‹€. app manifest 에 workflow λ₯Ό μΆ”κ°€ν•œλ‹€ν•˜λ”λΌλ„ 트리거λ₯Ό μžλ™μœΌλ‘œ λ§Œλ“€μ§€ μ•ŠκΈ° λ•Œλ¬Έμ—, 트리거λ₯Ό λ§Œλ“€μ–΄μ£Όμ–΄μ•Ό ν•©λ‹ˆλ‹€.

slack triggers create λͺ…λ Ήμ–΄λ₯Ό μ‹€ν–‰ν•˜λ©΄ 트리거λ₯Ό λ§Œλ“€ 수 μžˆμŠ΅λ‹ˆλ‹€.

두가지 μ˜΅μ…˜μ„ λ³Ό 수 μžˆμ„ν…λ°, μ§€κΈˆμ€ 일단 (dev) κ°€ 달린 것을 μ„ νƒν•΄μ£Όμ„Έμš”.

$ slack triggers create --trigger-def ./workflow_and_trigger.ts
? Choose an app  [Use arrows to move, type to filter]
   seratch  T03E94MJU
   App is not installed to this workspace

>  seratch (dev)  T03E94MJU
   dreamy-gazelle-453 (dev) A04DHV08MPF

λ§Œμ•½ “workflow not found” μ—λŸ¬κ°€ λ°œμƒν•œλ‹€λ©΄, manifest.ts 에 μ›Œν¬ν”Œλ‘œλ₯Ό μΆ”κ°€ν•˜λŠ” 것을 κΉœλ°•ν–ˆκ±°λ‚˜, κ°€μž₯ μ΅œμ‹ μ˜ manafest data λ₯Ό 가지고 앱을 μž¬μ„€μΉ˜ ν•˜μ§€ μ•Šμ•˜λ‹€λŠ” μ˜λ―Έμž…λ‹ˆλ‹€.

μ •μƒμ μœΌλ‘œ 잘 진행이 λ˜μ—ˆλ‹€λ©΄, λ‹€μŒκ³Ό 같은 결과물을 λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€. μ΄λ ‡κ²Œ μƒμ„±λœ webhook URL 둜 μ›Œν¬ν”Œλ‘œλ₯Ό μ‹œμž‘ν•  수 μžˆμŠ΅λ‹ˆλ‹€. λ³„λ„μ˜ 인증과정이 μ—†κΈ° λ•Œλ¬Έμ— wehbook URL 은 곡개적으둜 μ˜€ν”ˆν•˜μ‹œλ©΄ μ•ˆλ©λ‹ˆλ‹€.

$ slack triggers create --trigger-def ./workflow_and_trigger.ts
? Choose an app  seratch (dev)  T03E94MJU
   dreamy-gazelle-453 (dev) A04DHV08MPF

⚑ Trigger created
   Trigger ID:   Ft04DLR5XXXX
   Trigger Type: webhook
   Trigger Name: Hello World Trigger
   Webhook URL:  https://hooks.slack.com/triggers/T11111/22222/xxxxx

webhook URL 둜 POST μš”μ²­μ„ λ³΄λ‚΄μ„œ μ›Œν¬ν”Œλ‘œ μ‹œμž‘

이제 첫번째 μ›Œν¬ν”Œλ‘œλ₯Ό μ‹€ν–‰ν•  λ•Œμž…λ‹ˆλ‹€! POST μš”μ²­μ„ webhook URL 둜 λ³΄λ‚΄λ³΄μ„Έμš”.

curl -XPOST https://hooks.slack.com/triggers/T11111/22222/xxxxx

{“ok”:true} 메세지가 λ‚˜μ˜¨λ‹€λ©΄, μ„±κ³΅μ μœΌλ‘œ μ‹€ν–‰λœ κ²ƒμž…λ‹ˆλ‹€. 이제 Slack μ›Œν¬μŠ€νŽ˜μ΄μŠ€μ˜ μ±„λ„λ‘œ μ΄λ™ν•˜μ—¬, 메세지λ₯Ό ν™•μΈν•΄λ΄…μ‹œλ‹€.

λ‹€μŒκ³Ό 같이 “Hello World” 메세지λ₯Ό 보싀 수 μžˆμ„ κ²ƒμž…λ‹ˆλ‹€. μΆ•ν•˜ν•©λ‹ˆλ‹€!

λ‹€μ‹œν•œλ²ˆ μ§€κΈˆ 어떀것듀을 ν–ˆλŠ”μ§€ μ •λ¦¬ν•΄λ΄…μ‹œλ‹€.

  • 빈 ν”„λ‘œμ νŠΈ 생성
  • workflow_and_trigger.ts νŒŒμΌμ„ μƒμ„±ν•˜μ—¬ μ›Œν¬ν”Œλ‘œμ™€ webhook 트리거λ₯Ό μ •μ˜
  • μ›Œν¬ν”Œλ‘œλ₯Ό manifest.ts 에 μΆ”κ°€
  • slack run λͺ…λ Ήμ–΄ 싀행을 ν†΅ν•˜μ—¬ μ•± μž¬μ„€μΉ˜
  • slack triggers create λͺ…λ Ήμ–΄λ₯Ό μ‹€ν–‰ν•˜μ—¬ 트리거 생성
  • POST μš”μ²­μ„ λ³΄λ‚΄μ„œ 트리거 μ‹€ν–‰

이 과정듀이 당신이 μƒκ°ν–ˆλ˜ 것보닀 훨씬 쉽고, κ°„λ‹¨ν–ˆλ‹€κ³  λŠκ»΄μ§€κΈΈ λ°”λžλ‹ˆλ‹€.

μ•„μ°Έ, λ§Œμ•½ 트리거λ₯Ό μ‹€ν–‰ν•˜κΈ° 전에 slack run λͺ…λ Ήμ–΄λ₯Ό μ’…λ£Œν•΄λ‘” μƒνƒœλΌλ©΄, slack run λͺ…λ Ήμ–΄λ₯Ό μ’…λ£Œν–ˆλŠ”λ°λ„ μ›Œν¬ν”Œλ‘œκ°€ λ™μž‘ν•˜λŠ” 것을 보고 μ’€ λ†€λž„ μˆ˜λ„ μžˆλŠ”λ°μš”. λ†€λΌμ‹œλŠ”κ²Œ 정상이며 μ°¨μ„ΈλŒ€ν”Œλž«νΌμ—μ„œλŠ” μ΄λŸ¬ν•œ λ°©μ‹μœΌλ‘œ λ™μž‘ν•©λ‹ˆλ‹€. 기쑴의 μ•± λ™μž‘λ°©μ‹κ³ΌλŠ” λ‹€λ₯΄κ²Œ, νŠΈλ¦¬κ±°μ™€ μ›Œν¬ν”Œλ‘œλ₯Ό λ‹€λ£¨λŠ” μ›Œν¬ν”Œλ‘œ 엔진이 μ—¬λŸ¬λΆ„λ“€μ˜ 둜컬이 μ•„λ‹Œ Slack 의 ν΄λΌμš°λ“œ μΈν”„λΌμ—μ„œ λ™μž‘ν•˜κΈ° λ•Œλ¬Έμž…λ‹ˆλ‹€. λ”°λΌμ„œ, μ—¬λŸ¬λΆ„μ˜ μ›Œν¬ν”Œλ‘œμ•„ λ³„λ„μ˜ μ»€μŠ€ν…€ νŽ‘μ…˜(λ‹€λ₯Έ νŠœν† λ¦¬μ–Όμ—μ„œ μ„€μ • λ“œλ¦¬κ² μŠ΅λ‹ˆλ‹€.) 을 가지고 μžˆμ§€ μ•Šλ‹€λ©΄, slack run 을 κ³„μ†ν•΄μ„œ μ‹€ν–‰ν•΄ λ‘˜ν•„μš”κ°€ μ—†μŠ΅λ‹ˆλ‹€.

Hello World with Link Trigger

μ§€κΈˆκΉŒμ§€ webhook 트리거λ₯Ό λ§Œλ“€κ³  μ‚¬μš©ν•˜λŠ” 방법에 λŒ€ν•΄ λ°°μ› μŠ΅λ‹ˆλ‹€. λ‹€μŒμ€ “link” 트리거λ₯Ό ν•œλ²ˆ 해보도둝 ν•˜μ£ . link νŠΈλ¦¬κ±°λŠ” Slack ν΄λΌμ΄μ–ΈνŠΈ UI μƒμ—μ„œ μ‚¬λžŒλ“€μ΄ “link” λ₯Ό ν΄λ¦­ν•˜λ©΄ μ›Œν¬ν”Œλ‘œκ°€ μ‚΄ν–‰λ˜λ„λ‘ ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

workflow_and_trigger.ts λ₯Ό λ‹€μŒκ³Ό 같이 λ°”κΏ”μ£Όμ„Έμš”.

// -------------------------
// Workflow definition
// -------------------------
import { DefineWorkflow, Schema } from "deno-slack-sdk/mod.ts";

// Don't forget to add this workflow to manifest.ts!
export const workflow = DefineWorkflow({
  callback_id: "hello-world-workflow",
  title: "Hello World Workflow",
  input_parameters: {
    properties: {
      // The channel ID passed from the link trigger
      channel_id: { type: Schema.slack.types.channel_id },
    },
    required: ["channel_id"],
  },
});

// Send a message in a channel using the built-in function
workflow.addStep(Schema.slack.functions.SendMessage, {
  // Set the channel ID given by trigger -> workflow
  channel_id: workflow.inputs.channel_id,
  message: "Hello World!",
});

// -------------------------
// Trigger Definition
// -------------------------
import { Trigger } from "deno-slack-api/types.ts";
// This trigger starts the workflow when an end-user clicks the link
const trigger: Trigger<typeof workflow.definition> = {
  type: "shortcut",
  name: "Hello World Trigger",
  workflow: `#/workflows/${workflow.definition.callback_id}`,
  inputs: {
    // The channel where you click the link trigger
    channel_id: { value: "{{data.channel_id}}" },
  },
};

// As long as the trigger object is default exported,
// you can generate a trigger with this code:
// $ slack triggers create --trigger-def ./workflow_and_trigger.ts
export default trigger;

보신바와 같이 λ§Žμ€ 것이 λ³€κ²½λ˜μ—ˆλŠ”λ°μš”, λ³€κ²½λœ 것듀은 λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

  • workflow κ°€ 채널 ID λ₯Ό μž…λ ₯κ°’μœΌλ‘œ λ°›μŒ
  • SendMessage νŽ‘μ…˜μ΄ μž…λ ₯받은 채널 ID λ₯Ό μ‚¬μš©ν•¨ (hard-coded 된 채널ID κ°’ λŒ€μ‹ )
  • 트리거 νƒ€μž…μ΄ shortcut 으둜 λ³€κ²½λ˜μ—ˆμœΌλ©°, link 트리거λ₯Ό μ˜λ―Έν•¨
  • νŠΈλ¦¬κ±°κ°€ μž…λ ₯받은 채널 ID λ₯Ό μ›Œν¬ν”Œλ‘œλ‘œ 전달함

slack run 을 μ‹€ν–‰ν•˜μ—¬ 별닀λ₯Έ μ—λŸ¬ 메세지가 λ°œμƒν•˜λŠ”μ§€ ν™•μΈν•΄λ³΄μ„Έμš”. μ—†λ‹€λ©΄ slack triggers create –trigger-def ./workflow_and_trigger.ts λ₯Ό μ‹€ν–‰ν•˜μ—¬ μƒˆλ‘œμš΄ link 트리거λ₯Ό λ§Œλ“­λ‹ˆλ‹€.

$ slack triggers create --trigger-def ./workflow_and_trigger.ts
? Choose an app  seratch (dev)  T03E94MJU
   dreamy-gazelle-453 (dev) A04DHV08MPF

⚑ Trigger created
   Trigger ID:   Ft04DEBXXXX
   Trigger Type: shortcut
   Trigger Name: Hello World Trigger
   URL: https://slack.com/shortcuts/Ft04DEBXXXXX/YYYY

https 둜 μ‹œμž‘ν•˜λŠ” URL 이 link URL μž…λ‹ˆλ‹€. μ—°κ²°λœ μ›Œν¬μŠ€νŽ˜μ΄μŠ€λ‚΄μ—μ„œλ§Œ μœ νš¨ν•©λ‹ˆλ‹€. 이 링크λ₯Ό λ©”μ„Έμ§€λ‘œ κ³΅μœ ν•˜λ˜κ°€ 뢁마크둜 μ§€μ •ν•΄λ‘˜μˆ˜λ„ 있겠죠. link URL 이 곡유되면, unfurl 이 μ§„ν–‰λ˜λ©° μ›Œν¬ν”Œλ‘œμš° μŠ€νƒ€νŠΈ λ²„νŠΌμ„ λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€.

start λ₯Ό λˆŒλŸ¬λ³΄μ‹œλ©΄ hello world 메세지가 채널에 λ°”λ‘œ ν‘œμ‹œλ©λ‹ˆλ‹€!

Wrapping up

이 νŠœν† λ¦¬μ–Όμ„ ν†΅ν•΄μ„œ λ‹€μŒκ³Ό 같은 점듀을 λ°°μ›Œλ³΄μ…¨μŠ΅λ‹ˆλ‹€.

  • μ›Œν¬ν”Œλ‘œ 생성
  • manifest.ts 에 μ›Œν¬ν”Œλ‘œ μΆ”κ°€
  • μ›Œν¬ν”Œλ‘œλ₯Ό μ‹œμž‘ν•˜κΈ° μœ„ν•œ webhook 트리거 생성
  • μ›Œν¬ν”Œλ‘œλ₯Ό μ‹œμž‘ν•˜κΈ° μœ„ν•œ link 트리거 생성

νŠœν† λ¦¬μ–Όμ— μ‚¬μš©λœ ν”„λ‘œμ νŠΈλŠ” λ‹€μŒ λ§ν¬μ—μ„œ 확인해보싀 수 μžˆμŠ΅λ‹ˆλ‹€. https://github.com/seratch/slack-next-generation-platform-tutorials/tree/main/01_The_Simplest_Hello_World

κ°„λ‹¨ν•˜κ²Œ 해보기 μœ„ν•΄μ„œ μ €λŠ” μ›Œν¬ν”Œλ‘œμ™€ 트리거λ₯Ό workflow_and_trigger.ts λΌλŠ” 단일 νŒŒμΌλ‚΄μ— μ •μ˜ν•΄λ‘μ—ˆκ³ , 잘 λ™μž‘ν•˜μ‹œλŠ”κ±Έ λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€. κ·Έλ ‡μ§€λ§Œ 일반적으둜 ꢌμž₯λ˜λŠ” κ΅¬μ‘°λŠ” λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.(μ›Œν¬ν”Œλ‘œμ™€ 트리거λ₯Ό λ³„λ„μ˜ νŒŒμΌμ—μ„œ μ •μ˜)

$ tree
.
β”œβ”€β”€ manifest.ts
β”œβ”€β”€ triggers
β”‚Β Β  β”œβ”€β”€ link.ts
β”‚Β Β  └── webhook.ts
└── workflows
    └── hello_world.ts.

ν‘œμ€€ ν”„λ‘œμ νŠΈ ꡬ쑰에 λŒ€ν•΄μ„œ 곡뢀해보고 μ‹ΆμœΌμ‹œλ‹€λ©΄, “hello World” λ˜λŠ” “Scaffold project” ν…œν”Œλ¦Ώμ„ μ‚¬μš©ν•˜μ—¬ ν”„λ‘œμ νŠΈλ₯Ό λ§Œλ“€μ–΄λ³΄μ„Έμ£ .

λ˜ν•œ, github.com/slack-samples orgarnization μ—μ„œ λ‹€λ₯Έ ν…œν”Œλ¦Ώμ„ μ‚¬μš©ν•΄λ³΄μ‹€ 수 도 μžˆμŠ΅λ‹ˆλ‹€. 예λ₯Ό λ“€μ–΄ https://github.com/slack-samples/deno-request-time-off  ν…œν”Œλ¦Ώμ„ μ‚¬μš©ν•΄λ³΄κ³  μ‹Άλ‹€λ©΄ λ‹€μŒκ³Ό 같이 ν•˜λ©΄ λ©λ‹ˆλ‹€.

slack create my-time-off-app -t slack-samples/deno-request-time-off

νŠœν† λ¦¬μ–Όμ„ 즐기셨기λ₯Ό λ°”λžλ‹ˆλ‹€. μ°¨μ„ΈλŒ€ν”Œλž«νΌμ— λŒ€ν•œ 좔가적인 νŠœν† λ¦¬μ–Όμ„ λͺ‡κ°€μ§€ 더 κ³΅μœ ν•΄λ³΄λ„λ‘ ν•˜κ² μŠ΅λ‹ˆλ‹€. μ–΄λ–€ μ˜κ²¬μ΄λ‚˜ μ½”λ©˜νŠΈκ°€ μžˆμœΌμ‹œλ‹€λ©΄ νŠΈμœ„ν„°(@seratch) λ‚˜ μ œκ°€ 확인해볼 수 μžˆλŠ” μ–΄λ–€ μž₯μ†Œμ— λ‚¨κ²¨μ£Όμ„Έμš”.

Happy hacking with Slack’s next-generation platform πŸš€