ชวนน้องเล่นเกม และสั่งพูด Hello World ด้วย node.js

อยากเล่าให้น้องที่ชอบเล่นเกมฟัง ว่า Bluestacks ใช้ดาวน์โหลดเกมบน Android มาเล่นได้เหมือนกับมี Smart phone อีกเครื่อง วางอยู่บนโปรแกรม Windows เรียกได้ว่า โปรแกรมซ้อนโปรแกรมและมีได้หลายชั้น และโปรแกรม Node.js ก็ถูกกล่าวถึงกันอย่างมาก ไปค้นดูใน google ได้เลยว่า นิยมชมชอบกันขนาดไหน โดยเฉพาะ กลุ่มที่สนใจเทคโนโลยีแบบเข้มข้น ทั้งนิสิต นักศึกษา และโปรแกรมเมอร์ ถ้าสนใจเรื่องนี้ มาอ่านกันต่อได้เลยครับ ผมขอเสนอกิจกรรมน่าสนุก คือ พูด Hello world บน Bluestacks ถ้าดูตามภาพประกอบทั้ง 7 ภาพ เป็นเหตุการณ์ที่จะเกิดขึ้นหลังจากเราไป download โปรแกรมจาก bluestacks.com มาติดตั้งแล้ว เมื่อเปิดใช้งานโปรแกรมครั้งแรกนั้น 1) เรามักเริ่มต้นจากการเข้าไป ตั้งค่า (setting) ว่าจะใช้งานแบบแนวนอน หรือแนวตั้ง และความละเอียดของหน้าจอ ให้เหมาะกับการเล่นเกมของเรา 2) เปิด Play store เตรียมดาวน์โหลดโปรแกรม และเกมที่รอเราอยู่นับล้าน แต่เริ่มใช้งานก็ต้องอัปเดตคลังการสนับสนุนกันก่อน 3) จะติดตั้งเครื่องมือ ก็นึกถึงสูตรโกงเกมสมัยก่อนเลย ต้องเข้าโปรแกรม Termux (ก่อนอื่นต้อง download Termux….apk ค้นจาก google.com หรือดาวน์โหลดจากแหล่งเผยแพร่ เช่น apkcombo.com หรือ apkpure.com หรือ f-droid.org เมื่อได้มาแล้ว ก็เพียงแต่ลากแฟ้ม .apk ไปวางใน Bluestacks ก็จะเป็นการติดตั้งและใช้งานได้ทันที) หน้าตาของโปรแกรมจะเป็นพื้นสีดำ ตัวอักษรสีขาว ที่ดูจะมือมน แต่มีอะไรซ่อนอยู่มหาศาล ลองค้นหาดูครับ นึกซะว่าเก็บเหรียญ เข้าแล้วก็พบกับเครื่องหมาย $ แสดงว่าตรงนี้มีค่า ที่พร้อมสนับสนุนให้เราได้ไปต่อ เพราะเป็นสัญลักษณ์หน่วยเงินของต่างประเทศ เรียก Dollar sign 4) โปรแกรม Node.js ที่นักคอมพิวเตอร์เค้าใช้กันนั้น เริ่มต้นใช้งานได้ด้วยการพิมพ์คำสั่ง npm แต่เมื่อสั่งแล้วพบว่าในระบบยังไม่มี จึงต้องสั่งติดตั้งเพิ่ม การสั่งติดตั้งจะพิมพ์คำสั่งว่า pkg install nodejs แต่ฟ้อง error ก็ใจเย็น ๆ หาสาเหตุ และวิธีแก้ไขกันก่อน 5) ในอุปกรณ์มีแต่โปรแกรมเก่าที่มีมาก่อนหน้านี้ จึงยังใช้คำสั่งติดตั้งไม่ได้ อยากได้ของใหม่ก็สั่งอัพเกรดรายการกันก่อน จะได้มีโปรแกรมที่ทันสมัยยิ่งขึ้น มาสั่งกันได้เลย ด้วยคำสั่ง pkg upgrade 6) ถึงเวลาแล้ว ที่จะติดตั้งโปรแกรมที่เราต้องการ ก็เพียงแต่พิมพ์สั่งว่า pkg install nodejs ก็จะใช้เวลาไปดาวน์โหลดโปรแกรมมาติดตั้งให้เราอยู่พักหนึ่ง 7) เมื่อพร้อมก็เริ่มสั่งงาน และเขียนโปรแกรมกันเลย แต่ละบรรทัดก็จะมีความหมายเฉพาะตัว เรามาค้นหาความหมายของคำสั่งต่าง ๆ กันดีไหม เมื่อเขียนเสร็จ ก็สั่งให้โปรแกรมทำงาน ผลของการทำงานจะพบคำว่า Hello World ถือว่าภารกิจลุล่วง ภาษาอังกฤษเรียก Mission Complete ยินดีด้วย ผ่าน ด่านที่ 1 เรียบร้อยแล้ว

