Visual Studio | Banana Blog

สวัสดีครับวันนี้เราจะมาสร้างเว็บแอปพลิเคชัน TO-DO List ด้วย ASP.NET Core + Angular + Angular Material กันครับ ก่อนอื่นมารู้จักกับ แอปพลิเคชัน TO-DO List กันก่อน มันคืออะไร มันก็คือ….แอปพลิเคชันที่มีไว้สำหรับจดโน้ตนั่นแหละครับ เราสามารถจดสิ่งที่เราจะต้องทำแล้วสามารถเลือกได้ว่าเราทำเสร็จแล้ว ตัวอย่างก็เช่น เวลาเราทำอาหาร 1 มื้อ เราก็ต้องวางแผนสิ่งที่เราจะต้องซื้อก่อนนั่นเอง

ส่วนโครงสร้างของเว็บแอปของเราก็จะตามภาพข้างล่าง โดยเราจะสร้าง API ด้วย ASP.NET Core 2.1 เก็บข้อมูลใน Sqlite และฝั่ง Client เราจะสร้างด้วย Angular + Angular Material

Prerequisites

Visual Studio 2017 Community Version
.NET Core 2.1 SDK or later (รวมอยู่ใน Visual Studio 2017)
Visual Studio Code
Node JS
Postman

Part 1 Web API
มาเริ่มกันด้วย Web API ซึ่งเป็นส่วนของ Server ที่จะคอยรับ-ส่งข้อมูล จากฐานข้อมูลของเรา โดยเราจะสร้าง API จาก ASP.NET Core 2.1 และเก็บข้อมูลไว้ใน Sqlite
สร้างโปรเจค APS.NET Core Web Application – TodoApi เลือก ASP.NET Core 2.1, API

เพิ่ม Model Class / Database ContextClass คือ ตัวที่บ่งบอกว่า Object ของเราประกอบไปด้วยอะไรบ้าง โดย TodoItem ของเราจะประกอบไปด้วย

Id จะถูกสร้างขึ้นอัตโนมัติโดย Database เมื่อ TodoItem ถูกสร้างขึ้น
Name เป็นชื่อของ TodoItem จะเก็บเป็น string
IsComplete เป็นสถานะของ TodoItem จะเก็บเป็น boolean (true, false)

	namespace TodoApi.Models
	{
	public class TodoItem
	{
	public long Id { get; set; }
	public string Name { get; set; }
	public bool IsComplete { get; set; }
	}
	}

view raw

TodoItem.cs

hosted with ❤ by GitHub

Install Microsoft.EntityFrameworkCore.Sqlite and Microsoft.EntityFrameworkCore.Design เปิด Command prompt แล้วชี้ไปที่โฟลเดอร์โปรเจคของเรา (ใน folder ที่มีไฟล์ TodoApi.csproj) Run command ข้างล่าง

	dotnet add package Microsoft.EntityFrameworkCore.Sqlite
	dotnet add package Microsoft.EntityFrameworkCore.Design
	dotnet restore

view raw

Entity Framework package

hosted with ❤ by GitHub

สร้าง Clsas TodoContext และแทนที่ด้วย code ข้างล่าง โดย TodoContext จะทำหน้าที่เชื่อมระหว่าง TodoItem.cs และ Entity Framework

	using Microsoft.EntityFrameworkCore;

	namespace TodoApi.Models
	{
	public class TodoContext : DbContext
	{
	public TodoContext(DbContextOptions<TodoContext> options)
	: base(options)
	{
	}

	public DbSet<TodoItem> TodoItems { get; set; }
	}
	}

view raw

TodoContext.cs

hosted with ❤ by GitHub

เชื่อม DbContext กับ Database Sqlite โดยแทนที่ code ข้างล่างใน Startup.cs โดย code ส่วนที่ทำหน้าที่นั้นก็คือ services.AddDbContext<TodoContext>(opt => opt.UseSqlite(“Data Source=TodoList.db”)); โดย TodoList.db คือชื่อ Database ของเรานั่นเอง

	using Microsoft.AspNetCore.Builder;
	using Microsoft.AspNetCore.Mvc;
	using Microsoft.EntityFrameworkCore;
	using Microsoft.Extensions.DependencyInjection;
	using TodoApi.Models;

	namespace TodoApi
	{
	public class Startup
	{
	public void ConfigureServices(IServiceCollection services)
	{
	services.AddDbContext<TodoContext>(opt =>
	opt.UseSqlite("Data Source=TodoList.db"));
	services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
	}

	public void Configure(IApplicationBuilder app)
	{
	app.UseMvc();
	}
	}
	}

view raw

Startup.cs

hosted with ❤ by GitHub

สร้าง Sqlite Database

Initial Database และสร้าง Database จาก code ข้างล่าง โดยรันคำสั่งใน CMD (Command Prompt) ในโฟลเดอร์โปรเจคของเรา

	dotnet ef migrations add InitialCreate
	dotnet ef database update

view raw

Migrate and Create Sqlite Db

hosted with ❤ by GitHub

สร้าง Controller

