เชื่อมต่อ Web Application ผ่าน Websocket กับ MQTT Broker ด้วย Paho MQTT

• เพิ่ม Script ใน tag <header> จาก CDNJS

<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.1.0/paho-mqtt.min.js"></script>

• สร้าง Client Instance ของ Paho MQTT ด้วยคำสั่ง

let client = new Paho.Client("<broker-url>", Number(<port>), "<client-id>");

• สร้างฟังก์ชั่น onConnect ทำการเชื่อมต่อและ subscribe ไปยัง topic ด้วยคำสั่ง

                       const onConnect = () => {

                               console.log("Connected");

                               console.log("Subscribing to topic: <topic-name>");

                               client.subscribe("<topic-name>");

                       }

• สร้างฟังก์ชั่น onConnectionLost เพื่อแสดงสถานะหากถูกตัดการเชื่อมต่อ

                       const onConnectionLost = responseObject => {

                              if(responseObject !== 0){

                                      console.log("ConnectionLost:"+responseObject.errorMessage);

                              }

                       }

• สร้างฟังก์ชั่น onMessageArrived เพื่อแสดงข้อความที่ได้รับ

                        const onMessageArrived = message => {

                                console.log("MessageArrived: " + message.payloadString);

                               }

                        }

• เรียกใช้ฟังก์ชัน connect, onConnect, onConnectionLost และ onMessageArrived

                        client.connect({

                                onSuccess: onConnect

                        }

                        client.onConnectionLost = onConnectionLost;

                        client.onMessageArrived = onMessageArrived;

• แหล่งอ้างอิง https://www.youtube.com/watch?v=rlnhd67PV-M

Git Command

• เริ่มต้นสร้าง Git repository หรือสร้างโฟลเดอร์ .git (hidden folder) ด้วยคำสั่ง
git init

• เพิ่มไฟล์เข้าไปใน staging area ด้วยคำสั่ง

git add <file name> หรือ git add . เพื่อ add ไฟล์ทั้งหมด

• Commit ไฟล์ไปยัง local repository ด้วยคำสั่ง

git commit -m "<commit-message>"

• ตรวจสอบสถานะของไฟล์ด้วยคำสั่ง

git status

• ตรวจสอบ remote repository ด้วยคำสั่ง

git remote -v

• Add remote repository ด้วยคำสั่ง

git remote add <remote-name> <remote-url>

• เปลี่ยน remote url ด้วยคำสั่ง

git remote set-url <remote-name> <new-remote-url>

• ลบ remote repository ด้วยคำสั่ง

git remote rm <remote-name>

• ตรวจสอบ branch ปัจจุบันด้วยคำสั่ง

git branch

• ตรวจสอบ branch ทั้งหมดด้วยคำสั่ง

git branch -a

• เปลี่ยนชื่อ branch ปัจจุบันด้วยคำสั่ง

git branch -M <new-branch-name>

• สร้าง branch ใหม่ด้วยคำสั่ง

git branch <new-branch-name>

• เปลี่ยน branch ปัจจุบันด้วยคำสั่ง

git checkout <branch-name>

• ลบ local branch ด้วยคำสั่ง

git branch -d <branch-name>

• ลบ remote branch ด้วยคำสั่ง

git push <remote-name> --delete <branch-name>

• Push local repository ไปยัง remote repository ด้วยคำสั่ง

git push -u <remote-name> <branch-name>

• Clone remote repository ไปยัง local repository ด้วยคำสั่ง

git clone <remote-url>

• ดึงการอัพเดทล่าสุดจาก remote repository ด้วยคำสั่ง 

git pull

• Clone remote repository ของ user อื่นไปยัง remote repository ของตัวเองด้วยคำสั่ง

git fork

• ส่ง Pull request ไปยัง remote reposity ของ user ต้นทางที่ clone มา เพื่อขอให้ตรวจสอบและทำการ merge pull request ด้วยคำสั่ง

Pull request

• Merge local repository ปัจจุบันกับ local branch ด้วยคำสั่ง

git merge <branch-name>

Deploy React App บน GitHub Page

 

• ติดตั้ง gh-pages npm package ด้วยคำสั่ง

npm install gh-pages

• เพิ่ม homepage property ในไฟล์ package.json

"homepage": "https://<username>.github.io/<repository-name>"

• เพิ่ม predeploy และ deploy ใน script ของไฟล์ package.json

"predeploy": "npm run build",

"deploy": "gh-pages -d build"

• Add remote repository ด้วยคำสั่ง

git remote add origin https://github.com/<username>/<repository-name>.git

• Push React app ด้วยคำสั่ง

npm run deploy

หรือ

npm run deploy -- -m "<commit-message>"

npm จะทำการ build ไฟล์เก็บไว้ในโฟลเดอร์ build

แล้ว deploy ขึ้นไปที่ gh-pages branch

• หากต้องการเก็บ React app source code ไว้บน GitHub สามารถใช้คำสั่ง

git add .

git commit -m "<commit-message>"

git push origin main

React app source code จะถูกเก็บใน main branch

build file จะถูกเก็บใน gh-pages branch

• แหล่งอ้างอิง https://github.com/gitname/react-gh-pages

Docker Command

docker --version ตรวจสอบการติดตั้ง Docker + ตรวจสอบ version

docker ps ตรวจสอบ Container ที่ run อยู่ ps (process)

docker ps -a ตรวจสอบ Container ทั้งหมด -a (all)

docker run -it --name <container name> -p <user port:container port> <image name:tag>

Run container จาก image -it (interactive) และ -p (port) โดยเป็นการ expose user post กับ container port ถ้าเปลี่ยนจาก -it เป็น -d (daemon) จะเป็น background running

docker stop <container name> หยุดการ run container ตามชื่อ container

docker start <container name> เริ่มการ run container ตามชื่อ container

docker exec -it <container name> bash ทำการ SSH เข้าไปใน container ตามชื่อ container

exit ออกจาก SSH

docker rm <container name> ลบ container ตามชื่อ container โดยต้อง stop container ก่อน

docker rm -f <container name> ลบ container ตามชื่อ container แบบบังคับลบ -f (force)

docker images ตรวจสอบ image ทั้งหมดที่มีอยู่

docker pull <image name:tag> ดึง image มาจาก Docker hub

docker build -t <image name> <destination> สร้าง image จาก Dockerfile -t (tag)

docker rmi <image name> ลบ image ตามชื่อ image

docker login ล็อกอินเข้า Docker hub

docker tag <image name> <username>/<docker hub image name:tag>

เปลี่ยนชื่อ image เพื่อเตรียม push ขึ้น Docker hub

docker push <username>/<docker hub image name:tag> ทำการ push image ขึ้น Docker hub 

docker commit <container name> <image name:tag>

ทำการ commit image ด้วยสถานะ container ปัจจุบัน

docker save <image name:tag> <filename>.tar ทำการ backup image เป็นไฟล์ .tar

docker load -i <filename>.tar ทำการ load image จากไฟล์ .tar

การเขียน Dockerfile

FROM <image name:tag> กำหนด image ที่จะใช้

WORKDIR <directory> กำหนด working directory ที่ต้องการทำงาน

COPY <file> <destination> ทำการ copy file จำเป็นต้องใช้ไปยัง directory ที่ต้องการ

RUN <run command> กำหนดคำสั่งที่ต้องการ run ขณะ build image

CMD ["<command>", "<file>"] กำหนดคำสั่งที่ต้องการ run อยู่ใน container

.dockerignore ระบุชื่อ file หรือ folder ที่ไม่ต้องการให้ copy ในการ build image เช่น node_modules

ขั้นตอนการประกอบติดตั้ง KAT Walk C2

 

เปลี่ยนสีและ Weight ของ Text ใน Arduino IDE ผ่าน Theme

ไฟล์ theme.txt จะอยู่ใน C:/Program Files (x86)/Arduino/lib/theme ซึ่งจะต้องใช้สิทธิ์ Administrator ในการแก้ไขไฟล์ แต่เราสามารถ Copy ไฟล์ theme.txt แล้วเปลี่ยนชื่อไฟล์ theme.txt เดิมเป็นชื่ออื่น เช่น default-theme.txt จากนั้น้ราก็แก้ไขไฟล์ theme.txt ได้โดยไม่จำเป็นต้องใช้สิทธิ์ Administrator

ส่วนที่ 1 Keywords

# TEXT - KEYWORDS

# FUNCTIONS

editor.keyword1.style = #E06C75,bold

editor.data_type.style = #E06C75,bold          บรรทัดนี้คือคำสั่ง Serial, WiFi, etc. 

                                                                       ซึ่งเป็น Built-in library

# METHODS

editor.keyword2.style = #E06C75,plain

editor.function.style = #61AFEF,plain             บรรทัดนี้คือคำสั่ง begin, init, print, 

                                                                        println, delay, millis, pinMode, 

                                                                        digitalWrite, etc.

# STRUCTURES

editor.keyword3.style = #C678DD,plain

editor.reserved_word.style = #C678DD,plain บรรทัดนี้คือคำสั่ง setup, loop, 

                                                                                while, if, else, return, etc.

ส่วนที่ 2 Literals

# TEXT - LITERALS

# constants & datatypes

editor.literal1.style = #61AFEF,plain                    

# p5 built in variables: e.g. mouseX, width, pixels

editor.literal2.style = #61AFEF,plain

editor.variable.style = #61AFEF,plain

editor.reserved_word_2.style = #61AFEF,plain        บรรทัดนี้คือคำสั่ง const, 

                                                                                  unsigned, int, long, void, 

                                                                                  float, string, HIGH, LOW, 

                                                                                  OUTPUT, etc.

editor.literal_boolean.style = #61AFEF,plain           บรรทัดนี้คือ boolean variable

editor.literal_char.style = #61AFEF,plain   บรรทัดนี้คือ char varible

บรรทัดนี้คือ string variable

editor.literal_string_double_quote.style = #61AFEF,plain    

บรรทัดนี้คือคำสั่ง #inclide, define, etc.

editor.preprocessor.style = #98C379,plain

หลังจากแก้ไขเสร็จแล้วให้ Save ไฟล์ theme.txt แล้วเปิด Arduino IDE ขึ้นมาใหม่ ก็จะพบว่าสีหรือ Weight ของ Text ใน Editor มีการเปลี่ยนแปลง

ทดสอบความเร็วในการอ่าน/เขียน Storage รูปแบบต่างๆ ด้วยซอฟต์แวร์ CrystalDiskMark 8

ผลการทดสอบมีดังต่อไปนี้

1) Sandisk USB flash drive ขนาด 64 GB (exFAT)

2) Sandisk USB flash drive ขนาด 64 GB (NTFS)

3) Sandisk USB flash drive ขนาด 32 GB (FAT32)

4) Kingston SD card 8 GB (FAT32)

5) WD SATA SSD 2 TB (NTFS)

6) Toshiba M.2 SSD 512 GB (NTFS)

Link สำหรับดาวน์โหลดซอฟต์แวร์ : https://crystalmark.info/en/software/crystaldiskmark/

Link วิดีโอสอนการใช้งานซอฟต์แวร์ :