Benjamarachutit School
Computing Sciene
M.3
4.3 ทดลองสร้างแอปพลิเคชัน
.png)
หลังจากได้ทำความรู้จักกับเครื่องมือต่าง ๆ ของ 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 ให้ปรับเป็น “สวัสดีชาวโลก”
(ขั้นตอนที่ 3)
(ขั้นตอนที่ 4)
ขั้นตอนที่ 5 เปลี่ยนขนาดข้อความใน Label1 โดยเลือก Label1 ใน Components แล้วมาที่ Properties ในส่วนของ Font Size ให้ปรับเป็น 20
ในส่วนนี้แอปพลิเคชันจะแสดงข้อความที่หน้าจอว่า “ปรับสีอักษร โดยเลือกที่ Text Color แล้วเลือกสีที่ต้องการสวัสดีชาวโลก” ซึ่งเราสามารถปรับแต่งในส่วนอื่น ๆ ได้เช่น การปรับแบบอักษร เลือก Font Typeface import (.ttf) และ Upload ไฟล์ font ที่เราได้เตรียมไว้
ขั้นตอนที่ 6 การใส่รูปภาพให้ลาก Image ใน Add Components Image มาใส่ในหน้าจอ Viewer
ขั้นตอนที่ 7 เลือกภาพ โดยเลือก Image1 ใน Components แล้วมาที่ Properties ในส่วนของ Picture ให้เลือกภาพที่มีอยู่แล้ว หรือเลือก Upload File หากไม่มี โดยทำตามขั้นตอนที่ 8
(ขั้นตอนที่ 6)
(ขั้นตอนที่ 7)
ขั้นตอนที่ 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 “Set Label1 set Text to” คลิกเม้าส์ค้างไว้แล้วลาก Block “Set 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) เพื่อบันทึกไฟล์ ลงในคอมพิวเตอร์