Olá, aluno(a)! Na lição de hoje, você conhecerá sobre como transferir dados utilizando React Native! A transferência de dados é o processo de se obter os dados inseridos por meio de um formulário — por exemplo, em uma tela — e transferi-los, deixando-os disponíveis em outra tela. Pense nos formulários que, frequentemente, você preenche em aplicativos ou na web que tem duas ou três etapas por exemplo. Todos esses dados somente serão armazenados, na maioria das vezes, ao final da terceira etapa, isso quer dizer que os dados da primeira etapa precisarão estar anexados à terceira etapa.

Em nossa última lição, você estudou a respeito do armazenamento de dados em dispositivos móveis, deixei, propositalmente, a questão do banco de dados externos para agora. Chamarei esse banco externo de sincronização de dados com servidores. Ele serve para que não se corra o risco de seu usuário perder tudo o que foi salvo usando seu aplicativo quando ele trocar de aparelho. 

Por fim, também, veremos como podemos acessar outros serviços e APIs da internet para agregar valor, tempo e produtividade de desenvolvimento e performance ao seu aplicativo e aos seus produtos. Resumindo, o objetivo desta lição é uma extensão da aula anterior em que falaremos de transferência de dados, armazenamento e sincronização de dados em banco de dados externos (web) e utilização de APIs.

Analise o seguinte problema: você desenvolveu um aplicativo que exige um cadastro inicial um pouco mais extenso que o normal. Seria um cadastro em três etapas, a primeira com dados pessoais, a segunda com dados profissionais e a terceira com dados referentes à utilização do aplicativo, como cadastro de nome de usuário e senha. Primeiramente, você teria que ir “carregando” os dados da primeira etapa para a segunda, depois, transferir os dados da primeira e da segunda etapa para a terceira, para, ao final dessa última etapa, armazenar todos esses dados de acordo com a estratégia adotada. Mas agora imagine que essa estratégia seja o banco de dados local que você viu na última aula. Tudo certo, não é? Em partes sim, e lhe explicarei o porquê.

O seu usuário instalou o aplicativo em um dispositivo que ele já possui há dois anos e realizou esse extenso cadastro de bom grado e está utilizando seu aplicativo — com muita satisfação, diga-se de passagem. Mas acontece que, depois de seis meses de uso praticamente diário do aplicativo, ele é presenteado com um novo aparelho smartphone e, ao preparar esse novo aparelho para utilização, instalou mais uma vez seu aplicativo, mas teve uma surpresa um tanto quanto indesejada ao utilizá-lo pela primeira vez nesse novo aparelho.

O usuário dele não existia no seu aplicativo, o que fez com que seu usuário realizasse, novamente, o cadastro extenso para utilizar o aplicativo, mas, novamente, teve uma outra surpresa ruim, tudo o que foi armazenado durante os últimos seis meses de utilização não estava ali. Tudo isso devido à estratégia de armazenamento em banco de dados local utilizada, pois todos os dados estão armazenados no aparelho antigo, e não no servidor do seu aplicativo, que poderia, facilmente, compartilhar na instalação no novo aparelho. Por isso, faz-se necessária a utilização do armazenamento de dados em banco de dados externos acessíveis, pela web ou por meio de APIs, para que, ao instalar o aplicativo em novo aparelho, ele “reconheça” seu usuário e seus dados já armazenados.

Hoje, você conhecerá sobre o case fictício de uma empresa consolidada no mercado educacional, que já possui inúmeros sistemas web e desktops que compartilham várias informações administrativas e acadêmicas sobre cursos, disciplinas, notas, alunos, matrículas, etc. Acontece que, agora, foi demandado ao Setor de Tecnologia da Informação o desenvolvimento de um aplicativo para que os estudantes pudessem consultar suas notas e seu progresso em seu curso.

A Equipe de TI, então, passou a analisar as possíveis estratégias de desenvolvimento e chegou a uma proposta: uma vez que os dados já estão todos armazenados em seus respectivos sistemas, bastava que a equipe desenvolvesse um aplicativo, de acordo com o perfil dos alunos, utilizando uma plataforma híbrida de desenvolvimento, por meio do framework React Native, que acessasse esses dados já armazenados e os exibisse em uma interface responsiva e de acordo com as boas práticas de interface e experiência do usuário na utilização de dispositivos móveis. Para isso, ficou acertado que essa equipe desenvolveria esse aplicativo que consumiria os dados por meio de API para dar acesso ao aplicativo a esses dados já consolidados e armazenados por outros sistemas.

Transferência de dados 

Como foi apresentado nos itens anteriores desta lição, a questão de transferência de dados em aplicativos para dispositivos móveis é algo muito utilizado principalmente quando se quer transferir dados já inseridos ou pesquisados em banco de dados pelo usuário para uma outra tela, sem que seja necessária a operação em que o usuário precise digitar novamente os dados, ou que a regra de negócio do aplicativo faça uma nova busca em banco de dados para recuperar os mesmos dados já recuperados.

Vale ressaltar aqui a importância de se economizar nas pesquisas em banco de dados, pois essas operações de leitura em banco de dados utilizam-se de muito processamento, tanto por parte da aplicação quanto por parte do Sistema Gerenciador de Banco de Dados (SGBD).

Uma das formas de compartilhar esses dados utilizando a biblioteca React Native é por meio do componente React Navigation — que você já conheceu anteriormente. Para isso, pensaremos em uma situação em que você tem uma lista de produtos recuperados de um banco de dados e, ao clicar na descrição do produto, uma nova tela se abrirá com todas as especificações desse produto, uma vez que, para a “montagem” da lista de produtos, você já trouxe todos esses dados — que é uma das formas de se trabalhar com esse tipo de necessidade. Você possui esses dados disponíveis em memória e nessa tela para que possa transportar ou transferir os dados para a próxima tela que apresenta os detalhes do produto, sem que qualquer operação de banco de dados seja realizada sem necessidade.

