ติดตั้งและเชื่อมต่อ Parse SDK กับโปรเจกต์ Ionic
11 นาที
เริ่มโปรเจกต์ ionic ของคุณโดยใช้เทมเพลตที่สร้างไว้ล่วงหน้า บทนำ ในส่วนนี้คุณจะได้เรียนรู้วิธีการติดตั้ง parse javascript sdk ลงในโปรเจกต์ ionic ของคุณ ดูข้อมูลเพิ่มเติมเกี่ยวกับ parse sdk ที่ เอกสารอ้างอิง api ของ parse javascript sdk https //parseplatform org/parse sdk js/api/4 3 1/ และ เอกสารเปิดแหล่งสำหรับ javascript sdk ของ parse https //docs parseplatform org/js/guide/ ข้อกำหนดเบื้องต้น ในการทำตามบทเรียนนี้ คุณจะต้องมี แอปที่สร้างขึ้นที่ back4app ทำตาม บทเรียนการสร้างแอป parse ใหม่ https //www back4app com/docs/get started/new parse app เพื่อเรียนรู้วิธีการสร้างแอป parse ที่ back4app โปรเจกต์ ionic ที่เริ่มต้นแล้ว ทำตาม บทเรียนเริ่มต้น https //ionicframework com/docs/intro/cli หากคุณยังไม่ได้ตั้งค่า 1 ติดตั้ง sdk เนื่องจากแพ็คเกจ ionic ถูกจัดการโดย \<font color="#2166ae">npm\</font> , สิ่งที่คุณต้องทำคือรันคำสั่งต่อไปนี้ที่ระดับโฟลเดอร์โปรเจกต์ของคุณ $ npm install parse 2 เชื่อมต่อแอป parse ของคุณ นำเข้า \<font color="#2166ae">parse\</font> ใน \<font color="#2166ae">home ts\</font> หรือในหน้าที่คุณต้องการใช้งาน home ts 1 import parse from 'parse'; ใช้ \<font color="#2166ae">parse serverurl\</font> เพื่อกำหนด url สำหรับ back4app parse server home ts 1 parse serverurl = 'https //parseapi back4app com/'; ใช้ \<font color="#2166ae">parse initialize\</font> เมธอดเพื่อกำหนดโทเค็นการตรวจสอบสิทธิ์ เชื่อมต่อหน้าของคุณกับเซิร์ฟเวอร์ back4app home ts 1 parse initialize("your app id", "your js key"); ค้นหา application id และ client key ของคุณ ไปที่แดชบอร์ดแอปของคุณที่เว็บไซต์ back4app ไปที่การตั้งค่าของแอป คลิกที่ \<font color="#2166ae">การตั้งค่าเซิร์ฟเวอร์\</font> > \<font color="#2166ae">การตั้งค่าหลัก\</font> บล็อก > \<font color="#2166ae">การตั้งค่า\</font> กลับไปที่ฟังก์ชัน parse initialize ของคุณและวาง \<font color="#2166ae">applicationid\</font> และ \<font color="#2166ae">javascriptkey\</font> ของคุณ 3 ทดสอบการเชื่อมต่อของคุณ สร้างโค้ดทดสอบ ทดสอบการตั้งค่าเริ่มต้นของคุณด้วยโค้ดต่อไปนี้ซึ่งสร้าง \<font color="#2166ae">การติดตั้ง\</font> อ็อบเจ็กต์ ก่อนอื่น ให้สร้างตัวแปรเพื่อแสดงผลลัพธ์ในแอปของคุณ \<font color="#2166ae">หน้าแรก\</font> home ts 1 result string; ถัดไป แสดงตัวแปรนั้นใน \<font color="#2166ae">หน้าแรก\</font> ของคุณ home html 1 2 {{result}} 3 สุดท้าย เพิ่มโค้ดที่สร้างวัตถุ \<font color="#2166ae">การติดตั้ง\</font> และบันทึกมัน เพิ่มโค้ดนี้หลังจากตั้งค่าการสื่อสาร home ts 1 let install = new parse installation(); 2 3 install save(null, { 4 success (install) => { 5 // execute any logic that should take place after the object is saved 6 this result = 'new object created with objectid ' + install id; 7 }, 8 error (install, error) => { 9 // execute any logic that should take place if the save fails 10 // error is a parse error with an error code and message 11 this result = ('failed to create new object, with error code ' + error message tostring()); 12 } 13 }); เรียกใช้แอปของคุณในเบราว์เซอร์ $ ionic serve 2 รอจนกว่าจะมีแท็บใหม่เปิดในเบราว์เซอร์ของคุณ ฉัน เพื่อดูหน้าในกรอบโทรศัพท์ ให้กด \<font color="#2166ae">f12\</font> 3 เข้าสู่ระบบที่ เว็บไซต์ back4app https //www back4app com/ 4 ค้นหาแอปของคุณและคลิกที่ \<font color="#2166ae">แดชบอร์ด\</font> 5 คลิกที่ \<font color="#2166ae">core\</font> 6 ไปที่ \<font color="#2166ae">เบราว์เซอร์\</font> หากทุกอย่างทำงานได้อย่างถูกต้อง คุณควรพบคลาสที่ชื่อว่า \<font color="#2166ae">การติดตั้ง\</font> ดังนี้ เสร็จสิ้น! ในจุดนี้ คุณได้เรียนรู้วิธีเริ่มต้นกับแอป ionic แล้ว