Essa solução de Clickstream foi projetada para um sistema de e-commerce fictício, ela permite acompanhar, entender e melhorar como os usuários interagem com seus produtos em tempo real.
Basicamente, ela captura os cliques e as interações dos usuários no site, transformando isso em dados valiosos sobre o comportamento deles. Com tudo processado em tempo real, você consegue ter insights instantâneos para ajustar campanhas de marketing, personalizar a experiência do cliente e tomar decisões estratégicas na hora certa.
| Componente | Descrição |
|---|---|
| items-frontend | Interface usada por usuários de e-commerce para interagir com os itens disponíveis. |
| items-api | Backend responsável por buscar itens e registrar cliques, chamando a clickstream-api. |
| clickstream-api | Envia os eventos de cliques para o Kafka. |
| Kafka | - Armazena eventos de cliques no tópico click_events. Serve como intermediário para sistemas downstream. |
| KSQLDB | - Consome eventos do Kafka. Agrega dados e publica em um tópico de saída (click_counts_table_output). |
| Schema Registry | - Gerencia os esquemas das mensagens trafegadas no Kafka. Garante consistência e validação. |
| Kafka Connect | Consome dados agregados do Kafka e insere no banco de dados PostgreSQL. |
| Postgres | Armazena dados agregados para persistência. |
| Grafana | Lê os dados do PostgreSQL e permite a visualização de métricas em dashboards acessados por usuários de marketing. |
| Connect UI | Interface para monitorar o Kafka Connect. |
| Registry UI | Interface para gerenciar esquemas no Schema Registry. |
Siga os passos abaixo para inicializar e configurar a solução de Clickstream:
Acesse o diretório raiz da solução e execute o seguinte comando para construir e iniciar todos os contêineres:
$ docker-compose up --buildApós o Docker Compose inicializar todos os contêineres, conceda permissão de execução ao script de configuração e execute-o:
$ chmod +x setup.sh
$ ./setup.shEste script irá configurar os tópicos Kafka, streams e tabelas necessários para o funcionamento da solução.
Siga os passos abaixo para criar o Data Source no Grafana:
- Acesse o Grafana
- Link: http://localhost:3000/
- Usuário:
admin - Senha:
admin
-
Navegue até o menu Data Sources
No menu lateral, vá atéConnections > Data Sources. -
Adicionar um novo Data Source
Clique no botãoAdd new data sourcee selecione a opçãoPostgreSQL. -
Configurar o Data Source
Preencha os campos com as seguintes informações:
- Host URL:
postgres:5432 - Database Name:
db_metrics - Username:
user_metrics - Password:
password_metrics - TLS/SSL Mode:
Disable
-
Salvar e testar a conexão
Após preencher os campos, clique no botãoSave & Test. Se tudo estiver correto, o Data Source será criado com sucesso. -
Obter o UID do Data Source
Após a criação, observe a URL no navegador. Ela será algo como:
http://localhost:3000/connections/datasources/edit/ee8bhesmqpczkb
- O último conjunto de caracteres (
ee8bhesmqpczkb) é o UID do Data Source. - Copie este valor, pois ele será necessário no próximo passo.
Siga os passos abaixo para configurar e importar o dashboard no Grafana:
-
Editar o arquivo
dashboard.json
Localize o arquivodashboard.jsonna raiz do projeto e substitua o texto<datasource_uid_grafana>pelo UID do Data Source criado no passo anterior. -
Acessar o menu Dashboards
No menu lateral do Grafana, clique emDashboards. -
Criar um novo dashboard
- Clique no botão
New. - Em seguida, selecione a opção
New dashboard.
- Importar o dashboard
- Clique no botão
Import dashboard. - Abra o arquivo
dashboard.json, copie o conteúdo e cole no campoImport via dashboard JSON model.
- Salvar o dashboard
- Por último, clique no botão
Savepara finalizar a importação.
Nota: Para acessar os recursos da solução, é necessário que todas as configurações tenham sido realizadas com sucesso.
- Acessando a aplicação web
- Acesse a aplicação por meio desse link http://localhost:8080/
- Para simular os eventos de cliques experimente clicar nos botões
Click Mede cada item.
- Visualizando os Dados
- Os dados em tempo real dos cliques podem ser visualizados no Dashboard no Grafana. Para isso acesse o dashboard no Grafana.
- Simulando Cliques
- No diretório raiz do projeto há um script para simular cliques. Execute o comando abaixo:
$ chmod +x simulate_click.sh
$ ./simulate_click.sh
O fluxo dos dados funciona de forma simples. Toda vez que alguém clica em um item no site, um evento em formato JSON é gerado e enviado para o Kafka, que armazena esses eventos de forma organizada, pronta para ser consumida por outros sistemas.
O KSQLDB entra em ação consumindo esses eventos e processando as informações. Ele cria um fluxo contínuo (stream) que processa os cliques em tempo real e, em seguida, organiza esses cliques em uma tabela que conta o número de cliques por campanha a cada 2 minutos. Esses dados agregados são então enviados para um novo tópico no Kafka.
Posteriormente, o Kafka Connect lê os dados do tópico de agregação e insere no banco de dados PostgreSQL. Durante essa etapa, são aplicadas transformações nos dados, como a conversão dos campos de tempo (start_time e end_time) para o formato de timestamp.
Por fim, o PostgreSQL armazena os dados de forma estruturada e organizada. Esses dados podem ser acessados por ferramentas como Grafana ou Looker, que possibilitam a criação de dashboards atrativos e úteis para análises em tempo real.
Nota: A tabela é criada automaticamente pelo Kafka Connect. Portanto, para que você possa acessá-la é necessários que todas as configurações tenham sido realizadas com sucesso.
A imagem abaixo mostra como os dados são armazenados e organizados depois de persistidos no Postgres.
Nota: Para acessar esses recursos é necessário que todas as configurações tenham sido realizadas com sucesso.
- Gerenciamento do conectores do Kafka Connect
- Kafka Connect UI: http://localhost:8084
- Gerenciamento do esquemas das mensagens no Schema Registry
- Schema Registry UI: http://localhost:8086