Workshop react + adonis.js Workshop react + adonis.js Workshop react + adonis.js Workshop react + adonis.js Workshop react + adonis.js

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