FeedRika APIを使用したトレンド分析ツールの構築

私は最近、感情スコアや関連カテゴリとともに最新の世界ニュースを提供する FeedRika という素晴らしい News API サービスに出会いました。無料の使用枠があるので、試してみて、それで何が構築できるかを確認してみようと思いました。

私のアイデアの 1 つは、会社やトピックがニュースでどのように取り上げられたかを確認するためのツールを構築することでした。

Google トレンドのグラフを見ると、公共の場での用語の人気度がわかりますが、これは検索ボリュームのみを反映しています。周りの感情がポジティブなのかネガティブなのかはわかりません。そこで、ニュースを精査して、そのトピックが好意的に書かれているかどうかを確認し、同様のグラフを表示するツールを構築しましょう。

このツールを構築するために行う大まかな手順は次のとおりです。

1. ユーザーから検索するトピックを収集します
2. トピックに一致するニュース記事を Feedrika から取得します
3. 返された記事をループし、各記事の感情スコアを抽出します
4. これらのスコアをグラフにプロットして視覚的に表示します
5. 平均センチメント、ポジティブ/ネガティブの合計など、トピックに関する追加の統計を生成するための計算を行います...
6. ソースのニュース記事をユーザーに表示して、トピックをさらに詳しく調査できるようにします。

始める前に

Feedrika Web サイトから API キーを取得して、操作するニュース記事を取得できるようにしましょう。
feedrika.com にアクセスして、アカウントにサインアップしてください。

サインアップすると、プロフィール ページ feedrika.com/profile に API キーが表示され、クレジット残高と、行ったリクエストを示すリクエスト ログが表示されます。

プラットフォームの選択

このツールは HTML、CSS、JavaScript だけで構築できますが、プライベート API キーを使用する必要があり、それをインターネット上で公然と送信するのは得策ではないため、node と Express を使用してサーバー上の API キーを非表示にしましょうSide を環境変数として使用し、非公開にしておきます。

このチュートリアルは完全な初心者向けに調整するつもりなので、すでにノードと Express に精通している場合は、自由にスキップして、より興味深い部分に進んでください。

設定：

1. ノードとエクスプレス

Node ランタイム環境がインストールされていることを確認してください。そうでない場合は、ここで入手できます。

ローカル マシン上にこのプロジェクトのディレクトリを作成し、その中に移動します。

ターミナルで npm init -y を実行して、ノード プロジェクトをデフォルトで初期化します。

npm iexpress を実行して、Express フレームワークをインストールします。
Express は、アプリケーション内でページと API ルートを提供できるようにするシンプルな Web サーバーです。セットアップが簡単で広く使用されているため、オンラインでヘルプを見つけたり、トラブルシューティングを行ったりするのも簡単です。

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 i ノードモン -g

これでセットアップは完了しました。アプリの構築に進みましょう。

ようこそページを更新して、トピックを尋ねるための検索ボックスを追加しましょう

    

        
News trends
        
Search for a topic to get started
        

            Search
        
    

スタイルシートのセットアップ

クライアント側の JavaScript、CSS、画像ファイルをホストする「public」フォルダーをプロジェクトのルートに作成します。
「styles.css」ファイルをパブリック フォルダーに追加し、ウェルカム ページの基本スタイルをいくつか追加します

スタイル.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;
}

次に、これらの静的ファイルを提供する方法を明示する必要があるため、「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 をプラグインして、トピックのニュースを取得しましょう。

近日公開予定パート II - データの取得