Semana OmniStack 11 🚀

🚀 Tecnologias

Este projeto foi desenvolvido com as seguintes tecnologias

• Node.js
• React
• React Native
• Expo

💻 Projeto

O Be The Hero é um projeto criado pela Rocketseat que visa conectar pessoas dispostas a ajudar ONGs.

📃 Como Usar

• Clone o repositório gt clone https://github.com/pablomagalhaes/bethehero

• Back-end

  • cd backend
  • npm install
  • npm start `

• Front-end

  • cd frontend
  • npm install
  • npm start `

• Mobile

  • cd mobile
  • npm install
  • npm start

📄 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

📄 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:

       "scripts": {
           "start": "nodemon src/index.js"
       }, 

• Dessa forma, basta utilizar npm start para iniciar o projeto.

5. npm install cors

💻 Front-End Web ✔️

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

☎️ Mobile ✔️

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

📄 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"

       development: { 
           client: 'sqlite3',
           connection: { 
              filename: './src/database/db.sqlite'
           },
       },

5. Adicionar Migrations dentro do arquivo knexfile.js

      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

    useNullAsDefault: true,

📄 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).

   const params = request.query

• Route Params: Parâmetros utilizados para identificar recursos.

   const params = request.params

• Request Body: Corpo da requisição, utilizado para criar ou alterar recursos.

    const body = request.body

Formatação de Moedas

• ReactJS:

      {Intl.NumberFormat('pt-BR', {
          style: 'currency', 
          currency: 'BRL'
      }).format(incident.value)}

  • React Native:

    • Dentro do App.js:

        import 'intl';
        import 'intl/locale-data/jsonp/pt-BR';

    • No arquivo onde será formatado o valor:

        {Intl.NumberFormat('pt-BR', {
            style: 'currency', 
            currency: 'BRL'
        }).format(incident.value)}

♻️ 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

🎓 Quem ministrou?

• As aulas foram ministradas pelo mestre Jedi Diego Fernandes.

📝 License

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