Skip to content

GitLab

Last edited by Pedro Henrique Tonial Pasinato
Page history

Front End

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

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:

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: