4 - Conexão Remota Com React Native
4 - Conexão Remota Com React Native
4 - Conexão Remota Com React Native
Descrição
Propósito
Preparação
Para acompanhamento do conteúdo e da codificação dos exemplos a serem apresentados ao longo deste
conteúdo, será necessária a utilização de uma IDE (Integrated Development Environment), sendo
recomendado o Visual Studio Code – software gratuito. Além disso, será preciso configurar o ambiente de
desenvolvimento e testes, onde diferentes configurações e ferramentas poderão ser usadas. Para mais
detalhes a respeito dessa etapa, o site oficial do React Native poderá ser consultado.
https://stecine.azureedge.net/repositorio/00212ti/02358/index.html#imprimir 1/40
20/01/2022 15:08 Conexão Remota com React Native
Objetivos
Módulo 1
Módulo 2
Módulo 3
Introdução
Um software, e consequentemente um aplicativo, é composto por diversas funcionalidades que, no que
tange à visão dos programadores, são representadas por códigos-fonte (dependendo do paradigma de
programação utilizado) separados em classes, métodos ou funções, cada um com a sua
responsabilidade.
https://stecine.azureedge.net/repositorio/00212ti/02358/index.html#imprimir 2/40
20/01/2022 15:08 Conexão Remota com React Native
No modelo cliente X servidor, temos os códigos responsáveis pela interação com o usuário (cliente ou
front-end) e os responsáveis pelo processamento, pelas regras de negócio, conexão com bancos de
dados etc. (o servidor ou back-end). Nesse sentido, podemos dizer que um aplicativo mobile, seguindo
as melhores práticas, pode conter tanto códigos de front-end quanto de back-end.
Neste conteúdo, serão discutidos tais aspectos no que tange à comunicação do aplicativo com recursos
externos e quanto a possuir em si a lógica que, normalmente, fica no back-end (modelo Offline First).
Inicialmente, serão listados os componentes da linguagem React Native para conexão em rede,
prosseguindo com a aplicação prática da persistência remota com controle de acesso, utilizando uma
API REST. Por fim, será apresentado o modelo Offline First.
Introdução
https://stecine.azureedge.net/repositorio/00212ti/02358/index.html#imprimir 3/40
20/01/2022 15:08 Conexão Remota com React Native
Antes de conhecermos alguns componentes para acesso a recursos em rede, é importante contextualizar os
tipos de recursos que, normalmente, são consumidos em um aplicativo/aplicação. Nesse sentido, e não
limitados a eles, podermos citar os seguintes exemplos, dentre outros:
Em cada um dos exemplos citados, nosso aplicativo, seguindo o mesmo modelo de uma página Web,
executará o fluxo composto por realizar uma requisição, seguido do recebimento, tratamento e, na maioria
das vezes, da exibição do seu retorno. Tais requisições poderão ser feitas a APIs ou WebServices (sejam eles
SOAP ou REST), ou, menos comum, diretamente a scripts escritos em linguagens de programação de back-
end e disponíveis por uma URL.
Fetch API
Como mencionado, a Fetch API é uma biblioteca disponível nativamente em React Native para o consumo de
recursos externos. O fragmento de código a seguir mostra a sintaxe de uma requisição simples a uma API
REST utilizando tal componente:
Javascript
content_copy
https://stecine.azureedge.net/repositorio/00212ti/02358/index.html#imprimir 4/40
20/01/2022 15:08 Conexão Remota com React Native
No exemplo, podemos ver a sintaxe da Fetch API ao recuperar os recursos de uma API Rest. Nesse caso, foi
utilizado o método HTTP GET e setado, a partir do objeto “response”, o método “json()”, informando o tipo de
dado a ser transferido. Em seguida, o retorno foi atribuído ao state data, utilizado como datasource do
componente FlatList.
Javascript
content_copy
1 fetch('https://api.com/endpoint/', {
2 method: 'POST',
3 headers: {
4 Accept: 'application/json',
5 'Content-Type': 'application/json'
6 },
7 body: JSON.stringify({
8 nome: 'Alexandre',
9 cpf: '000.000.000-00'
10 })
11 });
https://stecine.azureedge.net/repositorio/00212ti/02358/index.html#imprimir 5/40
20/01/2022 15:08 Conexão Remota com React Native
Biblioteca Axios
Além da Fetch API, há outras bibliotecas disponíveis em React Native para a conexão e utilização de recursos
remotos. Entre elas, destaca-se a Axios.
Antes de usarmos essa biblioteca, precisaremos realizar sua instalação. Para isso, execute o comando a
seguir (ou o equivalente com o seu gerenciador favorito de dependências):
report_problem
Atenção
Cabe ressaltar que a Axios e outras bibliotecas fazem uso da API nativa XMLHttpRequest.
Javascript
content_copy
https://stecine.azureedge.net/repositorio/00212ti/02358/index.html#imprimir 6/40
20/01/2022 15:08 Conexão Remota com React Native
Ao analisarmos o código, podemos perceber que, em linhas gerais, o funcionamento da biblioteca Axios é
semelhante ao da Fetch. Uma diferença a ser destacada é a “Response Schema” – repare que no caso de
sucesso é usado no método “setData” ou “response.data”. O objeto Response tem a seguinte estrutura:
Javascript
content_copy
1 {
2 // `data` contém a resposta proveniente do recurso externo / recurso acessado at
3 data: {},
4
5 // `status` contém o código do status HTTP referente à resposta recebida a parti
6 status: 200,
7
8 // `statusText` contém o texto do status HTTP referente à resposta recebida a pa
9 statusText: 'OK',
10
11 // `headers` contém o cabeçalho HTTP retornado a partir da requisição
12 headers: {},
13
14 // `config` contém os parâmetros passados através do Axios na requisição
Javascript
content_copy
1 axios.get('/user/12345')
https://stecine.azureedge.net/repositorio/00212ti/02358/index.html#imprimir 7/40
20/01/2022 15:08 Conexão Remota com React Native
2 .then(function (response) {
3 console.log(response.data);
4 console.log(response.status);
5 console.log(response.statusText);
6 console.log(response.headers);
Javascript
content_copy
wb_incandescent
Dica
Após executado o método, a resposta (“response”) poderá ser tratada conforme visto no método
GET.
Javascript
content_copy
https://stecine.azureedge.net/repositorio/00212ti/02358/index.html#imprimir 8/40
20/01/2022 15:08 Conexão Remota com React Native
Javascript
content_copy
Repare que no último fragmento de código, no lugar de importar diretamente a biblioteca Axios, é feita a
importação do componente declarado no código imediatamente anterior, ou seja, “axios_intancia.js”. Com
isso, a chamada ao recurso externo é feita por meio da instância denominada “instancia_axios” – à qual a
importação do “axios_instancia.js” foi atribuída.
https://stecine.azureedge.net/repositorio/00212ti/02358/index.html#imprimir 9/40
20/01/2022 15:08 Conexão Remota com React Native
video_library
Componente Fetch API para conexão com
recursos remotos
No vídeo a seguir, abordaremos as funcionalidades do componente Fetch API do React Native, incluindo
demonstração de GET E POST.
playlist_play
Vem que eu te explico!
Os vídeos a seguir abordam os assuntos mais relevantes do conteúdo que você acabou de estudar.
emoji_events
https://stecine.azureedge.net/repositorio/00212ti/02358/index.html#imprimir 10/40
20/01/2022 15:08 Conexão Remota com React Native
Questão 1
https://stecine.azureedge.net/repositorio/00212ti/02358/index.html#imprimir 11/40
20/01/2022 15:08 Conexão Remota com React Native
Embora a utilização de recursos externos por meio de uma conexão remota forneça
D mais funcionalidades a um aplicativo, em React Native há uma limitação que impede
que recursos do tipo SOAP sejam consumidos.
Responder
Questão 2
Marque a opção abaixo que corresponda aos componentes disponíveis em React Native para a conexão
remota:
B AJAX e Javascript.
E Http e Https.
https://stecine.azureedge.net/repositorio/00212ti/02358/index.html#imprimir 12/40
20/01/2022 15:08 Conexão Remota com React Native
Responder
https://stecine.azureedge.net/repositorio/00212ti/02358/index.html#imprimir 13/40
20/01/2022 15:08 Conexão Remota com React Native
Em termos mais técnicos, REST é uma arquitetura de software usada para a criação
de serviços web (WebServices) que permitem o acesso e a manipulação de recursos
(chamados recursos Web) identificados por suas URLs.
extension
Exemplo
GET http://localhost/usuarios
No exemplo, temos:
Ao analisar essa requisição, podemos entender que está sendo solicitada uma listagem de usuários. Veja
este novo exemplo:
extension
Exemplo
Aqui temos uma requisição hipotética, cuja função é demonstrar os componentes de uma requisição que
utiliza o verbo HTTP POST. Nesse caso, no lugar de recuperar informações (como realizado no primeiro
exemplo), é realizada a persistência de um dado. Vamos aos detalhes da requisição:
https://stecine.azureedge.net/repositorio/00212ti/02358/index.html#imprimir 14/40
20/01/2022 15:08 Conexão Remota com React Native
Recurso: usuários.
Dados (representados pela variável data e em formato de string JSON): {nome: alexandre}.
Nesse processo de requisição e resposta, temos, entre outros componentes, os verbos HTTP, o cabeçalho da
requisição e o formato de transmissão de dados. Em REST, utiliza-se, por padrão, o formato JSON. A string
{nome: alexandre} é um exemplo desse formato, composto por par (ou pares) de chave: valor. Logo, tanto a
requisição, quando envia dados do Cliente para o Servidor, como a resposta fazem uso dele.
Antes de continuarmos, cabe ressaltar que os códigos referentes ao lado Servidor, ou seja, os códigos da API
que receberá as nossas requisições, não serão apresentados, uma vez que tal assunto foge ao escopo de
nosso conteúdo. Entretanto, não se preocupe: serão demonstradas algumas bibliotecas para funções
específicas e que são disponibilizadas gratuitamente por seus fornecedores.
Componente para conexão remota: axios (lembre-se de adicioná-lo ao projeto – npm install axios).
Método HTTP: Post.
URL do recurso externo: https://reqbin.com/echo/post/json (recurso de teste que devolve como resposta
uma mensagem de sucesso).
https://stecine.azureedge.net/repositorio/00212ti/02358/index.html#imprimir 15/40
20/01/2022 15:08 Conexão Remota com React Native
Dados enviados: string JSON contendo as chaves Id, Customer, Quantity e Price.
Javascript
content_copy
A resposta da requisição está disponível na primeira instrução “.then”, por meio do objeto “response”.
Mediante essa instrução, e da instrução “catch”, tratamos o retorno da requisição realizada, tanto em termos
de sucesso quanto em termos de erro.
report_problem
Atenção
Tratar os possíveis erros de uma requisição é fundamental para fornecer a melhor experiência
possível ao usuário. Do contrário, e caso aconteça um erro sem que o tratemos, o usuário ficará
com a sensação de que a requisição não foi realizada ou que está demorando muito, podendo,
inclusive, desistir de utilizar o APP em virtude desses fatores. Outra prática importante é fornecer
um elemento visual que informe ao usuário que a requisição está sendo processada. Normalmente,
utilizamos a imagem conhecida como “loading” ou mesmo uma mensagem textual com tal
informação. Olhando o código, podemos controlar a exibição desse elemento por meio do state
“isLoading”, definido como “true” no momento que a requisição é iniciada e como “false” quando ela
é finalizada.
https://stecine.azureedge.net/repositorio/00212ti/02358/index.html#imprimir 16/40
20/01/2022 15:08 Conexão Remota com React Native
A API remota utilizada nesse exemplo retorna uma simples mensagem {success: true}. É comum termos
APIs que retornam um objeto mais complexo, como a representação de um novo recurso que tenha sido
persistido por meio de nossa requisição – um novo usuário, por exemplo. Em ambas as situações, podemos
tanto tratar o retorno apenas verificando, dentro do próprio componente utilizado para conexão o retorno,
como o utilizar para exibição em algum outro componente de nossa aplicação. No código, o retorno é
inserido dentro do state “data”, que é utilizado no componente . Com isso o retorno será exibido diretamente
na tela do aplicativo.
wb_incandescent
Dica
Para executar o código seguinte e realizar chamadas para API “gorest.co.in”, é necessário acessar o
site e criar, gratuitamente, um token de acesso. Após isso, substitua o token fictício constante no
código pelo seu token.
A constante “token” armazena o token fornecido pela API. Lembre-se de substituir seu valor pelo seu
próprio token antes de executar o código.
Na requisição do Axios, foi adicionado um novo parâmetro, “headers”, por meio do qual, entre outras
informações, podemos incluir o tipo de autenticação usado.
O retorno da API (mostrado logo depois do código), em caso de sucesso, consiste em uma nova instância
do recurso “usuário” que criamos por meio de nossa requisição, contendo os dados dele.
Javascript
content_copy
https://stecine.azureedge.net/repositorio/00212ti/02358/index.html#imprimir 17/40
20/01/2022 15:08 Conexão Remota com React Native
1
2 import
import React, { useEffect,
{ StyleSheet, Text, useState } from
View } from 'react';
'react-native';
3 import axios from 'axios';
4
5 export default function App() {
6 const [isLoading, setLoading] = useState(true);
7 const [data, setData] = useState();
8
9 useEffect(() => {
10 setLoading(true);
11
12 const token = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';
13 const dados = { 'name': 'Alexandre', 'gender': 'male', 'email': 'alexandre@e
14
Javascript
content_copy
1 {
2 ''meta'': null,
3 ''data'': {
4 ''id'': 2365,
5 ''name'': ''Alexandre'',
6 ''email'': ''alexandre@email.com.br'',
7 ''gender'': ''male'',
8 ''status'': ''active''
9 }
10 }
https://stecine.azureedge.net/repositorio/00212ti/02358/index.html#imprimir 18/40
20/01/2022 15:08 Conexão Remota com React Native
Javascript
content_copy
Javascript
content_copy
1 {
2 ''meta'': null,
3 ''data'': {
4 ''email'': ''alexandre@email.com.br'',
5 ''name'': ''Alexandre Paixão'',
6 ''gender'': ''male'',
7 ''status'': ''active'',
8 ''id'': 2365
9 }
https://stecine.azureedge.net/repositorio/00212ti/02358/index.html#imprimir 19/40
20/01/2022 15:08 Conexão Remota com React Native
10 }
verified
O dono/proprietário do recurso
https://stecine.azureedge.net/repositorio/00212ti/02358/index.html#imprimir 20/40
20/01/2022 15:08 Conexão Remota com React Native
contact_mail
O Cliente
attach_money
O Servidor de Recurso
fact_check
O Servidor de Autorização
No primeiro papel, temos o recurso que desejamos consumir. No segundo, Cliente, temos o nosso aplicativo.
Os papéis seguintes se destinam a controlar o acesso do Cliente ao Recurso.
Uma das grandes diferenças, e quiçá vantagem do modelo OAuth2, é permitir o acesso a recursos mediante
tokens, sem que seja necessário, por exemplo, utilizar credenciais como usuário e senha. Além disso, é
comum determinar um tempo de vida útil para cada token. Logo, o acesso aos recursos fica condicionado à
obtenção e contínua validação dele.
https://stecine.azureedge.net/repositorio/00212ti/02358/index.html#imprimir 21/40
20/01/2022 15:08 Conexão Remota com React Native
Nesse fluxo, o token de acesso é obtido a partir de um servidor de autorização, que age como
intermediário entre o cliente e o fornecedor do recurso. Logo, em vez de fornecer o token
diretamente ao cliente mediante solicitação, o fornecedor o redireciona para um servidor de
autorização, que, por sua vez, autentica tanto o fornecedor quanto o cliente, fornecendo a este
último o código de acesso / token.
Fluxo Implícito
Trata-se de uma simplificação do fluxo anterior, otimizado e implementado, normalmente, para rodar
em navegadores web. Nesse fluxo, ao interagir em uma página web, o cliente recebe diretamente um
token de acesso, sem que seja gerado nenhum código de autorização intermediário (e que,
posteriormente, precisaria ser usado para, então, obter o token).
Credenciais do Cliente
A especificação do OAuth2 define as Credenciais do Cliente como um fluxo que engloba quaisquer
outros fluxos de autenticação não definidos/explicitados anteriormente. Um exemplo de uso poderia
contemplar uma prévia definição, entre o Cliente e o Fornecedor, de quais recursos estariam
disponíveis, podendo ser acessados diretamente com credenciais do próprio Cliente.
Padrão AppAuth
A RFC6749, que contém as regras do Framework OAuth2, possui uma seção específica para tratar a interação
entre aplicativos mobile e servidores de autenticação. Em tal seção, a 9, estão previstas duas abordagens:
“embedded user-agent” e “external user-agent”. Além disso, mais recentemente, foi criada outra
especificação, a RFC8252 – Oauth 2.0 for Native Apps. Tal RFC apresenta uma série de recomendações
https://stecine.azureedge.net/repositorio/00212ti/02358/index.html#imprimir 22/40
20/01/2022 15:08 Conexão Remota com React Native
como sugestões a serem seguidas pelos desenvolvedores a fim de garantir a segurança e o controle de
acesso no consumo de recursos remotos. Logo, a leitura dessa especificação é fortemente recomendada.
Auth0 expand_more
Plataforma comercial, com plano gratuito, que fornece serviços de autenticação e autorização.
FusionAuth expand_more
Plataforma comercial, com plano gratuito, que fornece serviço de gerenciamento de acesso seguro.
Keycloak expand_more
Plataforma opensource (e também disponível de forma comercial, como serviço) que fornece serviço
de gerenciamento de acesso e identidade.
React-native-app-auth expand_more
https://stecine.azureedge.net/repositorio/00212ti/02358/index.html#imprimir 23/40
20/01/2022 15:08 Conexão Remota com React Native
video_library
Arquitetura REST com controle de acesso
no React Native
No vídeo a seguir, destacaremos os pontos relevantes da arquitetura REST, incluindo uma demonstração de
envio de dados para uma API REST.
playlist_play
Vem que eu te explico!
Os vídeos a seguir abordam os assuntos mais relevantes do conteúdo que você acabou de estudar.
https://stecine.azureedge.net/repositorio/00212ti/02358/index.html#imprimir 24/40
20/01/2022 15:08 Conexão Remota com React Native
emoji_events
Questão 1
Considerando o cenário em que uma conexão remota é estabelecida para a persistência de dados – o
cadastro de um novo produto –, assinale a alternativa abaixo que corresponda aos elementos que
deverão estar presentes na requisição:
https://stecine.azureedge.net/repositorio/00212ti/02358/index.html#imprimir 25/40
20/01/2022 15:08 Conexão Remota com React Native
Responder
Questão 2
Imagine o cenário em que uma requisição é realizada, a partir de um aplicativo mobile, para um recurso
remoto que exija a autenticação para acesso a seus serviços. Qual o retorno da requisição dentro do
aplicativo mobile caso o token ou as credenciais de acesso não sejam enviados na requisição ou
estejam errados?
Será exibido na tela um alerta informando que não foi possível se conectar com o
B
servidor remoto.
Por padrão, os componentes de conexão remota do React Native executam uma rotina
E preestabelecida em casos de erros de conexão remota que leva o usuário para a
página/tela principal do aplicativo, exibindo uma mensagem de erro padrão na tela.
Responder
assignment_ind
Comentário
Por mais que a infraestrutura de telecomunicações esteja avançando, e muito, ao longo dos anos,
ainda nos deparamos com situações em que ficamos com nossos dispositivos móveis “offline”.
Nesses casos, o que acontece com os aplicativos que temos instalados? Caso ainda não tenha
feito, faça um teste. Em sua maioria, os aplicativos param de funcionar.
Para contornar essa situação, existe um modelo denominado “Offline First”, cuja principal função é a de
permitir que um aplicativo que faça uso de recursos remotos funcione normalmente estando ou não
conectado à internet.
Ao longo deste módulo, o modelo Offline First será descrito, assim como as técnicas que nos permitirão
utilizá-lo em nosso processo de desenvolvimento.
Devemos ter em mente que cada aplicativo tem sua própria arquitetura, seus próprios requisitos e suas
https://stecine.azureedge.net/repositorio/00212ti/02358/index.html#imprimir 28/40
20/01/2022 15:08 Conexão Remota com React Native
funcionalidades.
arrow_forward
Nesse sentido, podemos ter aplicativos nos quais, por uma decisão estratégica, a arquitetura Offline
First não será aplicada.
Em outros casos, podemos ter uma implementação híbrida, ou seja, alguns recursos funcionariam seguindo
os princípios da arquitetura e outros não. E, por fim, podemos ter os aplicativos totalmente funcionais
independentemente de estarem ou não conectados.
No momento de planejamento do aplicativo, tenha em mente que há técnicas que podem ser utilizadas para a
criação seguindo a arquitetura em questão e que sua utilização não é obrigatória, tratando-se de uma
recomendação que traz alguns benefícios, mas que também gera preocupações e código extra.
Em caso negativo, o aplicativo deverá usar um banco de dados embarcado – que fica salvo e
disponível apenas no dispositivo de cada usuário – para armazenar os dados provenientes das
ações do usuário, assim como disponibilizar uma série de dados que serão necessários para o
seu funcionamento.
O aplicativo deve monitorar constantemente o status de conexão do dispositivo para que, tão logo
ele se encontre com acesso à internet, seja executado o processo de sincronização, no qual os
d d d b b d ã
https://stecine.azureedge.net/repositorio/00212ti/02358/index.html#imprimir
i i d b d d d / 29/40
20/01/2022 15:08 Conexão Remota com React Native
dados armazenados no banco embarcado serão sincronizados com o banco de dados/recurso
remoto.
Outro ponto importante nesse fluxo é incluir uma etapa de recuperação de dados
remotos e inserção no banco embarcado a fim de que esses dados fiquem
disponíveis localmente.
Tal processo deve ser executado no primeiro instante em que se verifique possuir conexão com o servidor
remoto e deve ser repetido de tempos em tempos – uma boa dica é executá-lo junto com o processo de
sincronização, que então envolverá não somente a sincronização dos dados locais no servidor remoto, mas
também a atualização dos dados locais com base nos externos.
A seguir, veremos algumas opções de componentes para a realização das tarefas citadas a fim de
estabelecer um ponto de partida para o desenvolvimento de um aplicativo que siga o modelo Offline First.
AsyncStorage;
https://stecine.azureedge.net/repositorio/00212ti/02358/index.html#imprimir 30/40
20/01/2022 15:08 Conexão Remota com React Native
SQLite;
Firebase;
Realm;
PouchDB;
Watermelon DB.
wb_incandescent
Dica
O exemplo seguinte apresenta o código correspondente a uma classe, ProdutoSchema, equivalente a uma
“tabela” em um banco de dados relacionais, mas implementada no modelo do Realm Database. Realizar a
persistência local consiste em criar esse tipo de classes, mediante as quais definimos que dados desejamos
armazenar e que serão utilizadas para a persistência e recuperação de dados no banco embarcado.
Javascript
content_copy
Uma característica dos aplicativos que aplicam o modelo Offline First é possuir uma estrutura normalmente
vista em aplicações/APIs que ficam no back-end.
Tal estrutura diz respeito aos modelos de dados – normalmente chamados models ou entities, e cujo
exemplo vimos anteriormente, muito usados na técnica chamada ORM (Mapeamento Objeto Relacional) e
responsáveis por representar os dados a serem manipulados.
Os detalhes dessa modelagem fogem ao escopo deste conteúdo. Logo, é recomendado que você obtenha
maiores informações a seu respeito antes de codificar o seu aplicativo.
Gerenciador de Estados
verified
Recomendação
Embora não se trate de um componente obrigatório, pode ser interessante utilizar um gerenciador
de estados na aplicação a fim de controlar e centralizar os dados em um “store” que fique
disponível em todas as telas da aplicação.
O benefício dessa centralização vem do fato de que, em vez de termos que nos preocupar em recuperar os
dados de diferentes componentes, podemos ter acesso a eles a partir de um único lugar.
Em relação às opções para gerenciamento de estados, temos o Context e o Redux. Este último é uma
biblioteca externa que fornece as mesmas funcionalidades do Context, mas que oferece mais recursos.
library_books
https://stecine.azureedge.net/repositorio/00212ti/02358/index.html#imprimir 32/40
20/01/2022 15:08 Conexão Remota com React Native
React-native-offline
library_books
Redux-offline
Essas duas bibliotecas utilizam o Redux e proveem uma série de funcionalidades como permitir que seja
verificado, de tempos em tempos, se o aplicativo possui ou não conexão com a internet, além da definição
dos métodos a serem executados em cada situação. Veja o fragmento a seguir em que é definido um método
para persistência de dados que faz uso de “Redux actions”:
Javascript
content_copy
O fluxo definido no código acima segue uma ordem de execução: inicialmente é executada a ação effect,
responsável por salvar os dados através da conexão remota. Se essa ação for executada com sucesso, então
a ação commit é acionada.
Caso o aplicativo esteja offline, a biblioteca redux-offline provê os métodos necessários para se
aguardar o estabelecimento da conexão a fim de se persistir os dados. Em caso de falha, ou seja, caso
não seja possível se conectar, o método rollback é acionado.
arrow_forward
https://stecine.azureedge.net/repositorio/00212ti/02358/index.html#imprimir 33/40
20/01/2022 15:08 Conexão Remota com React Native
arrow_forward
Com isso, os dados serão revertidos ao estado anterior ao momento em que o fluxo foi iniciado. Além
disso, por meio dessa ação, é possível adicionar uma rotina de notificação ao usuário, informando que
não foi possível realizar a operação online, pedindo a ele que tente novamente quando a conexão for
reestabelecida.
Caso você não tenha acesso, em termos de programação, à API ou às APIs remotas utilizadas por seu
aplicativo, tome o cuidado de estudar as suas documentações a fim de melhor planejar a aplicação do
modelo Offline First. Isso é importante porque as diferentes maneiras como as APIs são
implementadas podem trazer impactos para o seu aplicativo. Além disso, lembre-se de que você
estará reproduzindo parte do modelo de dados utilizado na API de forma local. Logo, eventuais
mudanças no modelo remoto implicarão a necessidade de atualização no modelo local.
https://stecine.azureedge.net/repositorio/00212ti/02358/index.html#imprimir 34/40
20/01/2022 15:08 Conexão Remota com React Native
Essa técnica consiste em tornar mais fluída a interação dos usuários com os aplicativos, sobretudo
quando os aplicativos dependem do consumo de recursos remotos e, mais ainda, quando tais
recursos não estiverem online. Em linhas gerais, a interface otimista consiste em fazer parecer ao
usuário que a aplicação é mais rápida do que de fato é.
Nesse aplicativo, mesmo que você esteja offline, é possível curtir publicações. Quer dizer, a resposta da
interface indica, imediatamente, que determinada publicação foi curtida, uma vez que o ícone que indica o
sucesso de tal ação é modificado imediatamente após tocado. Entretanto, essa mudança na interface não
significa que, de fato, essa informação foi persistida. Por outro lado, a satisfação do usuário foi garantida,
cabendo ao aplicativo implementar, então, a persistência real e também informar posteriormente ao usuário
caso ela, por algum motivo, não tenha sido realizada de fato.
video_library
O modelo Offline First no React Native
Os pontos relevantes e de atenção no desenvolvimento de um aplicativo utilizando o modelo Offline First
serão abordados no vídeo a seguir.
https://stecine.azureedge.net/repositorio/00212ti/02358/index.html#imprimir 35/40
20/01/2022 15:08 Conexão Remota com React Native
playlist_play
Vem que eu te explico!
Os vídeos a seguir abordam os assuntos mais relevantes do conteúdo que você acabou de estudar.
emoji_events
https://stecine.azureedge.net/repositorio/00212ti/02358/index.html#imprimir 36/40
20/01/2022 15:08 Conexão Remota com React Native
Questão 1
Em relação à implementação do Modelo Offline First em aplicativos escritos com o framework React
Native, é correto afirmar que:
O React Native provê mecanismos nativos capazes de, por si só, tornarem possível a
A
implementação do modelo Offline First.
O Modelo Offline First é, antes de mais nada, um modelo conceitual, que descreve os
cuidados a serem tomados na construção de um aplicativo que utilize recursos
B remotos. Em React Native, tanto os componentes para conexão remota como os
demais envolvidos na implementação do modelo precisam ser instalados de forma
adicional.
A grande vantagem de se aplicar o modelo Offline First usando React Native é que, ao
E escrevermos localmente os mesmos códigos existente na API remota, tornamos nosso
aplicativo mais robusto e totalmente independente de recursos remotos.
https://stecine.azureedge.net/repositorio/00212ti/02358/index.html#imprimir 37/40
20/01/2022 15:08 Conexão Remota com React Native
Responder
Questão 2
Podemos dizer que um aplicativo foi codificado utilizando o Modelo Offline First quando
possui um banco de dados embarcado. Em outras palavras, todo aplicativo que possui
C
um banco de dados embarcado é um aplicativo que faz uso do modelo Offline First.
possui uma interface otimista, por meio da qual todas as ações são executadas de
E
maneira ágil, melhorando a experiência do usuário.
Responder
https://stecine.azureedge.net/repositorio/00212ti/02358/index.html#imprimir 38/40
20/01/2022 15:08 Conexão Remota com React Native
Considerações finais
Ao longo deste conteúdo, foram apresentados os recursos do framework React Native para a realização de
conexão remota tendo em vista o consumo de recursos externos. Nesse sentido, foram listados os
componentes, tanto nativos como bibliotecas externas, que permitem a conexão em rede e a persistência de
dados.
Além disso, tanto de maneira prática como conceitual, foram aplicados e descritos alguns mecanismos de
controle de acesso inerentes ao processo de consumo de recursos externos.
Por fim, foi descrito o Modelo Offline First, por meio do qual aplicações mobile que fazem uso de conexão
remota podem ser escritas, a fim de permitirem o seu uso normal com ou sem conexão à internet.
headset
Podcast
Ouça o podcast a seguir, no qual trataremos da utilização dos tópicos abordados no
desenvolvimento mobile com React Native.
00:00 16:26
speed
1x
Referências
DENNISS, W. ; BRADLEY, J. OAuth 2.0 for Native Apps. Internet Engineering Task Force (IETF):
Best Current
https://stecine.azureedge.net/repositorio/00212ti/02358/index.html#imprimir 39/40
20/01/2022 15:08 Conexão Remota com React Native
Explore +
Visite a documentação oficial do React Native disponível no seu website.
Conheça a especificação técnica que estabelece o modelo OAuth 2.0 disponível no website IETF Datatracker.
Veja também a especificação que trata da aplicação do OAuth2 em Aplicativos, disponível no website IETF
Datatracker.
https://stecine.azureedge.net/repositorio/00212ti/02358/index.html#imprimir 40/40