1.
Workshop fullstack
React & Adonis.JS
Velrino feat. Tadeu

2.
O que é Full Stack ?

3.
Conjunto de soluções
Características:
- Back-end
- Front-end
- DevOps
O que é Full Stack ?

4.
O que é Full Stack ?

5.
O que é Back-end ?

6.
Camada do servidor
Características:
- Comunicação com banco de dados
- Regras de negócios
- Rotinas
O que é Back-End ?

7.
O que é Adonis.JS ?

8.
O que é Adonis.JS ?
Framework full-stack
Fortes referências ao Laravel
Construído em Node.JS
Padrão recomendado pela documentação MVC
ES6
Mais informações:
https://adonisjs.com/docs/4.1/about

9.
Preparando Ambiente

10.
Preparando ambiente
Instalando o Adonis.JS
npm i -g @adonisjs/cli
Criar um novo projeto do tipo API
adonis new api --api-only
Acesse o diretório do novo projeto
cd api
Iniciando o projeto
adonis serve --dev

11.
Preparando ambiente
Acesse no navegador
http://127.0.0.1:3333/

12.
Estrutura

13.
Estrutura - App
App - todas responsabilidades da aplicação
Middleware - todas funções
intermediárias a aplicação
Models - todas modelagens
da aplicação

14.
Estrutura - App
Outras camadas no App
Controllers - responsável pela lógica da aplicação
Entities - responsável pelo tratamento de dados e
parâmetros das entidades
Presenters - responsável em fazer comunicação interna
com externa
Repositories - responsável pelas queries ao banco de
dados
Services - responsável pela comunicação com serviços
externos

15.
Estrutura - Config
Config - todas responsabilidades de configuração do projeto
auth - parâmetros de
autenticação
app - parâmetros como
arquivos temporários,
cookie, cache
bodyParser - parâmetros de
requisição e resposta da API
cors - parâmetros dos
recursos sejam acessados
por uma página web de um
domínio diferente.
database - parâmetros das
conexões com banco de
dados
hash - parâmetros das
criptografias no projeto

16.
Estrutura - Database
Database - todas responsabilidades de estruturação e dados para o banco de dados
migrations - toda estrutura
do banco de dados
factory - geração dos dados
seeds - todos dados iniciais
do banco de dados
Mais na documentação
https://adonisjs.com/docs/4.1/database

17.
Estrutura - Start
Start - todas responsabilidades iniciais do projeto
app - todos provedores de
serviços do projeto
routes - todas rotas do projeto
kernel - todos middlewares
do projeto
Mais na documentação
https://adonisjs.com/docs/4.1/database

18.
Estrutura - Raiz
Raiz - raiz do projeto
.env - todas variáveis de
ambiente
package.json - todos
pacotes do projeto e
instruções do node no
projeto
server.js - arquivo inicial do projeto

19.
Criando o banco de dados

20.
Criando o banco de dados
Instalando o pacote do SQLite3
npm install --save sqlite3

21.
Criar a migration/tabela de empresas
adonis make:migration companies
Criar a migration/tabela dos estabelecimentos
adonis make:migration places
Criando o banco de dados - migrations

22.
Criando o banco de dados - migrations

23.
Rodar as migrations
adonis migration:run
Criando o banco de dados - migrations

24.
Criando a service

25.
Criando service
Instalando Google Maps
npm i --save @google/maps
Crie a pasta Services
Crie o arquivo Maps.js
Coloque a key do Google Maps no .env

26.
Criando o controller

27.
Criando controller
Instalando Google Maps
npm i --save @google/maps
Criando o controller
adonis make:controller Places --type http

28.
Criando o controller - create
válida maps
captura parâmetros do maps
cria no DB
usa o service
captura os parâmetros
retorna criação do DB
importa modelagem do place
importa service do maps
mensagem para caso de erro
usa parâmetro address

29.
Criando a rota

30.
Criando rota - create
caminho controller e função
arquivo

31.
TESTANDOOOOO!

32.
Testando - create
Body -> RAW -> JSON
Retorno da API

33.
Listar todos os estabelecimentos

34.
Controller - get
query com paginação

35.
Rota - get
caminho controller e função

36.
Testando - get
Request
Response

37.
Atualizando o estabelecimento

38.
Controller - put

39.
Route - put
caminho controller e função

40.
Testando - put
Request
Response

41.
Melhorando o atualizando
estabelecimento

42.
Controller - put

43.
Testando positivo - put

44.
Testando negativo - put

45.
Deletando o estabelecimento

46.
Controller - delete

47.
Rota - delete

48.
Testando positivo - delete

