แชร์ประสบการณ์ ใช้ HTML 5 สร้างเว็บและโปรแกรม Windows แบบ Interactive ฉบับสมบูรณ์

ห่างไปสักพัก เพราะโค้ชพลมีภารกิจยิ่งใหญ่ (ใหญ่มาก เพราะช่วงเวลาโปรเจคแคบกว่าเนื้อหาที่ควรจะเป็นหลายเท่านัก)​ เลยอาจไม่ได้มาอัพเดตข่าวคราวกัน แต่ไม่ต้องห่วง กลับมาทำหน้าที่แนะนำการทำแอพพลิเคชั่น หรือโปรแกรมด้วยเทคโนโลยีเว็บกันเช่นเคยครับ

โค้ชหายไปทำโปรแกรมบน Desktop มา

ใช่ครับ โปรแกรมบน Desktop นี่แหละ บน Windows ซะด้วย

โจทย์มีอยู่ว่า ลูกค้าต้องการชิ้นงานที่สร้างด้วยเทคโนโลยี HTML 5 

แน่นอน ดังนั้นเทคโนโลยียืนอยู่บน 3 ภาษาหลัก อันได้แก่ HTML, CSS, และ Javascript (งานนี้ Client ล้วนๆ ฝั่ง Server ไม่เกี่ยว)

แสดง Interactive โต้ตอบได้ ทางโค้ชพิจารณาแล้วว่า Adobe Edge Animate CC เหมาะกับรายละเอียดปลีกย่อยของโครงการนี้

วิดีโอและแอนิเมชั่นต้องมี ซึ่งมีการใช้ HTML 5 Video ตรงๆ และในทีมก็สร้างแอนิเมชั่นได้เทพมาก โดยใช้ Adobe After Effect, Flash Pro, และ Premiere CC

หึๆ เรื่องการสร้าง content ตามเสปคหน่ะ ไม่เท่าไหร่หรอก (แต่ถ้าเจอแบบแก้ไปเรื่อยๆ ก็ใช้พลังเยอะนะ)

แต่โจทย์มหาหิน ที่ยืนจังก้าอยู่นั่นก็คือ…

โปรแกรมแบบ Desktop นั้น ต้องเหมือนกับเวอร์ชั่นเว็บ และ…

• ต้องเปิดแบบโปรแกรม นั่นคือต้องเป็นไฟล์นามสกุล exe (ผ่าง!)
• setup ติดตั้งแบบไฟล์ exe (ผ่าง!)
• และต้องใช้ shortcut ได้เหมือนโปรแกรมทั่วไปเด้ะๆ (ผ่าง! ผ่าง! ผ่าง!)

มีอะไรบ้างที่ทำให้เราใช้ HTML 5 ทำโปรแกรมแบบ Desktop ได้?

เว็บนะเฮ้ย! มันก็ต้องเปิดบนโปรแกรมเว็บเบราเซอร์ดิ๊!

ดีหน่อยที่โค้ชพล ฉีกตัวมาเป็นสายประยุกต์ได้หลายปีแล้ว

นั่นคือโค้ชพลมีความเชื่อว่า…

เว็บมันไปได้ทุกที่ เปลี่ยนแปลงได้ดุจสายน้ำ คืนชีพได้ดั่งนกฟีนิกซ์ (ว่าไปนั่น)

เพราะตั้งแต่ NodeJS และ PhoneGap/Cordova เป็นต้นมา จนถึง Ionic framework, TypeScript, จนถึง React JS เป็นข้อพิสูจน์อย่างดีว่า เว็บแหกรั้วออกสู่ป่าใหญ่มานานแล้ว

ถ้าคุณยังเข้าใจอยู่ว่าเทคโนโลยีเว็บอย่าง HTML, CSS, Javascript ทำได้แค่เว็บไซต์ กับเว็บแอพพลิเคชั่น ต้องปรับความคิดกันอย่างเร็วเลย

2 ตัวเลือกแรกในการทำ โปรแกรม Windows ด้วย HTML 5…

ตอนแรกตัวเลือกของโค้ชมีไม่มาก มี 2 อย่าง

1. Titanium
2. Tide SDK

Titanium ตัดออกไปตั้งแต่แรก เพราะถ้าจะสร้าง ต้องสร้างบน platform ของเขาตั้งแต่แรก  แต่โครงการนี้สร้างจากเว็บก่อนที่จะนำไปใช้งานบน PC ในรูปแบบโปรแกรม

