How to Build a Basic CRUD App with Angular?

บทนำ ในคู่มือนี้ เราจะพาคุณไปผ่านกระบวนการสร้างแอปพลิเคชัน crud (สร้าง, อ่าน, อัปเดต, ลบ) ขั้นพื้นฐานโดยใช้ angular คุณจะได้เรียนรู้วิธีพัฒนาแอปพลิเคชันที่จัดการการดำเนินการข้อมูลได้อย่างมีประสิทธิภาพโดยใช้กรอบงานที่แข็งแกร่งของ angular เริ่มต้น คุณจะสร้างและกำหนดค่าโครงการ back4app ใหม่ที่ชื่อว่า basic crud app angular , ซึ่งจะทำหน้าที่เป็นกระดูกสันหลังของการจัดการข้อมูลในฝั่งแบ็กเอนด์ของคุณ ถัดไป คุณจะออกแบบโมเดลฐานข้อมูลที่สามารถขยายได้โดยการกำหนดคอลเลกชันและฟิลด์อย่างละเอียด—ไม่ว่าจะทำด้วยตนเองหรือด้วยความช่วยเหลือจาก back4app ai agent ขั้นตอนนี้รับประกันว่าระบบของคุณพร้อมที่จะจัดการฟังก์ชัน crud ทั้งหมด หลังจากตั้งค่าโครงสร้างของคุณแล้ว คุณจะสำรวจ back4app admin app ซึ่งเป็นอินเทอร์เฟซที่ใช้งานง่ายแบบลากและวาง เพื่อจัดการคอลเลกชันและบันทึกของคุณได้อย่างง่ายดาย สุดท้าย คุณจะรวมส่วนหน้า angular ของคุณกับ back4app โดยใช้ rest/graphql (หรือ parse sdk หากต้องการ) พร้อมทั้งดำเนินการมาตรการรักษาความปลอดภัยขั้นสูงเพื่อปกป้องแบ็กเอนด์ของคุณ เมื่อสิ้นสุดบทเรียนนี้ คุณจะได้สร้างแอปพลิเคชัน angular ที่พร้อมใช้งานในระดับการผลิตซึ่งมีการตรวจสอบสิทธิ์ผู้ใช้และความสามารถ crud ที่ครอบคลุม ข้อสรุปที่สำคัญ เรียนรู้วิธีการสร้างแอปพลิเคชัน crud ที่จัดการข้อมูลได้อย่างมีประสิทธิภาพด้วยแบ็คเอนด์ที่เชื่อถือได้ ได้รับข้อมูลเชิงปฏิบัติในการสร้างโมเดลข้อมูลที่สามารถขยายได้และเชื่อมโยงกับส่วนหน้า angular เรียนรู้วิธีการใช้ส่วนติดต่อผู้ใช้ที่ใช้งานง่ายของแอป back4app admin สำหรับการจัดการข้อมูลอย่างง่ายดาย เข้าใจกลยุทธ์การปรับใช้ รวมถึงการทำให้เป็นคอนเทนเนอร์ docker เพื่อเปิดตัวแอป angular ของคุณอย่างรวดเร็ว ข้อกำหนดเบื้องต้น ก่อนที่คุณจะเริ่ม โปรดตรวจสอบให้แน่ใจว่าคุณมีสิ่งต่อไปนี้ บัญชี back4app ที่มีการตั้งค่าโครงการใหม่ ต้องการความช่วยเหลือ? ดูที่ เริ่มต้นใช้งาน back4app https //www back4app com/docs/get started/new parse app สภาพแวดล้อมการพัฒนา angular ติดตั้ง angular cli โดยการรัน npm install g @angular/cli และสร้างโครงการใหม่โดยใช้ ng new ตรวจสอบให้แน่ใจว่าได้ติดตั้ง node js (เวอร์ชัน 14 ขึ้นไป) ความเข้าใจพื้นฐานเกี่ยวกับ typescript, angular, และ rest apis สำหรับการทบทวน โปรดเยี่ยมชม เอกสาร angular https //angular io/docs ขั้นตอนที่ 1 – การตั้งค่าโครงการของคุณ การเปิดตัวโปรเจกต์ back4app ใหม่ ลงชื่อเข้าใช้บัญชี back4app ของคุณ คลิกที่ปุ่ม “แอปใหม่” จากแดชบอร์ดของคุณ ป้อนชื่อโปรเจกต์ basic crud app angular และทำตามคำแนะนำในการตั้งค่า สร้างโปรเจกต์ใหม่ เมื่อโปรเจกต์ถูกสร้างขึ้น มันจะปรากฏในแดชบอร์ด back4app ของคุณ ซึ่งจะให้พื้นฐานที่แข็งแกร่งสำหรับการกำหนดค่าด้านหลังของคุณ ขั้นตอนที่ 2 – การสร้างสคีมาฐานข้อมูลของคุณ การสร้างโมเดลข้อมูลของคุณ สำหรับแอปพลิเคชัน crud นี้ คุณจะต้องกำหนดหลายคอลเลกชัน ด้านล่างนี้เป็นตัวอย่างของคอลเลกชันและฟิลด์ของพวกเขาที่จะเป็นพื้นฐานของสคีมาฐานข้อมูลของคุณ คอลเลกชันเหล่านี้ช่วยให้แอปพลิเคชันสามารถดำเนินการ crud ที่จำเป็นได้ 1 การเก็บรวบรวมรายการ การเก็บรวบรวมนี้จัดเก็บข้อมูลสำหรับแต่ละรายการ สนาม ประเภทข้อมูล รายละเอียด id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อของรายการ คำอธิบาย สตริง สรุปสั้น ๆ ของรายการ สร้างเมื่อ วันที่ เวลาที่รายการถูกเพิ่มเข้ามา อัปเดตเมื่อ วันที่ เวลาสำหรับการอัปเดตล่าสุด 2 คอลเลกชันผู้ใช้ คอลเลกชันนี้เก็บข้อมูลประจำตัวผู้ใช้และข้อมูลการตรวจสอบสิทธิ์ สนาม ประเภทข้อมูล คำอธิบาย id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อผู้ใช้ สตริง รหัสประจำตัวที่ไม่ซ้ำกันสำหรับผู้ใช้ อีเมล สตริง ที่อยู่อีเมลที่แตกต่างกัน รหัสผ่าน hash สตริง รหัสผ่านที่ถูกแฮชอย่างปลอดภัยสำหรับการตรวจสอบสิทธิ์ สร้างเมื่อ วันที่ เวลาที่ระบุเมื่อบัญชีถูกสร้างขึ้น อัปเดตเมื่อ วันที่ เวลาของการอัปเดตล่าสุด คุณสามารถตั้งค่าการรวบรวมเหล่านี้ด้วยตนเองในแดชบอร์ด back4app โดยการสร้างคลาสใหม่สำหรับแต่ละคลาสและเพิ่มคอลัมน์เพื่อกำหนดฟิลด์ต่างๆ สร้างคลาสใหม่ เพิ่มคอลัมน์โดยการเลือกประเภทข้อมูล ตั้งชื่อฟิลด์ ตั้งค่าค่าปริยาย และทำเครื่องหมายว่าจำเป็นหรือไม่ สร้างคอลัมน์ การใช้ back4app ai agent สำหรับการตั้งค่า schema back4app ai agent เป็นเครื่องมือที่หลากหลายซึ่งมีอยู่ในแดชบอร์ดของคุณที่ช่วยให้คุณสามารถสร้าง schema ฐานข้อมูลของคุณโดยอัตโนมัติตามคำอธิบายที่ให้ไว้ ฟีเจอร์นี้ช่วยประหยัดเวลาและทำให้แน่ใจว่าด้านหลังของคุณถูกปรับแต่งอย่างสมบูรณ์แบบสำหรับการดำเนินการ crud ขั้นตอนในการใช้ ai agent เปิด ai agent เข้าสู่ระบบแดชบอร์ด back4app ของคุณและค้นหาตัวเลือก ai agent อธิบาย schema ของคุณ ป้อนคำอธิบายที่ละเอียดซึ่งระบุคอลเลกชันและฟิลด์ที่คุณต้องการ ตรวจสอบและยืนยัน หลังจากส่งแล้ว ให้ตรวจสอบ schema ที่สร้างขึ้นและนำไปใช้ในโครงการของคุณ ตัวอย่างคำอธิบาย create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated primary key) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated primary key) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) วิธีการที่ขับเคลื่อนด้วย ai นี้ช่วยให้กระบวนการเป็นไปอย่างราบรื่นและทำให้แน่ใจว่า schema มีความสอดคล้องและได้รับการปรับให้เหมาะสม ขั้นตอนที่ 3 – เปิดใช้งานแอปผู้ดูแลระบบและจัดการการดำเนินการ crud มุมมองที่แอปผู้ดูแลระบบ แอปผู้ดูแลระบบ back4app มีอินเทอร์เฟซแบบไม่ต้องเขียนโค้ดที่สามารถลากและวางซึ่งช่วยให้คุณจัดการข้อมูลด้านหลังได้อย่างง่ายดาย ด้วยมัน คุณสามารถทำการดำเนินการ crud ได้อย่างง่ายดาย เช่น การเพิ่ม การดู การแก้ไข และการลบบันทึก การเปิดใช้งานแอปผู้ดูแลระบบ ไปที่เมนู “เพิ่มเติม” ในแดชบอร์ด back4app ของคุณ เลือก “แอปผู้ดูแลระบบ” และคลิก “เปิดใช้งานแอปผู้ดูแลระบบ ” ตั้งค่าข้อมูลประจำตัวผู้ดูแลระบบของคุณ สร้างผู้ใช้ผู้ดูแลระบบเริ่มต้นของคุณ ซึ่งจะกำหนดบทบาท (เช่น b4aadminuser ) และคอลเลกชันระบบ เปิดใช้งานแอปผู้ดูแลระบบ หลังจากเปิดใช้งานแล้ว ให้เข้าสู่ระบบแอปผู้ดูแลระบบเพื่อจัดการคอลเลกชันและบันทึกของคุณ แดชบอร์ดแอปผู้ดูแลระบบ การใช้แอปผู้ดูแลระบบสำหรับงาน crud ภายในแอปผู้ดูแลระบบ คุณสามารถ เพิ่มบันทึกใหม่ คลิก “เพิ่มบันทึก” ในคอลเลกชันใด ๆ (เช่น รายการ) เพื่อสร้างรายการใหม่ ดูและแก้ไขบันทึก เลือกบันทึกเพื่อดูรายละเอียดหรืออัปเดตฟิลด์ของมัน ลบบันทึก ใช้ตัวเลือกลบเพื่อลบบันทึกที่ล้าสมัย อินเทอร์เฟซที่ใช้งานง่ายนี้ช่วยให้การจัดการข้อมูลแบ็กเอนด์ของคุณง่ายขึ้นมาก ขั้นตอนที่ 4 – เชื่อมต่อส่วนหน้า angular ของคุณกับ back4app ตอนนี้แบ็กเอนด์ของคุณถูกตั้งค่าและจัดการอย่างสมบูรณ์ผ่านแอปผู้ดูแลระบบแล้ว ถึงเวลาที่จะเชื่อมต่อส่วนหน้า angular ของคุณกับ back4app ตัวเลือก a การรวม parse sdk กับ angular ติดตั้ง parse sdk npm install parse ตั้งค่า parse ในโปรเจกต์ angular ของคุณ สร้างไฟล์การกำหนดค่า (เช่น, src/app/parse config ts ) // src/app/parse config ts import parse from 'parse'; // เปลี่ยนเป็นข้อมูลประจำตัว back4app ของคุณ parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; 3\ implement parse in an angular component for example, create a component to fetch and display items ```typescript // src/app/components/items list/items list component ts import { component, oninit } from '@angular/core'; import parse from ' / /parse config'; @component({ selector 'app items list', templateurl ' /items list component html', styleurls \[' /items list component css'] }) export class itemslistcomponent implements oninit { items any\[] = \[]; async ngoninit() { const items = parse object extend('items'); const query = new parse query(items); try { const results = await query find(); this items = results; } catch (error) { console error('error retrieving items ', error); } } } และในเทมเพลต html ( items list component html ) items {{ item get('title') }} – {{ item get('description') }} ตัวเลือก b การใช้ rest หรือ graphql หากคุณไม่ต้องการใช้ parse sdk คุณสามารถดำเนินการ crud ผ่าน rest หรือ graphql ได้ ตัวอย่างเช่น เพื่อดึงรายการโดยใช้ rest ใน angular ให้สร้างวิธีการบริการดังนี้ // src/app/services/items service ts import { injectable } from '@angular/core'; import { httpclient, httpheaders } from '@angular/common/http'; import { observable } from 'rxjs'; @injectable({ providedin 'root' }) export class itemsservice { private apiurl = 'https //parseapi back4app com/classes/items'; constructor(private http httpclient) { } getitems() observable\<any> { const headers = new httpheaders({ 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }); return this http get(this apiurl, { headers }); } } คุณสามารถรวมการเรียก api เหล่านี้ภายในส่วนประกอบ angular ของคุณตามที่ต้องการ ขั้นตอนที่ 5 – ปกป้อง backend ของคุณ การใช้งาน access control lists (acls) เพิ่มความปลอดภัยให้กับข้อมูลของคุณโดยการกำหนด acls ให้กับวัตถุของคุณ ตัวอย่างเช่น เพื่อสร้างรายการที่เข้าถึงได้เฉพาะเจ้าของเท่านั้น async function createsecureitem(itemdata any, owneruser any) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // assign acl only the owner has read/write access const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('secure item created ', saveditem); } catch (error) { console error('error creating item ', error); } } การกำหนดสิทธิ์ระดับคลาส (clps) ในแดชบอร์ด back4app ปรับ clp สำหรับแต่ละคอลเลกชันเพื่อตั้งค่ากฎการเข้าถึงเริ่มต้น โดยมั่นใจว่าผู้ใช้ที่ได้รับการตรวจสอบหรือได้รับอนุญาตเท่านั้นที่สามารถเข้าถึงข้อมูลที่ละเอียดอ่อนได้ ขั้นตอนที่ 6 – การจัดการการตรวจสอบสิทธิ์ผู้ใช้ การสร้างและจัดการบัญชีผู้ใช้ back4app ใช้คลาสผู้ใช้ของ parse ในการจัดการการตรวจสอบสิทธิ์ ในโปรเจกต์ angular ของคุณ คุณสามารถจัดการการลงทะเบียนและการเข้าสู่ระบบของผู้ใช้ได้ดังนี้ // src/app/components/auth/auth component ts import { component } from '@angular/core'; import parse from ' / /parse config'; @component({ selector 'app auth', templateurl ' /auth component html', styleurls \[' /auth component css'] }) export class authcomponent { username string = ''; password string = ''; email string = ''; async signup(event event) { event preventdefault(); const user = new parse user(); user set('username', this username); user set('password', this password); user set('email', this email); try { await user signup(); alert('user registration successful!'); } catch (error any) { alert('registration error ' + error message); } } } และเทมเพลต html ที่เกี่ยวข้อง ( auth component html ) register วิธีการที่คล้ายกันสามารถนำไปใช้สำหรับการเข้าสู่ระบบของผู้ใช้และการจัดการเซสชัน สำหรับฟีเจอร์เช่นการเข้าสู่ระบบผ่านโซเชียลหรือการรีเซ็ตรหัสผ่าน ให้ปรับการตั้งค่าในแดชบอร์ด back4app ขั้นตอนที่ 7 – การปรับใช้ frontend angular ของคุณ ฟีเจอร์การปรับใช้เว็บของ back4app ช่วยให้คุณสามารถโฮสต์แอปพลิเคชัน angular ของคุณโดยการปรับใช้โค้ดโดยตรงจากที่เก็บ github ในส่วนนี้ คุณจะเตรียมการสร้างผลิตภัณฑ์ของคุณ ทำการคอมมิตโค้ดต้นฉบับของคุณ และรวมที่เก็บของคุณสำหรับการปรับใช้ 7 1 การสร้างเวอร์ชันผลิตภัณฑ์ของคุณ เปิดไดเรกทอรีโปรเจกต์ของคุณในเทอร์มินัล รันคำสั่งสร้างผลิตภัณฑ์ ng build prod คำสั่งนี้จะคอมไพล์แอปพลิเคชัน angular ของคุณเป็น dist/ โฟลเดอร์ที่ปรับให้เหมาะสม ตรวจสอบการสร้าง ตรวจสอบให้แน่ใจว่า dist/ ไดเรกทอรีมี index html และทรัพยากรที่จำเป็นทั้งหมด 7 2 การจัดโครงสร้างและอัปโหลดโค้ดต้นฉบับของคุณ ที่เก็บของคุณควรมีโปรเจกต์ angular ทั้งหมดของคุณ โครงสร้างไฟล์ทั่วไปอาจมีลักษณะดังนี้ basic crud app angular/ ├── node modules/ ├── src/ │ ├── app/ │ │ ├── app component ts │ │ ├── app module ts │ │ └── components/ │ │ ├── auth/ │ │ │ ├── auth component ts │ │ │ └── auth component html │ │ └── items list/ │ │ ├── items list component ts │ │ └── items list component html ├── angular json ├── package json └── readme md ตัวอย่าง src/app/parse config ts // src/app/parse config ts import parse from 'parse'; // replace with your actual back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; ตัวอย่าง src/app/app component ts import { component } from '@angular/core'; import parse from ' /parse config'; @component({ selector 'app root', template ` \<div style="padding 2rem;"> \<h1>items\</h1> \<app items list>\</app items list> \</div> `, styles \[] }) export class appcomponent { } การส่งโค้ดของคุณไปยัง github เริ่มต้นรีโพซิทอรี git ในโฟลเดอร์โปรเจกต์ของคุณหากคุณยังไม่ได้ทำ git init เพิ่มไฟล์โปรเจกต์ของคุณ git add คอมมิตการเปลี่ยนแปลงของคุณ git commit m "คอมมิตเริ่มต้นสำหรับ angular frontend" สร้างรีโพซิทอรี github ตัวอย่างเช่น ตั้งชื่อว่า basic crud app angular ผลักดันโค้ดของคุณไปยัง github git remote add origin https //github com/your username/basic crud app angular git git push u origin main 7 3 การเชื่อมโยงที่เก็บ github ของคุณกับการปรับใช้เว็บ เข้าถึงฟีเจอร์การปรับใช้เว็บ เข้าสู่ระบบแดชบอร์ด back4app ของคุณ เลือกโปรเจกต์ของคุณ ( basic crud app angular ), และเลือก การปรับใช้เว็บ เชื่อมต่อบัญชี github ของคุณ ทำตามคำแนะนำเพื่อรวมบัญชี github ของคุณ ทำให้ back4app สามารถเข้าถึงที่เก็บของคุณได้ เลือกที่เก็บและสาขาของคุณ เลือกที่เก็บของคุณ (เช่น basic crud app angular ) และสาขา (เช่น main ) ที่มีโค้ดของคุณ 7 4 การกำหนดค่าการตั้งค่าการปรับใช้ของคุณ ให้รายละเอียดการกำหนดค่าที่จำเป็น คำสั่งสร้าง หากที่เก็บของคุณไม่มีโฟลเดอร์ dist/ ที่สร้างไว้ล่วงหน้า ให้ระบุคำสั่งสร้าง (เช่น ng build prod ) ไดเรกทอรีผลลัพธ์ ตั้งค่าไดเรกทอรีผลลัพธ์เป็น dist/your project name เพื่อให้ back4app รู้ว่าไฟล์สถิตของคุณอยู่ที่ไหน ตัวแปรสภาพแวดล้อม เพิ่มตัวแปรสภาพแวดล้อมที่จำเป็น (เช่น คีย์ api) ในการกำหนดค่าการปรับใช้ 7 5 การทำให้แอปพลิเคชัน angular ของคุณเป็นคอนเทนเนอร์ด้วย docker หากคุณต้องการการปรับใช้ที่ใช้ docker ให้รวม dockerfile ในที่เก็บของคุณ ตัวอย่างเช่น # use an official node image to build the angular app from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the rest of the application and build it copy run npm run build prod \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/dist/your project name /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] รวม dockerfile นี้ในที่เก็บของคุณ จากนั้นเลือกตัวเลือกการปรับใช้ docker ในการตั้งค่าการปรับใช้เว็บของ back4app 7 6 การเปิดแอปพลิเคชันของคุณ คลิกปุ่มปรับใช้ เมื่อการตั้งค่าการปรับใช้ของคุณถูกกำหนดค่าแล้ว ให้คลิก ปรับใช้ ติดตามกระบวนการปรับใช้ back4app จะดึงโค้ดของคุณ ดำเนินการคำสั่งสร้างหากจำเป็น และปรับใช้แอป angular ของคุณ ดึง url ของคุณ หลังจากการปรับใช้ที่ประสบความสำเร็จ back4app จะให้ url ที่แอปพลิเคชันของคุณออนไลน์ 7 7 การทดสอบแอปพลิเคชันที่ปรับใช้ของคุณ เยี่ยมชม url ที่ให้ไว้ เปิด url ในเบราว์เซอร์ของคุณ ตรวจสอบฟังก์ชันการทำงาน ตรวจสอบให้แน่ใจว่าแอป angular ของคุณโหลดได้อย่างถูกต้อง ทุกเส้นทางทำงานตามที่คาดหวัง และทรัพย์สินถูกให้บริการอย่างถูกต้อง แก้ไขปัญหาหากจำเป็น ใช้เครื่องมือพัฒนาเบราว์เซอร์เพื่อตรวจสอบและแก้ไขปัญหาใด ๆ ตรวจสอบบันทึกการปรับใช้ของ back4app และการกำหนดค่าของคุณหากเกิดปัญหา ขั้นตอนที่ 8 – สรุปและทิศทางในอนาคต ขอแสดงความยินดี! คุณได้สร้างแอปพลิเคชัน crud เบื้องต้นโดยใช้ angular และ back4app สำเร็จแล้ว คุณได้ตั้งค่าโครงการชื่อ basic crud app angular , ออกแบบคอลเลกชันฐานข้อมูลที่ครอบคลุมสำหรับ items และ users และจัดการข้อมูลของคุณโดยใช้ admin app ที่ใช้งานง่าย นอกจากนี้ คุณได้เชื่อมต่อส่วนหน้า angular ของคุณกับส่วนหลังและดำเนินการมาตรการด้านความปลอดภัยที่แข็งแกร่ง ขั้นตอนถัดไป ปรับปรุงส่วนหน้า ขยายแอปพลิเคชัน angular ของคุณด้วยฟีเจอร์ขั้นสูง เช่น การแสดงรายละเอียดของรายการ ฟังก์ชันการค้นหา และการอัปเดตแบบเรียลไทม์ ขยายฟังก์ชันการทำงาน พิจารณาการรวมตรรกะส่วนหลังเพิ่มเติม (เช่น cloud functions) หรือการดำเนินการควบคุมการเข้าถึงตามบทบาท สำรวจแหล่งข้อมูลเพิ่มเติม ตรวจสอบ เอกสาร back4app https //www back4app com/docs และแหล่งข้อมูล angular อื่น ๆ เพื่อเพิ่มพูนความเข้าใจของคุณ ด้วยคู่มือนี้ คุณพร้อมที่จะสร้าง crud backends ที่แข็งแกร่งและปรับขนาดได้สำหรับแอปพลิเคชัน angular ของคุณโดยใช้ back4app ขอให้สนุกกับการเขียนโค้ด!