Implementar Tela Inicial de Busca com Integração à API Scrapfly

[alanrochagomes]

Descrição:

Desenvolver a tela inicial do projeto que permitirá realizar buscas utilizando a API do Scrapfly. Essa tela exibirá os resultados da pesquisa e integrará o código de chamada à API. A implementação será feita em Next.js, utilizando componentes customizados no lado do servidor.

Objetivos:

• Criar uma interface de usuário inicial para a busca.
• Integrar a API do Scrapfly com o código do lado do servidor.
• Estruturar componentes reutilizáveis para exibição de resultados.
• Desenvolver a lógica de chamada e manipulação de dados da API com segurança.

Tarefas:

1. Desenvolvimento da Interface de Busca:

• Criar um componente de entrada de texto para que o usuário insira a consulta de busca.
• Adicionar um botão de envio que dispare a requisição de busca.
• Definir o layout da interface de busca (estilo e posicionamento dos elementos).

2. Integração com a API Scrapfly:

- [x] Configurar a chamada à API usando ScrapflyClient diretamente em uma função getServerSideProps ou em uma rota de API interna de Next.js.

• Como o ScraplyClient não está funcionando com extraction_model, fizemos a requisição direta usando fetch.
• Garantir que a chave da API seja utilizada de maneira segura a partir das variáveis de ambiente (process.env.SCRAPFLY_API_KEY).
• Implementar a função de busca no servidor para receber a consulta do usuário e fazer a requisição.

3. Exibição dos Resultados:

• Criar componentes para renderizar os resultados da busca de forma clara e organizada.
• Implementar tratamento de erros e mensagens de feedback (e.g., sem resultados encontrados).
• Adicionar carregamento dinâmico ou estado de "loading" enquanto a busca está em andamento.

4. Estrutura e Organização dos Componentes:

• Planejar e criar componentes reutilizáveis para a interface, como cards de resultados e layout da lista de resultados.
• Avaliar a necessidade de organizar a arquitetura para facilitar a escalabilidade e manutenção.

5. Exemplo de Código de Integração:

import { ScrapflyClient, ScrapeConfig } from 'scrapfly-sdk';

const client = new ScrapflyClient({ key: process.env.SCRAPFLY_API_KEY });

export async function fetchSearchResults(query: string) {
    try {
        const apiResponse = await client.scrape(new ScrapeConfig({
            tags: "player,project:frontend-web-intermediario-nextjs-typescript",
            format: "json",
            extraction_model: "search_engine_results",
            asp: true,
            url: `https://www.google.com.br/search?q=${encodeURIComponent(query)}`,
        }));
        return apiResponse.data; // Process and return the necessary data
    } catch (error) {
        console.error("Erro ao buscar dados da API:", error);
        throw new Error("Falha na busca, tente novamente.");
    }
}

Critérios de Aceitação:

• O usuário deve poder inserir uma consulta e visualizar os resultados na tela.
• A integração com a API deve ser segura, utilizando a chave da API a partir do ambiente.
• Os componentes devem ser organizados e projetados para reutilização e expansão futura.
• O código deve incluir tratamento de erros e feedbacks apropriados para o usuário.

Notas Adicionais:

• Avaliar a possibilidade de incluir testes para garantir a funcionalidade do componente e a segurança da chamada à API.
• Garantir que o layout seja responsivo e se adeque a diferentes tamanhos de tela.