ภาพที่ 7

http://www.thaiall.com/bluestacks/

http://www.thaiall.com/node.js

การติดตั้งหรืออัพเดทรุ่นของ node.js

การติดตั้ง node.js เพื่อใช้คำสั่ง npm (Node Package Manager) เริ่มจากดาวน์โหลด node-v…-x64.msi สำหรับ windows จาก https://nodejs.org/en/ พบโปรแกรมใน C:\Program Files\nodejs\ หลังติดตั้งตรวจสอบรุ่นด้วย C:\> npm -v (16.7.0)

มื่อเวลาผ่านไป พบว่า node.js ได้รับการพัฒนาจนมีรุ่นใหม่ และรุ่นเก่าใช้ติดตั้ง package ใหม่ไม่ได้ จึงต้องติดตั้งโปรแกรม nvm โดยดาวน์โหลด nvm-setup.exe สำหรับ windows มาใช้งาน เพื่อใช้จัดการรุ่นของ node.js ทำให้เราสามารถติดตั้ง node.js ได้หลายรุ่น และเลือกใช้รุ่นที่ต้องการได้ เช่น C:\> nvm use 16.7.0 เป็นต้น ดังนั้นหลังติดตั้ง node.js แล้วจะได้ node , npm และ npx ไว้ใช้งาน แต่ยังไม่มี nvm จึงต้องติดตั้งเพิ่ม เพราะเมื่อเวลาผ่านไป ก็จะต้องติดตั้ง node.js รุ่นใหม่ แม้ node.js รุ่นเก่าจะเป็น LTS (Long Term Support) version แต่มี package เสริมจำนวนมากที่ถูกพัฒนาเพิ่ม และแจ้งว่าไม่เข้ากันกับ package รุ่นเก่า ที่เป็น deprecated ไปแล้ว และไม่สนับสนุน package เหล่านั้นอีกต่อไป และ nvm นี้เองที่ช่วยสลับรุ่นของ node.js ทำให้สามารถนำ project เก่ามาแก้ไข โดยไม่ต้องปรับแก้ code ตามการพัฒนาของ node.js ในแต่ละรุ่น

 ตรวจรุ่น https://nodejs.org/download/release/latest/
 ตรวจรุ่น https://github.com/coreybutler/nvm-windows/releases
 nvm-setup.zip (สั่ง nvm-setup.exe ได้ C:\Users\ACER\AppData\Roaming\nvm)
 nvm -v (1.1.7)
 npm cache verify (ตรวจสอบ cache)
 npm cache clean -f (ถ้าติดตั้ง/สั่งงานไม่สำเร็จ ข้อมูลอาจค้าง ถ้าเจอปัญหาลองไปล้าง cache)
 nvm list available (แสดง version ทั้งหมดที่ติดตั้งได้)
 nvm install 16.7.0 (ติดตั้ง node.js รุ่นที่กำหนด)
 node -v (เก่า v10.15.3)
 npm -version (เก่า 6.4.1) 
 nvm list (แสดง version ที่ถูกติดตั้งไว้แล้ว)
 nvm use 16.7.0
 node -v (v16.7.0)
 npm -version (7.20.3)

