
Benjamarachutit School
Computing Sciene
M.3
4.2รู้จัก FUNCTION การใช้งาน

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

1. Menu เป็นแหล่งรวบรวมคำสั่งในการทำงานเกี่ยวกับแอป เช่น การสร้างแอปใหม่ เรียกใช้แอปที่เคยสร้างไว้ การเชื่อมต่อกับมือถือเพื่อจําลองการทำงาน การ Export แอปเพื่อนําไปใช้จริง เป็นต้น
2. Palette เป็นแหล่งรวบรวมส่วนโปรแกรม (Component) เอาไว้เป็นหมวดหมู่ (User Interface , Layout , Media , Animation , etc.) คลิกหมวดที่ต้องการ จะเห็นรายการส่วนโปรแกรมที่เราสามารถใส่เข้าไปบนโปรแกรมมือถือ ที่กําลังออกแบบนี้ได้ เช่น ในหมวด User Interface จะเห็นส่วนโปรแกรมปุ่ม (Button) ข้อความ (Label) รูปภาพ (Image) เป็นต้น
3. Viewer เป็นพื้นที่บนหน้าจอมือถือ (Screen 1) ทำให้เห็นภาพตอนออกแบบโปรแกรม เมื่อเราลากส่วนโปรแกรมมาใส่ในพื้นที่นี้
4. Components คือส่วนโปรแกรมที่ถูกใส่เข้าไปใน Viewer เป็นส่วนโปรแกรมที่เราต้องการให้มีอยู่ในโปรแกรมมือถือ และสามารถเขียนโค้ดเข้าไปในส่วนโปรแกรมเหล่านี้ได้ เพื่อให้โปรแกรมทำงานตามที่ต้องการ ด้านล่างติดกันเป็นส่วนของ Media เราสามารถเพิ่มไฟล์สื่อชนิดต่าง ๆ เช่น ไฟล์รูปภาพ ไฟล์เสียง แบบอักษร (Font) เข้าไปในโปรเจกต์เพื่อนําไปใช้ในโปรแกรมได้
5. Properties คือคุณสมบัติต่าง ๆ ของส่วนโปรแกรม เมื่อเราคลิกเลือกส่วนโปรแกรมใด ที่อยู่ใน Viewer หรือใน Components เราจะเห็นรายการคุณสมบัติของส่วนโปรแกรมนั้น โดยแต่ละส่วนโปรแกรมจะมีคุณสมบัติ ที่อาจจะเหมือนกันหรือแตกต่างกันออกไปก็ได้ ซึ่งเราสามารถแก้ไข เพิ่มเติม ข้อมูลลงไปในคุณสมบัติต่าง ๆ ที่มีได้
2. ชุดเครื่องมือใน Add Components
2.1 User Interface

Button = ปุ่มสำหรับกดหรือสัมผัส
Label = ข้อความในแอปพลิเคชัน
Text Input = กล่องสำหรับป้อนข้อความ
List Viewer = สามารถเพิ่ม ดู และคลิกที่รายการในลิสต์
Web Viewer = แสดงหน้าเว็บ
Switch = สวิตช์ สามารถเปิดและปิด
Slider = สไลด์
Alert = แสดงการแจ้งเตือน
Canvas = แบบสัมผัส ใช้ในการเลื่อน หรือวาดบนหน้าจอ
Loading icon = ไอคอนโหลด
Data Input = เลือกระบุวัน เดือน ปี
Time Input = เลือกระบุเวลา
PDF Reader = ดูและแสดงไฟล์ PDF
Data Viewer List = เชื่อมต่อข้อมูลจาก Google Sheets , Airtable
Data Viewer Grid = เชื่อมต่อข้อมูลจาก Google Sheets , Airtable เป็นรูปแบบช่อง
2.2 Layout

Top Tab Navigator = ช่วยให้ผู้ใช้สลับไปมาระหว่างหน้าจอต่าง ๆ โดยคลิกที่แถบด้านบน
Bottom Tab Navigator = สลับไปยังหน้าจออื่นโดยใช้เนวิเกเตอร์แท็บด้านล่าง
Stack Navigator = สร้างแถบส่วนหัวในทุกหน้าจอ สามารถเพิ่มชื่อเรื่องลงในแถบนี้โดยไปที่คุณสมบัติหน้าจอ
Drawer Navigator = นำทางไปยังหน้าจอที่แตกต่างกันโดยใช้ลิ้นชักที่คลิกได้ ซึ่งเลื่อนออกมาจากด้านข้าง
Screen = หน้าจอว่าง
Row = สร้างแถว
Column = สร้างคอลัมน์
2.3 Voice

Sound = ใส่เสียง
Text To Speech = แปลงข้อความเป็นเสียง
Speech Recognizer = เสียงพูด
Translator = แปลภาษา
Assistant = ตัวผู้ช่วยโดย Google โดยพูดใส่ไมโครโฟน
Audio Recorder = บันทึกเสียง
2.4 Image

Image = ใส่รูปภาพ
Photo Library = แสดงรูปภาพในอัลบั้ม
Camera = ถ่ายภาพ
Barcode Scanner = สแกนบาร์โค้ดหรือ QR โค้ด
Image Recognizer = ระบบจดจำรูปภาพ
Animation = สร้างภาพเคลื่อนไหว
Video = เล่นวิดีโอบนแอป
2.5 Data

Accelerometer = วัดความเร็ว
Local Storage = ที่เก็บข้อมูล
Local DB = เพิ่มตารางข้อมูลลงในแอป
Realtime DB = ตัวบันทึกสถิติคะแนนแบบเรียลไทม์
Airtable = เพิ่ม ลบ ตารางข้อมูลใน Airtable
Web API = สามารถดึงข้อมูลจากบริการสาธารณะหรือส่วนตัว API (อินเตอร์เฟซการเขียนโปรแกรมประยุกต์) บนเว็บ
Media DB = ติดตั้ง อัปโหลดสื่อมีเดีย
Smart Contract = เรียกใช้ Smart Contract จาก Oasis
Blockchain Wallet = เพิ่มข้อมูลเกี่ยวกับบัญชีของ Blockchain ลงในแอปพลิเคชัน
2.6 Location

Map = แผนที่
Location Sensor = พิกัดตำแหน่ง
2.7 Sensors

Timer = ตัวจับเวลา
Accelerometer = วัดแรงของการเร่งความเร็วที่กระทำกับโทรศัพท์
Gyroscope = วัดความเร็วของโทรศัพท์ที่กำลังเปิด วัดอัตราการหมุนของโทรศัพท์และส่งกลับค่าในเรเดียนต่อวินาที
Magnetometer = เครื่องวัดสนามแม่เหล็กใช้สำหรับวัดความหนาแน่นฟลักซ์แม่เหล็ก
Bluetooth Low Energy = ใช้เพื่อเชื่อมต่ออุปกรณ์สองเครื่องเข้าด้วยกันแบบไร้สาย
2.8 Social

Share = แชร์ไปยังสื่อต่าง ๆ
Push Notification = การแจ้งเตือนแบบพุช
2.9 Authentication

Sign in = ลงชื่อเข้าใช้อีเมล
2.10 Monetization

AdMob Interstitial = โฆษณาคั่นระหว่างหน้า
AdMob Rewarded Video = โฆษณาวิดีโอรับรางวัล
AdMob Banner = ป้ายโฆษณา
3. ชุดคำสั่งในส่วนของ Block
3.1 ภาพรวมของส่วนหน้าต่างการทำงานเกี่ยวกับ Code ของแอปพลิเคชัน

1) Built-in คือ ส่วนของ Block Code ต่าง ๆ ที่ใช้ในการสั่งการแอปพลิเคชัน
2) ส่วนของ Screen ที่รวบรวม Components ต่าง ๆ ที่อยู่ในแอปพลิเคชันของเรา
3) Bag ส่วนที่เราสามารถลาก Block Code มาใส่เพื่อเก็บ Code ไว้ใช้ใน Screen ใหม่ได้
4) ส่วนสำหรับลบ Block Code ที่เราไม่ได้ใช้งานออกไปโดยการลากมาใส่
3.2 Control

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

ส่วนที่รวบรวมคำสั่งต่าง ๆ ที่เกี่ยวก ับตรรกศาสตร์ จริงเท็จ การเปรียบเทียบ ต่าง ๆ
3.4 Math

ส่วนที่รวบรวมคำสั่งต่าง ๆ ที่เกี่ยวกับคณิตศาสตร์ จำนวน ตัวเลข การคำนวณ บวก ลบ คูณ เป็นต้น
3.5 Text

ส่วนที่รวบรวมคำสั่งต่าง ๆ ที่เกี่ยวกับการทำงานกับข้อความ
3.6 List

ส่วนที่รวบรวมคำสั่งต่าง ๆ ที่เกี่ยวกับการทำงานกับลิสต์ การดึงข้อมูลจากไฟล์ต่าง ๆ มาในรูปของลิสต์
3.7 Color

ส่วนที่รวบรวมคำสั่งต่าง ๆ ที่เกี่ยวกับสี การสั่งการให้เปลี่ยนสี Components ต่าง ๆ เช่น สีพื้นหลัง สีปุ่ม สีข้อความ เป็นต้น
3.8 Device

ส่วนที่จะรวบรวมข้อมูลที่เป็นประโยชน์จากอุปกรณ์ (Android / iOS , ออนไลน์ / ออฟไลน์ , เวลาและวันที่) รวมทั้งตั้งค่าโทรศัพท์ให้สั่น
3.9 Objects

ส่วนที่มักจะส่งข้อมูลในรูปแบบวัตถุ ส่งข้อมูลที่ต้องการไปยังสเปรดชีตข้อมูลที่จะอยู่ในรูปแบบวัตถุเพื่อให้สามารถอัปโหลดเป็นแถวได้
3.10 Variables

ส่วนที่รวบรวมคำสั่งต่าง ๆ ที่เกี่ยวกับตัวแปร การประกาศตัวแปร การรับค่าตัวแปร
3.11 Functions

ส่วนที่รวบรวมคำสั่งต่าง ๆ ที่เกี่ยวกับส่วนการทำงานย่อย ๆ ของ Code
ในส่วนของการใช้งานอื่น ๆ จะเป็นพื้นฐานที่สามารถเรียนรู้และเข้าใจได้ง่าย อาทิเช่น ส่วนของ Properties ส่วนนี้จะแตกต่างกันออกไปตาม Components ที่เลือกแต่การปรับแต่งในส่วนนี้จะไม่ซับซ้อนมาก นัก เช่น การเปลี่ยนสี ปรับขนาดวัตถุ ขนาด อักษร แบบอักษร ใส่รูปภาพ เป็นต้น และใน Palette บางส่วนที่ ไม่ได้กล่าวถึง เพราะเป็นส่วนที่เจาะลึกลงไป ในส่วนที่กล่าวมาโดยเบื้องต้นนี้ จะเป็นพื้นฐานที่ผู้อ่านจะสามารถนําไปพัฒนาแอปพลิเคชันได้ในบทต่อไป

