Category: Uncategorized

Cloud สำหรับ Non-techs

Screen Shot 2560-09-02 at 5.53.39 PM.png

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

Cloud Computing การประมวลผลแบบก้อนเมฆคืออะไร ?

ก่อนจะไปถึงตรงนั้น เราต้องท้าวความกันก่อนเลยครับ

รู้จักกับการประมวลผล

ในเครื่องคอมพิวเตอร์หรือโทรศัพท์มือถือนั้นจะมีอุปกรณ์และวงจรเล็กๆเต็มไปหมด แต่ส่วนที่ใช้ประมวลผลนั้นเรียกว่า CPU หรือ Processor ซึ่งถึงเปรียบเทียบได้กับสมองของคนเรา  (หมายความว่ายิ่ง CPU ยิ่งดีและราคาแพง ยิ่งทำงานได้ดีและเร็วขึ้น)

i

การประมวลผล (Computing) นั้นก็คือการนำข้อมูลต่างๆใส่ระบบคอมพิวเตอร์ เพื่อที่จะให้ CPU ทำงานตามคำสั่งของโปรแกรมโดยที่โปรแกรมเมอร์(Programmer) เป็นคนเขียนใส่คำสั่งเหล่านี้
.
.
ยกตัวอย่างเช่น “เครื่องคิดเลข” ที่ถือว่าเป็นคอมพิวเตอร์เหมือนกัน โดยที่มันถูกติดตั้งโปรแกรมคิดเลขมาอยู่ในเครื่อง เมื่อเรากดตัวเลขและคำสั่ง บวก ลบ ก็จะเป็นการส่งข้อมูลเพื่อให้ CPU ไปประมวลผลแล้วก็ส่งผลลัพธ์กลับมาที่หน้าจอ

รูปจาก http://www.bbc.co.uk/staticarchive/e45e9a229d416394b2f1e16dd7f13689b46c20ca.png

ซึ่งโดยทั่วๆไปแล้วพวกเราที่ใช้คอมพิวเตอร์เนี่ยไม่ต้องใช้งานการประมวลผลหนักๆมากนักเราเลยใช้คอมพิวเตอร์กันแบบที่เรียกว่า PC ซึ่งย่อมาจาก Personal Computer หรือ คอมพิวเตอร์ส่วนบุคคล

PC กับ Server

ทีนี้ถ้าสมมุติว่าเราอยากมีเว็ปไซต์เป็นของตัวเอง ซึ่งจะแตกต่างจากการเปิดคอมพิวเตอร์ใช้ทำงานเอง เพราะเราจะต้องเปิดระบบเครือข่ายให้คนอื่นๆมาดูเว็บไซต์ของเราได้ ซึ่งแน่นอนว่าเครื่องคอมพิวเตอร์นี้จะต้องเปิดทิ้งไว้ตลอดเวลา ขั้นตอนนี้ต้องอาศัยคอมพิวเตอร์ประเภทหนึ่งที่เรียกว่าเซิร์ฟเวอร์ (Server)

Server คือ คอมพิวเตอร์ที่เปิดระบบให้คอมพิวเตอร์เครื่องอื่นๆไม่ว่าจะเป็น PC หรือ Server เครื่องอื่นๆมาเชื่อมต่อได้เพื่อขอดูหรือจัดเก็บข้อมูล

.
.
เช่นรูปด้านล่างนี้จะเป็นการเชื่อมต่อของ Client ซึ่งแปลว่าเครื่องลูกๆ เช่นพวกคอมพิวเตอร์ PC ทั่วๆไปหลายๆเครื่องกำลังเชื่อมต่อกับเครื่อง Server (เครื่องแม่) เพียงเครื่องเดียว

รูปจาก https://www.kullabs.com/uploads/client-server.png

โดยทั่วๆไปแล้วนั้นเราก็มีทางเลือก 2 ทางใหญ่ๆในการติดตั้ง Server

  1. เอา PC มาทำเป็น Server
  2. เครื่องคอมพิวเตอร์สำหรับการเป็น Server โดยเฉพาะ ซึ่งราคาจะแพงกว่าเครื่อง PC เนื่องจากว่าอุปกรณ์ต่างๆจะมีคุณภาพสูงกว่าและรองรับการใช้งานที่ต้องเปิดเครื่องทิ้งไว้ตลอดเวลาเป็นเวลาหลายๆปีได้ดีกว่า

เมื่อระบบใหญ่ขึ้น

มาถึงตรงนี้ทุกคนก็จะรู้แล้วว่า เครื่อง Server หนึ่งเครื่องนั้นอาจจะสามารถรองรับการเชื่อมต่อของเครื่องลูกๆได้หลายเครื่องพร้อมกัน
ถ้า Server หนึ่งเครื่องรองรับลูกค้าได้ 100 คน แล้วถ้าลูกค้าเราเพิ่มเป็น 3,000 คนล่ะ ระบบของเราก็ต้องใหญ่ขึ้น 30 เท่าเลยทีเดียว ก็ทำให้เราต้องมีการติดตั้ง Server เพิ่มมากขึ้นเช่นกัน ตรงนี้ก็อาจจะต้องทำมีค่าใช้จ่ายในการดูแลมากขึ้นทั้งค่าไฟ ค่าแอร์ ค่าซ่อมอุปกรณ์  รวมถึงพื้นที่ที่จะเอาไว้ติดตั้งด้วย
.
.
จนถึงกระทั่งอาจจะต้องทำห้องสำหรับติดตั้ง Server กันเลย (ซึ่งถ้าเรียกทับศัพท์ก็มีหลายๆคำที่มีความหมายเดียวกัน Server Room, Server Lab, Server Farm หรือ Data Center – ศูนย์ข้อมูล ) ซึ่งจะมีเครื่อง Server หลายสิบ ร้อย พัน เครื่องเลยทีเดียว

รูปจาก https://www.bournehosting.com/images/image2.jpg

เพราะ Server แพงเรามาแชร์กันดีกว่า

