ทำความรู้จัก Thunkable และการพัฒนาแอป

บทนำ

• ปัจจุบันเทคโนโลยีมีบทบาทสำคัญในการดำเนินชีวิต
• เทคโนโลยีช่วยอำนวยความสะดวกต่าง ๆ, สมาร์ทโฟนเป็นอุปกรณ์ที่ใช้บ่อย
• แอปพลิเคชั่นช่วยให้สมาร์ทโฟนตอบสนองความต้องการของผู้ใช้
• Android เป็นระบบปฏิบัติการสมาร์ทโฟนที่นิยมทั่วโลก
• การพัฒนาแอปฯ บน Android มีความจำเป็น
• ช่วยให้สมาร์ทโฟนทำงานได้ตามต้องการและสร้างรายได้
• Thunkable คือเครื่องมือพัฒนาแอปฯ ที่เหมาะสำหรับผู้เริ่มต้นจนถึงระดับธุรกิจ
• มีลักษณะการใช้งานแบบลากวางและชุดคำสั่งเหมือน Lego ทำให้ง่ายต่อการพัฒนาแอปฯ
• คู่มือนี้จะช่วยให้รู้จัก Thunkable, ฟังก์ชันพื้นฐานและการใช้งาน ทำให้พัฒนาแอปฯ ได้ง่ายและมีประสิทธิภาพ

Chapter 1: รู้จักและเข้าใช้งาน Thunkable

• การใช้ Mobile Device เช่น Smart Phone เพิ่มขึ้นอย่างรวดเร็ว เนื่องจากการพัฒนา Mobile Application
• บริษัทต่างๆ แข่งขันพัฒนา Application บนอุปกรณ์เคลื่อนที่ของตนเอง
• ผู้ใช้ Smart Phone มีแนวโน้มใช้โปรแกรมต่างๆ เช่น เล่นอินเทอร์เน็ต ดูหนัง
• ฟังเพลง หรือเล่นเกม ทั้งออนไลน์และออฟไลน์

หลัก 3 ส ก่อนลงมือสร้าง Application

• สำรวจปัญหา เพื่อให้เกิดไอเดียในการสร้างแอปฯ, อาจเป็นปัญหาใกล้ตัวหรือปัญหาในสังคม
• พิจารณาว่าแอปฯ ที่สร้างขึ้นจะช่วยแก้ปัญหาหรือมีประโยชน์ต่อสังคมได้อย่างไร
• สำรวจตลาด พิจารณาความต้องการของผู้ใช้, ดูว่ามีผู้ใช้แอปฯ ของเรามากน้อยเพียงใด
• ถ้าสร้างแอปฯ ที่ไม่ตรงกับความต้องการของตลาดก็ไม่มีประโยชน์
• สำรวจแอปฯ อื่นๆ เพื่อศึกษาระบบการทำงาน, หน้าต่างแอปฯ, ทำไมถึงมีผู้ใช้จำนวนมาก
• ศึกษาข้อดีข้อเสียก่อนลงมือสร้าง, ปรับให้เหมาะสมกับแอปฯ ของเรา ไม่ใช่การลอกเลียนแบบ

รู้จัก Thunkable

• Thunkable ทำให้การสร้างแอปฯ ง่ายขึ้นสำหรับผู้เริ่มต้นหรือผู้ที่ไม่มีพื้นฐานเขียนโปรแกรม
• Thunkable มีพื้นฐานมาจากโครงการ App Inventor ของ Google
• ต่อมาพัฒนาร่วมกับสถาบัน MIT (Massachusetts Institute of Technology)
• Hal Abelson (MIT) และ Mark Friedman (Google) สร้างแพลตฟอร์มนี้
• ผู้ใช้ Google เช่น Liz Looney และ Sharon Perl ให้ความช่วยเหลือ
• App Inventor ย้ายไป MIT ในปี 2010 โดย Google สนับสนุน
• Andrew McKinney, Jeff Schiller และ Josh Sheldon ได้ทำการพัฒนา
• Thunkable มีความสำคัญในการผลักดันการเรียนรู้เกี่ยวกับมือถือสำหรับนักเรียนและนักการศึกษา

หลักการทำงานของ Thunkable

• Thunkable มีหลักการทำงานเหมือน MIT App Inventor โดยใช้ Visual Programming Language
• เน้นความง่ายต่อการเขียนและใช้หลักการต่อแบบเลโก้
• เหมาะสำหรับมือใหม่ที่สนใจเขียนโปรแกรมอย่างยิ่ง
• มีการพัฒนาต่อเนื่องมาจาก MIT App Inventor Version 2
• มีเครื่องมือให้ใช้อย่างครบครัน, เพิ่ม font ได้หลากหลาย, มีสีให้เลือกมากขึ้น
• เหมาะสำหรับนักพัฒนาแอปฯ บน Android

เตรียมพร้อมก่อนใช้งาน Thunkable

