Posted on Leave a comment

บทเรียนจากการเปลี่ยนแปลงครั้งใหญ่ ของ Angular Framework

ถึงแม้ว่าตอนนี้ Angular จะกำลังเข้าสู่เวอร์ชั่น 9 และ AngularJS ก็เหมือนเป็นประวัติศาสตร์ไปแล้ว แต่เนื่องจากเป็นกรณีศึกษาที่น่าสนใจสำหรับคนที่อยู่ในวงการนักพัฒนา พลเลยอยากมาสรุปและแชร์ข้อคิดที่ได้จากการเปลี่ยนแปลงนี้ไว้สักหน่อย

AngularJS จุดเริ่มต้นของ Single Page Application

แนวคิดของ Single Page Application นั้นมีมานาน และ Angular Framework (ตอนนี้เรียกว่า AngularJS) เป็นหนึ่งในเครื่องมือที่ทำให้แนวคิดนี้สามารถทำได้จริงอย่างเป็นระบบ ซึ่งในตอนนั้น

  • Angular เปิดตัวในปี 2010
  • React เปิดตัวในปี 2013
  • Google Polymer เปิดตัวในปี 2015

ทำให้เครื่องมืออย่าง Angular เริ่มมีคนใช้งานก่อน และได้รับความนิยมในวงกว้าง เพราะเมื่อก่อนการทำเว็บคือการโยนโค้ด HTML, CSS, JavaScript อันอีรุงตุงนังไปรวมกันในแต่ละหน้าเว็บเพจ แต่ Angular เริ่มทำให้การเขียน JavaScript แยกเป็นสัดส่วนชัดเจนสามารถทำได้จริง

เรียนว่าตอนนั้น Angular ฮอตฮิตมาก มีการจัด Meetup ทั่วโลก ชุมชนนักพัฒนาเกิดขึ้นมากมาย จนถึงกับมีคนตั้งคำถามว่า

หรือจะถึงยุคที่ JQuery จะต้องเปลี่ยนบัลลังก์ให้กับ Angular?

เสริมนิดหน่อย ว่า Angular แรกเริ่ม มาจากฝั่ง Google คร้าบ

ความต้องการที่มากขึ้น ทำให้ AngularJS ชนกับขีดจำกัดเดิมของตัวเอง

ด้วยความนิยมอย่างล้นหลาม ทำให้ AngularJS ไม่แคล้วที่จะเริ่มโดยแกะเกา ถูกเอากลไกภายในมาวิเคราะห์ เปรียบเทียบกับเครื่องมืออื่นๆ รวมถึงพิสูจน์ศักยภาพว่าดีจริงไหม

ทำให้มีการค้นพบลักษณะเด่น ซึ่งนำไปสู่จุดดีและจุดด้อยต่างๆ เช่น

  • ตัว AngularJS นั้นใช้ภาษา JavaScript ในการเขียน ทำให้คนเขียน Web เข้าถึงได้ง่าย
  • แต่ด้วย JavaScript นี่แหละที่ทำให้การทำงานบน Web Browser ต่างยี่ห้อนั้น มีผลต่อประสิทธิภาพและความยืดหยุ่นในการใช้งาน
  • เครื่องมือต่างๆ เช่น 2-way binding ทำให้สะดวกสบาย แต่ไม่ได้เน้นประสิทธิภาพตั้งแต่แรก มีผลต่อความเร็ว
  • ไม่ได้ถูกออกแบบมาเพื่อทำงานบน Mobile Device ตั้งแต่แรก

เรียกได้ว่า AngularJS ประสบความสำเร็จอย่างล้นหลาม แต่ในตอนแรกก็คงไม่คิดว่าจะสำเร็จระดับที่ใช้งานกันหลากหลายแบบในปัจจุบัน ทำให้โครงสร้าง และการออกแบบระบบการทำงานเดิมตอบสนองกับความต้องการของนักพัฒนาไม่ได้อย่างที่ต้องการ

Angular เปลี่ยน เพื่ออนาคตใหม่

ดังนั้นหลังจากประสบความสำเร็จ ทีมงาน Angular และชุมชนจึงค้นหาหนทางที่จะทำให้ Angular สามารถเอาชนะขีดจำกัดเดิมของตัวเองได้ ซึ่งการเปลี่ยนแปลงนั้นใหญ่มากจนมีผลกระทบในวงกว้าง โดยเฉพาะกับโค้ดเดิม

และจุดนี้เอง ที่มีการเรียกเวอร์ชั่นแรกของ Angular ว่า AngularJS (Angular เวอร์ชั่น 1.X)

และในปัจจุบัน ก็เรียกเวอร์ชั่น 2 เป็นต้นมาว่า Angular เฉยๆ ครับ

การเปลี่ยนแปลงใหญ่ๆ ที่เห็นชัดเจนได้แก่

  • ก้าวข้ามปัญหาการทำงานระหว่าง Web Browser โดยใช้ภาษา TypeScript แทน JavaScript
  • TypeScript ทำให้นักพัฒนาสามารถเพิ่มเติมเทคนิคต่างๆ เข้าไปใน Framework ได้ง่ายดายเช่น แนวคิด OOP และ Dependency Injection
  • ออกแบบการทำงานให้เหมาะกับ Mobile Device อย่าง Smart phone และ Tablet
  • สามารถจัดการโค้ดในระบบ Scale ที่ใหญ่ขึ้นได้ง่ายกว่า Angular
  • ด้วยภาษา และแนวคิดมากมายที่ใส่ลงมา ทำให้ดูซับซ้อนกว่าเวอร์ชั่นแรก