ถ้าเปรียบเทียบการตั้ง Server เองเหมือนกับการสร้างตึกเพื่อเอามาไว้สำหรับเก็บของ ซึ่งกว่าจะได้ตึกที่พร้อมใช้งานนั้นก็ต้องใช้ทั้งแรง เวลา และค่าใช้จ่าย รวมถึงยังสามารถเก็บของได้จำกัดด้วย และที่สำคัญถ้าเราไม่ได้ใช้งานก็ต้องเสียค่าบำรุงรักษา เพราะว่าสร้างมาแล้วเราเป็นเจ้าของตึกนั้น
.
.
การสร้าง ห้อง Server หรือ Data Center นั้นก็เหมือนกับการสร้างตึกแถว ซึ่งมีค่าใช้จ่ายสูงมากขึ้นไปอีก แถมยิ่งถ้าสร้างมาใหญ่แต่สิ่งของที่จะเก็บใช้ดันมีไม่เต็มที่ก็จะยิ่งเสียทิ้งไปเปล่าๆ
.
.
ดังนั้นถ้าหากธุรกิจหรือระบบที่ไม่ได้ต้องการควบคุมทุกอย่างเอง ก็อาจจะใช้ทางเลือกคือ การเช่า
เช่นเดียวกันกับระบบคอมพิวเตอร์ เราไม่จำเป็นที่จะต้องสร้าง Server เอง แต่เราสามารถไปเช่าผู้ให้บริการได้เช่นกัน ซึ่งก็เปรียบเหมือนกับการไปเช่าห้องในคอนโด ที่เราจะต้องอยู่ร่วมกับคนอื่นๆในคอนโดทั้งตึกแต่เราก็มีความเป็นส่วนตัวในห้องที่เช่า ถ้าเราไม่อยากใช้ก็แค่ยกเลิกการเช่า โดยไม่ต้องเสียงค่าดูแลระยะยาว ถ้า Server ที่เช่าอยู่นั้นเริ่มเก็บข้อมูลหรือทำงานไม่เพียงพอ เราก็สามารถเช่าเพิ่มได้ทันทีโดยใช้เวลาเพียงไม่ถึง 10 นาที พร้อมทั้งมีระบบรักษาความปลอดภัยให้ในระดับหนึ่งด้วยเช่นกัน และนี่ก็คือจุดเริ่มต้นของ Cloud

ในที่สุดก็เข้าเรื่อง Cloud

ถ้าเปรียบเทียบกันแล้ว Cloud ก็คือคอนโดที่มีตึกอยู่มากมายทั่วโลก เราสามารถที่จะเช่าเพื่อที่จะใช้งานให้สามารถตอบสนองผู้ใช้ระบบของเราได้(เกือบ)ทั่วโลกเช่นกัน
.
ยกตัวอย่างเช่น ถ้าเรามี Server ที่ตั้งอยู่ที่ไทยเพื่อให้บริการข้อมูลของบริษัท แต่ลูกค้าอยู่ที่อเมริกา ซึ่งการที่เค้าจะมาดูข้อมูลได้นั้นจะต้องผ่านระบบเชื่อมต่อหลายขั้นมากกว่าจะมาถึง Server ของเรา จึงทำให้เกิดความล่าช้า แล้วยิ่งถ้าเป็นข้อมูลที่ต้องดูแบบ ณ เวลานั้น (Realtime) ก็ยิ่งเป็นเรื่องใหญ่
.
ดังนั้นการมีระบบอยู่กระจายทั่วโลกนั้นเป็นการเพิ่มประสบการณ์ผู้ใช้ที่ดีกว่า แต่ถ้าเป็นสมัยก่อน เราจะไปตั้ง Server ที่อเมริกาจะทำได้ง่ายๆรึเปล่านะ(?)

global_infrastructure_v25_7-19-17

แผนที่ศูนย์ข้อมูลของ AWS ซึ่งเป็นผู้ให้บริการ Cloud เจ้าใหญ่ที่สุด ณ เวลานี้

ผู้ให้บริการ Cloud นั้นทำหน้าที่คือสร้าง Data Center ทั่วโลก รวมถึงดูแลรักษาและสร้างระบบเครือข่าย ซึ่งมีรายได้มาจากการให้เช่า ซึ่งผู้ให้บริการรายใหญ่ตอนนี้ก็คือ Amazone Web Services (AWS), Microsoft Azure และ Google Cloud
.
ผู้ใช้บริการ Cloud ก็เหมือนเป็นผู้เช่าที่จ่ายเงินเมื่อต้องการใช้ระบบซึ่งถ้าเลิกใช้ก็ไม่จำเป็นต้องจ่ายต่อ ซึ่งปัจจุบันก็จ่ายกันผ่านบัตรเครดิต
.
ความยิ่งใหญ่ของ Cloud ในวันนี้ก็คือมันมีระบบกระจายอยู่ทั่วโลก ซึ่งถ้าหากเราต้องการเก็บข้อมูลหรือให้บริการข้อมูลลูกค้าทั้งโลกนั้นการสร้าง Data Center หรือ Server เองนั้นยิ่งเป็นไปได้ยาก ถ้าเทียบการใช้บริการ Cloud ของรายใหญ่ ซึ่งก็จะทำให้ธุรกิจของเรานั้นสามารถตอบโจทย์ลูกค้าได้รวดเร็วทั่วทั้งโลกได้ดียิ่งขึ้น เพราะเราสามารถเช่าและเข้าใช้ระบบได้ในทันที! ซึ่งการที่มันมีระบบคอมพิวเตอร์กระจายตัวอยู่ทั่วโลกก็เปรียบได้กับกลุ่มเมฆที่ครอบคลุมทุกพื้นที่ทั่วโลก

…และนิทานเรื่อง Cloud Computing ก็จบลงเท่านี้ 🙂

รู้จักกับ HTTP2 Server Push

ในโลกของ Web นั้น ทุกๆครั้งที่ทางฝั่ง Client หรือ Browser ทำการขอข้อมูลด้วยนั้นจะใช้ HTTP Request ซึ่งการ Request หนึ่งครั้งนั้นมันมี Cost ของมันอยู่โดยเฉพาะการทำ Network Negociation ที่จะต้องมีในทุกๆครั้งที่ทำ HTTP Request

พื้นฐานกันหน่อย

ทีนี้มาลองดูตัวอย่างเช่น มีเวปเล็กๆ 1 เวปที่มี

  • index.html
  • style.css
  • font.woff2

ถ้าหน้า index.html นั้นมีการใช้ทั้ง style.css และ font.woff2 เวลาที่ถูกโหลดหน้า index.html หนึ่งครั้งนั้นจะเกิด HTTP Request 3 ครั้งและมีการทำ Network negociation 3 ครั้งเช่นกัน ซึ่งก็คือจะเกิด 3 Round Trip (ซึ่งกระบวนการเริ่ม Request จนได้รับ Response นั้นเรียกว่า Round Trip) ซึ่งจุดนี้แหละครับที่ HTTP2 Push นั้นจะมาช่วยเพิ่ม Performance ของการโหลดเวปได้

แล้ว Round Trip มันสำคัญยังไง

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

Screen Shot 2559-12-10 at 9.56.08 AM.png
Network Tab จาก Chrome Debugger