49.
Testando negativo - delete

50.
Dev front-end pediu para alterar o
formato de endereço

51.
Alterando o banco de dados

52.
Alterar a tabela dos estabelecimentos
adonis make:migration places
Escolhe sabiamente a opção select table
Alterando o banco de dados - migrations

53.
Alterando o banco de dados - migrations

54.
Atualizar as migrations
adonis migration:refresh
Alterando o banco de dados - migrations

55.
Testando o create

56.
Testando o create

57.
Adicionando validação

58.
Adicionar o validator
adonis install @adonisjs/validator
Adicionar no providers do start/app.js
'@adonisjs/validator/providers/ValidatorProvider
'
Alterando o banco de dados - migrations
Referência
https://adonisjs.com/docs/4.1/validator

59.
Atualizar as migrations
adonis migration:refresh
Alterando o banco de dados - migrations

60.
Corrigindo o create

61.
Corrigindo o create

62.
Testando o create

63.
Testando o create

64.
Corrigindo o update

65.
Corrigindo o update

66.
Testando o update

67.
CORS

68.
Adicionar o validator
adonis install @adonisjs/cors
Adicionar no providers do start/app.js
'@adonisjs/cors/providers/CorsProvider'
Adicionar no providers do start/kernel.js
'Adonis/Middleware/Cors'
CORS
Referência
https://adonisjs.com/docs/4.1/cors

69.
@velrino
Denis “Velrino” Magalhães

70.
O que é Front-end ?

71.
Interface gráfica disponível para o usuário
Características:
- Interação simples e direta
- HTML, CSS e frameworks
- Experiência do usuário
O que é Front-End ?

72.
O que é React e React Native ?

73.
- É “uma biblioteca JavaScript declarativa,
eficiente e flexível para a criação de
interfaces de usuário (UI)”.
- Single Page Application (SPA)
- React é flexível, tudo é componente
- Sintaxe com JSX (Escrita muito semelhante
ao HTML)
- Interface totalmente reativa perante as
informações na tela
O que é React ?

74.
- É um framework para o desenvolvimento
de aplicativos mobile nativos que utiliza o
React na sua construção
- Criado pelo Facebook com código aberto
- Único código Javascript
- Faz build para Android e IOS
E o React Native ?

75.
React Native X outras tecnologias

76.
O que é Expo e para que ele serve ?

77.
- É uma ferramenta que abstrai o código
nativo tanto Android e IOS do seu
aplicativo
- Somente código Javascript
- É possível apenas instalar bibliotecas que
não precisam de código nativo
- Faz build para Android e IOS no servidor
O que é Expo ?

78.
Como será o aplicativo que vamos
desenvolver ?

79.
- O aplicativo será feito utilizando React
Native e Expo
- Nela será possível cadastrar
estabelecimentos de empresas em
diferentes locais no mapa
- React Hooks
- Consumo de API REST com Axios
- Requisições GET, POST E PUT
- Google Maps API
- Styled Components
- React Native 0.59.8
- Expo SDK v35.0.0
Descrição do aplicativo

80.
O que são React Hooks ?

81.
- É uma forma de escrever componentes
React em forma de funções que possuem
estado
- Permitem ao desenvolvedor controlar o
state de uma forma mais simples, mais
rápida e mais intuitiva
- Hooks básicos
- UseState
- UseEffect
- UseContext
O que são React Hooks ?

82.
Preparando ambiente
Instalando o Expo CLI
npm i -g expo-cli
ou
yarn global add expo-cli
Criar um novo projeto React Native com Expo
expo init PlacesAppTeste
Acesse o diretório do novo projeto
cd PlacesAppTeste
Iniciando o projeto
yarn start
ou
npm start
expo start

83.
Preparando ambiente
Acesse no navegador
http://localhost:19002/

84.
Apresentando projeto padrão em Expo

85.
Instalando dependências
necessárias
Instalando o Expo CLI
npm i -g expo-cli
ou
yarn global add expo-cli
Criar um novo projeto React Native com Expo
expo init PlacesAppTeste
Acesse o diretório do novo projeto
cd PlacesAppTeste
Iniciando o projeto
yarn start
ou
npm start
expo start

86.
Link para download do projeto inicial
com a estrutura pronta
https://bit.ly/2nriaAh

87.
Instalando dependências
necessárias para o projeto
Bibliotecas necessárias externas do Expo
yarn add axios
yarn add react-hook-form
yarn add styled-components
Bibliotecas necessárias do Expo
expo install expo-location
expo install expo-permissions
expo install react-native-maps

88.
@tadeumx1
Matheus Tadeu

89.
Agradecimentos