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!

Rotas

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.

Context API

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 props manualmente 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.

Arquitetura de Software MSC

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.

Testes

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.

Segurança

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.

Estilização

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

Instalação

• Clone o repositório git@github.com:Rafael-Souza-97/ibirita-delivery-app.git:

git clone git@github.com:Rafael-Souza-97/ibirita-delivery-app.git

• Entre na pasta do repositório que você acabou de clonar:

cd ibirita-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

---

Executando a aplicação:

• Execute a aplicação com com npm start na raiz do projeto:

Executará a aplicação em modo de desenvolvimento.

npm start

Abra http://localhost:3000 no seu navegador para visualiza-lo.

---

Testando a aplicação:

• Execute os testes com npm test:

Executará os testes unitários e testes de integração.

npm test

---

Contribuição

Contribuiçõ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 Request para o repositório original.

---

Equipe

• Artur Vidor
• Julia Peres Kitzberger
• Pablo Araujo
• Rafael Souza
• Pedro H. Niemczewski

Referências

• Trybe

Tecnologias e Ferramentas

• 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

Estilização

• Framework CSS: Tailwind
• Biblioteca de componentes: Material UI
• Linguagem de Estilização: CSS

Testes

• 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

---

Deploy

Este projeto foi implantado em três serviços diferentes: Vercel para o front-end, Render para o back-end e Railway para o banco de dados.

• Front-end: O front-end foi implantado no Vercel. Você pode acessar o link do site aqui: iBirit@

• Back-end: O back-end foi implantado no Render.

• Banco de dados: O banco de dados foi implantado no Railway.

---

Preview

ibirita-cliente.mp4

---