วิธีติดตั้งและใช้งานเทมเพลต Angular บน Back4App
10 นาที
เริ่มโปรเจกต์ angular ของคุณโดยใช้เทมเพลตที่สร้างไว้ล่วงหน้า บทนำ ในส่วนนี้คุณจะได้เรียนรู้วิธีการติดตั้ง parse และเริ่มต้นกับ angular 8 แอปใน 5 ขั้นตอนง่ายๆ ในทุกช่วงเวลา คุณสามารถทดสอบแอปที่สร้างขึ้นจากบทเรียนนี้ได้โดยการคลิก ที่นี่ https //angulardocs back4app io/ ข้อกำหนดเบื้องต้น ในการทำตามบทเรียนนี้ คุณจะต้องมี แอปที่สร้างขึ้นบน back4app หมายเหตุ ติดตาม บทเรียนการสร้างแอป parse ใหม่ https //www back4app com/docs/get started/new parse app เพื่อเรียนรู้วิธีการสร้างแอป parse บน back4app ติดตั้ง node package manager ในระบบของคุณ ดูที่ คู่มือการใช้งาน npm https //docs npmjs com/getting started สำหรับข้อมูลเพิ่มเติม ความรู้พื้นฐานใน angular https //angular io/ 1 ติดตั้ง angular cli คุณจะต้องติดตั้งเครื่องมือ angular cli (command line interface) ก่อน เครื่องมือนี้ช่วยให้คุณเริ่มโปรเจกต์ angular ใหม่และช่วยเหลือคุณในระหว่างการพัฒนา ในเทอร์มินัลของคุณ กรุณาพิมพ์บรรทัดต่อไปนี้ npm install g @angular/cli 2 รับเทมเพลต ดาวน์โหลดเทมเพลตจากที่เก็บ github ของเรา คุณสามารถทำได้โดยใช้คำสั่งต่อไปนี้ curl lok https //github com/templates back4app/angular integration/archive/master zip && unzip master zip ไปที่โฟลเดอร์ของโปรเจกต์ของคุณและติดตั้งทุกอย่างที่จำเป็นโดยการรันคำสั่งต่อไปนี้ cd angular integration master/ && npm i 3 อัปเดตข้อมูลประจำตัวของแอป อัปเดตค่าของสตริงสำหรับ \<font color="#2166ae">app id\</font> และ \<font color="#2166ae">javascript key\</font> เพื่อกำหนดข้อมูลประจำตัวของแอป การใช้ parse javascript sdk จะใช้การตั้งค่าเหล่านี้ในการเชื่อมต่อแอปของคุณกับเซิร์ฟเวอร์ back4app ไปที่แดชบอร์ดแอปของคุณที่ เว็บไซต์ back4app https //www back4app com/ และคลิกที่ การตั้งค่าเซิร์ฟเวอร์ ค้นหา การตั้งค่าหลัก บล็อกและคลิกที่ การตั้งค่า ต้องการความช่วยเหลือ? ดูที่ ขั้นตอนเหล่านี้ https //www back4app com/docs/platform/app settings เพื่อค้นหาคีย์ของคุณ คัดลอก app id และ javascript key และกลับไปที่โฟลเดอร์ของโปรเจกต์ของคุณ ไปที่ \<font color="#2166ae">src\</font> > \<font color="#2166ae">environments\</font> > \<font color="#2166ae">environment ts\</font> และวางคีย์ของคุณ 4 ทดสอบการเชื่อมต่อของคุณในเครื่อง เริ่มโปรเจกต์โดยการรัน \<font color="#2166ae">ng serve\</font> ไปที่ \<font color="#2166ae">http //localhost 4200/\</font> รอจนกว่าหน้าล็อกอินจะปรากฏ สร้างผู้ใช้ตัวอย่างโดยการคลิกที่ปุ่มลงทะเบียน 5 อัปโหลดโค้ดของคุณไปยังเซิร์ฟเวอร์ back4app ในการปรับใช้แอปของคุณด้วย back4app คุณต้องสร้างแอปของคุณให้ถูกต้องก่อน ใช้คำสั่งต่อไปนี้เพื่อคอมไพล์และสร้างแอปของคุณไปยัง \<font color="#2166ae">dist\</font> ไดเรกทอรี $ ng build จากนั้นคุณต้องอัปโหลด \<font color="#2166ae">dist\</font> ไดเรกทอรีที่สร้างขึ้นไปยังโฟลเดอร์สาธารณะของ cloud code ของคุณ เพื่อทำเช่นนั้นให้เลือกหนึ่งในตัวเลือกในการปรับใช้ 5 1 ปรับใช้ผ่าน cli ในการอัปโหลดผ่าน back4app command line interface คุณสามารถดูที่ ขั้นตอนเหล่านี้ https //www back4app com/docs/command line tool/how to use 5 2 การปรับใช้ผ่านแดชบอร์ด เพื่ออัปโหลดโค้ดผ่านอินเทอร์เฟซภาพของ back4app ให้ไปที่แดชบอร์ดของแอปของคุณที่ เว็บไซต์ back4app https //www back4app com/ และคลิกที่ cloud code functions คลิกที่ \<font color="#2166ae">+เพิ่ม\</font> ปุ่มและเลือกไฟล์ทั้งหมดจาก \<font color="#2166ae">dist\</font> ไดเรกทอรี ย้ายไปที่ \<font color="#2166ae">public\</font> และจากนั้นคลิก \<font color="#2166ae">บันทึก\</font> , ตามที่แสดงที่นี่ สุดท้ายเพื่อปรับใช้แอปของคุณให้ดูที่ คู่มือการโฮสต์เว็บ back4app https //www back4app com/docs/platform/parse web hosting เสร็จสิ้น! ในจุดนี้คุณได้เรียนรู้วิธีเริ่มต้นกับแอป angular แล้ว