วิธีสร้างส่วนหน้าของ Angular และเชื่อมต่อกับส่วนหลัง?

ในบทแนะนำนี้ คุณจะสร้างแอปพลิเคชันรายการที่ต้องทำโดยใช้ angular และเชื่อมต่อกับบริการแบ็กเอนด์ที่จัดการโดย back4app คู่มือนี้ออกแบบมาสำหรับคุณหากคุณต้องการเชี่ยวชาญการดำเนินการ crud (สร้าง, อ่าน, อัปเดต, ลบ) ที่จำเป็นและสร้างอินเทอร์เฟซที่มีพลศาสตร์และตอบสนองได้ด้วย angular เมื่อสิ้นสุดบทแนะนำนี้ แอปพลิเคชันของคุณจะสื่อสารได้อย่างราบรื่นกับแบ็กเอนด์ที่จัดการการจัดเก็บข้อมูล การตรวจสอบสิทธิ์ และอื่น ๆ การสร้างแอปพลิเคชันแบบฟูลสแต็กมักเกี่ยวข้องกับการกำหนดค่าของแบ็กเอนด์ที่ซับซ้อนและการจัดการฐานข้อมูล เพื่อทำให้การทำงานของคุณง่ายขึ้น เราใช้ back4app— บริการแบ็กเอนด์ที่มีความแข็งแกร่ง —เพื่อให้คุณสามารถมุ่งเน้นไปที่การพัฒนาเฟรนต์เอนด์ angular ที่มีฟีเจอร์มากมาย back4app ให้บริการฐานข้อมูล nosql ที่จัดการอย่างเต็มที่ การตรวจสอบสิทธิ์ผู้ใช้ cloud code สำหรับตรรกะที่กำหนดเอง และ sdk สำหรับการรวมเข้าที่ราบรื่น สิ่งนี้ช่วยให้คุณสร้างและปรับใช้แอปพลิเคชันที่สามารถปรับขนาดได้โดยไม่ต้องจัดการโครงสร้างพื้นฐานของเซิร์ฟเวอร์ ข้อสรุปที่สำคัญ โดยการติดตามบทแนะนำนี้ คุณจะ เริ่มต้นโครงการ angular สมัยใหม่โดยใช้ angular cli รวมบริการแบ็กเอนด์เข้ากับแอปของคุณเพื่อจัดการข้อมูล ดำเนินการ crud ที่จำเป็นสำหรับ รายการที่ต้องทำ ที่มีพลศาสตร์ ปรับใช้แอปพลิเคชันที่ทำงานได้อย่างสมบูรณ์โดยใช้เวิร์กโฟลว์ที่บรรจุใน back4app ข้อกำหนดเบื้องต้น ก่อนที่คุณจะเริ่ม ตรวจสอบให้แน่ใจว่าคุณมี node js และ npm ติดตั้งบนเครื่องของคุณ ตรวจสอบการติดตั้งด้วย node v และ npm v ความรู้พื้นฐานเกี่ยวกับ angular , รวมถึงคอมโพเนนต์ บริการ และการฉีดพึ่งพา บัญชี back4app เพื่อจัดการบริการแบ็คเอนด์ของคุณ ลงทะเบียนที่ back4app https //www back4app com/ หากคุณยังไม่ได้ทำ เมื่อมีข้อกำหนดเบื้องต้นเหล่านี้แล้ว คุณก็พร้อมที่จะเริ่มสร้างโปรเจกต์ของคุณ การตั้งค่าโปรเจกต์ เริ่มต้นด้วยการตั้งค่าสภาพแวดล้อมการพัฒนาท้องถิ่นของคุณและเริ่มโปรเจกต์ angular ใหม่โดยใช้ angular cli ตรวจสอบให้แน่ใจว่าคุณมี node js (เวอร์ชัน lts) ติดตั้ง หากไม่มีก็ให้ดาวน์โหลดจาก nodejs org https //nodejs org/ ติดตั้ง angular cli ทั่วไปหากคุณยังไม่ได้ทำ npm install g @angular/cli สร้างโปรเจกต์ angular ใหม่ ng new todo app routing style=css ไปที่ไดเรกทอรีโปรเจกต์ของคุณ cd todo app เริ่มเซิร์ฟเวอร์พัฒนาเพื่อตรวจสอบการตั้งค่า ng serve เปิด http //localhost 4200 ในเบราว์เซอร์ของคุณเพื่อดูแอป angular ของคุณทำงานอยู่ เมื่อส่วนหน้าเสร็จแล้ว ให้ดำเนินการสร้างส่วนหลังของคุณบน back4app การสร้าง backend todo back4app มีบริการ backend ที่จัดการอย่างเต็มที่ซึ่งขับเคลื่อนโดย parse , รวมถึงฐานข้อมูล nosql, การตรวจสอบสิทธิ์, cloud code และ api ที่สร้างโดยอัตโนมัติ ทำตามขั้นตอนเหล่านี้เพื่อตั้งค่า backend ของคุณ เข้าสู่ระบบ ไปที่ แดชบอร์ด back4app https //www back4app com/ และคลิก "สร้างแอปใหม่" ตั้งชื่อแอปของคุณ (เช่น todoapp ) และเลือก nodejs/parse เป็นประเภท backend ไปที่ "ฐานข้อมูล" > "เบราว์เซอร์" , คลิก "สร้างคลาส" , และเลือก "กำหนดเอง" ตั้งชื่อคลาสว่า task และตั้งค่าการอนุญาตให้สามารถอ่านและเขียนได้สาธารณะ (คุณสามารถปรับปรุงสิ่งเหล่านี้ได้ในภายหลัง) ในคลาส task ให้เพิ่มฟิลด์ต่อไปนี้ ชื่อเรื่อง (string) – ชื่อของงาน คำอธิบาย (string) – รายละเอียดเกี่ยวกับงาน เสร็จสิ้น (boolean) – สถานะการเสร็จสิ้นของงาน วันครบกำหนด (date) – กำหนดเวลาสำหรับงาน คลิก "บันทึก" เพื่อสร้างสคีมา การรวม back4app กับ angular คุณจะใช้ parse javascript sdk เพื่อเชื่อมต่อแอป angular ของคุณกับ back4app backend ติดตั้ง parse sdk npm install parse กำหนดค่า sdk ในโปรเจกต์ angular ของคุณ เปิด src/app/app module ts (หรือสร้างบริการเฉพาะ) และเริ่มต้น parse ด้วย application id และ javascript key จาก back4app dashboard (พบได้ที่ app settings > security & keys ) ตัวอย่างเช่น สร้างบริการ parse service ts ใน src ไดเรกทอรี import { injectable } from '@angular/core'; import parse from 'parse'; @injectable({ providedin 'root', }) export class parseservice { constructor() { const parse app id = "your application id"; const parse js key = "your javascript key"; parse initialize(parse app id, parse js key); (parse as any) serverurl = 'https //parseapi back4app com/'; } } จากนั้น ในคอมโพเนนต์ของคุณ ให้ฉีด parseservice ในคอนสตรัคเตอร์ บริการจะทำงานคอนสตรัคเตอร์ของมันเพียงครั้งเดียว (ที่การเริ่มต้นแอปพลิเคชัน) เพื่อเริ่มต้น parse ให้กับคุณ เมื่อเชื่อมต่อกับ backend ของคุณแล้ว คุณสามารถสร้าง ui ของ to do list และดำเนินการ crud ได้แล้ว การพัฒนา frontend แอป angular ของคุณจะประกอบด้วยคอมโพเนนต์และบริการเพื่อเพิ่ม แสดง อัปเดต และลบงาน คุณจะใช้สถาปัตยกรรมคอมโพเนนต์ของ angular และการฉีดพึ่งพาเพื่อการจัดการข้อมูลที่ราบรื่น การจัดโครงสร้างคอมโพเนนต์ของคุณ สร้างคอมโพเนนต์ต่อไปนี้โดยใช้ angular cli ng generate component components/task form ng generate component components/task list ng generate component components/task item taskformcomponent ส่วนประกอบนี้แสดงแบบฟอร์มสำหรับการเพิ่มงานใหม่ มันจับข้อมูลที่ผู้ใช้ป้อนและส่งข้อมูลงานไปยัง back4app add task // src/app/components/task form/task form component ts import { component, eventemitter, output } from '@angular/core'; import { formsmodule } from '@angular/forms'; import as parse from 'parse'; @component({ selector 'app task form', templateurl ' /task form component html', styleurls \[' /task form component css'], imports \[formsmodule] }) export class taskformcomponent { title = ''; description = ''; @output() refreshtasks = new eventemitter\<void>(); async onsubmit() { try { const task = parse object extend('task'); const task = new task(); task set('title', this title); task set('description', this description); task set('completed', false); await task save(); this refreshtasks emit(); this title = ''; this description = ''; } catch (error) { console error('error adding task ', error); } } } tasklistcomponent ส่วนประกอบนี้แสดงรายการงานโดยการวนซ้ำผ่านอาร์เรย์และแสดงงานแต่ละงานโดยใช้ taskitemcomponent no tasks available // src/app/components/task list/task list component ts import { component, input, oninit } from '@angular/core'; import { commonmodule } from '@angular/common'; import as parse from 'parse'; import { taskitemcomponent } from ' /task item/task item component'; @component({ selector 'app task list', templateurl ' /task list component html', styleurls \[' /task list component css'], imports \[commonmodule, taskitemcomponent] }) export class tasklistcomponent implements oninit { @input() tasks any\[] = \[]; @input() fetchtasks! () => void; ngoninit() void {} } taskitemcomponent คอมโพเนนต์นี้แสดงถึงงานแต่ละงานและมีปุ่มเพื่อสลับสถานะการเสร็จสิ้นหรือลบงาน {{ task title }} {{ task description }} {{ task completed ? 'undo' 'complete' }} delete // src/app/components/task item/task item component ts import { component, eventemitter, input, output } from '@angular/core'; import as parse from 'parse'; @component({ selector 'app task item', templateurl ' /task item component html', styleurls \[' /task item component css'] }) export class taskitemcomponent { @input() task any; @output() taskchanged = new eventemitter\<void>(); async togglecomplete() { try { const query = new parse query('task'); const tasktoupdate = await query get(this task id); tasktoupdate set('completed', !this task completed); await tasktoupdate save(); this taskchanged emit(); } catch (error) { console error('error updating task ', error); } } async deletetask() { try { const query = new parse query('task'); const tasktodelete = await query get(this task id); await tasktodelete destroy(); this taskchanged emit(); } catch (error) { console error('error deleting task ', error); } } } การรวม appcomponent ในคอมโพเนนต์หลักของคุณ จัดการสถานะของงานและรวมคอมโพเนนต์งานต่างๆ to do list // src/app/app component ts import { component, oninit } from '@angular/core'; import { parseservice } from ' /parse service'; import as parse from 'parse'; import { taskformcomponent } from ' /components/task form/task form component'; import { tasklistcomponent } from ' /components/task list/task list component'; @component({ selector 'app root', imports \[taskformcomponent, tasklistcomponent], templateurl ' /app component html', styleurl ' /app component css' }) export class appcomponent implements oninit { constructor(private parseservice parseservice) {} tasks any\[] = \[]; async fetchtasks() { try { const task = parse object extend('task'); const query = new parse query(task); const results = await query find(); this tasks = results map(task => ({ id task id, task tojson() })); } catch (error) { console error('error fetching tasks ', error); } } ngoninit() void { this fetchtasks(); } } การจัดแต่งสไตล์แอปพลิเคชัน สร้างหรืออัปเดตสไตล์ในไฟล์ css ของคอมโพเนนต์ของคุณหรือใน src/styles css / src/styles css / container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } h1 { margin bottom 20px; } form { display flex; flex direction column; align items center; gap 10px; margin bottom 20px; } form input\[type="text"] { width 80%; max width 400px; padding 8px; box sizing border box; font size 1rem; } form button { padding 8px 16px; cursor pointer; font size 1rem; border none; background color #eaeaea; transition background color 0 2s ease; } form button\ hover { background color #ccc; } task item { display flex; flex direction column; align items center; justify content center; gap 12px; border 1px solid #ccc; border radius 6px; padding 15px; margin 10px 0; background color #fafafa; text align center; transition background color 0 2s ease; } task item completed h3, task item completed p { text decoration line through; color #888; } task item h3 { margin 0; font size 1 1rem; } task item p { margin 0; font size 1rem; } task item button { padding 6px 12px; border none; background color #eaeaea; cursor pointer; font size 0 9rem; } task item button\ hover { background color #ccc; } @media (min width 600px) { task item { flex direction row; } } การปรับใช้ frontend บน back4app web deployment back4app web deployment ให้สภาพแวดล้อมที่บรรจุเพื่อโฮสต์แอปพลิเคชัน angular ของคุณ การกำหนดค่า angular สำหรับการผลิต สร้างแอป angular ที่พร้อมสำหรับการผลิตของคุณ ng build คำสั่งนี้สร้าง dist/ โฟลเดอร์ที่มีแอป angular ที่คอมไพล์แล้วของคุณ การสร้าง dockerfile สร้าง dockerfile ในรากโปรเจกต์ของคุณด้วยเนื้อหาดังต่อไปนี้ from node 18 alpine as build workdir /app copy package json package lock json / run npm install g @angular/cli run npm install copy run ng build cmd \["ng", "serve", " host", "0 0 0 0"] การทดสอบ docker container ในเครื่อง สร้างภาพ docker ของคุณ docker build t todo frontend รันคอนเทนเนอร์ docker run p 4201 4200 todo frontend เปิด http //localhost 4201 ในเบราว์เซอร์ของคุณเพื่อตรวจสอบว่าแอป angular ของคุณถูกให้บริการอย่างถูกต้อง การปรับใช้ไปยัง back4app เริ่มต้นรีโพซิทอรี git เพิ่มไฟล์โปรเจกต์ของคุณและทำการคอมมิต git init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin maingit init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin maingit init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin maingit init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin maingit init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin maingit init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin main เข้าสู่ระบบที่ back4app web deployment https //www back4app com/containers คลิก "สร้างแอปใหม่" , ระบุชื่อโปรเจกต์ของคุณ และเลือกที่เก็บ github ของคุณ อนุญาต back4app และเลือก การปรับใช้ dockerfile ยืนยันการตั้งค่าการสร้างและคลิก "ปรับใช้" เพื่อเริ่มกระบวนการปรับใช้ การติดตามการปรับใช้ของคุณ หลังจากการปรับใช้ ใช้แดชบอร์ด back4app เพื่อ ดูบันทึกสำหรับการดีบัก ติดตามประสิทธิภาพของคอนเทนเนอร์และการใช้ทรัพยากร กระตุ้นการสร้างใหม่เมื่อมีการคอมมิตใหม่ กำหนดค่าชื่อโดเมนที่กำหนดเองหากจำเป็น เข้าถึงแอปพลิเคชันสดของคุณที่ https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ การทดสอบและการดีบัก หลังจากการปรับใช้ ยืนยันว่าฟรอนต์เอนด์ angular ของคุณสื่อสารได้อย่างมีประสิทธิภาพกับแบ็กเอนด์ back4app การตรวจสอบ api ใช้เครื่องมือพัฒนาในเบราว์เซอร์ของคุณ (f12 → network) เพื่อตรวจสอบคำขอ api การดำเนินการงาน เพิ่ม เสร็จสิ้น และลบงานผ่าน ui และตรวจสอบการอัปเดตใน back4app database browser การจัดการข้อผิดพลาด ตรวจสอบบันทึกคอนโซลสำหรับข้อผิดพลาดและทดสอบกรณีขอบเช่นการส่งข้อมูลว่าง การทดสอบประสิทธิภาพ จำลองสภาพเครือข่ายที่ช้าโดยใช้เครื่องมือในเบราว์เซอร์เพื่อตรวจสอบความตอบสนอง แนวทางปฏิบัติที่ดีที่สุดในการใช้ back4app กับ angular เพื่อเพิ่มประสิทธิภาพแอปพลิเคชันของคุณ คำขอที่มีประสิทธิภาพ ใช้การดำเนินการแบบกลุ่มสำหรับการจัดการงานหลายรายการ const tasks = \[task1, task2, task3]; parse object saveall(tasks); การค้นหาที่ปรับให้เหมาะสม ดึงเฉพาะฟิลด์ที่จำเป็น query select('title', 'completed'); การจัดการสิ่งแวดล้อม เก็บกุญแจที่สำคัญในตัวแปรสิ่งแวดล้อม ng app parse app id=your app id ng app parse js key=your js key ความปลอดภัย ใช้ acls เพื่อจำกัดการเข้าถึงข้อมูล task setacl(new parse acl(parse user current())); การถ่ายโอนภาระงานไปยัง backend ใช้ cloud code สำหรับตรรกะที่ซับซ้อนเพื่อลดภาระงานที่ด้านหน้า บทสรุป คุณได้สร้างแอปพลิเคชัน to do list แบบ full stack โดยการสร้างส่วนหน้า angular รวมเข้ากับแบ็กเอนด์ของ back4app และปรับใช้โดยใช้เวิร์กโฟลว์ที่บรรจุในคอนเทนเนอร์ บทเรียนนี้ได้แนะนำคุณผ่านทุกขั้นตอน—จากการพัฒนาท้องถิ่นไปจนถึงการปรับใช้ในคลาวด์—เพื่อให้แน่ใจว่ามีการโต้ตอบที่แข็งแกร่งระหว่าง ui ของ angular และบริการแบ็กเอนด์ มองไปข้างหน้า พิจารณาการปรับปรุงเช่นการอัปเดตแบบเรียลไทม์ การปรับปรุงการตรวจสอบสิทธิ์ และการรวมระบบของบุคคลที่สาม สำหรับการเรียนรู้เพิ่มเติม โปรดเยี่ยมชม เอกสาร back4app https //www back4app com/docs และสำรวจทรัพยากรของชุมชน