Benjamarachutit School
Computing Sciene
M.3
4.8 การบันทึกข้อมูลใน AIRTABLE
ขั้นตอนที่ 1 Create New App ตั้งชื่อ New Project Name ว่า Sheets จากนั้นนำเครื่องหมายถูกในช่อง Try it out ออกแล้ว กด Create
ขั้นตอนที่ 2 ตกแต่งพื้นหลังให้สวยงามโดยไปที่ BackgroundColor แล้วเลือกสีตามที่ต้องการ
ขั้นตอนที่ 3 จากนั้นลากปุ่ม Button ลงบนหน้าของ Screen 1 แล้วเปลี่ยนชื่อปุ่มเป็น Submit แล้วทำการปรับขนาดของปุ่ม Button โดยไปที่ Width แล้วเลือก Relative Size (e.g.”50%”) โดยตรง Fit contents ให้ใส่ตัวเลข % ตามที่เราต้องการ
ขั้นตอนที่ 4 จากนั้นลาก Text Input มาวาง แล้วทำการเปลี่ยนชื่อจาก Text_Input1 เป็น Text_InputName เพื่อใช้สำหรับการป้อนชื่อ ต่อจากนั้นให้ Duplicate Text Input เพื่อสร้างอีกอันนึงขึ้นมา แล้วเปลี่ยนชื่อเป็น Text_InputTelephone
ขั้นตอนที่ 5 ทำการลาก Label ใส่หน้าจอตรงใต้ปุ่ม Submit เพื่อตรวจสอบสถานะว่า Submit ผ่านหรือไม่ แล้วให้ทำการเปลี่ยนชื่อเป็น Label_Feedback
ขั้นตอนที่ 6 ทำการกำหนด Padding ของ Text_InputName และ Text_InputTelephone เป็น Bottom 5 px และกำหนด Margin ของปุ่ม Submit เป็น Top 5 px และ Bottom 5 px
ขั้นตอนที่ 7 ลาก Airtable ใส่หน้าจอ ซึ่งมันจะขึ้นอยู่ด้านล่างของหน้าจอในส่วนของ Invisible Components
ขั้นตอนที่ 8 สิ่งจำเป็นเลยก็คือเราจะต้องใส่ข้อมูลลงใน Spreadsheet โดยให้เราเข้าโปรแกรม Google Chrome (หรือโปรแกรมเว็บเบราว์เซอร์อื่น ๆ ก็ได้) แล้วพิมพ์ชื่อเว็บไซต์ airtable.com จากนั้นแล้วให้เรา Sign in เข้าไป (ถ้าเรามีบัญชีแล้ว) หรือถ้ายังไม่มีก็ไปที่ Sign up เพื่อสร้างบัญชีขึ้นมา
* หลังจากใช้เมลสมัครเสร็จแล้วจะมีหน้าต่างเด้งขึ้นมา ให้กดอนุญาติ แล้วจากนั้นจะมีหน้าต่างเด้งขึ้นมา กดskip จนกว่าหน้าจอไม่เด้ง *
ขั้นตอนที่ 9 เมื่อเข้ามาแล้วให้เราคลิกเลือก Add a base ต่อมาไปที่ Start from scratch ก็คลิกเข้าไป เสร็จแล้วให้ทำการตั้งชื่องานของเรา (ของผู้จัดทำตั้งชื่อว่า My Data) และเราสามารถเลือกสีไอคอนหรือรูปไอคอน (จะไม่โชว์ชื่องานของเรา) ได้
ขั้นตอนที่ 10 ให้เราคลิกเข้าไอคอนงานที่เราพึ่งสร้างจากขั้นตอนที่แล้ว เมื่อเข้ามาเราจะพบว่ามีตารางสร้างขึ้นมาบนหน้าจอของเราให้เรียบร้อย ซึ่งจะมีแถวให้เรามา 3 แถว คอลัมน์ 3 คอลัมน์ จากนั้นแล้วเราจะต้องแก้ Field ให้ตรงกับข้อมูลใน Thunkable ที่เราตั้งไว้ (ชื่อและเบอร์โทร) โดย Field แรกจะต้องเป็น Name (ไม่ต้องไปแก้ไขอะไรเพราะมีให้เรียบร้อยแล้ว) และ Field ที่สองเป็น Telephone โดยเราไปที่ Field ที่สอง จากนั้นคลิกที่ Note ต่อมาคลิกตรงมุมสามเหลี่ยมเล็ก ๆ แล้วเลือก Rename Field ก็พิมพ์คำว่า “Telephone” ลงไปแล้ว Save
ขั้นตอนที่ 11 ต่อด้วยเราจะต้องทำการลิงค์ Thunkable กับ Airtable ให้เข้าด้วยกัน (Thunkable ต้องการ APIKey) โดยไปที่หน้า Airtable แล้วคลิกที่ไอคอนรูปคนตรงหัวมุมขวาบน แล้วคลิกที่ Account เมื่อเข้ามาหน้านี้แล้วจะมีบอกค่า API และให้เราทำการก็อปค่า API และกลับมาที่หน้า Thunkable เพื่อวางลงในช่อง APIKey
ขั้นตอนที่ 12 ส่วนที่ต้องการต่อไปนั่นก็คือ BaseID ให้เรากลับไปที่หน้า Airtable แล้วไปที่ HELP แล้วคลิกเข้าไปที่ API documentation จากนั้นแล้วให้ไปที่ JavaScript และเลื่อนลงมาตรงที่มีบรรทัดที่เขียนว่า const base โดยให้เราก็อปเอาค่าในวงเล็บข้างหลัง ดังภาพ นำไปวางในช่องของ BaseID ใน Thunkable
ขั้นตอนที่ 13 และส่วนที่ต้องการต่อไปเป็นอย่างสุดท้ายนั่นก็คือ TableName ให้เรากลับไปที่หน้า Airtable ข้างบนซ้ายมือจะมีชื่อว่า Table 1 ซึ่งเราสามารถเปลี่ยนชื่อได้โดยการกดมุมสามเหลี่ยมเล็ก ๆ ที่อยู่ข้าง ๆ และกด Rename table พอเราได้ Table 1 หรือชื่อที่เราต้องการ ให้เราก็อปชื่อแล้ววางในช่องของ TableName ใน Thunkable และในส่วนช่อง ViewName ไม่ต้องเปลี่ยนหรือไปสนใจ
ขั้นตอนที่ 14 ให้เราเปลี่ยนชื่อ Button 1 เป็น btnSubmit ต่อไปคราวนี้ให้เราไปที่ Blocks เพื่อทำการใส่โค้ด โดยให้เราไปที่ btnSubmit แล้วนำ when btnSubmit Click มาลากวางบนหน้า จอ
ขั้นตอนที่ 15 ต่อไปให้ไปที่ Airtable 1 แล้วนำ call Airtable 1 's CreateRow ลากมาวางต่อในช่องของ when btnSubmit Click และให้เราไปที่ Object แล้วนำ Create object มาลากวางใส่ต่อตรง rowObject
ขั้นตอนที่ 16 คลิกที่รูปฟันเฟืองแล้ววางบล็อกลงไป 2 อัน แล้วเปลี่ยนชื่อเป็น Name อีกอันนึงเป็น Telephone และไปที่ Text_Inputname แล้วนำ Text_Inputname 's Text มาวางต่อที่หลัง Name แล้วนำ Text_Inputname 's Text มาวางต่อที่หลัง Telephone
ขั้นตอนที่ 17 ต่อไปให้ไปที่ Control โดยนำ if do ลากมาวางในตรงช่อง then do แล้วเอา Error ลากใส่ช่อง if แล้วนำ set Label_Feedback 's Text to มาวางที่ do ต่อด้วยนำ Error มาวาง และต่อมาให้ไปที่ฟันเฟืองเพื่อลาก else มาวางต่อจาก do แล้วนำ from Label_Feedback set Text to มาวางที่ else ต่อด้วยนำ Text มาวางแล้วพิมพ์ว่า Success แล้ววางต่อข้างล่างด้วย from Text_Input1 set Text to และ from Text_InputTelephone set Text to
เมื่อทำในขั้นตอนที่ 17 แล้ว ก็ถือว่าเป็นอันเสร็จสิ้น
