Panduan Menghapus File Back4App di React Native

hapus berkas dari aplikasi react native pendahuluan dalam panduan ini, anda akan belajar cara terbaik untuk menghapus berkas dari cloud back4app dalam aplikasi react native untuk mengelola berkas aplikasi di back4app, kami menggunakan kelas utilitas parse file parse file anda dapat melakukan operasi penyimpanan, pengambilan, dan penghapusan menggunakan kelas ini di bagian sebelumnya, https //www back4app com/docs/js framework/react native files , kami membahas penyimpanan dan pengambilan berkas dengan membuat aplikasi galeri demo pada titik ini, anda harus menyadari bahwa setelah membuat dan menyimpan sebuah parse file parse file , praktik terbaik adalah selalu mengaitkannya dengan objek data lain ini akan mencegah pembuatan berkas yatim piatu dalam proyek anda dan memungkinkan anda untuk menemukannya dan menghapusnya di cloud back4app parse file parse file menyediakan cara untuk menghapus berkas, tetapi ini adalah operasi yang sensitif terhadap keamanan yang sebaiknya tidak anda lakukan di sisi klien dalam tutorial ini, anda akan belajar praktik terbaik untuk menghapus berkas aplikasi anda tujuan tambahkan aksi hapus gambar ke aplikasi galeri demo react native prasyarat untuk menyelesaikan tutorial ini, anda akan membutuhkan selesaikan https //app archbee com/docs/ roxiyumxobue9i7uv49e/nijiqgqoc93tzrlydmcbi tutorial parse >= 4 2 0 1 pengaturan aplikasi di bagian sebelumnya, https //www back4app com/docs/js framework/react native files , kami membangun aplikasi galeri demo untuk mengunggah dan menampilkan gambar pengguna untuk tutorial ini, anda akan menambah aplikasi ini dengan menambahkan tombol hapus ke setiap item gambar di gallery js gallery js komponen dan melakukan operasi hapus kami jika anda sudah menyelesaikan pengkodean aplikasi galeri demo, maka anda dapat melanjutkan ke langkah berikutnya sebagai alternatif, anda dapat mengkloning basis kode untuk aplikasi untuk mengikuti tutorial ini untuk mengkloning proyek jalankan git clone https //github com/templates back4app/react native demo gallery app git clone https //github com/templates back4app/react native demo gallery app kemudian, instal dependensi proyek 1 cd react native demo gallery app 2 3 # menggunakan yarn 4 yarn install 5 6 # menggunakan npm 7 npm install sebelum menjalankan, ingat untuk mengatur kredensial back4app anda, app id app id dan javascriptkey javascriptkey , pada metode inisialisasi metode inisialisasi untuk informasi tentang pengaturan kredensial aplikasi lihat https //www back4app com/docs/js framework/react native cli akhirnya, jalankan aplikasi react native 1 # untuk android 2 npx react native run android 3 4 # untuk ios 5 npx react native run ios 2 membuat tombol hapus di aplikasi galeri, gallery js gallery js komponen merender daftar gambar dari proyek cloud back4app anda selanjutnya, anda akan membuat dan menambahkan tombol ke setiap item gambar dalam daftar saat ini buka gallery js gallery js file dan tambahkan konten berikut 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; kami telah merombak fungsi renderitem, termasuk tombol hapus untuk semua gambar yang dirender namun, peristiwa klik tombol masih belum memiliki fungsionalitas yang diterapkan anda akan melakukannya di langkah berikutnya 3 membuat fungsi cloud untuk menghapus gambar anda telah belajar bahwa sebuah file harus selalu dikaitkan dengan objek data pada https //www back4app com/docs/js framework/react native files tidak mengaitkan file dengan objek data akan mengakibatkan file yatim file file tersebut tidak dapat diakses di dalam aplikasi anda begitu anda tidak dapat menemukannya, anda juga tidak dapat menghapusnya dari aplikasi anda anda hanya dapat menghapusnya menggunakan opsi hapus file di dasbor back4app proses penghapusan terdiri dari menemukan dan kemudian menghapusnya di parse, destroy destroy metode digunakan untuk menghapus file yang dirujuk namun, menggunakannya di sisi klien tidak aman karena memerlukan masterkey masterkey ketika anda membangun aplikasi react native, semua kunci anda digabungkan, oleh karena itu, siapa pun dapat membalikkan rekayasa, mendekompilasi aplikasi anda atau memproxy lalu lintas jaringan anda dari perangkat mereka untuk menemukan masterkey masterkey menggunakan master key memungkinkan anda untuk melewati semua mekanisme keamanan aplikasi anda, seperti https //docs parseplatform org/js/guide/#class level permissions dan https //docs parseplatform org/js/guide/#object level access control anda dapat menemukan lebih banyak detail tentang praktik terbaik keamanan parse https //blog back4app com/parse server security/ cara terbaik untuk menghapus file adalah melakukannya di sisi server menggunakan https //www back4app com/docs/get started/cloud functions di aplikasi galeri kami, kami akan membuat fungsi cloud code untuk itu mari kita buat sebuah main js main js file dengan fungsi cloud berikut 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 }); untuk kesederhanaan, kita akan menggunakan dashboard untuk mengunggah fungsi cloud secara langsung buka aplikasi anda dashboard dashboard di https //www back4app com/ dan klik pada core core , lalu fungsi kode cloud fungsi kode cloud unggah main js main js file di root dari cloud/ cloud/ folder terapkan fungsi ke server back4app setelah beberapa detik, fungsi kode cloud anda akan tersedia untuk dipanggil melalui rest atau parse sdk 4 memanggil fungsi hapus cloud dari aplikasi anda setelah anda berhasil menerapkan fungsi cloud code back4app anda, silakan implementasikan tindakan untuk saat pengguna menekan tombol hapus di aplikasi galeri kami 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 sekarang ketika anda mengklik hapus, aplikasi anda akan memicu deletegallerypicture deletegallerypicture fungsi cloud yang akan berhasil menghapus gambar 5 menghapus berkas dalam beberapa situasi, ketika anda kehilangan jejak berkas aplikasi anda, anda perlu menghapus berkas dari dasbor anda ini biasanya terjadi ketika anda membuat berkas yatim piatu yang disebutkan dalam artikel ini untuk informasi tentang cara membersihkan berkas aplikasi anda coba https //help back4app com/hc/en us/articles/360002327652 how to delete files completely atau lihat https //www back4app com/docs/parse dashboard/app settings selesai! pada titik ini, anda telah berhasil menerapkan fungsi kode cloud dan belajar bagaimana menghapus gambar dalam aplikasi react native