มาสร้างบล็อกโปรแกรมแบบลาก-วาง ไว้ใช้กับบอร์ด Arduino ของเรากันดีกว่า

สารบัญบทความ คลิกที่นี่เพื่ออ่านบทความอื่นๆ

Google Blockly

บล็อกโปรแกรมแบบลาก-วาง คือ Editor ที่ใช้สำหรับเขียนโปรแกรมโดยใช้หลักการต่อบล๊อคคำสั่งที่ต้องลาก-วางคำสั่งเป็นลำดับต่อกันไปคล้ายตัวต่อเลโก้ เรียกอีกอย่างว่าเป็นโปรแกรมเสมือน ซึ่งพัฒนาจากการเขียนโปรแกรมแบบพิมพ์ มีจุดเด่นด้านการใช้กราฟฟิกช่วยให้ง่ายต่อการเรียนรู้และเข้าใจ ตัวโปรแกรมเป็น web-based คือสามารถใช้งานผ่านเว็บเบราเซอร์ การใช้งานง่ายมากคือผู้ใช้สามารถลากบล๊อคมาต่อกันเป็นชุดคำสั่งเพื่อสร้างเป็นแอพพลิเคชั่น ไม่ต้องใช้ทักษะด้านการพิมพ์และไม่ต้องเรียนรู้ syntax ให้ยุ่งยาก

อ้างอิงจาก: https://developers.google.com/blockly/

        การเขียนโปรแกรมหลายๆ คนอาจจะมองว่าเป็นเรื่องยาก เลยไม่ค่อยมีใครให้ความสนใจ แต่เดี๋ยวนี้เราจะเห็นได้ว่าเทคโนโลยีเริ่มมีการพัฒนามากขึ้น อย่างทาง Google ได้พัฒนา Blockly ซึ่งเป็นเครื่องมือพัฒนาโปรแกรมแบบวิชวล (Visual) โดยใช้สัญลักษณ์ภาพแบบจิ๊กซอล แทนคำสั่งมาเรียงต่อกันตามเงื่อนไขที่ต้องการ พัฒนาโดย google for education แล้วเปิดให้ทดลองใช้ (Try Blockly) บนเว็บของกูเกิ้ล คลิกที่นี่เพื่อทดลองใช้งาน 

            

       

อ้างอิงจาก: https://developers.google.com/blockly/

         Blockly สามารถ Generate โค้ดออกมาได้หลายภาษา ตัวอย่างเช่น JavaScript, Python, PHP, Lua, Dart และอื่นๆ
         สำหรับนักพัฒนาสามารถปรับแต่ง Blockly ให้เหมาะกับความต้องการได้ โดยการเพิ่มบล็อคที่กำหนดเองสำหรับ API  หรือลบบล็อกและฟังก์ชันที่ไม่จำเป็นออกไปได้ สามารถเข้าไปดูข้อมูลเพิ่มเติมได้ที่ลิงค์

         https://developers.google.com/blockly/guides/overview
         https://developers.google.com/blockly/reference/overview

Ardublockly

        
         เป็นโปรแกรมที่นักพัฒนาได้นำเอา Blockly ของ Google มาต่อยอดทำเป็น IDE เพื่อใช้งานกับบอร์ด Arduino คลิกที่นี่เพื่อทดลองใช้งาน 

ข้อดีของ Ardublockly
        ลดความยุ่งยากของคนที่เขียนโปรแกรมให้ทำได้อย่างง่ายดาย แถมยังมีซอร์สโค้ดภาษาซีให้ดูด้วย ทำให้คนที่ไม่ถนัดบล็อคแต่ถนัดเขียนโปรแกรมอ่านเข้าใจง่ายด้วย เหมาะสำหรับผู้เริ่มต้น ทำความคุ้นเคยกับเงื่อนไขต่าง ๆ เมื่อชำนาญแล้ว ก็โดดเข้าสู่การเขียนโปรแกรมด้วยภาษาซีต่อไป... (Jatuchai Dowan)

อ้างอิงจาก: https://ardublockly.embeddedlog.com/index.html