ตัวอย่างโค้ดที่ธนาคารแห่งประเทศไทยให้มาเพื่อใช้เชื่อมต่อ API

 var request = require("request");
 var options = { method: 'GET',
   url: 'https://apigw1.bot.or.th/bot/public/Stat-SpotRate/v2/SPOTRATE/',
   qs: { start_period: '2021-06-01',end_period: '2021-06-12' },
   headers: { accept: 'application/json', 'x-ibm-client-id': 'xxx … xxx' } };
 request(options, function (error, response, body) {
   if (error) return console.error('Failed: %s', error.message);
   console.log('Success: ', body);
 });

#เล่าสู่กันฟัง 63-050 ทบทวน react อีกครั้ง

ประมาณหนึ่งถึงสองปีที่แล้ว
น้องวิวชวนดูแอพที่เขียนด้วย react native
ตอนนั้นส่งขึ้นไปประมวลผลบน expo.io
แล้วไม่ได้เข้าไปดูอีกเลย เก่าไปแล้ว
ช่วงนี้สนใจ heroku.com เป็น paas
รองรับ react บน node.js ด้วย
จึงทดสอบ react ง่าย ๆ ก่อน
ไปถึงจุด ๆ หนึ่ง ก็ push repo
ที่โหลดมา ขึ้นไปยัง heroku
สรุปว่าเชื่อมกันหมด
ทั้ง node.js, react, git, heroku, app
ภาพนี้ใช้ code ของ w3school
ทั้ง index.js และ index.html
ถ้ามีโอกาสคงเล่ารายละเอียด
และขั้นตอน
ของการเขียน Hello World!

http://www.thaiall.com/reactnative/
http://www.thaiall.com/heroku

ใคร ๆ ก็มี พอสมัคร firebase เสร็จ ก็สร้าง project กันเลย

 

ใคร ๆ ก็ใช้ firebase เป็น webserver ของตนเอง
แต่การเริ่มต้นทำได้ด้วยการสร้าง project
เรามาเริ่มต้นสร้าง project กันเถอะ

01 firebase
01 firebase

ขั้นตอน
1. เริ่มต้นสมัคร gmail.com ก็จะได้บัญชี google.com
แล้วเข้า firebase.com จะพบหน้า “ยินดีต้อนรับกลับสู่ Firebase”
เห็นข้อความนี้เพราะเข้าไปหลายรอบแล้ว

02 project
02 project

2. ถ้ายังไม่มี project หรือโครงการ
จะพบปุ่ม “สร้างโครงการใหม่”
ระบุชื่อโครงการ “myproject1”
ระบุประเทศ “ไทย”

 

03 hosting
03 hosting

3. พบหน้า project สามารถเลือกได้
ว่าจะ
เพิ่ม Firebase ไปยังแอป iOS ของคุณ
เพิ่ม Firebase ไปยังแอป Android ของคุณ
เพิ่ม Firebase ไปยังแอปของคุณ
ถ้ายังไม่ถนัดการเขียนแอป ก็ยังไม่ต้องคลิ๊กเข้าไป “เพิ่ม”
จึงแนะนำให้ไปฝึกใช้ Storage กันก่อน
เพราะส่งแฟ้มเข้าไปแล้ว
สามารถแชร์เว็บเพจออกมาได้เลย
แต่เป็น .htm หรือแฟ้มมัลติมีเดียร์ที่ไม่ลิงค์กันนะครับ

04 node.js
04 node.js