ในตอนประกาศเปิดตัวนั้น เกิดความโกลาหลไม่น้อย

เพราะถ้าให้เปรียบ เหมือนมือถือแบบมีปุ่ม Home มาตลอด เคสทุกเจ้าก็ผลิตให้ตรงกับรุ่นมือถือที่มีปุ่ม Home แต่จู่ๆ ก็บอกว่าทำเคสได้เหมือนเดิมนะ แต่ต่อไปไม่มีปุ่ม Home แล้ว ถ้าเราเป็นคนทำเคสขายก็จะประมาณว่า “อ่าว เฮ้ย….”

ตอนนั้นก็มีการออกมาประกาศ Long Term Support AngularJS ว่าจะไม่ทิ้งกันนะ แต่ก็กล้อมแกล้มว่าไหนๆ ว่างๆ ก็ย้ายมา Angular แบบใหม่นะ

การเปลี่ยนแปลงที่ไม่มากอย่างที่คิด

จากสภาพการณ์ในรูปแบบของการเขียนโค้ดนั้น อาจจะมองได้ว่าเปลี่ยนแปลงในปริมาณที่มากกว่า 70% (โหดไหมล่ะ) ซึ่งแน่นอนว่าตอนนั้น Ionic Framework ที่พลใช้งาน ก็ได้รับผลกระทบด้วย

แต่ถ้าเอาจริงๆ พลได้เรียนรู้จากเหตุการณ์ครั้งนี้ คือ

จริงๆ Angular เปลี่ยนแค่ส่วนของการเขียนโค้ดเท่านั้น เป้าหมายของ Angular แต่เริ่มแรกนั้นยังอยู่ และสามารถใช้งานได้ง่ายขึ้นต่างหากครับ

แนวคิดยังคงเดิม

แนวคิดของ Angular นั้นจริงๆ ยังเหมือนกับ AngularJS นั่นคือ การเป็นเครื่องมือที่สร้าง Single Page Application ได้ง่าย

ซึ่งรูปแบบการเขียน Angular แบบ JavaScript นั้น ตอบโจทย์ความต้องการนี้ได้ในระดับหนึ่ง แต่กลายเป็นติดปัญหาด้านประสิทธิภาพ ซึ่งได้รับการแก้ไขด้วยเทคโนโลยีภาษา TypeScript จนประสบความสำเร็จใน

โดยเฉพาะการผนวกการเขียนโปรแกรมอย่าง Object-Oriented เข้ามาด้วย ซึ่งภาษา TypeScript ก็สอดคล้องกับการทำงานแบบนี้อยู่แล้ว ทำให้การจัดการโปรเจคใน Scale ขนาดใหญ่ หรือระดับ Enterprise นั้นทำได้สะดวกกว่าการเขียน JavaScript แบบเดิมด้วย

การเพิ่มเติมเทคนิคใหม่ๆ

การนำ TypeScript มาใช้แทน JavaScript ยังเปิดโอกาสให้ทีมพัฒนาและชุมชนได้โอกาสใส่ไอเดีย และระบบใหม่ๆ ลงไปในตัว Framework โดยไม่ต้องกังวลกับปัญหาพื้นฐานเดิมที่มีในภาษาเดิม อย่างเช่น OOP และ Dependency Injection

รวมถึงระบบ Route ที่พัฒนาให้ใช้งานได้ง่ายกว่าเดิมด้วย

การทำงานเหล่านี้ยังสามารถปรับปรุงได้เรื่อยๆ ด้วย เพราะ TypeScript ก็เป็นภาษาที่สามารถพัฒนาและใส่ความสามารถใหม่ๆ ได้เหมือนแอพพลิเคชั่นที่มีการอัพเดตความสามารถอยู่ตลอด

ยังอยู่บนพื้นฐานเทคโนโลยีที่คุ้นเคย

ที่สุดแล้ว พลมองว่าการย้ายเทคโนโลยีของ Angular นั้น แม้จะแลกมาด้วยความงงในตอนเริ่มแรก แต่พลกลับเห็นว่ามันเป็นระบบที่ออกแบบมาอย่างชาญฉลาด

โดยที่สุดแล้วทุกอย่างที่เราเห็น เรียนรู้ และใช้งานของ Angular ก็จะถูกแปลงเป็นภาษา JavaScript, HTML, และ CSS ธรรมดาเพื่อทำงานกับสภาวะแวดล้อมเดิมที่ลูกค้ามีได้อย่างแยบยล

ในขณะที่ตัว Angular เองก็ยังรุดหน้า พัฒนาตัวเองอย่างต่อเนื่อง และเพรียบพร้อม ให้สมชื่อ One Framework ครับ

สนใจดูข้อมูลอ้างอิงเพิ่มเติมได้ที่ – Simplilearn, Quora, StackOverflow, Gorion.io

Posted on Leave a comment

วิธีติดตั้งโปรแกรม สำหรับหลักสูตร “สร้าง Web, iOS, และ Android Application ด้วย Angular Framework”

iPhone by Omar Jordan Fawalh

สำหรับคอร์สใหม่สำหรับคนทำเว็บ ที่ต้องการเรียนรู้แนวทางพัฒนาแอพพลิเคชั่นทั้ง Web, iOS, และ Andorid App ด้วย Angular Framework ในช่วงปี 2017 – 2018 นี้ ใช้เวลา 5 วันครับ

โค้ชพลขอแชร์โปรแกรม และระบบที่เลือกใช้ เผื่อพวกเราที่สนใจจะได้มีเครื่องมือดีๆ ไปใช้กัน โดยเฉพาะ Visual Studio Code Extension ที่คัดสรรมาเป็นอย่างดีครับ