จากรูปจะเห็นได้ว่าการทำ HTTP request 1 ครั้งนั้นจะมี Connection Setup รวมไปถึงเวลาที่ใช้ส่ง Request จนฝั่ง Server ได้รับก่อนจะเริ่มประมวลผลและส่งข้อมูลกลับ

ซึ่งจะเห็นได้ว่าทุก Round Trip นั้นมี ค่าใช้จ่ายของ overhead ที่ต้องเสียไป ซึ่งบางคนอาจจะดูแล้วเหมือนไม่เยอะเพราะมันแค่หลัก milli-sec แต่ถ้าเวปเริ่มซับซ้อนมันรวมๆกันก็เยอะนะครับอาจจะเป็นหลายวินาทีเลย

HTTP2 Server Push?

สรุปสั้นๆก็คือเป็นเป็นความสามารถของ HTTP2 ที่จะช่วยลด Round Trip ในการส่งข้อมูลจาก Server ไปให้ Client โดยการ Push ข้อมูลไปให้ Client โดยที่ฝั่ง Client นั้นไม่ต้องทำการ Request มาหา Server (เหมือนยัดเยียดให้นั่นแหละ)

มาดูภาพประกอบเพื่อเพิ่มความเข้าใจกัน

1_pushintro
รูปจาก  http://calendar.perfplanet.com/2016/http2-push-the-details/

จากรูปด้านบนนั้นเราแบ่ง design ออกเป็น 3 แบบ

  1. no push ซึ่งก็เป็นการ Request/Response ตามปกติซึ่งจะทำให้เกิด 3 Round Trip ตามหลักปกติของ HTTP
  2. push critical เป็น design ที่เริ่มการ Utilize ความสามารถของ push ในการที่เราเน้นแต่ resouce ที่จำเป็นเช่น โหลด html ก็แถม css ไปให้ด้วยเลย
  3. push everything เป็นอีกรูปแบบที่ทางฝั่ง Client นั้นแค่ request มาทีเดียวทาง server ก็ส่งสิ่งที่ขอมาพร้อมกับแถมทุกอย่างไปให้ client ซึ่งเป็นการประหยัด Round Trip กันแบบสุดๆ

มาถึงตรงนี้ดูแล้ว Push นี่ดูดีใช่มั้ยครับ

แต่ช้าก่อนสิ่งเหล่านี้จำเป็นต้องคิดเพิ่มว่าจะ PUSH ดีรึเปล่า

  • Cached ข้อมูลบางอย่างอาจจะมีการ Cached เอาไว้แล้วที่ Client ซึ่งถ้า Server ทำการ Push ไปให้ด้วยตลอดเวลาก็เหมือนกับว่าเป็นส่งของฟรีเสียทั้งเวลา, CPU, bandwidth เล่นๆ
  • Bandwidth เนื่องจากขนาดของ Bandwidth นั้นจำกัดซึ่งการ Push ข้อมูลไปที่ Client ทีละเยอะๆนั้นอาจจะทำให้เครื่องของ Client ช้าลงได้ซึ่งก็มีผลกระทบต่อการใช้งานของ User
  • Priority ทางฝั่ง Server ต้องคำนึงถึงการเรียง Priority ของสิ่งที่จะ Push ดีๆเช่นจะส่งรูป หรือ Script หรือไฟล์ text อะไรยังไงให้ User Experience ดีที่สุด เพราะการ Push ส่งข้อมูลซี้ซั้วอาจจะทำให้เวปแสดงผลได้ช้าลงไปอีก

 

เอาล่ะ พร้อมมาเริ่มรีดประสิทธิภาพให้เวปกัน!

อ้างอิง

HTTP/2 Push: The details

npm แล้วช้ามาลองใช้ yarn จาก facebook กัน

yarn-kitten-full

ทุกๆท่านที่เขียน Node.js ก็ต้องคุ้นเคยกับ npm กันอยู่แล้วนะครับ ซึ่งบางทีเรามักจะเจอว่า มัน install นาน รวมถึงเวลาเน็ตมีปัญหาแล้วมัน install ไม่ได้ มาวันนี้ Facebook ได้ประกาศ Open Source ตัว package manager ตัวใหม่ที่ทำงานบนพื้นฐานของ npm ซึ่งชื่อของมันก็คือ Yarn

ทาง Facebook ได้พูดถึงจุดเด่นหลักๆได้ประมาณนี้ครับ

  1. เร็ว – เพราะมีระบบการ Cache ถ้า pkg ไหนโหลดมาแล้วก็ไม่ต้องโหลด
  2. เชื่อถือได้ – ใช้ในการติดตั้ง package ได้เหมือนเจ้าอื่น
  3. ปลอดภัย – ทำการ check sum ซึ่งเป็นการตรวจเช็คว่าการ install นั้นถูกต้อง

ความสามารถหลักๆของมันคือเช่น

  • Offline Mode ถ้าเคย insatll package มาแล้วครั้งนึง ก็ไม่ต้องใช้ internet ในการ install แล้ว
  • ใช้ประโยชน์จาก Network อย่างเต็มที่ทำให้การ install นั้นเร็วขึ้น
  • ใช้ได้ทั้งกับ npm และ Bower
  • ทำการ retry ถ้าหากว่ามีปัญหาตอน install

อ่านรายละเอียดได้ที่ https://github.com/yarnpkg/yarn และ https://code.facebook.com/posts/1840075619545360 สำหรับ Architure และที่มาที่ไปของ Project นี้ครับ

เกริ่นมาพอแล้ว เรามาลองเล่นกันดีกว่าครับ

ก่อนอื่นก็

npm install -g yarnpkg

แล้วก็ลองเช็คดูครับว่าลงได้

yarnv.png

ที่นี้เดี๋ยวผมลอง install module เล่นๆ เอาเป็น socket.io ละกันครับ ดังนั้นผมสร้าง package.json ง่ายๆมาก่อน

{
“dependencies”: {
“socket.io”: “^1.5.0”
}
}

package.json

ที่นี้ลองรัน “yarn” ซึ่งเทียบเท่ากับ “npm install”

จะเห็นว่าเราจะได้ node_modules มารวมถึงเวลาที่ใช้ไป 3.61s

yarn_install.png

ทีนี้ผมลองลบ folder ‘node_modules’ ทิ้งเพื่อจะดูว่ามัน Offline install ได้จริงเปล่าแล้วก็ทำการ yarn อีกที ผลที่ได้คือ !!! 0.77s

yarn_reinstall

จะเห็นได้ว่า yarn นั้นทำการ cached ตัว package ที่เคยโหลดมาแล้วไว้ที่ Local Machine ซึ่งผมลองไปคุ้ยๆ Folder ดูก็เจอว่ามันไปเก็บไว้ที่  %localappdata%/yarn นี่เองสำหรับบน Windows

