← กลับไป TechCut
Live CommerceSDK7-ElevenRetail TechMobile

จากวิดีโอสู่การซื้อ: เบื้องหลังการพัฒนา Live Commerce Experience บน 7-Eleven App

วิธีที่ Muze พัฒนา Live Commerce SDK ภายใน 7-Eleven App — เชื่อมต่อ BytePlus Video Engine, Token Exchange และ Gamification Loop เพื่อเปิดประสบการณ์ Shopping ผ่านวิดีโอให้ผู้ใช้งานหลายล้านคน

TechCut — Technical Case Study · 7-Eleven Live Commerce & SFV SDK Project


ในอดีต การซื้อของออนไลน์มักเริ่มจาก “ความต้องการ”

ผู้ใช้เปิดแอป ค้นหาสินค้า เปรียบเทียบราคา แล้วตัดสินใจซื้อ

แต่สิ่งที่ TikTok พิสูจน์ให้โลกเห็นในช่วงทศวรรษที่ผ่านมาคือ พฤติกรรมการซื้ออีกรูปแบบหนึ่ง

ผู้ใช้ไม่ได้เริ่มจากการค้นหา แต่เริ่มจากการ “เจอ” — เจอสินค้าในวิดีโอ เจอในไลฟ์ สนใจในจังหวะนั้น และซื้อทันที โดยไม่ได้วางแผนมาก่อน

นี่คือแนวคิดของ Content-Led Commerce — และมันกำลังกลายเป็น battleground ของ retail platform ขนาดใหญ่ทั่วโลก

Content-Led Commerce Flow — จาก Content Discovery, Watch & Engage, Product Discovery, Checkout สู่ Loyalty & Repeat

สำหรับ 7-Eleven ซึ่งเป็นหนึ่งในแอปที่คนไทยมีติดเครื่องมากที่สุด โจทย์จึงไม่ใช่แค่การเพิ่มหน้าวิดีโอเข้าไปในแอป แต่คือการสร้างประสบการณ์ที่เชื่อม content, commerce และ loyalty เข้าด้วยกันใน flow เดียว โดยไม่ทำให้ระบบเดิมที่รองรับผู้ใช้หลักสิบล้านคนสะดุด

นี่คือโจทย์ที่ Muze ได้ร่วมพัฒนากับ True Digital Group


ทำไมโจทย์นี้ถึงยากกว่าที่เห็น

เมื่อพูดถึง Live Commerce หลายคนอาจคิดว่าเป็นเรื่องของ “เพิ่มฟีเจอร์วิดีโอ”

แต่ในมุม Product Engineering วิดีโอในบริบทนี้ไม่ได้ทำหน้าที่เป็น “สื่อ” — มันทำหน้าที่เป็น “หน้าร้าน” รูปแบบใหม่

ในหน้าวิดีโอเดียว ระบบต้องรองรับหลายสิ่งพร้อมกัน ทั้งการเล่นวิดีโอที่ลื่นไหล, การ scroll คลิปถัดไปแบบต่อเนื่อง, การแสดงสินค้าแบบ overlay, การเชื่อมข้อมูล commerce, การ authenticate ผู้ใช้จากแอปหลัก, การต่อกับ loyalty system และการ track event เพื่อ gamification — ทั้งหมดต้องทำงานพร้อมกัน บนแอปที่มีผู้ใช้งานจริงอยู่แล้ว และต้องไม่ทำให้ระบบเดิมช้าหรือไม่เสถียร

Shopping Entertainment Hub Architecture — Native SDK, Hybrid Video Engine, Commerce Integration และ Gamification & Loyalty

ความซับซ้อนนี้คือเหตุผลที่ architecture ของโปรเจกต์นี้ต้องคิดตั้งแต่ต้น


1. Native SDK: เมื่อ Performance เป็นส่วนหนึ่งของ Experience

การตัดสินใจแรกและสำคัญที่สุดของโปรเจกต์นี้คือการพัฒนาในรูปแบบ Native SDK แยกสำหรับ iOS (Swift) และ Android (Kotlin) แทนการใช้ WebView หรือ Cross-platform Framework

เหตุผลหลักไม่ใช่เรื่องเทคโนโลยี แต่เป็นเรื่องของ expectation ของผู้ใช้

ผู้ใช้ที่คุ้นเคยกับ TikTok หรือ Instagram Reels มี bar สูงมากสำหรับ short-form video — ปัดคลิปแล้วต้องลื่น โหลดต้องแทบไม่รู้สึก เครื่องต้องไม่ร้อน ถ้า experience สะดุดแม้ครั้งเดียว ผู้ใช้จะออกทันที

สำหรับระบบแบบนี้ performance ไม่ใช่ requirement ทางเทคนิค — มัน คือ product experience