เนื้อหาหลักๆ ที่จะเรียนในคอร์สนี้ ได้แก่

  1. เข้าใจง่าย กับแนวคิดในการใช้งาน Angular Framework เวอร์ชั่นล่าสุด
  2. ใช้ Angular เพื่อพัฒนา Web Application ในฝั่ง Front-end
  3. ใช้ Angular และ Ionic Framework ในการพัฒนา iOS และ Android Application แบบ Cross-Platform
  4. เรียนรู้การเชื่อมต่อ Web App และ Mobile App ที่สร้างด้วย Angular กับ ASP.NET Web API

พร้อมแล้วมาดูวิธีการติดตั้งกันเลย

1. ติดตั้ง Node.js

ติดตั้ง Node.js โดยให้ดาวน์โหลดโปรแกรมจากเว็บนี้

  • ดาวน์โหลดตัวติดตั้ง ต้องดูให้ดี เอาแบบ LTS นะ
  • เลือกระบบ 64-bit หรือ 32-bit ให้ตรงกับเครื่องตัวเอง

2. ติดตั้ง Angular CLI

เปิดโปรแกรม Command Windows (สำหรับ Window) หรือ Terminal (สำหรับ MacOS)

และรันคำสั่ง

npm install -g @angular/cli

3. ติดตั้ง Ionic CLI

เปิดโปรแกรม Command Windows (สำหรับ Window) หรือ Terminal (สำหรับ MacOS)

และรันคำสั่ง

npm install -g cordova
npm install -g ionic

4. ติดตั้ง Visual Studio รุ่นล่าสุด

Visual Studio Workload - ASPNET Web Development.png

ให้ดาวน์โหลดตัวติดตั้งโปรแกรม Visual Studio รุ่นล่าสุด (อย่างตอนนี้ของโค้ชพลเป็นรุ่น 2017) มาติดตั้งให้เรียบร้อย

ตอนติดตั้งให้เลือก Workload ชื่อ

  • ASP.NET and web development

5. ติดตั้ง Visual Studio Code

ดาวน์โหลดตัวติดตั้งโปรแกรม Visual Studio Code มาจากที่นี่ และติดตั้งให้เรียบร้อย

จากนั้นติดตั้ง Extension ตามรายชื่อนี้

เทคนิค: ติดตั้งให้ครบ แล้วค่อยกด Reload ทีเดียวก็ได้

  1. Angular v4 TypeScript Snippets ของ John Papa
  2. Auto Import ของ steoates
  3. AutoFileName ของ Jerry Hong
  4. gi ของ RubberSheep
  5. Ionic 2 snippets ของ oudZy
  6. JavaScript Snippet ของ Mahmoud Ali
  7. Path Intellisense ของ Christian Kohler
  8. Prettier ของ Esban Petersan
  9. Rainbow Brackets ของ 2gua
  10. TypeScript Toolbox ของ DSKWRK
  11. vscode-icons ของ Roberto Huertas

6. ติดตั้ง Android SDK และ iOS SDK ตามเครื่องที่จะใช้

เลือกเส้นทางของพวกเรา ตามเครื่องคอมพิวเตอร์ที่จะใช้

  1. ถ้าเครื่องที่ใช้เป็น Windows ให้ติดตั้งโปรแกรมเพิ่มเติม สำหรับแอพ Android ตามนี้
  2. ถ้าเครื่องที่ใช้เป็น MacOS
    1. และต้องการทดสอบ Android Application บนอุปกรณ์จริง ให้ติดตั้งโปรแกรมเพิ่มเติมตามนี้
    2. และต้องการทดสอบ iOS Application บนอุปกรณ์จริง ให้ติดตั้งโปรแกรมเพิ่มเติมตามนี้
Posted on Leave a comment

เทคนิควิธีสร้าง Component ต่างๆ ในเว็บแอพพลิเคชั่น ด้วย Angular CLI

อัพเดตเนื้อหาแล้ว สามารถใช้กับ Angular 2 และ Angular 4 เป็นต้นไปจ้า

โดยปกติ Angular CLI จะช่วยนักพัฒนาเว็บแอพพลิเคชั่นสร้าง Component ต่างๆ ได้รวดเร็วมาก

ช่วงหลังพลสังเกตเทคนิคที่ค้นพบจากการอบรมเรื่อง Angular 4 and MEAN Stack ให้กับพี่น้อง ตามที่ต่างๆ ก็ขอเอามาเขียนแชร์ไว้ในแฟนเพจกับ Youtube Channel แล้วกัน

พื้นฐานคำสั่งสร้าง Component ใน Angular

หากเราใช้ Angular CLI ทำงาน (พลแนะนำมาก โดยเฉพาะสำหรับมือใหม่ จะเรียนรู้การทำงานได้เร็วกว่า) จะมีคำสั่งอมตะในการสร้าง Component แบบต่างๆ คือ

ng g <ประเภทของ Component> <ชื่อ Component> [ออฟชั่นที่ต้องการ]


เช่นถ้าต้องการสร้าง Component ธรรมดาชื่อ Product Component ก็จะเป็น

ng g component product


หรือถ้าต้องการสร้าง Class ธรรมดาชื่อ User ไว้เก็บข้อมูลจาก Database หรือ Web API ก็อาจจะใช้

ng g class user


หรือถ้าต้องการสร้าง Service component สำหรับติดต่อกับส่วน Authentication ก็ใช้

ng g service authentication


โฟลเดอร์ที่ Angular CLI จะสร้างไฟล์ Component เก็บไว้

