การบล็อกที่กำหนดเอง: แนวทางปฏิบัติแนะนำ

ตลอดหลายปีที่ผ่านมา ทีม Blockly และ Blockly Games ได้เรียนรู้บทเรียนมากมายซึ่งมีผลกับผู้ที่พัฒนาแอปพลิเคชันใน Blockly ต่อไปนี้คือชุดข้อผิดพลาดที่เราทำหรือข้อผิดพลาดที่ผู้อื่นมักทำ

รายการเหล่านี้เป็นบทเรียนทั่วไปที่เราได้เรียนรู้โดยใช้สไตล์ภาพของ Blockly และอาจใช้ไม่ได้กับ Use Case หรือการออกแบบทั้งหมด อาจมีวิธีแก้ปัญหาอื่นๆ นี่ไม่ใช่รายการปัญหาทั้งหมดที่ผู้ใช้อาจพบและวิธีหลีกเลี่ยง แต่ละกรณีมีความแตกต่างกันเล็กน้อยและอาจมีข้อเสียของตัวเอง

1. รูปแบบเส้นขอบ

ในช่วงทศวรรษ 2000 ภาพลักษณ์ "สีฟ้าน้ำ" นั้นดูมีสไตล์และวัตถุบนหน้าจอทุกชิ้นได้รับการตกแต่งด้วยการไฮไลต์และเงา ในช่วงปี 2010 รูปลักษณ์ " Material Design" เป็นไปตามสไตล์และวัตถุบนหน้าจอทั้งหมดมีการปรับให้เรียบง่าย เป็นรูปทรงที่สะอาดตา ไร้ขอบ สภาพแวดล้อมการเขียนโปรแกรมแบบบล็อกส่วนใหญ่จะมีการไฮไลต์และเงารอบๆ บล็อกแต่ละบล็อก ดังนั้นเมื่อกราฟิกดีไซเนอร์ในปัจจุบันเห็นการตกแต่งนี้ก็จะตัดการตกแต่งที่ล้าสมัยเหล่านี้ออกไปอย่างหลีกเลี่ยงไม่ได้

จากตัวอย่าง 5 บล็อกด้านบน (จาก Scriptr.io) "การตกแต่งที่ล้าสมัย" เหล่านี้เป็นสิ่งสำคัญในการแยกแยะบล็อกที่เชื่อมต่อกันซึ่งมีสีเดียวกัน

คำแนะนำ: หากคุณปรับโฉม Blockly อีกครั้ง ก็อย่าให้แฟชั่นของวันนี้ต้องมาสร้างความเสียหายแก่แอปของคุณ

2. ซ้อนสแต็กย่อย

บล็อกรูปตัว "C" จะมีตัวเชื่อมอยู่ที่ด้านบน แต่บางสภาพแวดล้อมจะมีตัวเชื่อมอยู่ที่ด้านล่างด้วย (เช่น Wonder Workshop) แต่จะไม่มีตัวเชื่อม (เช่น Blockly และ Scratch) เนื่องจากบล็อกคำสั่งส่วนใหญ่มีทั้งตัวเชื่อมต่อด้านบนและด้านล่าง ผู้ใช้บางรายอาจไม่เห็นทันทีว่าคำสั่งจะพอดีกับ "C" ที่ไม่มีตัวเชื่อมต่อด้านล่าง

เมื่อผู้ใช้ทราบว่าช่องข้อความหนึ่งช่องตรงกับตัว "C" แล้ว ก็ต้องคิดว่าจะมีข้อความอีก 1 ข้อความที่ใส่พอดี บางสภาพแวดล้อมจะฝังการเชื่อมต่อส่วนล่างของคำสั่งแรกไว้ที่ส่วนท้ายของตัวอักษร 'C' (เช่น Wonder Workshop และ Scratch) ขณะที่บางรูปแบบจะเว้นช่องว่างเล็กๆ (เช่น แบบบล็อก) การซ้อนชั้นเล็กๆ ไม่บอกใบ้ว่าสามารถซ้อนบล็อกอื่นๆ ได้อีก

