แนะนำ tip (ส่วนตัว) ในการสร้าง app ด้วย App Maker

หลังจากที่ผมได้ใช้งาน App Maker มาระยะหนึ่ง ได้สร้าง app ที่มีการใช้งานแบบจริงจัง ราว 5 app (หนึ่งในนั้นคือ app ขอ OT ที่เคยพูดถึง) ทำให้ผมเจอ pattern บางอย่างที่ผมใช้ในการสร้างแต่ละ app ผมเลยยึดถือเป็น practice ส่วนตัว และนำมาเล่าให้ฟังกัน อาจจะไม่ใช่ practice ที่ดีนัก แต่น่าจะเป็นประโยชน์สำหรับผู้เริ่มต้น

เริ่มต้นสร้าง app จาก Starter App

เมื่อต้องการสร้าง app แทนที่จะเริ่มสร้างจาก Blank Application ซึ่งเราต้องสร้างทุกอย่างขึ้นมาใหม่ทั้งหมด ให้ลองสร้างจาก Starter App แทน เนื่องจาก template นี้มี component พื้นฐานเตรียมให้เราใช้งานได้เลย เช่น menu, header และ page นอกจากนี้ template นี้ยังออกแบบมาให้เป็น responsive ด้วย ทำให้ app ที่เราสร้าง รองรับหน้าจอหลายขนาดได้เลย

เลือก template เป็น Starter App ช่วยให้เขียน app ได้สะดวกขึ้น

Starter App มี Header และ Menu มาให้เราใช้งานได้เลย

บอกสถานะการทำงานด้วย loading indicator และ notification dialog 

app ที่ดี ควรจะสื่อสารกับผู้ใช้งาน ว่าตอนนี้ app กำลังทำงานอยู่ ให้รอก่อน หรือว่าทำงานเสร็จแล้ว และทำงานได้เรียบร้อยดี หรือทำงานแล้วเกิดข้อผิดพลาด (error) อะไรบ้าง

ใน App Maker เราสามารถสื่อสารสิ่งเหล่านี้ได้ดังนี้ 

• Modal Loading Indicator สำหรับการบอกให้ผู้ใช้รู้ว่า app กำลังทำงานอยู่ ให้รอก่อน
• Notification Dialog สำหรับสื่อสารกับผู้ใช้ กรณีที่ app ทำงานสำเร็จ หรือทำงานผิดพลาด

หน้าจอการสร้าง Modal loading indicator

ตัวอย่างของหน้า loading ที่แสดงให้ user รู้ว่า app กำลังทำงานอยู่

หน้าจอการสร้าง Notification dialog

หน้าจอ notification dialog สำหรับแสดงข้อความให้ผู้ใช้

สถานการณ์ที่ผมจะใช้ Modal Loading Indicator คือทุกครั้งที่มีการโหลดข้อมูล หรือทุกครั้งที่ผู้ใช้กดปุ่ม ผมจะแสดง Modal Loading Indicator ก่อน แล้วจึงเรียก function ที่ต้องการ เมื่อ function นั้นทำงานเสร็จค่อยปิด Modal Loading Indicator และแสดง Notification Dialog พร้อมข้อความที่ต้องการ ทั้งกรณีที่ function ทำงานได้เรียบร้อย และกรณีที่ function เกิดข้อผิดพลาด

แยก client script และ server script สำหรับแต่ละ page

การสร้าง script ใน App Maker สามารถแยกได้เป็น 2 กลุ่มคือ client script และ server script (ดูเพิ่มเติมได้ที่ ทำความรู้จัก App Maker ผ่าน tutorial (ตอนที่ 2) หัวข้อ Tutorial 4: Call Scripts)

กรณีที่ app ที่ผมสร้างมีหลายหน้า ผมจะแยก client script และ server script สำหรับแต่ละหน้าออกมาต่างหาก ซึ่งไม่มีปัญหาแต่อย่างใด เพราะ client script สามารถเรียกได้หมด ไม่ว่าจะอยู่ที่ไฟล์ไหน เช่นเดียวกับ server script ที่สามารถเรียกใช้งานได้ทั้งหมดเช่นเดียวกัน

แต่ละหน้าจะมี client_script และ server script ของตัวเอง เพื่อความสะดวกในการเขียน code

ตัวอย่างเช่น หาก app นั้นมี 3 หน้า ผมจะมี client script 3 ไฟล์ และ server script อีก 3 ไฟล์ โดยแต่ละหน้าจะมี client script และ server script เป็นของตนเอง วิธีการนี้อาจจะยุ่งยากในตอนต้น เพราะต้องสร้างไฟล์เยอะ แต่จะสะดวกมากหากเราต้องกลับมาแก้ code ของแต่ละหน้า เพราะเราแยกส่วนกันไว้ตั้งแต่แรก ทำให้การดูแล code ในระยะยาว เสียเวลาน้อยกว่ามาก

เขียน fail และ success ทุกครั้งที่เรียก server script

กรณีที่เรามีการเรียก server script จากฝั่ง client script ซึ่งเราจะเรียกด้วยคำสั่ง google.script.run ให้เรากำกับพฤติกรรมของ app ในกรณี function เกิดข้อผิดพลาดด้วย .withFailureHandler() และกรณี function ทำงานได้สำเร็จ ด้วย .withSuccessHandler

ตัวอย่าง pattern ของการเรียก google.script.run โดยรองรับทั้งกรณีมี error และรันสำเร็จ

โดยทั่วไปเราเพียงแค่สั่งปิดหน้า loading และแสดง notification dialog ด้วย .withFailureHandler() และ .withSuccessHandler() เพื่อสื่อสารกับ user ให้ทราบสถานะได้ 

ใส่ page ใน menu

เมื่อเราเขียน page ใหม่เสร็จเรียบร้อยแล้ว Starter App ได้เตรียม menu เอาไว้ให้ เราสามารถเพิ่ม page ที่สร้างมาใหม่ลงใน menu ได้โดยการเลือกที่แถบหน้าเดิม (ตามรูปด้านล่าง) กด copy และ paste เราจะได้แถบเพิ่มขึ้นมา แก้ไขชื่อ page และใส่ action โดยเลือกที่ Events > onClick > Navigate to Page และเลือก page ที่ต้องการ

เพิ่มเมนูง่ายๆ โดยการ copy & paste

เราสามารถแก้ไข icon ในเมนูได้ โดยการแก้ text เป็นคำที่ระบุไว้ในหน้า Icons - Material Design

แก้ไขรูป icon ด้วยการเปลี่ยน text

สำหรับบทความนี้ คิดว่าน่าจะเป็นประโยชน์กับคนที่กำลังจะเขียน app ด้วย App Maker นะครับ ถ้าใครสนใจใช้งาน App Maker ไปสร้างเป็น app ภายในองค์กร สามารถติดต่อมาได้ที่ tangerine ครับ