• ต้องมี Computer หรือ Notebook
• ระบบปฏิบัติการ (Windows): Windows XP, Vista, 7, 8, 10
• Browser: Chrome 4.0+, Mozilla Firefox 3.6+
• อุปกรณ์โมบายพร้อมติดตั้งแอพ Thunkable (ค้นหาได้จาก Play Stores)
• เชื่อมต่ออินเทอร์เน็ต
• ต้องมี Google Account (Gmail)

การเข้าใช้งาน Thunkable

• เข้าเว็บไซต์ http://thunkable.com แล้วคลิก Sign in
• เลือก Sign in with Google
• ป้อน Gmail และรหัสผ่าน, แล้วเลือก Sign in
• อนุญาตการเข้าถึงข้อมูล, อ่านข้อตกลงแล้วเลือกอนุญาต
• เข้าสู่หน้าต่าง Thunkable, กด OK แล้วเลือก Create New App เพื่อเริ่มสร้าง
• ใส่ชื่อ App แล้วกด OK เพื่อเข้าสู่หน้าต่างการทำงาน
• หน้าต่างการทำงาน

Chapter 2: รู้จัก Function การใช้งาน

• ทำความรู้จักส่วนประกอบ (component) ต่างๆ ของ Thunkable เพื่อนำไปใช้พัฒนาแอปฯ

หน้าต่างการทำงานโดยรวม

• Menu: แหล่งรวมคำสั่งเกี่ยวกับการสร้างแอพ, เรียกใช้แอพ, เชื่อมต่อกับมือถือ, Export แอพ
• Palette: แหล่งรวม Component แบ่งตามหมวดหมู่ เช่น User Interface, Layout, Media, Animation
• Viewer: พื้นที่แสดงผลบนหน้าจอมือถือ (Screen1)
• Components: ส่วนโปรแกรมที่ถูกใส่ใน Viewer, สามารถเขียนโค้ดเพื่อให้โปรแกรมทำงาน
• Media: เพิ่มไฟล์สื่อต่างๆ เช่น รูปภาพ, เสียง, Font
• Properties: คุณสมบัติต่างๆ ของส่วนโปรแกรม, สามารถแก้ไขเพิ่มเติมข้อมูลได้

ชุดเครื่องมือใน Palette

User Interface

• Button: ปุ่มสำหรับกดหรือสัมผัส
• CheckBox: ทำเครื่องหมายถูก/เลือกข้อมูล
• Date Picker: ปฏิทินสำหรับเลือกวันเดือนปี
• Image: เลือกรูปภาพ
• Label: ข้อความในแอปฯ
• List Picker: รายการให้เลือก
• List View: รายการให้เลือก
• Notifier: การแจ้งเตือน
• Password TextBox: ป้อนรหัสผ่าน
• Slider: สไลด์
• Spinner: รายการให้เลือก
• Text Box: กล่องป้อนข้อความ
• Time Picker: เลือกเวลา
• Web Viewer: แสดงหน้าเว็บ

Layout

• Horizontal Arrangement: จัดวาง Component แนวนอน
• Horizontal Scroll Arrangement: จัดวาง Component แนวนอน, มี Scroll เลื่อนข้าง
• Table Arrangement: จัดวาง Component แบบตาราง
• Vertical Arrangement: จัดวาง Component แนวตั้ง
• Vertical Scroll Arrangement: จัดวาง Component แนวตั้ง, มี Scroll เลื่อนลง

Media

• Camcorder: กล้องบันทึกวีดีโอ
• Camera: ถ่ายภาพ
• Image Picker: เลือกภาพ
• Player: เครื่องเล่นเพลง
• Sound: ใส่เสียง
• Sound Recorder: บันทึกเสียง
• Speech Recognizer: เสียงพูด
• Text-to-Speech: แปลงข้อความเป็นเสียง
• Video Player: เล่นวิดีโอ
• Yandex Translate: แปลภาษา

Drawing & Animation

• Ball: บอล
• Canvas: พื้นที่สำหรับวาด
• Image Sprite: ตัวละครเคลื่อนไหว

Sensors

• Accelerometer: วัดความเร็ว
• Barcode Scanner: สแกนบาร์โค้ด
• Clock: ตัวตั้งเวลา
• Gyroscope: จับการหมุนของมือถือ
• Location Sensor: พิกัดตำแหน่ง
• NFC Sensor: เชื่อมต่อ NFC
• Orientation Sensor: ตรวจการตั้งของมือถือ
• Pedometer: นับระยะก้าวเดิน
• Proximity Sensor: เซนเซอร์ตรวจจับ

Social

• Contact Picker: เลือกรายชื่อผู้ติดต่อ
• Email Picker: เลือกอีเมลผู้ติดต่อ
• Phone Call: การโทร
• Phone Number Picker: เลือกหมายเลข
• Sharing: แชร์ไปยังสื่อต่างๆ
• Texting: แสดงข้อความ
• Twitter: แชร์ไปยัง Twitter

Store

• File: จัดการไฟล์ข้อมูลในเครื่อง
• Tiny DB: จัดการ Data Base

