aula7 (1)

Prévia do material em texto

7ºAula
Implementação II
Objetivos de aprendizagem
Ao término desta aula, vocês serão capazes de:
• criar um módulo para armazenamento em banco de dados local;
• criar um módulo para armazenamento em banco de dados remoto.
Olá, 
Começaremos a Aula 07 dando continuidade disciplina 
Programação para Dispositivos Móveis. Na aula anterior foi 
desenvolvida uma aplicação que cria uma lista de convidados, 
essas informações são salvas em um banco de dados local.
Nesta aula, o código da aula anterior é refatorado para 
retirar de dentro dele os mecanismos de armazenamento local, 
criando um módulo para esse fim. Além disso, o módulo foi 
preparado para também possibilitar o armazenamento em um 
banco de dados na nuvem.
Leia atentamente esta aula e se tiver alguma dúvida, use os 
recursos que estão na sua área do aluno.
Bons estudos!
40Programação para Dispositivos Móveis
Seções de estudo
1– Armazenamento Local
2– Armazenamento Remoto
1- Armazenamento Local
Na aula anterior foi construída uma aplicação que através 
de uma biblioteca importada dentro do código JavaScript 
consiga Ler, Incluir e Excluir dados em um ‘banco de 
dados’ de armazenamento local. Quando pensamos em uma 
aplicação robusta, aplicar o CRUD (Create, Read, Update e 
Delete) garante que dados possam ser manipulados em todos 
os seus aspectos.
Mas é importante criar uma abstração entre a lógica 
da aplicação a lógica de armazenamento e manipulação dos 
dados. No exemplo da aula anterior, todas as chamadas ao 
banco de dados foram realizadas diretamente no código 
principal.
Essa metodologia não permite que alterações sejam 
feitas, por exemplo, se fosse preciso trocar o armazenamento 
local para remoto, todas as chamadas ao banco de dados 
deveriam ser atualizadas.
Criar então um módulo que separa a lógica de 
manipulação do banco de dados é uma saída correta para esse 
problema. O arquivo Database.js deve inicialmente importar 
o módulo async-storage.
 import AsyncStorage from ‘@react-
native-community/async-storage’;
Para que execute todas as operações do CRUD serão 
criadas e exportadas 4 funções: saveItem (Create e Update), 
getItem e getItems (Read) e deleteItem (Delete).
A primeira função é a getItem que irá pegar todos os 
itens salvos. Ela recebe 1 parâmetro que é a chave do banco 
de dados.
function getItems(database) {
 return AsyncStorage.
getItem(database)
 .then(response => {
 if (response)
 return Promise.
resolve(JSON.parse(response));
 else
 return Promise.
resolve([]);
 })
}
A segunda função é a getItem que vai retornar somente 
um item do banco de dados. Ela recebe 2 parâmetros, o 
primeiro é o banco de dados e o segundo é o id do item a ser 
retornado.
async function getItem(database, id)
{
 const savedItems = await 
getItems(database);
 return savedItems.fi nd(item => 
item.id === id);
}
A segunda função é a saveItem que irá salvar um novo 
item e atualizar um item já existente. Ela receberá 3 parâmetros, 
o primeiro é a chave do banco de dados, o segundo é o item 
a ser inserido, e o terceiro é o id que será setado quando uma 
atualização deve ser feita.
async function saveItem(database, 
item, id) {
 item.id = id ? id : new Date().
getTime()
 const savedItems = await 
getItems(database);
 if (id) {
 const index = await savedItems.
fi ndIndex(item => item.id === id);
 savedItems[index] = item;
 }
 else
 savedItems.push(item);
 return AsyncStorage.
setItem(database, JSON.
stringify(savedItems));
}
A última função é a deleteItem que irá remover um item. 
Ela receberá 2 parâmetros, o primeiro é a chave do banco de 
dados, o segundo é o id do item que será removido.
async function deleteItem(database, 
id){
 let savedItems = await 
getItems(database);
 const index = await savedItems.
fi ndIndex(item => item.id === id);
 savedItems.splice(index, 1);
return AsyncStorage.
setItem(database, JSON.
stringify(savedItems));
}
Por fi m, as 4 funções devem ser exportadas para que 
possam ser acessadas externamente. 
module.exports = {
 saveItem,
 getItems,
 getItem,
 deleteItem
}
O código da Aula anterior para utilizar esse módulo 
deve ser refatorado, substituindo as chamadas às funções do 
módulo async-storage pelas funções do módulo Database.js. 
No arquivo AppList.js primeiro deve-se importar o módulo.
41
 import Database from ‘../modules/
