Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

2
respostas

[Dúvida] Como posso manupular dados de usuarios(tipo mostrar a sequencia de vezes q teal pagina é visitada) usando laravel herd com react?

to em um projeto em que eu preciso ver qunatas vezes tal página é acessada pelos usuários, seria um sistema, onde varios usuarios usam(sistema da prefeitura), como faço pra implemtar na minha dasboard?

2 respostas

Olá, Willians! Tudo bem?

Sobre a manipulação de dados de usuários para mostrar a sequência de vezes que uma página é visitada usando Laravel Herd com React, vamos resolver isso com uma abordagem simples de contagem de acessos, sem que você precise reinventar a roda.

O problema aqui é que você precisa de um jeito de registrar cada visita em uma tabela do banco de dados e depois expor esse dado por meio de uma API para o seu front-end em React consumir e exibir no dashboard.

Passo 1: Criar a tabela de registros

Primeiro, crie uma migration para armazenar os acessos. Cada linha pode representar uma visita, com a página acessada e o usuário responsável.


php artisan make:migration create_page_views_table

Dentro da migration, defina os campos assim:


public function up()
{
    Schema::create('page_views', function (Blueprint $table) {
        $table->id();
        $table->foreignId('user_id')->constrained();
        $table->string('page');
        $table->timestamps();
    });
}

Esse código cria uma tabela chamada page_views que guarda o id do usuário, o nome da página acessada e a data de criação do registro.

Passo 2: Registrar o acesso via middleware

Você pode criar um middleware que registra a visita toda vez que uma rota é acessada, ou fazer isso direto no controller da página desejada.


public function handle($request, Closure $next)
{
    if (auth()->check()) {
        PageView::create([
            'user_id' => auth()->id(),
            'page' => $request->path(),
        ]);
    }

    return $next($request);
}

Esse middleware verifica se o usuário está autenticado e, se estiver, salva um novo registro na tabela page_views com a rota acessada.

Passo 3: Criar o endpoint da API

Para o React exibir esses dados no dashboard, monte uma rota que retorne a contagem de acessos agrupada por página.


Route::get('/api/page-views', function () {
    return PageView::selectRaw('page, count(*) as total')
        ->groupBy('page')
        ->get();
});

Essa rota agrupa os registros por página e conta quantas vezes cada uma foi acessada, retornando o resultado em formato JSON.

Passo 4: Consumir a API no React

No seu componente React, faça a chamada e monte a listagem no dashboard.


useEffect(() => {
    fetch('/api/page-views')
        .then(response => response.json())
        .then(data => setPageViews(data));
}, []);

Esse trecho busca os dados assim que o componente carrega e armazena o resultado em um estado chamado pageViews, que você pode usar para renderizar uma tabela ou gráfico.

Como o sistema é usado por vários usuários da prefeitura, avalie também aplicar um índice no campo page da tabela, para deixar as consultas mais rápidas conforme o volume de acessos crescer.

Você já pensou em usar algum pacote de analytics próprio do Laravel, como o Laravel Pulse, para facilitar esse tipo de monitoramento, ou prefere manter a lógica personalizada do jeito que está fazendo?

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!

Existem enumeras forma de se fazer isto, dependendo do tipo de sistema que você administra. Acredito que o método mais simples seja observar a dita página que deseja coletar esses dados e sempre disparar uma requisição http do React -> Laravel com as informações básicas do usuário:

{
    "id_usuario": 1,
    "sessao": {
        "id_sessao": "sess_8f3a9d2e1b4c7f5a",
        "timestamp_inicio": "2026-09-15T12:51:00Z",
        "tempo_atividade_segundos": 124
    },
    "rede": {
        "ip_publico": "192.0.2.1",
        ...
     },
    "localizacao": {
        "pais": "Brasil",
        "regiao": "Amazonas",
        "cidade": "Manaus",
        ...
      },
      "dispositivo_e_navegador": {
            "navegador": "Chrome",
            "versao_navegador": "128.0.0.0",
            "user_agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36",
            ...
      },
      "tela": {
            "largura_pixels": 1920,
            "altura_pixels": 1080
      }
}

Esses e outros dados você consegue usando a própria "API" (Window API) dos navegadores em questão. A partir daí basta persistir em algum lugar e construir informações encima desses dados.