ตามปกติ Angular CLI จะสร้างไฟล์ของ Component ต่างๆ เก็บไว้อ้างอิงจาก โฟลเดอร์​ src/app/ แต่ตอนนี้มีเพียง Component ธรรมดาเท่านั้นที่มีการสร้างไฟล์แยกเก็บไว้ในโฟลเดอร์ของตัวเอง เช่น

ng g component login

จะได้ไฟล์ 4 ไฟล์ ในโฟลเดอร์ชื่อ login ดังนี้

src/app/login/login.component.css
src/app/login/login.component.html
src/app/login/login.component.spec.ts
src/app/login/login.component.ts


แต่ถ้าเราสั่งสร้าง Service ล่ะ?

ng g service user

เราจะได้ไฟล์ของ User service มาใน src/app แทน

src/app/user.service.spec.ts
src/app/user.service.ts


เทคนิคสร้าง Component ต่างๆ เก็บไว้ในโฟลเดอร์ย่อย

จะเห็นว่า ถ้าปล่อยให้ Angular CLI สร้างเก็บไฟล์ Component ตามปกติ อาจจะไม่ที่เป็นชอบใจของหลายๆ คน ที่ต้องการจะเก็บไฟล์แยกกลุ่มกันไว้

เช่นอยากเก็บพวก Class ที่เป็นตัวแทนของข้อมูลจาก Web API ไว้ในโฟลเดอร์ชื่อ models เป็นต้น

ทางหนึ่งคือการมานั่งย้ายไฟล์เอง แต่จะดีไหม หากเราสั่งสร้างไว้ในโฟลเดอร์ที่ต้องการได้ตั้งแต่ต้น?

ให้ลองสั่งแบบนี้แทนครับ

ng g <ประเภทของ Component> /<ชื่อโฟลเดอร์>/<ชื่อ Component>


เช่นถ้าต้องการสร้าง Class ชื่อ User เก็บไว้ในโฟลเดอร์ชื่อ models ก็ต้องสั่ง

ng g class /models/user


หรือถ้าต้องการสร้าง Service Component ชื่อ Product เก็บไว้ในโฟลเดอร์ชื่อ services ก็ต้องสั่ง

ng g service /services/product


ยกเลิกการสร้างไฟล์ spec.ts

ค่าเริ่มต้นที่ Angular CLI กำหนดให้กับ Component เกือบทั้งหมด คือการสร้างไฟล์ spec.ts เพื่อใช้ในการเขียน Test ในการพัฒนาแบบ TDD (Test Driven-Development) กับ Component แต่ละตัว

ซึ่งการรัน Test นี้สามารถทำได้ผ่านคำสั่ง ng test โดย Angular CLI เลือกใช้ JavaScript Test Framework อย่าง Jasmine และระบบ Task Runner อย่าง Karma ในการทำงาน

จริงอยู่ที่เราไม่จำเป็นต้องสนใจไฟล์ spec.ts หรือจะลบทิ้งก็ได้ ไม่มีผลการการทำงานหลักของเว็บแอพพลิเคชั่น แต่หากเราไม่ต้องการตั้งแต่แรก จะสั่ง Angular CLI ยังไง?

ทำได้โดยการกำหนด option ของคำสั่ง ด้วย --spec=false หรือ --spec false นั่นเอง เช่น

ng g component checkout --spec=false


จะทำให้ Angular CLI ไม่สร้างไฟล์ spec.ts มาให้เรา มีแค่ 3 ไฟล์ จากปกติ 4 ไฟล์

create src/app/checkout/checkout.component.css
create src/app/checkout/checkout.component.html
create src/app/checkout/checkout.component.ts


สั่งเพิ่ม Service, Pipe, Directive, และ Guard เข้าไปใน Angular Module

โดยปกติ Angular Module จะเชื่อม Component ต่างๆ เข้าระบบให้สามารถทำงานได้ หรือในอีกทางหนึ่งคือ Component ต่างๆ จะต้องมีการประกาศใน Module ด้วยถึงจะทำงานได้อย่างปกติ

Angular CLI ในเวอร์ชั่นที่พลเขียนอยู่นี้ จะทำการเพิ่ม Component แบบธรรมดาเข้าไปในไฟล์ app.module.ts ให้ตอนที่สร้างขึ้นมา แต่กลับไม่ทำให้แบบเดียวกันในการสร้าง Component แบบอื่นๆ

เราสามารถบอกให้ Angular CLI เพิ่ม Component จำพวก Service, Pipe, Directive, หรือ Guard เข้าไปในไฟล์ app.module.ts หรือ Module ที่ต้องการได้ โดยการกำหนดค่าใช้ option ชื่อ –module หรือ –m ล่ะครับ เช่น

ng g service Department --m app

จะเป็นการสร้างไฟล์ของ Department Service Component ขึ้นมา และมีการไปเพิ่มไว้ในส่วนของ Provider ใน app.module.ts ให้ด้วย (ปกติต้องไปเพิ่มเอง!)

@NgModule({
  ....
  providers: [ DepartmentService ],
  ...
})


สรุป

จะเห็นว่าหากเราศึกษาเทคนิคในการใช้ Angular CLI ละเอียดอีกนิดหนึง จะทำให้เกิดความง่าย และสะดวกสบายในการพัฒนาเว็บแอพพลิเคชั่น หรือโมบายล์แอพพลิเคชั่นด้วย Angular 2 และ Angular 4 เป็นต้นไปแน่นอน

Posted on Leave a comment

วิธีติดตั้ง และใช้งาน Bootstrap กับ Fontawesome ในโปรเจค Angular