Database’;
E dentro da chamada de useEffect, que realizava a 
leitura diretamente do banco deve-se modifi car para a função 
getItems do Database.
useEffect(() => {
 Database.getItems(‘items’).
then(items => setNomes(items));
 }, [route]);
Já no arquivo AppForm.js a função que manipula 
o onPress do botão deve ser atualizado com a função que 
saveItem.
async function handleButtonPress(){ 
 const listItem = {nome:nome, 
sobrenome:sobrenome};
 await Database.
saveItem(‘items’,listItem);
 navigation.navigate(“AppList”, 
listItem);
 }
E no arquivo AppItem.js a função que ocorre após o 
usuário clicar em sim no Alert deve ser alterada como segue.
text: “Sim”, onPress: async () => {
 await Database.
deleteItem(‘items’,props.id);
 props.navigation.
navigate(“AppList”, {id: 
props.id}); 
}
Quando comparados, os códigos refatorados, deve-se 
perceber uma diminuição na quantidade de linhas repetidas, 
o que por si só já é uma grande vantagem.
2- Armazenamento Remoto
Até o momento só foram desenvolvidas aplicações, 
cujos dados fi cam armazenados no próprio dispositivo 
móvel, mas se for necessária a utilização de um banco de 
dados compartilhado, cujos dados podem ser acessados por 
mais de uma pessoa, a aplicação deve estar preparada para a 
conexão com um banco de dados remotos.
Várias opções podem ser utilizadas para garantir o acesso 
remoto a dados, nessa seção veremos como utilizar o Firebase 
Realtime Database.
O Firebase Realtime Database é disponibilizado pela 
google e permite o armazenamento de dados em um banco 
na nuvem do tipo NoSQL. Os dados são armazenados como 
JSON e disponíveis em tempo real com todos os clientes que 
estejam conectados. Com ele é possível ainda criar aplicações 
e diferentes plataformas.
Por ser NoSQL tem otimizações e funcionalidades 
diferentes dos bancos de dados relacionais tradicionais. 
Garantindo escalabilidade nos projetos que forem necessários 
de utilizá-lo.
Para conseguir acesso a um banco de dados no Firebase 
é preciso acessar o console (https://console.fi rebase.google.
com/) e criar um projeto clicando em adicionar um projeto 
Figura 1.
 
