A Versatile System for Delivering Information to the LINE Home Tab

Zhixin Li
LINE / CSI Dev B Team / Server-side engineer

https://linedevday.linecorp.com/2021/ja/sessions/172
https://linedevday.linecorp.com/2021/en/sessions/172
https://linedevday.linecorp.com/2021/ko/sessions/172

Transcript

2. Agenda - Home Tab and Recommendations - Architecture and Technology - Implementation Challenges - Use Cases
3. - Profile/Setting - Notification - Friends/Groups - Service List - Recommendation Content LINE Home Tab
4. Recommendation Content
5. Validation and Release Development Design Recommendation Content Development Flow Design Team Home Server Data Provider (Smart Channel) Business Planning QA iOS/Android
6. Validation and Release Development Design Recommendation Content Development Flow Design Team Home Server Data Provider (Smart Channel) Business Planning QA iOS/Android
7. Validation and Release Development Design Recommendation Content Development Flow Design Team Home Server Data Provider (Smart Channel) Business Planning QA iOS/Android
8. Validation and Release Development Design Recommendation Content Development Flow Design Team Home Server Data Provider (Smart Channel) Business Planning QA iOS/Android
9. Validation and Release Development Design Recommendation Content Development Flow Design Team Home Server Data Provider (Smart Channel) Business Planning QA iOS/Android
10. Validation and Release Development Design Recommendation Content Development Flow Design Team Home Server Data Provider (Smart Channel) Business Planning QA iOS/Android
11. Validation and Release Development Design Recommendation Content Development Flow Design Team Home Server Data Provider (Smart Channel) Business Planning QA iOS/Android
12. Validation and Release Development Design Drawbacks • High development cost for new recommendation content development • Slow release cycle - New content requires a new mobile application version • Impossible to make a UI change for released contents
13. How can we overcome these drawbacks and make the system more versatile?
14. Requirements Versatile • No hard-coded UI on the client side • Release new contents without new client version Reduce Recurring Costs • Zero client development • Minimal Home server application development i18n • Server-side multi- language support
15. Validation and Release Development Design Recommendation Content Development Flow Design Team Home Server Data Provider (Smart Channel) Business Planning QA iOS/Android
16. Flex Message Flex Message Rendering Engine Flex Message in JSON format https://developers.line.biz/en/docs/messaging-api/flex-message-elements/ LINE Messaging API LINE BOT
17. System Flow Data Provider (Smart Channel) Home Server Request recommendation content Request raw recommendation data Recommendation data Open LINE application Server-side templating Templated recommendation content as Flex JSON Render Flex JSON content iOS/Android
18. System Flow Data provider returns raw recommendation Data Provider (Smart Channel) Home Server iOS/Android type: sticker_jp, [ item1: {title: Moon & James, image: https://line-scdn.net/...", ...} item2: {title: Brown & Cony, image: https://line-scdn.net/...”, …} … ] Response from Data Provider
19. System Flow Determine Flex template for recommendation Data Provider (Smart Channel) Home Server iOS/Android [ … "text": "${xlt('sticker.title')}", ... "items": [ {"url": "${imageUrl}", "text": "${title}", …}, {"url": "${imageUrl}", "text": "${title}", …}, ... ] … ] Flex Template ${xlt('sticker.title')} ${title} ${title} ${title} ${title}
20. System Flow Fill parameters with actual data Data Provider (Smart Channel) Home Server iOS/Android [ … "text": "${xlt('sticker.title')}", ... "items": [ {"url": "${imageUrl}", "text": "${title}", …}, {"url": "${imageUrl}", "text": "${title}", …}, ... ] … ] Flex Template type: sticker_jp, [ item1: {title: Moon & James, image: https://line-scdn.net/...",} item2: {title: Brown & Cony, image: https://line-scdn.net/..."} … ] Response from Data Provider [ … "text": "Recommended Stickers", ... "items": [ {"url": "https://line-scdn.net/...", "text": "Moon & James", …}, {"url": "https://line-scdn.net/...", "text": "Brown & Cony", …}, ... ] … ] Generated Result (Flex JSON)
21. System Flow Data Provider (Smart Channel) Home Server iOS/Android [ … "text": "Recommended Stickers", ... "items": [ {"url": "https://line-scdn.net/...", "text": "Moon & James", …}, {"url": "https://line-scdn.net/...", "text": "Brown & Cony", …}, ... ] … ] Generated Result (Flex JSON) Client renders Flex JSON Recommended Stickers Daily Life Cherry Coco Brown & Cony Moon & James Actual Client UI
22. Flex Template The technology used to satisfy our needs
23. Flex Template Features Non-bubble and Vertical List Layouts Parameter Substitution User Profile and Name Support LINE Theme and Dark Mode Color Matching Server-side Property Customization Localized Text iOS/Android Server
24. Features: Localized Text
25. Features: API Parameter Substitution
26. Features: Server-side Property Customization https://liff.line.me/12... https://liff.line.me/16...
27. Features: Color Matching
28. Implementation Challenges
29. Home Tab Stats Types of Recommendation Content 56 Contents delivered per day 49.8M Requests per second 25K
30. Load Control Strategies Expiration Control Retry Control Server Fallback Caching
31. Expiration Control • The server can control how long the client will wait before it requests new recommendation content • With each successful response the server includes a timestamp for expiration • The client expires and requests new content based on the timestamp expiration_after = 1 hour Home Server iOS/Android
32. Server Fallback High Reliability Data Provider • When server fails to get recommendation from the primary data provider, a high reliability data provider is used as a fallback Home Server Data Provider (Smart Channel) iOS/Android
33. Retry Control Subtitle • In the case of a failure response, the server can control how long the client waits before it retries its request • When a server-side error happens, the server will add a timestamp to the failure response. This will be used by the client to decide when to retry. • In the case of a request timeout, a default delay is used tried_count = 1 retry_after = 1 minute Home Server iOS/Android
34. Retry Control Subtitle tried_count = 2 expiration_after = 1 hour Home Server • In the case of a failure response, the server can control how long the client waits before it retries its request • When a server-side error happens, the server will add a timestamp to the failure response. This will be used by the client to decide when to retry. • In the case of a request timeout, a default delay is used tried_count = 1 retry_after = 1 minute iOS/Android
35. Caching • The server has a local cache for template data. This is used to reduce time spent on database requests as well as processing time for server-side property customization Local Cache Flex Template A [sticker properties] Flex Template A [theme properties] Flex Template B [manga properties] Home Server
36. Use Cases
37. • Add TW users to the scope of highly personalized contents • Developed and released in 2 months for 14 types of content • Minor Home server and client dev effort Case 1: Personalized Recommendations for TW Users
38. Case 1: Personalized Recommendations for TW Users Data Provider Development Register New Templates Beta, Staging and Release QA Final Release Configure QA Release Personalized Recommendation Data Development May 2021 June 2021
39. Case 2: Campaign Contents Delivery • Rapid development and delivery of campaign contents • Zero data provider development cost • Data provider override support
40. Thank You