מבוא לאפליקציות של Blockly

אפליקציית Blockly היא אפליקציית אינטרנט שמכילה עורך Blockly (סביבת עבודה). במאמר הזה מופיעות דוגמאות לשימושים באפליקציות Blockly, ומוצגות תכונות אופייניות של ממשק המשתמש.

אם עדיין לא עשיתם את זה, מומלץ לקרוא את מילון המונחים עם תמונות ואת השלבים הבסיסיים להגשת בקשה לפני שתמשיכו לקרוא את המאמר הזה.

מה עושות אפליקציות Blockly?

אפליקציות Blockly עוזרות למשתמשים לכתוב תוכניות בתחומים שונים, החל ממשחקי וידאו ועד רובוטיקה וניתוח נתונים. המשתמשים כותבים את התוכניות שלהם באמצעות בלוקים, והאפליקציה משתמשת בהם כדי ליצור קוד מבוסס-טקסט, כמו JavaScript או Python. אחרי כן, האפליקציה מריצה את הקוד שנוצר ישירות או שהמשתמש מוריד אותו ומריץ אותו בפלטפורמה אחרת, כמו רובוט או בקר משחקים נייד.

הנה כמה דוגמאות לסוגי תוכניות שמשתמשים כותבים באמצעות אפליקציות של Blockly:

  • פתרונות לפאזלים, אנימציה או מוזיקה: הקוד שנוצר פותר פאזל (כמו מבוך), מציג אנימציה או מפעיל מוזיקה. דוגמה אפשר לראות במעבדת המוזיקה של Code.org.

  • משחקי וידאו: הקוד שנוצר מריץ משחק וידאו. לדוגמה, אפשר ליצור את שתי הרמות הראשונות של המשחק Whack the Mole ב-MakeCode Arcade ולהוריד את המשחק לבקר או לשחק בו בסימולטור.

  • רובוטיקה: הקוד שנוצר מנחה רובוט. לדוגמה, אפשר לתכנת רובוט באמצעות Ozoblockly ולהוריד את התוכנה לרובוט אמיתי או להריץ אותה בסימולטור.

  • שרטוט: הקוד שנוצר מצייר שרטוט דו-ממדי או תלת-ממדי. לדוגמה, אפשר לעיין ב-BlocksCAD.

  • ניתוח נתונים: הקוד שנוצר מנתח נתונים ויוצר תרשים. דוגמה אפשר לראות בהדגמה הזו של פלטפורמת Dialogic.

  • קוד ספציפי לאפליקציה: הקוד שנוצר מבצע משימה שספציפית לאפליקציה מסוימת. לדוגמה, Blockly Developer Tools הוא כלי לעיצוב בלוקים חדשים של Blockly. הוא יוצר קוד להגדרת בלוק, שהמשתמשים מעתיקים ומדביקים באפליקציית Blockly שלהם.

ממשקי משתמש

דרך טובה להבין את הרכיבים האופייניים של אפליקציות Blockly היא לבחון את ממשקי המשתמש שלהן.

רכיבים בסיסיים בממשק המשתמש

כמעט לכל האפליקציות של Blockly יש כמה רכיבים בסיסיים: עורך Blockly (סביבת עבודה), חלונית פלט ולחצן 'הפעלה'. לדוגמה, הנה ממשק המשתמש של Maze ב-Blockly Games.

ממשק המשתמש של אפליקציית מבוך עם כלי עריכה, חלונית פלט וכפתור 'הפעלה'.

יש כמה אפליקציות Blockly שבהן לא מופיע הלחצן 'הפעלה', ובמקום זאת חלונית הפלט מתעדכנת בכל פעם שהמשתמש מבצע שינוי. לדוגמה, לאפליקציית הגרף בדוגמאות של Blockly יש שתי חלוניות פלט (אחת לגרף ואחת למשוואה) שהיא מעדכנת בכל שינוי.