Connectivity

• Bluetooth Client: แม่ข่ายบลูทูธ
• Bluetooth Client: ลูกข่ายบลูทูธ
• Web: เชื่อมต่อเว็บไซต์

ชุดคำสั่งในส่วนของ Block

• Built-in: ส่วนของ Block Code ที่ใช้สั่งการแอปพลิเคชั่น
• Screen: รวบรวม Component ต่างๆ ที่อยู่ในแอปพลิเคชั่นของเรา
• Bag: ลาก Block Code มาใส่เพื่อเก็บ Code ไว้ใช้ใน Screen ใหม่
• ส่วนสำหรับลบ Block Code ที่ไม่ได้ใช้งานออกไป

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

สร้างแอพ Hello World

• ตั้งชื่อ Title ของ Screen1 เป็น Hello World ใน Properties

ขั้นตอนการปรับขนาดหน้าจอ

• ตั้งค่า Sizing เป็น Responsive เพื่อปรับขนาดหน้าจอให้เหมาะสมกับทุกอุปกรณ์
• ตั้งค่า Screen Orientation เป็น Portrait เพื่อแสดงผลในแนวตั้ง
• สามารถปรับค่าอื่นๆ เช่น สีพื้นหลัง (Background Color), ภาพพื้นหลัง (Background Image)

การสร้าง Label และข้อความ

• ลาก Label ใน Palette User Interface
• เปลี่ยนข้อความใน Label1 โดยตั้ง Text เป็น “สวัสดีชาวโลก” ใน Properties
• เปลี่ยนขนาดข้อความใน Label1 โดยตั้ง Font Size เป็น 20 ใน Properties

การใส่รูปภาพ

• ลาก Image ใน Palette User Interface มาใส่ในหน้าจอ Viewer
• เลือกภาพ โดยเลือก Image1 ใน Components แล้วเลือก Picture ใน Properties
• เลือกภาพที่มีอยู่แล้ว หรือ Upload File หากไม่มี

การสร้างปุ่ม Exit

• ลาก Button ใน Palette User Interface มาใส่ในหน้าจอ Viewer
• แก้ไขข้อความใน Button โดยเลือก Button1 ใน Components แล้วแก้ Text เป็น “Exit”

การใส่ Code เพื่อสั่งการ

• การใส่ Code จะเป็นแบบ Block Editor ซึ่งง่ายสำหรับผู้เริ่มต้น
• ในส่วนของหน้าต่างการทำงานของ Block ทางด้านซ้ายมือจะมี Screen1 ซึ่งรวม Components ที่เราใส่ในแอปพลิเคชั่น - ในส่วน Button1 เท่านั้นที่มีการทำงาน
• ให้คลิก Button1 และเลือก Block “When Button1 Click” แล้วคลิกเม้าส์ค้างไว้ลากมาใส่หน้าจอการทำงาน
• เลือก Built-in คลิก Control เลือก Block “Close Application” คลิกเม้าส์ค้างไว้แล้วลาก Block “Close Application” มาใส่ใน Block “When Button1 Click”

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

• เลือกเมนู Test แล้วเลือก Thunkable Live
• เปิดโทรศัพท์แล้วเข้าไปที่แอพพลิเคชั่น
• Thunkable แล้วสแกน QR Code หรือนำ Code ที่ได้ไปป้อนในแอพพลิเคชั่น

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

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

Chapter 4: สร้างแอพพลิเคชั่นวาดภาพ

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

เตรียมทรัพยากร (ปุ่มต่างๆ) จาก www.flaticon.com

• Palette
• paintbrush
• save
• bin

ตั้งค่า Properties ของ Screen1

• ลาก Horizontal Arrangement แล้วเซ็ตค่า Horizontal Arrangement
• ลาก Button (4ปุ่ม) และ Label (4ปุ่ม) ลงใน Horizontal Arrangement
• ลาก Horizontal Arrangement แล้วเซ็ตค่าHorizontal Arrangement

สร้าง Slider และ ปุ่ม

• ลาก Vertical Arrangement
• ลาก Slider (3ปุ่ม) ลงใน Vertical Arrangement -> เพื่อใช้กำหนดค่าสี
• ลาก Button ลงใน Vertical Arrangement -> เพื่อใช้กำหนดสี (แดง เขียว น้ำเงิน)

Canvas และปุ่ม Notifier

• ลาก Canvas แล้วเซ็ตค่า canvas
• ลาก Notifier ลงใน Canvas

ขั้นตอนการตั้งค่าต่างๆ

• ตั้งค่า Button (palette brush save clear และred green blue), horizontal arragement และตั้งชื่อ component
• Canvas1 height กับ width เป็น Fill parent
• HorizontalArragement2 visible ติ๊กเครื่องหมายถูกออก
• เซ็ต When click ของเมื่อกด palette
• เซ็ต เมื่อมีการเปลี่ยนแปลง slider สี

ตัวอย่าง code เพิ่มเติม

• เมื่อมีการกด brush
• เมื่อมีการ clear