top of page

4.2รู้จัก FUNCTION การใช้งาน

4.1h.png

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

รู้จัก Function การทำงานของ Thunkable

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

4.2c.png

              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​

4.2d.png

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

4.2e.png

Top Tab Navigator = ช่วยให้ผู้ใช้สลับไปมาระหว่างหน้าจอต่าง ๆ โดยคลิกที่แถบด้านบน

Bottom Tab Navigator = สลับไปยังหน้าจออื่นโดยใช้เนวิเกเตอร์แท็บด้านล่าง

Stack Navigator = สร้างแถบส่วนหัวในทุกหน้าจอ สามารถเพิ่มชื่อเรื่องลงในแถบนี้โดยไปที่คุณสมบัติหน้าจอ

Drawer Navigator = นำทางไปยังหน้าจอที่แตกต่างกันโดยใช้ลิ้นชักที่คลิกได้ ซึ่งเลื่อนออกมาจากด้านข้าง

Screen = หน้าจอว่าง

Row = สร้างแถว

Column = สร้างคอลัมน์

2.3 Voice

4.2f.png

Sound = ใส่เสียง

Text To Speech = แปลงข้อความเป็นเสียง

Speech Recognizer = เสียงพูด

Translator = แปลภาษา

Assistant = ตัวผู้ช่วยโดย Google โดยพูดใส่ไมโครโฟน

Audio Recorder = บันทึกเสียง

2.4 Image

4.2g.png

Image = ใส่รูปภาพ

Photo Library = แสดงรูปภาพในอัลบั้ม

Camera = ถ่ายภาพ

Barcode Scanner = สแกนบาร์โค้ดหรือ QR โค้ด

Image Recognizer = ระบบจดจำรูปภาพ

Animation = สร้างภาพเคลื่อนไหว

Video = เล่นวิดีโอบนแอป

2.5 Data

4.2h.png

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

4.2i.png

Map = แผนที่

Location Sensor = พิกัดตำแหน่ง

2.7 Sensors

4.2j.png

Timer = ตัวจับเวลา

Accelerometer = วัดแรงของการเร่งความเร็วที่กระทำกับโทรศัพท์

Gyroscope = วัดความเร็วของโทรศัพท์ที่กำลังเปิด วัดอัตราการหมุนของโทรศัพท์และส่งกลับค่าในเรเดียนต่อวินาที

Magnetometer = เครื่องวัดสนามแม่เหล็กใช้สำหรับวัดความหนาแน่นฟลักซ์แม่เหล็ก

Bluetooth Low Energy = ใช้เพื่อเชื่อมต่ออุปกรณ์สองเครื่องเข้าด้วยกันแบบไร้สาย

2.8 Social

4.2k.png

Share = แชร์ไปยังสื่อต่าง ๆ

Push Notification = การแจ้งเตือนแบบพุช

2.9 Authentication

4.2l.png

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

2.10 Monetization

4.2m.png

AdMob  Interstitial = โฆษณาคั่นระหว่างหน้า

AdMob Rewarded Video = โฆษณาวิดีโอรับรางวัล

AdMob Banner = ป้ายโฆษณา

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

 3.1 ภาพรวมของส่วนหน้าต่างการทำงานเกี่ยวกับ Code ของแอปพลิเคชัน

4.2n.png

  1) Built-in คือ ส่วนของ Block Code ต่าง ๆ ที่ใช้ในการสั่งการแอปพลิเคชัน

  2) ส่วนของ Screen ที่รวบรวม Components ต่าง ๆ ที่อยู่ในแอปพลิเคชันของเรา

  3) Bag ส่วนที่เราสามารถลาก Block Code มาใส่เพื่อเก็บ Code ไว้ใช้ใน Screen ใหม่ได้

  4) ส่วนสำหรับลบ Block Code ที่เราไม่ได้ใช้งานออกไปโดยการลากมาใส่

   3.2 Control

4.2o.png

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

3.3 Logic

4.2p.png

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

3.4 Math

4.2q.png

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

3.5 Text

4.2r.png

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

 3.6 List

4.2s.png

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

3.7 Color

4.2t.png

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

3.8 Device

4.2u.png

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

3.9 Objects

4.2v.png

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

3.10 Variables

4.2w.png

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

3.11 Functions

4.2x.png

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

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

4.1h.png
—Pngtree—uniformed pupils_3282575.png
bottom of page