ทำความรู้จัก App Maker ผ่าน tutorial (ตอนที่ 1)

หลังจากเปิดให้ลูกค้า G Suite Business ลงชื่อทดสอบใช้งาน App Maker ใน Early Adopter Program แล้ว วันนี้เราจะมาดูรายละเอียดการใช้งานและความสามารถของ App Maker ให้ละเอียดมากขึ้น ผ่าน tutorial 6 บท ที่ Google เตรียมไว้ให้ผู้ใช้สามารถเรียนรู้ได้ด้วยตนเอง

หมายเหตุ: บทความนี้ ไม่ใช่การสรุปเนื้อหาและเรียบเรียงออกมาใหม่ แต่จะเป็นลักษณะของการบันทึกรายละเอียดของ App Maker ตามลำดับของเนื้อหาใน tutorial เนื้อหาจึงไม่ได้ถูกร้อยเรียงให้ต่อเนื่องกันตลอด และจะมีลักษณะเป็นการแสดงรายละเอียดเป็นจุดๆ ซึ่งผู้ใช้คนอื่นที่เรียนรู้ผ่าน tutorial นี้ด้วยตนเอง ก็จะมีจุดสังเกตุที่แตกต่างกันไป แต่บทความนี้น่าจะช่วยให้การทบทวนเนื้อหาในแต่ละ tutorial นั้น สะดวกและกระชับมากยิ่งขึ้น

Tutorial 1: Hello App Maker!

https://developers.google.com/appmaker/tutorials/hello-appmaker/

การสร้าง app ใน App Maker เหมือนการสร้างเอกสาร เพียงแค่กด Create New App เราก็จะได้หน้าจอสำหรับเริ่มสร้าง app

การตั้งชื่อ app สามารถทำได้เหมือนการตั้งชื่อเอกสารใน Google Docs คือการพิมพ์ชื่อ app ลงในช่องด้านซ้ายบน ส่วนการตั้งชื่อ page สามารถกดจากเมนูหลังชื่อ page และลือก Rename

การใส่ widget เช่น textbox, button, label (และอื่นๆ) สามารถลากจากเมนู Windgets ด้านซ้ายมาวางตรง canvas (พื้นที่แสดงผล) โดย widget แต่ละตัวจะมี property ให้เราจำหนดค่า เช่น name สำหรับการอ้างอิงมาที่ widget นั้นๆ , label สำหรับแสดงข้อความบน widget, action สำหรับใส่คำสั่งให้ widget (เช่นการกดปุ่ม)

เราสามารถกำหนด action เมื่อมีการกดปุ่ม โดยกำหนดที่ property ของ widget นั้นๆ ที่หัวข้อ Events > onClick

ระหว่างการสร้าง app สามารถกดปุ่ม Preview ที่มุมขวาบน เพื่อทดสอบหน้าตาและการทำงานของ app ได้

ตัวอย่างการอ้างอิงไปที่ widget ด้วย script โดยอ้างอิงแบบ relative path ซึ่งจะอ้างอิงโดยเริ่มต้นจาก widget.* และกำหนดค่าเพื่อให้ widget แสดงผล

ตัวอย่างการอ้างอิงไปที่ widget ด้วย script โดยอ้างอิงแบบ absolute path ซึ่งจะตั้งต้นการอ้างอิงที่ app.*

Tutorial 2: Work with Data

https://developers.google.com/appmaker/tutorials/work-with-data/

สร้าง data model สำหรับใช้งานใน app โดยกด + ด้านหลัง DATA ในเมนูทางซ้าย และเลือก Google Drive Table

กำหนดชื่อ field และประเภทของข้อมูลใน field (มีให้เลือก 4 ประเภทคือ string, number, boolean, date)

การสร้าง form ใน app สามารถลากจากเมนู widget ทางด้านซ้ายมาได้เลย App Maker จะขึ้นถามให้เราผูก form กับ datasource เพื่อแสดงผลข้อมูลใน form จาก datasource นั้นๆ

สำหรับ table สามารถสร้างด้วยวิธีเดียวกับ form คือลากจากเมนู widget ทางด้านซ้ายมาได้เลย App Maker จะขึ้นถามให้เราผูก table กับ datasource เพื่อแสดงผลข้อมูลจาก datasource นั้นๆ

form และ/หรือ table ที่ผูกกับ datasource ไว้ จะมีการทำ binding มาให้เลย โดยสังเกตุจากสัญลัษณ์รูปดาวในช่อง property ของ widget ใจตัวอย่าง เรากำลังดู property ของ widget ที่อยู่ข้างใน form

การ binding ของ label ของ widget นั้น จะอ้างอิงไปที่ datasource ที่เลือกไว้ ไล่ไปตาม field (มีต่อ)

(ต่อ) ไล่ต่อไปจนถึง property ของ field นั้นๆ ให้ทำความเข้าใจลำดับการอ้างอิงเอาไว้ เนื่องจากจะมีการใช้งานใน tutorial ต่อๆ ไป

ตัวอย่าง script ที่กำหนดใน event OnClick ของปุ่ม CREATE คือจะเป็นการสร้าง item เข้าไปใน datasource

form ด้านซ้ายเป็น edit form ส่วนด้านขวาจะเป็น insert form ความแตกต่างคือ edit form จะใช้ในการแก้ไขข้อมูลใน datasource เหมาะสำหรับเตรียมให้ admin ของ app เข้ามาจัดการข้อมูล ส่วน insert form จะใส่ข้อมูลใหม่ได้อย่างเดียว ไม่สามารถแก้ไขข้อมูลที่มีอยู่ได้ เหมาะสำหรับให้ผู้ใช้ หรือ admin ที่ทำหน้าที่ใส่ข้อมูล เข้ามาเพิ่มข้อมูลได้ 

จบตอนที่ 1 ครับ
โปรดติดตามตอนต่อไป
---
www.tangerine.co.th