FeedRika API를 사용하여 추세 분석 도구 구축

저는 최근 감성 점수 및 관련 카테고리와 함께 최신 세계 뉴스를 제공하는 FeedRika라는 멋진 뉴스 API 서비스를 발견했습니다. 무료 사용 계층이 있으므로 사용해 보고 이를 통해 무엇을 구축할 수 있는지 알아보려고 했습니다.

내 아이디어 중 하나는 회사나 주제가 뉴스에서 어떻게 진행되었는지 확인할 수 있는 도구를 구축하는 것이었습니다.

공공 공간에서 특정 용어가 얼마나 인기 있는지 보여 주지만 검색량만 반영하는 Google 트렌드의 차트를 볼 수 있습니다. 주변의 감정이 긍정적인지 부정적인지에 대한 아이디어를 제공하지 않습니다. 따라서 뉴스를 샅샅이 뒤져 해당 주제가 호의적으로 쓰여지고 있는지 확인하고 비슷한 그래프를 표시하는 도구를 만들어 보겠습니다.

이 도구를 구축하기 위해 취할 광범위한 단계는 다음과 같습니다.

1. 사용자로부터 검색할 주제를 수집합니다.
2. Fedrika에서 주제와 일치하는 뉴스 기사를 가져옵니다.
3. 반환된 기사를 반복하고 각 기사에 대한 감정 점수를 추출합니다.
4. 이 점수를 차트에 표시하여 시각적으로 표시합니다.
5. 평균 감정, 총 긍정적/부정적 등 주제에 대한 추가 통계를 생성하기 위해 수학을 수행합니다...
6. 사용자가 주제를 더 자세히 탐색할 수 있도록 원본 뉴스 기사를 사용자에게 표시합니다.

시작하기 전에

Fedrika 웹사이트에서 API 키를 받아 작업할 뉴스 기사를 가져오겠습니다.
Feedrika.com으로 가서 계정을 등록하세요.

가입하고 나면 귀하의 프로필 페이지 Feedrika.com/profile에서 귀하의 신용 잔액 및 귀하가 요청한 내용을 보여주는 요청 로그와 함께 API 키를 확인할 수 있습니다.

플랫폼 선택

이 도구는 HTML, CSS 및 Javascript만으로 구축할 수 있지만 개인 API 키를 사용하는 것과 관련이 있으며 이를 인터넷을 통해 공개적으로 전송하는 것은 좋은 생각이 아니므로 node와 express를 사용하여 서버에서 API 키를 숨기겠습니다. 환경 변수로 지정하고 비공개로 유지하세요.

이 튜토리얼을 완전 초보자를 대상으로 맞춤화할 예정이므로 이미 node 및 express에 익숙하다면 더 흥미로운 부분으로 건너뛰셔도 됩니다.

설정:

1. 노드와 익스프레스

노드 런타임 환경이 설치되어 있는지 확인하세요. 그렇지 않은 경우 여기에서 얻을 수 있습니다.

로컬 컴퓨터에 이 프로젝트에 대한 디렉터리를 만들고 그 내부를 탐색하세요.

실행: 터미널에서 npm init -y를 사용하여 노드 프로젝트를 기본값으로 초기화합니다.

실행: npm i express를 사용하여 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}`);
});

진행 상황을 테스트해 보겠습니다.
터미널에서 node 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 nodemon -g

좋습니다. 설정이 완료되었습니다. 이제 앱 구축으로 넘어갑니다!

환영 페이지를 업데이트하고 주제를 묻는 검색창을 추가해 보겠습니다.

    
    
    
    



    

        
News trends
        
Search for a topic to get started
        

            
            Search
        
    

스타일시트 설정

클라이언트측 자바스크립트, CSS 및 이미지 파일을 호스팅할 '공용' 폴더를 프로젝트 루트에 만듭니다.
공용 폴더에 '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;
}

이제 이러한 정적 파일을 제공하는 방법을 명시적으로 알려야 하므로 'index.js'를 열고 다음 줄을 추가하세요.
app.use(express.static("public"));

변경사항이 즉시 반영된 것을 확인하고 브라우저에서 페이지를 새로 고친 후 확인하세요.

엄청난! 이제 이 양식 제출을 처리하는 방법을 표현해 보겠습니다.

'/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를 플러그인하고 해당 주제에 대한 뉴스를 가져오겠습니다.

2부 출시 예정 - 데이터 가져오기