Excluir Arquivos no React Native com Back4App via Cloud Code

12 min

excluir arquivos de um aplicativo react native introdução neste guia, você aprenderá a melhor maneira de excluir arquivos da nuvem back4app em aplicativos react native para gerenciar arquivos de aplicativo no back4app, usamos a \parse file\ classe utilitária você pode realizar operações de armazenamento, recuperação e exclusão usando esta classe na seção anterior, armazenamento de arquivos https //www back4app com/docs/js framework/react native files , cobrimos o armazenamento e a recuperação de arquivos criando um aplicativo de galeria de demonstração neste ponto, você deve estar ciente de que, após criar e salvar um \parse file\ , a melhor prática é sempre associá lo a outro objeto de dados isso evitará a criação de arquivos órfãos em seu projeto e tornará possível encontrá los e excluí los na nuvem back4app \parse file\ fornece uma maneira de excluir arquivos, mas é uma operação sensível à segurança que você não deve realizar no lado do cliente neste tutorial, você aprenderá a melhor prática para remover os arquivos do seu aplicativo objetivo adicionar ação de excluir imagem a um aplicativo de galeria de demonstração react native pré requisitos para completar este tutorial, você precisará completar o armazenamento de arquivos https //app archbee com/docs/ roxiyumxobue9i7uv49e/nijiqgqoc93tzrlydmcbi tutorial parse >= 4 2 0 1 configuração do aplicativo na seção anterior, armazenamento de arquivos https //www back4app com/docs/js framework/react native files , construímos um aplicativo de galeria de demonstração para fazer upload e exibir fotos de usuários para este tutorial, você irá incrementar este aplicativo adicionando um botão de excluir a cada item de imagem no \gallery js\ componente e realizando nossa operação de exclusão se você já terminou de codificar o aplicativo de galeria de demonstração, pode pular para a próxima etapa alternativamente, você pode clonar a base de código do app para seguir este tutorial para clonar o projeto, execute \git clone https //github com/templates back4app/react native demo gallery app\ em seguida, instale as dependências do projeto 1 cd react native demo gallery app 2 3 # usando yarn 4 yarn install 5 6 # usando npm 7 npm install antes de executar, lembre se de configurar suas credenciais do back4app, \app id\ e \javascriptkey\ , no método \initialize\ para informações sobre a configuração das credenciais do app, veja instalar parse sdk https //www back4app com/docs/js framework/react native cli finalmente, execute o aplicativo react native 1 # para android 2 npx react native run android 3 4 # para ios 5 npx react native run ios 2 criando um botão de deletar no aplicativo da galeria, o \gallery js\ componente renderiza a lista de imagens do seu projeto na nuvem back4app em seguida, você criará e adicionará um botão a cada item de imagem na lista atual abra o \gallery js\ arquivo e adicione o seguinte conteúdo 1 import react, {usestate, useeffect} from 'react'; 2 import {text, view, image, flatlist, stylesheet, button, alert} from 'react native'; 3 import parse from 'parse/react native js'; 4	 5 const gallery = () => { 6 const \[images, setimages] = usestate(\[]); 7	 8 useeffect(() => { 9 const fetchimages = async () => { 10 let query = new parse query('gallery'); 11 const results = await query find(); 12 setimages(results); 13 }; 14	 15 fetchimages(); 16 }, \[]); 17	 18 async function ondeleteimage(image id) { 19 // todo implement this function 20 } 21	 22 return ( 23 \<flatlist 24 style={styles container} 25 contentcontainerstyle={styles listcontent} 26 data={images} 27 horizontal={false} 28 numcolumns={3} 29 listemptycomponent={() => \<text>no images uploaded \</text>} 30 renderitem={({item}) => ( 31 \<view> 32 \<image 33 source={ {uri item get('picture') url()} } 34 style={styles imageitem} 35 /> 36 \<button 37 title="delete" 38 color="red" 39 onpress={() => ondeleteimage(item id)} 40 /> 41 \</view> 42 )} 43 keyextractor={(item) => item id} 44 />); 45	 46 }; 47	 48 const styles = stylesheet create({ 49 container { 50 flex 1, 51 backgroundcolor '#f5f5f5', 52 }, 53 listcontent { 54 justifycontent 'center', 55 alignitems 'center', 56 }, 57 imageitem { 58 width 100, 59 height 100, 60 resizemode 'cover', 61 marginhorizontal 5, 62 marginvertical 5, 63 }, 64 }); 65 export default gallery; refatoramos a função renderitem, incluindo um botão de excluir para todas as imagens renderizadas no entanto, o evento de clique do botão ainda não tem funcionalidade implementada você fará isso na próxima etapa 3 criando uma função de nuvem para excluir imagens você aprendeu que um arquivo deve sempre estar associado a um objeto de dados no armazenamento de arquivos https //www back4app com/docs/js framework/react native files não associar arquivos a objetos de dados resultará em arquivos órfãos esses arquivos são inacessíveis dentro do seu app uma vez que você não consegue encontrá los, também não pode excluí los do seu app você só pode apagá los usando a opção purge files no painel do back4app o processo de exclusão consiste em encontrar e, em seguida, excluir no parse, o \destroy\ método é usado para excluir arquivos referenciados no entanto, usá lo no lado do cliente não é seguro, pois requer o \masterkey\ quando você constrói um aplicativo react native, todas as suas chaves são agrupadas, portanto, qualquer um poderia reverter a engenharia, descompilar seu aplicativo ou fazer proxy do tráfego de rede do dispositivo deles para encontrar sua \masterkey\ usar a chave mestre permite que você contorne todos os mecanismos de segurança do seu aplicativo, como permissões de nível de classe https //docs parseplatform org/js/guide/#class level permissions e acls https //docs parseplatform org/js/guide/#object level access control você pode encontrar mais detalhes sobre as melhores práticas de segurança do parse aqui https //blog back4app com/parse server security/ a melhor maneira de excluir arquivos é fazê lo no lado do servidor usando uma função de cloud code https //www back4app com/docs/get started/cloud functions no nosso aplicativo de galeria, criaremos uma função de código em nuvem para isso vamos criar um \main js\ arquivo com a seguinte função em nuvem 1 parse cloud define('deletegallerypicture', async (request) => { 2 const {image id} = request params; 3 const gallery = parse object extend('gallery'); 4 const query = new parse query(gallery); 5 try { 6 const image = await query get(image id); 7 const picture = image get('picture'); 8	 9 await picture destroy({usemasterkey true}); 10 await image destroy(); 11 return 'image removed '; 12 } catch (error) { 13 console log(error); 14 throw new error('error deleting image'); 15 } 16 }); para simplicidade, usaremos o dashboard para fazer upload das funções em nuvem diretamente abra seu app \dashboard\ em back4app website https //www back4app com/ e clique em \core\ , então \cloud code functions\ faça upload do \main js\ arquivo na raiz da \cloud/\ pasta implante a função no servidor back4app após alguns segundos, sua função de código em nuvem estará disponível para ser chamada via rest ou parse sdk 4 chamando a função de nuvem de exclusão do seu app uma vez que você tenha implantado com sucesso sua função de código em nuvem do back4app, vá em frente e implemente a ação para quando os usuários pressionarem o botão de exclusão em nosso aplicativo de galeria 1 // triggers on hitting delete 2 async function ondeleteimage(image id) { 3 try { 4 const params = {image id}; 5 const result = await parse cloud run('deletegallerypicture', params); 6 alert alert(result); 7 } catch (error) { 8 console log('delete error ', error); 9 } 10 } 11 agora, quando você clicar em excluir, seu aplicativo acionará a \deletegallerypicture\ função de nuvem que excluirá com sucesso uma imagem 5 purgação de arquivos em algumas situações, quando você perdeu o controle dos arquivos do seu aplicativo, precisa excluir arquivos do seu painel isso geralmente ocorre quando você cria os arquivos órfãos mencionados neste artigo para informações sobre como limpar os arquivos do seu aplicativo tente perguntas comuns sobre arquivos do back4app https //help back4app com/hc/en us/articles/360002327652 how to delete files completely ou veja documentação de configurações do app https //www back4app com/docs/parse dashboard/app settings pronto! neste ponto, você implantou com sucesso uma função de código em nuvem e aprendeu como excluir uma imagem em um aplicativo react native