ממשק משתמש של אפליקציה ליצירת תרשימים עם עורך, חלונית פלט למשוואה שהמשתמש יצר וחלונית פלט לתרשים של המשוואה הזו.

בחלק מהאפליקציות אין חלונית פלט. הבעיה הזו נפוצה בעיקר באפליקציות חומרה, כמו אפליקציות לתכנות רובוטים. חלק מהאפליקציות האלה כוללות סימולטור חומרה, אבל רבות מהן מאפשרות למשתמשים להוריד ולהפעיל את הקוד שנוצר ישירות במכשיר היעד.

רכיבים נוספים בממשק המשתמש

לרוב האפליקציות יש רכיבי ממשק משתמש נוספים. חלק מהן עונות על צרכים כלליים, כמו שמירת העבודה של המשתמש, ואחרות עונות על צרכים ספציפיים לאפליקציה, כמו עיצוב ממשק משתמש גרפי. הנה כמה דוגמאות:

  • Scratch, אפליקציה ליצירת אנימציות ומשחקי וידאו, כוללת עורכי גרפיקה ואודיו, חלוניות ליצירת דמויות ורקעים חדשים ותפריטים של קבצים, עריכה והגדרות:

    ממשק המשתמש של Scratch.

  • MakeCode Arcade, אפליקציה ליצירת משחקי וידאו, כוללת אמצעי בקרה לפלט, עורכי קוד וגרפיקה, תפריט הגדרות ולחצני הורדה ושמירה. חלונית הפלט שלו מדמה שלט משחקים נייד.

    ממשק המשתמש של MakeCode Arcade.

  • MIT App Inventor, אפליקציה ליצירת אפליקציות לטלפון, כוללת מסכים נפרדים למעצב ממשק המשתמש ולעורך Blockly, וגם תפריטים של קבצים, חיבורים, בנייה והגדרות. במקום חלונית פלט, המשתמשים בודקים את הקוד שנוצר בטלפון שלהם.

    כלי העיצוב של ממשק המשתמש הגרפי בממשק המשתמש של App Inventor הכלי לעריכת Blockly בממשק המשתמש של App Inventor

אילו רכיבים נוספים כדאי לכלול תלוי ביעדים של האפליקציה וביכולות של המשתמשים. דוגמאות לרכיבים נפוצים:

  • ניהול:

    • ניהול קבצים (חדש, פתיחה, שמירה, שמירה בשם, מחיקה)
    • ניהול חשבון (יצירה, התחברות, יציאה)
    • הגדרות (שפה, הגדרת ממשק המשתמש)
  • תכנות:

    • עריכת פקודות (ביטול פעולה, ביצוע חוזר של פעולה, העתקה, גזירה, הדבקה, שכפול)
    • מעצב GUI
    • תוכנות לעריכת גרפיקה ואודיו
    • עורך קוד או תצוגת קוד לקריאה בלבד
  • בדיקה

    • הגדרת הפלט (התחלה/הפסקה, מהירות ההפעלה, עוצמת הקול, צילום מסך וכו')
    • כלי לניפוי באגים (נקודות עצירה, הפעלה, מעבר, הדגשת בלוקים)
    • הגדרת פרמטרים של בדיקה
  • חומרה

    • חיבור (USB, ‏ Bluetooth, ‏ קוד QR)
    • הגדרה (בחירת מודל, בחירת אביזרים, הקצאת שמות לרכיבים)
    • שליטה (שליטה ידנית ברובוט, תיעוד מיקום הרובוט)
    • הורדת קוד
  • עזרה

    • מאמרי עזרה
    • הדרכות אינטראקטיביות
    • עזרה לפי הקשר

לאן ממשיכים מכאן?

אם אתם עדיין מתלבטים לגבי הבקשה, כדאי להמשיך לקרוא על שיקולי עיצוב.

אם אתם רוצים לראות איך יוצרים אפליקציה פשוטה, כדאי לנסות את המדריך לתחילת העבודה עם Blockly.

ואם אתם מוכנים לכתוב את הבקשה: