Menu

Tips and Tricks : ในการสร้าง Application ด้วย 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 ครับ

Share on facebook
FB Share
Share on linkedin
LinkedIn

Vendors

Highlight Post

ทางเลือกใหม่ของ HCI ที่รองรับการใช้งานที่หลากหลาย

ทางเลือกใหม่ของ HCI ที่รองรับการใช้งานที่หลากหลาย

ในปัจจุบัน HCI มีการใช้งานอย่างแพร่หลาย เนื่องจากเป็นเทคโนโลยีที่มีความรวดเร็ว และง่ายในการติดตั้ง สามารถเริ่มต้นเล็กๆและขยายให้ใหญ่ได้ไม่ยาก (Scale Up and Scale Out) รวมทั้งง่ายในการจัดการ และเพิ่มประสิทธิภาพในการทำงานของผู้ใช้

ป้องกันสวมรอยอีเมล (Email Spoofing) ด้วย SPF, DKIM และ DMARC

ป้องกันสวมรอยอีเมล (Email Spoofing) ด้วย SPF, DKIM และ DMARC

Email Spoofing คือการสวมรอยอีเมลโดยระบุชื่อผู้ส่งเป็นโดเมนที่ต้องการสวมรอย ซึ่งการสวมรอยนั้น ทำได้ง่ายมาก เพื่อหวังผลการโจมตีในอีเมลนั้นอีกที

Prisma Cloud Security Suite

Prisma Cloud Security Suite

ปัจจุบันหน่วยงานต่างๆ มีการใช้งาน Cloud กันในรูปแบบที่หลากหลาย และโซลูชันด้านความปลอดภัยสำหรับ Cloud ก็มีให้เลือกใช้มากมายเช่นกัน แต่อาจจะไม่ครอบคลุม และไม่ตรงกับความต้องการทั้งหมด ล่าสุดนั้นมีโซลูชันด้าน Cloud Security ที่สามารถตอบโจทย์สำหรับการดูแลรักษาความปลอดภัยบนคลาวด์ได้ทั้งแบบ Multi-Cloud และ Hybrid Cloud ที่ครอบคลุมตั้งแต่ต้น โดยเริ่มจากการเข้าค้นหาข้อมูล ตลอดจนถึงแอพพลิเคชันอันเป็นทรัพยากรที่มีค่ายิ่งของเรา

Knowledge

Suggesting Mode – Google docs

Suggesting Mode – Google docs

G Suite Google Cloud Knowledge

การเปลี่ยนมุมมองของเอกสาร

การสร้างแบบสอบถามด้วย Google Forms

การสร้างแบบสอบถามด้วย Google Forms

G Suite Google Cloud Knowledge

ทุกวันนี้ feedback ในเรื่องต่างๆมีความสำคัญมาก ความคิดเห็นหรือข้อเสนอแนะจะเป็นสิ่งที่ทำให้งานของคุณมีการปรับและพัฒนาได้ดียิ่งขึ้น Google Forms สามารถสร้างแบบสอบถามหลากหลายรูปแบบ ตอบโจทย์การใช้งานที่ง่ายและประสิทธิภาพสูง

การกู้คืนอีเมล Gmail

การกู้คืนอีเมล Gmail

G Suite Google Cloud Knowledge

การกู้คืนอีเมลเป็นประโยชน์อย่างยิ่งสำหรับคนใช้งาน Email เพราะสามารถกู้คืนอีเมลที่สำคัญให้กลับมาใช้งานได้อีก

News and Events

Related Blogs

Scroll to Top