สร้างแอป Angular อย่างไร? คู่มือทีละขั้นตอน
Angular เป็นเฟรมเวิร์กโอเพ่นซอร์สที่ได้รับความนิยมสำหรับการสร้างแอปพลิเคชันเว็บที่มีความไดนามิก ตอบสนอง และซับซ้อน Angular ถูกพัฒนาขึ้นครั้งแรกโดย Google ในปี 2010 ภายใต้ชื่อ “AngularJS”
Angular ช่วยให้คุณสามารถสร้างแอปพลิเคชันหน้าเดียวที่มีความไดนามิก ด้วยโครงสร้างโค้ดที่สะอาดและเป็นระบบ
Angular ใช้ภาษา TypeScript ซึ่งเป็นซูเปอร์เซ็ตของ JavaScript ที่เพิ่มคุณสมบัติเช่น การตรวจสอบชนิดข้อมูล อินเทอร์เฟซ และคลาสให้กับภาษา ทำให้โค้ดของ Angular ดูแลรักษาได้ง่ายและลดความผิดพลาด
เพื่อให้การพัฒนาเว็บด้วย Angular เป็นไปอย่างราบรื่น ควรใช้โซลูชัน Backend-as-a-Service (BaaS) เช่น Back4app
Back4app มีโครงสร้างพื้นฐานสำหรับ backend ที่สร้างไว้ล่วงหน้าพร้อมด้วยคุณสมบัติต่าง ๆ เช่น การตรวจสอบตัวตน การจัดเก็บข้อมูล และตรรกะฝั่งเซิร์ฟเวอร์
สิ่งนี้ช่วยให้คุณมุ่งเน้นที่การสร้างส่วนหน้า (frontend) ของแอปพลิเคชัน โดยไม่ต้องกังวลกับความซับซ้อนของการพัฒนา backend
ในบทความนี้ คุณจะได้สำรวจ Angular และสร้างแอปพลิเคชันบล็อกพื้นฐานโดยใช้ Angular และ Back4app
Contents
ข้อดีของ Angular
Angular ได้รับความนิยมในหมู่นักพัฒนาเนื่องจากมีข้อดีมากมาย นี่คือบางส่วนของข้อดีหลักของ Angular:
การผูกข้อมูลแบบสองทาง
การผูกข้อมูลแบบสองทางเป็นคุณสมบัติที่ช่วยประหยัดเวลาและเพิ่มประสิทธิภาพในการทำงาน ซึ่งช่วยยกระดับคุณภาพของแอปพลิเคชัน Angular การผูกข้อมูลแบบสองทางทำให้การเปลี่ยนแปลงของโมเดล (ข้อมูล) สะท้อนโดยอัตโนมัติในวิว (ส่วนติดต่อผู้ใช้)
การเปลี่ยนแปลงใด ๆ กับโมเดลจะถูกสะท้อนในวิวทันที ทำให้การพัฒนาแอปพลิเคชันที่ซับซ้อนและไดนามิกง่ายและรวดเร็วขึ้น โดยไม่จำเป็นต้องเขียนโค้ดมาตรฐานเพื่อซิงโครไนซ์โมเดลกับวิว
การฉีดพึ่งพา (Dependency Injection)
การฉีดพึ่งพาเป็นคุณสมบัติสำคัญของ Angular ที่ช่วยให้การจัดการความสัมพันธ์ระหว่างส่วนประกอบและบริการเป็นไปได้ง่ายขึ้น คุณสมบัตินี้ช่วยยกระดับความน่าเชื่อถือ ความสามารถในการดูแลรักษา และการทดสอบของแอปพลิเคชัน Angular
การฉีดพึ่งพาใน Angular ช่วยให้ส่วนประกอบและบริการสามารถประกาศความต้องการพึ่งพากับส่วนประกอบและบริการอื่น ๆ ระบบจะดูแลงานสร้างและจัดหาความต้องการเหล่านี้โดยอัตโนมัติ ซึ่งช่วยลดความจำเป็นในการจัดการด้วยตนเองและลดความเสี่ยงของข้อผิดพลาด
ระบบฉีดพึ่งพาของ Angular ทำให้การจัดการความต้องการเป็นไปได้ง่ายและลดปริมาณโค้ดที่คุณต้องเขียน
สถาปัตยกรรมแบบส่วนประกอบ
สถาปัตยกรรมแบบส่วนประกอบของ Angular ช่วยให้การสร้างส่วนติดต่อผู้ใช้ที่ซับซ้อนเป็นไปได้ง่ายขึ้นโดยการแบ่งออกเป็นส่วนประกอบย่อย ๆ ที่นำกลับมาใช้ใหม่ได้
ส่วนประกอบสามารถนำกลับมาใช้ใหม่ได้อย่างง่ายดายในส่วนต่าง ๆ ของแอปพลิเคชัน และสามารถพัฒนาแยกกันได้ ทำให้การจัดการแอปพลิเคชันที่มีหลายส่วนซับซ้อนเป็นไปได้ง่ายขึ้น นอกจากนี้ยังทำให้การทดสอบและดีบักโค้ดเป็นไปได้ง่ายเพราะสามารถแยกส่วนประกอบออกมาและทดสอบแต่ละตัวได้
TypeScript
TypeScript เป็นซูเปอร์เซ็ตของ JavaScript ที่เพิ่มคุณสมบัติเช่น การตรวจสอบชนิดข้อมูลแบบสแตติก อินเทอร์เฟซ คลาส และคุณสมบัติอื่น ๆ ให้กับภาษา เป็นภาษาที่เป็นโอเพ่นซอร์สและได้รับการดูแลจาก Microsoft ซึ่งเป็นที่นิยมสำหรับการพัฒนาแอปพลิเคชันเว็บขนาดใหญ่
Angular ถูกเขียนด้วย TypeScript ซึ่งช่วยให้มีเครื่องมือสนับสนุนที่ดีกว่าและประสบการณ์การพัฒนาที่แข็งแกร่งขึ้น การตรวจสอบชนิดข้อมูลแบบสแตติกของ TypeScript ช่วยให้นักพัฒนาสามารถตรวจพบข้อผิดพลาดในระหว่างการคอมไพล์แทนการรัน ทำให้การดูแลรักษาและปรับปรุงโค้ดเป็นไปได้ง่ายขึ้น
ชุมชนขนาดใหญ่
Angular มีชุมชนนักพัฒนาที่ใหญ่และกระตือรือร้น ซึ่งมีคุณค่าสำหรับหลาย ๆ เหตุผล
ชุมชนขนาดใหญ่มีทรัพยากรมากมาย เช่น บทเรียน เอกสาร และฟอรั่ม ซึ่งสามารถช่วยนักพัฒนาที่เพิ่งเริ่มต้นกับ Angular หรือกำลังมองหาวิธีแก้ปัญหาเฉพาะได้อย่างมาก
ชุมชนขนาดใหญ่ยังหมายความว่านักพัฒนาจำนวนมากกำลังทำงานร่วมกันเพื่อปรับปรุงเฟรมเวิร์กโดยการสร้างและแชร์ปลั๊กอินและส่วนขยายจากบุคคลที่สามสำหรับ Angular ซึ่งสามารถช่วยประหยัดเวลาและความพยายามของคุณได้
ข้อจำกัดของ Angular
แม้ว่า Angular จะเป็นเฟรมเวิร์กที่ทรงพลังและได้รับความนิยมสำหรับการสร้างแอปพลิเคชันเว็บ แต่ก็มีข้อจำกัดบางอย่างที่คุณควรทราบ ข้อจำกัดบางประการของ Angular ได้แก่:
เส้นโค้งการเรียนรู้ที่ชัน
Angular อาจเป็นเรื่องท้าทายสำหรับนักพัฒนาบางคน เนื่องจากมีการนำเสนอแนวคิดและวิธีการใหม่ ๆ ในการพัฒนาเว็บ คุณอาจต้องใช้เวลามากในการเรียนรู้เกี่ยวกับโมดูล ส่วนประกอบ บริการ การฉีดพึ่งพา และการเขียนโปรแกรมแบบตอบสนอง
ขนาดใหญ่
Angular เป็นเฟรมเวิร์กที่มีขนาดค่อนข้างใหญ่เมื่อเทียบกับเฟรมเวิร์กฝั่งหน้าอื่น ๆ ขนาดที่ใหญ่ของ Angular ส่วนใหญ่เกิดจากชุดคุณสมบัติที่ครอบคลุม ซึ่งรวมถึงฟังก์ชันในตัวมากมาย เช่น การจัดการฟอร์ม การกำหนดเส้นทาง และการจัดการข้อมูล
ขนาดที่ใหญ่ของ Angular อาจส่งผลให้เวลาโหลดแอปพลิเคชันเว็บช้าลง ซึ่งอาจมีผลกระทบต่อประสบการณ์ผู้ใช้ โดยเฉพาะสำหรับผู้ใช้ที่มีการเชื่อมต่ออินเทอร์เน็ตช้า
ขนาดที่ใหญ่ของ Angular ยังทำให้การพัฒนาและดูแลรักษาโปรเจกต์ที่ซับซ้อนเป็นเรื่องที่ท้าทายมากขึ้น
ความสามารถด้าน SEO ที่จำกัด
ความสามารถด้าน SEO ที่จำกัดของ Angular เกิดจากที่มันเป็นเฟรมเวิร์กสำหรับแอปพลิเคชันหน้าเดียว (SPA) ซึ่ง SPA ถูกออกแบบให้ทำงานทั้งหมดในเบราว์เซอร์ หมายความว่าโค้ด HTML ถูกสร้างขึ้นแบบไดนามิกด้วย JavaScript ทำให้เครื่องมือค้นหาไม่สามารถทำดัชนีเนื้อหาได้อย่างแม่นยำ
การสร้างแอปพลิเคชันบล็อก
สร้างแอปพลิเคชัน Angular และตั้งชื่อว่า “blog-application” เพื่อสร้างแอปพลิเคชัน Angular ให้รันคำสั่งต่อไปนี้ในไดเรกทอรีโปรเจกต์ของคุณในเทอร์มินัล:
ng new blog-application หลังจากที่คุณสร้างแอปพลิเคชัน Angular แล้ว คุณจะสร้างสองส่วนประกอบ โดยส่วนประกอบทั้งสองนี้จะเป็นส่วนสำหรับหน้าแรกและโพสต์ หลังจากสร้างส่วนประกอบแล้ว คุณจะกำหนดเส้นทางสำหรับส่วนประกอบเหล่านั้น
เพื่อสร้างส่วนประกอบ ให้รันคำสั่งต่อไปนี้:
cd blog-application ng generate component home-component ng generate component post-component เมื่อคุณสร้างส่วนประกอบแล้ว ให้กำหนดการกำหนดเส้นทางในไฟล์ app-routing.module.ts
ดังนี้:
//app-routing.module.ts import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { HomeComponentComponent } from './home-component/home-component.component'; import { PostComponentComponent } from './post-component/post-component.component'; const routes: Routes = [ {path: '', component: HomeComponentComponent}, {path: 'post', component: PostComponentComponent} ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } โค้ดบล็อกด้านบนกำหนดเส้นทางสองเส้นทางในอาร์เรย์ routes เส้นทางสำหรับ HomeComponentComponent มีพาธว่าง ซึ่งหมายความว่า HomeComponentComponent จะแสดงทันทีที่คุณแสดงผลแอปพลิเคชันของคุณ
เส้นทางสำหรับ PostComponentComponent ถูกกำหนดด้วยพาธ “post” หมายความว่าเมื่อคุณนำทางไปยังเส้นทางนี้ PostComponentComponent จะถูกแสดงผลในวิว
เพื่อไปยังเส้นทางที่ระบุ คุณจะเพิ่มส่วนหัวในแอปพลิเคชันของคุณ โดยคุณจะสร้างส่วนหัวในไฟล์ app-component.html ซึ่งส่วนหัวนี้จะมีองค์ประกอบที่ใช้ในการนำทางไปยังเส้นทางต่าง ๆ
ตัวอย่างเช่น:
<!--app.component.html--> <div> <div class="header"> <a routerLink=""><h2>Blog</h2></a> <a routerLink="post"><button>write</button></a> </div> <router-outlet></router-outlet> </div> แท็ก div สำหรับส่วนหัวประกอบด้วยแท็ก anchor ลูกสองตัว ซึ่งแท็ก anchor นี้ครอบแท็ก h2 และปุ่ม เมื่อคลิกที่แท็ก h2 จะนำทางไปยังเส้นทางเริ่มต้น ในขณะที่การคลิกที่ปุ่มจะนำทางไปยังเส้นทาง post แท็ก router-outlet จะแสดงส่วนประกอบที่กำหนดเส้นทางไว้ใต้ส่วนหัว
หลังจากสร้างส่วนหัวแล้ว ให้จัดรูปแบบส่วนหัวในไฟล์ app-compnent.scss:
/* app.component.scss*/ .header{ display: flex; justify-content: space-between; padding: 1rem 0; } การผสานรวม Back4App
เพื่อเริ่มต้นสร้างแอปพลิเคชันด้วย Back4app ก่อนอื่นให้แน่ใจว่าคุณมีบัญชีผู้ใช้ หากคุณยังไม่มีบัญชี Back4app ให้ทำตามคำแนะนำดังต่อไปนี้:
- ไปที่ เว็บไซต์ Back4app
- ค้นหาปุ่มสมัครสมาชิกที่มุมขวาบนของหน้าแรกแล้วคลิก
- กรอกแบบฟอร์มการสมัครและส่งข้อมูล
เมื่อคุณสมัครสมาชิกสำเร็จแล้ว ให้เข้าสู่ระบบบัญชี Back4app ของคุณและดำเนินการดังนี้:
- หาปุ่ม NEW APP ที่มุมขวาบนแล้วคลิก
- คุณจะถูกนำไปยังแบบฟอร์มที่คุณจะกรอกชื่อแอปที่ต้องการ
- กรอกชื่อแอปของคุณแล้วเลือกปุ่ม CREATE เพื่อเริ่มต้นกระบวนการสร้างแอป
หลังจากคลิกปุ่ม “CREATE” แอปพลิเคชันของคุณจะถูกสร้างขึ้น และคุณจะถูกนำไปยังแดชบอร์ดของแอปพลิเคชัน
การเชื่อมต่อแอปพลิเคชันของคุณกับ Back4app
เพื่อเชื่อมต่อแอป Angular ของคุณกับแอป Back4app ที่คุณสร้าง คุณต้องติดตั้ง Parse JavaScript SDK
ติดตั้ง SDK โดยรันคำสั่งใดคำสั่งหนึ่งด้านล่างนี้ ขึ้นอยู่กับตัวจัดการแพ็กเกจของคุณ:
#using npm npm install parse or #using yarn yarn add parse หลังจากติดตั้ง Parse JavaScript SDK แล้ว คุณต้องรับค่า Application ID และ JavaScript Key ซึ่งจำเป็นสำหรับการเชื่อมต่อแอป Angular ของคุณกับแอป Back4app
ในการดึงค่า Application ID และ JavaScript Key จาก Back4app ให้ไปที่ส่วน Security & Keys โดยเลือก App Settings ในแดชบอร์ด ที่นั่นคุณสามารถเข้าถึงคีย์ที่จำเป็นสำหรับการเชื่อมต่อแอป Angular ของคุณกับ Back4app ได้อย่างง่ายดาย
หลังจากได้รับค่า Application ID และ JavaScript Key แล้ว ให้เก็บไว้ในแอปพลิเคชันของคุณอย่างปลอดภัย
ในไฟล์ app.component.ts ของคุณ ให้ import เวอร์ชันย่อของ Parse จาก parse จากนั้นเรียกใช้เมธอด initialize บน Parse โดยเมธอดนี้รับค่า Application ID และ JavaScript Key เป็นอาร์กิวเมนต์ สุดท้าย ตั้งค่า serverURL บน Parse เป็น ‘https://parseapi.back4app.com/’
หลังจากทำขั้นตอนนี้ ไฟล์ app.component.ts ของคุณควรมีลักษณะดังนี้:
//app.component.ts import { Component } from '@angular/core'; import * as Parse from 'parse'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { } Parse.initialize(PARSE_APPLICATION_ID, PARSE_JAVASCRIPT_KEY); (Parse as any).serverURL = "การเพิ่มข้อมูลลงในแอป Back4app ของคุณ
ในการเพิ่มข้อมูลลงในแอป Back4app ของคุณ คุณจะสร้างแบบฟอร์มเพื่อรับข้อมูลจากผู้ใช้ เมื่อส่งแบบฟอร์ม คุณจะเรียกใช้ฟังก์ชัน handleSubmit ซึ่งจะมีตรรกะสำหรับการเพิ่มโพสต์ใหม่จากแอปบล็อกของคุณเข้าสู่แอป Back4app
ตัวอย่างเช่น:
// post-component.component.ts import { Component } from '@angular/core'; import * as Parse from 'parse'; @Component({ selector: 'app-post-component', templateUrl: './post-component.component.html', styleUrls: ['./post-component.component.scss'] }) export class PostComponentComponent { data: postData = { title: '', body: '', } handleSubmit(){ try { const Post = new Parse.Object("Post"); Post.set("title", this.data.title); Post.set("body", this.data.body); Post.save().then(() => { console.log("New Post added successfully"); }); } catch (error) { console.log(error); } } } interface postData { title: string, body: string } โค้ดบล็อกด้านบนคือไฟล์ post-component.component.ts ฟังก์ชัน handleSubmit สร้างอ็อบเจ็กต์ Post ใหม่จาก Parse และตั้งค่าคุณสมบัติ title เป็นค่าจาก data.title และ body เป็นค่าจาก data.body สุดท้าย บันทึกคุณสมบัติของอ็อบเจ็กต์ Post ลงในเซิร์ฟเวอร์ Parse โดยใช้ Post.save()
คุณสมบัติของ data จะได้รับค่าจากผู้ใช้ผ่านแบบฟอร์ม โดยคุณจะสร้างแบบฟอร์มในไฟล์ post-component.component.html
ตัวอย่างเช่น:
<!-- post-component.component.html --> <form class="post" (ngSubmit)="handleSubmit()"> <input type="text" placeholder="Title..." name="title" [(ngModel)]="data.title" > <textarea name="body" placeholder="Body..." cols="30" rows="10" [(ngModel)]="data.body"></textarea> <button type="submit">Post</button> </form> ตัวแปร ngModel ทำการผูกค่าของช่องอินพุต title และ body กับคุณสมบัติของ data ส่วน ngSubmit จัดการการส่งแบบฟอร์มโดยเรียกใช้ฟังก์ชัน handleSubmit ที่ประกาศไว้ในไฟล์ post-component.ts
ต่อไป คุณจะจัดรูปแบบส่วนประกอบของคุณ ในไฟล์ SCSS ของ post-component ให้ใส่โค้ดดังต่อไปนี้:
/* post-component.component.scss */ .post{ margin-block-start: 4rem; display: flex; flex-direction: column; gap: 1rem; align-items: center; input{ border: none; inline-size: 100%; padding: 1rem; border-radius: 7px; &::placeholder{ color: #e2e2e2; } textarea{ border: none; inline-size: 100%; padding: 1rem; &::placeholder{ color: #e2e2e2; } } } ดึงข้อมูลจาก Back4app
ในการดึงข้อมูลจากแอป Back4app ของคุณ ให้สร้างการค้นหา (query) ด้วย Parse สำหรับคลาสที่คุณต้องการดึงข้อมูล การค้นหานี้จะทำงานใน lifecycle hook ngOnInit
ตัวอย่างเช่น:
// home-component.component.ts import { Component } from '@angular/core'; import * as Parse from 'parse'; @Component({ selector: 'app-home-component', templateUrl: './home-component.component.html', styleUrls: ['./home-component.component.scss'] }) export class HomeComponentComponent { data: postData[] = []; async ngOnInit() { try { const query = new Parse.Query("Post"); const post = await query.find(); this.data = post; } catch (error) { console.log(error); } } } interface postData { id: string, get: any, } โค้ดบล็อกด้านบนค้นหาอ็อบเจ็กต์ “Post” จากฐานข้อมูลของแอป Back4app ของคุณโดยใช้เมธอด Parse.Query() จากนั้นจะคืนค่าอาร์เรย์ที่ประกอบด้วยผลลัพธ์จากการค้นหาด้วยการเรียกใช้เมธอด find ของ Parse SDK สุดท้าย กำหนดค่าอาร์เรย์ที่ได้ให้กับตัวแปร data
โดยใช้ตัวแปร data คุณจะทำการแสดงผลเทมเพลต HTML ของคุณ:
<!-- home-component.component.html --> <div class="home"> <div class="post" *ngFor="let post of data"> <h3>{{ post.get('title') }}</h3> <p>{{ post.get('body') }}</p> <button>Delete</button> </div> </div> ไดเร็กทีฟ ngFor ทำการวนลูปผ่านอาร์เรย์และสร้างองค์ประกอบ HTML ที่ห่อด้วยแท็ก div โดยเมธอด post.get() ดึงค่าของคุณสมบัติ title และ body จากฐานข้อมูล Back4app ของคุณ
ตอนนี้คุณสามารถจัดรูปแบบส่วนประกอบของคุณได้โดยการเพิ่มโค้ดต่อไปนี้ในไฟล์ SCSS ของส่วนประกอบ:
/* home-component.component.scss */ .home{ display: flex; flex-direction: column; gap: 2rem; margin-block-start: 4rem; .post{ border-radius: 12px; padding: 1rem; &:hover{ box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); background-color: #e2e2e2; } h3{ text-transform: uppercase; margin-block-end: 0.4rem; } button{ margin-block-start: 1rem; } } } การลบข้อมูลจากแอป Back4app ของคุณ
ในการลบข้อมูลจากแอป Back4app ของคุณ ให้ใช้เมธอด destroy เพื่อลบระเบียนที่เกี่ยวข้องออกจากฐานข้อมูล คุณจะสร้างฟังก์ชัน deletePost ในไฟล์ home-component.component.ts ซึ่งจะมีตรรกะสำหรับการลบโพสต์ออกจากฐานข้อมูลของแอป Back4app ตาม ID ที่กำหนด
ตัวอย่างเช่น:
// home-component.component.ts async deletePost(id: string) { try { const Post = Parse.Object.extend("Post"); const todo = new Post(); todo.id = id; await todo.destroy(); const newData = this.data.filter( (item: postData) => item.id !== id ) this.data = newData; } catch (error) { console.log(error); } } โค้ดบล็อกด้านบนสร้างอ็อบเจ็กต์ Post ใหม่โดยใช้เมธอด Parse.Object.extend จากนั้นตั้งค่าคุณสมบัติ id ของอ็อบเจ็กต์ Post ให้เป็นพารามิเตอร์ที่ส่งเข้ามาในฟังก์ชัน
ต่อไป มันเรียกใช้เมธอด destroy ของอ็อบเจ็กต์ Post เพื่อลบโพสต์ที่มี ID ดังกล่าวออกจากฐานข้อมูล Back4app จากนั้นกรองอาร์เรย์ data เพื่อคืนค่าอาร์เรย์ใหม่ newData ที่มีโพสต์ทั้งหมดยกเว้นโพสต์ที่ถูกลบ และกำหนดค่าอาร์เรย์ newData ให้กับตัวแปร data
เมื่อคุณได้กำหนดฟังก์ชัน deletePost ในไฟล์ home-component.component.ts แล้ว ให้ผูกฟังก์ชันนี้กับปุ่มลบในไฟล์ HTML ของส่วนประกอบโดยใช้เหตุการณ์ click
ไฟล์ home-component.component.html ของคุณควรมีลักษณะดังนี้:
<!-- home-component.component.html --> <div class="home"> <div class="post" *ngFor="let post of data"> <h3>{{ post.get('title') }}</h3> <p>{{ post.get('body') }}</p> <button (click)="deletePost(post.id)">Delete</button> </div> </div> สุดท้าย ให้เพิ่มสไตล์ทั่วโลกให้กับแอปพลิเคชันโดยการเพิ่มโค้ดต่อไปนี้ลงในไฟล์ styles.scss:
/* styles.scss */ *{ margin: 0; padding: 0; box-sizing: border-box; } body{ inline-size: 50%; margin: 0 auto; background-color: #f2f2f2; } a{ text-decoration: none; color: inherit; } button{ border: 1px #333333 solid; padding: 0.3rem 0.5rem; border-radius: 0.4rem; background-color: inherit; inline-size: min-content; &:hover{ background-color: #333333; color: #FFFFFF; } } การทดสอบแอปพลิเคชัน
ในการทดสอบแอปพลิเคชัน ให้เปิดเทอร์มินัลในโปรเจกต์ของคุณและรันคำสั่งด้านล่าง:
ng serve คำสั่งด้านบนจะคอมไพล์แอปพลิเคชันและโฮสต์บนเซิร์ฟเวอร์ท้องถิ่นที่ http://localhost:4200 โดยค่าเริ่มต้น
เมื่อแอปพลิเคชันของคุณเปิดขึ้น คุณควรเห็นส่วนติดต่อผู้ใช้ที่แสดงในภาพด้านล่าง:
การคลิกปุ่ม write จะนำทางคุณไปยังส่วนประกอบ post-component ซึ่งมีแบบฟอร์มที่มีช่องอินพุตและปุ่ม
ส่วนประกอบ post-component จะมีลักษณะดังนี้:
หลังจากกรอกข้อมูลในช่องอินพุตแล้ว การคลิกปุ่ม post จะเพิ่มค่าที่กรอกลงในฐานข้อมูล Back4app เพื่อตรวจสอบให้แน่ใจ คุณสามารถตรวจสอบแดชบอร์ดของแอป Back4app ของคุณหรือเปลี่ยนเส้นทางกลับไปที่หน้าแรกของแอปพลิเคชัน
การคลิกปุ่ม delete จะลบโพสต์ออก เช่น ลบโพสต์ “What is a lion?” โดยคลิกปุ่มลบของโพสต์นั้น
สรุป
Angular เป็นเฟรมเวิร์กที่ทรงพลังสำหรับการสร้างแอปพลิเคชันเว็บที่สามารถขยายขนาดได้และมีความทนทาน โดยมีสถาปัตยกรรมแบบโมดูล การผูกข้อมูลที่ทรงพลัง และส่วนประกอบที่สร้างไว้ล่วงหน้ามากมาย ข้อดีของมันรวมถึงการเพิ่มประสิทธิภาพในการทำงานของนักพัฒนา กระบวนการพัฒนาที่ราบรื่น และความสามารถในการสร้างส่วนติดต่อผู้ใช้ที่ไดนามิก ตอบสนอง และมีประสิทธิภาพ
การสร้างแอป Angular โดยใช้ Back4app เป็นโซลูชัน Backend-as-a-Service สามารถช่วยลดความซับซ้อนและเร่งความเร็วในการพัฒนาได้อย่างมาก ด้วยโครงสร้างพื้นฐานที่สร้างไว้ล่วงหน้าของ Back4app คุณสามารถมุ่งเน้นที่การสร้างส่วนหน้า (frontend) ของแอปพลิเคชันของคุณ โดยไม่ต้องกังวลเกี่ยวกับความซับซ้อนของการพัฒนา backend เช่น การตรวจสอบตัวตนและการจัดเก็บข้อมูล
