เลือกหน้า

แนะนำการติดตั้ง NodeJS และ Git เครื่องมือสำหรับการพัฒนา KidBright IDE

โดย | พ.ย. 15, 2018 | บทความ | 0 ความคิดเห็น

แนะนำการติดตั้ง NodeJS และ Git เครื่องมือสำหรับการพัฒนา KidBright IDE

KidBright IDE ถูกพัฒนาด้วย NodeJS  และถูกเก็บไว้ที่ Gitlab.com 
ซึ่งก่อนนี้เรายังไม่ได้พูดถึงกันเลยว่า Git คืออะไร? ติดตั้งอย่างไร? และ NodeJS นั้นมีวิธีการติดตั้งกันอย่างไร? แล้วถ้าอยากจะเลือกใช้ version 8 จะต้องลงอย่างไร?

วันนี้ทางผู้เขียนจะมาแนะนำเครื่องมือที่เราต้องใช้กันประจำอย่าง Git และการติดตั้ง  NodeJS ด้วยเครื่องมือที่ชื่อว่า NVM

NVM คืออะไร?

NVM ย่อมาจาก Node Version Manager นั่นเองครับ คือโปรแกรม ที่มีหน้าที่ช่วยจัดการ NodeJS ในเครื่องของเราครับ เพราะว่าในบางครั้งเราจำเป็นจะต้องเขียนโปรแกรม NodeJS ต่างๆเวอร์ชั่นกันไป เราจะต้องคอยลบ คอยลงใหม่นอกจากจะเสียเวลาแล้ว แล้วยังจะปวดหัวอย่างมากกกกครับ

nvm = node version manager

การติดตั้ง NVM สำหรับ Windows

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

หน้าจอดาวน์โหลด nvm สำหร้บ Windows
หน้าจอติดตั้ง NVM
ทดสอบ NodeJS ที่ติดตั้งด้วย node -v

เมื่อติดตั้งเรียบร้อยให้ลองเปิด โปรแกรม 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

git1

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

เมื่อดาวน์โหลดไฟล์เสร็จแล้วให้ทำการเปิดไฟล์เพื่อติดตั้งได้เลย

git00

หน้าต่างนี้ จะเป็นคำนำและเงื่อนไขในการใช้งานต่างๆ เมื่อพร้อมติดตั้งให้กดที่ “Next”

git2

หน้าต่างนี้ จะให้เราเลือกตำแหน่งของพื้นที่ในการติดตั้ง Git

git3

หน้าต่างนี้ จะให้เราเลือกส่วนเสริมต่างๆที่จะติดตั้ง

git4

หน้าต่างนี้ โปรแกรมจะทำการสร้างโฟลเดอร์ที่ “Start Menu” ของเรา ถ้าไม่ต้องการเลือกที่ “Don’t create a Start Menu folder”

git5

หน้าต่างนี้ จะเป็นการกำหนด Default Text Editor ให้กับ Git

git6

หน้าต่างนี้ จะเป็นการเลือก Command line ให้กับ Git

git7

หน้าต่างนี้ จะเป็นการเลือก library เพื่อเชื่อต่อระหว่าง Git กับ HTTPS

git8

จากนั้นให้กด “Next” จนถึงหน้าต่างที่ให้ Install

git9

git10

หน้าต่างนี้ เมื่อพร้อมที่จะติดตั้ง ให้กด “Install” ได้เลย

git11

รอจนทำการ Install เสร็จ

git12

เมื่อ Install เสร็จแล้วก็กด Finish เพื่อปิดได้เลย

git13

 

Basic Git Configurations

ก่อนจะเริ่มใช้งาน Git ได้นั้น จำเป็นต้องตั้งค่าการใช้งานเบื้องต้นก่อน ในบทความนี้จะใช้โปรแกรม Git Bash ที่ติดตั้งมาพร้อมกับ
Git for Windows

  • ตั้งชื่อผู้ใช้งาน “user.name”
    $ git config --global user.name "admin"
  • ตั้งอีเมลของผู้ใช้งาน “user.email”
    $ git config --global user.email "admin@gmail.com"
  • ตรวจสอบว่าที่ตั้งค่าถูกต้องหรือไม่
    $ git config --global --list
    ผลที่ได้
    user.name=admin admin
    user.email=admin@gmail.com

เริ่มต้นพัฒนา KidBright IDE

KidBright

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

หลังจากที่เราได้เตรียมเครื่องมาพอสมควร แล้วเราเห็น README.md ก็น่าจะอ๋อ และมั่นใจได้เลยใช่ไหมครับว่าเราจะพัฒนาได้อย่างสบายๆ แล้ว ให้เริ่มต้นด้วยคำสั่ง ตามลำดับต่อไปนี้ได้เลยครับ

  1. git clone https://gitlab.com/kidbright/kbide --recursive
  2. cd kbide
  3. npm run build
  4. npm start 
ผลการรันคำสั่ง npm start

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

url: localhost:8000

เท่านี้แปลว่า เราสามารถรัน KidBright IDE ขึ้นมา และพร้อมพัฒนา ยำโค๊ดกันต่อแล้วครับ 

มีปัญหาแฟลชโปรแกรมไม่ลง?

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

 

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

ระหว่างนี้ ก็ลุย ก็ลองเขียนโปรแกรมเตรียมตัวไว้ได้เลยครับ สนุกแน่นอน!