การติดตั้ง Ardublockly เพื่อใช้งานในเครื่องคอมพิวเตอร์ทำตามขั้นตอนด้านล่าง 
ข้อมูลเพิ่มเติม https://ardublockly.embeddedlog.com/index.html

ติดตั้ง Arduino IDE 

Ardublockly ต้องการ Arduino IDE เวอร์ชัน 1.6 หรือสูงกว่า สามารถดาวน์โหลดได้จากหน้าดาวน์โหลด arduino.cc 

ดาวน์โหลด Ardublockly

วิธีที่ง่ายที่สุดในการใช้ Ardublockly คือดาวน์โหลดเวอร์ชันที่บรรจุเป็นแอพพลิเคชัน

Linux (64 bit only)
Windows 7 or higher (32/64 bits)
macOS 10.10 or higher


ลิ้งค์ดาวน์โหลด
ลิ้งค์ดาวน์โหลด
ลิ้งค์ดาวน์โหลด

เรียกใช้ Ardublockly

ในการรันแอ็พพลิเคชั่นขั้นตอนต่างๆ จะแตกต่างกันเล็กน้อยขึ้นอยู่กับแพลตฟอร์ม 
Windows : ดับเบิลคลิกที่ ardublockly_run.batไฟล์ที่อยู่ในโฟลเดอร์ Ardublockly
Linux : เรียกใช้ardublockly_run.shสคริปต์เชลล์ที่อยู่ในโฟลเดอร์ Ardublockly
OS X : คลิกขวาที่ไฟล์และคลิกArdublockly.appopen

เมื่อรันแอ็พพลิเคชั่นสำเร็จจะพบกับหน้าต่างโปรแกรม

กำหนดค่า Ardublockly เพื่อหา IDE Arduino 

ในหน้าโปรแกรม Ardublockly คลิกที่เมนู Edit จากนั้นเลือก Preferences จะมีหน้าต่างการตั้งค่าแสดงขึ้นมา ให้กำหนดค่าดังนี้

1. Compiler location : ให้เลือกไฟล์ arduino_debug.exe ซึ่งปกติแล้วจะอยู่ใน C:\Program Files (x86)\Arduino\arduino_debug.exe
2. จากนั้นกำหนดรุ่นของบอร์ด Arduino ที่ใช้งาน และ เลือก COMPORT ให้ถูกต้อง

หลังจากกำหนดค่าต่างๆ เสร็จเรียบร้อย ลองเปิดโปรแกรมตัวอย่างเพื่อสั่งงานให้ไฟแอลอีดีกระพริบ โดยเข้าไปที่ Example จากนั้นเลือด Blinky และลองอัพโหลดไปที่บอร์ด Arduino กรณีที่ไม่มีปัญหาอะไรเกิดขึ้นหลังจากอัพโหลดเสร็จไฟแอลอีดีบนบอร์ด Arduino ก็จะกระพริบเป็นจังหวะติดดับสลับกัน

คู่มือสำหรับนักพัฒนา

สำหรับนักพัฒนาสามารถปรับแต่ง Ardublockly ให้เหมาะกับความต้องการได้ โดยการเพิ่มบล็อคที่กำหนดเองสำหรับ API  หรือลบบล็อกและฟังก์ชันที่ไม่จำเป็นออกไปได้ ซึ่งในขั้นตอนการพัฒนาจำเป็นต้องติดตั้ง 

- Node JS เวอร์ชั่นล่าสุด สามารถดาวน์โหลดได้จาก https://nodejs.org/en/
- Git เพื่อใช้ในการดาวโหลด Source Code สามารถดาวน์โหลดได้จาก https://git-scm.com/
- Python เวอร์ชั่น 2.7
- Python เวอร์ชั่น 3.4 หรือ เวอร์ชั่นที่ใหม่กว่า

Building Ardublockly 

โฟลเดอร์แพคเกจประกอบด้วยโครงการ Electron และสคริปต์ Python ที่จำเป็นในการจัดแพคเกจ Ardublockly ให้เป็นแบบ stand-alone executable

แอพพลิเคชันสามารถแบ่งได้เป็น 3 ส่วนหลัก ๆ ดังนี้ 
- Python server 
- หน้า HTML / Javascript 
- Desktop Application (Electron) 

