tools tutorial - เขียน App บน Window, OSX, Linux ด้วย html กับ javascript

|


ใช่แล้ว อ่านหัวข้อไม่ผิด แอปบน window, osx หรือ linux เนี่ยสามารถเขียนด้วย html และ javascript ได้ด้วย …

 

Electron มันคือเครื่องมือที่จะช่วยให้เราพัฒนา desktop app แบบ cross platform ด้วย Node.js และ Chromium ซึ่งมันทำให้ชีวิตง่ายขึ้นมาก อีกทั้งมีเครื่องมือช่วยอำนวยความสะดวกมาให้เราเยอะแยะมากมายเช่นเราสามารถไม่ว่าเป็นเรื่อง crash report หรือเขียนเกี่ยวกับเรื่อง menubar บน osx

 

อาจจะยังนึกไม่ค่อยยังมี app ดังๆมีมากมายที่ใช้ electron มาสร้างแอปบน desktop ซึ่งเราอาจจะไม่รู้ตัวเลยว่ามัน web ฮะๆ เช่น slack, kitematic, visual studio(osx), atom แลกอีกมากมาย

 

Screen Shot 2558-09-19 at 9.56.09 PM

 

ซึ่งวันนี้ผมจะ demo วิธีการสร้าง project ให้ดูกัน (จริงๆแล้วบนหน้าเว็บหลักของเค้าก็มี doc สอนนะครับ)

โอเคมาๆถ้าไม่คิดอะไรมากลุยเลยทำตามเค้าเลย แต่เดียวก่อน!! ก่อนอื่นเลยเนี่ยจะต้องลง node.js ก่อนนะครับ

มาถึงเนี่ยให้เราสร้างไฟล์ package.json แล้วกำหนดไปตามนี้เลยครับ หรือจะ npm init สร้างเองก็ได้นะครับ

 

จากนั้นให้พิมคำสั่ง

จะทำการติดตั้ง package ที่เรากำหนดไว้ใน package.json ซึ่งมันจะ electron-prebuilt และ menubarให้เราครับ

ทีนี้ในโฟลเดอร์เราจะเห็น โฟลเดอร์ node_modules ถูกสร้างซึ่งขึ้นมา (สำหรับ osx user ถ้าลงไม่ผ่านก็ sudo ก่อนหน้าด้วยนะครับ)

 

ทีนี้เรามาเริ่มสร้างไฟล์ที่จะต้องใช้ในการทำแอปกัน หลักๆเลยเนี่ยเราจะมี

/electron_starter

  • node_modules
  • index.html
  • index.js
  • package.json

 

ซึ่งในโฟลเดอร์เราจะเป็นแบบนี้ สร้างไฟล์ตามกันเลยทีนี้มาเริ่ม copy กันฮะๆ

 

 

แค่นี้เองเราด้วยไฟล์ไม่กี่ไฟล์ก็สามารถสร้างออกมาเป็น application ได้แล้วเวลาเราจะรันแอปให้เราพิม

 

จากนั้นก็จะได้หน้าตาประมาณนี้

Screen Shot 2558-09-19 at 9.39.36 PM

หน้า app และ menu bar ขึ้นบนที่เด้งมาด้วย ไม่ต้องจดใจนะครับ ฮะๆ

 

ทีนี้ที่เหลือก็แล้วแต่เราจะเขียนออกมาเป็นแอปอะไรแล้วแหละครับ หลักก็คือดูที่ index.js นะครับจะเห็นว่ามันจะเป็นตัวสร้าง browser-window  ขึ้นมาตามขนาดที่กำหนดซึ่งนั่นคือขนาดของแอปครับ แล้วก็ให้ไปเรียกไฟล์ index.html ตาม path ที่เรากำหนดนั่นเอง ส่วน menubar() เป็นการสร้าง menubar ด้านบนที่เห็น จะ default ไฟล์ไปที่เดียวกันเพราะเราไม่ได้ตั้งเอาไว้ เราสามารถ เปิด inspect เพื่อ debug app ของเราได้นะครับจากโค้ด ที่ index.js ผมคอมเม้นไว้บรรทัดที่ 17 อิอิ

 

ฮะๆน่าจะเป็นเห็นภาพกันบ้างแล้วส่วนต่อจากนี้เราจะไปทางไหนกันต่อดีเนี่ยเราก็มีแนะนำนะ

ให้ดูที่นี่เลย https://github.com/sindresorhus/awesome-electron รวบรวม library เกี่ยวกับ electron เอาไว้ไม่ว่าจะเป็นเรื่อง compile, menubar , titlebar , บทความ, วิดิโอสอนต่างๆ

 

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

Share Button

Comments

comments