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
  • Front End

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.

Front End

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

Bem-vindo à WIKI do Front-end

Esta WIKI foi criada para fornecer uma visão geral e instruções detalhadas sobre o front-end do projeto HoorTech. Aqui, você encontrará informações sobre a arquitetura do projeto, as tecnologias e bibliotecas utilizadas, e os passos necessários para configurar e rodar o ambiente de desenvolvimento.

Este documento é uma referência completa para desenvolvedores que trabalham no projeto, facilitando a compreensão da estrutura e dos componentes utilizados. Siga os tópicos abaixo para obter informações específicas:

  • Arquitetura Base: Entenda a estrutura do projeto e o papel de cada diretório e arquivo principal.
  • Tecnologias Utilizadas: Descubra as ferramentas e frameworks que compõem a base do projeto, como React e Docker.
  • Bibliotecas Utilizadas: Veja uma descrição das bibliotecas principais, como Material UI e jsPDF, e como elas aprimoram a funcionalidade e a aparência da aplicação.
  • Rodando o Front-end pela Primeira Vez: Um guia passo a passo para configurar o ambiente de desenvolvimento e rodar a aplicação localmente.
  • Scripts Disponíveis: Lista dos comandos que podem ser executados para iniciar, compilar e configurar o projeto.

Use esta WIKI como um recurso de apoio para colaborar e desenvolver no Front-end!

Arquitetura Base

Também disponível em: Arquitetura

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

Tecnologias Utilizadas

  • React: React é uma biblioteca JavaScript focada na criação de interfaces de usuário dinâmicas e responsivas. Desenvolvido pelo Facebook, ele permite construir aplicações utilizando componentes reutilizáveis e de fácil manutenção, o que facilita o desenvolvimento e a escalabilidade do projeto.

    No projeto HoorTech, o React foi escolhido pela sua vasta documentação e comunidade ativa, o que torna o aprendizado acessível para novos desenvolvedores, incluindo os estudantes de AGES I. Além disso, a estrutura declarativa e modular do React permite que os novos integrantes participem ativamente no desenvolvimento desde o início. O React também facilita o uso de WebSockets, essenciais para implementar funcionalidades em tempo real, tornando-o uma escolha ideal para as necessidades específicas do projeto.

  • Docker: Docker é uma plataforma que permite criar, implantar e executar aplicações em contêineres, garantindo que o ambiente de execução seja consistente em diferentes máquinas e sistemas. No projeto HoorTech, o Docker é utilizado para criar um contêiner que encapsula o front-end com todas as suas dependências, garantindo que a aplicação rode de forma previsível, independente do ambiente do desenvolvedor.

    Com Docker, é possível configurar o ambiente de desenvolvimento e produção de forma rápida e padronizada, facilitando o processo de deploy e a integração com outros serviços. Isso permite que os desenvolvedores e a equipe de operações executem a aplicação em qualquer sistema que suporte Docker, assegurando uma execução consistente do projeto.

Bibliotecas Utilizadas:

  • Material UI: Material UI é uma biblioteca de componentes React que implementa o Material Design, o sistema de design desenvolvido pelo Google. Ela fornece uma ampla gama de componentes prontos e estilizados, como botões, formulários, tabelas, ícones, entre outros, permitindo que a aplicação tenha uma aparência moderna e consistente. O Material UI facilita a criação de interfaces de usuário responsivas e customizáveis, proporcionando uma experiência de usuário otimizada e visualmente atraente.

  • jsPDF: jsPDF é uma biblioteca JavaScript que permite gerar documentos PDF diretamente no navegador. Com ela, é possível criar arquivos PDF contendo textos, imagens, gráficos e outros elementos de forma programática. No projeto, o jsPDF é usado para possibilitar funcionalidades como exportação de relatórios, recibos ou outros documentos, gerando PDFs sem a necessidade de um servidor para processamento.

Rodando o Front-end pela primeira vez

Siga os passos abaixo para configurar e iniciar o ambiente de desenvolvimento do projeto HoorTech.

1. Pré-requisitos

Certifique-se de ter os seguintes requisitos instalados:

  • Node.js: Baixe o Node.js aqui
  • npm (incluso com o Node.js) ou yarn (opcional): Yarn

2. Clonar o Repositório

Primeiro, clone o repositório do projeto para a sua máquina local. No terminal, execute o seguinte comando:

git clone https://tools.ages.pucrs.br/hoortech/hoortech_frontend.git

3. Clonar o Repositório

Após clonar o repositório, entre no diretório do projeto

cd hoortech_frontend

4. Instale as dependências

npm install

ou

yarn install

E todas as dependências disponíveis na aba Scripts Disponíveis

5. Inicie o servidor de desenvolvimento

npm start

ou

yarn start

6. Abrindo a aplicação manualmente (localHost):

Recomenda-se abrir a aplicação em uma aba anônima (ou modo privado) do navegador. Isso ajuda a evitar problemas ou bugs relacionados ao cache armazenado na máquina, garantindo que a aplicação seja carregada com as atualizações mais recentes.
Utilize o localHost abaixo (verifique se em sua máquina o caminho é o padrão utilizado no projeto):

http://localhost:5003

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. (Atente-se para a versão atual do mui-material e do mui-icon-materials para que estejam na mesma versão)
  • npm install jspdf:
    • instala a biblioteca jsPDF
  • Porta atualmente utilizada:
    • http://localhost:5003
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