Python server  จะบรรจุลงในระบบปฏิบัติการแบบสแตนด์อะโลนของตัวเองโดยใช้ PyInstaller

ในการ Build ไฟล์ Ardublockly ต้องติดตั้งแพกเกจที่จำเป็นดังนี้
mkdocs>=0.15.3
pyinstaller>=3.2.1

ใช้ python version 3 สำหรับขั้นตอนนี้
Update pip
# python -m pip install --upgrade pip

Install PyInstaller
# pip install pyinstaller

Install MkDocs
# pip install MkDocs

ดาวน์โหลด Source Code

git clone https://github.com/carlosperate/ardublockly.git
cd ardublockly
git submodule update --init --recursive

ตรวจสอบให้แน่ใจว่ามี 'closure-library' ในไดเร็กทอรีของโครงการ และ 'ardublockly.wiki' ในโฟลเดอร์ 'package / ardublocklydocs /'

สร้างคำสั่ง

First step: Blockly
Blockly จะรวบรวมทุกรหัสที่มาที่มีอยู่ใน blockly โฟลเดอร์ที่ถูกบีบอัดใน blockly/blockly_compressed.js, blockly/blocks_compressed.jsและ blockly/arduino_compressed.js

ใช้ Python 2.7 สำหรับขั้นตอนนี้เนื่องจากสคริปต์ Blockly build ไม่สามารถทำงานร่วมกับ Python 3 ได้ในขณะนี้ ในขั้นตอนนี้ต้องเชื่อมต่ออินเตอร์เน็ตเพื่อเรียกใช้งาน "Closure Compiler Service" ของ Google จากไดเร็กทอรีหลักของโครงการ:

# cd blockly
# python build.py

กลับไดเร็กทอรีหลักของโครงการ
# cd ../

Second step: Python server
สร้างแอ็พพลิเคชัน Python โดยเรียกใช้ build_pyinstaller.py
ให้ใช้ Python 3 แทน Python 2 สำหรับขั้นตอนนี้:

# python package/build_pyinstaller.py

การดำเนินการนี้จะลบไดเร็กทอรี build ก่อนหน้าสร้างและสร้างสคริปต์การเริ่มต้นที่จำเป็น ลงในไดเร็กทอรีหลักของโครงการ(ardublockly_run.sh บน Linux หรือ ardublockly_run.bat บน Windows)

Third step: Electron
ดำเนินการคำสั่งต่อไปนี้จากไดเร็กทอรีหลักของโครงการ:

cd package\electron
npm install
npm run release

สคริปต์ NPM จะตรวจจับและจัดการกับข้อกำหนดของระบบปฏิบัติการที่แตกต่างกันโดยอัตโนมัติ
เมื่อต้องการดำเนินการขั้นตอนถัดไปขอแนะนำให้กลับไปที่ไดเรกทอรีหลักของโครงการ:

# cd ../../

Fourth step: Documentation
สร้างเอกสารออฟไลน์โดยเรียกใช้ build_docs.py สคริปต์จากไดเร็กทอรีรากของโครงการ (Python 3 recommended):

# python package/build_docs.py

เมื่อสร้างเอกสารเสร็จแล้วจะแสดงข้อความ Build process finished!

*** การดำเนินการนี้จะลบไดเร็กทอรี build ก่อนหน้า และลบ temporary files

Final Step: Packing all Ardublockly
แพ็ค Ardublockly เรียกใช้คำสั่งต่อไปนี้จากไดเร็กทอรีหลักของโครงการ:

# python package/pack_ardublockly.py

ใช้รุ่นที่ไม่มีการบีบอัดของ Blockly(Running Uncompressed Ardublockly)

ในระหว่างการพัฒนาสามารถเปลี่ยนแปลงไฟล์ต้นฉบับและสร้างใหม่ได้ แต่โค้ดจะมีความซับซ้อนและยากที่จะแก้ปัญหา ด้วยเหตุนี้จึงขอแนะนำให้ใช้รุ่นที่ไม่มีการบีบอัดของ Blockly ใน Ardublockly.

*** ตรวจสอบให้แน่ใจว่าในโฟล์เดอร์ closure-library มีโฟล์เดอร์ซอร์สโค้ดย่อยบรรจุอยู่ข้างใน

