Ionic 4, React, GraphQL & Apollo: Consumindo API da SpaceX

Aprenda Integrar o React com Ionic, usar Tema, Cards, Modal, Rotas e Navegação, Grid, Menu e crie uma galeria de imagens

4.10 (38 reviews)
Udemy
platform
Português
language
Mobile Apps
category
instructor
258
students
8 hours
content
Nov 2019
last update
$19.99
regular price

What you will learn

Criar aplicações com Ionic 4

Criar uma galeria de imagens com recurso de Zoom via Swiper API

Usar os Hooks do React (useState, useEffect, useCallback, useRef)

Integrar o Ionic com React e Apollo Client

Consumir API's GraphQL

Gerar tipagem TypeScript baseado no Schema GraphQL com o GraphQL Code Generator

Modificar o tema do Ionic

Boas práticas

Componentização no React

Implementar Infinite Scroll com Apollo React Hooks

Trabalhar com Menus

Usar Grid para ajustar elementos de acordo com o tamanho da tela

Usar o SplitPane para usar melhor o espaço disponível na tela

Build de produção e deploy

Components de sobreposição

Description

O curso terá um total de 13 seções, as aulas já estão todas gravadas e sendo upadas gradativamente

O Ionic 4 já é um grande sucesso, é hoje um dos frameworks mais (se não o mais) usados para o desenvolvimento de Apps Híbridos para Android e iOS, Web, PWA's e até mesmo Desktop.

Trouxe como grande novidade nesta última versão a aposta nas tecnologias da Web ao se basear agora em Web Components, permitindo assim que desenvolvedores o utilizem para criar Apps não mais somente com o Angular, mas também usando Vue, React, qualquer outro framework Front-end, ou mesmo nenhum usando JavaScript puro!

Com grandes melhorias principalmente em relação à performance por conta de trazer o recurso de Lazy Loading dos Components por padrão, a V4 promete manter e ainda elevar o ótimo legado que as versões anteriores construíram.

Neste curso você vai aprender a desenvolver uma aplicação focada na Web usando Ionic 4 e sua integração oficial com o React, usar o Apollo React Hooks, consumir a API GraphQL da SpaceX (:o), trabalhar com os Hooks do React, Menus, Grid, Modais e muito mais!

Ao final do curso você terá conhecimento suficiente para construir seus próprios Apps com o Ionic e ainda usar boas práticas de projetos com o React.

Content

Introdução

Apresentação e boas vindas
Estrutura do curso
Como consultar o código fonte
Canais de interação

Ferramentas

Sobre a seção
VSCode, Extensões, Tema e Fonte
Node e NPM
Ionic CLI e Cordova CLI
Apollo e React Devtools
Git
Conclusão da seção

Primeiro App com Ionic e React

Sobre a seção
O que é o Ionic?
Gerando e servindo App com Ionic CLI
Estrutura do projeto
Ionic Lab e DevApp
Prettier e ESLint
Conclusão da seção

Integrando React com GraphQL

Sobre a seção
O que é o GraphQL?
Conhecendo API GraphQL da SpaceX
Conhecendo Apollo Boost e Apollo React Hooks
Instalando pacotes
Configurando Apollo Client via Context API
Enviando primeira Query GraphQL
GraphQL Code Generator: tipagem automática no TypeScript
GraphQL Code Generator: gerando React Apollo Hooks
GraphQL Code Generator: add e watch
Conclusão da seção

Tema, Cards e Components: Listando missões da SpaceX

Sobre a seção
Modificando tema no Ionic
IonCard para exibir Lançamentos
Criando presentational component LaunchesItem
LaunchesItem: reestruturando IonCard
LaunchesItem: estilizando com CSS Modules
Função crop para cortar textos por palavras
Criando Smart Component Launches
Conclusão da seção

Infinite Scroll com Apollo React Hooks

