使用 Twilio、Fanout Cloud 和 Isomorphic React 实现实时短信情绪可视化
介绍
在本教程中，我们将构建一个应用程序，使用 Marchex 情绪分析插件提供的情绪分析来实时可视化发送到Twilio电话号码的短信。
我们将使用Node.js和Express作为 Web 服务器，使用ngrok公开我们的本地服务器，使用Fanout Cloud实现实时功能，并使用（同构）React实现视图。
当短信发送到 Twilio 号码时，有关该短信的信息会发送到我们的 Node.js 服务器。
然后，我们提取相关信息并将其发布到 Fanout Cloud 的频道。频道信息在网页中接收，网页以以下方式显示信息：
注意背景如何根据情绪而变化。此外，当出现新消息时，也会有过渡。该设计的灵感来自这支笔。
该仪表来自Epoch，这是一个使用 jQuery 的实时图表库。有人会说 React 和 jQuery 永远不应该一起使用（因为 React 创建组件的方式）。我们本可以选择另一个具有更好的 React 集成的仪表组件，但React 可以很好地与 jQuery 等库配合使用。有时，您别无选择，只能在 React 应用程序中使用 jQuery 插件。不仅如此，Epoch 图表看起来比其他图表更好。
最后，通过一些修改，我们将使这个应用程序同构或通用。
该应用程序最终版本的源代码可在Github上找到。
让我们首先设置应用程序所需的组件。
要求
Twilio
我们需要Twilio 的一个试用帐户。请访问https://www.twilio.com/try-twilio来开设一个。
当您的个人电话号码通过验证后，您可以在此处获取 Twilio 电话号码：
确保选择具有短信功能的电话号码：
现在转到消息 - 可编程短信 - 附加组件：
选择名为Marchex Sentiment Analysis for SMS 的插件：
Marchex 情绪分析插件接收一条短信并计算0.0到1.0之间的情绪分数，其中0.0表示最负面的情绪，1.0表示最正面的情绪：
按下“安装”按钮并同意服务条款。您将看到以下屏幕作为确认：
选中“在传入短信中使用”选项，然后按“保存”按钮。
最后，转到你的控制台并复制你的 Auth Token，你稍后可能会需要它：
恩格罗克
当短信发送到我们的 Twilio 号码时，将触发 webhook（将其视为回调）。这意味着将向我们的服务器发出 HTTP 请求，因此我们需要将应用程序部署在云端或将其保留在本地并使用ngrok之类的服务。
Ngrok 通过创建安全隧道并为您提供公共 URL 将外部请求代理到您的本地机器。
它是一个 Go 程序，以单个可执行文件的形式分发（没有其他依赖项）。因此，现在只需从https://ngrok.com/download下载并解压压缩文件即可。
扇出云
我们需要一个 Fanout 帐户，请在此注册。
帐户激活后，转到您的信息中心：
复制您的 Realm ID 和 Realm Key，我们稍后会需要它们。
Node.js
您还需要安装 Node.js 4.4 或更高版本和 npm。您可以在此处下载适合您平台的安装程序。
现在我们已经拥有了所需的一切，让我们来创建应用程序。
设置应用程序
创建一个新目录并进入该目录：
mkdir sms-sentiment && cd sms-sentiment
我们将使用 ECMAScript 2015 ，因此让我们通过创建配置文件.babelrc来设置Babel将此语法转换为大多数浏览器可以理解的语法：
echo '{ "presets": ["react", "es2015", "stage-0"] }' > .babelrc
Babel 6.x 未启用任何转换，因此你需要使用预设明确告诉它要运行哪些转换。
前两个是自描述的。stage-x 预设是对语言的更改，尚未被批准作为 Javascript 发布的一部分。
TC39将提案分为 4 个阶段：
- stage-0 - Strawman：只是一个想法，可能的 Babel 插件。
- 第一阶段 – 提案：这是值得努力的。
- stage-2 – 草稿：初始规范。
- 第三阶段 – 候选：完整规范和初始浏览器实现。
- stage-4-已完成：将会添加到下一个年度版本中。
stage-0包括所有级别的预设的所有插件。stage -1包括从预设 1 到 4 的所有插件，依此类推。
要执行 Babel 并将我们的脚本与其依赖项捆绑在一起，我们将使用Webpack和 npm。让我们安装 Webpack（全局）：
npm install -g webpack
（如果您使用的是 Linux，请不要忘记添加sudo 。）
现在添加一个package.json配置文件：
npm init
或者，如果您想接受所有默认设置：
npm init -y
接下来，安装 Babel 依赖项和预设（以及用于模拟完整 ES2015 环境的 polyfill）：
npm install --save-dev babel-core babel-loader
npm install --save-dev babel-preset-es2015 babel-preset-react babel-preset-stage-0 babel-polyfill
对 Webpack 执行相同操作：
<
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~