local_yarn.png

สรุป ผมว่า Tool ตัวนี้น่าสนใจครับ เดี๋ยวว่าจะเอาไปลองใช้ใน Production บ้าง โดยเฉพาะช่วงเน็ตช้าและต้องงานหลายๆ repo ที่อาจจะมีการใช้ npm package ซ้ำๆกันบ่อยๆ…

Published Android เกมแรกกับ Cactus Hip Hip

เนื่องจากส่วนตัวเคยเขียน Android มาสมัยแรกๆ แต่ก็ลองแต่เป็น apk แล้วเอามาลงในเครื่อง แต่แล้วผมเลยได้มีโอกาสทำเกมเล็กๆขึ้นมาแล้วลอง publish ขึ้น Google Play Store ครับ

เกมนี้ก็คือ Cactus Hip Hip เป็นเกมแนว Arcade เล่นง่ายๆแค่จิ้มๆให้ตัว Qewy โดดไปมาเก็บลูกกระบองเพชรสีเขียวให้จบและจะมีการ Upload คะแนนตอนท้าย

Screen Shot 2559-09-28 at 5.05.07 PM.png

มาพูดถึง Technologies ที่ผมใช้ดีกว่าซึ่งเกมนี้ใช้เวลาพัฒนาประมาณ 5 วันได้มั้ง (พอดีผมทำแค่วันเสาร์หรืออาทิตย์)

  • TypeScript เนื่องจากว่าได้ใช้ในงานประจำ :p
  • Phaser.IO ซึ่งเป็น Game Engine เอาไว้เขียนเกม 2D ด้วย JavaScript ที่ทำให้ชีวิตเราง่ายขึ้น เพราะช่วยจัดการระบบฟิสิกส์ การชนกันของภาพ การทำ animation รวมถึงเสียง
  • Apache Cordova ซึ่งเอาไว้ Build โปรเจคจาก HTML5/JavaScript ไปเป็น apps
  • CrossWalk ซึ่งเป็น WebEngine เนื่องจากผมเจอว่า เวลา App ที่เขียนด้วย Phaser นั้นรันบน Android ด้วย Webview ที่ติดมากับ OS นั้นมันช้ามาก ซึ่ง CrossWalk นั้นจะเป็นโปรเจคที่ทำให้เรา ship ตัว Webview ตัวล่าสุดไปกับ App (และทำให้ App ใหญ่ขึ้น 20MB  😦 )
  • LoopBack เอาไว้เขียน REST เพื่อเก็บ Score
  • Azure DocumentDB ซึ่งเป็น Service ของ Microsoft Azure ในการใช้ NoSQL  ซึ่งจริงๆแล้วก็คือ MongoDB
  • และอื่นๆ เช่น
    • ใช้ Cordova  กับ iOS
    • Bitbugget ใช้เก็บ private git repository

จะเห็นว่าแค่เกมเล็กๆ Developer อย่างเราก็ต้องรู้จัก Tech หลายหลายมาก..

และที่สำคัญได้ลอง publish App ขึ้น Store  ซึ่งทำให้รู้ว่าหลังจากจ่ายตังค์ขอ Dev License แล้วใช้เวลา 1-2 ชม ก็สามารถเอา App ขึ้นได้ละ  (และจะเห็นว่า URL ของ app ผมยังเป็น codova อยู่เลยและมันก็แก้ไม่ได้ ฮาาา…)

Link: https://play.google.com/store/apps/details?id=io.cordova.myappee96f2

Node.js – LoopBack มาต่อกันที่การเพิ่ม REST API กับ Query กัน

หลังจากที่ผมพูดถึงความสามารถเบื้องต้นของ LoopBack ไปแล้วนั้นใน Node.js เขียน REST API ด้วย LoopBack ซึ่งจะเห็นได้ว่าเราสามารถสร้าง REST API ได้ง่ายมาก แต่ทีนี้ถ้าเราต้องการที่เพิ่ม API ล่ะจะทำได้ยังไง

เรากลับมาดูที่ไฟล์ user.js กันก่อนครับ ซึ่งเป็นไฟล์ว่างๆ

'use strict';

module.exports = function(User) {

};

สิ่งที่ผมอยากจะได้ก็คือถ้าเราต้องการ API เพื่อที่จะเอาค่าของ User 4 คนที่ได้คะแนนสูงสุดจะต้องทำยังไงบ้าง
สิ่งที่เราต้องทำคือการเพิ่ม remoteMethod (ซึ่งทาง LoopBack Framework จะทำการ Route มาเข้า Method ของเราครับ

'use strict';

module.exports = function(User) {
User.getTopUsers = function(cb){
cb(null, "getTopUsers Response");
};

User.remoteMethod (
'getTopUsers',
{
http: {path: '/gettopusers', verb: 'get'},
returns: {arg: 'users', type: 'string'}
}
);
};

จะเห็นว่า Code User.remoteMethod นั้นทำการ define ว่าถ้ามี HTTP Request ที่เป็น GET เข้ามาที่ Path /gettopusers นั้นจะทำการเรียก Method User.getTopUsers นั่นเอง

และใน Method ที่ชื่อ User.getTopUsers นั้นตอนนี้ผมลองให้ส่งค่ากลับไปว่า getTopUsers Response ที่นี้ลองรันดู LoopBack เพื่อเป็น Server ดูครับ

ลองเช็คกับ API Explorer ก็จะเห็นว่า API ที่เราเพิ่งเพิ่มเข้าไปมาแล้ว

new-api.png

เนื่องจากเป็น GET ผมลองเรียกผ่าน Browser ครับก็ได้ Response มาแบบนี้ ตามที่เขียนไว้

new-api-response.png

ที่นี้จาก API ที่ผมต้องการนั้น ผมอยากได้ User ที่คะแนนสูงสุด ซึ่งทาง LoopBack นั้นก็มี Build-in API ให้เราใช้ในการ Query ข้อมูลจาก Model ได้ครับ (Querying data) เช่น

'use strict';

module.exports = function(User) {
User.getTopUsers = function(cb){
User.find({
order: 'score DESC',
limit : 4
}, (err, instances)=>{
cb(null, instances);
});
};

User.remoteMethod (
'getTopUsers',
{
http: {path: '/gettopusers', verb: 'get'},
returns: {arg: 'users', type: 'string'}
}
);
};

ซึ่งจาก Code ข้างบนนี้จะเป็นการใช้ User.find ซึ่งเป็นการ Query หา Model โดยมี Filter ว่า หา ‘score’ ที่มีค่าสูงสุด 4 entries แรก

ที่นี้ลองทดสอบกันอีกทีครับ

ผมลองใส่ ข้อมูลไปแบบนี้ตาม Order

[
{
“name”: “alpha”,
“score”: 70,
“id”: 1
},
{
“name”: “beta”,
“score”: 45,
“id”: 2
},
{
“name”: “catto”,
“score”: 39,
“id”: 3
},
{
“name”: “delta”,
“score”: 86,
“id”: 4
},
{
“name”: “sigma”,
“score”: 34,
“id”: 5
},
{
“name”: “fanta”,
“score”: 12,
“id”: 6
}
]

ทีนี้ลองเรียกผ่าน API /gettopusers ดูครับ

result.png

เราก็จะได้ Response ที่ทำการ Order มาแล้วตาม score โดยที่ delta(80), alpha(70), beta(45), catto(39) ตามลำดับที่เราได้ทำ Query ไว้อย่างง่ายดาย

มาถึงตรงนี้เราก็จะได้เห็นความ Powerful ของ LoopBack ไปอีกหนึ่งเรื่องนะครับ 🙂

powered-by-lb-med

Fear Driven Development

จะเกิดอะไรขึ้นถ้า Developer ต้องทำงานอยู่ภายใต้สิ่งแวดล้อมที่มีความกลัวครอบงำ…

ทีมที่ทำงานด้วย Fear Driven Development (FDD) นั้นจะทำให้ Developer นั้นรู้สึกว่า

  • กลัวที่จะทำผิด
  • ไม่กล้าแก้ Code
  • ไม่กล้า Refactor
  • ไม่กล้า Commit หรือ Push Code
  • ไม่กล้าเปลี่ยน Design
  • ไม่กล้าท้าทาย UI/UX หรือ Product เพราะกลัวได้งานเพิ่ม
  • ไม่กล้ารับปาก เพราะกลัวทำไม่ได้
  • ไม่กล้าออกความเห็น เพราะกลัวต้องรับผิดชอบกับ Idea ตัวเอง
  • ไม่กล้าเปลี่ยน Tools หรือ Framework
  • กลัวว่า Software นั้นจะมี BUG ซึ่งเห็นเหตุผลให้เกิด Process ต่างๆมากมาย
  • และสุดท้ายทำให้ Developer ใช้เวลาไปกับงาน Admin/Process มากกว่าการเขียน Code….

ความกลัวและไม่กล้าต่างๆเหล่านี้ทำให้ Project ไปได้ช้าลงแน่นอน รวมถึงทำให้เกิด Over-Engineer (การ Design Software เกิด Use case ที่จะเกิดขึ้นจริง) และกลัวการ Estimate ซึ่งเป็นการบอกเวลาว่า Project นี้จะเสร็จตอนไหนกับเหล่าท่านๆผู้บริหารระดับสูงทั้งหลาย จึงทำให้การ Estimate (ประเมิณ) กลายมาเป็นการลงรายละเอียดซึ่งใช้เวลาเยอะมากจนกว่าจะได้ตัวเลขออกมาก

วัฒนธรรมกลัวตกงาน

เป็นลักษณะหนึ่งของ FDD ซึ่งเกิดจากทีมใช้งาน Developer อย่างหนักและมีการกดดันกันว่าถ้ามีปัญหากับโปรเจคอาจจะโดนไล่ออกได้ ซึ่งการทำแบบนี้ไม่อาจจะทำให้ทีมนั้นมี Productivity ที่ดีได้ รวมทั้งยังขาด Innovation ด้วยรวมถึงทำให้เกิดความกดดันต่างๆและทำให้อัตรา Turn-Over สูงขึ้น ซึ่งในทีมที่มีวัฒนธรรมแบบนี้ส่วนใหญ่ก็จะมีการยกย่องคนที่เรียกว่า Hero(Hero Driven Development) ซึ่งเป็นคนที่ทำให้แต่ละ Release นั้นผ่านไปได้จะได้รับการยกย่องและสุดท้ายก็จะกลายเป็นว่าทีมนั้นต้องการ Hero ตลอดเวลานี่แหละคือปัญหา!

รวมถึงวัฒนธรรมการ Blame เช่นเมื่อเวลามีปัญหาเกิดขึ้นก็หาคนทำผิดแทนที่จะช่วยกันแก้ปัญหาให้ User…

วัฒนธรรมกลัวการแก้ Code

อีกสิ่งที่น่ากลัวของการพัฒนา Software ซึ่งก็คือ Developer ไม่กล้าแก้ไข Code ซึ่งอาจจะเป็นเพราะว่า Code นั้นเก่ามากๆซึ่งปกติน่าจะเกิดจากการที่ไม่เข้าใจ Code ชุดนั้นมากกว่า ลักษณะของ Code ประเภทนี้คือมันก็ work ดีเกือบทุก case แต่ถ้าจะต้องแก้ Developer ก็จะกลัวจะเกิดผลที่คาดไม่ถึง รวมทั้งเกิด Bug ต่างๆ และที่เลวร้ายไปกว่านั้นคือไม่กล้าแก้ Code ของตัวเอง!

สุดท้าย

ส่วนตัวผม คิดว่าสิ่งที่อาจจะน่ากลัวกว่าก็คือการกลัวการเปลี่ยนแปลงโดยเฉพาะ Developer เพราะอย่างที่รู้กันอยู่แล้วว่า Software Development นั้นเทคโนโลยีหรือ Tools ต่างๆมาเร็วไปไว ซึ่งการที่เราไม่ยอมรับการเปลี่ยนแปลงตรงนี้ก็จะคงอยู่แต่โลกเดิมๆ โดยไม่ได้มองหาสิ่งที่จะมาเพิ่ม Productivity ความรู้ใหม่ๆ เพื่อช่วยให้เราเก่งขึ้นและทำงานได้ดีขึ้น 🙂

ถ้า Developer ไม่กล้าแก้ Code แล้วใครจะกล้าแก้ล่ะ???

เรียบเรียงจาก:

http://www.hanselman.com/blog/FearDrivenDevelopmentFDD.aspx

 

Node.js Tools for Visual Studio มีดีอะไร

logo.png
ชีวิตนี้ยังหนีไม่พ้น Microsoft จริงๆ เพราะตอนนี้ Microsoft ได้ออก Node.js Tools for Visual Studio (ณ วันนี้ก็ version 1.2 แล้ว) ซึ่งเป็น Extension เสริมที่ทำให้ Visual Studio(ตัวเต็ม) นั้นทำงานกับ Node ได้อย่างมีประสิทธิภาพมากขึ้นซึ่งสามารถใช้ได้กับ VS2015 – Official Link

พอลงไปแล้วก็จะมี Node.js Tools โผล่มาตรงนี้

node_tool

จากที่ Microsoft โปรโมทก็มีคร่าวๆ ดังนี้

Project Templates

ซึ่งทำให้เราสร้าง Project โดยเลือกได้เลยว่าจะเอา โปรเจคเปล่าๆ หรือมาพร้อมกับ Code ตัวอย่างที่เขียน http server ง่ายๆ ถ้ากลัวเริ่มไม่ถูก

templates
เห็นว่ามี templates ให้เลือกเต็มเลย

IntelliSense

ซึ่งผมลองแล้วก็บอกได้ว่า สมตามที่โฆษณาไว้ เพราะมันมี icon แสดงให้ดูง่ายและเร็วด้วย (สำหรับ Build-in Function นะครับ ถ้าเป็น module ที่เราใช้อาจจะต้องไปใช้ TypeScript เหมือนให้มี IntelliSense)
intellisense.png

Npm Integration

มีหน้าจอที่เป็น UI ให้ใช้ในการหา module ต่างๆ ได้ง่ายขึ้นสำหรับคนที่ไม่สันทัด command line

npm_1.png
เวลา Right Click ที่ npm folder ใน Project
npm_2
พิมพ์ “mocha” ไปก็มี version ต่างๆให้เลือก (แต่ผมว่าใช้ commandline เร็วกว่านะ :p )

Interactive Window

เป็นหน้าต่างที่เอาไว้ลอง Code JavaScript แบบทันทีทันใจแถมยังมี syntax Hilight กับ IntelliSense ให้ด้วย

interact_win
เปิดจากตรงนี้
interact_win2
หน้าต่างเปิดมาเป็นแบบนี้
interact_win3
ลองพิมพ์ function บวกเลขไปดูครับ ขึ้น Undefined…
interact_win4
ลองใส่ add(1,2) ดู ก็จะได้คำตอบออกมาเป็น “3”

Advanced debugging

ใช้ในการ Debug เช่น การตั้ง break points หรือการใช้งานพวก Watch ในการดูค่าตัวแปรต่างๆ ซึ่งทำได้ดีมากเหมือน C# ตรงนี้ผมว่า Powerful จริง

debug
ยกตัวอย่างมี express app ตัวนึงรับ ‘GET’ request มาครับ

จะเห็นว่าเราเห็นค่าของตัวแปร req ทั้งหมดเลย

debug_2
req.headers เราเห็นหมด ง่ายๆแบบนี้ (y)

 

และอื่นๆอีกมากมาย เช่น Profiling (ตัวนี้เด็ดมากกกก), Unit Testing, TypeScript Integration

ปล. ตอนแรกว่าจะเขียนเรื่อง Profiling แต่เห็น Features อื่นก็น่าสนใจไม่น้อยเลยเอามาเขียนก่อนครับ 😉

รู้จักกับ Modern Agile – agile 2016 ;)

