การติดตั้ง Parse Server SDK ในโปรเจกต์ React

เริ่มต้นอย่างรวดเร็ว บทนำ ในส่วนนี้ คุณจะได้เรียนรู้วิธีเริ่มต้นใช้งาน back4app โดยใช้โปรเจกต์ที่มีอยู่หรือโปรเจกต์ใหม่ที่ใช้ react คุณจะติดตั้ง parse sdk parse sdk , เริ่มต้น parse โดยใช้ app keys app keys , และทำการเรียก api ครั้งแรกของคุณเพื่อบันทึกและอ่านวัตถุข้อมูลจาก back4app ข้อกำหนดเบื้องต้น ในการทำตามบทเรียนนี้ คุณจะต้องมี แอป https //www back4app com/docs/get started/new parse app บน back4app; เวอร์ชันล่าสุดของ https //nodejs org/ , รวมถึง yarn yarn และ npx npx 1 การสร้างโปรเจกต์ react หากคุณมีโปรเจกต์ react ที่ทำงานอยู่แล้ว คุณสามารถข้ามไปยังขั้นตอนถัดไปได้ รันคำสั่งต่อไปนี้ในไดเรกทอรีที่คุณต้องการเก็บโปรเจกต์ โดยระบุชื่อของมันด้วย ในกรณีนี้คือ back4app guide react back4app guide react npx create react app back4app guide react หาก node js node js ถูกกำหนดค่าอย่างถูกต้อง คุณควรเห็นโปรเจกต์ถูกสร้างขึ้นในพรอมต์เทอร์มินัลของคุณ หลังจากเสร็จสิ้น คุณจะเห็นข้อความที่แจ้งว่ากระบวนการสำเร็จแล้ว เปิดโปรเจกต์ในโปรแกรมแก้ไขโค้ดที่คุณชื่นชอบและเริ่มต้นการรวม parse 2 ติดตั้ง dependencies ตอนนี้เรามาติดตั้ง dependencies ที่จำเป็นเพียงอย่างเดียวคือ parse javascript sdk parse javascript sdk , เพื่อรวมแอปของคุณกับเซิร์ฟเวอร์ back4app รันคำสั่งต่อไปนี้ในไดเรกทอรีรากของโปรเจกต์ของคุณ yarn add parse 3 รับ app keys ของคุณ หลังจากสร้างแอปของคุณบน back4app ให้ไปที่แดชบอร์ดของแอปของคุณและรับ app keys ของคุณภายใต้ app settings >security & keys app settings >security & keys (ดูภาพด้านล่าง) โปรดทราบว่าคุณจะต้องใช้คีย์สองตัวเสมอในการเชื่อมต่อกับ back4app คือ application id application id และ javascript key javascript key 4 เริ่มต้น parse และเชื่อมต่อกับ back4app ไปที่ app js app js และเริ่มต้น parse sdk parse sdk โดยใช้ application id application id และ javascript key javascript key (ตรวจสอบขั้นตอนก่อนหน้า) 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 บันทึกและอ่านวัตถุข้อมูลง่ายๆ แอปของคุณถูกเริ่มต้นและสามารถเชื่อมต่อกับบริการคลาวด์ back4app ได้อย่างปลอดภัย ตอนนี้เรามาสร้างคอมโพเนนต์ที่มีฟังก์ชันง่ายๆ สองฟังก์ชันภายในเพื่อบันทึกและเรียกคืนข้อมูลจากฐานข้อมูล back4app ของคุณ สร้างไฟล์ใหม่ชื่อ personcomponent js personcomponent js ใน src src ไดเรกทอรีของคุณและเพิ่มโค้ดต่อไปนี้ 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 }; วิธีการ addperson addperson สร้าง parse object parse object ใหม่ที่แทนที่ person person คลาส ตั้งค่าคุณสมบัติแล้วบันทึกลงในคลาวด์ back4app วิธีการ fetchperson fetchperson ดึง parse object parse object ที่มีคุณสมบัติ name name เท่ากับ john john เมื่อการค้นหาสำเร็จ คุณจะสามารถเข้าถึงคุณสมบัติของบุคคลนั้นได้โดยใช้ get get วิธีการ โปรดสังเกตองค์ประกอบของอินเทอร์เฟซในส่วนประกอบนี้ ซึ่งประกอบด้วยปุ่มสองปุ่มที่เรียกใช้วิธีการและยังมีย่อหน้าสองย่อหน้าที่ดึงข้อมูลที่ได้รับมา person person ผ่านตัวแปรสถานะ ตอนนี้เราจำเป็นต้องนำเข้ามาและใช้ส่วนประกอบนี้ใน app js app js หลักของคุณ ไฟล์ app js app js ของคุณควรมีลักษณะประมาณนี้ หลังจากลบโค้ดตัวอย่างส่วนใหญ่ในนั้น 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 ทดสอบแอปของคุณ เปิดเทอร์มินัลของโปรเจกต์ของคุณ รัน yarn start yarn start เบราว์เซอร์ของคุณควรเปิดขึ้นหลังจากที่สร้างแอปพลิเคชันที่กำลังทำงานอยู่ คลิกปุ่มเพื่อเพิ่ม บุคคล บุคคล ก่อน จากนั้นคลิกเพื่อดึง บุคคล บุคคล เดียวกัน คุณได้บันทึกและดึงวัตถุข้อมูลจาก back4app แล้ว คุณยังสามารถตรวจสอบข้อมูลบน https //parse dashboard back4app com/apps/ และคลิกที่คลาสบุคคล ทำอะไรต่อไป ตามที่คุณได้เห็น วิธีที่ง่ายที่สุดในการรวม back4app เข้ากับโปรเจกต์ react ของคุณคือผ่าน https //www npmjs com/package/parse parse sdk มอบประสบการณ์การพัฒนาที่ยอดเยี่ยมผ่านเลเยอร์ที่เบาและใช้งานง่ายซึ่งให้การกำหนดค่าต่ำสุดและการนำโค้ดกลับมาใช้ใหม่