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?
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!
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?
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?
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.