ถอดรหัสแอป #สงครามส่งด่วน เบื้องหลังความสมจริงที่สัมผัสได้

กลายเป็นประเด็นที่น่าสนใจในแวดวงเทคโนโลยีและบันเทิงทันที นักพัฒนาผู้สร้างสรรค์แอปฯที่ปรากฏในซีรีส์ที่กำลังเป็นกระแสอย่าง #สงครามส่งด่วน ได้เปิดให้ทดลองใช้งานแอปฯจำลอง (Mockup) ของ Thunder Express, Easy Express และ Mally ผ่านเว็บไซต์ https://muc-app.pages.dev/

การเปิดให้ทดลองเล่นครั้งนี้ไม่ได้เป็นเพียงการโปรโมทซีรีส์ แต่ยังเป็นการเผยเบื้องหลังการพัฒนาแอปฯ ซึ่งแสดงให้เห็นถึงความใส่ใจในรายละเอียดที่ลึกซึ้ง เพื่อสร้างประสบการณ์ที่สมจริงที่สุดให้กับผู้ชม

จุดเริ่มต้นจากความท้าทาย สู่การลงมือสร้างจริง

Chayapatr Archiwaranguprok เปิดเผยว่า จุดเริ่มต้นของโปรเจกต์นี้มาจากการที่ต้องการหลีกเลี่ยง "ความรู้สึกแปลก" ที่มักเกิดขึ้นกับแอปพลิเคชันหรือหน้าจอคอมพิวเตอร์ที่ถูกสร้างขึ้นโดยทีมกราฟิก

ซึ่งมักจะขาดความสมจริงในด้านการออกแบบ เขาจึงอาสาที่จะพัฒนาเว็บแอปพลิเคชันเหล่านี้ขึ้นมาใช้งานจริงในการถ่ายทำ

ด้วยข้อจำกัดด้านเวลาและความสะดวกในการแก้ไขหน้างาน เขาตัดสินใจพัฒนาในรูปแบบของ Progressive Web App (PWA)

โดยใช้เฟรมเวิร์ก Svelte ซึ่งทำให้สามารถแสดงผลได้ใกล้เคียงแอปพลิเคชันจริงบนสมาร์ทโฟน และสามารถปรับแก้ได้เร็ว

เบื้องหลังความสมจริง การออกแบบและเทคนิคพิเศษ

ความน่าสนใจอยู่ที่การตีความและออกแบบแอปของแต่ละบริษัทให้มีเอกลักษณ์แตกต่างกันตามเนื้อเรื่อง

Easy Express ถูกออกแบบให้ดูสวยงาม เป็นระเบียบ สะท้อนภาพลักษณ์องค์กรขนาดใหญ่ที่มีเงินทุนหนา

Thunder Express ถูกออกแบบให้ดูเหมือนแอปที่สร้างอย่างรวดเร็วโดยทีมพัฒนาที่ไม่มีดีไซเนอร์ ก่อนจะถูกปรับปรุงให้สวยงามขึ้นในภายหลัง

Mally แพลตฟอร์มอีคอมเมิร์ซที่มีความซับซ้อนสูง ซึ่งทีมงานต้องทำงานร่วมกับทีมอาร์ตในการสร้างรายการสินค้ากว่าร้อยชิ้น

หนึ่งในความท้าทายทางเทคนิคที่น่าสนใจคือ การจำลองพฤติกรรมการใช้งานให้เหมือนแอปพลิเคชันจริง เช่น การควบคุมการ "เด้ง" (Bounce) ของหน้าจอเมื่อเลื่อน (Scroll) สุดหน้า

ซึ่งเป็นพฤติกรรมปกติของเว็บเบราว์เซอร์ แต่ไม่ค่อยพบในแอปพลิเคชัน Native นอกจากนี้ยังมีการใช้เทคนิคเพื่อทำให้แอปแสดงผลเต็มพื้นที่จอของสมาร์ทโฟนรุ่นใหม่ที่มีรอยบาก (Notch) ได้อย่างแนบเนียน

ยิ่งไปกว่านั้น อินเทอร์เฟซของเครื่องสแกนพัสดุ iData ที่พนักงานส่งของใช้ ก็ถูกพัฒนาขึ้นโดยอ้างอิงจากเครื่องจริง และมีการซ่อนฟังก์ชันสำหรับให้ทีมงานเปลี่ยนชื่อพนักงานที่แสดงบนหน้าจอได้ทันทีในระหว่างการถ่ายทำ

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

ทำให้แอปพลิเคชันเหล่านี้ ไม่รองรับการแสดงผลบนทุกขนาดหน้าจอ (Non-responsive) และปุ่มส่วนใหญ่ไม่สามารถใช้งานได้จริง หรือถูกซ่อนฟังก์ชันพิเศษไว้สำหรับทีมงาน เช่น กดเพื่อเปลี่ยนตัวเลข หรือเปลี่ยนหน้าจอ

ที่มา : Chayapatr Archiwaranguprok