KidBright IDE ถูกพัฒนาด้วย NodeJS และถูกเก็บไว้ที่ Gitlab.com
ซึ่งก่อนนี้เรายังไม่ได้พูดถึงกันเลยว่า Git คืออะไร? ติดตั้งอย่างไร? และ NodeJS นั้นมีวิธีการติดตั้งกันอย่างไร? แล้วถ้าอยากจะเลือกใช้ version 8 จะต้องลงอย่างไร?
วันนี้ทางผู้เขียนจะมาแนะนำเครื่องมือที่เราต้องใช้กันประจำอย่าง Git และการติดตั้ง NodeJS ด้วยเครื่องมือที่ชื่อว่า NVM
NVM คืออะไร?
NVM ย่อมาจาก Node Version Manager นั่นเองครับ คือโปรแกรม ที่มีหน้าที่ช่วยจัดการ NodeJS ในเครื่องของเราครับ เพราะว่าในบางครั้งเราจำเป็นจะต้องเขียนโปรแกรม NodeJS ต่างๆเวอร์ชั่นกันไป เราจะต้องคอยลบ คอยลงใหม่นอกจากจะเสียเวลาแล้ว แล้วยังจะปวดหัวอย่างมากกกกครับ

การติดตั้ง NVM สำหรับ Windows
ไปที่หน้าดาวน์โหลด แล้วเลือก version ล่าสุดได้เลยครับ



เมื่อติดตั้งเรียบร้อยให้ลองเปิด โปรแกรม Terminal ขึ้นมา แนะนำให้ใช้โปรแกรม PowerShell ดูก่อนครับหลังจากนั้นลองสั่งคำสั่ง nvm
ดูว่าได้รึเปล่า
ติดตั้ง NodeJS ด้วย NVM
สามารถติดตั้ง NodeJS ด้วยคำสั่ง nvm install [node-version]
ได้เลยอย่างเช่นหากเราต้องการ NodeJS 8 เราสามารถติดตั้งได้ด้วยคำสั่ง nvm install 8

ติดตั้ง NodeJS ด้วยคำสั่งด้วย nvm install
ถ้าเรามี NodeJS หลายเวอร์ชั่น สามารถเรียกดูได้ด้วยคำสั่ง nvm list

ตรวจสอบรุ่นที่มีด้วย nvm list
การเลือกเวอร์ชั่นที่จะใข้งาน สามารถสั่งด้วยคำสั่ง nvm use [version]
ครับ

เลือกรุ่นด้วยคำสั่ง nvm use
การติดตั้ง NodeJS ผ่าน Windows Installer
หากพบปัญหา ไม่สามารถติดตั้งด้วย NVM ได้ เราก็สามารถลงผ่าน Windows Installer ได้ โดยการเข้าหน้า https://nodejs.org/en/download/

หน้าดาวน์โหลด NodeJS
เมื่อดาวน์โหลดมาเรียบร้อย ก็ติดตั้งได้เลย

ไฟล์ติดตั้ง NodeJS

ติดตั้ง NodeJS