การพัฒนาแบบ Native ช่วยให้ระบบเข้าถึง resource ของอุปกรณ์ได้โดยตรง ทั้ง video rendering, memory management, gesture handling และ lifecycle ของแอปบนแต่ละ platform ในแบบที่ cross-platform layer ไม่สามารถทำได้เทียบเท่า

อีกมิติที่สำคัญไม่แพ้กันคือ Modular Architecture — SDK ถูกออกแบบให้เป็นโมดูลที่ฝังเข้าไปในแอปหลักได้ โดยทีมพัฒนาแอปหลักและทีมพัฒนา SDK สามารถทำงานแยกกันได้อิสระ

สำหรับองค์กรขนาดใหญ่ที่มีหลายทีม หลาย dependency และมี release cycle ที่ต้องควบคุม — นี่ไม่ใช่เรื่องสะดวก แต่เป็นเรื่องจำเป็น เพราะความเสี่ยงของการกระทบระบบเดิมที่รองรับผู้ใช้หลายสิบล้านคนนั้นสูงเกินกว่าจะมองข้าม


2. Hybrid Video Engine: BytePlus, TrueID และ Abstraction Layer

ความท้าทายถัดมาคือการทำให้ระบบรองรับ video content จากหลายแหล่ง โดยที่ผู้ใช้รู้สึกว่าอยู่ใน flow เดียว

โปรเจกต์นี้ต้องทำงานร่วมกับ 2 provider หลัก — TrueID สำหรับ video content ทั่วไป และ BytePlus สำหรับ live streaming และ short-form video ที่ต้องการ interactivity สูง

BytePlus คือ enterprise platform ที่ ByteDance แยกออกมาจาก infrastructure เดียวกับ TikTok — ซึ่งหมายความว่าระบบ live streaming และ video feed ที่ได้มาคือ technology ระดับเดียวกับที่ขับเคลื่อน platform ที่ใหญ่ที่สุดในโลก

TrueID x 7-Eleven — Short-Form Video Commerce ที่เกิดขึ้นจริง บนแพลตฟอร์มที่ Muze ร่วมพัฒนา

แต่ทั้งสอง provider มี SDK, API, player behavior, metadata structure และ event model ที่แตกต่างกัน

วิธีที่ทีมแก้ปัญหานี้คือการสร้าง Abstraction Layer ที่ทำหน้าที่เป็นตัวกลางระหว่างแอปกับ provider ต่างๆ แอปหลักไม่จำเป็นต้องรู้รายละเอียดว่า video ชิ้นนี้มาจาก provider ไหน แต่เรียกใช้งานผ่าน interface เดียวที่ SDK กำหนดไว้

ผลลัพธ์คือระบบรองรับทั้ง short-form video และ live streaming ได้ใน experience เดียวกัน และเปิดทางให้เพิ่ม provider ใหม่ในอนาคตโดยไม่ต้องแก้ส่วน core ของแอป


3. Buffering & Prefetching: ความลื่นไหลที่ผู้ใช้ไม่ควรรู้ว่ามีระบบอยู่เบื้องหลัง

สำหรับ short-form video สิ่งที่ทำให้ประสบการณ์ดีไม่ใช่แค่คุณภาพวิดีโอ แต่คือ จังหวะระหว่างคลิป

ถ้าผู้ใช้ปัดไปคลิปถัดไปแล้วต้องรอโหลดแม้เพียงวินาทีเดียว momentum จะหายทันที

ระบบจึงต้องคิดล่วงหน้าว่าผู้ใช้น่าจะดูอะไรต่อ และเตรียม prefetch ข้อมูลล่วงหน้าในระดับที่เหมาะสม — ขณะเดียวกันก็ต้อง unload asset ที่ผ่านไปแล้ว ควบคุม memory usage และปรับพฤติกรรมตาม network condition

ความท้าทายคือการ balance ระหว่าง “วิดีโอลื่นที่สุด” กับ “ไม่กิน resource จนกระทบ Super App โดยรวม”

และนี่คือจุดที่ engineering decision มีผลต่อ business outcome โดยตรง — ถ้าผู้ใช้อยู่ใน video flow ได้นานขึ้น โอกาสเห็นสินค้า สนใจสินค้า และเกิด conversion ก็สูงขึ้นตาม


4. Commerce Integration: ดูแล้วต้องซื้อได้ โดยไม่หลุดจาก Experience

หัวใจของ Live Commerce ไม่ใช่แค่การดูไลฟ์ — แต่คือการซื้อได้ ในจังหวะที่ความสนใจเกิดขึ้น

ถ้าผู้ใช้เห็นสินค้าในวิดีโอแล้วต้องออกจากหน้าวิดีโอ ไปค้นหาสินค้าใหม่ในแอป หรือ login ซ้ำอีกรอบ — โอกาสซื้อจะหายไปทันที เพราะ impulse purchase ไม่รอ

