Bem-vindo(a) ao iBirita, um aplicativo de delivery de bebidas completo e fácil de usar! Com o iBirita, você pode escolher entre uma grande variedade de bebidas e recebê-las diretamente na sua porta.
O iBirita foi desenvolvido por uma equipe de 5 pessoas dedicadas a fornecer a melhor experiência de compra online para seus usuários. Utilizando tecnologias modernas, o aplicativo inclui telas de login e cadastro para seus clientes, vendedores e administradores, bem como uma seleção de produtos, checkout e rastreamento de pedidos.
Além de ser uma opção conveniente para dispositivos móveis, o iBirita também pode ser usado em PCs. Isso permite que você faça seus pedidos diretamente do seu computador, sem precisar alternar entre diferentes dispositivos. Compatibilidade com dispositivos móveis e desktop é uma das nossas principais prioridades, garantindo que você possa acessar e utilizar o iBirita de qualquer lugar e em qualquer dispositivo.
Com o iBirita, nunca foi tão fácil pedir uma bebida. Experimente agora mesmo!
O aplicativo possui as seguintes rotas:
-
/- Rota raiz da aplicação, redireciona o usuário para a página de login. -
/login- Rota para o login do usuário. A página de login apresenta um formulário de login onde o usuário deve inserir seu e-mail e senha para acessar a plataforma. -
/register- Rota para o registro de novos usuários. A página de registro apresenta um formulário de cadastro onde o usuário deve inserir informações como nome, e-mail, senha e endereço. -
/customer/products- Rota para a lista de produtos disponíveis para compra pelos clientes. A página apresenta uma lista de produtos com suas respectivas informações como nome, preço, descrição e imagem. O usuário pode adicionar os produtos ao carrinho de compras. -
/customer/checkout- Rota para o carrinho de compras e finalização de pedidos. A página apresenta os produtos adicionados ao carrinho de compras pelo usuário, onde é possível visualizar os detalhes dos produtos e finalizar o pedido. -
/customer/orders- Rota para a lista de pedidos realizados pelo cliente. A página apresenta uma lista de todos os pedidos realizados pelo usuário, onde é possível visualizar as informações sobre o pedido e seu status. -
/customer/orders/:id- Rota para os detalhes de um pedido específico. A página apresenta todas as informações sobre um pedido específico, incluindo informações do produto, preço, quantidade, endereço de entrega e status do pedido. -
/seller/orders- Rota para a lista de pedidos realizados pelos clientes e que aguardam atendimento pelo vendedor. A página apresenta uma lista de todos os pedidos que ainda não foram atendidos pelo vendedor, onde é possível visualizar as informações sobre o pedido e seu status. -
/seller/orders/:id- Rota para os detalhes de um pedido específico que aguarda atendimento pelo vendedor. A página apresenta todas as informações sobre um pedido específico, incluindo informações do produto, preço, quantidade, endereço de entrega e status do pedido. -
/admin/manage- Rota para a página de gerenciamento da plataforma pelo administrador. A página apresenta diversas funcionalidades como gerenciamento de produtos, gerenciamento de usuários, entre outros. -
*- Rota para o tratamento de rotas não encontradas. Quando o usuário tenta acessar uma rota que não existe, ele é redirecionado para esta rota, apresentando uma mensagem informando que a rota não foi encontrada.
O ContextAPI é uma das funcionalidades do React que permite compartilhar dados entre componentes sem precisar passar props manualmente em cada nível da árvore de componentes. Vantagens do ContextAPI:
- Reduz a necessidade de passar
propsmanualmente em cada nível da árvore de componentes, tornando o código mais limpo e fácil de ler. - Permite compartilhar dados em toda a árvore de componentes sem precisar se preocupar com a hierarquia dos componentes.
- Facilita a criação de temas personalizados, permitindo que os componentes tenham acesso a um tema global sem a necessidade de passá-lo manualmente em cada componente.
- Ajuda a manter o estado da aplicação em um único lugar, tornando mais fácil a manipulação e a atualização dos dados.
- Permite o uso de múltiplos contextos em uma única aplicação, tornando a organização e a estruturação da aplicação mais flexíveis.
- Melhora a performance da aplicação, uma vez que reduz a necessidade de atualizar vários componentes ao mesmo tempo.
Optamos por utilizar a arquitetura MSC. que é uma estrutura de design de software que divide um aplicativo em três componentes principais: Model, Service e Controller.
-
Model: A camada Model é a representação de um objeto no banco de dados, com seus atributos e relacionamentos. Ela lida com a leitura e escrita de dados no banco de dados e fornece uma interface para manipular esses dados. -
Service: A camada service é responsável por implementar a lógica de negócios do aplicativo. Ela geralmente encapsula uma ou mais operações do modelo e fornece uma camada adicional de abstração para o controller. -
Controller: A camada controller é responsável por lidar com as requisições HTTP e coordenar as interações entre os modelos e os serviços. Ela recebe as solicitações do usuário e decide qual serviço ou modelo deve ser usado para lidar com essa solicitação.
Ao usar a arquitetura MSC, a lógica de negócios é separada da camada de apresentação e da camada de armazenamento de dados, o que torna o código mais modular e escalável. Além disso, a separação de responsabilidades torna mais fácil testar cada componente separadamente.
Aqui estão alguns benefícios da arquitetura MSC:
-
Organização: Com a divisão clara de responsabilidades, é mais fácil para os desenvolvedores entenderem e manterem o código. -
Escalabilidade: Como cada componente é independente, é possível escalar o aplicativo de forma granular, sem precisar escalá-lo como um todo. -
Reutilização de código: Como os serviços encapsulam a lógica de negócios, é possível reutilizar o mesmo serviço em várias partes do aplicativo. -
Testabilidade: Como cada componente é independente, é mais fácil escrever testes automatizados para cada componente.
Foram realizados testes automatizados durante o desenvolvimento da aplicação para garantir seu correto funcionamento e evitar possíveis erros no código. Foram implementados testes de integração e testes unitários tanto no front-end quanto no back-end.
No front-end, os testes foram escritos utilizando a biblioteca React Testing Library em conjunto com o framework Jest. Os testes unitários verificam a funcionalidade de cada componente individualmente, enquanto os testes de integração testam o comportamento de múltiplos componentes em conjunto. Isso garante que a interface do usuário esteja funcionando corretamente, independentemente de qualquer mudança no código.
No back-end, foram implementados testes de unidade utilizando a biblioteca Mocha, o framework de asserção Chai e a biblioteca de simulação Sinon. Além disso, foram realizados testes de integração para garantir que os diferentes componentes do servidor estejam interagindo corretamente.
A utilização de testes automatizados permite uma maior confiabilidade e segurança na aplicação, garantindo que ela continue funcionando corretamente mesmo após alterações no código.
A segurança é uma preocupação primordial em nosso aplicativo. Utilizamos várias técnicas e tecnologias para garantir que nosso sistema seja seguro e confiável.
Uma das tecnologias que usamos para garantir a segurança é o JWT (JSON WEB TOKEN), que é uma maneira segura de transmitir informações entre dois ou mais sistemas de forma criptografada. Isso garante que apenas as partes autorizadas possam acessar as informações transmitidas.
Além disso, utilizamos o MD-5, que é um algoritmo de hash criptográfico, para proteger as senhas de nossos usuários. O MD-5 é um algoritmo robusto e comprovadamente seguro para uso em senhas.
Outra maneira pela qual garantimos a segurança é através da arquitetura de nosso software. Nossos sistemas são construídos com uma arquitetura modular e escalável, o que significa que podemos isolar e proteger cada componente do sistema de forma independente. Isso nos permite detectar e corrigir vulnerabilidades de segurança de forma mais rápida e eficiente.
No aplicativo iBirita, utilizamos três ferramentas para estilizar a aplicação web: Tailwind, Material UI e CSS. O Tailwind é um framework CSS utilitário que nos permite criar estilos customizados rapidamente, enquanto o Material UI é um conjunto de componentes React pré-construídos que seguem as diretrizes de design do Google. Além disso, o CSS nativo foi utilizado em alguns casos para complementar o estilo dos componentes.
Utilizamos Tailwind principalmente para estilizar os componentes criados do zero, enquanto Material UI foi utilizado para os campos de input e botões que utilizamos na aplicação. Ambos foram customizados para atender às necessidades de design e experiência do usuário específicas do projeto.
No geral, a combinação dessas ferramentas nos permitiu criar uma interface web responsiva, atraente e funcional.
INSTALAÇÃO DO APLICATIVO iBIRITA
- Clone o repositório
git@github.com:pedrohassen/delivery-app.git:
git clone git@github.com:pedrohassen/delivery-app.git- Entre na pasta do repositório que você acabou de clonar:
cd delivery-app- Instale as depëndencias, caso necessário, com
npm install:
npm install- Instale as depëndencias do Front-end e Back-end, com
npm run dev:prestart:
npm run dev:prestart- Execute a aplicação com com
npm startna raiz do projeto:
Executará a aplicação em modo de desenvolvimento.
npm startAbra http://localhost:3000 no seu navegador para visualiza-lo.
- Execute os testes com
npm test:
Executará os testes unitários e testes de integração.
npm testContribuições são sempre bem-vindas! Para contribuir com o projeto, siga as instruções abaixo:
- Fork este repositório
Crie uma nova branch com sua feature ou correção de bug:
git checkout -b sua-feature-ou-correcao- Faça as alterações necessárias e commit as mudanças:
git commit -m "sua mensagem de commit"- Envie suas alterações para seu repositório remoto:
git push origin sua-feature-ou-correcao- Crie um
Pull Requestpara o repositório original.
- Linguagem: Javascript
- Framework de Front-end: React
- Gerenciamento de estado: ContextAPI
- Cliente HTTP: Axios
- Plataforma de desenvolvimento: Node
- Virtualização: Docker
- Padrão de arquitetura de API: API RESTful
- Padrão de arquitetura do Software: Model-Service-Controller
- Framework de arquitetura de APIwork web: Express
- Banco de dados: MySQL
- Ferramenta de modelagem de banco de dados: MySQL Workbench
- ORM: Sequelize
- Criptografia de senhas: MD-5
- Autenticação e autorização: JWT
- Cliente de teste de API: Thunder Client
- Linter de código: ESLint
- Metodologias ágeis: Scrum e Kanban
- Ferramentas de comunicação: Zoom e Slack
- Editor de código: Visual Studio Code
- Sistema de controle de versão: Git e GitHub
- Sistema operacional: Linux - Ubuntu e Windows
- Framework CSS: Tailwind
- Biblioteca de componentes: Material UI
- Linguagem de Estilização: CSS
- Framework de teste de unidade: Jest
- Biblioteca de teste de componentes React: React Testing Library
- Framework de teste de unidade: Mocha
- Biblioteca de assertividade para teste de unidade: Chai
- Biblioteca de espiões, stubs e mocks para testes: Sinon