Tutorial CRUD em app Android e iOS com React Native (Parte 4)

E chegamos à quarta e última parte da nossa série onde vou lhe ensinar como construir um app Android↳Android46 conteúdosAndroid push notifications com Quasar Framework, Firebase e integração com WordPressDev (Back & Front) · mai 2019O X do Xamarin Forms – O guia das funcionalidades nativas - Parte 02: AndroidDev (Back & Front) · abr 2019Modularização de AndroidDev (Back & Front) · ago 2019Ver tudo em Dev (Back & Front) → e iOS que faz um CRUD completo (cadastro, listagem, edição e exclusão de dados) usando React Native.

Na terceira parte, fizemos uma refatoração no nosso acesso à dados, fizemos funcionar a listagem e a seleção de um item para posterior edição, que de onde reiniciaremos no tutorial de hoje!

Atenção: esta é uma série intermediária. Caso nunca tenha feito um app em React Native antes, sugiro começar por esta outra série.

#10 – Atualizando um item

Agora que já temos os campos preenchidos na tela AppForm.js quando clicamos no botão editar da tela de listagem, vamos ajustar a lógica do botão Salvar para que ele identifique quando é uma edição ou novo cadastro, para fazer a operação necessária em nosso banco de dados↳Banco de dados134 conteúdosSQL ou NoSQL: eis a questão!!Data · mar 2020Banco de dados: como organizar e dar segurança para milhões de dados de loteriasData · mai 20215 serviços gratuitos na cloud para bancos de dados PostgresData · fev 2025Ver tudo em Data →.

Esta alteração é em dois pontos: no módulo Database.js e outra perna no AppForm.js. Primeiro vamos no módulo de acesso a dados.

1 2 3 4 5 6 7 8 9 10 11 12 13

async function saveItem(listItem, id){     listItem.id = id ? id : new Date().getTime()     const savedItems = await getItems();     if(id){         const index = await savedItems.findIndex(item => item.id === id);         savedItems[index] = listItem;     }     else       savedItems.push(listItem);     return AsyncStorage.setItem(‘items’, JSON.stringify(savedItems)); }

Calma, vou explicar.

Primeiro, a gente continua recebendo o listItem que vai ser salvo, no entanto, verificamos se veio um id como segundo parâmetro na function, pois assim, o objeto já terá id e não precisaremos gerar um novo. Coloquei o id como segundo parâmetro porque ele é opcional e também para manter compatibilidade com o código já existente no app.

Segundo, depois de carregar todos os dados presentes no AsyncStorage com getItems, verificamos novamente se veio um id (ou seja, se é uma edição) para, neste caso, pegar o índice do elemento a ser atualizado e sobrescrevendo-o com o objeto que montamos no início da função.

Caso não tenha vindo id, a função segue fazendo o que já funcionava: adiciona o novo objeto no array.

Em ambos os casos, salva-se o array inteiro novamente no AsyncStorage.

Agora, o código abaixo vai na função do botão de Salvar da AppForm.js.

1 2 3 4 5

async function handleButtonPress(){   const listItem = {descricao, quantidade: parseInt(quantidade)};   Database.saveItem(listItem, id)     .then(response => navigation.navigate(“AppList”, listItem)); }

Note que esta function ficou bem simples, apenas com a responsabilidade de montar o objeto e chamar a função Database.saveItem passando os parâmetros (o id nós carregamos lááá no início da AppForm.js), disparando a navegação depois de concluído o salvamento.

Só obtivemos um código simples aqui pois encapsulamos toda a lógica de cadastro/atualização dentro do módulo Database. Essa segregação de responsabilidades torna o nosso código muito mais legível e fácil de dar manutenção depois.

A atualização já deve estar funcionando, pode testar sem medo. Se preferir, teste usando o emulador.

#11 – Excluindo um item

E finalmente vamos à quarta e última letra do CRUD, o D de Delete!

Para fazer isso, não vou simplesmente definir uma function que exclui o registro com determinado id no Async Storage, mas antes disso quero questionar o usuário se ele tem certeza da m**** que vai fazer. 

Para exibir um popup de confirmação, adicione o seguinte código na function handleDeletePress do arquivo AppItem.js.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

function handleDeletePress(){     Alert.alert(         “Atenção”,         “Você tem certeza que deseja excluir este item?”,         [             {             text: “Não”,             onPress: () => console.log(“Cancel Pressed”),             style: “cancel”             },             { text: “Sim”, onPress: () => console.log(`${props.id} deleted`) }         ],         { cancelable: false }         ); }

Para que o código acima funcione, você vai ter de adicionar um import adicional também, para o componente Alert e tem de adicionar a função handleDeletePress no onPress do botão de exclusão.

1 2 3

import React from ‘react’; import {StyleSheet, Text, View, TouchableOpacity, Alert} from ‘react-native’; import Database from ‘./Database’;

Para quem já programou em outras plataformas móveis, vai sacar rapidinho o funcionamento do código anterior. Mas, mesmo que você nunca tenha programado Android, por exemplo, não é difícil de entender também.

