https://github.com/mathrb22/semanaomnistack11
Be the Hero - Aplicação desenvolvida durante a 11ª Semana OmniStack da @Rocketseat, com foco na linguagem JavaScript e as tecnologias Nodejs, React e React-Native.
https://github.com/mathrb22/semanaomnistack11
aplicativo backend bethehero frontend full-stack-application javascript mobile-app ngos node nodejs omnistack ongs react-native reactjs semana-omnistack semana-omnistack-11 single-page-app tdd ui web-application
Last synced: 4 months ago
JSON representation
Be the Hero - Aplicação desenvolvida durante a 11ª Semana OmniStack da @Rocketseat, com foco na linguagem JavaScript e as tecnologias Nodejs, React e React-Native.
- Host: GitHub
- URL: https://github.com/mathrb22/semanaomnistack11
- Owner: mathrb22
- License: mit
- Created: 2020-03-25T18:04:52.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-24T02:01:31.000Z (over 2 years ago)
- Last Synced: 2023-05-23T02:36:28.581Z (about 2 years ago)
- Topics: aplicativo, backend, bethehero, frontend, full-stack-application, javascript, mobile-app, ngos, node, nodejs, omnistack, ongs, react-native, reactjs, semana-omnistack, semana-omnistack-11, single-page-app, tdd, ui, web-application
- Language: JavaScript
- Homepage:
- Size: 41.4 MB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Be the Hero - Semana OmniStack 11
.jpg)
[**Sobre**](#-sobre) **|**
[**Tecnologias utilizadas**](#-tecnologias-utilizadas) **|**
[**Layout**](#-layout) **|**
[**Instalação e execução**](#-instalação-e-execução) **|**
[**Como contribuir**](#-como-contribuir) **|**
[**Contato**](#-contato) **|**
[**Licença**](#-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.
.jpg)
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.
.jpg)
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.
.jpg)
> 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**](https://code.visualstudio.com/): um editor de código-fonte desenvolvido pela Microsoft para Windows, Linux e macOS, recomendado para o desenvolvimento de aplicações web;
- [**Node.js**](https://nodejs.org/en/): um interpretador de JavaScript assíncrono com código aberto orientado a eventos;
- [**React**](https://reactjs.org): 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**](https://facebook.github.io/react-native/): uma biblioteca Javascript criada pelo Facebook. É usada para desenvolver aplicativos para os sistemas Android e IOS de forma nativa;
- [**Expo**](https://expo.io/): 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**](https://insomnia.rest/): 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**](https://expressjs.com/pt-br/): um popular framework web estruturado, escrito em JavaScript que roda sobre o ambiente node.js em tempo de execução;
- [**Knex**](http://knexjs.org/): um query builder em JavaScript para bancos de dados relacionais, como PostgreSQL, MySQL, SQLite3, e Oracle;
- [**SQLite3**](https://www.sqlite.org/version3.html): 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**](https://github.com/Rocketseat/) através da ferramenta online [**Figma**](https://www.figma.com), 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**](https://www.figma.com/file/2C2yvw7jsCOGmaNUDftX9n/Be-The-Hero---OmniStack-11?node-id=0%3A1).
> **OBS:** O layout deste repositório contém diversas modificações feitas por mim mesmo durante o desenvolvimento da interface gráfica.
.jpg)
Página de Login
.jpg)
Página de cadastro de ONGs
.jpg)
Página de perfil da ONG
.jpg)
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**](https://git-scm.com/) e o [**Node.js**](https://nodejs.org/en/).
Em seguida, no terminal execute os seguintes comandos segundo as instruções:
### Backend
1. Clone este repositório:
```bash
$ git clone https://github.com/mathrb22/SemanaOmnistack11.git
```
2. Vá até a pasta backend do repositório:
```bash
$ cd backend
```
3. Instale as dependências do projeto:
```bash
$ npm install
```
4. Execute as migrations (banco de dados):
```bash
$ npx knex migrate:latest
```
5. Execute o servidor:
```bash
$ 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:
```bash
$ cd frontend
```
2. Instale as dependências:
```bash
$ npm install
```
3. Execute a aplicação web:
```bash
$ npm start
```
- Acesse a aplicação pela rota _**localhost:3000**_.
---
### Mobile
1. Vá até a pasta mobile do repositório:
```bash
$ cd mobile
```
2. Instale as dependências:
```bash
$ 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
```bash
$ npm install -g expo-cli
```
3. Execute a aplicação mobile:
```bash
$ npm start
```
- Para executar a aplicação mobile, você pode instalar o aplicativo **Expo** disponível na [**Google Play**](https://play.google.com/store/apps/details?id=host.exp.exponent) e [**App Store**](https://apps.apple.com/br/app/expo-client/id982107779). 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**](https://github.com/arb/celebrate), que realiza uma integração do Express com a [**Joi**](https://github.com/hapijs/joi), a mais poderosa biblioteca de validação de dados do JavaScript.
A principal ferramenta utilizada foi o [**Jest**](https://jestjs.io/) - um **framework de testes** do JavaScript. Também foram utilizados o [**Cross-Env**](https://www.npmjs.com/package/cross-env) e [**SuperTest**](https://www.npmjs.com/package/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