และ Titanium ใช้การเรียนรู้นานเกินไป สำหรับโครงการนี้ เพิ่มความเสี่ยงที่โครงการจะเสร็จไม่ทันเวลา

Tide SDK อันนี้ดับความหวังโค้ชมาก เพราะท่าทีดูดี แต่ตัวหลักหยุดพัฒนามาได้ 2-3 ปีแล้ว ทีมพัฒนายังแตกออกไปเป็นอีกโครงการแถมเก็บเงินก่อนใช้งานด้วย ชื่อ TideKit และระบบยังอยู่ในช่วงทดสอบ (ใช่แล้ว จ่ายเงินเพื่อใช้ระบบทดสอบ)

โหดร้ายอย่างมาก คือทั้ง Tide SDK และ TideKit ปิดโครงการไปเรียบร้อย

ฉะนั้นใครหลงเข้าไปในเว็บเขา ก็ออกมาซะ

.

.

.

มาถึงจุดนี้ถามตัวเอง

เอาไงดีวะ?

.

.

.

2 ตัวเลือกใหม่ ตีคู่มาเหมือน iOS กับ Android…

ทีนี้ ด้วยการลากเส้นต่อจุดอะไรก็แล้วแต่ PhoneGap/Cordova และ Node JS ที่โค้ชสอน มีแนวคิดเหมือนกันอย่างหนึ่งคือ Javascript มันทำงานนอกเว็บเบราเซอร์ได้แล้ว

แล้วทำไมมันจะทำงานบน Windows ไม่ได้?!

จริงอยู่ว่า PhoneGap/Cordova มันรองรับการทำแอพบน Windows 8 ขึ้นไป…

แต่โครงการนี้ต้องทำงานบน Window 7 ได้ด้วย! (ผ่าง)

นั่นหมายความว่ามันทำเป็น “แอพ” ไม่ได้ ต้องทำเป็น “โปรแกรม”…​ เป็นไฟล์ exe…

และ 2 ระบบที่อาศัยแนวคิดเดียวกับ Node JS ก็คือ:

1. Node-webkit (ตอนนี้ชื่อ nw.js)
2. Atom-shell (ตอนนี้ชื่อ Electron)

จริงมี Bracket-shell อีกอัน แต่… ปล่อยเขาไปเถอะ T T ตอนใช้นี่อยากจะร้องไห้

ซึ่งโค้ชพลก็เหมา 2 ตัวนี้มาลองใช้งานเลยครับ

(To be continued… หน้านี้แหละ เดี๋ยวมาเขียนต่อ)

เอาล่ะ ช่วงนี้ว่างจากการสอนทำ Cross platform Mobile App ด้วย Ionic กับ Meteor แล้ว มาต่อกันเลย

Previously in Nextflow ก่อน…

ตอนท้ายครั้งที่แล้ว พลพูดถึง 2 ระบบที่ใหม่สุด น่าเลือกมาใช้เป็น Framework ใช้ทำ Desktop App นั่นก็คือ NW.js และ Electron

ซึ่งทั้ง 2 ตัวใช้ Chrome Engine ในการแสดงผลเว็บเรา มาดูกันว่า อะไรที่ทำให้มันแตกต่าง และพลเลือกอะไรมาใช้ใน Product จริง

ระหว่าง NW.js และ Electron ใช้ Desktop App ด้วยอะไรดี?

ยกแรก NW.js มีภาษีพอสมควรครับ เพราะระบบง่ายต่อการทำความเข้าใจ แถมนำมาสร้างไฟล์ EXE สำหรับเปิดบน Windows 7 ได้แทบจะทันที

ดังนั้น Prototype แรกของ Desktop App นี้สร้างด้วย NW.js ครับ

ทดสอบแอนิเมชั่น โอเค

ทดสอบระบบ Interactive โอเค

หึหึหึ สบายแล้วล่ะงานนี้

แต่ NW.js มีจุดบอดที่ซ่อนอยู่ในช่วงที่โปรเจคใกล้เข้าโค้งสุดท้าย เหมือนหมอบไพ่กับดักไว้ รอจังหวะจบเทิร์นของเรา

นั่นคือ… Chrome engine ที่อยู่ข้างในนั่นเอง! มันเล่นไฟล์วิดีโอได้ไม่สมบูรณ์! เพราะมันยังเป็น Chrome ที่ไม่รองรับ HTML5 Video เต็มที่! 

