LINE Bot 入門介紹與 Platorm API 更新資訊 202107

LINE API Platform Update 2021/07 by NiJia Lin @ 中部人 Chatbot community #16

https://chatbots.kktix.cc/events/chatbots-meetup-in-central-taiwan-016

Transcript

1. LINE Bot 入門介紹與 Pla,orm
   API 更新資訊
   LINE Developer Relations
   NiJia Lin
   2021.07
   

   View Slide

2. NiJia Lin
   LINE Technology Evangelist
   Developer Relations
   External Evangelism
   Internal Evangelism
   

   View Slide

3. 01
   02
   03
   04
   05
   Outline
   Messaging API introduction
   Icon Switch
   Quick Reply
   Rich Menu
   Platform API Update
   

   View Slide

4. Messaging API
   Introduction
   

   View Slide

5. Hot it works
   內容
   

   View Slide

6. What's a channel?
   內容
   

   View Slide

7. What's a Provider?
   • Is an individual developer, company or organization
   • Can not change the channel PROVIDER after the channel is created
   • Do not use develop account to production environment
   

   View Slide

8. What's a Provider?
   

   View Slide

9. What's a Provider?
   

   View Slide

10. Messaging API Reply event Push event
    LINE Platform
    What you can do with the Messaging API
    

    View Slide

11. • Push messages
    • Multicast messages
    • Narrowcast messages
    • Broadcast messages
    Push event methods
    

    View Slide

12. What you can do with the Messaging API
    

    View Slide

13. Message Event
    Imagemap message
    Flex message
    Text message
    Template message
    Location message
    Sticker message
    Image message
    Video/Audio Message
    Send various message types
    

    View Slide

14. Message Event
    Imagemap message
    Flex message
    Text message
    Template message
    Location message
    Sticker message
    Image message
    Video/Audio Message
    Send various message types
    

    View Slide

15. Text & Sticker message
    

    View Slide

16. • 關鍵字 (Keywords)
    • 與使用者更多的互動
    • 更符合對話情境
    • 猜你想什麼
    h1ps://developers.line.biz/en/docs/messaging-api/s@cker-list/
    Sticker message
    

    View Slide

17. Message Event
    Imagemap message
    Flex message
    Text message
    Template message
    Location message
    Sticker message
    Image message
    Video/Audio Message
    Send various message types
    

    View Slide

18. Image, Video, Location message
    

    View Slide

19. Message Event
    Imagemap message
    Flex message
    Text message
    Template message
    Location message
    Sticker message
    Image message
    Video/Audio Message
    Send various message types
    

    View Slide

20. Template message
    

    View Slide

21. Message Event
    Imagemap message
    Flex message
    Text message
    Template message
    Location message
    Sticker message
    Image message
    Video/Audio Message
    Send various message types
    

    View Slide

22. Imagemap message
    

    View Slide

23. Message Event
    Imagemap message
    Flex message
    Text message
    Template message
    Location message
    Sticker message
    Image message
    Video/Audio Message
    Send various message types
    

    View Slide

24. Flex Message
    

    View Slide

25. Flex Message Simulator
    

    View Slide

26. Get Current User Profile
    

    View Slide

27. Icon Switch
    

    View Slide

28. Change icon and display name
    h5ps://developers.line.biz/en/reference/messaging-api/#icon-nickname-switch
    

    View Slide

29. Change icon and display name
    h5ps://developers.line.biz/en/reference/messaging-api/#icon-nickname-switch
    

    View Slide

30. Quick Reply
    

    View Slide

31. A
    B
    C
    • Camera action
    • Camera roll action
    • Location action
    • Postback action
    • Message action
    • URI action
    • Datetime picker action
    What is Quick Reply?
    

    View Slide

32. • Node.js
    • Heroku CLI
    • Git
    (Tutorial) Make a sample bot using Node.js
    h"ps://developers.line.biz/en/docs/messaging-api/nodejs-sample
    

    View Slide

33. Rich Menu
    

    View Slide

34. A
    B
    C
    • Bottom of the LINE Bot chat screen.
    • Rich menus aren't displayed on LINE for desk-
    top (macOS, Windows).
    • Is a JPEG or PNG image file.
    What is Rich Menu?
    

    View Slide

35. A
    B
    C
    • Image format: JPEG or PNG
    • Image width size (pixels): 800 to 2500
    • Image height size (pixels): 250 or more
    • Image aspect ratio (width/height): 1.45 or more
    • Max file size: 1 MB
    What is Rich Menu?
    

    View Slide

36. Easily switch between multiple rich menus
    • Create rich menu alias
    • Delete rich menu alias
    • Update rich menu alias
    • Get rich menu alias information
    • Get list of rich menu alias
    https://developers.line.biz/en/news/2021/06/21/switch-between-multiple-rich-menus/
    

    View Slide

37. AS-IS: No Alias
    https://developers.line.biz/en/news/2021/06/21/switch-between-multiple-rich-menus/
    

    View Slide

38. TO-BE: Alias
    • 使⽤者按下 Rich Menu 後向 LINE Server 發送請求，同時會以
    Postback 事件的形式向 Bot 應⽤程式發送 Webhook
    • LINE Server 接受請求後並將 Rich Menu 切換到使⽤者欲使⽤
    的樣式
    h5ps://developers.line.biz/en/news/2021/06/21/switch-between-mulGple-rich-menus/
    

    View Slide

39. More introduction ⬇
    https://engineering.linecorp.com/zh-hant/blog/rich-menu-alias-switch-action/
    

    View Slide

40. LIFF v2.11 Redirect example
    h1ps://developers.line.biz/en/news/2021/06/14/liff-v-2-11-0-release/
    • 第三⽅追蹤⼯具不會再夾雜 params
    • Security improvements
    • 相關 params 皆在 localStorage
    

    View Slide

41. Example of URL fragment after liff.init()
    h1ps://developers.line.biz/en/news/2021/06/14/liff-v-2-11-1-release/
    

    View Slide

42. LINE API Status Site
    h1ps://api.line-status.info
    

    View Slide

43. LINE TECH FRESH
    https://engineering.linecorp.com/zh-hant/blog/line-tech-fresh-2020-graduate/
    43
    

    View Slide

44. View Slide

45. THANK YOU
    

    View Slide