เนื้อหาอัพเดตให้รองรับ Angular 2 และ 4 เป็นต้นไป ใช้ได้เลย

ในคอร์สอบรม Angular Essential Training และ MEAN Stack มีการใช้งาน Bootstrap และ Fontawesome กับโปรเจคเว็บแอพพลิเคชั่นของเราด้วย เลยขอมาแชร์เอาไว้ที่นี่ เผื่อมีใครกำลังหาวิธีอยู่นะครับ

ในที่นี้โปรเจคที่ใช้สร้างจาก Angular CLI เวอร์ชั่นล่าสุด แต่หากใครสร้างโปรเจคขึ้นมาด้วยตัวเองก็สามารถใช้งานได้เหมือนกันครับ

วิธีติดตั้ง Bootstrap และ Fontawesome ลงในโปรเจค Angular

ในที่นี้เราสามารถรันคำสั่งติดตั้ง Node module โดยตรงในโปรเจคของเราได้เลย โดยรันคำสั่งใน Command Prompt และ Powershell บน Windows หรือ Terminal ของ macOS

npm install --save bootstrap font-awesome

เสร็จแล้วก็ ให้เปิดไฟล์ src\style.css ที่ปกติเราจะประกาศ CSS Rule แบบ Global ขึ้นมา และสั่ง import ไฟล์ CSS ของ Bootstrap และ Fontawesome

@import "~bootstrap/dist/css/bootstrap.min.css";
@import "~font-awesome/css/font-awesome.css";

เสร็จแล้วให้บันทึกไฟล์ และลองเรียกใช้ CSS class ของ Bootstrap ใน Angular Component ดู

<button class="btn btn-default">Sign in</button>

บันทึกไฟล์ และลองรันไฟล์ HTML ของเว็บเราขึ้นมาดู (ถ้าใช้ Angular CLI ก็รันคำสั่ง ng serve ได้เลย) เราก็จะเห็นปุ่มของเราสวยงาม สไตล์ Bootstrap แล้วล่ะครับ

Posted on Leave a comment

แนวคิดและวิธีใช้ Attribute Directive สำหรับ Component ใน Angular 4 เป็นต้นไป

อัพเดตเนื้อหาแล้ว ใช้ได้ตั้งแต่ Angular 2 เป็นต้นไปนะ

ใน Angular มาพร้อมกับแนวคิด Component และ Directive ที่นำโลกของ Web ฝั่ง Front-end มาถึงอีกระดับ แต่มันก็อาจจะพาโจทย์ใหม่ๆ มาให้นักพัฒนาเว็บอย่างพวกเราขบคิดกันด้วยว่า

จะทำ ___ ได้ไงฟะ??”

ระหว่างการอบรม MEAN Stack และ Angular Essential Training หนึ่งในโจทย์นั้น คือการนำ Angular Component มาใช้ใน Angular Component อีกอันหนึ่ง ในทางเทคนิคแล้ว หลายคนก็เรียกว่า Parent Component และ Nested Component และการส่งข้อมูลระหว่าง Component ทั้ง 2 ตัวครับ

โจทย์ของ Parent Component และ Nested Component

ถ้าเราต้องการสร้างให้ Component สามารถรับข้อมูลผ่าน Attribute ได้เหมือน HTML tag ทั่วไป อย่างเช่นที่แท๊ก <img /> จะมี attribute ชื่อ src ที่กำหนดที่อยู่ของไฟล์รอบภาพ

<img src="assets/profile.jpg" />

ซึ่งเราก็สามารถสร้าง Attribute ได้แบบเดียวกัน เช่น

<app-nextflow [name]="username"></app-nextflow>


โดย Angular มีชื่อเรียกการสร้าง Attribute นี้ว่า Attribute Directive

วิธีประกาศ Property ของ Component เป็น Attribute

เราสามารถสร้าง Attribute Directive ที่ว่านี้ โดยใช้ @Input() ครับ โดยเราสามารถกำหนดให้กับ property ที่ต้องการได้แบบนี้

// NextflowComponent.ts
import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-nextflow',
}) 

export class NextflowComponent implements OnInit {

  @Input() name : string;

}

 


วิธีนำ Attribute Directive ไปใช้งาน

หลังจากสร้าง Attribute Directive แล้ว ก็ถือว่าเราสามารถเรียกใช้ Attribute ของ Component เราได้อย่างสมบูรณ์ เช่นจะใช้ Data-binding

<app-nextflow [name]="username"></app-nextflow>


หรือ expression ก็ได้

<app-nextflow name="{{ username }}"></app-nextflow>


สรุปวิธีสร้าง และใช้งาน Attribute Directive

พอเราเข้าใจโจทย์แล้ว จะเห็นว่า @Input() เป็นกลไกสำคัญในการเปลี่ยนให้ Property ธรรมดาๆ ใน Component สามารถถูกเรียกใช้งานได้ในรูปแบบ Attribute แบบเดียวกับ HTML tag นั่นเอง

Posted on Leave a comment

วิธีนำเว็บแอพที่สร้างด้วย Angular 2 เป็นต้นไป มาใช้ใน ExpressJS

MEAN-Stack by teerasej

อย่างที่ทราบกันดีว่า Angular ตั้งแต่เวอร์ชั่น 2 นำเสนอแนวคิดใหม่ๆ มากกว่าแค่การทำงานกับไฟล์ JavaScript ทำให้พวกเราต้องปรับการทำงานให้รองรับแนวคิดของ Framework ใหม่ๆ ด้วย

