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

สวัสดีครับวันนี้เราจะมาสร้างเว็บแอปพลิเคชัน 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

  1. Visual Studio 2017 Community Version
  2. .NET Core 2.1 SDK or later (รวมอยู่ใน Visual Studio 2017)
  3. Visual Studio Code
  4. Node JS
  5. 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)

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

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

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

สร้าง Sqlite Database

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

สร้าง 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 ได้ง่ายและเร็วขึ้น

Create Angular Project

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

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

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

Step 1 Install Angular Material, Angular CDK and Angular Animations

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

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

Step 5 Add Material Icons

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

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

ASP.NET Core Web API TodoApi

Angular + Angular Material TodoListApp

References

รีวิวการฝึกงานกับบานาน่า โคดดิ้ง โดย อั๋น (วิทยาการคอมพิวเตอร์ มหาวิทยาลัยแม่โจ้)

“สวัสดีครับ ก่อนอื่นผมขอแนะนำตัวเองก่อนเลยละกันนะครับผมชื่อ อั๋น เพิ่งจบปี 3 คณะวิทยาศาสตร์ สาขาวิทยาการคอมพิวเตอร์ มหาวิทยาลัยแม่โจ้ จ.เชียงใหม่” ซึ่งหลังจากจบปีที่ 3 ก่อนจะขึ้นปีที่ 4 นั้นก็จะต้องผ่านการฝึกงานกับบริษัทก่อน 2 เดือน ผมเลยได้ยื่นสมัครฝึกงานไปกับบริษัทประมาณ 2-3 ที่ได้ แต่ที่แรกที่ติดต่อผมกลับมาคือ Banana Coding ที่นี่ นี่เองครับ ผมจำเหตุการณ์วันที่พี่เค้าติดต่อกลับมาวันนั้นได้เลย เป็นช่วงสาย อยู่ๆ ก็มีคนโทรศัพท์เข้ามา”

ผม : ฮัลโหลครับ สวัสดีครับผม
!@#$ : สวัสดีครับ พี่โทรมาจากบริษัทบานาน่าโค๊ดดิ่งนะครับ ไม่ทราบว่าน้องยังสนใจที่จะฝึกงานบริษัทพี่อยู่รึเปล่าครับ
ด้วยความดีใจตอนนั้นผมรีบตอบกลับไปทันทีเลยว่า
ผม : ครับยังสนใจอยู่ครับ
!@#$ : ได้ครับผมเป็นอันยืนยันเน้อะ งั้นเจอกันเดือนเมษานะครับเดี๋ยวพี่จะส่งอีเมล์ให้เรื่องการเตรียมตัวต่าง ๆ
ผม : ได้ครับผม ขอบคุณมากครับ

หลังจากวางโทรศัพท์ไปเพิ่งมานั่งคิดได้ เดี๋ยวนะบริษัทนี้จำได้ว่าอยู่ไกล ไอ่เราก็ไม่แน่ใจเลยเปิดแผนที่ดู แม่เจ้า !!! 19 โล ไปกลับนี่ 38 โลเลยนะ โอ้โหหหห แย่ละ จะขับรถไหวไหมเนี่ย จะเช่าหอก็คงไม่คุ้มเพราะเราก็อยู่แค่ 2 เดือนมันไม่มีหรอกมั้งที่หอไหนจะประกันหอแค่ 2 เดือนออกได้เลย จะเอาเงินค่าประกันไปทิ้งก็ไม่น่าจะคุ้มอีก เรื่องเช่าหออยู่ใกล้ ๆ ก็ตัดไปได้เลย แถวนั้นเขตของ มช. ด้วยส่วนมากคนในบริษัทเขาน่าจะเป็นเด็ก มช. มีแต่คนเก่งๆทั้งนั้นแน่เลย ตอนนั้นคือแบบกลัวไปหมดคิดไปต่าง ๆ นา ๆ กดดันตัวเองมาก จนสุดท้ายแล้วเราก็ตัดสินใจว่า เอาว่ะ !! ไหน ๆ เราก็เลือกแล้วจะยังไงสุดท้ายแล้วเราจบเราก็ต้องทำงาน เราต้องเจออะไรอีกหลายอย่างอยู่ดี ถือว่าซ้อมละกันก่อนจะจบไปเจอของจริง หลังจากคิดไปต่าง ๆ นาแล้วสุดท้ายพอมาเจอเข้าให้จริง ๆ นี่เรียกได้ว่าคนละเรื่องเลยเริ่มจากการฝึกงานในช่วงเดือนแรกจะเป็นการเข้า Bootcamp คือการปูพื้นฐานต่าง ๆ เพื่อให้พร้อมทำงานจริง โดยพี่ ๆ จะมีเนื้อหามาสอนทุกวันเป็นเวลา 1 เดือนเต็มตัวอย่างคร่าวๆก็คือ Git, Trello, HTML, CSS, Bootstrap, Ruby, RubyOnRails , JavaScript, Typescipt, Angular 2 หรือแม้กระทั่งการเขียน Test โดยการสอนแต่ละหัวข้อก็จะมีการบ้านให้มาฝึกทำ เพื่อให้เข้าใจสิ่งที่เรียนในวันนั้น ๆ ได้ดียิ่งขึ้น แถมหัวข้อในแต่ละวันยังเปลี่ยนคนสอนด้วยนะทำให้เป็นการทำความรู้จักกับพี่ ๆ ไปในตัว

