สร้าง Mobile App ง่ายๆ ทั้ง iOS และ Android แค่ลากวางด้วย Thunkable Part 3
จากใน Part 2 ที่เราสร้าง UI ของ App เรากันแล้ว ในส่วนของ Part นี้จะเป็นการใส่ Logic บ้างครับ
ใส่ Logic ให้ App ของเราโดยที่ไม่ต้องเขียน Code สักตัวอักษรเดียว
ขั้นแรกไปที่หน้า block นะครับ เราจะเจอหน้าแบบนี้
ซึ่ง Logic ของ App TodoList ของเราก็คือ เมื่อเรากด Add ข้อความที่เราพิมพ์ใส่ TextInput จะไปขึ้นมาอยู่ใน List ของเรา
ดังนั้นเราจะมีขั้นตอนดังนี้
- สร้างตัวแปร List ขึ้นมา ชื่อ todos
- Set ค่าเริ่มต้นของตัวแปร todos ให้เป็น list ว่าง
- เมื่อ button1 ถูก click ให้ทำเพิ่ม สิ่งที่อยู่ใน TextInput เข้าไปในตัวแปร todos และ set ให้ ListView ของเรามีค่าเป็นตัวแปร todos และจากนั้นก็ทำให้ ข้อความใน TextInput ของเราหายไป
มาเริ่มขั้นแรกกันเลย สร้างตัวแปร List ขึ้นมาชื่อ todos
เลือกตรงแถบ Variable ด้านข้างแล้วกด Create variable ใส่ชื่อ todos ไปจะได้เป็นแบบนี้
ขั้นถัดมา Set ค่าเริ่มต้นของตัวแปร todos ให้เป็น list ว่าง
เลือก Screen1 แล้วลาก When Screen1 Opens มาแปะ
จากนั้นเลือก Variable อีกครั้ง ลาก set todos to มาแปะตรงช่อง do
ตรงนี้หมายความว่า เมื่อ Screen1 ถูกเปิด เราจะ Set ตัวแปร todos ให้เป็นอะไรบางอย่าง ซึ่งเราต้องการจะให้เป็น List ว่าง ดังนั้น เราต้องไปกดที่แถบ Lists เพื่อนำ empty list มาแปะ
ในส่วนตรงนี้คือ เมื่อ Screen1 ถูกเปิด เราจะ Set ตัวแปร todos ให้กลายเป็น list ว่าง
ในขั้นสุดท้าย สร้าง logic ที่จะเพิ่ม todo ไปใน list และลบข้อความใน textinput เมื่อคลิก Button
เลือก Button1 แล้วลาก When Button1 Click มาแปะ
และลาก in list insert at last as มาแปะ ในส่วนนี้คือเมื่อ Button1 ถูกคลิก จะ insert บางอย่างไปในตำแหน่งสุดท้ายของ list
จากนั้นตรง in list เราจะใส่ list ของเราซึ่งก็คือตัวแปร todos ซึ่งลากจากแถบ Variable
ส่วนหลัง as เราต้องใส่สิ่งที่จะเพิ่มไปใน todos ซึ่งก็คือ ข้อความใน TextInput ซึ่งต้องไปลาก From TextInput1 get Text จากในแถบ TextInput1 ซึ่งหมายถึงการนำข้อความที่อยู่ใน TextInput1 ออกมา เอามาแปะหลังคำว่า as
จากตรงนี้ จะทำให้เมื่อ Button1 ถูก Click จะมีการ insert ข้อความใน TextInput1 เข้าไปในตำแหน่งสุดท้ายของตัวแปร todos ซึ่งทำให้ todos ของเรามีการอัพเดท
แต่ยังไม่จบครับ ตัวแปร todos ของเรา มีหน้าที่แค่เก็บข้อความ todo ของเราเฉยๆ เราต้องทำการ set ให้ ListView ของเรา มีค่าตามตัวแปร todos ด้วย เพื่อให้ข้อความใน todos ถูกแสดงผลออกมา
โดยเราจะไปลาก from List_Viewer1 set TexItems to จากแถบ List_Viewer1 ออกมาแปะต่อจากคำสั่งอันเก่า และนำตัวแปร todos จากแถบ Variable มาแปะต่อจากคำว่า to เพื่อบอกว่าจะ set ให้ List_Viewer1 มีค่าเป็นข้อความในตัวแปร todos
ในตอนนี้เมื่อกด Button1 ข้อความใน TextInput1 จะเข้ามาอยู่ใน List_Viewer1 แล้ว ตอนนี้ก็เหลือแค่ เคลียร์ค่าที่อยู่ใน TextInput1
ทำโดยการลาก From TextInput1 set Text to “ ” มาแปะต่อจากคำสั่งก่อนหน้า
ก็เป็นอันเสร็จนะครับ สำหรับส่วนของ Logic
มาลองเล่น App ของเรากันดู
เข้าแอพ Thunkable ใหม่อีกครั้งครับแล้วลองเล่นเลย
เป็นไงบ้างครับทุกท่าน ตอนนี้เราสร้าง App ของเราเองได้แล้ว โดยที่ไม่ต้องเขียนโค้ดเลย มี Logic สามารถกดได้ ประมวลผลได้เหมือนแอพทั่วไปครับ
ก็สิ้นสุด Part 3 นะครับ เดี๋ยวติดตามเรื่อง การโหลดแอพมาใส่เครื่องเรา การเชื่อมกับ Database และการ Deploy ขึ้น Store ได้ที่ Part อื่นๆหลังจากนี้นะครับ
