Eliminar archivos en React Native con Parse y Cloud Code

12 min

eliminar archivos de una aplicación react native introducción en esta guía, aprenderás la mejor manera de eliminar archivos de la nube back4app en aplicaciones react native para gestionar archivos de aplicación en back4app, utilizamos la \parse file\ clase de utilidad puedes realizar operaciones de almacenamiento, recuperación y eliminación utilizando esta clase en la sección anterior, almacenamiento de archivos https //www back4app com/docs/js framework/react native files , cubrimos el almacenamiento y la recuperación de archivos creando una aplicación de galería de demostración en este punto, deberías estar consciente de que después de crear y guardar un \parse file\ , la mejor práctica es siempre asociarlo con otro objeto de datos esto evitará la creación de archivos huérfanos en tu proyecto y te permitirá encontrarlos y eliminarlos en la nube de back4app \parse file\ proporciona una forma de eliminar archivos, pero es una operación sensible a la seguridad que no deberías realizar del lado del cliente en este tutorial, aprenderás la mejor práctica para eliminar los archivos de tu aplicación objetivo agregar acción de eliminar imagen a una aplicación de galería de demostración de react native requisitos previos para completar este tutorial, necesitarás completar el almacenamiento de archivos https //app archbee com/docs/ roxiyumxobue9i7uv49e/nijiqgqoc93tzrlydmcbi tutorial parse >= 4 2 0 1 configuración de la aplicación en la sección anterior, almacenamiento de archivos https //www back4app com/docs/js framework/react native files , construimos una aplicación de galería de demostración para subir y mostrar fotos de usuarios para este tutorial, incrementarás esta aplicación agregando un botón de eliminar a cada elemento de imagen en el \gallery js\ componente y realizando nuestra operación de eliminación si ya terminaste de codificar la aplicación de galería de demostración, puedes saltar al siguiente paso alternativamente, puedes clonar la base de código de la aplicación para seguir este tutorial para clonar el proyecto ejecuta \git clone https //github com/templates back4app/react native demo gallery app\ luego, instala las dependencias del proyecto 1 cd react native demo gallery app 2 3 # usando yarn 4 yarn install 5 6 # usando npm 7 npm install antes de ejecutar, recuerda configurar tus credenciales de back4app, \id de la app\ y \javascriptkey\ , en el \método de inicialización\ para información sobre la configuración de credenciales de la app, consulta instalar parse sdk https //www back4app com/docs/js framework/react native cli finalmente, ejecuta la aplicación de react native 1 # para android 2 npx react native run android 3 4 # para ios 5 npx react native run ios 2 creando un botón de eliminar en la aplicación de galería, el \gallery js\ componente renderiza la lista de imágenes de tu proyecto en la nube de back4app a continuación, crearás y agregarás un botón a cada elemento de imagen en la lista actual abre el \gallery js\ archivo y agrega el siguiente contenido 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; hemos refactorizado la función renderitem, incluyendo un botón de eliminar para todas las imágenes renderizadas sin embargo, el evento de clic del botón aún no tiene funcionalidad implementada lo harás en el siguiente paso 3 creando una función en la nube para eliminar imágenes has aprendido que un archivo siempre debe estar asociado con un objeto de datos en el almacenamiento de archivos https //www back4app com/docs/js framework/react native files no asociar archivos a objetos de datos resultará en archivos huérfanos esos archivos son inaccesibles dentro de tu aplicación una vez que no puedes encontrarlos, tampoco puedes eliminarlos de tu aplicación solo puedes borrarlos utilizando la opción de purge files en el panel de control de back4app el proceso de eliminación consiste en encontrar y luego eliminarlo en parse, el \destroy\ se utiliza para eliminar archivos referenciados sin embargo, usarlo en el lado del cliente no es seguro ya que requiere el \masterkey\ cuando construyes una aplicación de react native, todas tus claves están empaquetadas juntas, por lo tanto, cualquiera podría hacer ingeniería inversa, descompilar tu aplicación o proxy tu tráfico de red desde su dispositivo para encontrar tu \masterkey\ usar la clave maestra te permite eludir todos los mecanismos de seguridad de tu aplicación, como permisos a nivel de clase https //docs parseplatform org/js/guide/#class level permissions y acls https //docs parseplatform org/js/guide/#object level access control puedes encontrar más detalles sobre las mejores prácticas de seguridad de parse aquí https //blog back4app com/parse server security/ la mejor manera de eliminar archivos es hacerlo en el lado del servidor utilizando una función de cloud code https //www back4app com/docs/get started/cloud functions en nuestra aplicación de galería, crearemos una función de código en la nube para eso creemos un \main js\ archivo con la siguiente función en la nube 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 simplificar, utilizaremos el panel de control para cargar funciones en la nube directamente abre tu app \panel de control\ en sitio web de back4app https //www back4app com/ y haz clic en \core\ , luego \funciones de código en la nube\ sube el \main js\ archivo en la raíz de la \carpeta cloud/\ despliega la función en el servidor de back4app después de unos segundos, tu función de código en la nube estará disponible para ser llamada a través de rest o parse sdk 4 llamando a la función de eliminación en la nube desde tu aplicación una vez que hayas implementado con éxito tu función de código en la nube de back4app, procede a implementar la acción para cuando los usuarios presionen el botón de eliminar en nuestra aplicación de galería 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 ahora, cuando hagas clic en eliminar, tu aplicación activará \deletegallerypicture\ la función en la nube que eliminará con éxito una imagen 5 purga de archivos en algunas situaciones, cuando has perdido el rastro de los archivos de tu aplicación, necesitas eliminar archivos desde tu panel de control esto suele ocurrir cuando creas los archivos huérfanos mencionados en este artículo para obtener información sobre cómo limpiar los archivos de tu aplicación intenta preguntas comunes sobre archivos de back4app https //help back4app com/hc/en us/articles/360002327652 how to delete files completely o consulta documentación de configuración de la aplicación https //www back4app com/docs/parse dashboard/app settings ¡hecho! en este punto, has implementado con éxito una función de código en la nube y has aprendido cómo eliminar una imagen en una aplicación de react native