Home / Developer  / Angularjs  / สร้าง Desktop Apps ด้วย NodeJS และ Ionic Framework

สร้าง Desktop Apps ด้วย NodeJS และ Ionic Framework

บทเรียนรอบนี้เน้นการ Integrate ระหว่างการสร้าง Desktop Apps ด้วย Electron และ NodeJS ร่วมกับ ionic framework เน้นความเป็นไปได้

ยังคงอยู่ในแนวคิดของ HyBrid แต่อาจจะขอคิดนอกกรอบเล็กน้อย เมื่อลองประเมินความเป็นไปได้ว่าแอพพลิเคชันบน Mobile อย่าง ionic framework นั้นจะสามารถประยุคสร้าง Desktop Apps ได้ไหมถ้าไม่ใช้ webView แล้วเขียน Visual Studio หรือ Java ไปครอบ จนกระทั่งได้พบกับเจ้า Electron ก็ได้ไอเดียทำแอพหลังบ้านที่เป็นรูปแบบ Client ติดตั้งบนเครื่องคอมพิวเตอร์ เพื่ออัพเด็ตข้อมูลเว็บไซต์ที่เป็นหน้าบ้านได้

ที่เลือกเจ้า Electron (เป็นของ atom.io) เพราะว่ามันขับเคลื่อนด้วย NodeJS และใช้ HTML และ JQuery หรือ Library อะไรก็ได้ที่เราถนัดแปลงโฉมจากเว็บแอพพลิเคชันธรรมดาๆ ให้กลายเป็นแอพพลิเคชันบนเครื่องเดสท็อป หรือ Desktop Apps เช่น .EXE ของ Windows, .DMG ขอ MAC หรือบน Linux ก็ว่าไป

การใช้งาน Electron นั้นเริ่มต้นให้ไปที่เว็บไซต์ http://electron.atom.io/

Screen Shot 2016-07-21 at 10.10.34 PM

ถ้าต้องการศึกษา API DEMO ของมันก็สามารถดาวน์โหลดไปติดตั้ง และดูรูปแบบการทำงานได้ที่

Screen Shot 2016-07-21 at 10.10.55 PM

หากใครต้องการจะทดลองเล่นก็สามารถเริ่มได้เลยง่ายๆ คือ โคลน Quick Start ของ Electron มาแล้วก็ใช้ nodejs ในการรันแอพพลิเคชันให้ทำงาน (อาจจะต้องลง gulp เพิ่ม)

ทดลองรันดูแล้วก็จะได้หน้าตาแอพพลิเคชันแบบนี้ ระบบจะทำการสร้าง Execution File (.EXE, .DMG) ให้กลายเป็นแอพพลิเคชันบน Desktop ตัวหนึ่ง

Desktop Apps ของเรา

Desktop Apps ของเรา

เปิดผ่าน Browser ก็ได้เพราะมันคือ HTML และ JS ธรรมดาๆ ไฟล์ Desktop Apps ก็จะอยู่ที่ โฟลเดอร์ชื่อ “dist” ตาม Path ตัวอย่าง (เป็น Mac OSX)

 

Screen Shot 2016-07-21 at 10.26.23 PM

จะเห็นว่าวัตถุประสงค์จริงๆ คือ การทำให้ HTML5 และ JS กลายเป็น Desktop Apps โดยไม่ต้องพึ่งการใช้ WebView หรือทำ Desktop จำพวก Browser มาหลอกชาวบ้านเหมือนเมื่อก่อนแล้วอยู่ที่ว่า HTML5 และ JS ที่เราใช้ตัวไหนดีที่สุด

แน่นอนว่า ขึ้นชื่อว่าเว็บ Daydev.com ก็ขอคิดมากเพื่อคลายความสงสัยอยากรู้ว่าถ้าพัฒนาแอพพลิเคชันพวก ionic framework ขึ้นมาแล้วจะสามารถสร้างแอพพลิเคชัน Desktop Apps จาก ionic framework ได้หรือไม่ ว่าแล้วก็ลองลงมือทำดู

 

เช่นทำแอพดูทีวีออนไลน์ เปลี่ยน Folder จากเดิมเป็น TVTHAI

Screen Shot 2016-07-21 at 10.11.30 PM

แก้ไขไฟล์ index.html ดังนี้ คงส่วนของ renderer.js ไว้เพิ่มแค่ของ ionic ลงไป เอา cordova.js ออก

แก้ไขไฟล์ main.js ส่วนของ

แก้ไขเป็น

เพื่อเปิด Allow * Origin ผ่าน Desktop Apps แล้วรันคำสั่งตามนี้

Screen Shot 2016-07-21 at 10.25.50 PM

มันจะสร้าง Desktop Apps ขึ้นมาให้เราใหม่ ลองใช้งานได้เลยครับ

Labs Dark Dark…

ลองไปหาวิธีการของ ionic framework ดึง rss ของพวกเว็บซีรีย์เกาหลี มาใช้งานกับ XML2JSON หน่อย ปรับไปมาก็จะได้ Desktop Apps สำหรับดูซีรีย์อยู่บ้านแล้วครับ ตัวอย่างก็ตามภาพด้านล่าง

Screen Shot 2016-07-21 at 11.34.14 PM

Screen Shot 2016-07-22 at 12.19.44 AM

อยู่ที่ทักษะ และการฝึกฝนเท่านั้นแหละครับ คราวนี้ทำ Desktop Apps เป็น Client ก็น่าจะเป็นอีกทางออกนึงสำหรับสาย Intranet หรือ องค์กรบางองค์กรแล้วนะครับ

Comments

daydevthailand@gmail.com

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ,ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.