Workshop react + adonis.js

Workshop fullstack
React & Adonis.JS
Velrino feat. Tadeu

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

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

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

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

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

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

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

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

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

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

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

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

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

Rodar as migrations
adonis migration:run

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

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

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

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

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

Listar todos os estabelecimentos

Controller - get
query com paginação

Rota - get

Testando - get
Request
Response

Route - put

Testando - put
Request
Response

Melhorando o atualizando
estabelecimento

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

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

Atualizar as migrations
adonis migration:refresh

Adicionar o validator
adonis install @adonisjs/validator
Adicionar no providers do start/app.js
'@adonisjs/validator/providers/ValidatorProvider
'
Referência
https://adonisjs.com/docs/4.1/validator

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

@velrino
Denis “Velrino” Magalhães

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 ?

O que é React e React Native ?

- É “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 ?

- É 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 ?

React Native X outras tecnologias

O que é Expo e para que ele serve ?

- É 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 ?

Como será o aplicativo que vamos
desenvolver ?

- 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

- É 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 ?

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
cd PlacesAppTeste
Iniciando o projeto
yarn start
ou
npm start
expo start

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

Apresentando projeto padrão em Expo

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
cd PlacesAppTeste
Iniciando o projeto
yarn start
ou
npm start
expo start

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

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

Workshop react + adonis.js

Recomendados

Mais conteúdo relacionado

Mais procurados (20)

Semelhante a Workshop react + adonis.js (20)

Mais de Denis Velrino (6)

Workshop react + adonis.js