Baixado 15 vezes
Carregado porDenis Velrino
Workshop react + adonis.js
O documento aborda um workshop sobre desenvolvimento Full Stack utilizando React e Adonis.js, detalhando conceitos de back-end e front-end, estruturação de projetos, criação de banco de dados, validações e uso de APIs. Inclui passos práticos para instalação e configuração de ambientes de desenvolvimento, além de implementação de funcionalidades em uma aplicação React Native com Expo. O conteúdo é voltado para a construção de um aplicativo que permite o cadastro e gestão de estabelecimentos em um mapa.
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.
- 10. Preparando ambiente Instalando oAdonis.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 nonavegador http://127.0.0.1:3333/
- 12.
- 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 Outrascamadas 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 bancode dados
- 20. Criando o bancode dados Instalando o pacote do SQLite3 npm install --save sqlite3
- 21. Criar a migration/tabelade empresas adonis make:migration companies Criar a migration/tabela dos estabelecimentos adonis make:migration places Criando o banco de dados - migrations
- 22. Criando o bancode dados - migrations
- 23. Rodar as migrations adonismigration:run Criando o banco de dados - migrations
- 24.
- 25. Criando service Instalando GoogleMaps npm i --save @google/maps Crie a pasta Services Crie o arquivo Maps.js Coloque a key do Google Maps no .env
- 26.
- 27. Criando controller Instalando GoogleMaps 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.
- 30. Criando rota -create caminho controller e função arquivo
- 31.
- 32. Testando - create Body-> RAW -> JSON Retorno da API
- 33. Listar todos osestabelecimentos
- 34. Controller - get querycom paginação
- 35. Rota - get caminhocontroller e função
- 36.
- 37.
- 38.
- 39. Route - put caminhocontroller e função
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48. Testando positivo -delete
- 49. Testando negativo -delete
- 50. Dev front-end pediupara alterar o formato de endereço
- 51. Alterando o bancode dados
- 52. Alterar a tabelados estabelecimentos adonis make:migration places Escolhe sabiamente a opção select table Alterando o banco de dados - migrations
- 53. Alterando o bancode dados - migrations
- 54. Atualizar as migrations adonismigration:refresh Alterando o banco de dados - migrations
- 55.
- 56.
- 57.
- 58. Adicionar o validator adonisinstall @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 adonismigration:refresh Alterando o banco de dados - migrations
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68. Adicionar o validator adonisinstall @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.
- 70. O que éFront-end ?
- 71. Interface gráfica disponívelpara 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. - É “umabiblioteca 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. - É umframework 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 Xoutras tecnologias
- 76. O que éExpo e para que ele serve ?
- 77. - É umaferramenta 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á oaplicativo que vamos desenvolver ?
- 79. - O aplicativoserá 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ãoReact Hooks ?
- 81. - É umaforma 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 oExpo 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 nonavegador http://localhost:19002/
- 84. Apresentando projeto padrãoem Expo
- 85. Instalando dependências necessárias Instalando oExpo 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 downloaddo projeto inicial com a estrutura pronta https://bit.ly/2nriaAh
- 87. Instalando dependências necessárias parao 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.
- 89.