logo.png

 

เป็นที่รู้กันว่า Agile นั้นถูกใช้งานอย่างแพร่หลายใน Software Development ซึ่งแนวคิดของ Agile นั้นมีการพูดถึงตั้งแต่ปี 2001 แต่มาถึงปีนี้ 2016 ทาง Agile Alliance(สมาพันธ์แห่งอไจล์ :p) ก็ได้พูดถึงสิ่งที่เรียกว่า Modern Agile โดยมีแนวคิดสำคัญ 4 อย่างที่ คาดหวังว่าจะช่วยจะทำให้เกิดผลลัพท์และสร้าง Culture ที่ดีแบบเหนือความคาดหมาย!!!

  1. Make People Awesome – ทำให้ทุกคนรู้สึกยอดเยี่ยม
    สตีฟ จอบส์ เคยถามเพื่อนร่วมงานว่า “อะไรคือประโยชน์สูงสุดที่เราสามารถมอบให้ลูกค้าได้”
    ใน modern agile นั้น เราถามถึง “การทำยังไงให้ทุกๆคนที่เกี่่ยวข้องทั้งหมดที่เกี่ยวข้องรู้สึก awesome!”
    เราเรียนรู้ถึง User และจุดที่ User เจ็บปวดและควรแก้ไข แล้วก็ทำให้พวกเค้ารู้สึก awesome!
  2. Make Safety a Prerequisite – ปลอดภัยไว้ก่อน
    ความปลอดภัยไว้ก่อนทั้งความต้องการพื้นฐานของมนุษย์และหัวใจสำคัญที่จะทำให้เกิดประสิทธิภาพสูงสุด ซึ่งเป็นสิ่งที่เราควรจะต้องมีเช่น เวลา การให้ข้อมูล ความเคารพหรือเชื่อใจกันและกัน การเงิน สุขภาพ และความสัมพันธ์ของคนฝ่ายต่างๆ
  3. Experiment & Learn Rapidly – ทดลองและเรียนรู้อย่างรวดเร็ว
    เราไม่สามารถทำให้คนรู้สึก awesome หรือ make safety a prerequisite ได้ถ้าเราไม่เรียนรู้ และที่สำคัญเราต้องเรียนรู้อย่างรวดเร็วโดยการทดลองบ่อยๆ เราต้องทำให้รู้สึกว่าความล้มเหลวในการทดลองเรียนรู้ไม่ได้เป็นเรื่องแย่อะไร ซึ่งจะเป็นตัวช่วยให้มีการลองอะไรใหม่ๆมากขึ้น
  4. Deliver Value Continuously – ส่งมอบสิ่งที่มีคุณค่าอย่างต่อเนื่อง
    ถ้าไม่มีการ deliver อะไรเลยก็จะไม่ช่วยให้ใครรู้สึก awesome ใน modern agile นั้นเราถามตัวเองว่า “เราจะทำอย่างไรให้เราสามารถ deliver สิ่งที่เป็น valuable work ได้เร็วขึ้น”
    การที่จะ deliver งานที่มีคุณค่าได้อย่างต่อเนื่องนั้น เราจะต้องทำการแบ่งส่วนงานที่ใหญ่ให้เป็นส่วนเล็กๆที่ยังมีคุณค่า เพื่อที่จะทำให้การ deliver นั้นเร็วขึ้น

เรามาเริ่มทำให้ทุกๆคนรอบตัวเรา AWESOME กัน!!

References:

 

HTTP แบบพื้นฐานสุดๆ

http_basic

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

HTTP คืออะไรล่ะถ้าอยากรู้รายละเอียดก็จริงจังก็ไปอ่านใน Wiki ได้เลย

สิ่งที่ผมอยากจะพูดถึงขอเป็นในมุมของ Developer แบบสั้นๆละกัน