ปัญหาทั้ง 2 อย่างนี้โต้ตอบกันอย่างไม่เหมาะสม หากมีตัวเชื่อมภายในด้านล่างอยู่ (Wonder Workshop) การเชื่อมต่อของคำกล่าวเริ่มต้นจะชัดเจนขึ้น แต่ต้องแลกกับความสามารถในการค้นหาการซ้อนทับ หากไม่มีเครื่องมือเชื่อมต่อด้านล่างอยู่ (บล็อก) แสดงว่าการเชื่อมต่อของคำสั่งเริ่มต้นไม่ชัดเจน แต่จะค้นพบการเชื่อมต่อแบบซ้อนได้ การไม่ใส่เครื่องมือเชื่อมต่อด้านล่างไว้ด้านในและการซ้อนเครื่องมือเชื่อมต่อด้านล่าง (Scratch) ในใบแจ้งยอดจะทำให้ค้นพบได้ยากที่สุดเมื่อทดสอบกับ Blockly

จากประสบการณ์ของเรา การเชื่อมต่อจากข้อความเริ่มต้นนั้น เป็นความท้าทายสำหรับผู้ใช้น้อยกว่าการค้นหาสแต็ก และเมื่อค้นพบแล้ว สิ่งแรกจะไม่ลืมอีกต่อไป ในขณะที่ฝ่ายหลังต้องกระตุ้น Blockly ได้ลองทดสอบทั้ง Wonder Workshop และ Scratch นี้อย่างใกล้ชิดจนกระทั่งวันหนึ่งมีข้อบกพร่องในการแสดงผลเกิดขึ้น ซึ่งทำให้มีช่องว่างเล็กๆ น้อยๆ การศึกษาผู้ใช้ของ Blockly ดีขึ้นอย่างเห็นได้ชัด เนื่องจากข้อบกพร่องนี้ (ที่เราภูมิใจและตอนนี้คือ "ฟีเจอร์")

คำแนะนำ: หากปรับโฉม Blockly ให้ออกจาก UI ที่ซ้อนทับที่มีอยู่

3. การเชื่อมต่อแบบสมมาตร

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

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

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

คำแนะนำ: หากปรับโฉม Blockly ให้ดูว่าการเชื่อมต่อแนวตั้งและแนวนอนมีความแตกต่างกัน

4. ชื่อตัวแปรและชื่อฟังก์ชัน

นักเขียนโปรแกรมมือใหม่ไม่ได้คาดหวังว่า location_X และ location_x เป็นตัวแปรที่แตกต่างกัน ด้วยเหตุนี้ Blockly จึงไม่ให้ความสำคัญกับ BASIC และ HTML โดยทำให้ตัวแปรและฟังก์ชันไม่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ Scratch จะใช้วิธีการที่ละเอียดยิ่งขึ้น (ตามที่เห็นทางด้านขวา) และคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่สำหรับชื่อตัวแปร แต่ไม่ใช่สำหรับการตรวจสอบความเท่าเทียมกัน

นอกจากนี้ Blockly ไม่ได้กำหนดให้ตัวแปรและฟังก์ชันสอดคล้องกับสคีม [_A-Za-z][_A-Za-z0-9]* ทั่วไป หากใครต้องการตั้งชื่อตัวแปร List of zip codes หรือ רשימת מיקודים ก็ไม่เป็นไร

คำแนะนำ: ไม่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ อนุญาตให้ใช้ชื่อใดก็ได้

5. ตัวแปรร่วม

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

คำแนะนำ: ขอบเขตนี้อยู่นอกขอบเขต โปรดเก็บไว้ภายหลัง

6. วิธีการ

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

สุดท้าย เราได้สร้างป๊อปอัปที่ปิดไม่ได้ พวกเขาถูกตั้งโปรแกรมให้ตรวจสอบการทำงานของนักเรียน และปิดตัวเองเมื่อนักเรียนได้ดำเนินการตามที่กำหนดเท่านั้น ป๊อปอัปที่รับรู้บริบทเหล่านี้ เป็นเรื่องยากที่จะจัดโปรแกรม แต่มีประสิทธิภาพพอสมควร และสิ่งสำคัญอีกอย่างคือต้องปรากฏในขอบเขตการมองเห็น โดยไม่รบกวนพื้นที่ทำงาน

