ข้อมูลเบื้องต้นเกี่ยวกับแอปพลิเคชัน Blockly

แอปพลิเคชัน Blockly คือเว็บแอปพลิเคชันที่มีโปรแกรมแก้ไข Blockly (พื้นที่ทํางาน) เอกสารนี้จะแสดงตัวอย่างการใช้งานแอปพลิเคชัน Blockly และดูฟีเจอร์ UI ทั่วไป

หากยังไม่ได้อ่าน โปรดอ่านอภิธานศัพท์ ภาพและขั้นตอนการสมัครขั้นพื้นฐานก่อนดำเนินการต่อในเอกสารนี้

แอปพลิเคชัน Blockly ทำอะไรได้บ้าง

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

ตัวอย่างโปรแกรมประเภทต่างๆ ที่ผู้ใช้เขียนด้วยแอปพลิเคชัน Blockly มีดังนี้

  • เฉลยปริศนา ภาพเคลื่อนไหว หรือเพลง: โค้ดที่สร้างขึ้นจะเฉลยปริศนา (เช่น เขาวงกต) แสดงภาพเคลื่อนไหว หรือเล่นเพลง ดูตัวอย่างได้ที่Music Lab ของ Code.org

  • วิดีโอเกม: รหัสที่สร้างจะเรียกใช้วิดีโอเกม เช่น สร้าง ด่าน 2 ด่านแรกของเกม "Whack the Mole" ใน MakeCode Arcade แล้วดาวน์โหลดเกมลงในคอนโทรลเลอร์ หรือเล่นในโปรแกรมจำลอง

  • หุ่นยนต์: โค้ดที่สร้างขึ้นจะสั่งการหุ่นยนต์ เช่น โปรแกรมหุ่นยนต์ด้วย Ozoblockly แล้วดาวน์โหลดลงในหุ่นยนต์จริงหรือเรียกใช้ในโปรแกรมจำลอง

  • การวาด: โค้ดที่สร้างขึ้นจะวาดภาพ 2 มิติหรือ 3 มิติ ดูตัวอย่างได้ที่ BlocksCAD

  • การวิเคราะห์ข้อมูล: โค้ดที่สร้างขึ้นจะวิเคราะห์ข้อมูลและสร้างกราฟ ดูตัวอย่างได้ที่การสาธิตแพลตฟอร์ม Dialogic นี้

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

อินเทอร์เฟซผู้ใช้

วิธีที่ดีในการทำความเข้าใจคอมโพเนนต์ทั่วไปของแอปพลิเคชัน Blockly คือการ ดูอินเทอร์เฟซผู้ใช้

คอมโพเนนต์ UI พื้นฐาน

แอปพลิเคชัน Blockly เกือบทั้งหมดมีคอมโพเนนต์พื้นฐาน 2-3 อย่างร่วมกัน ได้แก่ เอดิเตอร์ Blockly (พื้นที่ทำงาน) แผงเอาต์พุต และปุ่ม "เรียกใช้" ตัวอย่างเช่น นี่คือ UI ของเขาวงกตในเกม Blockly

UI ของแอปพลิเคชันเขาวงกตที่มีเครื่องมือแก้ไข แผงเอาต์พุต และปุ่มเรียกใช้

แอปพลิเคชัน Blockly บางตัวจะไม่มีปุ่ม "เรียกใช้" แต่จะอัปเดตแผงเอาต์พุต ทุกครั้งที่ผู้ใช้ทำการเปลี่ยนแปลง ตัวอย่างเช่น แอปพลิเคชัน กราฟ ในตัวอย่างของ Blockly มีแผงเอาต์พุต 2 แผง (แผงหนึ่งสำหรับกราฟและ อีกแผงหนึ่งสำหรับสมการ) ซึ่งจะอัปเดตทุกครั้งที่มีการเปลี่ยนแปลง

UI ของแอปพลิเคชันกราฟที่มีเครื่องมือแก้ไข แผงเอาต์พุตสำหรับสมการ ที่ผู้ใช้สร้างขึ้น และแผงเอาต์พุตสำหรับกราฟของสมการนั้น

แอปพลิเคชันบางรายการไม่มีแผงเอาต์พุต ซึ่งมักพบได้ในการใช้งานฮาร์ดแวร์ เช่น การใช้งานสำหรับการเขียนโปรแกรมหุ่นยนต์ แม้ว่าแอปพลิเคชันบางส่วนจะมีเครื่องจำลองฮาร์ดแวร์ แต่แอปพลิเคชันส่วนใหญ่จะอนุญาตให้ผู้ใช้ดาวน์โหลด และเรียกใช้โค้ดที่สร้างขึ้นบนอุปกรณ์เป้าหมายได้โดยตรง