เช่น Angular ที่เปลี่ยนมาใช้ TypeScript และม่ีการเพิ่ม Compiler ในการทำงานทำให้ดูเหมือนว่าแนวคิดการ copy ไฟล์ทั้งหมดไปไว้ใน Web server ดูจะไม่ง่ายเหมือนเมื่อก่อน

ในช่วงที่โค้ชพลออกไปจัด MEAN Stack Workshop ให้หลายที่ มีคำถามหลังจากหัวข้อสร้างเว็บแอพด้วย Angular Framework คือ เราจะสามารถนำเว็บแอพที่สร้างด้วย Angular ไปใช้ใน Web Server ของ ExpressJS ได้อย่างไร?

มาดูวิธีทำกันครับ

1. Build โปรเจคด้วย Angular CLI

ในคอร์ส MEAN Stack พลแนะนำให้ใช้ Angular CLI สำหรับผู้เริ่มต้น จะช่วยให้หลายๆ อย่างง่ายกว่าสำหรับนักพัฒนาที่เพิ่งเริ่มต้นกับ Angular

ในอีกทางหนึ่งมันก็ช่วยอำนวยความสะดวกให้เราในการเตรียมไฟล์ให้พร้อมตอนที่ต้องการ Deploy ใช้งานบน Server

เราสามารถใช้คำสั่งต่อไปนี้ในโฟลเดอร์โปรเจคของเรา

ng build --prod

ตัว Angular CLI จะสร้างโฟลเดอร์ชื่อ dist ขึ้นมาซึ่งไฟล์ทั้งหมดนั้น พร้อมสำหรับใช้งานบน Web Server

2. กำหนด Path และ Middleware ให้ Express

กลับมาในฝั่งของ Express Web Server ขั้นตอนที่สำคัญในที่นี้ คือการกำหนด ให้โฟลเดอร์ dist เป็นส่วนหนึ่งของ Path ใน Server

2.1 ติดตั้ง Path Module

รันคำสั่งเพื่อติดตั้ง Path Module ในโปรเจค

// ใช้ macOS ก็เติม sudo นำหน้า
npm install path --save

2.2 กำหนดโฟลเดอร์เก็บไฟล์ เป็น path

ในที่นี้เราจะใช้ Path module กำหนดโฟลเดอร์ที่เก็บไฟล์ที่ได้จากการ build โปรเจค Angular เป็น static path ของ Web server เรา

เช่นถ้าเราก๊อปปี้โฟลเดอร์​ dist มาไว้ในโฟลเดอร์ของโปรเจค Express ตรงๆ เราก็สามารถกำหนดให้โฟลเดอร์ dist เป็นตัวที่เราจะใช้

const path = require('path');
...
app.use(express.static(path.join(__dirname, 'dist')));
...
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/index.html'));
});

จะสังเกตว่าตัว Route ของเราจะใช้คำสั่ง sendFile() โดยการส่งไฟล์ index.html ที่อยู่ในโฟลเดอร์ dist กลับไปให้ฝั่ง Client

3. ทดสอบ Express Web Server

ทดสอบรัน Express Web Server ขึ้นมา และทดสอบเข้าไปที่ http://localhost:3000 (หรือ ip address และ port ตามที่กำหนด)

ตรงนี้เราน่าจะเห็น Web application ในฝั่งของ Angular 2 แสดงขึ้นมาแล้วล่ะ

อ้างอิง – StackOverflow 1, 2, Scotch.io

Posted on Leave a comment

วิธี Debug แอพ Angular ด้วย Visual Studio Code (รองรับ Angular 2 – 4 )

Visual Studio Code - Extension Banner

อย่างที่บอกว่าช่วงนี้อัพเดตเนื้อหาคอร์ส MEAN Stack เป็น Angular 4 ถ้ามีแนวคิด หรือเทคนิคอะไรดีๆ พลจะมาคุยกันเรื่อยๆ

มารอบนี้คือการทำให้ Debug เว็บแอพพลิเคชั่นที่สร้างจาก Angular 2 และ Angular 4 ในปัจจุบัน แต่เวอร์ชั่นใหม่ๆ ถ้าไม่เกิดการ Major change ก็น่าจะใช้ได้เรื่อยๆ

จริงอยู่ที่ตอนนี้พลก็ปรับมาเขียน Test แทนการนั่ง Debug ปกติแล้ว แต่อันนี้เพื่อนพี่น้องที่เข้าเรียนขอมา เลยทำไว้เผื่อเป็นประโยชน์สำหรับคนอื่นๆ เนอะ

1. ติดตั้ง Visual Studio Code Extension

สำหรับงานนี้เราจะใช้ Extension ที่ชื่อว่า Debugger for Chrome ของ Microsoft ให้ค้นหาและติดตั้งจากส่วนของ Extension ได้เลย

2. สร้าง Launch Configuration

  1. เปิดไปส่วน Debug
  2. เลือกสร้าง Launch Configuration
  3. เลือกแบบ Chrome

เสร็จแล้วให้กำหนดค่าใน launch.json ตามตัวอย่างด้านล่าง แล้วบันทึกไฟล์ให้เรียบร้อย

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "diagnosticLogging": true,
            "webRoot": "${workspaceRoot}",
            "userDataDir": "${workspaceRoot}/.vscode/chrome"
        },
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "diagnosticLogging": true,
            "webRoot": "${workspaceRoot}"
        }
    ]
}

โดยในที่นี้ ไฟล์ tsconfig.json ในโปรเจคต้องกำหนดค่า sourceMap เป็น true ด้วยนะ (ปกติค่าควรจะเป็นแบบนั้นอยู่แล้ว ตอนที่อยู่ในช่วงพัฒนา ไม่ใช่ production)

{
   ...
   "sourceMap": true,
   ...
}