4. คลิ๊ก “hosting” เพื่อการสร้างเว็บโฮสติ้งเผยแพร่เรื่องราว
คลิ๊ก “เริ่มต้น”
จะพบคำแนะนำให้ใช้ $ npm install -g firebase-tools
จะทำได้ต้องติดตั้ง Node.js ในเครื่องก่อน
โดยเข้า https://nodejs.org/en
download รุ่น V6.9.1 LTS เมื่อ 19 พ.ย.59
ได้แฟ้ม node-v6.9.1-x86.msi ขนาด 10.9 MB
จากนั้นก็คลิ๊กติดตั้งให้เรียบร้อย เพื่อใช้ Node.js

5. รายละเอียดอีกเยอะ
อ่านเพิ่มเติมที่ http://www.thaiall.com/blog/burin/7733/
ผลการใช้งาน ได้เว็บนางสาวแกรด์ 76 จังหวัด
ที่ https://missgrand2016th.firebaseapp.com

การใช้บริการ hosting บน firebase.com เบื้องต้น

หน้าแรกของ firebase
หน้าแรกของ firebase

เค้าว่า Firebase ดีอย่างนู้น อย่างนั้น อย่างนี้ ต้องลองจะได้เห็นกับตา
ก็อ่านมาแล้วว่าดีอย่างไร แต่สิบปากว่าไม่เท่าตาเห็น สิบตาเห็นไม่เท่าลงมือคลำ
1. เริ่มต้นกับการเข้าเว็บไซต์ firebase.com
2. คลิ๊กปุ่ม See our new website เพราะเค้าบอกว่าเค้าปรับไซต์ใหม่
3. คลิ๊กปุ่ม GET STARTED FOR FREE
4. พบหน้า Sign in ของ account.google.com แสดงว่า firebase เชื่อมกับ google
เหมือนกับเว็บไซต์มากมายที่เชื่อมกับ facebook เช่น chilindo.com เป็นต้น
ถ้าระแวงไม่กล้าใช้อีเมลของ gmail.com ก็แนะนำให้สมัครใหม่เลยครับ
แต่ผมว่าไม่มีอะไรนะครับ เพราะ url ด้านบนก็ชัดเจนว่าเชื่อมต่อกันถูกต้อง
5. เข้าหน้า Welcome to Firebase คลิ๊ก CREATE NEW PROJECT
Project name = “missgrand2016th”
Country/region = “Thailand”
แล้วคลิ๊ก CREATE PROJECT

https://missgrand2016th.firebaseapp.com
https://missgrand2016th.firebaseapp.com

