Hero Driven Development

วันนี้ผมจะเล่านิทานให้ฟัง….

กาลครั้งหนึ่งนานมาแล้ว ณ หมู่บ้านที่สงบสุขท่ามกลางชีวิตที่เรียบง่ายของชาวบ้านที่ใช้ชีวิตอย่างมีความสุข

Screen Shot 2559-06-26 at 6.33.21 PM.png

สิ่งที่ไม่คาดคิดก็เกิดขึ้น ได้มีมังกรวายร้ายปรากฏตัวขึ้นมาเพื่อทำลายหมู่บ้าน

Screen Shot 2559-06-26 at 6.33.52 PM

ชาวบ้านได้ตื่นตระหนกและทำการสวดอ้อนวอน

Screen Shot 2559-06-26 at 6.35.36 PM.png

ทันใดนั้นเองก็ได้มี คนๆนึงที่ใครๆก็เรียกเค้าว่า ฮีโร่ ปรากฏกายขึ้นมา พร้อมประกายแห่งความหวัง

Screen Shot 2559-06-26 at 6.37.02 PM.png

แน่นอนว่าด้วยความเก๋าของฮีโร่ + กำลังใจอย่างเต็มเปี่ยมของชาวบ้าน
เค้าก็จัดการมังกรร้ายได้อย่างง่ายดาย…

Screen Shot 2559-06-26 at 6.37.34 PM.png

ในที่สุดชาวบ้านก็กลับมาใช้ชีวิตอย่างมีความสุขเช่นเดิม

Screen Shot 2559-06-26 at 6.33.21 PM.png

HAPPY ENDING

(?)

นิทานที่ผมเล่าไปนั้นสามารถตีความให้เกี่ยวกับการพัฒนา Software แบบ Hero Driven Development ได้

ซึ่งนั่นก็คือ..ในทุกครั้งที่มีแหตุการณ์ไม่ปกติ เช่น ปัญหาร้ายแรง/critical bugs/server ล่ม  ทีมงานทุกคนในทีมก็จะเฝ้ารอให้มีคนใดคนนึงที่พวกเค้าเชื่อว่าเก่งที่สุดดังเช่นฮีโร่ จะออกมาแก้ปัญหานี้ให้พวกเค้า และพวกเค้าจะทำหน้าที่นั่งเชียร์ คอยหาขนม และให้กำลังใจอยู่ห่างๆ อย่างห่วงๆ(?)
และเมื่อปัญหานี้ได้ถูกแก้ไป ทีมงานก็กลับไปทำงานตามปกติจนกระทั่งจะเกิดเหตุการณ์นี้ขึ้นอีกในอนาคต….

ปัญหาจริงๆก็คือทีมงานไม่เกิดการเรียนรู้และการแก้ปัญหาด้วยตัวของพวกเค้าเอง ซึ่งถ้าเกิดปัญหาอีกเค้าก็จะเฝ้ารอคนมาแก้ไขให้

ปัญหาเหล่านี้ไม่ใช่ปัญหาของฮีโร่แต่เป็นปัญหาของทีม!

การแก้ปัญหาพวกนี้ต้อง
– ให้โอกาสทีมได้เรียนรู้ ลองผิดลองถูก
– มีการโค๊ชที่ดีจากเหล่าฮีโร่
– นำปัญหาเรื้อรังออกวางไว้บนหน้ากระดาน ไม่ใช่เก็บไว้ที่ใครคนใดคนหนึ่ง และหาทางแก้ไขด้วยกันทั้งทีม
– และที่สำคัญ ฮีโร่ ต้องการเวทีไว้สำหรับพัฒนาฝีมือ การสู้กับมังกรแบบเดิมๆจะไม่ทำให้ฮีโร่เก่งขึ้น ฉะนั้นฮีโร่ควรมีสนามแข่งที่ทำให้พวกเค้าเก่งขึ้นไปอีก

และสุดท้ายหวังว่า เราจะสร้างหมู่บ้าน Super HERO ไปได้ด้วยกัน

เรียบเรียงจาก
http://carlokruger.com/?p=35
http://highlevelbits.com/2014/08/hero-driven-development.html
Advertisements

Electron เขียน Desktop Apps ด้วย Web เทคโนโลยี HTML/Javascript

ต้องเรียกว่ายุคสมัยนี้ หากใครเป็น Software Developer แล้วเขียนโปรแกรมได้บน Platform เดียวเช่น Windows ก็คงถือว่าเริ่มจะ Outdated แล้ว

ในอดีตกาลนั้น การเขียนโปรแกรม Desktop ซึ่งก็คือเป็นโปรแกรมหรือ App ที่ใช้งานบน PC/Mac ซึ่งโดยส่วนใหญ่แล้วจะใช้ C/C++, VB, .NET, Java หรือ Objective-C/Swift

ซึ่งจากที่กล่าวไว้ข้างบนนั้นส่วนใหญ่เวลาเขียนมาแล้ว จะเจาะจงว่ามันจะทำงานได้บน OS เดียวเท่านั้น จะมีก็แต่

– Java ที่สามารถเขียนครั้งเดียวแล้วนำไปใช้บน OS อื่นๆได้(ผมไม่แน่ใจว่า Java สามารถใช้งานบน OSX ของ Mac ได้มั้ย)
– C/C++ ก็สามารถเขียนแล้วใช้งานบน Windows/Linux ได้แต่อาจจะต้องใช้ framework ต่างๆช่วยเพื่อให้ Code นั้นไม่ยึดติดกับ OS ใดๆ

