DSDeliver - Semana DevSuperior 2.0

Sobre   |   Features   |   Netlify   |   Tecnologias utilizadas   |   Layout   |   Instalação e execução   |   Como contribuir   |   Contato   |   Licença

📃 Sobre

DSDeliver é o projeto desenvolvido durante a Semana DevSuperior 2.0, um evento online produzido pela DevSuperior com duração de uma semana, onde serão desenvolvidos o back-end, front-end web, e o aplicativo mobile.

Esta é uma aplicação que registra os pedidos realizados pelos clientes dos restaurantes e organiza as entregas para os endereços informados.

✨ Features

✔ Listagem de produtos via API (backend), hospedada no Heroku

✔ Seleção de items do pedido

✔ Busca de endereços através de um mapa interativo e dinâmico

✔ Validação e finalização de pedidos

✔ Layout responsivo

✔ Página de erro 404 personalizada para rotas inexistentes

✔ Indicador de Loading durante o carregamento dos dados dos produtos pelo heroku

• Acompanhamento de pedidos pendentes pelo app mobile (em desenvolvimento)
• Criação de rotas de navegação GPS - app mobile (em desenvolvimento)
• Confirmação das entregas - app mobile (em desenvolvimento)

🌎 Aplicação Web no Netlify

Link para acessar a aplicação hospedada no Netlify:

https://mathrb22-sds2.netlify.app/

Obs.: na primeira vez que é executada, é possível que levem alguns segundos para que os produtos sejam carregados, devido ao tempo de inatividade do servidor do Heroku.

🚀 Tecnologias utilizadas

Este projeto foi desenvolvido com as seguintes tecnologias:

• JDK 11: Java Development Kit 11 - um kit de desenvolvimento para construção de aplicações e componentes usando a linguagem de programação Java;

• STS (Spring Tool Suite): um ambiente de desenvolvimento baseado em Eclipse, personalizado para desenvolvimento de aplicações Spring;

• Postman: uma ferramenta que tem como objetivo testar serviços RESTful (Web APIs) por meio do envio de requisições HTTP e da análise do seu retorno;

  A workspace do Postman com as requisições está disponível para download neste repositório. Baixe e importe o arquivo DSDeliver.postman_collection.json em seu Postman.

• Postgresql 12: um sistema gerenciador de banco de dados objeto relacional (SGBD), desenvolvido como projeto de código aberto;

• pgAdmin: ferramenta para administração do Postgresql, permite fazer realizar as tarefas necessárias para administração do banco de dados;

• Heroku CLI: interface de linha de comando do Heroku que facilita a criação e gerenciamento de seus apps no Heroku diretamente de um terminal;

• Git: o sistema de controle de versão distribuído de código aberto mais utilizado;

• Visual Studio Code: um editor de código-fonte desenvolvido pela Microsoft para Windows, Linux e macOS, recomendado para o desenvolvimento de aplicações web;

• Node.js: um interpretador de JavaScript assíncrono com código aberto orientado a eventos;

• TypeScript: um super conjunto da linguagem JavaScript que fornece classes, interfaces e tipagem estática opcional. Utilizado em conjunto com React no frontend web;

• React: uma biblioteca JavaScript de código aberto com foco em criar interfaces de usuário (frontend) em páginas web. É mantido pelo Facebook, Instagram, outras empresas e uma comunidade de desenvolvedores individuais. É utilizado nos sites da Netflix, Imgur, Feedly, Airbnb, SeatGeek, HelloSign, Walmart e outros;

• React Native: uma biblioteca Javascript criada pelo Facebook. É usada para desenvolver aplicativos para os sistemas Android e IOS de forma nativa;

📟 Layout

O layout das telas da aplicação DSDeliver foi desenvolvido pela equipe da DevSuperior através da ferramenta online Figma, um software de prototipação voltado para UI Design (design de interface). Você pode acessar o layout através deste link: DSDeliver.

Layout das telas da aplicação

Página inicial

Página de pedidos

Página de erro 404

🔧 Instalação e execução

Para baixar o código-fonte do projeto em sua máquina, primeiramente terá que ter instalado o Git.

Com o Git instalado, em seu terminal execute o seguinte comando:

$ git clone https://github.com/mathrb22/DSDeliver-sds2.git

Backend

• Com o projeto baixado, abra-o em sua IDE (Spring Tool Suite).
• Como será executado localmente em sua máquina, abra o arquivo application.properties e altere o perfil ativo de prod para test:
• Execute o arquivo DsdeliverApplication.java.
• A aplicação Spring Boot será executada no endereço: http://localhost:8080/.

---

Frontend web

Para instalar e executar o frontend-web do DSDeliver, terá que ter instalado em sua máquina também o Node.js.

1. Vá até a pasta front-web do repositório:

   $ cd front-web

2. Instale as dependências do projeto:

   $ npm install

   Atenção, antes de executar a aplicação React:

Para a busca de endereços no mapa, foi utilizado o Mapbox, uma plataforma de mapeamento que permite que seus clientes criem soluções de mapeamento personalizadas.

• Então, se deseja carregar os endereços no mapa, você precisará criar uma conta gratuita na plataforma e utilizar seu token pessoal de acesso à API.

• Após a criação da sua conta, na página principal do MapBox, clique em “Account”. Em configurações, clique em “API access tokens” e depois em “Create a new token”;

• Copie o token gerado, e dentro da pasta front-web, crie um arquivo com a extensão .env, onde serão definidas as variáveis de ambiente do projeto.

• Adicione o seguinte conteúdo ao seu arquivo, substituindo token pelo seu token copiado:

  REACT_APP_ACCESS_TOKEN_MAP_BOX=token
  REACT_APP_API_URL=http://localhost:8080
  

• Inicie a aplicação React:

  $ npm start

• Acesse a aplicação pelo endereço: http://localhost:3000/.

---

Mobile

🚧 Em desenvolvimento... 🚧

💡 Como contribuir

• Faça um fork desse repositório;
• Crie um branch para a sua feature: git checkout -b minha-feature;
• Faça um commit com suas alterações: git commit -m 'feat: Minha nova feature';
• Faça um push para o seu branch: git push origin minha-feature;
• Faça um pull request com sua feature;

Pull requests são sempre bem-vindos. Em caso de dúvidas ou sugestões, crie uma issue ou entre em contato comigo.

📲 Contato

Entre em contato comigo por e-mail ou pelo meu LinkedIn:

📝 Licença

Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

---

©2021 - Matheus Ribeiro