|
|
|
| [Home](home) | [Escopo e Cronograma](escopo-e-cronograma) | [Processo](processo) | [Mockups](design_mockups) | [**Configuração**](configuracao) | [Arquitetura](arquitetura) | [Código](codigo) | [BD](banco_dados) | [Qualidade](qualidade) | [Utilização](utilizacao) | [Front-end](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**](#arquitetura-base): Entenda a estrutura do projeto e o papel de cada diretório e arquivo principal.
|
|
|
|
- [**Tecnologias Utilizadas**](#tecnologias-utilizadas): Descubra as ferramentas e frameworks que compõem a base do projeto, como React e Docker.
|
|
|
|
- [**Bibliotecas Utilizadas**](#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**](#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**](#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](arquitetura)
|
|
|
|
```python
|
|
|
|
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](https://nodejs.org/)
|
|
|
|
- **npm** (incluso com o Node.js) ou **yarn** (opcional): [Yarn](https://yarnpkg.com/)
|
|
|
|
|
|
|
|
### 2. Clonar o Repositório
|
|
|
|
|
|
|
|
Primeiro, clone o repositório do projeto para a sua máquina local. No terminal, execute o seguinte comando:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
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
|
|
|
|
```bash
|
|
|
|
cd hoortech_frontend
|
|
|
|
```
|
|
|
|
### 4. Instale as dependências
|
|
|
|
```bash
|
|
|
|
npm install
|
|
|
|
```
|
|
|
|
ou
|
|
|
|
```bash
|
|
|
|
yarn install
|
|
|
|
```
|
|
|
|
E todas as dependências disponíveis na aba [Scripts Disponíveis](#scripts-disponíveis)
|
|
|
|
### 5. Inicie o servidor de desenvolvimento
|
|
|
|
```bash
|
|
|
|
npm start
|
|
|
|
```
|
|
|
|
ou
|
|
|
|
```bash
|
|
|
|
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):
|
|
|
|
```arduino
|
|
|
|
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 |
|
|
|
\ No newline at end of file |
