Proffy

Proffy é uma plataforma online para conectar alunos com professores para ter aulas online.

Tecnologias Utilizadas

• TypeScript
• Visual Studio Code
• NodeJS
• ReactJS
• React Native

Front-end com React js

React é uma biblioteca de construção de interface que visa a construção de SPA para melhorara a experiencia do usuário final.

Single Page Applications (SPA)

• são aplicações cuja funcionalidade está concentrada em uma única página. Ao invés de recarregar toda a página ou redirecionar o usuário para uma página nova, apenas o conteúdo principal é atualizado de forma assíncrona, mantendo toda a estrutura da página estática.

• Explicando Conceitos

  • JSX

  (HTML dentro do JavaScript)

  • Componentes

    • são formas de a gente isolar pequenos trechos de códigos a fim de torná-los repetitivos dentro da aplicação.

  • Propriedades

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

  • Estado

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

Criando Projeto

$ yarn create reacct-app (project-name) --template typescript

$ npx create-react-app (project-name) --template typescript

Back-end com Nodejs

O back-end é responsável por cálculos, lógica de negócio, interações de database e performance. Ele conversa e dá suporte para os serviços de front-end.

• Particularidade da API REST

  Retorna apenas o dados da lista de Usuários do Back-end

Criando Projeto

# yarn init -y || npm init -y 

# instalar typescript: yarn add typescript -D

# Criar o arquivo de configuração do TS: yarn tsc --init || npx tsc --init

• Configuração do ambiente

# instalar a lib ts-node-dev: yarn add ts-node-dev -D

## No arquivo Package.json iremos criar um scripts chamado start adicionar os seguites comandos
 "scripts": {
  "start": "tsnd --transpile-only --ignore-watch node_modules --respawn src/server.ts", 
  }

• flag transpile-only: não irá verificar se tem erros no código, isso vai acelerar o processo de execução da não aplicação.

• ignore-watch node_modules: para não tentar realizar conversões de código de TS/JS dentro da pasta node_modules.

• respawn: toda vez que tivemos uma alteração no código a aplicação restart automaticamente.

• Explicando Conceitos

  • Rotas e Recursos

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

  • Métodos HTTP

    • GET: Buscar ou listar uma informação
    • POST: Criar alguma nova informação
    • PUT: Atualizar uma informação existente
    • DELETE: Deletar uma informação existente

  • Parâmetros

    • Corpo (Request Body): Dados para criação ou atualização de um registro.
    • Route Params: Identificar qual recurso eu quero atualizar ou deleta.
    • Query Params: Paginação, filtros, ordenação.

• Identificando os casos de uso

  • Aulas

    • Rota para criar uma aula;
    • Rota para listar aulas;
    • Filtrar por matéria, dia da semana e horário;

  • Conexões

    • Rota para listar o total de conexões realizadas;
    • Rota para criar uma nova conexão;

Configurando Conexão com o banco de dados.

• BANCO SQLITE3

  • npm install sqlite3

• Query Builder KNEXJS

  • npm install knex --save

• Knex Documentação Documentação Knex.js

  Criar as Migrations:

  No arquivo package.json nos scripts adicione esse comando

• "knex:migrate": "knex --knexfile knexfile.ts migrate:latest",

• Obs: Caso seu banco de dados apresente algum erro é recomendado deleta o banco corrija o erro e execute o comando knex:migrate novamente.

Mobile com React Native

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 (project name)

Execute projeto

• yarn start ou expo start

• Diferenças de React Native para ReactJS

  • Elementos

  

• Estilização

Aplicação Mobile