NW.js ในช่วงเวลาที่ผมเลือกนำมาใช้ ยังใช้ Chrome engine เวอร์ชั่นเก่าอยู่ และไพ่ก็ถูกเปิดออกมา มา มา

NW.js ไม่ได้มีการอัพเดตบ่อยในเวลาที่สมควรนั่นเอง และยังมี bug ที่โหดร้ายอยู่  (อัพเดต 2016: Community ของ NW.js เริ่มเดินเครื่องอีกครั้งช่วงต้นปี ตอนนี้รองรับวิดีโอแล้ว WebRTC ก็ใช้ได้ด้วย)

มันจึงถูกถอดออกจากโปรเจคไปครับ (เราชอบนายนะ แค่คงไม่ใช่เวลานี้)​

แล้วก็หันมาหา Electron ตาปิ๊งๆ

เช็คแล้ว ใช้ Chrome engine ตัวใหม่กว่า NW.js โอเค

เล่นวิดีโอได้ โอเค ตัว Player มาครบ (ใช้ MP4 และแปลงไฟล์ด้วย Adobe Media Encoder ใน Adobe Creative Cloud)

โดดเด่นขึ้นมา มากกว่า NW.js ก็คือทางผู้ดูแลโครงการ Electron ประกาศว่า ถ้ามี Chrome เวอร์ชั่นใหม่ออกมา ทาง Electron จะเอามาใส่ในโปรเจคไม่เกิน 2 สัปดาห์แน่นอน

และเป็นแนวทางเดียวกับ Node JS ด้วยที่จะอัพเดตไม่เกิน 2 สัปดาห์

สรุป Prototype ตัวที่ 2 ย้ายมาใช้ Electron 

ผลออกมาน่าพอใจมาก และ Electron ยังเป็น Node Module ตัวหนึ่งด้วย การทำแอพ 4 ตัวพร้อมกันเลยสามารถใช้ระบบ Automate อย่าง Gulp มาช่วยอย่างสบาย

การ Build ตัว pre-release ให้ผู้ใช้จริงแต่ละครั้งเลยสะดวกสบายขึ้นไปอีก

ตอนส่งงานก็สามารถ Package เป็นไฟล์ Setup ได้ด้วย (อันนี้ใช้ความพยายามหน่อย) แต่ก็สามารถใช้สร้างไฟล์ Installer ที่ผู้ใช้คอมพิวเตอร์ทั่วไปสามารถนำไปติดตั้งเองได้

จริงๆ สามารถสร้างเป็นไฟล์ DMG สำหรับระบบ Mac OS X ได้ด้วยนะ แต่พอดีไม่มีใน TOR เลยได้ทดลองเฉยๆ

สิ่งที่ได้เรียนรู้ และอยากแชร์ให้ทราบกัน

จากการเดินโปรเจคในครั้งนี้จนสมบูรณ์ ผมพบข้อคิดหลายๆ อย่างที่น่าจะเป็นประโยชน์กับเพื่อนๆ ที่กำลังจะลองมาทำ Desktop App ด้วย ภาษา HTML กัน

1. ใครมีพื้นฐาน JavaScript ตอนนี้ทุก platform มีระบบให้คุณลงไปลุยเล่นแล้ว เช่น
   1. Web Server มี MEAN Stack และ Meteor (เจ้านี่เป็นแบบ Isomorphic)
   2. Mobile App มี PhoneGap/Cordova, Ionic Framework, React Native
   3. Desktop App มี Electron, NW.js
   4. Internet of Things มี Cylon.js, Johnny-five (อ่านตอนแรกเป็น Johnny Walker, ขอบคุณ คุณ Sarin Suriyakoon ที่แนะนำมา)
2. โปรเจค Open-source มีเยอะแยะมากมาย เวลาเลือกใช้ให้ศึกษา “ปัญหา” (issue) ที่มีอยู่ด้วย อย่าค้นหาแต่ feature ที่เราต้องการ
3. ศึกษาจุดแข็ง และจุดอ่อนของ Framework ที่มีอยู่ในปัจจุบันได้เร็ว ทำให้เรามีโอกาสปรับใช้ในการทำงานได้ดี

แล้วเจอกัน ตอนนี้ขอไปทำวิดีโอสอนทำ Cross Platform Mobile App ด้วย Ionic framework ต่อนะ จะได้ทันเดือนมีนาคม (ตอนนี้มีคูปองลดราคา 62% สำหรับคนซื้อล่วงหน้าด้วย คลิกเลย)