สั่งคำสั่ง node เพื่อตรวจสอบการติดตั้ง
ติดตั้ง Git
Git คืออะไร ?
Git คือ เครื่องมือที่เอาไว้บันทึกเวอร์ชันการเปลี่ยนแปลงของไฟล์ในโปรเจคเรา ทำให้เราสามารถที่จะย้อนกลับไปดูเวอร์ชันต่างๆ
ของโปรเจคได้ทุกเมื่อ หรือจะดูว่าใครเป็นคนแก้ไขไฟล์นั้นๆได้ ซึ่ง Gitเป็น Version Controlแบบ Decentralized
หรือ Distributed คือไม่ต้องมีเซิร์ฟเวอร์เก็บโค้ดไว้ตรงกลาง ซึ่งจะต่างกับพวก Subversionหรือ CVSที่ต้องมีเซิร์ฟเวอร์
ที่ไว้คอยเก็บโค้ดรวมไว้ตรงกลาง (Centralized) และที่สำคัญ Gitนั้นทำงานได้รวดเร็วมาก
เตรียมความพร้อมก่อนใช้งาน
การติดตั้ง Git
- Windowsดาวน์โหลดตัวติดตั้งได้จาก
https://git-scm.com/downloads
- Mac OS X Yosemite or laterติดตั่งผ่าน Terminal ให้พิมพ์
$ git version
- Linuxติดตั่งผ่าน Terminal ให้พิมพ์
$ sudo apt-get install git
เมื่อดาวน์โหลดไฟล์เสร็จแล้วให้ทำการเปิดไฟล์เพื่อติดตั้งได้เลย
หน้าต่างนี้ จะเป็นคำนำและเงื่อนไขในการใช้งานต่างๆ เมื่อพร้อมติดตั้งให้กดที่ “Next”
หน้าต่างนี้ จะให้เราเลือกตำแหน่งของพื้นที่ในการติดตั้ง Git
หน้าต่างนี้ จะให้เราเลือกส่วนเสริมต่างๆที่จะติดตั้ง
หน้าต่างนี้ โปรแกรมจะทำการสร้างโฟลเดอร์ที่ “Start Menu” ของเรา ถ้าไม่ต้องการเลือกที่ “Don’t create a Start Menu folder”
หน้าต่างนี้ จะเป็นการกำหนด Default Text Editor ให้กับ Git
หน้าต่างนี้ จะเป็นการเลือก Command line ให้กับ Git
หน้าต่างนี้ จะเป็นการเลือก library เพื่อเชื่อต่อระหว่าง Git กับ HTTPS
จากนั้นให้กด “Next” จนถึงหน้าต่างที่ให้ Install
หน้าต่างนี้ เมื่อพร้อมที่จะติดตั้ง ให้กด “Install” ได้เลย
รอจนทำการ Install เสร็จ
เมื่อ Install เสร็จแล้วก็กด Finish เพื่อปิดได้เลย
Basic Git Configurations
ก่อนจะเริ่มใช้งาน Git ได้นั้น จำเป็นต้องตั้งค่าการใช้งานเบื้องต้นก่อน ในบทความนี้จะใช้โปรแกรม Git Bash ที่ติดตั้งมาพร้อมกับ
Git for Windows
- ตั้งชื่อผู้ใช้งาน “user.name”
$ git config --global user.name "admin"
- ตั้งอีเมลของผู้ใช้งาน “user.email”
$ git config --global user.email "[email protected]"
- ตรวจสอบว่าที่ตั้งค่าถูกต้องหรือไม่
$ git config --global --list
ผลที่ได้user.name=admin admin
[email protected]
เริ่มต้นพัฒนา KidBright IDE

เมื่อเราติดตั้งเครื่องมือทั้งหมดเรียบร้อยแล้ว เราก็จะเริ่มพัฒนา KidBright IDE ได้เลยครับ เริ่มจากเข้าไปอ่านวิธีติดตั้ง ตามคำแนะนำ (README) ที่ https://gitlab.com/kidbright/kbide ซึ่งเป็นไปตามภาพด้านล่างครับ

หลังจากที่เราได้เตรียมเครื่องมาพอสมควร แล้วเราเห็น README.md ก็น่าจะอ๋อ และมั่นใจได้เลยใช่ไหมครับว่าเราจะพัฒนาได้อย่างสบายๆ แล้ว ให้เริ่มต้นด้วยคำสั่ง ตามลำดับต่อไปนี้ได้เลยครับ
git clone https://gitlab.com/kidbright/kbide --recursive
cd kbide
npm run build
npm start

หลังจากนั้นก็เปิดเว็ปเบราเซอร์ด้วย url: localhost:8000

เท่านี้แปลว่า เราสามารถรัน KidBright IDE ขึ้นมา และพร้อมพัฒนา ยำโค๊ดกันต่อแล้วครับ
มีปัญหาแฟลชโปรแกรมไม่ลง?
มีแถมนิดนึงว่า ถ้าตอนแฟลช แล้วมีปัญหาทำยังไงก็ไม่ได้ ให้ลง Python 2 เพิ่มเติมนะครับ (เนื่องจาก esptool จะติดต่อกับบอร์ด KidBright ด้วย pyserial ซึ่งถูกเขียนด้วย Python ดังนั้นเครื่องที่พัฒนาจะต้องลง Python ด้วย หากไม่มีครับ)

เท่านี้ก็เครื่องของเราก็จะพร้อมกับการพัฒนา KidBright IDE กันได้แล้วครับ ตอนต่อไปเราจะมาเรียนการพัฒนา Plugin สำหรับ KidBright IDE กันต่อนะครับ
ระหว่างนี้ ก็ลุย ก็ลองเขียนโปรแกรมเตรียมตัวไว้ได้เลยครับ สนุกแน่นอน!