Integrasi Parse Server SDK dengan React: Panduan Teknis

panduan cepat pendahuluan dalam bagian ini, anda akan belajar bagaimana memulai dengan back4app menggunakan proyek yang sudah ada atau baru menggunakan react anda akan menginstal parse sdk parse sdk , menginisialisasi parse menggunakan kunci aplikasi kunci aplikasi , dan melakukan panggilan api pertama anda untuk menyimpan dan membaca objek data dari back4app prasyarat untuk menyelesaikan tutorial ini, anda akan membutuhkan sebuah aplikasi yang dibuat di back4app; versi terbaru dari node js , termasuk yarn yarn dan npx npx 1 membuat proyek react jika anda sudah memiliki proyek react yang berfungsi, anda dapat melewati langkah berikutnya jalankan perintah berikut di direktori di mana anda ingin menyimpan proyek, sambil memberi tahu namanya juga, dalam hal ini, back4app guide react back4app guide react jika node js node js telah dikonfigurasi dengan benar, anda akan melihat proyek sedang dibuat di prompt terminal anda setelah selesai, anda akan melihat pesan yang memberi tahu anda bahwa proses tersebut berhasil buka proyek di editor kode favorit anda dan mari kita mulai mengintegrasikan parse 2 instal dependensi sekarang mari kita instal satu satunya dependensi yang dibutuhkan, parse javascript sdk parse javascript sdk , untuk mengintegrasikan aplikasi anda dengan server back4app jalankan perintah berikut di direktori root proyek anda 3 dapatkan kunci aplikasi anda setelah membuat aplikasi anda di back4app, pergi ke dasbor aplikasi anda dan dapatkan kunci aplikasi anda di bawah pengaturan aplikasi >keamanan & kunci pengaturan aplikasi >keamanan & kunci (periksa gambar di bawah) perhatikan bahwa anda akan selalu membutuhkan dua kunci untuk terhubung dengan back4app, yaitu id aplikasi id aplikasi dan kunci javascript kunci javascript 4 inisialisasi parse dan sambungkan ke back4app pergi ke app js app js anda dan inisialisasi parse sdk parse sdk menggunakan application id application id dan javascript key javascript key (periksa langkah sebelumnya) 1 // import parse minified version 2 import parse from 'parse/dist/parse min js'; 3 4 // your parse initialization configuration goes here 5 const parse application id = 'your application id here'; 6 const parse host url = 'https //parseapi back4app com/'; 7 const parse javascript key = 'your javascript key here'; 8 parse initialize(parse application id, parse javascript key); 9 parse serverurl = parse host url; 5 simpan dan baca objek data sederhana aplikasi anda telah diinisialisasi dan dapat terhubung dengan aman ke layanan cloud back4app mari kita buat komponen yang berisi dua fungsi sederhana di dalamnya untuk menyimpan dan mengambil data dari database back4app anda buat file baru bernama personcomponent js personcomponent js di direktori src src anda dan tambahkan kode berikut 1 import react, { usestate } from 'react'; 2 import parse from 'parse/dist/parse min js'; 3 4 export const personcomponent = () => { 5 // state variables 6 const \[person, setperson] = usestate(null); 7 8 async function addperson() { 9 try { 10 // create a new parse object instance 11 const person = new parse object('person'); 12 // define the attributes you want for your object 13 person set('name', 'john'); 14 person set('email', 'john\@back4app com'); 15 // save it on back4app data store 16 await person save(); 17 alert('person saved!'); 18 } catch (error) { 19 console log('error saving new person ', error); 20 } 21 } 22 23 async function fetchperson() { 24 // create your parse query using the person class you've created 25 const query = new parse query('person'); 26 // use the equalto filter to look for user which the name is john this filter can be used in any data type 27 query equalto('name', 'john'); 28 // run the query 29 const person = await query first(); 30 // access the parse object attributes 31 console log('person name ', person get('name')); 32 console log('person email ', person get('email')); 33 console log('person id ', person id); 34 setperson(person); 35 } 36 37 return ( 38 \<div> 39 \<button onclick={addperson}>add person\</button> 40 \<button onclick={fetchperson}>fetch person\</button> 41 {person !== null && ( 42 \<div> 43 \<p>{`name ${person get('name')}`}\</p> 44 \<p>{`email ${person get('email')}`}\</p> 45 \</div> 46 )} 47 \</div> 48 ); 49 }; metode addperson addperson membuat sebuah parse object parse object yang mewakili sebuah orang orang kelas, mengatur propertinya kemudian menyimpannya di penyimpanan data cloud back4app metode fetchperson fetchperson mengambil sebuah parse object parse object yang memiliki atribut name name yang sama dengan john john ketika query selesai, anda akan dapat mengakses atribut orang tersebut menggunakan metode get get perhatikan juga elemen antarmuka dalam komponen ini, mereka terdiri dari dua tombol yang memanggil metode dan juga dua paragraf yang mengambil person person melalui variabel status kami sekarang perlu mengimpor dan menggunakan komponen ini di app js app js utama anda file app js app js anda harus terlihat seperti ini, setelah menghapus sebagian besar kode placeholder di dalamnya 1 import ' /app css'; 2 import parse from 'parse/dist/parse min js'; 3 import { personcomponent } from ' /personcomponent'; 4 5 // your parse initialization configuration goes here 6 const parse application id = 'your parse application id'; 7 const parse host url = 'https //parseapi back4app com/'; 8 const parse javascript key = 'your parse javascript key'; 9 parse initialize(parse application id, parse javascript key); 10 parse serverurl = parse host url; 11 12 function app() { 13 return ( 14 \<div classname="app"> 15 \<header classname="app header"> 16 \<personcomponent /> 17 \</header> 18 \</div> 19 ); 20 } 21 22 export default app; 6 uji aplikasi anda buka terminal proyek anda jalankan yarn start yarn start browser anda harus terbuka setelah membangun dengan aplikasi yang berjalan klik tombol untuk menambahkan orang orang pertama, lalu klik untuk mengambil orang orang yang sama anda telah menyimpan dan mengambil objek data dari back4app anda juga dapat memeriksa data di dasbor aplikasi dan mengklik kelas orang apa yang harus dilakukan selanjutnya seperti yang telah anda lihat, cara termudah untuk mengintegrasikan back4app ke dalam proyek react anda adalah melalui parse javascript sdk https //www npmjs com/package/parse parse sdk memberikan pengalaman pengembangan yang sangat baik melalui lapisan yang ringan dan mudah digunakan yang menyediakan konfigurasi minimal dan penggunaan kembali kode