แต่เนื่องจากว่ายุค Wep app ครองโลกแบบนี้ และด้วยความที่ HTML, CSS, Javascript ซึ่งเป็น Building Blocks ของ Web techs นั้น ง่ายต่อการทำ UI และสามารถทำงานใต้ Web Browser ใดๆก็ตามที่รองรับมาตรฐานของการพัฒนา Web (HTML5/Es6/Es6) ทำให้ตัว Web techs นั้นมีความได้เปรียบเรื่องการพัฒนา App ให้ Cross Platform

ทางโปรเจค Electron นั้นก็ได้ใช้จุดแข็งตรงนี้มาพัฒนาเป็น Framework ที่ทำให้ Developer สามารถพัฒนาโปรแกรมบน Desktop แบบ Cross Platfrom ด้วย HTML,CSS,Javascript แบบเดียวกับที่ใช้ทำ Web app

จริงๆแล้ว Electron นั้นคือการนำ Open Source ที่นิยมมากสำหรับสาย Web นั่นก็คือ Chromium และ Node.Js มาเป็น Framework เดียว ซึ่งทำให้เราใช้มันสำหรับทำได้ทั้ง UI หรือ Non-UI รวมถึง UI Frameworks ต่างๆเช่น Angular/Polymer/React ก็สามารถนำมาใช้ได้หมด รวมทั้ง Node.Js modules ต่างๆ

เราลองมาเริ่มกัน

  1. เริ่มจากเข้าไปเวปหลัก http://electron.atom.io/ ก่อนเลยครับ
  2. จากนั้นลองทำตาม Quick Start

เพื่อทำการติดตั้งโปรเจคตัวอย่าง

# Clone the Quick Start repository
$ git clone https://github.com/electron/electron-quick-start

# Go into the repository
$ cd electron-quick-start

# Install the dependencies and run
$ npm install && npm start

คำสั่งที่ให้ตัว Electron ทำงานคือ “npm start” และผลจาก sample app คือ ….ทาด้าาาาา..

Hellow World พร้อม Debugger..ในรูปแบบ Desktop App

Screen Shot 2559-06-11 at 9.55.57 AM

มาดูอีกทีแล้วทำไมต้องเราใช้ “npm start” ในการสั่งเปิด App ด้วย จริงๆแล้วเราสามารถสั่งจาก Electron ได้เลยประมาณนี้

$ ./node_modules/.bin/electron .

มาดูรายละเอียดของโครงสร้างของ App กัน

Screen Shot 2559-06-11 at 10.50.34 AM

ไฟล์ที่สำคัญคือ

  • index.html แน่นอนครับเป็นหน้า UI หลัก
  • main.js แน่นอนครับเป็น Entry point ของโปรแกรมเรา
  • package.json เป็นไฟล์ Config สำหรับ NodeJs

มาลองดูไฟล์ main.js กันก่อนครับ จะเห็นว่ามีการสร้าง BrowserWindow ขนาด 800×600 แล้วทำการโหลด index.html เป็นหน้าแรก ซึ่ง BrowserWindow คือการเปิด Web Browser Window (ที่ใช้ Chromium ในการ render นั่นเอง)

function createWindow () {
 // Create the browser window.
 mainWindow = new BrowserWindow({width: 800, height: 600})

 // and load the index.html of the app.
 mainWindow.loadURL(`file://${__dirname}/index.html`)

 // Open the DevTools.
mainWindow.webContents.openDevTools()

 // Emitted when the window is closed.
 mainWindow.on('closed', function () {
 // Dereference the window object, usually you would store windows
 // in an array if your app supports multi windows, this is the time
 // when you should delete the corresponding element.
 mainWindow = null
 })
}

และ Code “mainWindow.webContents.openDevTools() น่าจะเป็นการ Debugger Window ที่นี่เราลองลบบรรทัดนี้ดูแล้วรันใหม่ ก็จะเห็นว่า Debugger หายไปแล้ว

Screen Shot 2559-06-11 at 11.01.21 AM.png

ที่นี้มาลองดู index.html กันครับ ดูแล้วก็ไม่มีอะไรมาก

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<!– All of the Node.js APIs are available in this renderer process. –>
We are using node document.write(process.versions.node),
Chromium document.write(process.versions.chrome),
and Electron document.write(process.versions.electron).
</body>

// You can also require other files to run in this process
require(‘./renderer.js’)

</html>

เรามาลองแก้ HTML ง่ายๆกันเพื่อทำ Contact card app เอาไว้แนะนำตัว

Screen Shot 2559-10-08 at 9.32.48 AM.png

ผลที่ได้ก็คือ

Screen Shot 2559-06-11 at 11.42.28 AM

เมื่อกดปุ่ม More Info.. จะทำการเปิด MessageBox เพื่อแสดงข้อความ

Screen Shot 2559-06-11 at 11.44.51 AM

สรุปได้ว่าเราสามารถเขียน App ที่มี ประสพการณ์แบบ Desktop ด้วย HTML/Javasctipt ได้ง่ายๆ(?) โดยใช้ Framework Electron ครับ….

13409222