Stream的团队喜欢构建开源示例应用程序，以展示我们API的功能。 我们一直认为，最好是在功能全面的平台上展示我们产品的功能。 在这种情况下，利用Stream和其他出色的服务，我们可以在数月而不是数年的时间内构建播客和RSS阅读器Winds 。 此外，作为一个开源项目，由于其不断增长的用户基础（现在已有14,000名用户和约5,500星！）的贡献，Winds一直在不断进步。
在本文中，我们将简要介绍Winds（Stream最流行的开源示例应用程序）的构建方式。 如果您不熟悉Winds，可以在此处阅读有关它的更多信息。 我们将首先详细介绍如何添加一项功能，该功能要求我们涉及应用程序前端和后端的多个方面。
在本文结束时，您将准备向Winds添加自己的功能并为开源社区做出贡献！ 无论您是新编码员还是老手，我们都相信您会学到新东西。 ????
请注意，本教程假定以下内容 ：
- 您正在运行macOS或了解如何在所选的OS上安装各种必需的依赖项。 ????
- 您了解JavaScript????
- 您对React有一个基本的了解（如果没有的话也可以，但是有帮助）????
- 您对git有一定的了解（我们不会深入探讨，但需要一般知识）。 ????
- 您非常激动，学习如何针对Winds代码库进行编码！ ????
让我们开始吧！
系统依赖项
如您所知，每个应用程序都需要系统范围的依赖性。 为了确保我们步入正轨，我们仅介绍macOS的安装。
1.自制
对于那些不熟悉编码的人来说， Homebrew是处理系统依赖项安装的绝佳工具。 在单个命令中，您可以安装选择的编码语言，或使用Homebrew的Cask功能在计算机上安装功能全面的应用程序。 如果未安装Homebrew，则可以使用以下命令进行安装：
一旦您把Homebrew摆平了，我们可以继续下一步…
2. Node.js
Node.js在整个项目中被大量使用-主要用于API和测试套件。 话虽如此，让我们确保您正在运行最新版本的节点。 在撰写本文时，Node.js的版本为v10.7.0 （并且经常更改）。
如果安装了Node.js，则可以使用以下命令检查节点版本：
注意 ：我们假设您正在运行最新版本的node。
如果未安装Node.js，则可以通过以下方式之一进行安装：
a）自制
要么
b）NVM（推荐）
NVM或节点版本管理器是一种流行的开源工具。 它允许您通过短命令在Node.js版本之间跳转。 一切都记录在这里 。 安装很简单，只需执行以下步骤：
第一步 ：
安装NVM：
第二步 ：
安装最新版本的Node.js：
专业提示 ：您可以运行nvm ls-remote命令，它将在控制台中列出所有版本，包括新版本。
现在，如果您运行node-version ，则应该看到已安装的最新版本。
3. MongoDB
MongoDB是我们的主要数据存储，用于存储用户数据，RSS，播客等。 我们使用MongoDB Atlas，这是MongoDB构建和维护的MongoDB托管版本。
注意 ：启动MongoDB的命令是brew服务start MongoDB 。
4. Redis
Redis很重要，因为它充当我们处理RSS和Podcast feed的工作队列。 我们还将Redis用于未更新项目（例如兴趣）的一些基本缓存。
注意 ：启动Redis的命令只是redis-server 。 完整的命令列表可以在这里找到。
5.纱线
Yarn替代了npm（节点程序包管理器）。 我们建议在npm上使用yarn，因为我们发现它更可靠，并且对于Node.js依赖关系总体而言是更好的程序包管理器。
全球纱线依赖性????
我们需要在本地存在一个Node.js依赖项，为此，我们将使用Yarn 。 依赖关系是PM2 ，我们将稍后讨论它。 现在，运行以下命令来安装PM2：
克隆仓库????
现在，您已经安装了所有必需的依赖项，因此让我们继续克隆存储库。 您可以从GitHub抓取URL，也可以使用下面的命令（只需确保要克隆到对您有意义的目录中即可（例如〜/ Code））。
如果一切顺利，您的终端将类似于以下屏幕截图：
设置第三方服务????????????????
Winds依赖于几个第三方资源来运行。 所有外部服务将具有API**/秘密和其他值，您需要在以后的文章中保存这些值-我建议在macOS中使用Notes应用程序。 总共大约需要15-20分钟才能完成。
>注意 ：运行Winds所需的所有服务都可以免费达到一定级别（通常是生产数量），因此现在无需担心费用。 我们建议使用的所有服务都不需要信用卡。
1. Mercury Web解析器（约2分钟）
Postlight的 Mercury Web Parser在Winds中扮演着重要角色。 它可以确保我们解析的所有RSS文章都去除了脚本标记以及在呈现之前注入HTML的其他混乱代码。
要注册Mercury，请转到主页 ，然后单击“注册”。 完成此操作后，获取提供的API**并将其保存在特殊位置。
步骤1：
要注册Mercury，请转到主页 ，然后单击“注册”。 完成此操作后，获取提供的API**并将其保存在特殊位置。
第2步：
保存生成的API**。
2.串流（〜5分钟）
Stream为应用程序中的提要以及个性化的内容建议提供了动力。
第一步 ：
转到Stream 网站 ，然后单击“注册”按钮。
第2步：
单击下面的屏幕快照中突出显示的“查看仪表板”。 或者，首先使用API。 ????
第三步：
点击“创建应用”，然后填写详细信息。 请注意，应用程序名称必须是全局唯一的 -建议您在名称前加上您的名称，因为这将是一个测试项目。
第四步 ：
接下来，我们需要在Stream中配置“ Feed Groups ”。 所需的供稿组位于GitHub上 。
- 播客 （平面）
- rss （单位）
- 用户 （单位）
- 时间轴 （固定）
- user_episode （平面）
- user_article （平面）
步骤5 ：
最后，让我们继续获取Stream的凭据。 在创建的供稿组下，您应该看到包含“**”和“秘密”的部分。 保留这些内容，因为稍后在设置过程中将需要它们。
您还需要获取位于页面顶部的App ID并存储值。
流就这样！
3.阿尔及利亚（〜10分钟）
阿尔及利亚强力搜索风。 它是应用程序的一项关键技术，在用户体验中起着重要作用。
第一步 ：
阿尔戈利亚（Algolia）超级容易建立； 我们只需要访问他们的网站即可创建一个帐户。
第2步：
接下来，填写Algolia所需的信息。
第三步 ：
选择您的数据中心。 就本教程而言，没关系； 但是，我将选择离我最近的美国中部地区。
第四步 ：
选择“其他”作为您正在构建的应用程序类型，并在下拉列表中选择“尽快”。 然后单击“完成”以完成包装。
步骤5 ：
此过程的下一步是创建索引，所有Winds可搜索数据都将存放在该索引中。 要绕过入门过程，请使用此链接直接前往仪表板。 然后单击左侧列中的“索引”按钮。 页面加载后，单击“添加新索引”按钮以生成索引。 随便命名，但要确保可以记下索引的名称。 我将其命名为“ dev_Winds”。
步骤6 ：
该过程的最后一步是获取我们的“应用程序名称”，“仅搜索API**”和“管理员API**”。 两者都可以在页面右侧“ API**”部分下的“ API**”下找到。 请妥善保管这些凭据，以备日后在设置过程中使用。
4.哨兵（〜2分钟）
Sentry是我们工具箱中最重要的工具之一。 Sentry捕获后端API中发生的错误，使我们能够在用户甚至不知道的情况下就进行错误修复。
第一步 ：
在此处创建一个新帐户。
第二步 ：
给您的项目起个名字。 我之所以称我为“ Winds”，是因为我们正在从事Winds项目。 ????
单击“创建项目”，您将被重定向。
第三步 ：
通过单击“已经设置好东西了吗？”中的链接来获取您的DSN。 获取您的DSN。”
复制此值，因为在接下来的部分中将需要它。
克隆仓库????
要开始下一步，您需要从GitHub克隆存储库。 您可以使用以下命令来这样做：
大！ 既然您已经克隆了存储库，那么我们就可以继续并用yarn安装所需的依赖项。
Winds API
您将想要进入/ api目录并运行yarn命令。 这是一个可以帮助您的小片段：
风应用
假设您位于/ api目录中，则可以移至/ app目录中以进行yarn安装。
注意 ：API和App具有单独的package.json文件。 尽管这可能会造成混淆，但是有必要使我们不要膨胀每个目录-即使它们位于同一存储库中，这些目录也作为单独的应用程序部署。
建造
在继续之前，我想花一点时间来讨论站点的前端和后端结构。 对于任何应用程序，了解其背后的架构和思考过程都非常重要。
风前端
Winds的前端部分非常简单。 我们使用Create React App（CRA）引导应用程序，然后开始开发过程。 前端代码可以在这里找到： https : //github.com/GetStream/Winds/tree/master/app
风后端
后端API比前端稍微复杂一些。 除了由Node.js提供支持之外，后端还处理几乎所有的业务逻辑-与第三方服务进行通信，协调工作人员以解析RSS，播客和Open Graph数据等。可以在此处查看后端： https： //github.com/GetStream/Winds/tree/master/api 。
ES6标准
我们使用的几乎所有代码都是用ES6编写的。 这使我们能够在保持可读代码的同时保持较小的占用空间。
API路由
路线相当简单。 它们按照名称建议执行操作-将请求路由到所需的目的地。 这是路由文件的简短示例：
注意 ：路由被包装在wrapAsync（）函数中。 此功能捕获冒泡的所有错误并将其发送给Sentry。
API控制器
路由文件调用控制器，并且包含API中大多数（如果不是全部）的业务逻辑。 控制器与模型进行通信，从而允许它们与数据库对话。
API模型
本质上，模型是API的核心基础。 它们通过强制执行所谓的“方案”来提供后端数据存储（MongoDB）的结构。 模式包含各种类型，例如“ String”，“ Boolean”等。这是我们的用户模式的简短示例（我删除了一些帮助器函数以简化示例，因此请务必查看代码以查看它们） ：
有关模式类型的完整列表，请访问Mongoose网站 。
API工作者
工人执行非常特殊的任务，否则将阻塞流程。 例如，我们使用专用任务来处理RSS feed，Podcast feeds，Open Graph Images等。 如果没有用于这些任务的专用流程，我们的API将会迅速停止运行，并且用户将无法及时收到响应消息-API可能会超时。
我们的员工使用Bull Queue ，这是Redis的排队基础架构。 基本上，我们的API使用Bull Bull.js库插入对Redis的调用，然后我们的工作人员接替该作业并异步处理它。
例如，以下是Podcast.js控制器中的代码，该代码在用户将播客添加到系统后添加了播客（请注意，我们如何将高优先级添加为1）：
从那里开始，发生以下事情 ：
- 指挥接手需要处理的任务
- 通知文件podcast.js它有一个工作要做（处理传入的工作）
- 该数据库充满了填充的情节
- 通知用户新的播客可用
CLI命令
命令目录保留了与Winds相关的特定任务的代码-这是Winds API的简单而强大的CLI-在需要调试RSS feed时特别有用。 如果您有兴趣， 这里列出了所有命令的入门。
运行“ winds rss https://techcrunch.com/feed/”的示例输出：
API测试
测试是用Mocha和Chai编写的。 欢迎您随时运行测试套件（找到需要修复的内容绝对不会造成任何伤害）。 目前，只有Workers和API具有覆盖范围-我们仍在努力达到100％的标准； 但是，即将开玩笑的前端报道将很快到来！
风ENV????️
有两个地方需要.env（ dotenv ）文件来运行应用程序： /app/.env以及/ api / tests （假设您将要编写测试）。 您需要在/ app内创建一个.env文件，以使该应用程序正常运行。
这是一个样板文件.env文件，可帮助您入门：
注意 ：有内联注释可帮助指导您完成.env文件的设置
运行PM2????
PM2是一个过程管理器，我们在Winds中广泛使用它。 这是一个非常强大的工具，我们是项目的忠实拥护者，也是维护者。 如果出现错误，他们会迅速做出响应，最重要的是，它对于我们需要做的事情非常有效。
Node.js在设计上是单线程的。 它有起有落-速度非常快，但是在给定的时间绑定到单个I / O操作。 在后台，PM2使用Node.js集群模块，以便扩展应用程序的子进程可以自动共享服务器端口。 集群模式允许联网的Node.js应用程序在所有可用CPU上扩展，而无需进行任何代码修改。 根据可用的CPU数量，这将大大提高应用程序的性能和可靠性。
如果您打算在Winds上进行开发，或者计划将PM2用于自己的应用程序，则建议学习PM2的命令。 老实说，最好的功能是内置的watch命令-它会自动监视更改并在必要时重新加载应用程序。 这是我每天使用的一些命令 ：
- pm2 start process_dev.json（通过在process_dev.json文件中设置的命令启动进程）
- pm2列表（列出所有正在运行的进程）
- pm2重新启动所有（重新启动pm2管理的所有正在运行的进程）
- pm2 log（跟踪各种进程吐出的日志）
注意 ：使用ctrl + c摆脱拖尾日志
让我们开始吧????
到目前为止，您已经做到了。 恭喜你！ 已安装所有依赖项，克隆了repo，设置了您的.env……我们准备好了！
创建一个新分支
在工作目录中，创建一个名为“功能”的新分支。 如果需要，这是它的代码：
启动MongoDB
现在，您已经将代码克隆到了计算机上，让我们继续并启动并运行MongoDB。 您可以在单独的终端中使用以下命令。
注意 ：如果您正在寻找适合MongoDB的GUI，请查看Compass。 您可以在此处下载或运行brew cask install mongodb-compass 。
启动Redis
与MongoDB类似，让我们继续并启动Redis。 为此，我喜欢使用本机命令（从您的命令行）：
启动后，您应该在终端中看到Redis徽标（如上所示）。
启动Winds API和工作者
MongoDB与Redis一起启动并运行。 现在是启动Winds的时候了。 转到Winds目录的基本根目录并运行以下命令：
应用程序启动后，您应该看到以下内容：
让我们启动Winds UI
使用Winds，我们提供了两种启动应用程序UI的方法：
第一种方法在电子包装器内部启动应用程序：
第二个选项是在Chrome浏览器中启动应用程序，这对于调试目的来说要容易得多：
随意选择您喜欢的任何一个！ 我将使用浏览器版本，因为它更易于浏览DOM，并且重新加载速度似乎更快。
！ 您已成功在计算机上设置并启动Winds！ ????
添加新功能????
到目前为止，我们已经介绍了很多内容，但是在向平台添加新功能方面并没有具体说明。 由于这是我们第一次展示如何添加新功能，因此我们将使其保持简单—我们将在前端添加一个社交按钮。
在进行开发之前，请选择3个或更多兴趣并按照指导步骤创建一个帐户。
空白状态
登录时不要惊慌。由于我们尚未添加任何内容，因此您会看到一个空白的屏幕。
使用OPML文件导入easily可以轻松解决此问题。 单击此处下载OPML文件，然后按照以下说明将其导入Winds。
单击“新建”>“新建OPML”，将出现一个对话框：
出现对话框后，将下载的OPML文件拖放到放置区域中。
点击“添加RSS”。 重新加载页面，您应该看到文章列表！
如果您想知道“风中特色”和“发现”部分为何为空，这是出于两个原因：
- 随风吹拂要求将MongoDB数据库标志设置为true。 例如，它必须在RSS feed或Podcast feed上说“ featured：true”。
- 发现推荐功能由我们的机器学习提供支持。 机器学习需要时间，因为它可以从您与内容的交互中学习。 您与内容互动的次数越多越好。
注意：在本教程中，无需启动和运行这两个组件。 但是，如果您想尝试，我建议您跳入MongoDB Compass，并将RSS feed的“功能”键设置为布尔值true。
开始编码
如前所述，我们将在前端添加一个社交按钮。 出于本练习的目的，我们将其添加到顶级RSS feed中。
首先，单击RSS部分标题：
接下来，看看每个元素。 请注意他们是如何缺少Twitter徽标的？ 我们将添加它。
专业提示：查找所需内容的最简单方法是找到类名称，然后在编辑器中搜索它。
对于此组件，我们将寻找两个类-“ far fa-bookmark”。 您可以在编辑器中进行搜索，也可以直接转到“ app / src / components / ArticleListItem.js”（第57行）。
首先，我们需要包含一个称为is-electron的模块。 该模块确保我们仅在网络环境中显示图标（并使用功能）。 该软件包已安装，您只需将其添加到文件顶部的导入中，如下所示：
在第59行和第60行的以下<span>之间，我们将添加Twitter按钮！
添加上面的代码段后，您的代码应如下所示：
我们正在调用函数tweet（），因此我们要确保也创建了该函数。 在render方法之前，创建一个称为“ tweet”的新方法。 您可以复制并粘贴以下代码：
将代码放到适当位置后，文件应如下所示：
现在，尝试在用户界面中单击Twitter徽标。 如果一切顺利，您应该会看到一个Tweet对话框打开，其中带有文章标题，以及带有标签Winds！的URL。
！ 您在Winds上创建了第一个功能-希望是众多功能之一！ 庆祝的时间到了！ ????????
如果您仍然对该流程感到有些困惑，请运行git stash并再次尝试。 做一次以上的事情不会伤害????
感觉自己一切都不好了吗？ 让我们看一些代码！ 这里有一些想法可以帮助您入门：
- Facebook喜欢按钮
- 书签支持
- 暗模式支持macOS Mojave
- 点赞（我们的API已经为他们提供了支持）
- 常规CSS清理
- 常规JavaScript清理
- API和Worker的测试范围
注意：我们还将聘请专职（合同）开发人员加入团队，以进行Winds工作。 考虑下这个能带来什么？ 使用您的LinkedIn个人资料以及您作为唯一贡献者进行的编码工作的任何示例在此处给我发消息。
最后的想法????
Winds是同类中最流行的开源应用程序-我们再兴奋不过了。 适用于macOS，Linux和Windows的免费桌面应用程序可用，同时也提供网络版本。 该应用程序具有几项功能，特别是提要和个性化内容推荐，所有这些功能均由Stream提供支持，Stream是基于API的新闻提要，活动流和个性化即服务的领导者。
感谢您坚持不懈地学习Winds！ 我们希望在不久的将来能收到您的一些PR！
编码愉快！