meetup
by Janeth Ledezma
简妮丝·莱德兹玛(Janeth Ledezma)
In this guide, you will learn how to set up a Slack application that will display information from Meetup’s API, which serves stored data from Meetup to other application software.
在本指南中,您将学习如何设置一个Slack应用程序,该应用程序将显示来自Meetup API的信息 ,该API将来自Meetup的存储数据提供给其他应用程序软件。
Meetup is a popular website where individuals with similar interests form groups to organize events in their local cities.
Meetup是一个受欢迎的网站,志趣相投的人组成小组来组织当地城市的活动。
Once we’ve successfully made a request to Meetup’s API, we will receive a response from Meetup, we’ll pull specific data from the JSON payload, and display that data in Slack. We will design our Slack application’s attachment so that it displays the event’s name, description, date and time, location, and more!
成功向Meetup的API提出请求后,我们将收到来自Meetup的响应,我们将从JSON有效负载中提取特定数据,并在Slack中显示该数据。 我们将设计Slack应用程序的附件,以便它显示事件的名称,描述,日期和时间,位置等!
When you submit /nextmeetup 94709&javascript
(or any zip code and a topic of interest) in Slack’s message box, a webhook will be triggered. The webhook, built and hosted on Standard Library, will first make a request to Meetup’s API, which will return a JSON payload with results from the query.
当您在Slack的消息框中提交/nextmeetup 94709&javascript
(或任何邮政编码和感兴趣的主题)时,将触发一个Webhook。 在标准库上构建和托管的Webhook首先会向Meetup的API发出请求,该API将返回带有查询结果的JSON有效负载。
The webhook will then create Slack messages for each event and post those to a specified channel.
然后,Webhook将为每个事件创建Slack消息并将其发布到指定的频道。
No need to get overwhelmed! Let’s take it a step at a time.
无需不知所措! 让我们一次迈出一步。
Make sure you’re signed in to Slack and visit your Slack Apps Dashboard at https://api.slack.com/apps. You’ll see a screen that looks like the following.
确保您已登录Slack并访问https://api.slack.com/apps上的 Slack Apps仪表板。 您将看到一个类似于以下的屏幕。
Click Create New App. You’ll be presented with a modal to enter your App Name and the Development Slack Workspace you’d like to add it to.
单击创建新应用。 系统将为您提供一个模态,以输入您的应用名称和您想要添加到其中的Development Slack工作区。
From here, click Create App, you’ll find yourself on a Basic Information page.
从此处单击“ 创建应用程序”,您会在“ 基本信息”页面上找到自己。
Scroll down to Display Information. This is where you can give your Slack app a name, description, and an image if you’d like.
向下滚动以显示信息。 如果需要,您可以在此处为Slack应用提供名称,描述和图像。
Keep the Basic Information page open in your browser. We’ll be using it in a second to retrieve your Slack app’s credentials to connect this application to the backend logic hosted on Standard Library — the code running your application.
在浏览器中保持“ 基本信息”页面打开。 我们将在一秒钟内使用它来检索您的Slack应用程序的凭据,以将该应用程序连接到标准库中托管的后端逻辑-运行您的应用程序的代码。
We’ll be hosting our Slack application’s code on Standard Library— the code that will be requesting and receiving specific information from Meetups API. So head on over to Code on Standard Library and claim your free account.
我们将在标准库上托管Slack应用程序的代码,该代码将请求并从Meetups API接收特定信息。 因此,请转到标准库上的代码并申请免费帐户。
Once you’ve logged in or signed up, you will land on “Featured API Source.” These are application code templates available on Standard Library for anyone to easily copy and modify apps. You’re going to select the Slack application code template and modify it to create your API that will power your Slack app.
登录或注册后,您将进入“ Featured API Source”。 这些是标准库上可用的应用程序代码模板,任何人都可以轻松复制和修改应用程序。 您将选择Slack应用程序代码模板并对其进行修改,以创建将为Slack应用程序提供动力的API。
Enter a unique name for your API project and hit Okay.
为您的API项目输入一个唯一的名称,然后单击“ 确定”。
Let’s pause for a moment to understand what we are looking at. The left sidebar is an API project scaffold that Standard Library has set up for you to build Slack apps.
让我们暂停片刻以了解我们正在查看的内容。 左侧边栏是标准库为您建立的API项目支架,以构建Slack应用程序。
The code template for Slack Apps has four directories. We will only work within the functions
directory which comes equipped with three more folders
Slack Apps的代码模板有四个目录。 我们将仅在functions
目录下工作,该目录还提供了三个文件夹
actions/, commands/, and events/
as well as a single file __main__.js.
The instructions for Slack actions, slash commands, and events for your app live inside those folders.
actions/, commands/, and events/
以及单个文件__main__.js.
这些应用程序位于这些文件夹中,其中包含有关应用程序的Slack操作,斜杠命令和事件的说明。
When you deploy your API, Standard Library will automatically generate HTTPS endpoints (URLs) for each directory. The resulting URLs will allow us to configure webhooks that listen and respond to Slack’s actions, slash commands, and events.
部署API时,标准库将自动为每个目录生成HTTPS端点(URL)。 生成的URL将使我们能够配置侦听并响应Slack的动作 , 斜杠命令和事件的 Webhooks。
All five folders (including the functions
folder are set up with a __main__.js
file (the directory’s main endpoint). These endpoints__main__.js
dispatch the appropriate functions when they receive a message from Slack. For this tutorial, the file__main__.js
will be dispatching the commands
endpoint when we call our API via our Slack Bot. Now, let’s return to our bot setup!
这五个文件夹(包括functions
文件夹)均使用__main__.js
文件(目录的主要端点)设置。这些端点__main__.js
收到Slack的消息__main__.js
调度相应的函数__main__.js
当我们通过Slack Bot调用API时,将调度commands
端点,现在,让我们回到我们的机器人设置!
commands:
The commands
directory is the endpoint for all Slack slash commands. Create an additional command by placing your cursor over the commands
directory and right-clicking. Select New File and name your slash command file nextmeetup.js and click Okay.
commands:
commands
目录是所有Slack斜杠命令的端点。 将光标放在commands
目录上并单击鼠标右键,以创建其他命令。 选择New File并命名您的斜杠命令文件nextmeetup.js ,然后单击Okay 。
At this point, you will notice a “hello world” JavaScript function inside (__main__.js
), which is automatically generated.
此时,您会注意到( __main__.js
)内部的“ hello world” JavaScript函数是自动生成的。
Replace the contents of nextmeetup.js
with the following:
用以下内容替换nextmeetup.js
的内容:
When you submit /nextmeetup
via your Slack app, you are making a GET request to Meetup’s API.
当您通过Slack应用程序提交/nextmeetup
,您正在向Meetup的API发出GET请求。
Every request to Meetups API has to be authenticated with an API key, so we pass our Meetup key from our env.json
file into our request. We also send our GET request with the two parameters, zip and topic.
对Meetups API的每个请求都必须使用API密钥进行身份验证,因此我们将Meetup密钥从env.json
文件传递到我们的请求中。 我们还发送带有两个参数zip和topic的GET请求。
The Meetup API returns an array of meetup event objects, which we can view from Code on Standard Library logs by logging our response: console.log(response.data)
. Your logs tab is located underneath the debug section.
Meetup API返回一个Meetup事件对象数组,我们可以通过记录以下响应从console的标准库日志中的代码查看: console.log(response.data)
。 您的日志标签位于调试部分下方。
The response.data
is an array of events that match your query, and we want to create two attachments for each event (one for location and one for details). We have a function called formatAttachement
that we can call on each of the events. The results get put in an array called attachments
that gets sent to Slack.
response.data
是与您的查询匹配的事件数组,我们希望为每个事件创建两个附件(一个用于位置,一个用于详细信息)。 我们有一个名为formatAttachement
的函数,我们可以对每个事件进行调用。 结果被放入称为attachments
的数组中,该数组被发送到Slack。
Once you’ve copied and pasted the code into your file nextmeetup.js
, save the changes and navigate to the env.json
file on the left bar menu.
将代码复制并粘贴到文件nextmeetup.js
,保存更改并导航至左侧栏菜单上的env.json
文件。
Inside the env.json
you will notice environment variables for your API. You can set different values for local, dev, and release (production) environments. This file will hold all of your unique access keys to your Standard Library account, Meetup account and Slack app credentials.
在env.json
内部,您会注意到API的环境变量。 您可以为本地,开发和发布(生产)环境设置不同的值。 该文件将包含您对标准库帐户,Meetup帐户和Slack应用程序凭据的所有唯一访问密钥。
We’ll only be making modifications to the "dev"
environment variables — make sure you’re modifying the right set! Note that "dev”
values are for your development environment and "release"
values should only be populated when you’re ready to release your app. “local”
variables can be left blank when deploying from Code on Standard Library, but they should be filled out when working with the command line tools.
我们将只对"dev"
环境变量进行修改 - 确保您正在修改正确的设置 ! 请注意, "dev”
值适用于您的开发环境, "release"
值仅应在准备发布应用程序时填充。 “local”
变量在从标准库上的代码进行部署时可以留空。使用命令行工具时填写。
Let’s start off by filling in the “STDLIB_TOKEN”
variable. Place your cursor in between the quotation marks (see screen) and either right-click and select Insert Library Token… or use the shortcut ⌘ + K.
让我们从填写“STDLIB_TOKEN”
变量开始。 将光标置于引号之间(请参见屏幕),然后右键单击并选择Insert Library Token…,或使用快捷键⌘+K。
Select Library Token to fill in "dev"
environment.
选择“ 库令牌”以填写"dev"
环境。
Now go back to the Basic Information page of your Slack App and scroll down to App Credentials:
现在返回到Slack App的Basic Information页面,然后向下滚动到App Credentials :
Copy your Client ID, Client Secret, and Verification Token. Paste them into their respective fields in“dev”
section of the env.json
file.
复制您的客户ID,客户机密和验证令牌 。 将它们粘贴到env.json
文件的“dev”
部分中的相应字段中。
Add the name you gave your Slack app for theSLACK_APP_NAME
.
添加您为SLACK_APP_NAME
Slack应用命名的名称。
Ex: SLACK_APP_NAME:Meetup-bot
例如: SLACK_APP_NAME:Meetup-bot
The “SLACK_REDIRECT”
value will be an https endpoint generated by Standard Library once you deploy your API. Even though we haven’t yet deployed, go ahead an fill it in now using this structure. https://<username>.api.stdlib.com/<apiname&g
t;@dev/auth/ — with your standard library username and your API name. Once we deploy the code you can return to confirm that you filled this value properly.
部署API后, “SLACK_REDIRECT”
值将是标准库生成的https端点。 即使我们尚未部署,也请立即使用此结构进行填充。 https://<username>.api.stdlib.com/<apiname&g
t; @ dev / auth /-使用标准库用户名和API名称。 部署代码后,您可以返回以确认您正确填写了该值。
My SLACK_REDIRECT
looks like this: https://Janethl.api.stdlib.com/slack-meetup-bot@dev/auth/
— make sure you add authentication path with a slash at the end.
我的SLACK_REDIRECT
看起来像这样: https://Janethl.api.stdlib.com/slack-meetup-bot@dev/auth/
: SLACK_REDIRECT
—确保在末尾添加带斜杠的身份验证路径。
Your Slack app’s capabilities and permissions will already be set up with the following scopes:
您的Slack应用程序的功能和权限将在以下范围内进行设置:
“SLACK_OAUTH_SCOPE”:bot,commands,chat:write:bot,chat:write:user,files:write:user,channels:history
“ SLACK_OAUTH_SCOPE”: bot,commands,chat:write:bot,chat:write:user,files:write:user,channels:history
The last variable that you will need to add is your Meetup API key. Meetup requires that every request is authenticated with an API key.
您需要添加的最后一个变量是Meetup API密钥。 Meetup要求每个请求都必须通过API密钥进行身份验证。
Login or create an account at Meetup.com. Head on over to https://secure.meetup.com/meetup_api/key/ to retrieve your unique API key. Click the lock to reveal your API key and copy it.
登录或在Meetup.com上创建一个帐户。 前往https://secure.meetup.com/meetup_api/key/检索您的唯一API密钥。 单击锁以显示您的API密钥并进行复制。
Return to your env.json
file on Code on Standard Library. Add your Meetup key as a "key"
value, exactly as I have done in the image:
返回到标准库代码上的 env.json
文件。 将您的Meetup键添加为"key"
值,就像我在图像中所做的一样:
Make sure to save the changes with ‘⌘ + s’ (or hit Save in the bottom right).
确保使用“⌘+ s”保存更改(或点击右下角的“ 保存 ”)。
On the sidebar menu pen the __main__.js
file located below the events directory. Deploy the code of your Slack app to Standard Library by clicking “Run”.
在边栏菜单上,笔位于事件目录下的__main__.js
文件。 单击“ 运行 ”将Slack应用程序的代码部署到标准库。
Shortly after deploying your code, Standard Library generates an HTTPS API endpoint URL where your code lives. This address consists of your <username>.api.stdlib.com followed by the name you gave your API @ the environment: https://janethl.api.stdlib.com/slack-meetup-bot@dev/
部署代码后不久,标准库就会生成一个HTTPS API终结点URL,您的代码将驻留在该URL中。 该地址包含您的<username> .api.stdlib.com,后跟您在环境中给API的名称:https: //janethl.api.stdlib.com/slack-meetup-bo t @ dev /
We now have the URL that will allow us to send and receive messages from our Slack app to Meetup’s API. Now we need to set our URL as webhook in Slack, so let’s head back to the Slack app dashboard
现在,我们有了该URL,该URL使我们能够从Slack应用发送和接收消息到Meetup的API。 现在我们需要在Slack中将URL设置为webhook,所以让我们回到Slack应用仪表板
We now need to set our Slack app to respond to a slash command (/
). For this, we need to set up a webhook on Slacks API page.
现在,我们需要设置Slack应用程序以响应斜杠命令( /
)。 为此,我们需要在Slacks API页面上设置一个Webhook。
Perhaps we can understand what a webhook is by comparing it to an API. APIs are request based — meaning that they operate when a request is made from a third party application. A webhook is event-based — the code will run when a specific event triggers it.
也许我们可以通过将它与API进行比较来了解什么。 API是基于请求的-意味着当第三方应用程序发出请求时,它们将运行。 Webhook是基于事件的-代码将在特定事件触发时运行。
To set a webhook, a service provider must allow its consumers to register a URL where the provider can send information when an event happens. In this example, Slack enables us to register our URL address, and once registered a slash command can trigger our webhook, which will execute the code in our URL.
要设置Webhook,服务提供商必须允许其使用者注册一个URL,服务提供商可以在事件发生时在该URL上发送信息。 在此示例中,Slack使我们能够注册我们的URL地址,一旦注册,斜杠命令就可以触发我们的Webhook,它将执行URL中的代码。
Now that we understand this, let’s head on over to Slack’s API page to set our webhook. Find and Select Slash Commands on the sidebar menu.
现在我们已经了解了这一点,让我们进入Slack的API页面来设置我们的webhook。 找 并在侧边栏菜单上选择Slash Commands 。
After clicking Create New Command, you’ll be asked to enter your command details, for this example use:
点击创建新命令后 ,将要求您输入命令详细信息,在此示例中,请使用:
Command: /nextmeetup
命令: /nextmeetup
RequestURL: https://<username>.api.stdlib.com/<apiname>@dev/
commands/:bg
RequestURL: https://<username>.api.stdlib.com/<apiname>@dev/
命令/:bg
Short Description: retrieves Meetup events
简短说明: retrieves Meetup events
Usage Hint:[<zip>&&l
t;topic>]
用法提示: [<zip>&&l
; topic>]
Hit “Save” once complete.
完成后点击“ 保存 ”。
Return to your Slack App, On the sidebar menu, click OAuth & Permissions.
返回您的Slack App ,在侧边栏菜单上,点击OAuth&Permissions 。
Once there, you’ll want to enter in a Redirect URL as follows: https://<username>.api.stdlib.com/ <apiname&g
t;@dev/auth/
到达该地址后 ,您将要输入一个重定向URL ,如下所示: https://<username>.api.stdlib.com/ <apiname&g
t; @ dev / auth /
click “Add” and “Save URLS.”
点击“添加”和“保存网址”。
This Redirect URL should match the URL that we set on the env.json
file on Code on Standard Library.
此重定向URL应与我们在标准库代码上的env.json
文件上设置的URL匹配。
Return to your Slack App page, and click Bot Users on the left sidebar. Click Add Bot User. Keep the default settings.
返回您的Slack App页面,然后点击左侧栏中的Bot Users 。 单击添加Bot用户 。 保留默认设置。
The final step is to authorize the app. In your browser, type: https://<username>.api.stdlib.com/<apin
ame>@dev/
最后一步是授权应用程序。 在浏览器中,输入: https://<username>.api.stdlib.com/<apin
ame> @ dev /
Click the Add to Slack button. You will be taken to another authorization screen.
单击添加到松弛按钮。 您将被带到另一个授权屏幕。
Click Authorize. You should see a success message!
点击授权 。 您应该会看到一条成功消息!
You’re all done. Try it out! Your Slack App is now available for use in the Slack workspace you authorized it for. Your Slack app should respond to a /nextmeetup<94709>&<ja
vascript> as I show in the screenshot above.
大功告成 试试看! 您的Slack应用程序现在可以在您为其授权的Slack工作区中使用。 正如我在上面的屏幕快照中所示,您的Slack应用应响应/nextmeetup<94709>&<ja
vascript>。
I hope you found this tutorial helpful. I would love for you to comment here, e-mail me at Janeth [at] stdlib [dot] com, or follow Standard Library on Twitter, @StdLibHQ .
希望本教程对您有所帮助。 我希望您在这里发表评论 , 给我发电子邮件给Janeth [at] stdlib [dot] com ,或者在Twitter上关注标准库 @StdLibHQ 。
Janeth Ledezma is a Developer Advocate for Standard Library and Cal grad — go bears! When she isn’t learning the Arabic language, or working out, you can find her exploring NorCal on her CBR500R. ??? Follow her journey with Standard Library through Twitter @mss_ledezma.
Janeth Ledezma是标准库和Cal研究生的开发倡导者-快死了! 当她不学习阿拉伯语或正在锻炼时,您可以在CBR500R上找到她探索NorCal的知识。 ??? 通过Twitter @ms s_ledezma跟着标准图书馆走下去。
meetup