บทที่ 3 ทดลองสร้างแอปพลิเคชัน

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

สร้างแอป Hello World

              หลังจากที่เราเข้าสู่หน้าจอการทำงานของ Thunkable ขั้นตอนที่ 1 ให้ไปที่ Properties เพื่อตั้งชื่อ Title ของ Screen1 ให้เป็น Hello world

              ขั้นตอนที่ 2 ตั้งค่า Screen Orientation ให้เป็น Portrait เพื่อแสดงผลในแนวตั้ง หรือผู้ใช้สามารถ เลือกเป็นแนวนอน หรือใช้เซนเซอร์ในการวัดการทำงานได้

              หลังจากได้ตั้งค่าในส่วนนี้ จะแสดงผลให้เห็นในหน้าจอ Viewer โดยจะโชว์คำว่า Hello World และ ผู้ใช้สามารถปรับค่าอื่น ๆ ในหน้าจอนี้ได้เช่น การใส่สีพื้นหลัง (BackgroundColor) การใส่ภาพพื้นหลัง (Background Picture) เป็นต้น

              ขั้นตอนที่ 3 ให้ลาก Label ใน Add Components User Interface มาใส่ในหน้าจอ Viewer

              ขั้นตอนที่ 4 เปลี่ยนข้อความใน Label1 โดยเลือก Label1 ใน Components แล้วมาที่ Properties ในส่วนของ Text ให้ปรับเป็น “สวัสดีชาวโลก”

              ขั้นตอนที่ 5 เปลี่ยนขนาดข้อความใน Label1 โดยเลือก Label1 ใน Components แล้วมาที่ Properties ในส่วนของ Font Size ให้ปรับเป็น 20

              ในส่วนนี้แอปพลิเคชันจะแสดงข้อความที่หน้าจอว่า “สวัสดีชาวโลก” ซึ่งเราสามารถปรับแต่งในส่วนอื่น ๆ ได้เช่น การปรับแบบอักษร เลือก Font Typeface import (.ttf) และ Upload ไฟล์ font ที่เราได้เตรียมไว้ หรือการปรับสีอักษร โดยเลือกที่ Text Color แล้วเลือกสีที่ต้องการ

              ขั้นตอนที่ 6 การใส่รูปภาพให้ลาก Image ใน Add Components Image มาใส่ในหน้าจอ Viewer

              ขั้นตอนที่ 7 เลือกภาพ โดยเลือก Image1 ใน Components แล้วมาที่ Properties ในส่วนของ Picture ให้เลือกภาพที่มีอยู่แล้ว หรือเลือก Upload File หากไม่มี

              ขั้นตอนที่ 8 เลือกภาพในคอมพิวเตอร์ของเรา พอได้ภาพที่ต้องการแล้วให้คลิกที่ Open

              ขั้นตอนที่ 9 ปรับขนาดของภาพโดยเลือก Image1 ใน Components แล้วมาที่ Properties ในส่วนของ Height และ Width ให้ปรับโดยสามารถเลือก Fit Contents , Fill Container (ปรับเต็มพื้นที่) หรือ Absolute Size (ปรับตามขนาด Pixels คงที่) หรือ Relative Size (เปอร์เซ็นต์หน้าจอ) ในที่นี้ให้ปรับเป็น Relative Size คือ Height  50% และ Width 70% (สามารถปรับเองได้ตามเหมาะสม)

              ขั้นตอนที่ 10 การสร้างปุ่ม Hello ให้ลาก Button ใน Add Components User Interface มาใส่ในหน้าจอ Viewer

              ขั้นตอนที่ 11 แก้ไขข้อความใน Button โดยเลือก Button1 ใน Components แล้วมาที่ Properties ในส่วนของ Text ให้แก้ไขเป็น “Hello”

              ถือเป็นการเสร็จสิ้นขั้นตอนในการออกแบบหน้าตาของแอปพลิเคชัน ในส่วนต่อไปจะเป็นการใส่ Code เพื่อสั่งการในการทำงานต่าง ๆ ของแอปพลิเคชัน

              ขั้นตอนที่ 12 การใส่ Code ของแอปพลิเคชัน ในส่วนของ Code จะเป็นแบบ Block Editor ซึ่งจะง่ายต่อการทำงานสำหรับผู้เริ่มต้นพัฒนาแอปพลิเคชันอย่างมาก โดยให้ผู้ใช้เลือกที่ Blocks

              ขั้นตอนที่ 13 ในส่วนของหน้าต่างการทำงานของ Block ทางด้านซ้ายมือจะมี Screenl ที่รวม Components ต่าง ๆ ที่เราใส่ในแอปพลิเคชันของเรา ในส่วนนี้จะมีเพียง Button1 เท่านั้นที่มีการทำงานเมื่อ เราสัมผัสโดยให้คลิก Button1 และเลือก Block “when Button1 Click” แล้วคลิกเม้าส์ค้างไว้ลากมาใส่ หน้าจอการทำงาน

              ขั้นตอนที่ 14 การทำงานเมื่อ Button1 Click คือ เปลี่ยนข้อความ ให้เราไปที่ Built-in คลิก Label1 คลิกเลือก Block “from Label1 set Text to” คลิกเม้าส์ค้างไว้แล้วลาก Block “from Label1 set Text to” มาใส่ใน Block “When Button1 Click” และใส่ข้อความที่ต้องการในช่องว่าง

              ถือว่าเสร็จสิ้นการทำงานในส่วนของ Code ต่อไปเป็นการทดสอบแอปพลิเคชันโดยการเชื่อมกับ โทรศัพท์ และการ Export แอปพลิเคชันออกมาใช้งานจริง

การเชื่อมต่อกับโทรศัพท์เพื่อทดสอบแอปพลิเคชัน

              ให้เลือกเมนู Live Test

              จะแสดงแอปจำลองขึ้นมาบนหน้าจอคอมพิวเตอร์ สามารถดูและทดสอบใช้แอปที่เราสร้างได้เลย หรือเราสามารถแสดงดูและทดสอบใช้แอปที่เราสร้างทางโทรศัพท์มือถือได้ ด้วยโดยโหลดแอปพลิเคชัน “Thunkable” จาก Play store (ระบบ Android) หรือ App Store (ระบบ iOS)

การ Export File แอปพลิเคชัน

              ให้เลือกเมนู Export แล้วเลือก App (provide Qr code for apk) เพื่อแสดง QR Code ให้สแกนเพื่อดาวน์โหลดไฟล์ apk หรือเลือก App (save apk to my computer) เพื่อบันทึกไฟล์ลงในคอมพิวเตอร์

Leave a Comment