REST, Persistência Remota, OAuth2 e Modelo Offline First no React Native

Prévia do material em texto

Resumo – REST, Persistência Remota, 
OAuth2 e Modelo Offline First no React 
Native
O conteúdo aborda como realizar:
• conexões remotas; 
• persistência de dados; 
• autenticação; 
• consumo de APIs REST; 
• funcionamento offline em aplicativos React Native. 
Esses recursos são fundamentais para aplicações modernas que utilizam serviços externos e 
sincronização de dados.
1. Arquitetura REST
A arquitetura REST utiliza o modelo:
• Cliente ↔ Servidor. 
Funcionamento
Cliente
Responsável por:
• enviar requisições; 
• consumir recursos; 
• exibir informações. 
Servidor
Responsável por:
• processar requisições; 
• persistir dados; 
• devolver respostas. 
As comunicações utilizam:
• HTTP; 
• JSON; 
• URLs de recursos. 
2. JSON
O formato padrão utilizado em APIs REST é o JSON.
Exemplo:
{
 "nome":"Alexandre"
}
O JSON utiliza:
• chave; 
• valor. 
É usado tanto:
• nas requisições; 
• quanto nas respostas. 
3. Persistência Remota com React Native
O React Native pode consumir APIs REST utilizando:
• Fetch API; 
• Axios. 
Axios
Biblioteca muito utilizada para:
• requisições HTTP; 
• persistência remota; 
• comunicação com APIs. 
Instalação:
npm install axios
4. Requisições HTTP
Os principais métodos HTTP são:
Método Função
GET Buscar dados
POST Inserir dados
PUT Atualizar dados
DELETE Remover dados
5. Método POST
O método POST é utilizado para:
• criar recursos; 
• enviar dados ao servidor. 
Exemplo:
axios.post('url', dados)
Os dados normalmente são enviados em:
• JSON. 
6. Tratamento de Respostas
As respostas das requisições podem ser tratadas com:
then()
Executado em caso de sucesso.
catch()
Executado em caso de erro.
Exemplo:
.then(function(response){
 console.log(response.data);
})
.catch(function(error){
 console.log(error);
})
7. Controle de Loading
Durante requisições remotas é importante informar ao usuário que a operação está em andamento.
Foi utilizado:
• isLoading. 
Fluxo:
• true → requisição iniciada; 
• false → requisição finalizada. 
Isso melhora:
• experiência do usuário; 
• feedback visual; 
• usabilidade. 
8. Autenticação com Bearer Token
Muitas APIs exigem autenticação.
Um modelo comum é:
• Bearer Token. 
O token é enviado no cabeçalho HTTP:
headers:{
 Authorization:`Bearer ${token}`
}
9. Método PUT
O método PUT é utilizado para:
• atualizar recursos existentes. 
Exemplo:
axios.put('url/id', dados)
Características:
• atualização de dados; 
• uso de path variables; 
• persistência remota autenticada. 
10. OAuth2
OAuth2 é um framework de autorização utilizado para:
• controle de acesso; 
• autenticação segura; 
• consumo protegido de APIs. 
11. Papéis do OAuth2
Proprietário do Recurso
Dono dos dados.
Cliente
Aplicativo React Native.
Servidor de Recurso
Servidor da API.
Servidor de Autorização
Responsável por gerar tokens.
12. Vantagens do OAuth2
• maior segurança; 
• uso de tokens temporários; 
• evita compartilhamento de senha; 
• controle de acesso refinado. 
13. Fluxos do OAuth2
Authorization Code
Usa servidor intermediário de autorização.
Implicit
Fluxo simplificado para navegadores.
Password Credentials
Utiliza usuário e senha.
Client Credentials
Autenticação baseada no próprio cliente.
14. Bibliotecas e Plataformas de Autenticação
Google Firebase Authentication
Serviço do Google para autenticação.
Auth0
Plataforma de autenticação e autorização.
Keycloak
Solução open source para identidade e acesso.
react-native-app-auth
Biblioteca para integração OAuth2 no React Native.
15. Modelo Offline First
O modelo Offline First permite que aplicativos funcionem:
• online; 
• offline. 
Mesmo sem internet, o aplicativo continua operando localmente.
16. Funcionamento do Offline First
Verificação de conexão
O aplicativo monitora acesso à internet.
Banco embarcado
Dados são armazenados localmente.
Sincronização
Quando a internet retorna:
• dados locais são sincronizados; 
• dados remotos são atualizados. 
17. Bancos Utilizados no Offline First
Principais opções:
• AsyncStorage; 
• SQLite; 
• Realm; 
• Firebase; 
• WatermelonDB; 
• PouchDB. 
18. Realm Database
Banco orientado a objetos muito usado no React Native.
Vantagens
• alta performance; 
• sincronização; 
• persistência local; 
• facilidade de uso. 
O Realm utiliza:
• schemas; 
• objetos; 
• coleções. 
19. Gerenciamento de Estado
O modelo Offline First geralmente utiliza:
• Redux; 
• Context API. 
Benefícios:
• centralização de dados; 
• sincronização facilitada; 
• compartilhamento global de estados. 
20. Bibliotecas Offline
react-native-offline
Monitora conectividade.
redux-offline
Gerencia persistência e sincronização automática.
Fluxos:
• effect; 
• commit; 
• rollback. 
21. Interface Otimista
A interface otimista melhora experiência do usuário.
Funcionamento:
• a interface mostra sucesso imediatamente; 
• sincronização real ocorre depois. 
Exemplo:
• curtidas no Instagram mesmo offline. 
22. Cuidados no Offline First
Multiusuários
É necessário identificar corretamente cada usuário.
Consistência
Os dados locais e remotos precisam permanecer sincronizados.
APIs Remotas
Mudanças na API exigem atualização do modelo local.
23. Conclusão
O React Native oferece recursos para:
• consumo de APIs REST; 
• persistência remota; 
• autenticação; 
• funcionamento offline. 
Tecnologias como:
• Axios; 
• OAuth2; 
• Realm; 
• Redux Offline; 
permitem criar aplicações modernas, seguras e resilientes.
Exercícios de Fixação
1. A arquitetura REST utiliza principalmente o modelo:
a) Cliente ↔ Servidor
b) Peer-to-Peer
c) Monolítico
d) Mainframe
2. O formato padrão utilizado em APIs REST é:
a) CSV
b) TXT
c) JSON
d) XML puro obrigatório
3. A biblioteca muito utilizada para requisições HTTP no 
React Native é:
a) Realm
b) Axios
c) Redux
d) Metro
4. O método HTTP usado para criar recursos é:
a) GET
b) DELETE
c) PUT
d) POST
5. O bloco utilizado para tratar erros em requisições é:
a) then()
b) catch()
c) finally()
d) switch()
6. O Bearer Token é utilizado para:
a) estilização de telas
b) autenticação e autorização
c) criação de animações
d) renderização de listas
7. O método PUT é normalmente utilizado para:
a) buscar dados
b) remover dados
c) atualizar recursos
d) criar animações
8. O OAuth2 é:
a) banco de dados mobile
b) framework de autorização
c) linguagem de programação
d) biblioteca de animações
9. O modelo Offline First permite que:
a) o aplicativo funcione apenas online
b) o aplicativo funcione online e offline
c) o banco de dados seja removido
d) o React Native substitua APIs REST
10. A interface otimista tem como objetivo:
a) reduzir memória RAM
b) impedir sincronização
c) melhorar experiência do usuário com respostas rápidas
d) substituir autenticação OAuth2
Gabarito
1. a 
2. c 
3. b 
4. d 
5. b 
6. b 
7. c 
8. b 
9. b 
10.c