คำแนะนำ: วิธีการควรสั้นกระชับและต่อเนื่อง แต่ไม่ก่อให้เกิดความรำคาญ

7. การเป็นเจ้าของรหัส

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

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

คำแนะนำ: อย่าเขียนโค้ดให้กับผู้ใช้

8. เลย์เอาต์พื้นที่ทำงาน

การจัดวางหน้าจอจากซ้ายไปขวามี 2 วิธีที่สมเหตุสมผล วิธีหนึ่งจะเริ่มจากแถบเครื่องมือทางด้านซ้าย พื้นที่ทำงานที่อยู่ตรงกลาง และการแสดงภาพเอาต์พุตทางด้านขวา เค้าโครงนี้ใช้โดย Scratch เวอร์ชัน 1 รวมถึง Made with Code

อีกวิธีหนึ่งคือการเริ่มต้นด้วยการแสดงภาพเอาต์พุตทางด้านซ้าย แถบเครื่องมือตรงกลาง และพื้นที่ทำงานทางด้านขวา เค้าโครงนี้ใช้โดย Scratch เวอร์ชัน 2 รวมถึงแอปพลิเคชันส่วนใหญ่ของ Blockly

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

นอกจากนี้ ผู้ใช้ควรพิจารณาปัญหาที่พยายามจะแก้ก่อน จากนั้นจึงดูเครื่องมือที่มีให้ จากนั้นจึงเริ่มเขียนโปรแกรม

แน่นอนว่าคำสั่งซื้อทั้งหมดต้องมีการกลับทางสำหรับการแปลภาษาอาหรับและฮีบรู

ในบางกรณี เช่น เมื่อใช้บล็อกง่ายๆ เพียงไม่กี่บล็อก กล่องเครื่องมือควรอยู่เหนือหรือใต้พื้นที่ทำงานก็อาจเหมาะสม Blockly รองรับการเลื่อนแนวนอนในกล่องเครื่องมือสำหรับกรณีเหล่านี้ แต่ควรใช้งานด้วยความระมัดระวัง

คำแนะนำ: วางภาพโปรแกรมไว้ถัดจากแถบเครื่องมือ

9. ออกจากกลยุทธ์

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

ด้วยเหตุผลนี้ สภาพแวดล้อมการเขียนโปรแกรมแบบบล็อกที่ใช้สำหรับการสอนเขียนโปรแกรมจึงต้องมีทางลาดที่เหมาะกับนักเรียน Blockly Games มีกลยุทธ์ 4 อย่างดังนี้

1. ข้อความทั้งหมดบนบล็อก (เช่น "if", "ในขณะที่") เป็นตัวพิมพ์เล็กเพื่อให้ตรงกับภาษาโปรแกรมแบบข้อความ
2. โค้ดของนักเรียนเวอร์ชัน JavaScript จะปรากฏหลังแต่ละระดับเสมอเพื่อให้มีความคุ้นเคย
3. ในเกมก่อนๆ ข้อความบล็อกจะถูกแทนที่ด้วย JavaScript จริง (ตามที่แสดงทางด้านขวา) ในขั้นตอนนี้ นักเรียนเขียนโปรแกรมด้วย JavaScript
4. ในเกมนี้ ตัวแก้ไขบล็อกก็จะถูกแทนที่ด้วยตัวแก้ไขข้อความ

สภาพแวดล้อมการเขียนโปรแกรมแบบบล็อกที่ใช้สำหรับสอนการเขียนโปรแกรมจำเป็นต้องมีแผนการที่เป็นรูปธรรมสำหรับนักศึกษาจบใหม่ กลยุทธ์การออกที่ดีที่สุดยังมีผลอย่างมากต่อผู้ชมที่ไม่เห็นด้วยว่าการเขียนโปรแกรมแบบบล็อกไม่ใช่ "การจัดโปรแกรมจริง"

คำแนะนำ: พิจารณาเป้าหมายปลายทางของผู้ใช้และออกแบบอย่างเหมาะสม