เรียกใช้ไฟล์ที่ไม่มีการบีบอัดของ Blockly (uncompressed version) ต้องเข้าไปแก้ไขข้อมูลในไฟล์ /ardublockly/index.html

Comment script :

    <script src="../blockly/blockly_compressed.js"></script>
    <script src="../blockly/blocks_compressed.js"></script>
    <script src="../blockly/arduino_compressed.js"></script>

    Note: บรรทัดที่ 2-4

Uncomment script :

    ข้างล่างบรรทัด
    <!-- To use the uncompressed version comment out the above and comment in the ones below -->
    ทั้งหมด

สร้างบล็อก (Create Blocks)

กระบวนการนี้แบ่งออกเป็นสามขั้นตอน:

Define the block: รวมรูปร่าง block และการเชื่อมต่อฟิลด์ ฯลฯ
Create code generator: เพื่อสร้างโค้ด Arduino สำหรับบล็อกใหม่
Block inclusion: เพิ่มบล็อกลงในกล่องเครื่องมือ Ardublockly 

Block Definition:
บล็อกถูกกำหนดไว้ใน JavaScript ไฟล์ สามารถดูข้อมูลของบล็อกปัจจุบันในไดเร็กทอรี blockly/blocks/arduino การกำหนด custom-blocks สามารถดูข้อมูลเพิ่มเติมได้ที่
https://developers.google.com/blockly/guides/create-custom-blocks/blockly-developer-tools

สร้าง Block โดยใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Blockly
https://blockly-demo.appspot.com/static/demos/blockfactory/index.html

ข้อมูลเพิ่มเติม
https://developers.google.com/blockly/guides/create-custom-blocks/blockly-developer-tools

Create code generator:
กำหนดรหัส generators ของ Arduino ใน JavaScript ไฟล์ สามารถดูข้อมูลของบล็อกปัจจุบันในไดเร็กทอรี blockly/generators/arduino

ข้อมูลเพิ่มเติม
https://developers.google.com/blockly/guides/create-custom-blocks/overview
https://developers.google.com/blockly/guides/create-custom-blocks/generating-code
https://github.com/carlosperate/ardublockly/wiki/Create-Blocks-~-Extending-Ardublockly

Block inclusion:
       ในระหว่างการพัฒนาแนะนำให้ใช้งาน Blockly uncompressed รวมบล็อกในกล่องเครื่องมือรวมถึงโค้ด XML ลงในไฟล์ ardublockly/ardublockly_toolbox.js

ตัวอย่างการเพิ่มบล็อกที่อ่านค่าจาก Ultrasonic Sensor
        หลังจากที่ Create Blocks เสร็จสามารถทำตามขั้นตอน Build Instructions เพื่อ Build ไฟล์

ไดเรกทอรี่ที่ใช้ในการกำหนดค่าบล็อก

แก้ไขรูปร่างบล็อก
~\ardublockly\blockly\blocks

แก้ไขตัว gen โค้ด
~\ardublockly\blockly\generators

แก้ไขข้อความในบล็อก
~\ardublockly\blockly\msg\js\en.js

แก้ไข Toolbox
~\ardublockly\ardublockly\ardublockly_toolbox.js

ปรับแต่งหน้าโปรแกรม
~\ardublockly\ardublockly\ardublockly.css

        บทความนี้เขียนขึ้นมาโดยใช้ความรู้ความเข้าใจของผู้เขียน ที่เคยทำการศึกษาและทดลองใช้งานมา หากมีข้อผิดพลาดประการไดสามารถเสนอแนะมาได้เลยนะครับ


สารบัญบทความ คลิกที่นี่เพื่ออ่านบทความอื่นๆ
ลิงค์ไปที่หน้าหลักรักการเขียนโค้ด คลิกที่นี่

แหล่งอ้างอิง

https://ardublockly.embeddedlog.com/index.html

https://developers.google.com/blockly

บทความโดย รักการเขียนโค้ดดอทคอม lovecoding.com

สอบถามข้อมูลเพิ่มเติม
Facebook: รักการเขียนโค้ด ดอทคอม 

Tell: 091-47827899