บทที่ 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 บางส่วนที่ ไม่ได้กล่าวถึง เพราะเป็นส่วนที่เจาะลึกลงไป ในส่วนที่กล่าวมาโดยเบื้องต้นนี้ จะเป็นพื้นฐานที่ผู้อ่านจะสามารถนําไปพัฒนาแอปพลิเคชันได้ในบทต่อไป

Leave a Comment