Construindo uma ferramenta de análise de tendências com a API FeedRika

Recentemente, descobri este serviço interessante de API de notícias chamado FeedRika, que fornece as últimas notícias do mundo, juntamente com uma pontuação de sentimento e categorias relevantes. Ele tem um nível de uso gratuito, então pensei em experimentá-lo e ver o que posso construir com ele.

Uma das minhas ideias foi construir uma ferramenta para ver como uma empresa ou tópico se saiu nas notícias.

Você pode ver um gráfico do Google Trends que mostra a popularidade de um termo no espaço público, mas que reflete apenas o volume de pesquisa. Não dá uma ideia se o sentimento em torno disso é positivo ou negativo. Então, vamos construir uma ferramenta que vasculhe as notícias para ver se o assunto está sendo escrito de maneira favorável ou não e exibir um gráfico semelhante.

Aqui estão as etapas gerais que seguiremos para construir esta ferramenta:

1. Colete o tópico a ser pesquisado, do usuário
2. Busque artigos de notícias do Feedrika que correspondam ao tópico
3. Percorra os artigos retornados e extraia a pontuação de sentimento de cada artigo
4. Ploque essas pontuações em um gráfico para exibição visual
5. Faça algumas contas para gerar estatísticas adicionais para o tópico, como sentimento médio, total positivo/negativo, etc...
6. Mostre os artigos de notícias originais ao usuário para que ele possa explorar o tópico com mais detalhes.

Antes de começarmos

Vamos obter uma chave de API do site Feedrika para que possamos buscar artigos de notícias para trabalhar.
Acesse feedrika.com e crie uma conta.

Depois de se inscrever, você encontrará sua chave API na página de seu perfil feedrika.com/profile junto com seu saldo de crédito e um registro de solicitações mostrando quais solicitações você fez.

Escolhendo a plataforma

Poderíamos construir esta ferramenta apenas em HTML, CSS e Javascript, mas envolve o uso de uma chave de API privada e não é uma boa ideia transmiti-la abertamente pela Internet, então vamos usar node e express para ocultar a chave de API no servidor lado como uma variável de ambiente e mantenha-o privado.

Vou adaptar este tutorial para iniciantes, então se você já estiver familiarizado com o node e o express, sinta-se à vontade para pular para as partes mais interessantes.

Configurar:

1. Nó e Expresso

Certifique-se de ter o ambiente de execução do Node instalado. Se não, você pode obtê-lo aqui.

Crie um diretório para este projeto em sua máquina local e navegue dentro dele.

Execute: npm init -y no terminal para inicializar um projeto de nó com os padrões.

Execute: npm i express para instalar o framework expresso.
Express é um servidor web simples que nos permitirá servir as páginas e rotas de API dentro de nosso aplicativo. É fácil de configurar e amplamente utilizado, portanto, é fácil encontrar ajuda on-line e solucionar problemas.

Abra a pasta no VSCode ou no seu IDE favorito e dê uma olhada dentro.

Você deve ter uma pasta node_modules, um arquivo package.json e um arquivo package-lock.json.

2. Criando nossa primeira Rota

Vamos criar uma página de índice que dê as boas-vindas aos usuários em nosso aplicativo
Crie um novo arquivo 'welcome.html' na raiz do seu projeto. Preencha-o apenas com as informações básicas para começar

    
This is my news trends app!

 

Vamos configurar nossa primeira rota e retornar esta página Welcome.html quando alguém abrir o aplicativo

Crie um arquivo 'index.js' na raiz do seu aplicativo e importe a estrutura expressa.

// 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}`);
});

Vamos testar nosso progresso.
No terminal, execute o nó index.js. Você deverá ver uma mensagem de confirmação dizendo que o servidor está em execução

Clique no link no terminal ou cole-o no navegador para confirmar que você pode ver a página de boas-vindas

3. Variáveis ​​de ambiente

Vamos configurar uma variável de ambiente para salvar nossa chave de API.
Crie um novo arquivo '.env' na raiz do seu projeto.
Copie e cole sua chave API da página de perfil do Feedrika aqui

Vamos também adicionar um arquivo '.gitignore' para não carregarmos acidentalmente essa chave privada na web

Agora, para algumas tarefas domésticas

Não queremos iniciar e parar o servidor a partir do terminal toda vez que fazemos uma edição no aplicativo, então vamos configurar o recarregamento automático.

Abra seu arquivo package.json e adicione estas linhas ao objeto de script

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

Estamos usando o nodemon com o sinalizador '-w' para observar alterações em nossa pasta raiz e reiniciar o servidor.

Agora podemos iniciar nosso servidor com o comando npm run dev e ele irá automaticamente observar as alterações e reiniciar o servidor para nós.

Se você receber um erro sobre não reconhecer o nodemon, execute isto para instalá-lo globalmente e tente novamente:
npm e nodemon -g

Ok, isso conclui a configuração, vamos prosseguir para a construção de nosso aplicativo!

Vamos atualizar a página de boas-vindas e adicionar uma caixa de pesquisa para solicitar tópicos

    

        
News trends
        
Search for a topic to get started
        

            Search
        
    

Configurar folhas de estilo

Crie uma pasta 'pública' na raiz do seu projeto que hospedará nossos arquivos javascript, css e de imagem do lado do cliente.
Adicione um arquivo 'styles.css' à pasta pública e adicione alguns estilos básicos para a página de boas-vindas

estilos.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;
}

Agora precisamos dizer ao Express como servir esses arquivos estáticos, então abra 'index.js' e adicione esta linha:
app.use(express.static("public"));

Você poderá ver as alterações refletidas imediatamente, atualize a página em seu navegador e confirme

Ótimo! Vamos agora dizer ao Express como lidar com o envio deste formulário

Se você notar que o formulário é enviado para um endpoint '/search', vamos configurar esta rota e lidar com o envio do formulário

Abra seu arquivo 'index.js' e adicione estas linhas

// 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);
});

Vamos testar, acesse seu navegador e digite um termo de pesquisa na caixa e clique em enviar
Você deverá ver uma resposta do servidor que mostra seu termo de pesquisa, como este

Bom trabalho!

Agora que temos uma rota de pesquisa funcionando, vamos conectar a API FeedRika e buscar notícias para o tópico.

Em breve Parte II - Buscando dados