Skip to content

GitLab

  • Menu
Projects Groups Snippets
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in
  • Wiki Wiki
  • Project information
    • Project information
    • Activity
    • Labels
    • Planning hierarchy
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 6
    • Issues 6
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 1
    • Merge requests 1
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Monitor
    • Monitor
    • Incidents
  • Packages & Registries
    • Packages & Registries
    • Package Registry
    • Infrastructure Registry
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • HoorTech
  • WikiWiki
  • Wiki
  • Arquitetura Geral

Last edited by Pedro Henrique Tonial Pasinato Nov 12, 2024
Page history
This is an old version of this page. You can view the most recent version or browse the history.

Arquitetura Geral

Home Escopo e Cronograma Processo Mockups Configuração Arquitetura Código BD Qualidade Utilização

Arquitetura do FrontEnd

Estrutura do Projeto. Aqui está uma visão geral da estrutura básica do projeto:

hoortech_frontend/
├── node_modules/            # Módulos e pacotes instalados via npm
├── public/                  # Arquivos públicos estáticos
│   ├── favicon.ico          # Ícone da aba do navegador
│   ├── index.html           # Arquivo HTML principal
│   ├── logo192.png          # Ícone padrão (opcional)
│   ├── logo512.png          # Ícone padrão (opcional)
│   ├── manifest.json        # Configurações de PWA (opcional)
│   └── robots.txt           # Configurações para motores de busca
├── src/                     # Código-fonte do projeto
│   ├── assets/              # Arquivos estáticos (imagens, fontes, etc.)
│   ├── components/          # Componentes React reutilizáveis
│   │   ├── camera/          # Componentes relacionados à câmera
│   │   ├── displayLayout/   # Componentes de layout de exibição
│   │   ├── header/          # Componente do cabeçalho
│   │   ├── languageDropdown/ # Dropdown para seleção de idioma
│   │   ├── modal/           # Componentes de modal
│   │   ├── primaryButton/   # Botão principal reutilizável
│   │   └── translationHistory/ # Histórico de traduções realizadas
│   ├── pages/               # Componentes de página
│   ├── services/            # Serviços para comunicação com APIs
│   ├── styles/              # Arquivos de estilização (CSS, SASS, etc.)
│   ├── tests/               # Arquivos de testes
│   ├── utils/               # Funções utilitárias e helpers
│   ├── routes.js            # Configuração de rotas da aplicação
│   ├── App.js               # Componente principal
│   ├── index.js             # Ponto de entrada do React
│   └── ...
├── .gitignore               # Arquivos a serem ignorados pelo Git
├── das                      # Arquivo adicional (explicação necessária se relevante)
├── DockerFile               # Arquivo de configuração para Docker
├── package.json             # Arquivo de configuração do npm
├── package-lock.json        # Versões exatas das dependências instaladas
└── README.md                # Instruções do projeto

Scripts Disponíveis No diretório do projeto, você pode executar os seguintes comandos:

npm start: Inicia o servidor de desenvolvimento. npm run build: Compila a aplicação para produção na pasta build. npm run eject: Remove a dependência de configuração do create-react-app. npm install @mui/icons-material @mui/material @emotion/styled @emotion/react: instala Material Icons.

Arquitetura do BackEnd

Estrutura do Projeto. Aqui está uma visão geral da estrutura básica do projeto:

hoortech_backend/
├── app/
│   ├── handtracking/
│   │   └── handtracking.py         # Lógica de detecção de landmarks com MediaPipe
│   ├── model/
│   │   └── model_path.h5           # Modelo TensorFlow para predição de letras
│   ├── predictor/
│   │   └── predictor.py            # Classe responsável pela predição de letras
│   ├── templates/
│   │   └── index.html              # Interface web para interação com o sistema
│   ├── test/
│   │   ├── integration_testing.py  # Teste de integração do fluxo de predição
│   │   ├── letra-a-base64.txt      # Exemplo de imagem codificada em base64
│   │   ├── letra-a.jpg             # Imagem de teste da letra "A"
│   │   ├── routes.py               # Rotas da API Flask
│   │   ├── create_mock_model.py    # Script para gerar um modelo mock de TensorFlow
│   │   └── socket_server.py        # Inicialização do servidor Flask-SocketIO
├── instance/
│   └── config.py                   # Configuração específica de ambiente
├── models/
│   └── hand_landmarker.task        # Arquivo de modelo auxiliar
├── requirements.txt                # Dependências do projeto
├── generate_base64.py              # Script para gerar base64 de uma imagem
├── README.md                       # Documentação do projeto
├── Dockerfile                      # Configuração do Docker para deploy
└── run.py                          # Ponto de entrada do servidor Flask

Scripts Disponíveis No diretório do projeto, você pode executar os seguintes comandos:

python -m venv venv: Cria o ambiente virtual (Windows) .\venv\Scripts\activate: Ativa o ambiente virtual (windows) python3 -m venv venv: Cria o ambiente virtual (Linux/MacOS) source venv/bin/activate: Ativa o ambiente virtual (Linux/MacOS) pip install --no-cache-dir -r requirements.txt: Instala as Dependências python -m app.socket_server: Executa o Servidor

Diagrama de deploy

diagrama2.drawio

Clone repository
  • Arquitetura Geral
  • Back End
  • Banco de Dados
  • Design do Sistema e Mockups
  • Fluxo e Versionamento
  • Front End
  • Infraestrutura e Orçamento
  • Planejamento
  • Home