Be the Hero - Semana OmniStack 11

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

---

📃 Sobre

Be The Hero é um projeto desenvolvido durante a 11ª Semana OmniStack, um evento online com duração de uma semana, onde cada dia foi desenvolvida uma etapa da aplicação, desde o back-end, front-end (interface do usuário), até a API mobile (aplicativo para celular).

O objetivo do projeto é de conectar pessoas que desejam fazer contribuições monetárias a ONGs (Organizações não governamentais) que precisam de ajuda.

Este sistema possui a interface web, com a parte administrativa exclusiva para as ONGs. Estas tem a possibilidade de se cadastrar, fazer login, cadastrar e deletar casos.

Existe também o aplicativo para dispositivos móveis (Android e iOS), desenvolvido em React Native, contendo somente a seção dos heróis. Na página inicial é possível visualizar uma lista completa com todos os casos cadastrados pelas ONGs no banco de dados.

Além disso, os usuários que acessarem o aplicativo, podem ver mais detalhes de um caso específico, como o nome da ONG, cidade, estado e descrição. Caso desejem contribuir com alguma quantia, podem entrar em contato por e-mail ou Whatsapp, diretamente pelo app.

Este projeto foi desenvolvido para fins de estudo e aprendizado próprio, com foco na linguagem JavaScript e as demais ferramentas e tecnologias da OmniStack. Portanto, será atualizado constantemente.

🚀 Tecnologias utilizadas

Este projeto foi desenvolvido com as seguintes tecnologias:

• 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;
• 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;
• Expo: uma ferramenta utilizada no desenvolvimento mobile com React Native que permite o fácil acesso às API's nativas do dispositivo sem precisar instalar qualquer dependência ou alterar código nativo;

Outros recursos utilizados:

• Insomnia: um poderoso cliente de API REST com gerenciamento de cookies, variáveis de ambiente, geração de código e autenticação para Mac, Window e Linux;
• Express: um popular framework web estruturado, escrito em JavaScript que roda sobre o ambiente node.js em tempo de execução;
• Knex: um query builder em JavaScript para bancos de dados relacionais, como PostgreSQL, MySQL, SQLite3, e Oracle;
• SQLite3: uma biblioteca open-source desenvolvida em linguagem C, que funciona como um gerenciador de bancos de dados relacionais dentro da própria aplicação, sem a necessidade de utilizar um sistema separado.

📟 Layout

O layout da aplicação Be The Hero foi desenvolvido pela equipe da Rocketseat 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: Be The Hero - OmniStack 11.

OBS: O layout deste repositório contém diversas modificações feitas por mim mesmo durante o desenvolvimento da interface gráfica.

Página de Login

Página de cadastro de ONGs

Página de perfil da ONG

Página de cadastro de novos casos

🔧 Instalação e execução

Para você poder instalar e executar esta aplicação, terá que ter instalado em sua máquina o Git e o Node.js. Em seguida, no terminal execute os seguintes comandos segundo as instruções:

Backend

1. Clone este repositório:

   $ git clone https://github.com/mathrb22/SemanaOmnistack11.git

2. Vá até a pasta backend do repositório:

   $ cd backend

3. Instale as dependências do projeto:

   $ npm install

4. Execute as migrations (banco de dados):

   $ npx knex migrate:latest

5. Execute o servidor:

   $ npm start

6. Para importar a Workplace do Insomnia com todas as rotas e requests da aplicação, abra o aplicativo Insomnia. No menu principal, acesse as preferências, selecione DATA, e "Import Data", como mostram as imagens a seguir:

   Importando a Workplace do Insomnia
   
   
   Selecione o arquivo BTH_Insomnia_Workplace.json

---

Frontend (Web)

1. Vá até a pasta frontend do repositório:

   $ cd frontend

2. Instale as dependências:

   $ npm install

3. Execute a aplicação web:

   $ npm start

• Acesse a aplicação pela rota localhost:3000.

---

Mobile

1. Vá até a pasta mobile do repositório:

   $ cd mobile

2. Instale as dependências:

   $ npm install

   Verifique se o Expo foi instalado normalmente, executando expo -h. Caso retorne algum erro:

   • Instale o Expo na pasta raiz de forma GLOBAL

     $ npm install -g expo-cli

3. Execute a aplicação mobile:

   $ npm start

• Para executar a aplicação mobile, você pode instalar o aplicativo Expo disponível na Google Play e App Store. Este aplicativo permite que você visualize a API em seu próprio celular.

• Antes de executar: vá até o arquivo api.js acessando as pastas mobile / src / services / api.js, adicione seu endereço IP e salve o arquivo;

• Agora, verifique se o seu computador está conectado à mesma rede que o dispositivo móvel.

• Ao executar a API com npm start, aguarde o carregamento dos scripts. Será aberto uma interface do Expo em seu navegador com o título: "Be The Hero on Expo Developer Tools". Aqui é possível visualizar o status de Metro Builder, configurações de conexão e outras opções como:

  • Run on Android device/emulator
  • Run on iOS simulator
  • Run in web browser
  • Send link with email…
  • Publish or republish project…

• Após o Expo estar instalado em seu celular, abra-o, escaneie o QR Code e a API será executada.

• Caso queira executar a API pelo computador, instale algum emulador Android/iOS.

---

Executando testes

Para a realização dos testes da aplicação, foi utilizado o pacote Celebrate, que realiza uma integração do Express com a Joi, a mais poderosa biblioteca de validação de dados do JavaScript.

A principal ferramenta utilizada foi o Jest - um framework de testes do JavaScript. Também foram utilizados o Cross-Env e SuperTest.

Você pode executar o teste da aplicação digitando no terminal: npm test

💡 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.

---

©2020 - Matheus Ribeiro