我非常喜欢VueJS，也喜欢 dev.to 上关于 Vue 的文章，不想错过任何一篇。我当然可以不断刷新dev.to 上的#vue 标签，但我还是觉得在我的 Twitter 信息流里看到所有新的 Vue 文章更方便。所以我写了一个 Twitter 机器人—— @TheVueDev。
我最终确定的基本流程如下
Azure 函数是微软 Azure 提供的“无服务器”服务，允许您根据触发条件运行一小段代码。它提供慷慨的免费套餐（每月 100 万次免费执行！），这意味着这个项目的成本非常低廉，尽管并非完全免费，因为函数需要一个 Azure 存储帐户来存储一些与函数相关的数据。即便如此，这个项目的总成本也低于每月 1 美元。
设置 Twitter 账号相对简单（你只需要准备好回答 Twitter 为了防止滥用而提出的许多问题）。在twitter.com为机器人设置好 Twitter 账号后，我访问了developer.twitter.com，并按照提示申请了开发者账号。最后，我创建了一个新的“应用”，填写了一些详细信息，申请了一些访问令牌，然后看到了一个类似这样的页面： 没错，这里有四个令牌/密钥，我们需要全部使用！
我按照Azure 文档中的快速入门指南，在 Visual Studio Code 中创建了一个 Azure 函数，并选择了“JavaScript”作为编程语言。然后我添加tsc --init了 TypeScript，就可以开始编写代码了！
对于创建的每个函数，都需要指定触发条件（所有选项请点击此处查看）。在本例中，我希望每分钟触发一次该函数，这可以通过在函数function.json文件中添加以下代码来实现：
{
"disabled": false,
"bindings": [
{
"schedule": "0 * * * * *",
"type": "timerTrigger",
"direction": "in",
"name": "everyMinuteTimer"
}
]
}
我要感谢 Sarthak Sharma 开发的出色的 Vue CLI——如果你还没用过，一定要去看看。他用来抓取 dev.to 数据的代码给了我很多启发，这对我这个项目很有帮助。
和Sarthak一样，我也使用了X射线库来辅助数据抓取。每分钟我都想加载……访问 https://dev.to/t/vue/latest并抓取最新 VueJS 文章的详细信息。借助 Chrome 开发者工具，获取文章标题、作者信息和文章链接等内容非常简单——页面查询语法与 CSS 非常相似。
const xray = Xray()
const articleScrapeData = await xray(
'https://dev.to/t/vue/latest',
'#substories .single-article',
[
{
title: '.index-article-link .content h3',
author: 'h4 a',
link: '.index-article-link@href',
tags: ['.tags .tag'], // need the tags so we can strip them out of the title
authorLink: '.small-pic-link-wrapper@href'
}
]
)
这将返回页面上所有文章的数组。我需要对数据进行一些清理工作（如果您感兴趣，这里是代码）。当然，如果作者提供了他们的 Twitter 账号，将其发布到 Twitter 上是合理的，所以我从作者页面抓取了该信息。
const socialLinks: string[] = await xray(article.authorLink, [
'.profile-details .social a@href'
])
const twitterLink = socialLinks.find(x => x.includes('twitter.com/'))
if (twitterLink != null) {
// twitterLink is in the form https://twitter.com/{blah}
const twitterURL = new URL(twitterLink)
const twitterHandle = '@' + twitterURL.pathname.substring(1)
}
然后，我可以为每篇文章构建推文。我决定推文包含文章标题、作者的推特账号或姓名，以及文章链接（dev.to 会将其格式化为漂亮的卡片）。
const tweetContent =
`${article.title}
{ ${article.twitterHandle || article.authorName} }
${article.link}` // Yay for Template Literals!
现在我们只需要把文章发到推特上就行了！
问题在于，该函数不能每分钟都发布我们找到的所有“最新文章”，否则最终会发布大量重复内容。更糟糕的是，dev.to 似乎没有提供一种简便的方法来查看文章的发布时间，只能精确到最近的一天。我提出了三种可能的解决方案：
方案三似乎是最直接的。抓取dev.to/t/vue/latest只会返回最近的 8 篇文章，而 Twitter API 会返回该账号最近的 200 条推文，因此该函数应该始终能够准确判断一篇文章是否已被发布过。
Omar Sinan 关于构建 Twitter 机器人的文章非常有帮助——快去看看吧！
和 Omar 一样，我也使用了Twit库来辅助发推文。将它连接到@TheVueDev非常简单，只需从 Twitter 应用页面粘贴四个密钥和令牌（当然是以环境变量的形式！）即可！
this.t = new Twit({
consumer_key: process.env.twitter_consumer_key,
consumer_secret: process.env.twitter_consumer_secret,
access_token: process.env.twitter_access_token,
access_token_secret: process.env.twitter_access_token_secret
})
如果文章还没有被发布到推特上，我们就直接发布到推特上！
// Get recent tweets
const res = await this.t.get('statuses/user_timeline', {
screen_name: 'TheVueDev'
})
const recentTweets = <any[]>res.data
// Determine if article has been tweeted yet
// Need to look at entities.urls.expanded_url because Twitter
// automatically shortens the URL in the tweet itself.
if (recentTweets.find(x =>
x.entities.urls.find((u: any) => u.expanded_url === articleLink)
) == null) {
// Article hasn't yet been tweeted - tweet it!
await this.t.post('statuses/update', { status: tweetContent })
}
（点击此处查看更高效的代码版本。）
使用Azure Functions 扩展，只需在 Visual Studio Code 中点击几下按钮，即可直接将函数部署到 Azure 。真棒！
这样一来，我就拥有了一个可以正常运行的 Twitter 机器人，现在可以轻松地了解 dev.to 上发布的所有新的 VueJS 文章！
这是 Twitter 账号，这是完整代码，其中包含分步说明，可帮助您部署自己的机器人，以发布您选择的任何 dev.to 标签的推文！
danielelkington / twitter-vue-dev
一个运行在 Azure Functions 中的机器人，它会在 Twitter 上发布所有dev.to 网站上的VueJS 文章。关注@TheVueDev即可找到它。
这段代码同样可以用来创建一个 Twitter 机器人，该机器人可以发布任何有效的dev.to标签中的新文章。
按照以下说明创建您自己的 Twitter 机器人，该机器人会发布dev.to网站上的文章，并添加您选择的标签。这可能每月会花费您几美分的 Azure 存储费用。
前往twitter.com并为你的机器人创建一个 Twitter 账号。
登录到您的机器人的 Twitter 帐户后，前往developer.twitter.com，点击“申请”，然后按照提示申请开发者帐户。