A classe Alert possui uma function alert que serve para criar mensagens no estilo popup. O primeiro parâmetro desta função é o título do alerta, o segundo a mensagem e o terceiro é o array de botões para o usuário escolher uma opção. Cada botão tem um texto e uma função onPress própria.

Neste momento, apenas mandei imprimir no console para você ver se está funcionando até aqui. E no app, ao clicar no botão de excluir de um dos itens cadastrados, você verá o alerta abaixo.

Agora que temos o alerta funcionando, vamos na Database.js criar a function de exclusão.

1 2 3 4 5 6 7 8 9 10 11 12 13

async function deleteItem(id){     let savedItems = await getItems();     const index = await savedItems.findIndex(item => item.id === id);     savedItems.splice(index, 1);     return AsyncStorage.setItem(‘items’, JSON.stringify(savedItems)); } module.exports = {     saveItem,     getItems,     getItem,     deleteItem }

Aqui a function é bem direta: pega todos os itens, procura o índice daquele que possui o id recebido por parâmetro, exclui esse elemento do array e salva tudo de novo.

Para usar esta função, vamos mudar levemente o código do nosso Alert na AppItem.js.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

function handleDeletePress(){     Alert.alert(         “Atenção”,         “Você tem certeza que deseja excluir este item?”,         [             {             text: “Não”,             onPress: () => console.log(“Cancel Pressed”),             style: “cancel”             },             { text: “Sim”, onPress: () => {                     Database.deleteItem(props.id)                         .then(response => props.navigation.navigate(“AppList”, {id: props.id}));                 }             }         ],         { cancelable: false }         ); }

Com isso, ao clicar no botão de excluir de um dos itens da lista e confirmar a exclusão no alerta, irá disparar a função de exclusão da Database e depois de finalizada, executará a navegação para a tela de listagem novamente, passando o id que foi excluído na rota.

Isto finaliza o CRUD!

#12 – Adicionando ícones

Agora que finalizamos as funcionalidades principais, que tal fecharmos com um pequeno toque na interface, adicionando ícones aos botões de editar e excluir?

Para fazer isso, vamos importar um pacote que já vem no Expo por padrão com todos os ícones que podemos precisar na maioria dos apps dentro de uma lib @expo/vector-icons. Assim, volte na sua AppItem.js e adicione a importação abaixo do pacote de ícones Feather.

1 2 3 4

import React from ‘react’; import {StyleSheet, Text, View, TouchableOpacity, Alert} from ‘react-native’; import { Feather as Icon } from ‘@expo/vector-icons’; import Database from ‘./Database’;

E agora, dentro dos seus botões, você poderá usar a tag Icon ao invés de Text, indicando qual o ícone da biblioteca Feather você vai querer.

1 2 3 4 5 6 7 8 9 10

<TouchableOpacity     style={styles.deleteButton}     onPress={handleDeletePress}>     <Icon name=“trash” color=“white” size={18} /> </TouchableOpacity> <TouchableOpacity     style={styles.editButton}     onPress={handleEditPress}>     <Icon name=“edit” color=“white” size={18} /> </TouchableOpacity>

Além de indicar o ícone que você deseja no name, você pode definir a cor e o tamanho do ícone também. Para conhecer todos os ícones possíveis de todas as famílias disponíveis no Expo, visite este site.

O resultado você confere abaixo.

Opcionalmente, você pode alterar o botão de Salvar da tela AppForm.js para que, além do texto, exiba um ícone também. Antes e fazer isso, adicione o import aos ícones, como fizemos na AppItem.js. Somente depois, modifique o trecho de código do TouchableOpacity para ficar como abaixo.

1 2 3 4 5 6

<TouchableOpacity style={styles.button} onPress={handleButtonPress}>   <View style={styles.buttonContainer}>     <Icon name=“save” size={22} color=“white” />     <Text style={styles.buttonText}>Salvar</Text>   </View> </TouchableOpacity>

Aqui temos uma View para organizar dois componentes com um alinhamento que vamos definir no estilo buttonContainer que ainda não criamos. Dentro desta view, um Icon como fizemos antes e o texto do botão.

Para que eles fiquem lado a lado e em tamanhos condizentes, temos de fazer dois ajustes nos estilos deste módulo. Um deles é um ajuste no estilo buttonText e o outro é a criação de um estilo novo chamado buttonContainer.

1 2 3 4 5 6 7 8 9

buttonContainer: {   flexDirection: “row” }, buttonText: {   marginLeft: 10,   fontSize: 18,   color: ‘#fff’,   fontWeight: ‘bold’, }

Esse estilo buttonContainer deve ser usado por uma View dentro do TouchableOpacity, envolvendo o Icon e o Text.

Com isso, sua AppForm.js no smartphone ou simulador deve ficar como abaixo.

E com isso finalizamos esta série de tutoriais. Espero que você tenha gostado de aprender comigo pois eu com certeza gostei de escrever estes artigos.

Um abraço e até a próxima!