winds rsync
Stream的团队喜欢构建开源示例应用程序，以展示我们API的功能。 我们始终认为，最好是在功能全面的平台上展示我们产品的功能。 在这种情况下，利用Stream和其他出色的服务，我们可以在数月而不是数年的时间内构建播客和RSS阅读器Winds 。 此外，作为一个开源项目，Winds得益于其不断增长的用户基础（现在已超过14,000个用户和约5,500个星星！）做出的贡献。
在本文中，我们将简要介绍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提要的工作队列。 我们还使用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捕获后端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中广泛使用它。 这是一个非常强大的工具，我们是项目的忠实拥护者，也是维护者。 如果出现错误，他们会Swift做出响应，最重要的是，它对于我们需要做的事情非常有效。
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的模块。 该模块确保我们仅在网络环境中显示图标（并使用功能）。 该软件包已安装，您只需将其添加到文件顶部的导入中，如下所示：
在以下<span>的第59行和第60行之间，我们将添加我们的Twitter按钮！
添加上面的代码段后，您的代码应如下所示：
我们正在调用函数tweet（） ，因此我们要确保也创建了该函数。 在render方法之前，创建一个称为“ tweet”的新方法。 您可以复制并粘贴以下代码：
将代码放到适当位置后，文件应如下所示：
现在，尝试在用户界面中单击Twitter徽标。 如果一切顺利，您应该会看到一个Tweet对话框打开，其中带有文章标题，以及带有标签Winds！的URL。
！ 您在Winds上创建了第一个功能-希望是众多功能之一！ 庆祝的时间到了！ 🍾🥂
如果您仍然对该过程感到有些困惑，请运行git stash并再次尝试。 做一次以上的事情不会伤害hurt
感觉自己一切都不好了吗？ 让我们看一些代码！ 这里有一些想法可以帮助您入门：
- Facebook喜欢按钮
- 书签支持
- 暗模式支持macOS Mojave
- 点赞（我们的API已经为他们提供了支持）
- 常规CSS清理
- 常规JavaScript清理
- API和Worker的测试范围
注意 ：我们还将聘请专职（合同）开发人员加入团队，以进行Winds工作。 考虑下这个能带来什么？ 使用您的LinkedIn个人资料以及您作为唯一贡献者从事的编码工作的所有示例 在此处 为 我 提供帮助。
最后的想法🤔
Winds是同类中最流行 的开源应用程序-我们再兴奋不过了。 适用于macOS，Linux和Windows的免费桌面应用程序可用，同时也提供网络版本。 该应用程序具有几项功能，特别是提要和个性化内容推荐，所有这些功能都由Stream提供支持， Stream是基于API的新闻提要，活动流和个性化即服务的领导者。
感谢您坚持不懈地学习Winds！ 我们希望在不久的将来能收到您的一些PR！
编码愉快 ！
winds rsync
218
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
