本文介绍了一种使用GitHub、Slack和n8n的工作流，以自动化地获取和展示贡献者的详细信息，包括名字、电子邮件、公司和位置等。通过在Slack中发出斜杠命令，工作流会触发一系列节点操作，最终在Slack频道中发布贡献者的信息。
github仓库贡献者
People are the heart of a community. Celebrating their contributions is a way to show them that we value them and appreciate all their hard work. We can give them a shoutout in our community’s Slack workspace and also in our newsletters. And what could be a better way to appreciate their work by sending them some cool swag! Motivated by this idea, I created a workflow with n8n, which gives us the contributors’ GitHub information in the Slack workspace.
人是社区的心脏。 庆祝他们的贡献是一种向他们表明我们重视他们并感谢他们的辛勤工作的一种方式。 我们可以在社区的Slack工作区以及新闻通讯中大声疾呼。 通过向他们发送一些炫酷的赃物，可能是更好的欣赏他们的工作的方式！ 受这个想法的启发，我使用n8n创建了一个工作流，该工作流在Slack工作区中为我们提供了贡献者的GitHub信息。
We will accomplish this through these four nodes:
我们将通过以下四个节点来完成此任务：
Webhook node — Triggers the workflow when the slash command is issued
Webhook节点—发出斜杠命令时触发工作流
GraphQL node — Gets information using GitHub’s GraphQL API
GraphQL节点—使用GitHub的GraphQL API获取信息
Function node — Filters and extracts the contributor’s email address
功能节点-过滤并提取贡献者的电子邮件地址
Slack node — Posts the information back in Slack
Slack节点—将信息发布回Slack
When we issue a slash command in the Slack channel, the Webhook node gets triggered, and our workflow starts. The GraphQL node then executes a query to get the contributor’s information. The Function node extracts the email address of the contributor, and the Slack node posts this information in the Slack channel from where the information was requested.
当我们在Slack通道中发出斜杠命令时，将触发Webhook节点，然后我们的工作流程开始。 GraphQL节点然后执行查询以获取贡献者的信息。 “ 功能”节点提取贡献者的电子邮件地址，“ 松弛”节点将此信息发布在“松弛”通道中，从该通道中请求信息。
先决条件 (Prerequisites)
To get started with the workflow in n8n, you will need:
要开始使用n8n中的工作流程，您将需要：
A Slack app for your workspace
适合您工作空间的Slack应用
GitHub Personal Access Token for the GraphQL API
GraphQL API的GitHub 个人访问令牌
安装n8n (Install n8n)
In case, you don’t already have n8n installed, you can do so with npm by issuing the following command:
如果您尚未安装n8n，则可以通过发出以下命令使用npm进行安装：
npm install n8n -gYou can also run n8n using Docker. Once you have installed n8n, you can start it using the following command:
您还可以使用Docker运行n8n。 安装n8n后，可以使用以下命令启动它：
n8n start — tunnelNote: Make sure that you don’t forget to add the — tunnel parameter.
注意：确保不要忘记添加— tunnel参数。
n8n has to be reachable from the web as the triggers of external services rely on that to be able to send data to the webhooks. To make that easy, n8n has a special tunnel service that redirects requests from n8n’s servers to your local n8n instance (uses localtunnel).
n8n必须可以从Web上访问，因为外部服务的触发器依赖于此，以便能够将数据发送到WebHook。 为了让那么容易，n8n有一个特殊的隧道服务，从n8n的服务器到本地n8n实例重定向请求(用途localtunnel )。
Typing “o” in the terminal will open the Editor UI for us.
在终端中键入“ o”将为我们打开编辑器UI。
Let’s get started with the workflow. I have also submitted this workflow on n8n.io, in case you’d like to skim through it. Please note that you will still need to configure credentials for Slack and GitHub.
让我们开始工作流程。 我也已经在n8n.io上提交了此工作流程 ，以防您略过它。 请注意，您仍然需要为Slack和GitHub配置凭据。
1. Webhook节点 (1. Webhook node)
n8n has a Webhook trigger node which will get triggered when we issue the /github slash command in a Slack channel.
n8n有一个Webhook触发节点，当我们在Slack通道中发出/github slash命令时，将触发该节点。
Adding the Webhook node
添加Webhook节点
To add the Webhook node in the workflow, click on the + button. Under the Trigger section, select the Webhook node. This creates the Webhook node with the default parameters.
要在工作流程中添加Webhook节点，请单击+按钮。 在“ 触发器”部分下，选择“ Webhook”节点。 这将使用默认参数创建Webhook节点。
Leave the default parameters as they are, we will only change the HTTP Method. Select the ‘POST’ option from the HTTP Method dropdown list.
保留默认参数不变，我们将仅更改HTTP方法。 从“ HTTP方法”下拉列表中选择“ POST”选项。
Here’s a GIF of me following the steps mentioned above.
这是我按照上述步骤操作的GIF。
2. Adding slash command to the Slack app
2. 在Slack应用程序中添加斜杠命令
If you haven’t created a Slack app, go to the Applications page, click on ‘Create New App’ and give your app a name.
如果您尚未创建Slack应用程序，请转到“ 应用程序”页面，单击“创建新应用程序”并为您的应用程序命名。
Under the Add Features and Functionality section, select Slash Commands and click on Create New Command. Enter ‘github’ as the command for the Command field. Get the test webhook URL from the Webhook node and paste it in the Request URL field. Since we are building the workflow, make sure to use the test webhook URL.
在“ 添加功能”部分下，选择“ 斜杠命令” ，然后单击“ 创建新命令” 。 在“命令”字段中输入“ github”作为命令。 从Webhook节点获取测试Webhook URL，并将其粘贴到“ 请求URL”字段中。 由于我们正在构建工作流程，因此请确保使用测试Webhook URL。
The data that is sent to the test webhook URL is displayed in the Editor UI. The test webhook stays active for 120 seconds and then gets deactivated. The Production URL is only registered when the workflow has been activated, but the data that is sent is not displayed in the Editor UI.
发送到测试Webhook URL的数据显示在编辑器UI中。 测试Webhook保持活动状态120秒钟，然后停用。 仅在激活工作流程后才注册生产URL，但发送的数据不会显示在编辑器UI中。
To give our app permission to post messages, select OAuth & Permissions under the Features section. In Scopes, under the Bot Token Scopes, click on Add an OAuth Scope and select the ‘chat:write’ scope from the menu. Similarly, add the ‘chat:write.public’ scope.
要授予我们的应用发布消息的权限，请在“ 功能”部分下选择“ OAuth和权限 ”。 在“ 作用域”中 ，在“ Bot令牌作用域”下 ，单击“ 添加OAuth 作用域” ，然后从菜单中选择“聊天：写入”作用域。 同样，添加“ chat：write.public”范围。
Install the app in your workspace. Click on Execute Workflow button at the bottom of the n8n workflow editor, and issue the /github harshil1712 (here ‘harshil1712’ is my GitHub username) command to trigger the Webhook node.
在您的工作区中安装该应用程序。 单击n8n工作流编辑器底部的“ 执行工作流”按钮，然后发出/github harshil1712 (这里的“ harshil1712”是我的GitHub用户名)命令来触发Webhook节点。
Here’s a GIF of me following the steps mentioned above.
这是我按照上述步骤操作的GIF。
Go back to the n8n workflow editor and check the Webhook node. You’ll see the response from our newly created slash command. Congratulations, your first n8n node is up and running!
返回n8n工作流程编辑器并检查Webhook节点。 您将看到我们新创建的slash命令的响应。 恭喜，您的第一个n8n节点已启动并正在运行！
2. GraphQL节点 (2. GraphQL Node)
n8n has a GraphQL node which can be used to execute GraphQL queries. We will use GitHub’s GraphQL API in this node to get the contributor’s information.
n8n有一个GraphQL节点，可用于执行GraphQL查询。 我们将在此节点中使用GitHub的GraphQL API来获取贡献者的信息。
Creating a GraphQL node to get contributors information
创建一个GraphQL节点以获取参与者信息
In the n8n workflow editor, click on + and select the GraphQL node. We will have to specify the endpoint for the GraphQL API. We will also have to change the Request and Response Formats and add headers.
在n8n工作流编辑器中，单击+，然后选择GraphQL节点。 我们将必须指定GraphQL API的端点。 我们还必须更改请求和响应格式并添加标题。
Enter the following link in the Endpoint field: https://api.github.com/graphql. This is the link to GitHub’s GraphQL API. Select JSON from the dropdown menu, for the Request Format field. Select ‘String’ from the dropdown menu, for the Response Format field.
在“ 端点”字段中输入以下链接： https : //api.github.com/graphql 。 这是GitHub的GraphQL API的链接。 从下拉菜单的“ 请求格式”字段中选择JSON。 从下拉菜单的“ 响应格式”字段中选择“字符串”。
The GitHub GraphQL API requires two headers for running any queries. The first header we will add is the User-Agent header. Click on Add Header in the Header section. Enter User-Agent in the Name field, and n8n in the Value field. Add another header for Authorization. Enter Authorization in the Name field. The value for this header will be in the following format:bearer <GitHub-Personal-Access-Token>
GitHub GraphQL API需要两个标头来运行任何查询。 我们将添加的第一个标头是User-Agent标头。 单击“ 标题”部分中的“ 添加标题 ”。 在名称字段中输入User-Agent ，在值字段中输入n8n 。 为授权添加另一个标题。 在名称字段中输入Authorization 。 此标头的值将采用以下格式： bearer <GitHub-Personal-Access-Token>
Replace <GitHub-Personal-Access-Token> with your GitHub Personal Access Token. The Headers should look like in the following image.
用您的GitHub个人访问令牌替换<GitHub-Personal-Access-Token> 。 标头应如下图所示。
Note: While generating the GitHub Personal Access token, make sure to select repo and user under the Select scopes section.
注意：生成GitHub个人访问令牌时，请确保在“选择范围”部分下选择回购和用户。
Copy and paste the following query in the Edit Query editor and click on the Execute Node button to execute the node. On successful execution, it returns the name of the contributor whose username you have passed.
将以下查询复制并粘贴到“编辑查询”编辑器中，然后单击“ 执行节点”按钮以执行该节点。 成功执行后，它将返回您已通过其用户名的贡献者的名称。
query {
user(login:"harshil1712") {
name
}
}Here’s a GIF of me following the steps mentioned above.
这是我按照上述步骤操作的GIF。
2. Getting more contributor’s information like company, email and location
2. 获取更多贡献者的信息，例如公司，电子邮件和位置
In the query above, we are passing the username statically, which will give us the information about only that contributor, for every slash command we issue. To make the query dynamic, we will fetch the username returned by the Webhook node.
在上面的查询中，我们将静态传递用户名，这对于我们发出的每个斜杠命令将仅向我们提供有关该贡献者的信息。 为了使查询动态，我们将获取Webhook节点返回的用户名。
Connect the Webhook node with the GraphQL node. Open the Edit Expression editor for the Query field, and replace the username with {{$node[“Webhook”].json[“body”][“text”]}}.
将Webhook节点与GraphQL节点连接。 打开“ 查询”字段的“编辑表达式”编辑器，并将用户名替换为{{$node[“Webhook”].json[“body”][“text”]}} 。
You can also do this by selecting:
您还可以通过选择以下操作来执行此操作：
Current Node> Input Data > JSON > body > text
Current Node> Input Data > JSON > body > text
Here’s a GIF of me following the steps mentioned above.
这是我按照上述步骤操作的GIF。
We are now getting the name of the contributor we want. Let’s get more information about them. We will update our query to get additional information like their email address, location, the company they work for, and their profile picture.
现在，我们得到了想要的贡献者的名字。 让我们获取有关它们的更多信息。 我们将更新查询，以获取其他信息，例如他们的电子邮件地址，位置，工作的公司以及个人资料图片。
Copy and paste the below query in the Edit Query editor.
将以下查询复制并粘贴到“编辑查询”编辑器中。
query {
user(login:"{{$node["Webhook"].json["body"]["text"]}}") {
name
company
location
avatarUrl
email
}
}On executing the workflow, you will get output similar to the following image.
在执行工作流程时，您将获得类似于下图的输出。
3.功能节点 (3. Function Node)
Some of the contributors on GitHub might have their email addresses private, and so we don’t get this information. But what if we want to get in touch with them, and thank them personally?
GitHub上的某些贡献者可能会将其电子邮件地址设为私有，因此我们无法获得此信息。 但是，如果我们想与他们联系并亲自感谢他们怎么办？
To get their email address, we will query their commits. The commit object contains information about the author like their name and email address. Let’s go ahead and update our GraphQL query so that we get at least 25 of their commits.
要获取他们的电子邮件地址，我们将查询他们的提交。 提交对象包含有关作者的信息，例如其姓名和电子邮件地址。 让我们继续更新GraphQL查询，以便至少获得25个提交。
Update the GraphQL query
更新GraphQL查询
In the GraphQL node, open the Edit Expression editor for the Query field. Copy and paste the query below in the editor.
在GraphQL节点中，打开“ 查询”字段的“编辑表达式”编辑器。 将查询复制并粘贴到编辑器中。
let emails = [];
let tempEmails = [];const name = $node["GraphQL"].json["data"]["data"]["user"]["name"];
const publicEmail = $node["GraphQL"].json["data"]["data"]["user"]["email"];const username = $node["Webhook"].json["body"]["text"];
const nameRegex = new RegExp(name,"g");if(publicEmail){
// if public email address exists, push it to the tempEmails array
tempEmails.push(publicEmail)
}// looping through the pull requests
for(const edge of items[0].json.data.data.user.pullRequests.edges){
// looping through the commits
for(node of edge.node.commits.nodes){
// Checks the name associated with the email address
if(nameRegex.test(node.commit.author.name)|| node.commit.author.name == username) {
// if name equals to contributors name or username, push the email address in tempEmails
tempEmails.push(node.commit.author.email)
}
}
}// Remove duplicates
emails = […new Set(tempEmails)]// RegEx Pattern for email address generated by GitHub
let re = /^\w+(.)*@users.noreply.github.com/// Remove the email addresses Generated by GitHub
emails = emails.filter(email => !re.test(email))return [{json:{emails,}}]Execute the node to see the changes in effect. The output now contains the email addresses and names of the authors who made the commits as well.
执行该节点以查看生效的更改。 现在，输出中还包含进行提交的作者的电子邮件地址和名称。
2. Using Function node to filter the information
2. 使用功能节点过滤信息
One can observe from the output that we are getting a lot of repeated values for the email addresses. Also, some email addresses belong to different users. We will write a function to solve this and get the email address of our contributor.
从输出中可以看到，我们得到了许多重复的电子邮件地址值。 另外，某些电子邮件地址属于不同的用户。 我们将编写一个函数来解决此问题，并获取贡献者的电子邮件地址。
n8n has a Function node where we can add custom snippets to JavaScript code to transform data from the other nodes or if you want to implement some custom functionality. Click on the + button and select the Function node. Replace the code in the Function node, with the following code.
n8n有一个功能节点，我们可以在其中添加自定义代码片段到JavaScript代码以转换来自其他节点的数据，或者如果您要实现一些自定义功能。 单击+按钮，然后选择“ 功能”节点。 用以下代码替换“ 功能”节点中的代码。
let emails = [];
let tempEmails = [];const name = $node["GraphQL"].json["data"]["data"]["user"]["name"];
const publicEmail = $node["GraphQL"].json["data"]["data"]["user"]["email"];const username = $node["Webhook"].json["body"]["text"];
const nameRegex = new RegExp(name,"g");if(publicEmail){
// if public email address exists, push it to the tempEmails array
tempEmails.push(publicEmail)
}// looping through the pull requests
for(const edge of items[0].json.data.data.user.pullRequests.edges){
// looping through the commits
for(node of edge.node.commits.nodes){
// Checks the name associated with the email address
if(nameRegex.test(node.commit.author.name)|| node.commit.author.name == username) {
// if name equals to contributors name or username, push the email address in tempEmails
tempEmails.push(node.commit.author.email)
}
}
}// Remove duplicates
emails = […new Set(tempEmails)]// RegEx Pattern for email address generated by GitHub
let re = /^\w+(.)*@users.noreply.github.com/// Remove the email addresses Generated by GitHub
emails = emails.filter(email => !re.test(email))return [{json:{emails,}}]The above code takes the name and the public email address of the contributor from the GraphQL node. It also gets the username from the Webhook node. The code then verifies if the email address belongs to the contributor, and if it does, it pushes it to a temporary array. It then removes any duplicate values for the email addresses and stores them in the emails array. And lastly, it removes email addresses generated by GitHub and returns the emails array.
上面的代码从GraphQL节点获取贡献者的姓名和公共电子邮件地址。 它还从Webhook节点获取用户名。 然后，代码将验证电子邮件地址是否属于贡献者，如果属于，则将其推送到临时数组。 然后，它将删除电子邮件地址的所有重复值，并将它们存储在电子邮件数组中。 最后，它删除GitHub生成的电子邮件地址并返回emails数组。
An important thing to keep in mind while using the Function node is that it returns an array. So make sure you’re returning an array, rather than an object.
使用“ 功能”节点时要记住的重要事项是它返回一个数组。 因此，请确保您要返回的是数组，而不是对象。
Here’s a GIF of me following the steps mentioned above.
这是我按照上述步骤操作的GIF。
We are now getting the email address of the contributor along with all the other information. Let’s post this in Slack.
现在，我们将获得贡献者的电子邮件地址以及所有其他信息。 让我们将其发布在Slack中。
4.松弛节点 (4. Slack Node)
In n8n, you can perform a lot of operations with the Slack node. You can create or archive channels, upload or get files from the workspace, add or delete stars from an item, and post or update messages in the Slack channels.
在n8n中，您可以使用Slack节点执行很多操作。 您可以创建或存档频道，从工作空间上载或获取文件，添加或删除项目中的星标，以及在Slack频道中发布或更新消息。
To add the Slack node in the workflow, click on the + button, and select Slack. Select “OAuth2” from the Authentication dropdown menu. Add your Slack app credentials to the node by selecting “Create New” from the dropdown menu in the Credentials section.
要在工作流程中添加Slack节点，请单击+按钮，然后选择Slack。 从身份验证下拉菜单中选择“ OAuth2”。 通过从“ 凭据”部分的下拉菜单中选择“新建”，将Slack应用凭据添加到节点。
Head back to the Slack App dashboard, and copy the Client ID and Client Secret from the App Credentials section. Paste them in the Create Credentials: “Slack OAuth2 API” editor in the n8n workflow editor. Copy the OAuth Callback URL from the editor. In the Slack App dashboard, select “OAuth and Permissions” and click on “Add New Redirect URL” under the “Redirect URLs” section. Paste the URL and click on “Add”. The last step is to connect the OAuth Credentials. Click on the OAuth button to connect the credentials and select “Allow”.
返回Slack App仪表板，然后从“ App Credentials”部分复制“ Client ID”和“ Client Secret”。 将它们粘贴到n8n工作流程编辑器中的创建凭据：“ Slack OAuth2 API”编辑器中。 从编辑器复制OAuth回调URL。 在Slack App仪表板中，选择“ OAuth和权限”，然后单击“重定向URL”部分下的“添加新的重定向URL”。 粘贴URL，然后单击“添加”。 最后一步是连接OAuth凭据。 单击OAuth按钮以连接凭据，然后选择“允许”。
By default, the Slack node has Message as the Resource and Post as the Operation. If the setting is different for you, make sure to change them. To post a message on the Slack channel where the slash command was issued, we will add the channel id to the Channel field, which is returned by the Webhook node.
默认情况下， Slack节点将消息作为资源，将消息作为操作。 如果您的设置不同，请确保进行更改。 为了在发出Slash命令的Slack通道上发布消息，我们将通道ID添加到Webhook节点返回的Channel字段中。
Copy and paste {{$node[“Webhook”].json[“body”][“channel_id”]}} in the Channel field. Alternatively you can use the Variable Selector to get this information. Open the Editor Expression editor, and under Variable Selector select: Nodes > Webhook > Output Data > JSON > body > channel_id.
复制并粘贴{{$node[“Webhook”].json[“body”][“channel_id”]}}在“ 频道”字段中。 或者，您可以使用变量选择器获取此信息。 打开编辑器表达式编辑器，然后在“ 变量选择器”下选择： Nodes > Webhook > Output Data > JSON > body > channel_id 。
Let us now add some styling and formatting to our message. Our message will contain a title, some text and a thumbnail.
现在让我们为消息添加一些样式和格式。 我们的消息将包含标题，一些文本和缩略图。
In the Attachment section, click on Add Attachment, and select Title from the Add Attachment Item dropdown menu. Open the Expression editor, and type “GitHub Details for:” in the editor and from the Variable Selector select Nodes > Webhook > Output Data > JSON > body > text.
在“ 附件”部分中，单击“ 添加附件” ，然后从“添加附件项”下拉菜单中选择“ 标题 ”。 打开表达式编辑器，然后在编辑器中键入“ GitHub Details for：”，然后从变量选择器中选择Nodes > Webhook > Output Data > JSON > body > text 。
From the Add Attachment Item, select Text, to add the Text attachment. Open the Expression editor, and copy and paste the following text:
从“ 添加附件项目”中 ，选择“ 文本 ”以添加文本附件。 打开表达式编辑器，然后复制并粘贴以下文本：
*Name:* {{$node[“GraphQL”].json[“data”][“data”][“user”][“name”]}}*Email:* {{$node[“Function”].json[“emails”].join(‘, ‘)}}*Company:* {{$node[“GraphQL”].json[“data”][“data”][“user”][“company”]}}*Location:* {{$node[“GraphQL”].json[“data”][“data”][“user”][“location”]}}To display the profile picture of the contributor, create Thumbnail attachment, by selecting the Thumbnail option from the Add Attachment Item menu. Open the Edit Expression editor and from the Variable Selector select Nodes > GraphQL > Output Data > JSON > data > data > user > avatarURL.
要显示贡献者的个人资料图片，请从“ 添加附件项”菜单中选择“ 缩略图”选项，以创建“缩略图”附件。 打开“编辑表达式”编辑器，然后从“变量选择器”中选择“ Nodes > GraphQL > Output Data > JSON > data > data > user > avatarURL 。
Here’s a GIF showing how to create the Slack node, and get information from the Webhook node, the GraphQL node, and the Function node.
这是显示如何创建Slack节点以及如何从Webhook节点，GraphQL节点和Function节点获取信息的GIF。
Note: Since the Function node gives an array of email addresses, we will select Values from the menu, while adding the email from the node.
注意：由于“ 功能”节点提供了一系列电子邮件地址，因此，我们将从菜单中选择“ 值 ”，同时添加来自该节点的电子邮件。
Execute the node, and your app will post a message to the Slack channel.
执行该节点，您的应用程序将向Slack频道发布一条消息。
The following GIF shows our workflow in action.
以下GIF显示了我们的工作流程。
To use the workflow in production, follow the instructions provided in the documentation. Make sure to use the production webhook URL for the slash command.
要在生产中使用工作流程，请遵循文档中提供的说明 。 确保对斜杠命令使用生产Webhook URL。
结论 (Conclusion)
Congratulations! You built a workflow that gives you the information of a contributor. You learned how to get started with n8n and how to add nodes to your workflow. You learned how to use the Webhook node for capturing event triggers, the GraphQL node to query information, the Function node to write custom functions, and the Slack node to post a message on Slack.
恭喜你！ 您构建了一个工作流，可为您提供贡献者的信息。 您学习了如何开始使用n8n以及如何向工作流程中添加节点。 你学会了如何使用网络挂接节点用于捕获事件触发，GraphQL节点查询信息， 功能节点编写自定义的功能，和松弛节点上张贴松弛的消息。
You can use this workflow to gather the information about your contributors, celebrate their successes, and appreciate them for their contributions! Using the GitHub API, you can also get their Twitter username. You can use the IF node to check for that, and use the Twitter node to tweet about them. You can even use the Mailgun node to send them a personalized thank you message.
您可以使用此工作流程来收集有关贡献者的信息，庆祝他们的成功，并感谢他们的贡献！ 使用GitHub API，您还可以获取其Twitter用户名。 您可以使用中频 节点进行检查，然后使用Twitter节点发布有关它们的推文。 您甚至可以使用Mailgun节点向他们发送个性化的感谢消息。
I’d be excited to check out what you’ve built using n8n! In case you’ve run into an issue while following the tutorial, feel free to reach out to me on Twitter or ask for help on our forum 💙
我很高兴查看您使用n8n构建的内容！ 如果您在学习本教程时遇到问题，请随时在Twitter上与我联系或在我们的论坛上寻求帮助💙
翻译自: https://medium.com/n8n-io/giving-kudos-to-contributors-with-github-slack-and-n8n-b3f5f4a653a6
github仓库贡献者
扫一扫
2149
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