Sobre a seção
Limit e Offset, e passando variaveis para a Query GraphQL
Alterando Offset com IonButton, useState e useEffect
Apollo React Hooks fetchMore: paginando dados
Removendo botão ao carregar todos os registros
Extra: Exibindo fallback quando a foto não existe
Conclusão da seção

Rotas e Navegação com Ionic, React e Router DOM

Sobre a seção
Organizando rotas da aplicação em arquivo separado
Criando Mission page e configurando rota
Navegando com routerLink
Extraindo parâmetro da rota com useParams
Query GraphQL para buscar mais detalhes do Lançamento
Buscando detalhes do Lancamento com Apollo React Hooks
Criando presentational component LaunchDetail
Estilizando LaunchDetail com CSS Modules
Tratando fallback quando não existir imagens
Voltando à página anterior com IonBackButton
Melhorando nome dos Components e Páginas
Conclusão da seção

Criando uma galeria de imagens com Ionic

Sobre a seção
LaunchDetail: selecionando imagem para visualizar
Atualizando pacotes do Ionic
IonModal: exibindo imagem selecionada
ImageViewer: isolando Modal em um Component
ImageViewer: rodapé com IonFooter
ImageViewer: aplicando transparência com CSS
ImageViewer: aplicando Zoom com IonSlides e Swiper API
ImageViewer: aplicando e removendo Zoom via código
ImageViewer: centralizando imagem na tela
ImageViewer: tratando onDidDismiss no Modal
Conclusão da seção

Trabalhando com Menus

Sobre a seção
Criando Menus no Ionic
Toggle de Menus com IonMenuButton
Component para Menu e Content Projection no React
Links para as páginas do App no Menu
Conclusão da seção

Grid e Split Pane com Ionic

Sobre a seção
Introdução ao Grid do Ionic
Aplicando Grid na LaunchesPage
Aplicando Grid na LaunchPage
Layout multi view com IonSplitPane
Conclusão da seção

Exibindo loading e tratando erros

Sobre a seção
Exibindo IonLoading ao carregar dados
Tratando erros com Apollo Client
Extra: exibindo e formatando data dos lançamentos
Conclusão da seção

Deploy em produção

Sobre a seção
Ajustes finais na aplicação
Gerando build de produção
Zeit Now: Config e Secrets
Deploy no Now
Now alias e considerações sobre build
Extra: dica de build para Android, iOS, PWA & Electron
Conclusão da seção

Conclusão do curso

Conclusão do curso

Screenshots

Ionic 4, React, GraphQL & Apollo: Consumindo API da SpaceX - Screenshot_01Ionic 4, React, GraphQL & Apollo: Consumindo API da SpaceX - Screenshot_02Ionic 4, React, GraphQL & Apollo: Consumindo API da SpaceX - Screenshot_03Ionic 4, React, GraphQL & Apollo: Consumindo API da SpaceX - Screenshot_04

Reviews

Vinicius
July 8, 2020
Olha já comprei curso do Plinio e devolvi por ser muito básico, vida que segue, mas agora estou aqui novamente comprando e agora pra ficar, melhorou muito. Fica o elogio e obrigado. Att.
Iamar
April 2, 2020
Como todos os cursos do Plínio, muito bem feito, explicações completíssimas e recheado de ótimas dicas e exemplos !
Caio
January 1, 2020
Muito bom esse curso!!! Recomendo a todos que querem dar um up em conhecimento de tecnologias novas, GraphQLé maravilhoso.

Charts

Price

Ionic 4, React, GraphQL & Apollo: Consumindo API da SpaceX - Price chart

Rating

Ionic 4, React, GraphQL & Apollo: Consumindo API da SpaceX - Ratings chart

Enrollment distribution

Ionic 4, React, GraphQL & Apollo: Consumindo API da SpaceX - Distribution chart
2645702
udemy ID
11/8/2019
course created date
11/14/2019
course indexed date
Bot
course submited by