HTTP นั้นเป็น Protocol(ข้อตกลง) ที่ใช้ในการติดต่อกันระหว่างอุปกรณ์ที่รองรับการเชื่อมต่อไม่ว่าจะแบบต่อสายหรือ wireless ซึ่งจะมีส่วนประกอบหลักๆคือ Client(เครื่องต้นทาง) กับ Server(เครื่องปลายทาง) และทำการสื่อสารโดยสิ่งที่เรียกว่า HTTP Request/Response

HTTP Request

คือการส่งคำสั่งเพื่อขอข้อมูลโดย Client ไปยัง Server เพื่อให้ส่งข้อมูลตอบกลับมา

Client === ร้องขอ ==> Server

ส่วนประกอบสำคัญของ HTTP Request

  1. URL ซึ่งเป็นเหมือนที่อยู่ของ Server ที่จะไปขอข้อมูล
    โดยที่ URL นั้นก็มีส่วนประกอบหลักๆประมาณนี้ครับ
    Scheme เป็นตัวที่ระบุ Protocol ซึ่งโดยปกติจะเป็น http หรือ https (มี s คือ secure หรือมีระบบความปลอดภัยกว่า)
    Host Name เป็นชื่อของ Server ที่ทำการลงทะเบียนไว้
    Port เป็นหมายเลขสำหรับระบุช่องการติดต่อ (เหมือนกับเราไปธนาคารแล้วมีหลายช่องที่เคาเตอร์ให้บริการ แต่ละช่องก็ให้บริการแตกต่างกันในกรณีปกติ) ซึ่งปกติไม่ต้องระบุก็ได้เพราะมี Default คือ 80 สำหรับ http และ 443 สำหรับ https
    Path เช่นที่อยู่ของข้อมูล ไฟล์ รูป
    Query String เป็นข้อมูลเพิ่มเติมที่ใช้ระบุว่า Client ต้องการข้อมูลมีรายละเอียดปลีกย่อยยังไง

    ตัวอย่างเช่น
    https://www.youtube.com/watch?v=ZV-6SJmSw7
    Scheme คือ https
    Host Name คือ www. youtube.com
    Port ไม่ได้ระบุ ซึ่งค่าปกติเป็น 443 เพราะเป็น https
    Path ก็คือ watch
    Query String คือ v=ZV-6SJmSw7

  2. HTTP Headers ซึ่งเป็นเหมือนกับข้อมูลเพิ่มเติมที่แนบไปให้ Server รับรู้ว่า เช่น มาจากอุปกรณ์แบบไหน Version อะไร ต้องการข้อมูลแบบไหน
  3. Cookies เป็นข้อมูลไม่ใหญ่มากที่ทาง Server สามารถฝากไว้ที่ Client ได้
  4. Method หรือ Verb เป็นข้อมูลที่บอกว่า Client ต้องการทำอะไรกับข้อมูล เพื่อที่ Server จะได้ทำงานได้ตรงตามที่ต้องการ ปกติที่จะเจอกันก็ GET, POST, PUT ตามแต่ประเภทของการขอข้อมูลครับ ซึ่งตอนออกแบบ Server ต้องออกแบบว่าการเข้าถึงข้อมูลแต่ละแบบจะให้ใช้ Method แบบไหน
  5. Request Body หรือ Payload เป็นข้อมูลที่เอาไว้ระบุว่าคำสั่งขอข้อมูลนั้นๆมีรายละเอียดอะไรบ้าง อ่านดูแล้วเหมือน Query String ซึ่งปกติจะใช้กับแบบ GET
    ดังนั้นตัว Request Body เนี่ยจะได้ใช้ในการ Request แบบ POST/PUT

ตัวอย่าง…HTTP Request แบบดิบๆ

