Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/vitorserrano/bethehero-omnistack11

🚀 Aplicação desenvolvida na semana OmniStack 11
https://github.com/vitorserrano/bethehero-omnistack11

expo nodejs react-native reactjs

Last synced: about 5 hours ago
JSON representation

🚀 Aplicação desenvolvida na semana OmniStack 11

Host: GitHub
URL: https://github.com/vitorserrano/bethehero-omnistack11
Owner: vitorserrano
License: mit
Created: 2020-03-28T14:33:51.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2023-01-11T02:22:35.000Z (almost 2 years ago)
Last Synced: 2023-03-03T13:07:05.134Z (over 1 year ago)
Topics: expo, nodejs, react-native, reactjs
Language: JavaScript
Homepage:
Size: 5.54 MB
Stars: 0
Watchers: 1
Forks: 1
Open Issues: 48
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

Semana OmniStack 11 :rocket:

## :rocket: Tecnologias
Este projeto foi desenvolvido com as seguintes tecnologias

- [Node.js](https://nodejs.org/en/)
- [React](https://reactjs.org)
- [React Native](https://facebook.github.io/react-native/)
- [Expo](https://expo.io/)

## :computer: Projeto
O Be The Hero é um projeto criado pela [Rocketseat](https://rocketseat.com.br/) que visa conectar pessoas dispostas a ajudar ONGs.

## :page_with_curl: Como Usar
- **Clone o repositório** `gt clone https://github.com/vitorserrano/bethehero-omnist`
- **Back-end**
- ```cd backend```
- ```npm install```
- ```npm start``` `

- **Front-end**
- ```cd frontend```
- ```npm install```
- ```npm start``` `

- **Mobile**
- ```cd mobile```
- ```npm install```
- ```npm start```

## :page_facing_up: Funcionalidades
- Login da ONG
- Logout da ONG
- Cadastro de ONG
- Cadastrar novos casos
- Deletar casos
- Listar casos específicos de uma ONG
- Listar todos os casos
- Entrar em contato com a ONG

## :page_facing_up: Back-End
1. ```npm init -y``` -> criar arquivos

2. ```npm install express```

3. ```npm install nodemon -D ``` (apenas para o desenvolvimento)

4. Dentro de ```package.json``` adicionar:
```javascript
"scripts": {
"start": "nodemon src/index.js"
},
```
- Dessa forma, basta utilizar ```npm start``` para iniciar o projeto.

5. ```npm install cors```

## :computer: Front-End Web :heavy_check_mark:

1. Iniciar projeto -> ```npx create-react-app frontend```

2. startar projeto -> ```npm start```

3. intalar pacote de icons -> ```npm install react-icons```

4. Rotas com ReactJS -> ```npm install react-router-dom```

5. Operações com a API -> ```npm install axios```

## :phone: Mobile :heavy_check_mark:

1. ```npm install @react-navigation/native``` - rotas

2. ```expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view```

3. ```npm install @react-navigation/stack```

4. ```expo install expo-constants```

5. ```expo install expo-mail-composer```

6. ```npm install axios = conexão com api```

7. ```npm install intl```

## :page_facing_up: Banco de Dados
O banco de dados utilizado na aplicação é o sqlite3, por isso é necessário aplicar o knex.

1. ```npm install knex```

2. ```npm install sqlite3```

3. ```npx knex init``` -> criar arquivo

4. Dentro do arquivo ```knexfile.js``` -> Alterar o "filename"
```javascript
development: {
client: 'sqlite3',
connection: {
filename: './src/database/db.sqlite'
},
},
```
5. Adicionar Migrations dentro do arquivo ```knexfile.js```
```javascript
development: {
client: 'sqlite3',
connection: {
filename: './src/database/db.sqlite'
},
migrations: {
directory: './src/database/migrations'
},
},
```
- **Criar migrations** -> ```npx knex migrate:make create_ongs```
- **Executar migrations** -> ```npx knex migrate:latest```

6. Adicionar useNullAsDefault dentro de ```development``` no arquivo ```knexfile.js```
```javascript
useNullAsDefault: true,
```

## :page_facing_up: Anotações
### Metodos HTTP:
- **GET**: Buscar/Listar uma informação do back-end
- **POST**: Criar uma informação no back-end
- **PUT**: Alterar uma informação no back-end
- **DELETE**: Deletar uma informação no back-end

### Tipos de Parâmetros
- Query Params: Parâmetros nomeados enviados na rota após "?" (Filtros, paginação).
```javascript
const params = request.query
```

- Route Params: Parâmetros utilizados para identificar recursos.
```javascript
const params = request.params
```

- Request Body: Corpo da requisição, utilizado para criar ou alterar recursos.
```javascript
const body = request.body
```

### Formatação de Moedas
- **ReactJS**:
```javascript
{Intl.NumberFormat('pt-BR', {
style: 'currency',
currency: 'BRL'
}).format(incident.value)}
```

- **React Native**:
- Dentro do App.js:
```javascript
import 'intl';
import 'intl/locale-data/jsonp/pt-BR';
```

- No arquivo onde será formatado o valor:
```javascript
{Intl.NumberFormat('pt-BR', {
style: 'currency',
currency: 'BRL'
}).format(incident.value)}
```

### :recycle: Como contribuir

- Faça um Fork desse repositório,
- Crie uma branch com a sua feature: `git checkout -b my-feature`
- Commit suas mudanças: `git commit -m 'feat: My new feature'`
- Push a sua branch: `git push origin my-feature`

### :mortar_board: Quem ministrou?

- As aulas foram ministradas pelo mestre Jedi [Diego Fernandes](https://github.com/diego3g).

## :memo: License

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