Node.js Applications with Visual Studio Code
นักพัฒนาสาย Open Source หลายท่านมักจะมี Editor คู่ใจอยู่หลากหลาย หนึ่งในนั้นท่านอาจจรู้จัก Sublime ซึ่งเป็น Editor ทรงพลังที่นักพัฒนาหลายท่านเลือกใช้
อีกด้านนึงสำหรับนักพัฒนาสายไมโครซอฟท์แล้วก็มี IDE ที่ทรงพลังคู่ใจอยู่นั่นก็คือ Visual Studio มีทั้งเสียเงินแล้วก็ฟรีคือ Visual Studio Community Edition มีเครื่องมือครบครัน แต่ก็แลกมาด้วยกับขนาดโปรแกรมที่ใหญ่พอสมควร
นับตั้งแต่ Satya Nadella ขึ้นมารับตำแหน่ง CEO ก็มีการปรับเปลี่ยนหลากหลายอย่างในองค์กรและเทคโนโลยี โดยมีวิสัยทัศน์หลักๆที่ว่า Microsoft Open Source และ Microsoft Love Linux หลังจากนั้นไม่นานไมโครซอฟท์ก็ได้ออกโปรแกรมใหม่คือ Visual Studio Code ที่ทำหน้าที่เป็น Editor ตัวเล็กโหลดเร็ว ที่สามารถติดตั้งได้ทั้ง Windows, Mac OS X และ Linux
เพื่อให้ Visual Studio Code มีประสิทธิภาพมากยิ่งขึ้น เลยอยากที่จะนำมาทดลองใช้ทำ Node.js ดูว่าจะทำอย่างไร เนื่องจาก Node.js เป็น JavaScript ที่ทำงานที่ฝั่ง Server ในรูปแบบ Non-Blocking I/O ที่เร็วและนิยมมากในปัจจุบัน วันนี้ผมจะมาเสนอวิธีการใช้ Node.js ด้วย Visual Studio Code กันนะครับ
1.Visual Studio Code เข้าไปที่ https://www.visualstudio.com มีให้เลือกทั้ง Windows, Max OS X และ Linux ดาวน์โหลดและติดตั้งได้เลย
2. Node.js เข้าไปที่ https://nodejs.org ดาวน์โหลดและติดตั้งได้เลย
3. กดปุ่ม Start แล้วพิมพ์ cmd เพื่อเปิดหน้าจอ Command Prompt ขึ้นมา ทดสอบ node ได้ด้วยการทดลองพิมพ์ node แล้วกด Enter ถ้าเข้าสู่ Node Console แล้วให้พิมพ์ .exit เพื่อออกมา
Hello World
1. ทดลองสร้าง Node.js application ตัวแรกกันก็คือ “Hello World” โดยให้สร้างโฟลเดอร์ ชื่อ Hello ด้วยคำสั่ง mkdir Hello และเข้าไปในโฟลเดอร์นั้นด้วย cd Hello เปิดโปรแกรม Visual Studio Code โดยใช้ Hello เป็นโฟลเดอร์ทำงานด้วย code .
2. ที่ File Explorer Toolbar ให้เลือก New File พิมพ์ชื่อไฟล์ว่า app.js แล้ว Enter
3. พิมพ์โปรแกรมตามรูป แล้วกดปุ่ม Save
4. กลับมาที่หน้าจอ Command Prompt ให้รันโปรแกรมด้วยการพิมพ์ node app.js
Debugging Hello World
1.เอา Mouse ไปคลิ๊กที่หน้าบรรทัดเพื่อสร้าง Break Point หรืกดปุ่ม F9
2. คลิ๊กที่ปุ่ม Debug หรือกดปุ่ม Ctrl+Shift+D
3. ที่ปุ่มฟันเฟืองจะมีจุดสีแดงอยู่ ให้คลิ๊กที่นั่น
4. เลือก Node.js Environment
5. กลับไปดูที่ File Explorer จะเห็นว่า Visual Studio Code จะสร้างโฟลเดอร์ .vscode มาพร้อมกับสร้างไฟล์ lunch.json มาให้ด้วย
6. กลับไปที่ Debug อีกครั้ง แล้วกดปุ่มสีเขียวหรือกดปุ่ม F5
7. เมื่อโปรแกรมทำงานถึงบรรทัดที่เราวาง Break Point ไว้ พร้อมกับโชว์หน้าจอ Debug Console และสถานะค่าตัวแปรต่างๆให้ดูด้วย
8. ให้กดปุ่ม Step Over หรือ F10 เพื่อให้โปรแกรมดำเนินต่อไป
9. โปรแกรมจะทำงานต่อ ไปที่บรรทัดต่อไป เนื่องจากบรรทัดที่ 2 มีคำสั่ง console.log(msg) ก็จะมีคำว่า Hello World ขึ้นมาที่ด้านล่าง Debug Console ด้วยนั่นเอง
