https://www.figma.com/file/uSzNvWzY9Nh2RZrS5mZSwG/EchoPet?node-id=0%3A1
Os grupos deverão criar e pensar no sistema a ser desenvolvido. A ideia é documentar wireframe de todas as páginas, funcionalidades principais da aplicação, fluxos e processos para a facilitação do desenvolvimento.
Para a documentação e criação dos layouts, podem ser utilizadas qualquer ferramenta, porém deixamos como recomendação as seguintes:
- Adobe XD - Link: https://www.adobe.com/br/products/xd.html
- Figma - Link: https://www.figma.com/
- Canva - Link https://www.canva.com/
Agora que já pensamos no layout e identidade visual do nosso projeto, essas ideias devem ser passadas para o código!
Deve ser entregue o front-end completo do sistema escolhido por vocês, ou seja, todas as páginas.
É muito importante que o usuário tenha uma boa experiência tanto no computador, quanto no celular ou tablet. Atente-se a responsividade dos elementos e teste em diferentes dispositivos para garantir a qualidade da entrega.
Alguns links que podem ajudá-los nessa etapa:
- Google Fonts - Link: https://fonts.google.com/
- UnDraw (Ilustrações)- Link: https://undraw.co/illustrations
- Freepik (ilustrações, ícones)- Link: https://br.freepik.com/
- Pexels (imagens) - Link: https://www.pexels.com/
- Adobe Color (criação paleta de cores)- Link: https://color.adobe.com/create
Vale lembrar: Não esperamos que apliquem nada além de HTML, CSS e Bootstrap (caso o grupo opte por usá-lo). E, é provável que após começarem a transformar o protótipo em código tenham novas ideias para o layout, desde que todo o grupo concorde com as mudanças não há problema algum!
Nessa sprint vamos nos aprofundar mais nas regras de negócio doprojeto, definir quais informações precisam ficar salvas no banco dedados. E assim, criar as tabelas com suas respectivas colunas erelacionamentos.
SPRINT 3: Banco de dadosNessa sprint vamos nos aprofundar mais nas regras de negócio doprojeto, definir quais informações precisam ficar salvas no banco dedados. E assim, criar as tabelas com suas respectivas colunas erelacionamentos.
Utilize o Workbench Model para criar o diagrama de forma maisdinâmica e gere o schema com a opção “Forward Engineer”.Lembre-se de manter boas práticas na criação da estrutura, pode serutilizado letras minúsculas e underline nas nomenclaturas. Essaregra vai evitar muito bug no back-end
Valelembrar:Para garantir que a estrutura do banco faz sentido com a aplicaçãoque estamos desenvolvendo, insira alguns registros em cada tabela, explorandoos tipos de relações entre as entidades.
Deverá ser criado toda a lógica de backend do projeto. Aqui deverá ser criada cada funcionalidade do sistema em si, como envios de formulários, criação de usuários, produtos (CRUD) e assim por diante. Além disso, será integrado o banco de dados na aplicação para que as informações possam ser armazenadas.
- Utilizar o framework express e padrão MVC;
- Formulários e ações devem salvar as informações diretamente no banco de dados;
- Criar a funcionalidade de autenticação de usuários (session e middlewares) e funcionalidade logout. Senhas precisam ser armazenadas criptografadas. Tela de login deverá validar usuário e redireciona-lo para a página inicial interna.
- Para um usuário já logado, a rota de login e de formulário de cadastro devem direcioná-lo para página inicial interna;
- Deverá ser feita a validação do que está sendo salvo dentro do banco de dados, além de exibir mensagem de erro sempre que necessário.
- Produtos, clientes, serviços, etc deverão ser exibidos de forma dinâmica e de acordo com o que está armazenado dentro do banco de dados.
- Incluir uma seção comum em todo o site, por exemplo, o cabeçalho. Se o usuário estiver logado, eles devem indicar seu nome de usuário. Se você não está logado, você deve ter um link para a página de login
- Utilizar Migration como versionamento do banco de dados.
- Ter alguma ferramenta de busca de alguma entidade (produtos, alunos,serviços, etc...)
1- Acesse a pasta Back-end
2- Dê um npm install para baixar as dependencias de projeto
3- Instale o Sequelize
4- Instale o MySql e WorkBanch
5- Instale o NPX
6- Configure o arquivo /config/database.js com o user e senha do seu banco de dados
7- Dê o comando: npx sequelize db:migrate:undo:all para limpar o banco
8- Dê o comando: npx sequelize db:migrade para rodas as migrations e o banco
9- Instale o nodemon
10 - Execute nodemon ou npm start para rodar o servidor que está configurado na porta 3000