3. รัน Angular Server

เราสามารถสั่ง npm start หรือ ng serve ในกรณีที่เราใช้ Angular CLI ซึ่งจะทำให้เราได้ Web server ที่รันบนพอร์ท 4200 มา

จากนั้นเราสามารถใช้ Launch Configuration ของเรารัน Web Browser ขึ้นมาทดสอบได้

  1. เลือกเป็น Launch Chrome against local server จะเป็นการรัน Chrome ขึ้นมาเชื่อมกับ Node server
  2. อาจต้องมีการ restart
  3. อย่าลืมวาง breakpoint ไว้ในจุดที่ต้องการนะครับ

อ้างอิง – Debugger for Chrome ExtensionGithub

Posted on Leave a comment

Google ประกาศเวอร์ชั่นสมบูรณ์ของ Angular 2 แล้ว

เที่ยงคืนที่ผ่านมาตามเวลาในบ้านเรา ทีมพัฒนา Angular 2 ได้ประกาศผ่าน Blog อย่างเป็นทางการว่า Angular 2 เข้าสู่สถานะ “สมบูรณ์” (Final Release) แล้ว

โดยทางทีมพัฒนา Angular 2 ได้แจ้งคุณสมบัติของเวอร์ชั่น 2.0.0 นี้ว่า:

  1. ผ่านการทดสอบการใช้งานในรูปแบบต่างๆ ส่วนใหญ่ผ่านฉลุย
  2. ปรับปรุงประสิทธิภาพด้านขนาดไฟล์ และการใช้งานโดยนักพัฒนา
  3. สามารถทำงานได้อย่างรวดเร็วไม่ว่าจะใช้พัฒนาแอพบน Desktop, Web, หรือ Mobile Application

นอกจากนี้ยังได้อัพเดต Angular CLI ให้มีความสามารถมากขึ้น และเสถียรขึ้นดว้ย

ก้าวต่อไปของ Angular 2

  • การแก้บั๊กที่อาจพบในเวอร์ชั่น 2.0.0
  • เดินหน้าในส่วนของการทำแอนิเมชั่น
  • Angular Material 2
  • เริ่มทดลอง WebWorker ในสภาพแวดล้อมจริง (ตอนนี้เป็น Experimental)
  • เพิ่มความสามารถ และภาษาใน Angular Universal
  • เพิ่มความเร็วมากขึ้น ลดขนาดไฟล์ให้เล็กลง

สำหรับคนที่ลงเรียนคอร์สออนไลน์ สร้าง Mobile Application ด้วย PhoneGap, Angular, และ Ionic Framework

เตรียมรอรับการอัพเดตเนื้อหาทั้งหมดเป็น Angular 2 และ Ionic 2 ได้เลย และถ้าใครสนใจตอนนี้กำลังมีช่วงลดราคา หมดแล้วหมดเลย คลิกดูที่นี่ได้ครับ

หรือต้องการจัดอบรมเป็นทีมที่หน่วยงาน ซึ่งปรับเนื้อหาให้ใกล้เคียงกับโปรเจคที่จะทำ โทรติดต่อ 083-071-3373 หรือทักเมสเสจมาที่แฟนเพจได้เลย

ที่มา – Angular Blog

เปิดอบรมสร้าง Cross Platform Mobile Application ด้วย Ionic Framework

เหมาะสำหรับคนทำเว็บ, เริ่มต้น JavaScript ES6 และ Angular เข้าใจง่าย, ใช้ได้จริง

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

โปรหน้าฝน! เรียนรอบสด รับคอร์สออนไลน์มูลค่ากว่า 5800 บาทฟรี!

Posted on Leave a comment

รีวิว Ionic Framework 2 รุ่น Alpha + วิธีติดตั้ง

ionic-angular-v2

เวลาผ่านไป ของใหม่ๆ ย่อมเกิดขึ้นมา Ionic Framework เวอร์ชั่นที่ 2 รุ่นอัลฟ่า (alpha) ทดลองใช้ก็เริ่มเผยตัวมาให้เห็นกันแล้ว

โค้ชพลลองติดตั้งใช้งาน และเขียนวิธีติดตั้งเผื่อเพื่อนๆ จะลองแตะของใหม่กันดู

เนื่องจาก Ionic Framework 2 ยังอยู่ในช่วงเริ่มต้น

  • Ionic 1 ยังใช้ได้อีกนาน
  • อย่ารีบเอา Ionic 2 ไปใช้ทำแอพจริง (โค้ชเตือนด้วยความหวังดี)
  • Ionic 2 อาจมีการเปลี่ยนแปลงโครงสร้าง framework ในอนาคต

Ionic Framework 2

ทีมผู้สร้าง Ionic Framework ได้ปรับระบบ และรูปแบบการพัฒนาแอพพลิเคชั่นเต็มสูบ และได้เตือนว่า อีกนานกว่าจะสมบูรณ์พร้อมใช้ ไม่แนะนำให้เอาไปทำแอพจริงตอนนี้ครับ

ดังนั้นวิธีการเขียน Javascript ใหม่ๆ อย่าง ES6, TypeScript หรือแนวคิดการสร้างระบบแบบ Component ได้ถูกหลอมรวมเข้าแกนกลางของ Ionic รุ่นที่ 2 นี้ด้วย

ซึ่งพวกเรา ควรมีความรู้ในเรื่องต่อไปนี้ ไม่มากก็น้อย:

  • TypeScript (ใครยังไม่เคยเขียน TypeScript ลองดูที่โค้ชพลสอนพื้นฐานได้ที่นี่)
  • พื้นฐานการเขียน Javascript ในรูปแบบของ EcmaScript 6 (อีกชื่อเรียกว่า ES6 หรือ EcmaScript 2015)
  • ถ้ามีพื้นฐานในการใช้งาน Ionic framework 1 ก็จะเข้าใจได้ง่ายขึ้น