โปรเจกต์นี้จึงออกแบบให้ video แต่ละชิ้นสามารถผูกข้อมูลสินค้าไว้ใน metadata เมื่อผู้ใช้สนใจ ระบบแสดง product overlay ได้ทันทีโดยไม่ต้องออกจากหน้าวิดีโอ

แต่ส่วนที่ยากที่สุดของทั้งโปรเจกต์คือ Token Exchange — การทำให้ผู้ใช้ที่ login อยู่ในแอปหลักสามารถเข้า SDK ได้อย่างปลอดภัย โดยไม่ต้องรู้สึกว่ากำลัง authenticate ซ้ำเข้าอีกระบบ

เพราะข้อมูลที่จำเป็นสำหรับการซื้อ — ที่อยู่จัดส่ง วิธีชำระเงิน คะแนน ALL Member คูปอง — ล้วนอยู่ในแอปหลัก ไม่ใช่ใน SDK

การออกแบบ “รอยต่อ” ระหว่างสองระบบนี้อย่างไม่มีรอยต่อ คือสิ่งที่ทำให้ flow ตั้งแต่ดูวิดีโอจนถึงชำระเงิน รู้สึกเหมือนระบบเดียว ทั้งที่เบื้องหลังซับซ้อนกว่านั้นมาก


5. Loyalty & Gamification: เปลี่ยนการดูคอนเทนต์ให้กลายเป็น Engagement Loop

ใน platform ขนาดใหญ่ การทำให้ผู้ใช้กลับมาใช้งานซ้ำสำคัญไม่แพ้การ convert ครั้งแรก

SDK จึงไม่ได้ออกแบบมาเพื่อเล่นวิดีโอเท่านั้น แต่รองรับ event tracking และ gamification ที่ต่อยอดเป็น mission และ reward ได้

event เช่น play, pause, complete, link click หรือ engagement action ต่างๆ ไม่ได้มีไว้เพื่อ analytics ฝั่งเดียว แต่เป็นส่วนหนึ่งของ product mechanic — ผู้ใช้ดูวิดีโอครบ ดู live ตามเงื่อนไข หรือ engage กับ campaign สามารถปลดล็อก M-Stamp หรือสิทธิประโยชน์จาก ALL Member ได้ทันที

เมื่อ content, commerce และ loyalty เชื่อมเข้าด้วยกัน แอปจึงไม่ใช่แค่ช่องทางซื้อสินค้าอีกต่อไป แต่กลายเป็นพื้นที่ที่ผู้ใช้มีเหตุผลจะกลับมา engage กับแบรนด์ได้ต่อเนื่อง


6. Engineering Discipline: ระบบที่ดีต้องพร้อมสำหรับหลังจาก Launch

โปรเจกต์ลักษณะนี้ไม่ได้จบที่การ launch feature

SDK ที่ถูกฝังอยู่ใน Super App ที่มีผู้ใช้หลักสิบล้านคน มี dependency กับหลายระบบ และต้องรองรับการ update ในอนาคต — จำเป็นต้องออกแบบ versioning, CI/CD pipeline, code quality และ security scanning ตั้งแต่ต้น

ในหลายโปรเจกต์ enterprise ความยากไม่ใช่แค่การสร้างฟีเจอร์ให้เสร็จ แต่คือการสร้างฟีเจอร์ที่ maintain, scale และ evolve ต่อไปได้โดยไม่กลายเป็นภาระของทีมในอนาคต


บทเรียน: Retail Tech ยุคใหม่แข่งกันที่ “ประสบการณ์ที่เชื่อมถึงกัน”

โปรเจกต์ 7-Eleven Live Commerce สะท้อนสิ่งที่ commerce platform ยุคใหม่ต้องตอบให้ได้

ไม่ใช่แค่ “มีระบบขายของออนไลน์ไหม” แต่คือ ผู้ใช้ค้นพบสินค้าได้อย่างไร engage กับแบรนด์อย่างไร ตัดสินใจซื้อในจังหวะไหน และระบบสามารถทำให้ทุกอย่างเกิดขึ้นอย่างไร้รอยต่อแค่ไหน

เทคโนโลยีที่ดีไม่ควรถูกมองเห็นเป็นความซับซ้อน แต่ควรถูกสัมผัสได้เป็นประสบการณ์ที่ง่ายขึ้น เร็วขึ้น และต่อเนื่องขึ้น — เบื้องหลัง experience ที่ดูเรียบง่ายอาจซ่อน Native SDK, BytePlus video engine, token exchange, commerce overlay และ gamification loop ที่ต้องออกแบบมาให้ทำงานเป็นหนึ่งเดียว

เพราะอนาคตของ shopping อาจไม่ได้เริ่มจากการ search แต่อาจเริ่มจากวิดีโอหนึ่งคลิป ไลฟ์หนึ่งครั้ง หรือคอนเทนต์หนึ่งชิ้นที่ทำให้ผู้ใช้รู้สึกว่า “อยากซื้อเดี๋ยวนั้น”

คุยกับทีม Muze →