6. คลิ๊ก GET STARTED ในหัวข้อ Hosting เพราะผมสนใจหัวข้อนี้
7. เค้าอธิบายว่า Deploy web and mobile web apps in seconds using a secure global content delivery network
แล้วมีปุ่มให้คลิ๊ก GET STARTD เพื่อยืนยันว่าเราเข้าไม่ผิดที่
เพราะตั้งใจ ปรับใช้ (deploy) ทั้ง web และ mobile web apps จริง ๆ
8. พบหน้า Set up hosting มี 2 ขั้นตอน คือ 1. Install และ 2. Deploy
เว็บแสดงคำว่า “$ npm install -g firebase-tools” ให้ดู
คลิ๊ก Continue
9. แล้วแสดงคำว่า
Sign in to Google: “$ firebase login”
Initiate your project: “$ firebase init”
Deploy your website: “$ firebase deploy”
คลิ๊ก FINISH
10. หน้า DASHBOARD แสดงคำว่า
https://missgrand2016th.firebaseapp.com
คลิ๊ก CONNECT CUSTOM DOMAIN
11. พบหน้า Connect custom domain มี 3 ขั้นตอน คือ 1. Add domain 2. Verify ownership 3. Go live
ไม่ต้องเข้าไปนะครับ ถ้ายังไม่มี domain name ที่จะเข้าไปเชื่อม
12. ไป download โปรแกรม Node.js
จาก https://nodejs.org/en/ แล้วติดตั้ง
ผมได้มารุ่น 4.4.7 สกุล .msi ขนาด 9.60 MB
แล้วอ่านคำแนะนำจาก http://www.artit-k.com/firebase-hosting/
เขียนโดย http://www.artit-k.com/author/Ethan/
13. บน Win8 ทำการ Search หา “Node.js command prompt” แล้วก็ run as administrator
จะพบหน้าต่างที่มี C:\Windows\system32>
14. พิมพ์คำสั่ง C:\Windows\system32>npm install -g firebase-tools ในหน้าต่าง Command prompt
มีรายงานออกมา 1 หน้า เป็นรายการ module ที่ติดตั้งไปทั้งหมด
15. พิมพ์คำสั่ง firebase login แล้วตามด้วย Y + Allow access
แล้ว sign in ผ่านระบบ account.google.com
พบหน้า Firebase CLI ต้องการ ก็ให้คลิ๊ก อนุญาต
จะพบหน้า Firebase login succeeded
มีคำว่า You’re now signed in to the Firebase CLI.
You may immediately close this window and continue using Firebase from the terminal.
ปิด browser แล้วกลับเข้า Command prompt
16. พิมพ์คำสั่ง d: แล้ว cd /firebase ซึ่งเป็นห้องที่สร้างไว้แล้วสำหรับงานนี้
แล้วพิมพ์คำสั่ง firebase init แล้วตามด้วย Y
แล้วกดปุ่ม enter ยืนยันบริการ database กับ hosting ที่เลือกไว้
แล้วกดลูกศรลง เลือก “missgrand2016th” แล้วกด enter
แล้วถาม database.rules.json ก็กด enter
แล้วถาม public directory ก็กด enter
แล้วถาม index.html ก็กด y
17. พบว่าใน d:\firebase มี 3 แฟ้ม
คือ .firebaserc , database.ruels.json และ firebase.json
แล้วใน d:\firebase\public พบ index.html
18. ลองเปิด https://missgrand2016th.firebaseapp.com
ยังพบคำว่า site not found เหมือนก่อนเข้า Node.js
19. พิมพ์คำสั่ง firebase deploy ซึ่งเป็นการอัพโหลดแฟ้มทั้งหมดไปยัง firebaseapp.com
ผลคือ Deploy complete ก็จะพบกับหน้าเว็บ

firebase in command promptfirebase in command prompt
20. หลังปรับปรุงแฟ้ม index.html และเพิ่มภาพเข้าไป 228 แฟ้ม
แล้วสั่ง firebase deploy ใหม่ ก็พบว่า Deploy complete อีกครั้ง
การสั่ง deploy แต่ละครั้งจะ upload แฟ้มทั้งหมดใหม่
เป็นการ deploy ใหม่หมด ไม่ได้ทำเฉพาะแฟ้มที่มีการ update

หน้าแรกของโฮมเพจที่ deploy แล้วหน้าแรกของโฮมเพจที่ deploy แล้ว
21. ถ้าลบ 227 ภาพในห้อง public เหลือแต่ index.html แล้วสั่ง firebase deploy ใหม่
ก็จะ upload และ update เฉพาะแฟ้ม index.html นั้น
ทำให้แฟ้มอื่นใน firebaseapp.com หายไปหมด เพราะถือเป็นการ upload ยกเซต

สถิติการ deployสถิติการ deploy
22. เวลาในการอัพโหลดผ่าน firebase deploy สำหรับ 228 แฟ้ม รวมขนาด 18 MB
ผ่าน ADSL ใช้เวลาประมาณ 2 นาทีครึ่ง นานขณะที่ preparing public directory
23. ต้องการใช้บริการควบคุม firebase ผ่าน browser
ก็พิมพ์คำสั่ง firebase open
24. การแสดงผลภาษาไทย แก้ไขผ่าน meta charset ไม่ได้
ต้องใช้ editor ทำการ save as .html เป็น utf8 แล้วการกำหนด charset จึงจะมีผล