Figura 1 – Console Firebase. Fonte: Firebase, 2020.
Para criar seu projeto você deve seguir o passo a passo. 
Primeiro deve escolher o nome para o projeto (Figura 2), em 
seguida ativar ou não o google Analytics para seu projeto 
(Figura 3). Ao fi nal do processo seu projeto já estará concluído 
(Figura 4).
Figura 2 – Nome do Projeto. Fonte: Firebase,2020.
Figura 3 – Google Analytics. Fonte: Firebase,2020.
Programação para Dispositivos Móveis
Figura 4 – Projeto Criado. Fonte: Firebase,2020.
Com o projeto criado, na lateral, acesse Realtime Database e depois clique em Criar banco de dados (Figura 5). Siga os 
passos para criação do banco de dados primeiro selecionando o local onde ele será alocado (Figura 6) e depois a regra de acesso 
de teste, que libera o acesso ao banco durante 30 dias (Figura 7).
Figura 5 – Criar Banco de Dados. Fonte: Firebase,2020.
Figura 6 – Localização do Banco de Dados. Fonte: Firebase,2020.
Figura 7 – Regras de Segurança. Fonte: Firebase,2020.
Após a criação do banco de dados, no menu lateral, acessando a Visão geral do projeto é preciso criar uma aplicação 
(Figura 8). Selecionando uma app da Web será necessário inserir um nome para esse app (Figura 9). Concluída a criação do app 
copie o conteúdo da variável fi rebaseConfi g que contém as confi gurações para acesso ao Firebase Realtime Database (Figura 
10).
Figura 8 – Criaruma aplicação. Fonte: Firebase,2020.
Programação para Dispositivos Móveis
Figura 9 – Registrar App. Fonte: Firebase, 2020.
Figura 10 – Confi gurações do Firebase. Fonte: Firebase,2020.
45
Será criado então um novo arquivo Database.js que 
manterá as mesmas funções que foram defi nidas para 
o armazenamento local, o que vai garantir que não seja 
necessário alterar nada no código principal já que o Database.
js e DatabaseLocal.js funcionam da mesma maneira.
Antes de iniciar a codifi cação é preciso instalar o módulo 
referente ao fi rebase.
npm install fi rebase --save
Para que ele funcione corretamente esse módulo deve 
ser importado no começo do arquivo. Seguido da variável 
copiada da Figura 10.
import * as fi rebase from ‘fi rebase’;
var fi rebaseConfi g = {
 apiKey: “*********************”,
 authDomain: “*********************”,
 databaseURL: 
“*********************”,
 projectId: “*********************”,
 storageBucket: 
“*********************”,
 messagingSenderId: 
“*********************”,
 appId: “*********************”
};
Sempre que uma incursão for feita no banco de dados 
a função initialize é chamada para verifi car se o app já foi 
inicializado com as confi gurações que foram defi nidas. E caso 
ele ainda não tenha sido ele é então inicializado.
function initialize() {
 if (!fi rebase.apps.length) {
 fi rebase.
initializeApp(fi rebaseConfi g);
 }
}
As funções getItems, saveItem e deleteItem devem ser 
alteradas para utilizar as funções de manipulação do Firebase 
Realtime Database.
function getItems(database) {
 initialize();
 return fi rebase.database().
ref(database + ‘/’).once(‘value’).
then((snapshot) => {
 if (snapshot.val()) {
 return Promise.
resolve(snapshot.val());
 } else {
 return Promise.
resolve([]);
 }
 });
}
async function saveItem(database, 
item, id = null) {
 item.id = id ? id : new Date().
getTime()
 const savedItems = await 
getItems(database);
 if (id) {
 const index = await savedItems.
fi ndIndex(item => item.id === id);
 savedItems[index] = item;
 }
 else
 savedItems.push(item);
 initialize();
 return fi rebase.database().
ref(database + ‘/’).set(savedItems);
}
async function deleteItem(database, 
id) {
 let savedItems = await 
getItems(database);
 const index = await savedItems.
fi ndIndex(item => item.id === id);
 savedItems.splice(index, 1);
 initialize();
 return fi rebase.database().
ref(database + ‘/’).set(savedItems);
}
Tanto a chamada às funções quanto o seu retorno é 
o mesmo que foi projetado para o armazenamento local, 
dessa forma não é preciso alterar mais nada para que as 
informações que forem inseridas na lista pelo aplicativo já 
estejam disponibilizadas no banco de dados.
Para conferir se os dados estão sendo armazenados 
corretamente basta abrir o console do Firebase no Realtime 
Database e verifi car se o que está sendo inserido no aplicativo 
também está sendo salvo no banco de dados (Figura 11).
Figura 11 – Banco de dados com dados. Fonte: Firebase,2020.
46Programação para Dispositivos Móveis
Chegamos ao fi nal da sétima aula. Vamos 
recordar?
Retomando a aula
1– Armazenamento Local
Na primeira seção foi criado um módulo que retira do 
código principal toda a funcionalidade de acesso ao banco de 
dados local.
2– Armazenamento Remoto
Na seção seguinte, o módulo foi refatorado para que o 
armazenamento seja remoto utilizando o Firebase Realtime 
Database.
DUARTE, L. In: Tutorial CRUD em app Android e 
iOS com React Native, 2020. Disponível em: https://www.
luiztools.com.br/post/tutorial-crud-em-app-android-e-ios-
com-react-native/. Acesso em: 24 jun. 2020.
MARCU, F. In: How to Build a React Native App and 
Integrate It with Firebase, 2020. Disponível em: https://
www.freecodecamp.org/news/react-native-firebase-
tutorial/. Acesso em: 25 jun. 2020.
RUPARELIYA, R. In: Firebase Realtime Database 
With React Native, 2018. Disponível em: https://medium.
com/mindorks/firebase-realtime-database-with-react-
native-5f357c6ee13b. Acesso em: 25 jun. 2020.
FIREBASE. In: Firebase Realtime Database, 2020. 
Disponível em: https://console.firebase.google.com/. 
Acesso em: 25 jun. 2020.
Vale a pena acessar
PINHO, D. M.; ESCUDELARIO, B. React Native 
Desenvolvimento de aplicativos mobile com React. Editora Casa do 
Código, São Paulo, 2020.
EISENMAN, B. Learning React Native: Building Native 
Mobile Apps with JavaScript. O’Reilly Media, 2015.
BODUCH, A. React and React Native. Packt Publishing, 
2017.
LEBENSOLD, J. React Native Cookbook: Bringing the 
Web to Native Platforms. O’Reilly Media, 2018.
Vale a pena ler
Vale a pena
Minhas anotações