Upgrade to Pro — share decks privately, control downloads, hide ads and more …

A Versatile System for Delivering Information to the LINE Home Tab

A Versatile System for Delivering Information to the LINE Home Tab

LINE DEVDAY 2021

November 10, 2021
Tweet

More Decks by LINE DEVDAY 2021

Other Decks in Technology

Transcript

  1. Agenda
    - Home Tab and Recommendations
    - Architecture and Technology
    - Implementation Challenges
    - Use Cases

    View full-size slide

  2. - Profile/Setting
    - Notification
    - Friends/Groups
    - Service List
    - Recommendation Content
    LINE Home Tab

    View full-size slide

  3. Recommendation Content

    View full-size slide

  4. Validation and
    Release
    Development
    Design
    Recommendation Content Development Flow
    Design Team
    Home Server
    Data Provider
    (Smart Channel)
    Business
    Planning
    QA
    iOS/Android

    View full-size slide

  5. Validation and
    Release
    Development
    Design
    Recommendation Content Development Flow
    Design Team
    Home Server
    Data Provider
    (Smart Channel)
    Business
    Planning
    QA
    iOS/Android

    View full-size slide

  6. Validation and
    Release
    Development
    Design
    Recommendation Content Development Flow
    Design Team
    Home Server
    Data Provider
    (Smart Channel)
    Business
    Planning
    QA
    iOS/Android

    View full-size slide

  7. Validation and
    Release
    Development
    Design
    Recommendation Content Development Flow
    Design Team
    Home Server
    Data Provider
    (Smart Channel)
    Business
    Planning
    QA
    iOS/Android

    View full-size slide

  8. Validation and
    Release
    Development
    Design
    Recommendation Content Development Flow
    Design Team
    Home Server
    Data Provider
    (Smart Channel)
    Business
    Planning
    QA
    iOS/Android

    View full-size slide

  9. Validation and
    Release
    Development
    Design
    Recommendation Content Development Flow
    Design Team
    Home Server
    Data Provider
    (Smart Channel)
    Business
    Planning
    QA
    iOS/Android

    View full-size slide

  10. Validation and
    Release
    Development
    Design
    Recommendation Content Development Flow
    Design Team
    Home Server
    Data Provider
    (Smart Channel)
    Business
    Planning
    QA
    iOS/Android

    View full-size slide

  11. 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

    View full-size slide

  12. How can we overcome these drawbacks and
    make the system more versatile?

    View full-size slide

  13. 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

    View full-size slide

  14. Validation and
    Release
    Development
    Design
    Recommendation Content Development Flow
    Design Team
    Home Server
    Data Provider
    (Smart Channel)
    Business
    Planning
    QA
    iOS/Android

    View full-size slide

  15. 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

    View full-size slide

  16. 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

    View full-size slide

  17. 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

    View full-size slide

  18. 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}

    View full-size slide

  19. 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)

    View full-size slide

  20. 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

    View full-size slide

  21. Flex Template
    The technology used to satisfy our needs

    View full-size slide

  22. 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

    View full-size slide

  23. Features: Localized Text

    View full-size slide

  24. Features: API Parameter Substitution

    View full-size slide

  25. Features: Server-side Property Customization
    https://liff.line.me/12...
    https://liff.line.me/16...

    View full-size slide

  26. Features: Color Matching

    View full-size slide

  27. Implementation Challenges

    View full-size slide

  28. Home Tab Stats
    Types of Recommendation
    Content
    56
    Contents delivered
    per day
    49.8M
    Requests per second
    25K

    View full-size slide

  29. Load Control Strategies
    Expiration Control
    Retry Control
    Server Fallback
    Caching

    View full-size slide

  30. 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

    View full-size slide

  31. 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

    View full-size slide

  32. 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

    View full-size slide

  33. 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

    View full-size slide

  34. 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

    View full-size slide

  35. • 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

    View full-size slide

  36. 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

    View full-size slide

  37. Case 2: Campaign Contents Delivery
    • Rapid development and delivery of
    campaign contents
    • Zero data provider development
    cost
    • Data provider override support

    View full-size slide