สำหรับพื้นฐานเรื่อง TypeScript หรือการเขียน Javascript รองรับรูปแบบใหม่อย่าง ES6 รอตามอ่านได้ที่แฟนเพจ ตามดูได้ที่ YouTube ได้เลยครับ

วิธีการติดตั้ง Ionic Framework 2 รุ่นทดลองใช้

1. ติดตั้ง Ionic CLI 2 รุ่น Alpha

เปิด​ Command Line (โปรแกรม Terminal บน Mac หรือโปรแกรม Command Prompt บน Windows)

แล้วรันคำสั่งนี้ (ของ Mac อาจต้องใช้ sudo นำหน้า)

npm install -g ionic@alpha

2. สร้างโปรเจค Ionic 2

จากนั้นให้สร้างโปรเจคด้วยคำสั่ง

ionic start NextflowApp2 --v2

สังเกตว่าเราห้อย –v2  ด้านหลังด้วยนะครับ

3. รันโปรเจคแบบเว็บแอพด้วย Ionic 2 server

ใช้คำสั่งด้านล่างเพื่อรันแอพแบบเว็บแอพพลิเคชั่น

cd NextflowApp2

ionic serve

4. ทดสอบรันโปรเจค Ionic 2 แบบแอพ iOS

ใช้คำสั่งด้านล่างเพื่อติดตั้ง iOS platform เข้าโปรเจคและรันในอุปกรณ์ iOS

ionic platform add ios

ionic run ios

หากเสียบ iPhone หรือ iPad กับสาย USB และตั้งระบบไว้เรียบร้อยแล้ว แอพก็จะถูกยิงเข้าเครื่องเปิดใช้งานได้เหมือนแอพ iOS จริงๆ ครับ

สรุปการทดลองติดตั้งและรัน Ionic Framework 2 รุ่น Alpha

Ionic รุ่นที่ 2 นั้นออกแบบมาให้รับการแนวคิดใหม่ๆ และ AngularJS 2 อีกครั้งอยู่ในเวอร์ชั่นอัลฟ่า ซึ่งถือว่ายังไม่สมบูรณ์มากๆ และอาจจะมีการปรับเปลี่ยนการทำงานอีกมาก

แต่โค้ชพลเห็นว่าการออกแบบระบบรับกับแนวคิดการสร้างแอพแบบ Component ซึ่งกระจายไปใน Javascript Framework อย่าง React หรือ TypeScript จะเปิดโอกาสใหม่ๆ ให้นักพัฒนาเว็บได้สร้างของเจ๋งๆ มาให้ผู้คนได้ใช้งานกันอีกมาก

แล้วติดตามอัพเดตกันได้เรื่อยๆ ผ่านทางแฟนเพจ และ YouTube นะครับ

เปิดอบรมสร้าง Cross Platform Mobile Application ด้วย Ionic Framework

เหมาะสำหรับคนทำเว็บ, เริ่มต้น JavaScript ES6 และ Angular เข้าใจง่าย, ใช้ได้จริง

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

โปรหน้าฝน! เรียนรอบสด รับคอร์สออนไลน์มูลค่ากว่า 5800 บาทฟรี!

อ้างอิง – Ionic

 

Posted on Leave a comment

เรียน Angular JS แบบสบายๆ – Slide ที่โค้ชพลใช้อบรม ณ มหาวิทยาลัยเกษตรศาสตร์

AngularJS

ในเดือนเมษายนได้รับโอกาสจากพี่ๆ ที่ศูนย์บริการคอมพิวเตอร์ (สคบ.) มหาวิทยาลัยเกษตรศาสตร์ มาเป็นวิทยากรอบรม workshop เรื่องทำเว็บด้วย Angular JS และทำ Mobile application ด้วย Ionic Framework

โดยการอบรมเป็นเชิงปฏิบัติการ เรียนรู้แนวคิด และทำของจริง แบบต่อเนื่อง

โดยในเรื่อง Angular JS ก็มีหัวข้อครอบคลุมพื้นฐานสำหรับผู้เริ่มต้นดังนี้

  • Concept of Angular JS
  • Import and using Angular JS file
  • Angular’s Module
  • Expression
  • Angular Controller
    • Controller’s method
    • Controller’s property
  • Angular’s Directive
    • ng-app
    • ng-controller
    • ng-model
    • ng-repeat
    • ng-click
  • filter
  • Factory
  • Angular to Web Service (Ajax)

สไลด์บางส่วนผมได้แชร์ขึ้นออนไลน์เพื่อให้คนที่เรียกได้นำไปทบทวนลำดับเนื้อหา และอาจจะเป็นประโยชน์สำหรับพวกเราที่สนใจครับ

อ้อ ตอนนี้คอร์สพัฒนาโมบายล์แอพด้วย HTML5 และ Ionic 2 เรียนออนไลน์ได้แล้ว มีช่วงลดราคาอยู่ที่นี่จ้า

ที่มา – Slideshare

เปิดอบรมสร้าง Cross Platform Mobile Application ด้วย Ionic Framework

เหมาะสำหรับคนทำเว็บ, เริ่มต้น JavaScript ES6 และ Angular เข้าใจง่าย, ใช้ได้จริง

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

โปรหน้าฝน! เรียนรอบสด รับคอร์สออนไลน์มูลค่ากว่า 5800 บาทฟรี!