A Figura 1 apresenta um fragmento de código de um botão utilizando React Navigation, exemplificando a situação descrita anteriormente.

Essa operação é nomeada, segundo React Native (2023), passagem de parâmetros por rotas, uma vez que, quando navegamos entre telas, o fazemos por meio de rotas, também, chamadas endereços, por isso, esse tipo de nomenclatura.

Sincronização de dados com servidores 

Na lição de Armazenamento de dados em Dispositivos Móveis, apresentamos os conceitos e as formas de se armazenar dados em dispositivos móveis por meio de seus aplicativos. Uma das formas apresentadas foi a gravação em banco de dados local, forma em que todos os dados gerados no aplicativo seriam gravados em um banco de dados no próprio dispositivo em que o aplicativo foi instalado. 

Uma das principais vantagens dessa forma de armazenamento é que o aplicativo não dependerá de o usuário possuir conexão Wi-Fi ou pacote de dados para salvar ou buscar informações armazenadas no aplicativo. Mas possui uma desvantagem que é quando ocorre troca ou perda do dispositivo, pois todos os dados estariam salvos no dispositivo, e uma nova instalação do referido aplicativo estaria “limpo” desses dados, começando, novamente, do zero. Por isso, existe também uma segunda forma de salvar dados em banco de dados em servidores na internet, o que acaba com a desvantagem com relação ao banco de dados locais, pois seus dados estariam sendo salvos e buscados em um servidor web sempre disponível. A grande questão aqui seria que, para isso, o usuário depende, integralmente, de uma conexão com a internet (Wi-Fi, ou 4G). 

Sendo assim, existe uma terceira forma que é a abordada nesse item, que é a sincronização de dados com os servidores, também chamada Offline First, que consiste em salvar todos os dados do usuário por meio de suas operações no aplicativo no banco de dados local e deixar uma rotina que seja executada em segundo plano (o usuário não verá isso acontecendo). Toda vez que algum dado for gravado no banco de dados, a resposta da gravação é dada imediatamente para o usuário, trazendo, assim, boa experiência na utilização do aplicativo, porém, como dito anteriormente, essa “rotina” sincronizará os novos dados do dispositivo com os dados do servidor na web e, também, atualizará o banco de dados local com possíveis novos dados gravados nesse servidor por outros usuários e/ou disponibilizados por você por meio de atualizações do aplicativo.

Acesso a serviços e APIs da Internet 

Bem, você já conhece como transferir dados entre telas e sincronizar dados com servidores web, agora, apresentarei uma questão que entra muito na área da produtividade e agilidade no desenvolvimento de funcionalidades, não só para aplicativos móveis, mas também para sistemas web em geral, que é acessar serviços e APIs da internet.

Um exemplo bem conhecido — e certamente utilizado pela maioria dos aplicativos/sistemas de comércio eletrônico — é quando você vai efetuar um cadastro e lhe é pedido o seu endereço, em uma aplicação profissional, certamente, será lhe pedido o seu CEP, ao invés de que você tenha que digitar todos os dados de endereço, como rua, bairro, cidade e estado. Mas como que, ao digitar o meu CEP, a aplicação retorna meus dados? É necessário que toda pessoa desenvolvedora crie códigos com os dados de CEP e de endereço de todas as ruas, de todas as cidades, de todos os estados do Brasil?

Como saberei quando utilizar quaisquer das técnicas e/ou ferramentas apresentadas na lição de hoje? Vamos por partes. Primeiro, com relação à questão de transferência de dados, se o seu aplicativo apresentar alguma situação semelhante com a apresentação do conceito de transferência de dados, certamente, é uma ótima opção utilizá-la mesmo com algumas variações, como em um cadastro de usuário, em que existe uma primeira etapa com dados, como nome, e-mail e telefone, e uma segunda etapa com os demais dados. Você pode e deve utilizar a transferência de dados entre as duas telas (etapas), mas também pode querer salvar os dados da primeira etapa antes de ir para a segunda — caso seu usuário desista de completar o cadastro —, pois, assim, você teria os dados de contato desse possível novo usuário para acioná-lo e verificar a razão pela qual o cadastro não foi concluído.

Já na questão da técnica de sincronização de dados com servidores, eu vejo como a melhor solução para desenvolvimento de aplicativos móveis hoje. É claro que existem situações dentro do seu aplicativo que a sincronização não seria possível, como pedidos, por conta de o estoque ser movimentado por outros usuários também. Mas você pode e deve analisar cada funcionalidade de seu aplicativo para que otimize esses salvamentos e recuperação de dados por meio da sincronização.

Nessa funcionalidade, o salvamento e a recuperação de dados ocorrerão, diretamente, com o banco de dados no servidor, e as sincronizações que forem possíveis ocorrerão em um banco de dados local com sincronização, assim que houver conexão com a internet. Com isso, você sempre terá uma utilidade para seu aplicativo, em qualquer lugar que seu usuário esteja, com conexão de internet ou não. Além disso, a utilização de serviços e APIs, hoje, é quase que uma regra a ser seguida. Como o exemplo do case desta lição, você deverá evitar, ao máximo, criar coisas ou códigos que já existem, utilizando serviços, biblioteca e APIs que possam agilizar o seu desenvolvimento, e que, ainda, já foram testados e são utilizados por vários outros aplicativos e usuários.