Este projeto consiste em um sistema de chamada que utiliza inteligência artificial para automatizar o registro de presença em aulas na faculdade. A solução é baseada na análise de imagens capturadas em sala de aula, identificando e reconhecendo os participantes de forma precisa e eficiente.
Objetivo: Modernizar e simplificar a rotina acadêmica, promovendo maior comodidade para professores e alunos.
- ⚛️ React
- 🛠️ TypeScript
- ⚡ Vite
- 🎨 Shadcn/ui & TailwindCSS
- ✅ Zod
- 📡 Tanstack Query
- 📋 React Hook Form
- 🌀 Orval
- 📍 React Router
- 👁️ FaceAPI.js
- 🐍 Python
- 🚀 FastAPI
- 🤖 TensorFlow & DeepFace
- 🌐 Nginx
- 🗄️ MongoDB
- Docker e Docker Compose instalados
- Versões testadas: Docker (v27.3.1) & Docker Compose (2.30.3)
- No Windows, recomendamos que todo o processo seja executado dentro de uma instância do WSL 2.
- Clone o repositório:
git clone https://github.com/FelipeFlamarini/projetoChamada.git- Acesse o diretório do projeto:
cd projetoChamada- Crie uma cópia do arquivo .env.example e renomeie para .env. O usuário pode alterar as variáveis conforme desejar, mas seguiremos usando as variáveis padrões no decorrer deste guia.
cp .env.example .env- Crie uma instância do OAuth 2.0 do Google.
- Acesse o Google Cloud Console e selecione ou crie um novo projeto.
- Ative a Google People API para receber as informações dos usuários no sistema. Não é necessário criar credenciais para esta API.
- Inicie a Configuração do projeto. Preencha conforme necessário e clique em "Continuar".
- Em "Público", selecione conforme o desejo do usuário. É importante lembrar que, caso selecione "Externo", será necessário uma configuração extra para liberar o acesso ao sistema para outros usuários Caso selecionar "Interno", todos os usuários da organização poderão acessar.
- Preencha "Dados de contato" conforme necessário.
- Em "Concluir", aceite a política de dados do usuário dos serviços de API do Google e clique em "Criar".
- Na página IDs do cliente OAuth 2.0, selecione "Criar cliente", preencha o "Tipo de aplicativo" com "Aplicativo da Web" e adicione um nome qualquer. No campo "Origens JavaScript autorizadas", adicione
http://localhost:2010. No campo "URI de redirecionamento autorizado", adicionehttp://localhost:2010/api/auth/google/callback. Clique em criar. - Após a criação do cliente, acesse novamente página IDs do cliente OAuth 2.0 e clique no cliente criado. Note que, à direita dos campos, existem as informações "ID do cliente" e "Chave secreta do cliente".
- Copie o "ID do cliente" e cole no arquivo .env na variável
FASTAPI_APP_OAUTH_GOOGLE_CLIENT_ID, de forma que fiqueFASTAPI_APP_OAUTH_GOOGLE_CLIENT_ID=seu_id_aqui. - Copie a "Chave secreta do cliente" e cole no arquivo .env na variável
FASTAPI_APP_OAUTH_GOOGLE_CLIENT_SECRET, de forma que fiqueFASTAPI_APP_OAUTH_GOOGLE_CLIENT_SECRET=sua_chave_secreta_aqui. - É possível acessar o sistema com o e-mail usado para criar o projeto no Google Cloud Console. Caso tenha selecionado "Externo" na página "Público", você pode adicionar outros usuários na página Público.
O ambiente de desenvolvimento possui módulos hot-reload para o front-end e back-end, permitindo a visualização instantânea das alterações realizadas. No Windows, é necessário clonar o repositório em uma instância do WSL 2 para garantir a compatibilidade com o Docker e o hot-reload.
docker compose -p projetochamada-dev -f compose.dev.yaml build docker compose -p projetochamada-dev -f compose.dev.yaml up docker compose -p projetochamada-dev -f compose.dev.yaml down docker compose -p projetochamada-dev -f compose.dev.yaml rmCom os contêineres já em execução e utilizando as variáveis padrões definidas no arquivo .env.example, é possível acessar as seguintes rotas:
- 🌐 URL: http://localhost:2009
- Interface do usuário desenvolvida com Vite e React.
- 📜 URL: http://localhost:2010/docs
- Documentação interativa da API (Swagger UI), permitindo a visualização e execução de endpoints.
- 🗄️ URL: http://localhost:2011
- Interface gráfica para visualização e gerenciamento do banco de dados MongoDB utilizando o Mongo Express.
No VSCode, é possível acessar as tasks configuradas:
- Abra o Command Palette (
F1ouCtrl+Shift+P). - Selecione a opção Run Task.
| Task | Descrição |
|---|---|
| 🏗️ (dev) Build containers | Constrói os contêineres baseados no arquivo compose.dev.yaml. |
| Inicia os contêineres já construídos. | |
| 🔄 (dev) Build and start containers | Constrói e inicia os contêineres em sequência. |
| ⏹️ (dev) Stop containers | Para todos os contêineres. |
| ❌ (dev) Remove containers | Remove os contêineres parados. |
| 🔥 (dev) remove mongo_data | Remove o volume projetochamada_mongo_data após confirmação interativa. |
O ambiente de produção traz mais estabilidade para o sistema, perdendo o hot-reload mas garantindo a confiabilidade para a execução.
docker compose -p projetochamada-prod -f compose.prod.yaml build docker compose -p projetochamada-prod -f compose.prod.yaml up docker compose -p projetochamada-prod -f compose.prod.yaml down docker compose -p projetochamada-prod -f compose.prod.yaml rmSão as mesmas do ambiente de desenvolvimento, exceto pelo mongo express, que não é utilizado em produção.
No VSCode, é possível acessar as tasks configuradas:
- Abra o Command Palette (
F1ouCtrl+Shift+P). - Selecione a opção Run Task.
| Task | Descrição |
|---|---|
| 🏗️ (prod) Build containers | Constrói os contêineres baseados no arquivo compose.prod.yaml. |
| Inicia os contêineres já construídos. | |
| 🔄 (prod) Build and start containers | Constrói e inicia os contêineres em sequência. |
| ⏹️ (prod) Stop containers | Para todos os contêineres. |
| ❌ (prod) Remove containers | Remove os contêineres parados. |
Este guia explica detalhadamente como o usuário pode interagir com as rotas do nosso front-end, no endereço http://localhost:2009.
Ao acessar a página inicial, você encontrará dois botões principais:
- Redireciona para a rota
/camera. - Na página
/camera, o sistema utiliza a câmera do dispositivo para:- Validar a presença dos estudantes;
- Registrar automaticamente as presenças no sistema.
- Inicialmente, a página mostra apenas um token de 4 dígitos. É necessário que um usuário logado no sistema acesse a página rota "/iniciar" para iniciar o processo de chamada utilizando o token na página.
- O token só é válido enquanto esta página está aberta e conectada ao servidor. Ou seja, é necessário usar 2 dispositivos ou 2 páginas do navegador para iniciar o processo de chamada. Isso é proposital, permitindo que o processo de chamada possa ser iniciado sem a necessidade de login, mas ao comando de um usuário no sistema, e possivelmente de aparelhos diferentes.
- O processo de chamada precisa de pelo menos 2 estudantes cadastrados.
- Após o processo de chamada ser iniciado, a página mostrará a câmera do aparelho. Quando um rosto aparece e é identificado na câmera, haverá um feedback da página. Esse feedback pode indicar que:
- O rosto não foi reconhecido;
- O rosto foi reconhecido. Neste caso, uma janela aparecerá mostrando os dados da pessoa que o sistema reconheceu. O usuário irá verificar os dados e responder se ele é ou não é a pessoa indicada. Caso a resposta seja sim, sua presença será gravada no banco de dados e o processo de chamada continuará. Caso seja não, o sistema ainda pode perguntar se ele é outra pessoa que possui um nível grande de semelhança. Caso a resposta ainda seja não, o processo de chamada continuará normalmente.
- Permite que o usuário faça login utilizando o protocol OAuth 2.0 com o provedor Google.
- Após a autenticação, o usuário é redirecionado para a rota
/home.
Na rota /home, você acessa um menu central com quatro botões principais:
- Permite iniciar ou parar uma chamada.
- Requer o token gerado na rota
/camera.
- Permite exportar a lista de chamadas realizadas com base em uma data específica.
- Exibe a lista de estudantes cadastrados no sistema.
- Permite importar um arquivo CSV para adicionar novos estudantes. Há um arquivo CSV no repositório que utiliza o padrão esperado pelo sistema. Utilize-o para testes ou para seguir o padrão esperado.
- Encerra a sessão ou retorna à página inicial.
- Permite iniciar ou parar uma chamada em andamento.
- É necessário fornecer o token gerado na rota
/camera.
- Exporta a lista de chamadas realizadas.
- Filtra os registros por uma data específica.
- Exibe a lista de estudantes cadastrados no sistema.
- Permite importar um arquivo CSV para adicionar novos estudantes. Há um arquivo CSV no repositório que utiliza o padrão esperado pelo sistema. Utilize-o para testes ou para seguir o padrão esperado.
- Editar dados do estudante
- Excluir estudante