Dateien sicher in React Native mit Cloud-Funktionen löschen

dateien aus einer react native app löschen einführung in diesem leitfaden lernen sie die beste methode, um dateien aus der back4app cloud in react native apps zu löschen zur verwaltung von anwendungsdateien in back4app verwenden wir die parse file parse file dienstklasse sie können mit dieser klasse speicher , abruf und löschoperationen durchführen im vorherigen abschnitt, https //www back4app com/docs/js framework/react native files , haben wir das speichern und abrufen von dateien durch die erstellung einer demo galerie app behandelt an diesem punkt sollten sie sich bewusst sein, dass es nach der erstellung und speicherung eines parse file parse file , die beste praxis ist, es immer mit einem anderen datenobjekt zu verknüpfen dies verhindert die erstellung von verwaisten dateien in ihrem projekt und ermöglicht es ihnen, sie in der back4app cloud zu finden und zu löschen parse file parse file bietet eine möglichkeit zum löschen von dateien, aber es ist eine sicherheitskritische operation, die sie nicht auf der client seite durchführen sollten in diesem tutorial lernen sie die beste praxis zum entfernen ihrer anwendungsdateien ziel fügen sie eine löschaktion für bilder zu einer react native galerie demo app hinzu voraussetzungen um dieses tutorial abzuschließen, benötigen sie schließen sie das https //app archbee com/docs/ roxiyumxobue9i7uv49e/nijiqgqoc93tzrlydmcbi tutorial ab parse >= 4 2 0 1 anwendungssetup im vorherigen abschnitt, https //www back4app com/docs/js framework/react native files , haben wir eine demo galerie app erstellt, um benutzerbilder hochzuladen und anzuzeigen für dieses tutorial werden sie diese app erweitern, indem sie jedem bildelement im gallery js gallery js komponente einen löschen button hinzufügen und unsere löschoperation durchführen wenn sie die demo galerie app bereits fertig codiert haben, können sie zum nächsten schritt springen alternativ können sie den code für die app klonen, um dieses tutorial zu verfolgen um das projekt zu klonen, führen sie aus git clone https //github com/templates back4app/react native demo gallery app git clone https //github com/templates back4app/react native demo gallery app installieren sie dann die projektabhängigkeiten 1 cd react native demo gallery app 2 3 # mit yarn 4 yarn install 5 6 # mit npm 7 npm install bevor sie ausführen, denken sie daran, ihre back4app anmeldeinformationen einzurichten, app id app id und javascriptkey javascriptkey , in der initialize initialize methode informationen zur einrichtung der app anmeldeinformationen finden sie unter https //www back4app com/docs/js framework/react native cli schließlich führen sie die react native anwendung aus 1 # für android 2 npx react native run android 3 4 # für ios 5 npx react native run ios 2 erstellen eines löschen buttons in der galerie app rendert die gallery js gallery js komponente die liste der bilder aus ihrem back4app cloud projekt als nächstes erstellen und fügen sie einen button zu jedem bildelement in der aktuellen liste hinzu öffnen sie die gallery js gallery js datei und fügen sie den folgenden inhalt hinzu 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; wir haben die renderitem funktion umgestaltet und einen löschen button für alle gerenderten bilder hinzugefügt der button klick event hat jedoch noch keine implementierte funktionalität du wirst es im nächsten schritt tun 3 erstellen einer cloud funktion zum löschen von bildern du hast gelernt, dass eine datei immer mit einem datenobjekt auf dem https //www back4app com/docs/js framework/react native files das nicht zuordnen von dateien zu datenobjekten führt zu verwaisten dateien diese dateien sind in deiner app unerreichbar wenn du sie nicht finden kannst, kannst du sie auch nicht aus deiner app löschen du kannst sie nur über die option dateien löschen im back4app dashboard entfernen der löschprozess besteht darin, die datei zu finden und sie dann zu löschen in parse wird die destroy destroy methode verwendet, um referenzierte dateien zu löschen die verwendung auf der client seite ist jedoch nicht sicher, da sie den masterkey masterkey erfordert wenn du eine react native app erstellst, sind alle deine schlüssel zusammengefasst, daher könnte jeder deine app zurückentwickeln, dekompilieren oder deinen netzwerkverkehr von seinem gerät aus abfangen, um deinen masterkey masterkey die verwendung des master schlüssels ermöglicht es dir, alle sicherheitsmechanismen deiner app zu umgehen, wie z b https //docs parseplatform org/js/guide/#class level permissions und https //docs parseplatform org/js/guide/#object level access control du kannst weitere details zu den besten sicherheitspraktiken von parse https //blog back4app com/parse server security/ finden der beste weg, um dateien zu löschen, besteht darin, dies auf der serverseite mit einer https //www back4app com/docs/get started/cloud functions in unserer galerie app werden wir dafür eine cloud code funktion erstellen lass uns eine main js main js datei mit der folgenden cloud funktion erstellen 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 }); zur vereinfachung werden wir das dashboard verwenden, um cloud funktionen direkt hochzuladen öffne dein app dashboard dashboard unter https //www back4app com/ und klicke auf core core , dann auf cloud code functions cloud code functions lade die main js main js datei im stammverzeichnis des cloud/ cloud/ ordners hoch stelle die funktion auf dem back4app server bereit nach ein paar sekunden wird deine cloud code funktion über rest oder das parse sdk verfügbar sein 4 aufruf der lösch cloud funktion von ihrer app sobald sie ihre back4app cloud code funktion erfolgreich bereitgestellt haben, implementieren sie die aktion, wenn der benutzer die schaltfläche „löschen“ in unserer galerie app drückt 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 jetzt, wenn sie auf löschen klicken, wird ihre app die deletegallerypicture deletegallerypicture cloud funktion auslösen, die erfolgreich ein bild löscht 5 dateien bereinigen in einigen situationen, wenn sie den überblick über ihre anwendungsdateien verloren haben, müssen sie dateien von ihrem dashboard löschen dies geschieht normalerweise, wenn sie die in diesem artikel erwähnten verwaisten dateien erstellen für informationen zur bereinigung ihrer anwendungsdateien versuchen sie https //help back4app com/hc/en us/articles/360002327652 how to delete files completely oder sehen sie https //www back4app com/docs/parse dashboard/app settings fertig! an diesem punkt haben sie erfolgreich eine cloud code funktion bereitgestellt und gelernt, wie man ein bild in einer react native anwendung löscht