หลังจากที่ผ่าน Bootcamp แล้วจะเป็นการได้ร่วมทำ Project ต่าง ๆ ของบริษัทโดยจะมี Mentors หรือพี่เลี้ยงคอยดูแลเราหากเราติดปัญหาอะไร สามารถสอบถามพี่เค้าได้เลย ตอนแรกที่เราได้จับงานก็แบบ “เอ่อออ เราจะทำงานเค้าพังไหม เราจะทำได้ไหมเนี่ย” สุดท้ายก็ค่อย ๆ ผ่านมันไปได้ด้วยดี ด้วยความช่วยเหลือของพี่ๆ คอยแนะนำเวลาเราติดปัญหาอะไร
การมาฝึกงานของผมนั้นเหมือนเป็นการพิสูจน์อะไรหลาย ๆ อย่างในใจที่คิดเอาไว้ตอนแรกเลยก็ว่าได้ เริ่มแรกจากการเดินทาง 19 กิโลเมตรก็ไม่ได้ไกลแบบที่คิดเท่าไหร่ ขับไปกลับ 38 กิโลเมตรนี่ก็ไม่ได้โหดร้ายอะไรขนาดนั้น อย่างที่สองที่ว่า “แถวนั้นเขตของ มช. ด้วยคนในบริษัทเขาน่าจะเป็นเด็ก มช. มีแต่คนเก่งๆทั้งนั้นแน่เลย” อันนี้เรื่องจริงแหะ มีครั้งนึงได้งานมาให้เขียนฟังก์ชั่นมาเพื่อดักสิ่งที่ลูกค้าเขาไม่ต้องการ ไอ่เราก็นั่งทำ ๆไป พอเสร็จเอาไปส่งให้พี่เค้าดูเพื่อรีวิวโค๊ด เชื่อไหมฮะฟังก์ชั่นที่ผมทำพี่แกย่อให้เหลือแค่บรรทัดเดียวเองแถมยังทำงานได้เหมือนเดิมอีกต่างหาก เค้าเก่งกันจริง ๆ แต่เค้าไม่ได้แค่เก่งอย่างเดียวนะครับ พี่เค้าทุกคนที่นี่เฟรนด์ลี่เข้าหาง่าย สงสัยอะไรสามารถถามหรือคุยกันได้ทุกเรื่องเลย ไม่ว่าจะเป็นเรื่องโปรแกรม หรืออะไรต่าง ๆ นู่นนั่นนี่ ปรึกษาการลงทุนบิทคอยยังได้เลย 5555 คือคุยได้ทุกอย่างจริง ๆ ทำให้บรรยากาศในการทำงานไม่ได้ตึงเครียดเลยดูเป็นกันเองสุด ๆ
ผมได้รับประโยชน์จากการฝึกงานมากมาย  ผมได้ประสบการณ์ในการทำงานจริงกับลูกค้า  ได้เรียนรู้การทำงานเป็นทีม ได้เพิ่มความรับผิดชอบกับงานที่ตัวเองได้รับมอบหมาย ได้เจอกับสภาพแวดล้อมในการทำงานที่สบายและเป็นกันเอง ได้อะไรจากที่นี่อีกเยอะแยะเลยครับ

สุดท้ายนี้ก็อยากจะขอบคุณพี่ ๆ ทุกคนที่คอยดูแลเราตลอดถึงแม้จะเจองานยากบ้าง แต่ก็ไม่รู้สึกเสียใจเลยที่ได้เข้ามาฝึกงานที่นี่ถือว่าได้ประสบการณ์ดีๆ กลับไปเยอะเลย ขอบคุณตัวเองเหมือนกันที่วันนั้นตอบตกลงฝึกงานกับที่นี่ไปแบบมึน ๆ (ทั้งที่ยังไม่ได้คิดเลยด้วยซ้ำมัวแต่ดีใจ) ทำให้ได้เจอบรรยากาศในการทำงานดีๆแบบนี้ ความเป็นกันเองของที่นี่ทำให้เรากล้าที่จะทำอะไรหลายๆอย่างเพิ่มขึ้นเยอะเลย ขอบคุณจากใจจริงครับผม