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


Google Blockly


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


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

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


            à¸œà¸¥à¸à¸²à¸£à¸„้นหารูปภาพสำหรับ 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)

Ardublockly desktop program screenshot
อ้างอิงจาก: 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
Linux Build StatusWindows Build statusMac Build Status
ลิ้งค์ดาวน์โหลดลิ้งค์ดาวน์โหลดลิ้งค์ดาวน์โหลด

เรียกใช้ 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

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

ความคิดเห็น

  1. มือใหม่หัดขับครับ

    ตอบลบ
    คำตอบ
    1. มีคำถามหรือข้อสงสัย สามารถสอบถามมาได้เลยนะครับ

      ลบ
  2. อยากทราบว่าถ้าเราสร้าง Block ที่เราต้องการได้แล้ว แล้วเราอยากจะนำ Block ไปใช้กับโปรแกรมอื่นๆ ได้หรือเปล่าค่ะ แล้วทำยังไงค่ะ พอดีพึ่งหัดค่ะ เลยไม่เข้าใจเท่าไร ขอบคุณค่ะ

    ตอบลบ
    คำตอบ
    1. จากบทความที่เขียนแบ่งเป็น 2 ส่วนครับ
      1.Google blockly
      https://developers.google.com/blockly/
      สามารถที่สร้างบล็อกคำสั่งเพื่อที่จะทำโปรแกรมอื่นๆ ได้ครับ ตัวอย่างเช่น https://scratch.mit.edu/ ใช้เพื่อควบคุมและสั่งงานตัวละครในเกม

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

      ลบ
    2. create block แล้วทำไรต่อครับ จะเอาส่วนของ arduino code ไปไว้ตรงไหนอะไรยังไง อธิบายหน่อยครับ

      ลบ
  3. Build Instructions ทำอย่างไรครับ ไม่เห็นีอธิบายในส่วนนี้

    ตอบลบ
    คำตอบ
    1. ขั้นตอน Build Instructions สามารถทำตามขั้นตอนการสร้างคำสั่ง
      First step: Blockly
      Second step: Python server
      Third step: Electron
      Fourth step: Documentation
      Final Step: Packing all Ardublockly

      ลบ

แสดงความคิดเห็น

โพสต์ยอดนิยมจากบล็อกนี้

ทำ Web server เพื่อรับข้อมูลจาก Sensor และควบคุมอุปกรณ์ต่างๆ ตอนที่ 2 ส่งข้อมูลจากบอร์ด NodeMCU ขึ้น Web Server

การควบคุมมอเตอร์ Brushless ด้วย Arduino

เรียนรู้การออกแบบวงจรอิเล็กทรอนิกส์พื้นฐาน และใช้งานบอร์ด Arduino ตอนที่ 1 ทำความรู้จักกับโปรแกรม Tinkercad Circuits