POST h ttps://play.google.com/log?format=json HTTP/1.1
Host: play.google.com
Connection: keep-alive
Content-Length: 417
accept: */*
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
content-type: application/x-www-form-urlencoded;charset=UTF-8
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.8
Cookie: HSID=AiNeRb8SXTipvwqNT; SSID=AUnId0mBjkh8FuXrP;

[[1,null,null,null,null,null,null,null,[“en-US”,”chrome”,”51.0.2704.103″,”22.0.0″],null,[null,”10.0″,3,null,”en-TH”,2]],78,[[“1469717946642″,null,[],null,null,null,null,”[null,null,null,null,null,null,null,null,null,null,null,[[null,1,null,null,null,null,243,2051499711]],null,null,[1600,900],null,null,null,null,null,null,null,null,[]]”,null,null,null,null,null,null,null,null,null,null,null,[]]],”1469717946643″,[]]

สีแดง คือ Method/Verb
สีส้ม คือ URL
สีเขียว คือ Version ของ HTTP ที่ใช้ในการ request
สีม่วง คือ Headers
สีน้ำเงิน คือ Cookie
สีชมพู คือ Request Body

HTTP Response

คือการส่งข้อมูลที่ทาง Server นั้นตอบรับกลับไปยัง Client ตามที่ได้ขอมา

Client <== ตอบรับ === Server

ส่วนประกอบสำคัญของ HTTP Response

  1. HTTP Status Code ซึ่งเป็นรหัสบอกสถานะว่า การ Request ครั้งนั้นได้รับการตอบรับเป็นอย่างไร
  2. HTTP Response Headers เป็นข้อมูลเพิ่มเติมที่แนบมาโดย Server เช่น ข้อมูลมีขนาดเท่าไหร่ เป็นข้อมูลประเภทไหน
  3. Response Body เป็นตัวเนื้อความของข้อมูลจริงๆที่ Server นั้นตอบกลับมาที่ Client

ตัวอย่าง… HTTP Response แบบดิบๆ

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://www.google.co.th
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: X-Playlog-Web
Content-Type: text/plain; charset=UTF-8
Date: Thu, 28 Jul 2016 14:59:04 GMT
Server: Playlog
Cache-Control: private
Expires: Thu, 28 Jul 2016 14:59:04 GMT
Content-Length: 47

[“900000″,null,[null,”2570847921467975139”],[]]

สีเขียว คือ Version ของ HTTP ที่ใช้ในการ request
สีส้ม คือ Status Code ซึ่ง 200 คือสำเร็จ (OK)
สีม่วง คือ Response Headers
สีชมพู คือ Response Body

มาถึงตรงนี้แล้วทุกคนก็คงเข้าใจพื้นฐานหลักๆของ HTTP แล้วนะครับ (y)
แล้วพอทราบมั้ยครับว่าการกด Link บนเวปหรือการพิมพ์ URL เป็นการ Request แบบไหน 🙂

 

สร้าง Node.js module แบบ Native ด้วย C++

node_cpp

เป็นที่รู้กันว่าสำหรับทุกคนว่า Node.js นั้น Powerful ก็เพราะว่ามี Modules ให้เราใช้ไปแทบทุกอย่าง รวมถึงหลายๆคนอาจจะเคยเขียน Module ด้วย JavaScript ทั้งใช้เองและให้คนอื่นใช้

แต่วันนี้ผมจะมาแนะนำวิธีการเขียน Node.js module ด้วย C++ กัน

ก่อนอื่นในเมื่อเราเขียน Module ด้วย JavaScript ได้ทำไมต้องใช้ C++ มาดูข้อดีกันก่อนเลย

  1. System Access – ด้วย Native enviroment ทำให้ Module ที่เขียนด้วย C++ สามารถเข้าถึง API ของ System/OS ได้
  2. Performance – JavaScript นั้นทำงานด้วย Single Thread แต่ว่า Native นั้นสามารทำงานแบบ Multi Thread ได้
  3. Compiled Binary – JavaSciprt ถึงแม้จะมี Minify/Uglify แต่ก็พอจะ reverse engineer ได้แต่สำหรับ Native นั้นถึงแม้จะทำได้เหมือนกันแต่ก็ต้องมานั่ง Deassembly

เริ่มกันเลยครับ จริงๆแล้วผมก็ทำตาม https://nodejs.org/api/addons.html  แต่!…ผมทำตามแล้วมันมีขั้นตอนเยอะและต้องใช้ Python ในการ Build อีก ผมเลยขอสรุปเองจากการลองแงะ Python scipt เพื่อลดความงงลง(หรือว่ายากขึ้น?)

  1. สร้าง Project C++ ใหม่จาก Visual Studio 2015
    newproj
  2. เป็น DLL นะ
    dllproj
  3. ไปโหลด Node.js ไฟล์ headers และ node.lib มาครับที่
    https://nodejs.org/download/release เลือกตาม version ของ Node ที่เราจะใช้ได้เลย เช่น v6.3.0
    download
  4. Extract .gz แล้วก้ copy ไฟล์มาที่ Folder C++ Project ของเรา
    ผมตั้งชื่อ folder เป็น
    – include สำหรับ headers ไฟล์ที่เรา Extracted มา
    – lib สำหรับเก็บ node.lib
    copy_dep
  5. ที่นี้ก็ copy Source code นี้ไปที่ .cpp หลักครับ
    // anurocha_node.cpp : Defines the exported functions for the DLL application.
//

#include "stdafx.h"
#include "include/node/node.h"

namespace demo {

 using v8::FunctionCallbackInfo;
 using v8::Isolate;
 using v8::Local;
 using v8::Object;
 using v8::String;
 using v8::Value;

 void SayHi(const FunctionCallbackInfo<Value>& args) {
 Isolate* isolate = args.GetIsolate();
 args.GetReturnValue().Set(String::NewFromUtf8(isolate, "Hi - How are you doing?"));
 }

 void init(Local<Object> exports) {
 NODE_SET_METHOD(exports, "hello", SayHi);
 }

 NODE_MODULE(addon, init)

} // namespace demo
  6. ลอง Build Project ดูครับ…เจ๊ง!
    link_err
    อ๊ะ!.. เราลืม Link ครับ
  7. ไปเพิ่ม lib/node.lib ใน Linker ซะ
    linker
  8.  Build อีกรอบ….เจ๊งเหมือนเดิม!!@#ไม่ต้องตกใจครับ….เป็นมุข..เรามี Lib ของ node.dll เป็น x64 ตามที่โหลดมา แต่เรากำลัง Compile แบบ x86 อยู่(ซึ่งเป็น Default Configuration ตอนสร้าง Project) ดังนั้นไปแก้ Project – Linker อีกรอบนึงครับ มั่นใจว่าแก้สำหรับ Platform x64 ด้วยนะครับ
    linker64
  9.  Build อีกทีจริงๆ ด้วย Target x64 นะครับbuildx64
  10. ถ้า Build ผ่านจะได้ไฟล์ .dll มาครับ
    out
    ให้เปลี่ยนชื่อเป็น anurocha.node แทน
  11. สร้างไฟล์ app.js ง่ายๆมา มี Code แค่ 2 บรรทัด ที่ Folder เดียวกับ anurocha.node
    const addon = require('./anurocha');
console.log(addon.hello());
  12. รัน “node app.js” ดูครับ…..แล้วความตื่นเต้นก็เกิดขึ้น!!!
    node_out

สำเร็จแล้วกับ 12 ขั้นตอนที่ยาวนาน !!!!!

ลองมาดูรายละเอียดกันครับเกี่ยวกับขั้นตอนการทำงานของ JavsScript <–> C++
ซึ่งหัวใจสำคัญที่ทำให้ทั้ง 2 ภาษาคุยกันได้คือ V8 ที่เป็น JavaScript Engine เขียนด้วย C++ จาก Google นั่นเอง

  1. เวลาที่ dll ถูกโหลดด้วย JavaScript จาก require(); ตัว dll จะถูกเรียกครั้งแรกเพื่อทำการ Init ค่าต่างๆ
    ในที่นี้เราทำการ export Fuction ที่ชื่อว่า hello ออกไป ซึ่ง function hello นั้นทำการ Map กับ Method ที่ชื่อว่า SayHi

    void init(Local<Object> exports) {
 NODE_SET_METHOD(exports, "hello", SayHi);
 }

 NODE_MODULE(addon, init)
  2. เวลาที่ JavaScript เรียก addon.hello();
    Code ฝั่ง C++ จะถูกเรียก Method ที่ชื่อว่า SayHi(); ทำให้มีการ return String object ที่มีค่า “Hi – How are you doing?” ออกมาให้ฝั่ง JavaScript

    void SayHi(const FunctionCallbackInfo<Value>& args) {
 Isolate* isolate = args.GetIsolate();
 args.GetReturnValue().Set(String::NewFromUtf8(isolate, "Hi - How are you doing?"));
 }

จากตัวอย่างนี้จะเห็นได้ว่าการเขียน Node.js Module ด้วย C++ นั้นอาจจะดูยุ่งยากซักนิดนึง แต่มันทำให้เราเขียน Logic ต่างๆด้วย C++ ได้ นั่นหมายความว่าถ้าเรารัน Node บน Windows เราก็สามารถเรียกใช้งาน Win32 API ต่างๆได้เช่น การเรียก Registry Key, ต่อ Socket, อ่านไฟล์บน HDD รวมถึงการทำงานร่วมกับสารพัด Library ของ C++ อย่างที่ทำได้เหมือนการเขียนโปรแกรมบน OS นั้นๆ….

LONG LIVE C++

ปล. Code ทั้ง Solution ดูได้จาก https://github.com/anurocha/node_cpp_addon ครับ