New Item -> Add New Item เลือก API Controller Class template ตั้งชื่อ class TodoController และแทนที่

https://gist.github.com/cpanuphan/75263afca07f0adff30af7b014fe0361ต่อมาเราจะมาเพิ่ม method ทั้งหมด เพื่อจัดการ TodoItem ของเรา โดยจะมีทั้งหมด 5 metod คือ

API	Description	Request body	Response body
GET /api/todo	Get all to-do items	None	Array of to-do items
GET /api/todo/{id}	Get an item by ID	None	To-do item
POST /api/todo	Add a new item	To-do item	To-do item
PUT /api/todo/{id}	Update an existing item	To-do item	None
DELETE /api/todo/{id}	Delete an item	None	None

ต่อมาเราก็จะมาทำหน้าเว็บแอพพลิเคชั่นของเรากัน โดยวันนี้เราก็จะเลือก Angular + Angular Material กันนะครับPart 2 Web Application

ก่อนอื่นมาทำความรู้จักกับ Angular กันก่อน Angular เป็น Framework สำหรับสร้างแอปพลิเคชันในฝั่งไคลเอ็น โดยจะทำงานแบบ MVC/MVVM Framework โดยข้อดีของ Angular นั่นก็คือ มันเป็น Single Page Application (SPA) ซึ่งจะทำงานได้เร็วมาก และอีกทั้งเรายังสามารถพัฒนาได้หลายแพลตฟอร์มได้ เพราะฉะนั้นศึกษาไว้ก็ไม่เสียหายใช่ไหมครับ และเราจะตกแต่งหน้าตาเว็บแอปพลิเคชันของเราให้สวยสดงดงามได้ด้วย Angular Material โดย Angular Material นั้นจะมี Component มากมาย โดยที่เราจะนำมาใช้ในโปรเจคนี้ก็เช่น Textbox, Checkbox, Icon, Button เพื่อไม่ให้เป็นการเสียเวลา เรามาต่อกันเลยดีกว่า

Setup Development Environment

เปิด Command Prompt (CMD) ขึ้นมา เช็คว่าที่เครื่องเราได้ลง Node js รึยังโดย พิมพ์ node –v ถ้ามีแล้วก็จะขึ้นตามรูปข้างล่าง ถ้ายังไม่มีก็ให้ไปโหลด Node JS มา Install ไว้ที่เครื่อง

Install Angular CLI ซึ่งเป็นเครื่องมือแบบ command line interface ช่วยให้เราสามารถสร้างโปรเจค หรือเขียน Angular ได้ง่ายและเร็วขึ้น

npm install –g @angular/cli

view raw

Install Angular cli

hosted with ❤ by GitHub

Create Angular Project

เราจะมาสร้าง Angular Project ง่ายๆ ด้วยการใช้ Angular cli โดยเราจะตั้งชื่อแอปของเราว่า TodoListApp เมื่อเราพิมพ์ ng new ToListApp แล้วตัว cli ก็จะจัดการสร้างโปรเจคให้กับเรา โดยเราสามารถนั่งจิบกาแฟรอได้เลย

	ng new TodoListApp
	mkdir TodoListApp
	ng serve –open

view raw

Create Angular project

hosted with ❤ by GitHub

ส่วน ng serve –open ก็คือ คำสั่งสำหรับ run Angular App ของเรานั่นเอง โดย –open จะทำการ browseแอปพลิเคชันของเราให้อัตโนมัติแอปพลิเคชันแรกของเราหน้าตาก็จะประมาณนี้ เป็นเทพเพลทพื้นฐานที่ตัว cli สร้างขึ้นมาให้กับเรา

ต่อไปจะทำการเพิ่ม Angular Material ให้กับโปรเจคของเรา

Step 1 Install Angular Material, Angular CDK and Angular Animations

npm install –save @angular/material @angular/cdk @angular/animations

view raw

Install Angular Material

hosted with ❤ by GitHub

Step 2 Configure animations เพิ่ม code ข้างล่างในไฟล์ src\app\app.module.ts

	import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

	@NgModule({
	…
	imports: [BrowserAnimationsModule],
	…
	})

view raw

Configure animations

hosted with ❤ by GitHub

Step 3 Include a theme เพิ่ม code ข้างล่างในไฟล์ src\app\styles.css

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

view raw

Include a theme

hosted with ❤ by GitHub

Step 5 Add Material Icons

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

view raw

Add Material Icon

hosted with ❤ by GitHub

ยินดีด้วย!! ตอนนี้เราก็มี To-do List Application ใช้กันแล้ว ส่วนรายละเอียดการสร้าง Component และการเรียก API ต่างๆ สามารถตามเข้าไปดูใน GitHub ได้นะครับ ถ้าเอามาเล่าในนี้เกรงว่าจะยาวเกินไป

ลองตามเข้าไปดู Code ต่อได้ที่

ASP.NET Core Web API TodoApi

Angular + Angular Material TodoListApp

Category: Visual Studio

Build TO-DO List ASP.NET Core Web API With Angular JS

References

First Impressions of ASP.NET and Visual Studio Code on OS X

Introduction

Installing Mono