Este é o repositório do meu projeto de portal de serviços, desenvolvido utilizando Vite/React.js. Inspirado no projeto desenvolvido durante o meu estágio.
Este README fornece uma visão geral da estrutura do projeto, suas dependências e arquivos importantes. Para mais informações sobre como executar o projeto localmente, consulte as seções relevantes neste arquivo ou entre em contato comigo.
Desenvolvido por: Rickson Reis
Sistema web base para um portal de serviços utilizado para solicitar serviços para uma faculdade hipotética. O sistma é modular, ou seja, cada serviço disponível no portal é um módulo a ser importado de seu respectivo pacote npm que tem que ser instalado.
No portal os usuários solicitam serviços para a coordenaria da faculdade, que recebe e responde a solicitação através de um sistema interno (não coberto nesse projeto - por enquanto).
- Na página 'Operador', os administradores do sistema podem adicionar e excluir módulos de serviço. A página só pode ser acessada por quem tem papel (role) de 'operador' atrelado ao seu usuário.
- Node.js: Ambiente de execução JavaScript server-side que permite a construção de aplicações escaláveis.
- Express: Framework web minimalista e flexível para Node.js, utilizado para construir APIs e aplicações web.
- Bootstrap: Framework de front-end para desenvolvimento ágil de sites e aplicativos web responsivos.
- SASS: Pré-processador CSS que estende a funcionalidade do CSS convencional.
- React Icons: Biblioteca que fornece ícones populares para uso em aplicativos React.
- cors: Middleware para Express que habilita CORS (Cross-Origin Resource Sharing), permitindo o acesso a recursos de diferentes origens.
- dotenv: Biblioteca que carrega variáveis de ambiente de um arquivo .env para process.env, facilitando a configuração da aplicação..
- express: Framework web minimalista e flexível para Node.js, utilizado para construir APIs e aplicações web.
- bootstrap: Framework de front-end para desenvolvimento ágil de sites e aplicativos web responsivos.
- react-bootstrap: Versão do bootsrap otimizada para aplicações react.
- react: Biblioteca JavaScript para criar interfaces de usuário.
- react-bootstrap: Componentes Bootstrap reutilizáveis para React.
- react-dom: Biblioteca JavaScript para manipulação do DOM em React.
- react-icons: Biblioteca de ícones para React.
- react-tooltip: Biblioteca react para implementar tooltips, ou "dicas de ferramentas" (pop up que abre quando o mouse fica sobre algum elemento da interface).
Como não consegui acessar diretamente o repositório do GitHub, aqui está um guia genérico para executar o projeto Vite React que está localizado na pasta frontend da raiz do repositório. Você pode adaptar este guia conforme necessário para o seu repositório específico.
Certifique-se de que você tem os seguintes softwares instalados em sua máquina:
Primeiro, clone o repositório em sua máquina local. Abra um terminal e execute o seguinte comando:
git clone https://github.com/rickreisme/PortalServicos.git
cd PortalServicosMude para o diretório frontend onde está localizado o projeto Vite React:
cd frontendInstale as dependências do projeto usando npm:
npm installDepois de instalar as dependências, inicie o servidor de desenvolvimento do Vite:
npm run devIsso iniciará o servidor de desenvolvimento e você verá uma saída similar a esta:
VITE v2.0.0 ready in 300ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
Abra seu navegador e acesse http://localhost:5173 para ver a aplicação em execução.
Para finalizar a execução aperta Ctrl+C no terminal.
Mude para o diretório backend onde está localizado o projeto Vite React:
cd backendInstale as dependências do projeto usando npm:
npm installDepois de instalar as dependências, inicie o servidor node:
node index.jsIsso iniciará o servidor e você verá uma saída similar a esta:
Servidor rodando na porta 5000
Para finalizar a execução aperte Ctrl+C no terminal.
portal-servicosbackendfrontendmodulo-testeprojeto
-
backend(não possui subpastas) -
frontend./public./srcapiservices
assetsiconsimgsstylesmediaQuery
componentscontextshooksroutes
-
projeto(não possui subpastas)
frontend: Toda a estrutura front-end do projeto, feita em Vite React.backend: Estrutura de comunicação com APIs.projeto: Outros arquivos importantes do projeto.
public: Arquivos estáticos que serão servidos diretamente pelo servidor web, sem processamento pelo sistema de construção.src: Código fonte da aplicação.src/assets,assets/icons,assets/imgs: Ícones e imagens, arquivos de mídia que compõem as páginas e componentes.assets/styles: Arquivos das folhas de estilo que estilizam as páginas e componentes.styles/mediaQuery: Arquivos de folhas de estilo que estilizam as páginas em diferentes tamanhos de tela para ter responsividade.components: Códigos fonte de componentes das páginas principais do site, componentização diminui as linhas de código nas páginas principais.contexts: Contém os contextos, que compartilham os estados da aplicação entre os componentes.hooks: Contém os hooks, que permitem utilizar uma funcionalidade ou contexto no componente.routes: Contém as rotas, ou seja, as páginas do site. Atualmente, as rotas são:/: Rota principal, página inicial do Portal./portal: Página que exibe todos os serviços disponíveis no Portal./operador: Página de gerenciamento que somente usuários com papel de operador poderão acessar./service/agendamento: Página do módulo teste de Agendamento do Portal, seguir esse padrão para definir as demais rotas de módulos (/service/nome-modulo).
.gitignore: Arquivo que define os arquivos e pastas a serem ignorados pelo Git.README.md(este arquivo): Arquivo com informações e visão geral mais compreensível sobre o projeto, forma de documentação do código.
-
index.js: Arquivo com as rotas e configurações da API do projeto. Atualmente, as rotas são:/services:GET- Obtém os serviços registrados no db.json na API./services:POST- Adiciona um novo serviço no db.json da API (usado no código dos módulos para passar as informações deles para o backend)./install:POST- instala um módulo novo no sistema base./uninstall:POST- desinstala um módulo do sistema base.
-
package-lock.json: Arquivo de bloqueio gerado automaticamente pelo npm após uma instalação de pacotes. -
package.json: Arquivo de manifesto do projeto, contém metadados sobre o projeto e onde as dependências são definidas.
.eslintrc.cjs: Arquivo de configuração do ESLint.index.html: Arquivo HTML base para o site, onde é definido o favicon, linguagem e outros metadados do site.package-lock.json: Arquivo de bloqueio gerado automaticamente pelo npm após uma instalação de pacotes.package.json: Arquivo de manifesto do projeto, contém metadados sobre o projeto e onde as dependências são definidas.vite.config.js: Arquivo de configuração do Vite.
favicon-80x80.pngefavicon.png: Favicons do site.
App.jsx: Principal componente do do site, contém importações globais de arquivos e estilos, de onde todos os componentes recebem o cabeçalho e o rodapé.main.jsx: Renderiza o componente raiz (ReactDOM.render()), ponto de entrada da aplicação. Também possui importações globais e
services.json: Estrutura json da API que retorna os serviços disponíveis do site para serem renderizados na página Portal.jsx (atualmente desativado - por hora essa estrutura está disponível em api feita no Glicth baseada em um servidor feito com server.json - Link da API no Glitch, Link do repositório do servidor no GitHub)
App.scss: Estilos da página principal em SASS.Footer.scss: Estilos da seção footer da página principal em SASS.global.scss: Estilos globais do site em SASS.sidebar.scss: Estilo da barra lateral do menu (atualmente desativada).vars.scss: Variáveis em SASS de estilos pré-definidos (cores em sua maioria).
min375px.scss: Estilos do site aplicados quando a largura de tela tem no mínimo 375px.max1015px.scss: Estilos do site aplicados quando a largura de tela tem no máximo 1015px.
Footer.jsx: Componente rodapé do site.Header.jsx: Componente do cabeçalho do site.Sidebar.jsx: Componente da barra lateral do menu (atualmente desativado).SidebarItems.jsx: Componente dos itens presentes dentro da barra lateral do menu (atualmente desativado).
auth.jsx: Contexto que configura a lógica de autenticação interna do site.
useAuth.jsx: Hook que permite a aplicação do AuthContext do auth.jsx em componentes do site.
O projeto do Portal de Serviços prevê que cada serviço disponível seja um módulo a ser instalado no sistema base, dessa forma a estratégia escolhida foi desenvolver cada módulo como uma aplicação Vite React da mesma forma que o sistema base foi feito e publicá-la em forma de pacote NPM para ser importada no código do sistema base. Este guia irá orientá-lo nesse processo.
- Node.js e npm instalados na sua máquina.
- Conta no npm (você pode se registrar em https://www.npmjs.com/signup).
Primeiro, crie um projeto Vite com React:
npm create vite@latest meu-app-vite --template react
cd meu-app-vite
npm installA estrutura do seu projeto deve se parecer com isso:
meu-app-vite/
├── node_modules/
├── public/
├── src/
│ ├── assets/
│ ├── components/
│ ├── App.jsx
│ └── main.jsx
├── .gitignore
├── index.html
├── package.json
├── README.md
├── vite.config.js
└── yarn.lock
Adicione os campos necessários no package.json para a publicação:
{
"name": "meu-app-vite",
"version": "0.0.1", //importante manter o controle das versões quando for publicar o pacote no NPM
"description": "Uma aplicação Vite React publicada como um pacote NPM",
"main": "dist/index.js",
"module": "dist/index.js",
"files": [
"dist"
],
"scripts": {
"build": "vite build",
"prepublishOnly": "npm run build"
},
"keywords": [
"vite",
"react",
"npm",
"package"
],
"author": "Seu Nome <[email protected]>",
"license": "MIT",
"devDependencies": {
"vite": "^2.0.0",
"react": "^17.0.0",
"react-dom": "^17.0.0"
},
"peerDependencies": {
"react": "^17.0.0",
"react-dom": "^17.0.0"
}
}Altere o vite.config.js para garantir que o Vite está configurado para gerar uma build adequada para um pacote NPM:
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
build: {
lib: {
entry: './src/main.jsx',
name: 'MeuAppVite',
fileName: (format) => `meu-app-vite.${format}.js`
},
rollupOptions: {
// Certifique-se de externalizar dependências que você não quer incluir no seu pacote
external: ['react', 'react-dom'],
output: {
globals: {
react: 'React',
'react-dom': 'ReactDOM'
}
}
}
},
plugins: [react()]
});Execute o comando de build:
npm run buildIsso gerará a pasta dist com os arquivos necessários para distribuição.
Faça login no npm (se ainda não estiver logado):
npm loginDepois, publique seu pacote:
npm publishSe tudo estiver configurado corretamente, seu pacote será publicado no NPM e estará disponível para instalação no sistema base via comando npm install meu-app-vite.
Se for necessário, verifique o módulo de teste modulo-agendamento (que está na pasta de mesmo nome na raiz do repositório) para entender melhor na prática.