คอมโพเนนต์ UI เพิ่มเติม

แอปพลิเคชันส่วนใหญ่มีคอมโพเนนต์ UI เพิ่มเติม บางอย่างตอบสนองความต้องการทั่วไป เช่น การบันทึกงานของผู้ใช้ ขณะที่บางอย่างตอบสนองความต้องการเฉพาะของแอปพลิเคชัน เช่น การออกแบบ GUI โดยมีตัวอย่างดังนี้

  • Scratch ซึ่งเป็นแอปพลิเคชันสำหรับสร้างภาพเคลื่อนไหว และวิดีโอเกม มีโปรแกรมแก้ไขกราฟิกและเสียง แผงสำหรับสร้าง สไปรต์และฉากหลังใหม่ รวมถึงเมนูไฟล์ แก้ไข และการตั้งค่า

    อินเทอร์เฟซผู้ใช้ของ Scratch

  • MakeCode Arcade ซึ่งเป็นแอปพลิเคชันสำหรับสร้างวิดีโอเกมมีตัวควบคุมเอาต์พุต เอดิเตอร์โค้ดและกราฟิก เมนูการตั้งค่า รวมถึงปุ่มดาวน์โหลดและบันทึก แผงเอาต์พุตจะจำลอง อุปกรณ์ควบคุมเกมแบบพกพา

    อินเทอร์เฟซผู้ใช้ MakeCode Arcade

  • MIT App Inventor ซึ่งเป็นแอปพลิเคชันสำหรับ สร้างแอปโทรศัพท์ มีหน้าจอแยกต่างหากสำหรับโปรแกรมออกแบบ GUI และโปรแกรมแก้ไข Blockly รวมถึงเมนูไฟล์ การเชื่อมต่อ การสร้าง และการตั้งค่า ผู้ใช้จะทดสอบโค้ดที่สร้างขึ้นในโทรศัพท์แทน แผงเอาต์พุต

    โปรแกรมออกแบบ GUI ในอินเทอร์เฟซผู้ใช้ App Inventor โปรแกรมแก้ไข Blockly ในอินเทอร์เฟซผู้ใช้ของ App Inventor

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

  • การดูแลระบบ:

    • การจัดการไฟล์ (สร้าง เปิด บันทึก บันทึกเป็น ลบ)
    • การจัดการบัญชี (สร้าง เข้าสู่ระบบ ออกจากระบบ)
    • การตั้งค่า (ภาษา การกำหนดค่า UI)

  • การเขียนโปรแกรม:

    • คำสั่งแก้ไข (เลิกทำ ทำซ้ำ คัดลอก ตัด วาง ทำซ้ำ)
    • นักออกแบบ GUI
    • โปรแกรมแก้ไขกราฟิกและเสียง
    • ตัวแก้ไขโค้ดหรือการแสดงโค้ดแบบอ่านอย่างเดียว

  • การทดสอบ

    • การกำหนดค่าเอาต์พุต (เริ่ม/หยุด ความเร็วในการเล่น ระดับเสียง ภาพหน้าจอ ฯลฯ)
    • โปรแกรมแก้ไขข้อบกพร่อง (เบรกพอยท์, เรียกใช้, ขั้นตอน, การไฮไลต์บล็อก)
    • ตั้งค่าพารามิเตอร์การทดสอบ

  • ฮาร์ดแวร์

    • การเชื่อมต่อ (USB, บลูทูธ, คิวอาร์โค้ด)
    • การกำหนดค่า (เลือกรุ่น เลือกอุปกรณ์เสริม กำหนดชื่อคอมโพเนนต์)
    • ควบคุม (ควบคุมหุ่นยนต์ด้วยตนเอง บันทึกตำแหน่งหุ่นยนต์)
    • ดาวน์โหลดรหัส

  • ความช่วยเหลือ

    • เอกสารประกอบ
    • บทแนะนำแบบอินเทอร์แอกทีฟ
    • ความช่วยเหลือตามบริบท

ฉันควรดำเนินการต่ออย่างไร

หากยังคิดถึงการสมัคร โปรดอ่านต่อเกี่ยวกับข้อควรพิจารณาด้านการออกแบบ

หากต้องการดูตัวอย่างการสร้างแอปพลิเคชันอย่างง่าย โปรดลองใช้ Codelab การเริ่มต้นใช้งาน Blockly

และหากพร้อมที่จะเขียนใบสมัครแล้ว ให้ทำดังนี้