數位名片和型錄產生器 中部人的聊天機器人小小聚 #15, 2021/06/28@線上直播

1. 數位名片和型錄產⽣生器
奇步應⽤用 陳佳新
jarsing@chibuapp.com
2021-06-28
不⽤用寫程式
數位轉型⾸首選LINE

2. 中部⼈人的聊天機器⼈人⼩小⼩小聚
臉書搜尋「Chatbot DevelopersTaiwan」社團
2
臉書社團
活動議程

3. 2019創業歸故⾥里里競賽冠軍
⽤用LINE聊天機器⼈人做的智慧觀光服務
3

4. 2020成為LINE官⽅方認證技術專家
俗稱的聊天機器⼈人專家，LINE API Expert，簡稱LAE
4

5. 5
歡迎與我聯聯絡
陳佳新
https://facebook.com/jarsing
奇步應⽤用
https://facebook.com/chibuapp

6. 受到LAE戴均⺠民⽂文章的啟發 😍
6
https://taichunmin.idv.tw/blog/2020-07-21-liff-businesscard.html

7. 7
議程OKR
• O（⽬目標）：利利⽤用產⽣生器輔助⼯工具，
打造⾃自⼰己專屬的數位名片和型錄
• KRs（關鍵結果）
1. 做出⼀一張名片，上⾯面的電話、網址皆可點擊
2. 做出⼀一份型錄，有精美圖片，可以多⾴頁左右滑
3. 將分享網址放在Keep，隨時快速發送給LINE聯聯絡⼈人中的好友
以終為始

8. 8
使⽤用時機
1. 新加好友的時候，需要⾃自我
介紹
• ⼀一般都傳貼圖或名片圖檔
• 但是你⽤用數位名片就是酷
2. 進入新群組，想要推廣⾃自家
商品
• ⼀一般都⽤用⽂文字講，給官網、
粉專、電商連結
• 但是你⽤用數位型錄⼀一⽬目了了然

9. 9
唯⼀一限制
• 對⽅方必須是LINE聯聯絡⼈人裡的好友
• 廢話，不是好友怎麼傳訊息、怎麼傳名片和型錄！

10. 10
加成效果
• 1 ＋ 1 ＞ 2
• LINE機器⼈人
• 數位名片和型錄（Call-To-Action）
互導，增加接觸點！

11. 課程⼤大綱
認識Flex彈性訊息
認識JSON資料格式與imgur圖床
學習操作Flex Message Simulator⼯工具
親⼿手打造專屬的數位名片和型錄
11

12. 認識Flex彈性訊息
12

13. 13
Flex不存在於朋友之間
的⼀一般聊天訊息 (1/2)
• 差異異化！
• 數位增能！
• 令⼈人印象深刻！

14. 14
Flex不存在於朋友之間
的⼀一般聊天訊息 (2/2)
• ⼀一定要透過別的⽅方式發送，⽽而且那個⽅方式
是基於網⾴頁技術，所以⼀一定要架⼀一個網站
• 幸好我們有「數位名片產⽣生器」LINE機器
⼈人，點擊連結就可以，幫⼤大家解決了了網⾴頁
和網站的問題！ ❤

15. 認識JSON資料格式
與imgur圖床
15

16. 16
JSON資料格式 (1/2)
• 雖然不⽤用⾃自⼰己編寫JSON，但還是會看到，知道⼀一點點概念念，真的
看到的時候比較不會慌張也比較容易易理理解
• JSON = JavaScript Object Notation，JavaScript物件表⽰示法
• ⽤用 { } 包起來來的是物件，裡⾯面全部內容都是兩兩兩兩成對的key-
value，例例如："key": "value"，多組key-value⽤用逗號分隔（ , ）
• ⽤用 [ ] 包起來來的是陣列列，裡⾯面全部都是同類型的物件

17. 17
JSON資料格式 (2/2)

18. 18
imgur圖床
• 什什麼是圖床？ ➡ 上傳到網路路，放圖的地⽅方
• 為什什麼需要圖床？ ➡ 因為數位名片和型錄的圖要放在網路路上，使⽤用
者讀取訊息的時候，圖才能夠顯⽰示出來來
• imgur = 老牌的免費圖床，⽤用FB登入帳號即可，還能夠縮圖，建議
寬480像素就⾜足夠了了
• ⼩小⼼心地雷：我的圖都放在FB，可以直接圖片複製網址嗎？ ➡ 不⾏行行！
因為FB的圖放在CDN，網址隨時可能會換

19. 學習操作
Flex Message Simulator⼯工具
19

20. 20
登入 → 操作 → 傳送 → 製作
1. 使⽤用LINE帳號登入
• 有個地雷，登入狀狀態經過⼀一段
時間會失效，⼀一旦失效Flex訊
息就要重做，記得將其JSON
備份到記事本
2. 操作
• Flex Message Simulator本⾝身就
是⼀一款設計⼯工具，但是⽔水很深
3. 傳送
• 把Flex訊息傳送給⾃自⼰己，做完
⾺馬上測試，連網站都先不⽤用架
（2021/5/20上線的功能 👍）
4. 製作
• 利利⽤用數位名片產⽣生器LINE機器
⼈人搭配TinyJSON壓縮⼯工具
（因為LINE有字數限制）

21. 21
Flex訊息的架構 (1/2)
• carousel
• bubble
• header
• hero
• body
• footer

22. 22
Flex訊息的架構 (1/2)
• carousel
• bubble
• header
• hero
• body
• footer

23. 23
Flex訊息的元素
• 幾個常⽤用元素
• box 容器
1. image 圖片
2. text ⽂文字
3. button 按鈕
4. filler 填空⽩白
5. separator 分隔線

24. 24
Flex訊息的語法
• 幾個常⽤用語法
1. color/backgrounColor
2. margin: xl, lg, md, sm, xs
3. gravity: top, bottom, center
4. align: start, end, center
5. weight: regular, bold
6. aspectRatio
7. aspectMode: cover, fit
8. layout: baseline, horizontal, vertical
9. Action.type: uri
- 網址⽤用「https:」開頭
- 電話⽤用「tel:」開頭
• 不過⽤用Showcase的範例例改最快！

25. 親⼿手打造數位名片和型錄
25

26. 26
請先安裝/開啟這些⼯工具
1. Flex Message Simulator
• https://developers.line.biz/flex-
simulator
2. imgur
• https://imgur.com/
3. 「數位名片產⽣生器」LINE機
器⼈人
4. TinyJSON壓縮⼯工具
• https://chibu.app/tinyjson/

27. 27
範例例1：直式名片
• 幹嘛直式？因為⼿手機是直的，瀏覽⽅方便便！

28. 28
範例例2：橫式名片
• 不⼀一定非得跟紙本名片長得⼀一模⼀一樣，但是必要資訊都要放
（Logo、電話、地址），也不⼀一定要是長⽅方形，正⽅方形也OK

29. 29
範例例3：多⾴頁型錄
• 只有⼀一張的DM也⾏行行，但是很多很多
⾴頁的型錄才夠豐富
• https://liff.line.me/1653938410-
wmaPkVPZ?target=14096259297924