Eliminazione Sicura di File in React Native su Back4App

elimina file da un'app react native introduzione in questa guida, imparerai il modo migliore per eliminare file dal cloud di back4app nelle app react native per gestire i file dell'applicazione in back4app, utilizziamo la parse file parse file classe di utilità puoi eseguire operazioni di memorizzazione, recupero ed eliminazione utilizzando questa classe nella sezione precedente, memorizzazione file https //www back4app com/docs/js framework/react native files , abbiamo trattato la memorizzazione e il recupero di file creando un'app galleria demo a questo punto, dovresti essere consapevole che dopo aver creato e salvato un parse file parse file , la prassi migliore è sempre associarlo a un altro oggetto dati questo impedirà la creazione di file orfani nel tuo progetto e ti permetterà di trovarli ed eliminarli nel cloud di back4app parse file parse file fornisce un modo per eliminare file, ma è un'operazione sensibile alla sicurezza che non dovresti eseguire lato client in questo tutorial, imparerai la prassi migliore per rimuovere i file della tua applicazione obiettivo aggiungi azione di eliminazione immagine a un'app galleria demo react native prerequisiti per completare questo tutorial, avrai bisogno di completare il tutorial sulla memorizzazione dei file parse >= 4 2 0 1 configurazione dell'applicazione nella sezione precedente, memorizzazione file https //www back4app com/docs/js framework/react native files , abbiamo costruito un'app galleria demo per caricare e visualizzare le immagini degli utenti per questo tutorial, incrementerai questa app aggiungendo un pulsante di eliminazione a ciascun elemento immagine nel gallery js gallery js componente ed eseguendo la nostra operazione di eliminazione se hai già terminato di codificare l'app galleria demo, puoi passare al passaggio successivo in alternativa, puoi clonare il codice sorgente per l'app per seguire questo tutorial per clonare il progetto esegui git clone https //github com/templates back4app/react native demo gallery app git clone https //github com/templates back4app/react native demo gallery app poi, installa le dipendenze del progetto prima di eseguire, ricorda di configurare le tue credenziali back4app, app id app id e javascriptkey javascriptkey , nel metodo di inizializzazione metodo di inizializzazione per informazioni sulla configurazione delle credenziali dell'app, vedere installa parse sdk https //www back4app com/docs/js framework/react native cli infine, esegui l'applicazione react native 2 creazione di un pulsante di eliminazione nell'app galleria, il gallery js gallery js componente rende l'elenco delle immagini dal tuo progetto cloud back4app successivamente, creerai e aggiungerai un pulsante a ogni elemento immagine nell'elenco attuale apri il gallery js gallery js file e aggiungi il seguente contenuto 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&#x9; 5 const gallery = () => { 6 const \[images, setimages] = usestate(\[]); 7&#x9; 8 useeffect(() => { 9 const fetchimages = async () => { 10 let query = new parse query('gallery'); 11 const results = await query find(); 12 setimages(results); 13 }; 14&#x9; 15 fetchimages(); 16 }, \[]); 17&#x9; 18 async function ondeleteimage(image id) { 19 // todo implement this function 20 } 21&#x9; 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&#x9; 46 }; 47&#x9; 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; abbiamo rifattorizzato la funzione renderitem, includendo un pulsante di eliminazione per tutte le immagini renderizzate tuttavia, l'evento di clic del pulsante non ha ancora funzionalità implementata lo farai nel passaggio successivo 3 creazione di una funzione cloud per eliminare le immagini hai appreso che un file dovrebbe sempre essere associato a un oggetto dati su file storage https //www back4app com/docs/js framework/react native files non associare file a oggetti dati porterà a file orfani questi file sono irraggiungibili all'interno della tua app una volta che non riesci a trovarli, non puoi nemmeno eliminarli dalla tua app puoi solo eliminarli utilizzando l'opzione purge files nel back4app dashboard il processo di eliminazione consiste nel trovarlo e poi eliminarlo in parse, il destroy destroy metodo è utilizzato per eliminare file referenziati tuttavia, usarlo sul lato client non è sicuro poiché richiede il masterkey masterkey quando costruisci un'app react native, tutte le tue chiavi sono raggruppate insieme, quindi chiunque potrebbe ingegnerizzare a ritroso, decompilare la tua app o fare proxy del tuo traffico di rete dal proprio dispositivo per trovare il tuo masterkey masterkey usare la chiave master ti consente di bypassare tutti i meccanismi di sicurezza della tua app, come permissi a livello di classe https //docs parseplatform org/js/guide/#class level permissions e acl https //docs parseplatform org/js/guide/#object level access control puoi trovare ulteriori dettagli sulle migliori pratiche di sicurezza di parse qui https //blog back4app com/parse server security/ il modo migliore per eliminare file è farlo sul lato server utilizzando una funzione cloud code https //www back4app com/docs/get started/cloud functions nella nostra app galleria, creeremo una funzione di codice cloud per questo creiamo un main js main js file con la seguente funzione cloud 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&#x9; 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 }); per semplicità, utilizzeremo il dashboard per caricare direttamente le funzioni cloud apri la tua app dashboard dashboard su sito web di back4app https //www back4app com/ e clicca su core core , poi funzioni di cloud code funzioni di cloud code carica main js main js file nella radice della cloud/ cloud/ cartella distribuisci la funzione sul server di back4app dopo pochi secondi, la tua funzione di codice cloud sarà disponibile per essere chiamata tramite rest o parse sdk 4 chiamare la funzione cloud di eliminazione dalla tua app una volta che hai distribuito con successo la tua funzione cloud code di back4app, procedi a implementare l'azione per quando gli utenti premono il pulsante di eliminazione nella nostra app galleria 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 ora, quando fai clic su elimina, la tua app attiverà deletegallerypicture deletegallerypicture la funzione cloud che eliminerà con successo un'immagine 5 pulizia dei file in alcune situazioni, quando hai perso traccia dei file della tua applicazione, devi eliminare i file dal tuo dashboard questo di solito si verifica quando crei i file orfani menzionati in questo articolo per informazioni su come pulire i file della tua applicazione prova domande comuni sui file di back4app https //help back4app com/hc/en us/articles/360002327652 how to delete files completely oppure vedi documentazione delle impostazioni dell'app https //www back4app com/docs/parse dashboard/app settings fatto! a questo punto, hai distribuito con successo una funzione di codice cloud e hai imparato come eliminare un'immagine in un'applicazione react native