การลบไฟล์ในแอป React Native ด้วย Parse SDK

ลบไฟล์จากแอป react native บทนำ ในคู่มือนี้ คุณจะได้เรียนรู้วิธีที่ดีที่สุดในการลบไฟล์จากคลาวด์ back4app ในแอป react native ในการจัดการไฟล์แอปพลิเคชันใน back4app เราใช้ parse file parse file คลาสยูทิลิตี้ คุณสามารถทำการเก็บ, ดึง, และลบไฟล์โดยใช้คลาสนี้ ในส่วนก่อนหน้า https //www back4app com/docs/js framework/react native files , เราได้พูดถึงการเก็บและดึงไฟล์โดยการสร้างแอปแกลเลอรีตัวอย่าง ในจุดนี้ คุณควรทราบว่าหลังจากสร้างและบันทึก parse file parse file , แนวทางที่ดีที่สุดคือการเชื่อมโยงกับวัตถุข้อมูลอื่นเสมอ ซึ่งจะช่วยป้องกันการสร้างไฟล์ที่ไม่มีเจ้าของในโปรเจกต์ของคุณและทำให้คุณสามารถค้นหาและลบไฟล์เหล่านั้นในคลาวด์ back4app ได้ parse file parse file มีวิธีการลบไฟล์ แต่เป็นการดำเนินการที่มีความปลอดภัยสูงซึ่งคุณไม่ควรทำในฝั่งไคลเอนต์ ในบทเรียนนี้ คุณจะได้เรียนรู้แนวทางที่ดีที่สุดในการลบไฟล์แอปพลิเคชันของคุณ เป้าหมาย เพิ่มการลบภาพในแอปแกลเลอรีตัวอย่าง react native ข้อกำหนดเบื้องต้น ในการทำบทเรียนนี้ให้เสร็จสมบูรณ์ คุณจะต้องการ ทำบทเรียน https //app archbee com/docs/ roxiyumxobue9i7uv49e/nijiqgqoc93tzrlydmcbi เสร็จสิ้น parse >= 4 2 0 1 การตั้งค่าแอปพลิเคชัน ในส่วนก่อนหน้า https //www back4app com/docs/js framework/react native files , เราได้สร้างแอปแกลเลอรีตัวอย่างเพื่ออัปโหลดและแสดงภาพของผู้ใช้ สำหรับบทเรียนนี้ คุณจะเพิ่มแอปนี้โดยการเพิ่มปุ่มลบให้กับแต่ละรายการภาพใน gallery js gallery js คอมโพเนนต์และดำเนินการลบ หากคุณได้เสร็จสิ้นการเขียนโค้ดแอปแกลเลอรีตัวอย่างแล้ว คุณสามารถข้ามไปยังขั้นตอนถัดไป หรือคุณสามารถโคลนฐานรหัสสำหรับแอปเพื่อทำตามบทแนะนำนี้ได้ เพื่อโคลนโปรเจกต์ให้รัน git clone https //github com/templates back4app/react native demo gallery app git clone https //github com/templates back4app/react native demo gallery app จากนั้นติดตั้งการพึ่งพาของโปรเจกต์ 1 cd react native demo gallery app 2 3 # ใช้ yarn 4 yarn install 5 6 # ใช้ npm 7 npm install ก่อนที่จะรัน อย่าลืมตั้งค่าข้อมูลประจำตัว back4app ของคุณ, app id app id และ javascriptkey javascriptkey , ใน initialize initialize วิธีการ สำหรับข้อมูลเกี่ยวกับการตั้งค่าข้อมูลประจำตัวของแอปดูที่ https //www back4app com/docs/js framework/react native cli สุดท้าย รันแอปพลิเคชัน react native 1 # สำหรับ android 2 npx react native run android 3 4 # สำหรับ ios 5 npx react native run ios 2 การสร้างปุ่มลบ ในแอปพลิเคชันแกลเลอรี gallery js gallery js คอมโพเนนต์จะแสดงรายการภาพจากโปรเจกต์ back4app ของคุณ ถัดไป คุณจะสร้างและเพิ่มปุ่มไปยังทุกไอเท็มภาพในรายการปัจจุบัน เปิดไฟล์ gallery js gallery js และเพิ่มเนื้อหาต่อไปนี้ 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; เราได้ปรับโครงสร้างฟังก์ชัน renderitem ใหม่ รวมถึงปุ่มลบสำหรับภาพที่แสดงทั้งหมด อย่างไรก็ตาม เหตุการณ์คลิกปุ่มยังไม่มีฟังก์ชันการทำงานที่ถูกนำไปใช้ คุณจะทำในขั้นตอนถัดไป 3 การสร้างฟังก์ชันคลาวด์ลบภาพ คุณได้เรียนรู้ว่าควรมีไฟล์ที่เชื่อมโยงกับวัตถุข้อมูลเสมอใน https //www back4app com/docs/js framework/react native files การไม่เชื่อมโยงไฟล์กับวัตถุข้อมูลจะทำให้เกิดไฟล์ที่ไม่มีเจ้าของ ไฟล์เหล่านั้นไม่สามารถเข้าถึงได้ภายในแอปของคุณ เมื่อคุณไม่สามารถหามันได้ คุณก็ไม่สามารถลบมันออกจากแอปของคุณได้เช่นกัน คุณสามารถลบมันได้โดยใช้ตัวเลือกลบไฟล์ในแดชบอร์ด back4app กระบวนการลบประกอบด้วยการค้นหาและจากนั้นลบมัน ใน parse, destroy destroy ใช้เพื่อทำการลบไฟล์ที่อ้างอิง อย่างไรก็ตาม การใช้มันในฝั่งลูกค้าไม่ปลอดภัยเพราะมันต้องการ masterkey masterkey เมื่อคุณสร้างแอป react native คีย์ทั้งหมดของคุณจะถูกรวมกัน ดังนั้นใครก็ตามสามารถย้อนกลับวิศวกรรม ถอดรหัสแอปของคุณ หรือโปรซี่การจราจรเครือข่ายของคุณจากอุปกรณ์ของพวกเขาเพื่อค้นหา masterkey masterkey การใช้ master key ช่วยให้คุณข้ามกลไกความปลอดภัยทั้งหมดของแอปของคุณ เช่น https //docs parseplatform org/js/guide/#class level permissions และ https //docs parseplatform org/js/guide/#object level access control คุณสามารถหาข้อมูลเพิ่มเติมเกี่ยวกับแนวทางปฏิบัติด้านความปลอดภัยของ parse https //blog back4app com/parse server security/ วิธีที่ดีที่สุดในการลบไฟล์คือการทำในฝั่งเซิร์ฟเวอร์โดยใช้ https //www back4app com/docs/get started/cloud functions ในแอปแกลเลอรีของเรา เราจะสร้างฟังก์ชันโค้ดคลาวด์สำหรับสิ่งนั้น มาสร้างไฟล์ main js main js ด้วยฟังก์ชันคลาวด์ต่อไปนี้ 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 }); เพื่อความสะดวก เราจะใช้แดชบอร์ดในการอัปโหลดฟังก์ชันคลาวด์โดยตรง เปิดแอปของคุณ แดชบอร์ด แดชบอร์ด ที่ https //www back4app com/ และคลิกที่ core core , จากนั้น ฟังก์ชันโค้ดคลาวด์ ฟังก์ชันโค้ดคลาวด์ อัปโหลด main js main js ไฟล์ไปยังรากของ cloud/ cloud/ โฟลเดอร์ ปรับใช้ฟังก์ชันไปยังเซิร์ฟเวอร์ back4app หลังจากไม่กี่วินาที ฟังก์ชันโค้ดคลาวด์ของคุณจะสามารถเรียกใช้งานได้ผ่าน rest หรือ parse sdk 4 เรียกใช้ฟังก์ชันลบคลาวด์จากแอปของคุณ เมื่อคุณได้ปรับใช้ฟังก์ชัน back4app cloud code ของคุณสำเร็จแล้ว ให้ดำเนินการตามขั้นตอนเมื่อผู้ใช้กดปุ่มลบในแอปแกลเลอรีของเรา 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 ตอนนี้เมื่อคุณคลิกที่ลบ แอปของคุณจะเรียกใช้ deletegallerypicture deletegallerypicture ฟังก์ชันคลาวด์ที่จะลบภาพได้สำเร็จ 5 การลบไฟล์ ในบางสถานการณ์ เมื่อคุณสูญเสียการติดตามไฟล์แอปพลิเคชันของคุณ คุณจำเป็นต้องลบไฟล์จากแดชบอร์ดของคุณ ซึ่งมักจะเกิดขึ้นเมื่อคุณสร้างไฟล์ที่ไม่มีเจ้าของตามที่กล่าวถึงในบทความนี้ สำหรับข้อมูลเกี่ยวกับวิธีการทำความสะอาดไฟล์แอปพลิเคชันของคุณ ลอง https //help back4app com/hc/en us/articles/360002327652 how to delete files completely หรือดู https //www back4app com/docs/parse dashboard/app settings เสร็จสิ้น! ในจุดนี้ คุณได้ปรับใช้ฟังก์ชันโค้ดคลาวด์สำเร็จแล้วและได้เรียนรู้วิธีการลบภาพในแอปพลิเคชัน react native