เมื่อเรารู้องค์ประกอบหลักๆ ของ Designer กันแล้ว ขั้นตอนต่อไป คือ ออกแบบหน้าตาโปรแกรมบนมือถือ ซึ่งทำได้โดย ลากส่วนประกอบที่ต้องการไปยัง Viewer
ตอนเริ่มต้นโปรเจกใหม่ จะมีส่วนโปรแกรมที่เป็นหน้าจอมือถือ (Screen1) ก่อนอยู่แล้ว ดังนั้นเราจึงเห็น หน้าจอมือถืออยู่ที่ Viewer ส่วนโปรแกรม Screen1 ใน Components และรายการคุณสมบัติของ Screen1 ใน Properties
สังเกตเลข 1 ที่ตามหลังชื่อส่วนโปรแกรม Screen ใน Viewer หรือใน Components ตัวเลขนี้ถูกใส่เข้าไปในชื่อ เพราะในโปรแกรมหนึ่ง อาจมีส่วนโปรแกรมชนิดเดียวกันมากกว่า 1 ส่วน ถ้าเราลากส่วนโปรแกรมที่มีอยู่แล้วเพิ่มเข้าไปใน Viewer ตัวเลขในชื่อจะเพิ่มขึ้นเองโดยอัตโนมัติ เพื่อป้องกันชื่อซ้ำกัน
ลำดับแรกในการออกแบบโปรแกรม Hello Purr เริ่มด้วยการลากส่วนประกอบปุ่ม (Button) ในหมวด Basic มายังหน้าจอมือถือ สังเกตว่าปุ่มใน Components จะถูกเลือกพร้อมทั้งแสดงคุณสมบัติของปุ่มใน Properties โดยอัตโนมัติ
ณ ขณะนี้ ปุ่มที่อยู่ใน Viewer จะมีรูปร่างสี่เหลี่ยมพร้อมข้อความ Text for Button1 (ในกรอบสีส้ม) สิ่งที่เราต้องการแก้ไข คือ ลบข้อความนั้นทิ้ง แล้วใส่รูปแมวบนปุ่มแทน โดยไปที่คุณสมบัติ Text ของปุ่ม แล้วลบข้อความ Text for Button1 ออกไป
จากนั้นไปยังคุณสมบัติ Image คลิก None… (ในกรอบสีฟ้า) จะเห็นหน้าต่างให้เพิ่มไฟล์สื่อต่างๆ ได้ (หรืออีกทางหนึ่ง คลิกปุ่ม Add ในส่วนของ Media ที่อยู่ด้านล่างติดกับ Components) จากนั้นเลือกไฟล์รูปแมวที่ดาวน์โหลดมาแล้วในคอมพิวเตอร์ของตัวเอง
รอสักครู่ ไฟล์กำลังถูกส่งไปยัง App Inventor Server เพื่อรอการใช้งานในโปรเจกนี้ หลังจากนั้นจะเห็นรูปแมวบนปุ่มแทนข้อความที่ถูกลบทิ้งไป
ต่อไปต้องเพิ่มเสียงให้แมว โดยเลือกส่วนโปรแกรมในหมวด Media ลากส่วนโปรแกรมเสียง (Sound) ไปยัง Viewer จากนั้นไปที่คุณสมบัติ Source เพื่อเพิ่มไฟล์เสียงแมวที่ดาวน์โหลดมาก่อนหน้านี้ โดยจะใส่ที่ Source หรือตรง Media ก็ได้ (คล้ายกับตอนใส่ไฟล์รูปแมว)
ต่อไปเพิ่มส่วนโปรแกรม Label (อยู่ในหมวด Basic) เพื่อเขียนข้อความลงไปบนหน้าจอมือถือ โดยแก้ไขข้อความในคุณสมบัติ Text นอกจากนั้นยังสามารถเพิ่มสีสันให้กับข้อความได้ โดยแก้ไขคุณสมบัติต่างๆ เช่น ขนาด สี รูปแบบ ของตัวอักษร คล้ายๆ ในโปรแกรมเวิร์ด
ถ้าทำตามบทเรียนจาก MIT จะได้หน้าตาโปรแกรมมือถือตามรูปใน Viewer ดังนี้
สังเกตว่า Sound1 ไม่ได้อยู่บนจอมือถือ เนื่องจากเป็นส่วนโปรแกรมที่ไม่สามารถมองเห็นได้ ตอนหน้ามาลงมือเขียนโปรแกรมให้แต่ละส่วนโปรแกรมทำงานร่วมกัน
คิดสร้างสรรค์ 