使用 FeedRika API 构建趋势分析工具

我最近发现了这个名为 FeedRika 的很酷的新闻 API 服务，它为您提供最新的世界新闻以及情绪评分和相关类别。它有一个免费使用层，所以我想尝试一下，看看我可以用它构建什么。

我的想法之一是构建一个工具来查看公司或主题在新闻中的表现。

您可以看到 Google 趋势中的图表，该图表显示某个术语在公共空间中的受欢迎程度，但仅反映了搜索量。它无法让您了解周围的情绪是积极的还是消极的。因此，让我们构建一个工具来搜索新闻，看看该主题的报道是否有利，并显示类似的图表。

以下是我们构建此工具将采取的主要步骤：

1. 从用户处收集要搜索的主题
2. 从 Feedrika 获取与主题匹配的新闻文章
3. 循环返回的文章并提取每篇文章的情感分数
4. 将这些分数绘制到图表中以直观地显示
5. 做一些数学运算来生成该主题的其他统计数据，例如平均情绪、总积极/消极等...
6. 向用户显示源新闻文章，以便他们可以更详细地探索该主题。

在我们开始之前

让我们从 Feedrika 网站获取 API 密钥，以便我们可以获取要使用的新闻文章。
前往 feedrika.com 并注册一个帐户。

注册后，您将在您的个人资料页面 feedrika.com/profile 上找到您的 API 密钥，以及您的信用余额和显示您提出的请求的请求日志。

选择平台

我们可以仅用 HTML、CSS 和 Javascript 构建此工具，但它涉及使用私有 API 密钥，并且通过互联网公开传输该密钥并不是一个好主意，因此让我们使用 Node 和 Express 在服务器上隐藏 API 密钥side 作为环境变量并保持其私有。

我将为绝对初学者量身定制本教程，因此如果您已经熟悉 Node 和 Express，请随意跳到更有趣的部分。

设置：

1. Node 和 Express

确保您已安装 Node 运行时环境。如果没有，您可以在这里获取。

在本地计算机上为此项目创建一个目录并在其中导航。

在终端中运行： npm init -y 以使用默认值初始化节点项目。

运行：npm iexpress 安装express框架。
Express 是一个简单的网络服务器，它允许我们在应用程序中提供页面和 api 路由服务。它易于设置且广泛使用，因此在线寻求帮助和故障排除很容易。

在 VSCode 或您喜欢的 IDE 中打开文件夹并查看内部。

您应该有一个node_modules文件夹、一个package.json文件和一个package-lock.json文件。

2. 创建我们的第一条路线

让我们制作一个欢迎用户使用我们的应用程序的索引页面
在项目的根目录中创建一个新文件“welcome.html”。仅填写基本信息即可开始

    
    
    


    
This is my news trends app!

 

让我们设置第一个路由，并在有人打开应用程序时返回这个welcome.html页面

在应用程序的根目录中创建一个“index.js”文件并导入express框架。

// Import the express framework
express = require("express");

// tell node that we are creating an express app
const app = express();

// define the port that the server will run on
const port = 3000;

// define the route for the index page
app.get("/", (req, res) => {
 res.sendFile(__dirname   "/welcome.html");
});

// Start the server and tell the app to listen for incoming connections on the port
app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

让我们测试一下我们的进度。
从终端运行节点index.js。您应该看到一条确认消息，表明服务器正在运行

点击终端中的链接或将其粘贴到浏览器中以确认您可以看到欢迎页面

3.环境变量

让我们设置一个环境变量来保存我们的 API 密钥。
在项目的根目录中创建一个新文件“.env”。
从 Feedrika 个人资料页面复制并粘贴您的 API 密钥

我们还添加一个“.gitignore”文件，这样我们就不会意外将此私钥上传到网络

现在进行一些家务处理

我们不想每次对应用程序进行编辑时都从终端启动和停止服务器，所以让我们设置自动重新加载。

打开 package.json 文件并将这些行添加到脚本对象中

"start": "node index.js",
"dev": "nodemon index.js -w"

我们使用带有“-w”标志的nodemon来监视根文件夹中的更改并重新启动服务器。

现在我们可以使用 npm run dev 命令启动我们的服务器，它会自动监视更改并为我们重新启动服务器。

如果您收到无法识别nodemon的错误，请运行此命令以全局安装它，然后重试：
npm 我nodemon -g

好的，设置完成，让我们继续构建我们的应用程序！

我们来更新欢迎页面并添加一个搜索框来询问主题

    
    
    
    



    

        
News trends
        
Search for a topic to get started
        

            
            Search
        
    

设置样式表

在项目的根目录中创建一个“public”文件夹，用于托管我们的客户端 javascript、css 和图像文件。
在public文件夹中添加一个'styles.css'文件，并为欢迎页面添加一些基本样式

styles.css:

/* Import the Inter font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
}

#container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* SEARCH FORM */

.search-form input {
    padding: 1em;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.search-form button {
    padding: 1em;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #313131;
    cursor: pointer;
    color: #fff;
}

现在我们需要告诉express如何提供这些静态文件，所以打开'index.js'并添加这一行：
app.use(express.static("public"));

您应该能够立即看到反映的更改，刷新浏览器中的页面并确认

伟大的！现在让我们告诉express如何处理这个表单提交

如果您注意到它提交到“/search”端点的表单，那么让我们设置此路由并处理表单提交

打开“index.js”文件并添加这些行

// define the route for the /search endpoint
app.get("/search", (req, res) => {
  // get the query string from the request
  let query = req.query.topic;
  // send the query string back as the response
  res.send(query);
});

让我们测试一下，转到浏览器并在框中输入搜索词，然后单击提交
您应该会看到来自服务器的响应，其中显示您的搜索词，如下所示

好工作！

现在我们已经有了一个可用的搜索路径，让我们插入 FeedRika API 并获取该主题的新闻。

即将推出第二部分 - 获取数据