Nome: Devs da 222
Integrantes: Felipe Verdade, Glauber Martini, Lucas da Paz
Turma: DEV1N222
- Produto
- Objetivo (meta)
- Rodando o projeto
- Requisitos, regras de negócio e tarefas
- Cronograma
- Linguagens, frameworks e ferramentas
- Diagramas, design e layouts
Website para registro e mapeamento dos projetos realizados dentro do programa Somar.
Pitch de apresentação do projeto.
Desenvolver, em quatro meses, um site que visa a comunicação com a sociedade via exposição dos projetos e divulgação dos Objetivos de Desenvolvimento Sustentável (ODS).
Para executar o projeto é preciso ter instalado o Node.js. A versão utilizada para o desenvolvimento foi a 18.13.0 LTS; para os testes foi utilizada a versão 20.5.1.
Também será necessário instalar o MySQL; a versão utilizada para o desenvolvimento foi a 8.0.31.
É recomendado que o usuário utilize as versões mais próximas possíveis das utilizadas em desenvolvimento. Tenha em mente que versões anteriores podem causar problemas de compatibilidade e erros na execução do projeto.
Por fim, é altamente recomendado que a IDE utilizada para rodar o projeto seja o VS Code.
Após clonar o projeto, siga as instruções abaixo para configurar o ambiente e rodar o projeto corretamente.
Visando tornar o projeto mais seguro e sua configuração mais simples, são utilizadas variáveis de ambiente para guardar informações sensíveis. Para configurar as variáveis de ambiente com Dotenv, é preciso criar um arquivo chamado .env na pasta src com as chaves e valores que se deseja guardar; no arquivo exemplo.env, as chaves já estão disponíveis, você pode apenas renomear o arquivo para .env e preencher com os devidos valores.
Seu arquivo .env deverá se parecer com:
# Credenciais de acesso ao banco de dados:
DB_USERNAME = "seu_usuario"
DB_PASSWORD = "sua_senha"
DB_DATABASE = "nome_do_banco"
TEST_DATABASE = "banco_para_testes"
# Segredo Token JWT:
TOKEN_SECRET = "uma senha para validar seus tokens"
Este projeto utiliza o Sequelize como ORM para realizar ações no banco de dados. Para que isso funcione corretamente, você precisa criar um banco de dados e, no arquivo .env, você deve substituir os valores de DB_USERNAME pelo nome do seu usuário que vai acessar o banco de dados no MySQL (lembrando que o usuário deve ter as permissões necessárias para realizar as operações), DB_PASSWORD pela senha deste usuário - ou uma string vazia ("") caso não tenha senha - e DB_DATABASE pelo nome do banco de dados que você criou.
Utilizando as variáveis de ambiente, essas informações serão importadas no arquivo config.js, desta forma:
// ...
development: {
username: process.env.DB_USERNAME,
password: process.env.DB_PASSWORD,
database: process.env.DB_DATABASE,
host: "127.0.0.1",
dialect: "mysql",
},
// ...Você vai precisar da extensão Live Server para rodar o frontend do projeto. Isso é importante, pois caso você tente executar apenas os arquivos HTML do projeto, ocorrerão erros do CORS e não será possível utilizar nenhuma funcionalidade.
Após instalar a extensão, deve aparecer um botão no canto inferior direito do VS Code escrito "Go Live".
Navegue até a pasta src pelo terminal. Execute comando npm i para instalar as dependências do projeto. Quando a instalação for concluída, execute o seguinte script para criar as tabelas do banco e inserir alguns dados nelas:
npm run db:migrate-and-seed
# se preferir, você também pode executar as migrations e os seeders separadamente:
npm run db:migrate
npm run db:seed
Agora você já deve ter todas as tabelas do projeto criadas no seu banco, com os dados dos arquivos seeders inseridos.
Para rodar o servidor no backend do projeto, ainda no terminal e na pasta src, execute o comando npm start.
Abra a raíz do projeto no VS Code; dentro da pasta public/views abra o arquivo index.html e clique no botão "Go Live" do Live Server.
Foram desenvolvidos testes end-to-end e unitários utilizando o test-runner nativo do Node.js 20.5; para executá-los é necessário criar um banco de dados à parte e informá-lo no arquivo .env como TEST_DATABASE = <seu-banco>. Para criar as tabelas e executar os arquivos seeders, defina manualmente a variável de ambiente NODE_ENV com o valor test ($env:NODE_ENV="test" no Windows e NODE_ENV=test no Linux/Unix) e, dentro da pasta src, execute o script npm run db:migrate-and-seed — ou, se preferir, pode executá-los separadamente com db:migrate e db:seed.
Com o ambiente de testes configurado, não precisa mais se preocupar em definir seu NODE_ENV manualmente: foi utilizado o cross-env para definir o ambiente de testes nos scripts de teste. Para executar os testes, utilize os seguintes scripts:
| Script | Descrição |
|---|---|
npm t |
roda os testes uma vez |
npm run test:watch |
reinicia as suites sempre que um arquivo é alterado |
npm run test:cov |
utiliza o c8 para gerar coverage em HTML |
npm run test:cov-native |
gera um output contendo as informações de coverage no terminal |
Pacotes do Node.js necessários para executar o projeto; estão disponíveis também no arquivo package.json:
- Nodemon (desenvolvimento);
- c8 (testes);
- cross-env (testes);
- Dotenv;
- Sequelize;
- Express;
- JSON Web Token.
- Deve ser possível se cadastrar;
- Deve ser possível se autenticar;
- Deve ser possível visualizar e editar o perfil de um usuário logado;
- Deve ser possível que o usuário exclua seu cadastro;
- Deve ser possível cadastrar projetos;
- Deve ser possível visualizar projetos;
- Deve ser possível ao usuário que cadastrou o projeto editá-lo;
- Deve ser possível ao usuário que cadastrou o projeto excluí-lo;
- Deve ser possível realizar a filtragem de projetos:
- por nome;
- por ODS;
- por cidade;
- por causa de atuação;
- por público-alvo.
- Deve ser possível adicionar até 5 imagens por projeto;
- Deve ser possível adicionar um vídeo de até 2min de duração por projeto;
- Deve ser possível visualizar a quantidade total de projetos;
- Deve ser possível visualizar a quantidade de projetos por ODS.
- O site deve ser acessível a todos os tipos de usuários (acessibilidade);
- O site deve ser responsivo e funcionar em desktop e dispositivos móveis;
- A senha do usuário deve ser criptografada;
- O usuário deve ser identificado com JWT;
- Utilizar expressões regulares para escapar possíveis entradas maliciosas do usuário;
- Validar e limitar tamanho máximo de upload de arquivos;
- Criar componentes que possam ser reutilizados, evitando repetição e facilitando a manutenibilidade do projeto;
- Estruturar o projeto separando os arquivos por funcionalidade e coerência;
- Procurar escrever o código de forma semântica e organizada, facilitando o entendimento do sistema;
- Validar dados inseridos pelo usuário conforme regras de negócio;
- O usuário não pode se cadastrar com um e-mail duplicado;
- O usuário não pode se cadastrar com um nome de usuário duplicado;
- O nome de usuário deve conter apenas letras, números, hífen e underline e deve ter entre 3 e 20 caracteres;
- A senha do usuário deve conter ao menos uma letra maiúscula, uma minúscula, um número e um caractere especial e deve ter entre 8 e 50 caracteres;
- O campo e-mail deve ser validado;
- O campo telefone deve ser validado;
- O campo CEP deve ser validado e buscar os dados de endereço do usuário;
- Os campos obrigatórios deve ser marcados com "*";
- O usuário deve estar autenticado para cadastrar um projeto;
- O projeto deve possuir pelo menos 1 ODS.
- Elaborar documentação técnica;
- Decidir linguagens, frameworks e ferramentas que serão utilizados;
- Elaboração de protótipo do site;
- Criação do banco de dados;
- Desenvolver página inicial;
- Desenvolver página de login;
- Desenvolver página de cadastro de usuário;
- Desenvolver página “Conheça nossos projetos”;
- Desenvolver página de cadastro de projeto;
- Desenvolver página de projeto;
- Realizar integração com banco de dados;
- Desenvolver funcionalidades:
- Login e autenticação;
- Upload de imagens;
- Upload de vídeo;
- Filtragem de projetos;
- Contabilização de projetos;
- Botão "voltar" para facilitar navegação;
- Página de administração de dados do usuário;
- Possibilidade de editar e excluir projeto;
- Opção de gerar relatório contendo total de projetos e total de projetos por ODS.
- 17/03 - Início do projeto;
- 24/03 - Início da documentação técnica e primeiro esboço do projeto;
- 31/03 - Diagramação e escolha das linguagens e frameworks que serão utilizados;
- 07/04 - Avaliação das entregas pela banca avaliadora.
- 14/04 - Página inicial e página de login;
- 21/04 - Página “conheça nossos projetos”;
- 28/04 - Página de projeto;
- 05/05 - Pitch da Fase 1 para a equipe do comitê de sustentabilidade.
- 12/05 a 09/06 - Visualização de contabilização de quantos projetos ao total, quantos para cada ODS e possibilidade de upload de até 5 fotos por projeto;
- 16/06 - Pitch das Fases 1 e 2 para a equipe do comitê de sustentabilidade.
- 23/06 a 14/07 - Possibilidade de upload de um vídeo de até dois minutos por projeto e filtros para visualização de projetos por cidade, ODS, causa de atuação e público-alvo;
- 20/07 - Banca avaliadora irá avaliar o desenvolvimento do projeto como um todo;
- 04/08 - Pitch final para a equipe do comitê de sustentabilidade;
- 28/08 - Apresentação do projeto final para a banca avaliadora e comitê do projeto Somar (a banca avaliadora vai definir o projeto vencedor);
- HTML;
- CSS;
- JavaScript.
- Node.js;
- MySQL;
- Figma;
- brModelo;
- Astah UML.
Os diagramas e telas abaixo foram desenvolvidos durante a concepção inicial do projeto, podendo ter sofrido alterações durante o desenvolvimento.
