บล็อกที่กำหนดเอง: คู่มือแนะนำรูปแบบ

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

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

1. เงื่อนไขและการวนซ้ำ

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

คําแนะนํา: แยกเงื่อนไขและการวนซ้ำ

2. รายการเดี่ยว

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

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

คำแนะนำ: ตัวเลขที่ 1 คือตัวเลขแรก

3. ข้อมูลจากผู้ใช้

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

คำแนะนำ: เลือกวิธีการป้อนข้อมูลที่เหมาะสมสำหรับผู้ใช้

4. รูปภาพ Live Block

เอกสารประกอบสำหรับบล็อกควรมีรูปภาพของบล็อกที่อ้างอิง เป็น การจับภาพหน้าจอเป็นเรื่องง่าย แต่ถ้ามีภาพ 50 ภาพ แอปพลิเคชันได้รับการแปลเป็นภาษา 50 ภาษา แต่กลับมีภาษาหนึ่งมีคำแปลถึง 2,500 ภาษา ภาพนิ่ง จากนั้นรูปแบบสีจะเปลี่ยนไป และต้องอัปเดตรูปภาพ 2,500 รูป อีกครั้ง

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

คำแนะนำ: หากคุณรองรับมากกว่า 1 ภาษา ให้ใช้โหมดอ่านอย่างเดียว

5. อีกข้างซ้าย

ความคิดเห็นจากเด็กๆ ในสหรัฐอเมริกา (แม้จะไม่ใช่จากประเทศอื่นๆ ที่น่าสนใจก็ตาม) ซึ่งแสดงให้เห็นถึงความสับสนในวงกว้างระหว่างฝั่งซ้ายและขวา ปัญหานี้ได้รับการแก้ไขแล้วด้วย ลูกศรบวกกัน หากทิศทางเป็นแบบสัมพัทธ์ (เช่น กับอวาตาร์) ลักษณะของลูกศรเป็นสิ่งสำคัญ A → ลูกศรตรง หรือ ↱ ลูกศรเลี้ยวทำให้สับสน เมื่อรูปโปรไฟล์หันหน้าไปในทิศทางตรงกันข้าม สิ่งที่มีประโยชน์มากที่สุดคือ ⟳ วงกลม ลูกศร แม้ในกรณีที่มุมที่เลี้ยวน้อยกว่าที่ลูกศรระบุก็ตาม

คําแนะนํา: เสริมข้อความด้วยไอคอน Unicode หากเป็นไปได้

6. บล็อกระดับสูง

หากเป็นไปได้ คุณควรใช้วิธีการในระดับที่สูงกว่านี้ แม้ว่าจะลด หรือความยืดหยุ่นในการดำเนินการ ลองใช้นิพจน์ Apps Script นี้

SpreadsheetApp.getActiveSheet().getDataRange().getValues()

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

คำแนะนำ: อย่าค่อยๆ แปลง API ทั้งหมดเป็นการบล็อก

7. เลือกค่าส่งคืน

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

var last = stack.pop();  // Get and remove last element.
stack.pop();  // Just remove last element.

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

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

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

ค) เปลี่ยนแปลง 1 บล็อก ใช้เมนูแบบเลื่อนลง ช่องทําเครื่องหมาย หรือการควบคุมอื่นๆ ที่อนุญาต ผู้ใช้จะเลือกได้ว่าจะมีค่าส่งคืนหรือไม่ การบล็อก จะเปลี่ยนรูปร่างตามตัวเลือก ตัวอย่างเช่น เห็นในการบล็อกการเข้าถึงรายการของ Blockly

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

คำแนะนำ: แต่ละกลยุทธ์มีข้อดีและข้อเสีย ให้เลือกสิ่งที่เหมาะกับ ผู้ใช้ของคุณ

8. บล็อกขนาดใหญ่

การบล็อกบางรายการอาจต้องใช้จำนวนอินพุตที่เปลี่ยนแปลงได้ ตัวอย่างเช่น บล็อกเพิ่มเติมที่รวมชุดตัวเลขที่กำหนดเอง หรือ if/elseif/else บล็อกด้วยชุดคำสั่ง elseif ที่กำหนดเอง หรือเครื่องมือสร้างรายการที่มี จำนวนองค์ประกอบเริ่มต้นที่กำหนดเอง เรามีกลยุทธ์มากมาย แต่ละแบบก็มีทั้งข้อดีและข้อเสีย

ก) วิธีที่ง่ายที่สุดในการทำให้ผู้อ่านเขียนบล็อกจาก บล็อก ตัวอย่างจะเป็นการบวกตัวเลข 3 ตัว โดยซ้อนตัวเลข 2 ตัวเข้าด้วยกัน การเพิ่มบล็อก อีกตัวอย่างหนึ่งคือการระบุการบล็อก if/else และกำหนดให้ผู้ใช้ซ้อนพวกเขาเพื่อสร้างเงื่อนไข "อื่นๆ"

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

ข) อีกทางเลือกหนึ่งคือ ขยายการบล็อกแบบไดนามิกเพื่อให้มีการบล็อก ในตอนท้าย และเช่นเดียวกัน การบล็อกจะลบอินพุตล่าสุดถ้ามี 2 อินพุตแบบอิสระในตอนท้าย นี่คือแนวทางที่เครื่องมือรุ่นแรก ใช้ App Inventor แล้ว

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

c) ในการแก้ปัญหาช่องโหว่ นักพัฒนาซอฟต์แวร์บางรายได้เพิ่มปุ่ม +/- ลงในบล็อก เพิ่มหรือนำอินพุตออกด้วยตนเอง เปิด Roberta ใช้ปุ่ม 2 ปุ่มเพื่อเพิ่ม หรือนำอินพุตออกจากด้านล่าง นักพัฒนาซอฟต์แวร์รายอื่นๆ เพิ่มปุ่ม 2 ปุ่มต่อกัน เพื่อที่การแทรกและการลบจากตรงกลางของสแต็ก รองรับ ส่วนภาษาอื่นๆ จะมีปุ่มขึ้น/ลง 2 ปุ่มในแต่ละแถว เพื่อให้การจัดเรียง อาจมีการรองรับสแต็กได้

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

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

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

คำแนะนำ: แต่ละกลยุทธ์มีข้อดีและข้อเสีย ให้เลือกสิ่งที่เหมาะกับ ผู้ใช้ของคุณ

9. การสร้าง Clean Code

ผู้ใช้ Blockly ขั้นสูงควรดูโค้ดที่สร้างขึ้นได้ (JavaScript, Python, PHP, Lua, Dart ฯลฯ) และจะรู้จักโปรแกรมที่เขียนขึ้นทันที ซึ่งหมายความว่าคุณต้องใช้ความพยายามเป็นพิเศษเพื่อเก็บโค้ดที่คอมพิวเตอร์สร้างขึ้นนี้ไว้ สามารถอ่านได้ วงเล็บที่ไม่จำเป็น ตัวแปรตัวเลข การเว้นวรรคหักล้าง และ เทมเพลตโค้ดทั้งหมดล้วนขัดขวางการสร้างโค้ดที่สวยงาม โค้ดที่สร้างขึ้นควรมีความคิดเห็นและเป็นไปตาม คู่มือด้านสไตล์ของ Google

คำแนะนำ: ภูมิใจกับโค้ดที่คุณสร้างขึ้น แสดงต่อผู้ใช้

10. การขึ้นต่อกันของภาษา

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

คำแนะนำ: Blockly ไม่ใช่ภาษา แต่อนุญาตภาษาที่มีอยู่แล้วเพื่อ ส่งผลต่อพฤติกรรมการใช้งาน