Projeto construido durante a Next Level Week #01

🍃 O Projeto foi desenvolvido durante a semana internacional do Meio Ambiente, Ecoleta serve para conectar empresa ou entidades que coletam resíduos orgânicos ou inorgânicos as pessoas que precisam descarta esses reśiduos.

• Ambiente de desenvolvimento
  • Node.js & NPM
  • VScode

Back-End

• Exlicando Conceitos

• Rotas e recursos

  // Rotas: Endereço completo da requisição
  // Recursos: Qual entidade estamos acessando no sistema
  

• Métodos HTTP

  // GET: Buscar uma ou mais informação do back-end
  // POST: Criar uma nova informação no back-end
  // PUT: Atualizar uma informação existente no bsck-end
  // DELETE: Remove uma informação do back-end
  

• Tipos de parâmetros

  // Recursos Param: Parâmetros que vem na prôpria rota que identificam um recurso
  // Query Param: Parâmetros que vem na prôpria rota  geralmente opcionais para filtros e paginação
  // Request Body: Parâmetros para criação/atualização de  informações
  

• Qual banco de dados vamos utilizar?

  • KNEX.JS

    Knex.js - A SQL Query Builder for Javascript

    Execute esses dois comandos abaixo para criar seu banco
    
    // knex:migrate
    // knex:seed

• Identificando entidades da nossa aplicação

  • point (Pontos de coletas)
    • image
    • name
    • email
    • whatsapp
    • latitude
    • longitude
    • city
    • uf
  • items (Relacionamentos dos itens que um ponto coleta)
    • point_id
    • item_id

• Funcionalidades da aplicação

  • Cadastro do ponto de coleta
  • Lista do itens de coleta
  • Listar pontos(filtros por estado/cidade/items)
  • Listar um ponto de coleta especifico

• Adicionado CORS

Front-End

• Explicando conceitos

  • JSX

    Quando o código HTML é integrado dentro do JavaScript.

  • Components (Header)

    Um componente no React é basicamente uma função que retorna HTML,
     podendo retorna funcionalidade JavaScript e CSS.

  • Propriedades

    São atributos repassados de um componente pai para o filho.

  • Estado e imutabilidades

    Trata-se de uma informação a ser mantida pelo componente. 
    Toda vez que o estado é alterado, o componente faz a renderização 
    novamente exibindo as novas informações em tela.

Aplicação Ecoleta

• Home

• Cadastro

• Mapa & itens

• Buscando dados de cidades do IBGE

  API de localidades

  1º API - Estados: https://servicodados.ibge.gov.br/api/v1/localidades/estados
  2º API - Municiopios: https://servicodados.ibge.gov.br/api/v1/localidades/estados/{UF}/municipios

  • Cadastro de pontos de coletas da API

Mobile

Expo

Introduction to Expo

• Com as ferramentas, serviços e React da Expo, você pode criar, implantar e iterar rapidamente em aplicativos nativos do Android, iOS e da web a partir da mesma base de código JavaScript.

• Instalar Expo

  // Instalar o expo de formar global na sua maquina.
  // "npm install expo-cli"

• Criar projeto com Expo

  //  expo init (nome do prjeto)

• Diferenças de React Native para ReactJS

  • Elementos

    // REACT NATIVE
    <View>
    	<Text>Heelo World</Text>
    </View>
    
    // REACTJS
    
    <div>
    	<h1>Hello World</h1>
    </div>

  • Estilização

    import React from 'react';
    import { StyleSheet, Text, View } from 'react-native';
    
    export default function App() {
      return (
        <View style={styles.container}>
          <Text>Hello World!</Text>
        </View>
      );
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
      },
    });