<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>LINE &#8211; Larry的午茶時光</title>
	<atom:link href="https://blog.yuyansoftware.com.tw/category/web-technology/line/feed/" rel="self" type="application/rss+xml" />
	<link>https://blog.yuyansoftware.com.tw</link>
	<description></description>
	<lastBuildDate>Mon, 30 Sep 2024 04:10:07 +0000</lastBuildDate>
	<language>zh-TW</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.0</generator>

<image>
	<url>https://blog.yuyansoftware.com.tw/wp-content/uploads/2022/10/favicon-45x45.png</url>
	<title>LINE &#8211; Larry的午茶時光</title>
	<link>https://blog.yuyansoftware.com.tw</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>LINE 集點卡是什麼？店家發放點數時要注意什麼？與一般 CRM 會員系統的邏輯差異在哪？</title>
		<link>https://blog.yuyansoftware.com.tw/2024/09/line-reward-card-different-from-crm/</link>
		
		<dc:creator><![CDATA[Larry]]></dc:creator>
		<pubDate>Sun, 29 Sep 2024 11:19:58 +0000</pubDate>
				<category><![CDATA[LINE]]></category>
		<category><![CDATA[商業思維]]></category>
		<category><![CDATA[網路科技]]></category>
		<category><![CDATA[CRM (客戶關係管理)]]></category>
		<category><![CDATA[客製化網站系統]]></category>
		<guid isPermaLink="false">https://blog.yuyansoftware.com.tw/?p=21595</guid>

					<description><![CDATA[之前有客戶詢問 CRM 系統的問題，有聊到 LINE 集點卡的功能，好像跟 CRM 中的客戶分級有點模糊的感覺。這篇文章我來跟大家分享一下，LINE 集點卡與一般 CRM 的邏輯差異在哪。]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">我之前的<a href="https://blog.yuyansoftware.com.tw/2024/07/crm-customer-segmentation-clv/">文章</a>有提到，建立會員系統，紀錄消費歷程，並做客戶分級。大概是一個 CRM (客戶關係管理) 系統最重要的一件事。</p>



<p class="wp-block-paragraph">之前有客戶詢問 CRM 系統的問題，有聊到 LINE 集點卡的功能。好像跟我上面提到的「客戶分級」有點相關，又有點模糊的感覺。</p>



<p class="wp-block-paragraph">這篇文章我先走一遍 LINE 集點卡的功能，然後跟大家分享一下 LINE 集點卡，跟一般 CRM 的邏輯差異在哪。</p>



<h2 class="wp-block-heading">LINE 集點卡的功能</h2>



<p class="wp-block-paragraph">LINE 集點卡其實 201x 年，已經上線很久了。<br>而且不久前 (2024年5月) 才又改版了一次。<br><a href="https://tw.linebiz.com/column/shopcard-renewal-2024" target="_blank" rel="noreferrer noopener nofollow">https://tw.linebiz.com/column/shopcard-renewal-2024</a></p>



<h3 class="wp-block-heading">店家發放點數時的情境</h3>



<p class="wp-block-paragraph">我先講使用情境，店家發放點數時，有兩個選項</p>



<ol class="wp-block-list">
<li>在手機上顯示行動條碼 (字樣可能隨著版本不同)。</li>



<li>印製行動條碼</li>
</ol>



<p class="wp-block-paragraph">「在手機上顯示行動條碼」只能被掃描一次。也就是說店家展示給客人，即使客人把 QR code 拍下來了，再掃第二次也沒用。</p>



<p class="wp-block-paragraph">店家顯示 QR code 頁面的下方，可以選擇點數。也就是當客人掃這個 QR code 時，客人會得到幾點。</p>



<p class="wp-block-paragraph">第二種是「印製行動條碼」。它的邏輯是產生一個圖檔，讓店家把 QR code 的紙本印出來。一樣可以設定該 QR code 是發幾點。</p>



<p class="wp-block-paragraph">像 larry 是做 ERP、進銷存、CRM 系統的，直覺就看到「印出來」的漏洞：<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color">如果印出來，那客人把 QR code 拍下來就好啦，回家再慢慢一直掃 (連續拿到點數)。</mark></p>



<p class="wp-block-paragraph">大概唯一解法就是設定「連續取得點數限制」(撰文的現在是2024年9月底)。可以設定同一天內，或指定時間內(幾小時內)，不重複發放點數給同一位顧客。</p>



<p class="wp-block-paragraph">可是這印出來的紙本，店員拿出來給客人掃時，真的有辦法這麼「確認」這張 QR code 是怎麼設定的嗎？也就是說，設定「連續取得點數限制」這個方式，實際應用時並不是很穩當。</p>



<p class="wp-block-paragraph"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color">提醒各位老闆，你給客人掃的最好是「一次性」的 QR code。</mark></p>



<h3 class="wp-block-heading">店家在後台可以看到點數發放紀錄</h3>



<p class="wp-block-paragraph">包含點數發放的日期、時間，發放了幾點，顧客ID。在官方帳號後台，都會記錄成一個列表。</p>



<p class="wp-block-paragraph">每個顧客ID 點進去，也可以看到該顧客，曾經領取的點數紀錄。</p>



<p class="wp-block-paragraph">2024年5月的更新，顧客ID 的加密邏輯有做更新。即使是同一顧客，此次更新前顯示的 ID，與現在看到的 ID 不同。</p>



<h3 class="wp-block-heading">客人集滿點數後怎麼使用</h3>



<p class="wp-block-paragraph">客人集滿點數後，在集點卡頁面，應該會得到一張優惠卷 (兌換商品用)。</p>



<p class="wp-block-paragraph">將優惠卷畫面出示給店員，讓店員點「已使用」。當然，此時客人就可以領取兌換來的商品。</p>



<p class="wp-block-paragraph">以上就是店家發放點數，客人如何領獎的使用情境。詳細怎麼「建立集點卡」這裡我們不談，因為這篇文章是 CRM 會員經營的邏輯。</p>



<h2 class="wp-block-heading">與一般 CRM 會員系統的邏輯差異在哪？</h2>



<p class="wp-block-paragraph">我重複一次 CRM 系統的重點：建立會員系統，紀錄消費歷程，並做客戶分級。</p>



<p class="wp-block-paragraph">如果照這個邏輯，應該是「先」紀錄消費歷程，然後視商家意願，給客人累積點數或是優惠。</p>



<p class="wp-block-paragraph">累積點數就是所謂的集點卡，只是 LINE 並不會紀錄消費歷程，只有點數資訊。而 CRM 系統是先紀錄消費歷程，然後「自動」計算點數 (規則由商家定義)。</p>



<p class="wp-block-paragraph">或是這樣看：<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color">紀錄消費歷程 → (視商家意願發放點數) → 客戶分級。LINE 只有中間發放/累積點數的功能，並沒有前後兩個區塊的功能。</mark></p>



<p class="wp-block-paragraph">所以可以這樣說，如果商家只是很單純的要「集點卡」的功能，沒問題，LINE 的確是有這樣的功能。但嚴格講起來這並不能稱之為 CRM (客戶關係管理)。</p>



<h2 class="wp-block-heading">結論</h2>



<p class="wp-block-paragraph">LINE 大概是台灣人最常使用的 app 之一，本身就是一個巨大的會員系統。這篇文章我討論了 LINE 集點卡的使用情境，以及跟 CRM 系統的差異在哪。</p>



<p class="wp-block-paragraph">也許初創業，或是微型店家，每個月需要先做到營收，怎麼行銷才是重點，講 CRM 系統有點 too much。也許 LINE 官方帳號的手動回覆，跟 IG 的私訊，就足以接單以及客服。</p>



<p class="wp-block-paragraph"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color">如果生意稍微穩定的店家，我會建議串接 LINE 與 CRM，先做下訂單/查詢訂單，預約/查詢預約的功能。</mark>為什麼？還記得文章上方提到，先「紀錄消費歷程」，客戶經營才能隨之展開。</p>



<p class="wp-block-paragraph">先紀錄消費歷程，後面才能接著做客戶分級、分眾行銷、自動化行銷，等等。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>LINE 通知型訊息 (notification message)，明確知道發訊息者是誰，比傳統手機簡訊更安心及便宜</title>
		<link>https://blog.yuyansoftware.com.tw/2024/03/line-notification-message/</link>
		
		<dc:creator><![CDATA[Larry]]></dc:creator>
		<pubDate>Sun, 31 Mar 2024 08:44:13 +0000</pubDate>
				<category><![CDATA[LINE]]></category>
		<category><![CDATA[網路科技]]></category>
		<category><![CDATA[客製化網站系統]]></category>
		<guid isPermaLink="false">https://blog.yuyansoftware.com.tw/?p=19319</guid>

					<description><![CDATA[傳統的手機簡訊，除了訊息內容外，就只有一個來訊的電話號碼，很難判斷真假。LINE 通知型訊息可以發送給「非好友」的用戶，會明確顯示發送者是誰，費用也比手機簡訊大幅降低。]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">擁有<mark style="background-color:rgba(0, 0, 0, 0);color:#189b6b" class="has-inline-color">綠色盾牌</mark>、<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color">藍色盾牌</mark> LINE官方帳號的商家，可以使用 <strong>LINE 通知型訊息</strong> (notification message)。不知道擁有這兩種會員等級的商家，有沒有善用這個工具。</p>



<p class="wp-block-paragraph">傳統的手機簡訊，除了訊息內容外，就只有一個來訊的電話號碼，用戶只有這個線索來判斷來訊真假。</p>



<p class="wp-block-paragraph">即使是真的公司傳來的，因為無從判斷真假，可能也不敢點訊息內所附的連結。</p>



<h2 class="wp-block-heading">什麼是 LINE 通知型訊息？</h2>



<p class="wp-block-paragraph">LINE 通知型訊息的收訊位置是在 LINE 裡。我想，每個台灣人手機有安裝 LINE，會點開，這應該是一個合理的假設。</p>



<p class="wp-block-paragraph">而且，「不需」加入商家的官方帳號，也會收到通知型訊息。所以可以說它是一個「跨頻道」的訊息。</p>



<p class="wp-block-paragraph"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color">如果沒加商家帳號的用戶，也會收到通知型訊息。那當然，什麼商家可以發訊息，可以發什麼訊息，LINE 就要把關。</mark>如果沒加商家帳號也會收到，當然不能是行銷訊息。</p>



<p class="wp-block-paragraph">只有綠色盾牌、藍色盾牌 LINE官方帳號的商家，可以發通知型訊息，而且這類商家要再跟 LINE 申請，才能發訊息。</p>



<p class="wp-block-paragraph">訊息內容不能是行銷訊息。一般來說，訊息內容可以是預約成功、交易成功、出貨通知、點數通知，等。</p>



<h3 class="wp-block-heading">如果不想收到通知型訊息</h3>



<p class="wp-block-paragraph">如果不想收到特定商家的通知型訊息，可以封鎖該商家。如果不想收到全部的通知型訊息，可以在 LINE App 設定裡關閉。設定 → 隱私設定 → 提供使用資料，裡面就可以關閉或開啟通知型訊息。</p>



<p class="wp-block-paragraph">但也有可能，我「想收到」這些重要的通知型訊息，但我「不想」加商家的 LINE。這樣就什麼都不要動，LINE App 預設就是這樣。</p>



<h3 class="wp-block-heading">發送通知型訊息對商家的好處</h3>



<p class="wp-block-paragraph">發送通知型訊息對商家的好處是，每則訊息的費用，比手機簡訊大幅減少。而且如果是發送給「非好友」，銷售人員或服務人員可以引導客人，順便加入好友。</p>



<p class="wp-block-paragraph">當然，通知型訊息發送時會明確顯示發送者是誰，對客人及商家來講，都會更安心。</p>



<p class="wp-block-paragraph">就 larry 做客製系統，服務客戶公司及商家這麼多年的經驗來看，<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color">訊息費用的大幅減少，以及可以引導「非好友」的用戶加入好友，的確是商家會採納的好理由。</mark></p>



<p class="wp-block-paragraph">尤其是實體門市、實體服務，交易時不需加入 LINE。或是現在很多用戶不想加商家 LINE (但也許可以接受通知型訊息)，這時通知型訊息就可以派上用場。</p>



<h2 class="wp-block-heading">如果是在商家的 LINE 官方帳號預約或是交易</h2>



<p class="wp-block-paragraph">如果是加商家 LINE 完成的預約或交易，直接用 Messaging API 傳訊息就好。我想交易期間，用戶還不至於去封鎖商家 LINE (交易後就難講)。</p>



<p class="wp-block-paragraph"><a href="https://developers.line.biz/en/reference/partner-docs/#line-notification-messages-api" target="_blank" rel="noreferrer noopener nofollow">https://developers.line.biz/en/reference/partner-docs/#line-notification-messages-api</a><br>通知型訊息的官方工程文件。通知型訊息除了要跟官方申請，另外還有工程的部分。</p>



<pre class="wp-block-code"><code>// 送訊息
POST https://api.line.me/bot/pnp/push

// 拿到指定日期所傳送的訊息數
GET https://api.line.me/v2/bot/message/delivery/pnp</code></pre>



<h2 class="wp-block-heading">結論</h2>



<p class="wp-block-paragraph">現在是一個高度資訊融合的商業世界，也就是很多人說的 OMO (online merge offline)。稍微生意上軌道的商家，LINE 似乎是一個必備的工具，尤其是餐飲、服務、美業，或是各種消費性商品。</p>



<p class="wp-block-paragraph">LINE 是台灣人手機裡必備的一個 app，這應該是合理的假設。如果你有加商家的 LINE，也許有會員資訊，交易紀錄與點數累積都一目了然。</p>



<p class="wp-block-paragraph">如果你沒加商家的 LINE，或不想加，仍然可以收到通知型訊息 (除非你封鎖該商家或進 app 設定關閉)。</p>



<p class="wp-block-paragraph">也許通知型訊息的申請有門檻，有點麻煩。而且如果 Messaging API 設計得宜，其實交易期間客人能查得到資訊即可，並不需要通知型訊息。</p>



<p class="wp-block-paragraph">larry 想，唯一商家的剛需就是：商家本來就要發手機簡訊，而尋求替代方案。通知型訊息費用的大幅降低是一個剛需。</p>



<p class="wp-block-paragraph">最後再提醒一下，只有擁有<mark style="background-color:rgba(0, 0, 0, 0);color:#21986d" class="has-inline-color">綠色盾牌</mark>、<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color">藍色盾牌</mark> LINE官方帳號的商家，才能使用通知型訊息。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>LINE Messaging API 2024/02 有趣的兩個更新：新增 clipboard action 與 follow event 的更新</title>
		<link>https://blog.yuyansoftware.com.tw/2024/03/line-messaging-api-202402-updates/</link>
		
		<dc:creator><![CDATA[Larry]]></dc:creator>
		<pubDate>Sun, 03 Mar 2024 03:32:17 +0000</pubDate>
				<category><![CDATA[LINE]]></category>
		<category><![CDATA[網路科技]]></category>
		<category><![CDATA[客製化網站系統]]></category>
		<guid isPermaLink="false">https://blog.yuyansoftware.com.tw/?p=18941</guid>

					<description><![CDATA[上個月 (2024年2月) LINE 官方公布了兩個 Messaging API 的更新：新增 clipboard action 與 follow event 的更新。對於商家經營來講，分別對應著有趣的使用情境。]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">LINE 大概是台灣人最常使用的手機 APP，當然，以商家來講 LINE 是協助營運很重要的一個工具。</p>



<p class="wp-block-paragraph">上個月 (2024年2月) LINE 官方公布了兩個 Messaging API 的更新，分別對應著有趣的使用情境。</p>



<h2 class="wp-block-heading">第一個更新</h2>



<p class="wp-block-paragraph">首先是新增了 <strong>clipboard action</strong><br><a href="https://developers.line.biz/en/news/2024/02/05/messaging-api-updated/" target="_blank" rel="noreferrer noopener nofollow">https://developers.line.biz/en/news/2024/02/05/messaging-api-updated/</a></p>



<p class="wp-block-paragraph">舉例來講，LINE 官方頻道回覆這個卡牌給客人</p>


<div class="wp-block-image">
<figure class="aligncenter size-full is-resized"><img fetchpriority="high" decoding="async" width="350" height="366" src="https://blog.yuyansoftware.com.tw/wp-content/uploads/2024/03/line-messaging-api-1.png" alt="LINE Messaging API clipboard action clipboardText" class="wp-image-19088" style="width:200px" srcset="https://blog.yuyansoftware.com.tw/wp-content/uploads/2024/03/line-messaging-api-1.png 350w, https://blog.yuyansoftware.com.tw/wp-content/uploads/2024/03/line-messaging-api-1-287x300.png 287w" sizes="(max-width: 350px) 70vw, 350px" /></figure>
</div>


<p class="wp-block-paragraph">像是這個 Copy 按鈕，就可以用 clipboard action 來做。裡面有一個屬性 <code><em>clipboardText</em></code>，可以填入類似優惠碼之類。使用者點 Copy 按鈕後，<code><em>clipboardText</em></code> 的內容就會被使用者複製起來 (等同於一般的圈選文字再複製)。</p>



<p class="wp-block-paragraph">舉例來講，如果 <code><em>clipboardText</em></code> 的內容是優惠碼，使用者就可以很輕易的複製，再貼上到其他該填入的地方。當然，不只優惠碼，還可以做各種應用的變化。</p>



<h2 class="wp-block-heading">第二個更新</h2>



<p class="wp-block-paragraph">第二個更新是，現在能分辨使用者是「新加好友」還是「解除封鎖」<br><a href="https://developers.line.biz/en/news/2024/02/06/add-friends-and-unblock-friends-can-now-be-determined-by-webhook/" target="_blank" rel="noreferrer noopener nofollow">https://developers.line.biz/en/news/2024/02/06/add-friends-and-unblock-friends-can-now-be-determined-by-webhook/</a></p>



<p class="wp-block-paragraph">不管是使用者「新加好友」或是「解除封鎖」，LINE 都會發出一個 follow event，但之前無法分辨這個使用者是「新加好友」還是「解除封鎖」。</p>



<p class="wp-block-paragraph">follow event 中新增了一個回傳值 <code><em>follow.isUnblocked (bool)</em></code>，當然 true 的話就是解除封鎖，反之是新加好友。</p>



<p class="wp-block-paragraph"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color">如果能分辨的話，在「新加好友」時，例如可以送一個優惠卷；在「解除封鎖」時可以傳一段感謝您回來的訊息。</mark></p>



<h2 class="wp-block-heading">LINE SDK 版本變動的細節</h2>



<p class="wp-block-paragraph">LINE SDK 的版本變動，還有詳細的功能變動可以參考下方連結。選擇你使用的語言，不同語言有不同的 SDK。<br><a href="https://developers.line.biz/en/docs/messaging-api/line-bot-sdk/#official-sdks" target="_blank" rel="noreferrer noopener nofollow">https://developers.line.biz/en/docs/messaging-api/line-bot-sdk/#official-sdks</a></p>



<p class="wp-block-paragraph">像是 clipboard action 的更新，要客戶端 LINE App 版本 &gt;= 14.0 才能使用。<code><em>follow.isUnblocked</em></code> 與 LINE App 版本無關 (應該 LINE API server 更動就好)，但前兩者都在特定的 SDK 版本以上才被納入。</p>



<p class="wp-block-paragraph">以上是最近 (2024年2月) 的兩個 Messaging API 的更新，分享給大家。我滿喜歡這些 LINE 公告，都有帶到使用情境。</p>



<p class="wp-block-paragraph">當然，人家應該是先觀察到商家的需求，才做 Messaging API 的設計與更新。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>LINE LIFF (LINE Frontend Framework) 前端框架，如何理解、設定與使用 LIFF app</title>
		<link>https://blog.yuyansoftware.com.tw/2023/06/liff-app-line-frontend-framework/</link>
		
		<dc:creator><![CDATA[Larry]]></dc:creator>
		<pubDate>Sat, 03 Jun 2023 13:01:27 +0000</pubDate>
				<category><![CDATA[LINE]]></category>
		<category><![CDATA[前端工程]]></category>
		<category><![CDATA[網路科技]]></category>
		<category><![CDATA[客製化網站系統]]></category>
		<guid isPermaLink="false">https://blog.yuyansoftware.com.tw/?p=15238</guid>

					<description><![CDATA[LINE 應該是台灣人最常使用的通訊軟體。LIFF (LINE Frontend Framework) 是一個 LINE 提供的 web app 平台。在 LINE app 中點開 LIFF，直接用戶登入後就可以開始應用。]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">圖片來源 <a href="https://developers.line.biz/en/docs/liff/overview/" target="_blank" rel="noreferrer noopener nofollow">https://developers.line.biz/en/docs/liff/overview/</a></p>



<p class="wp-block-paragraph">LINE 應該是台灣人最常使用的通訊軟體。LIFF (<strong>LINE Frontend Framework</strong>) 是一個 LINE 提供的 web app 平台。</p>



<p class="wp-block-paragraph">LIFF app 我們可以想成是一個嵌入 LIFF SDK (js) 的網頁，使用者在自己的 LINE 點開該網頁時，直接 Line login 到該網頁。</p>



<p class="wp-block-paragraph">一般 LINE 聊天機器人，與用戶交談一定是「問答式訊息」的形式。LIFF 因為是網頁的形式，可以達成一些問答式訊息做不到的效果。另外，LIFF 因為是 LINE 自家的東西，高度整合，在 LINE 裡彈出 LIFF 網頁的用戶體驗，也比轉址到其他網頁好。</p>



<h2 class="wp-block-heading">如何建立 LIFF app</h2>



<p class="wp-block-paragraph">要使用 LIFF，到 LINE <strong>Developer Console</strong> 建立一個類型為「LINE Login」的 channel。目前 (2023年6月) 一定要類型為「LINE Login」的 channel (Messaging API 不行)。</p>



<p class="wp-block-paragraph">在「LINE Login」channel 切到 LIFF tab，可以新增一個 LIFF app。也可以新增多個 LIFF app，會列在這頁。</p>



<p class="wp-block-paragraph">如果在一個 channel 底下新增了<strong>多個</strong> LIFF app。LINE 在前幾天有一個公告，2023/5/23 之後新增的 LIFF app，會以新增日期新到舊排列，2023/5/23 以前新增的 LIFF app 則沒有固定的排序規則。<br><a href="https://developers.line.biz/en/news/2023/05/23/order-of-liff-apps/" target="_blank" rel="noreferrer noopener nofollow">https://developers.line.biz/en/news/2023/05/23/order-of-liff-apps/</a></p>



<h3 class="wp-block-heading">新增 LIFF app 時的欄位</h3>



<p class="wp-block-paragraph">新增 LIFF app 時，填入你想要的 LIFF app 名稱。選擇彈出的 Size：Full / Tall / Compact，三擇一。</p>



<p class="wp-block-paragraph">彈出 Size 的選項分別是：Full 佔據手機螢幕 100%，Tall 佔據手機螢幕「約」80%，Compact 佔據手機螢幕「約」50%。</p>



<p class="wp-block-paragraph">填入你的 <strong>Endpoint URL</strong>。這是你要 host 實體網頁的 URL，這實體網頁就是所謂的 LIFF web app。輸入的網址要 https 開頭。</p>



<p class="wp-block-paragraph">接著選擇用戶授權 LIFF SDK 的不同權限 Scopes：profile / chat_message.write / openid，可以多選。</p>



<p class="wp-block-paragraph">以 profile 舉例，如果有勾 profile 且用戶使用時同意，這樣 LIFF app 就可以使用 <code><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color">liff.getProfile()</mark></code> 或 <code><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color">liff.getFriendship()</mark></code> 兩個 API。</p>



<p class="wp-block-paragraph">接著選擇 Bot link feature: On (Normal) / On (Aggressive) / Off，三擇一。</p>



<p class="wp-block-paragraph">一般來說選 On (Normal)，這會在 LIFF app 用戶使用同意這一頁，增加一個將此&nbsp;LINE 官方帳號 (Official Account, OA) 增加為好友的選項。</p>



<h3 class="wp-block-heading">新增完了會得到一個 LIFF ID 跟 LIFF URL</h3>



<p class="wp-block-paragraph">新增完了會得到一個 LIFF ID 跟 LIFF URL。以目前來說 (2023年6月)，LIFF URL 的格式是 <code><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color">https://liff.line.me/your_liff_id</mark></code>&nbsp;</p>



<p class="wp-block-paragraph">使用者觸發此 LIFF URL 時，LINE 會轉址到之前填的 <strong>Endpoint URL</strong>，並提供 LIFF web app。當然，轉址時 LINE server 會確認點擊來源、確認是哪個 LINE 用戶，以及 Developer Console 的後台設定，例如彈出高度的設定。</p>



<h2 class="wp-block-heading">LIFF 網頁的製作</h2>



<p class="wp-block-paragraph"><a href="https://developers.line.biz/en/docs/liff/developing-liff-apps/" target="_blank" rel="noreferrer noopener nofollow">https://developers.line.biz/en/docs/liff/developing-liff-apps/</a><br>LIFF 網頁的製作，參考這份官方文件。基本上一開始一定要 init</p>



<pre class="wp-block-code"><code>liff.init({
    liffId: 'your_liff_id’,
})
.then(() =&gt; {
    // start to use LIFF's api
})
.catch((err) =&gt; {
    console.log(err);
});</code></pre>



<p class="wp-block-paragraph">在 LIFF browser (也就是在 LINE App 中點開)，做完 init 就直接已經 login 了。在 external browser (也就是一般手機/電腦瀏覽器) 要另 call <code><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color">liff.login()</mark></code></p>



<p class="wp-block-paragraph">因為我們主要使用場景是在 LINE App，暫時不談 external browser。</p>



<p class="wp-block-paragraph">如果在 LIFF browser 點開，init / login 成功了，我們可以直接 call <code><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color">liff.getProfile()</mark></code>，就可以拿到 LINE user id，顯示名稱、縮圖。還記得文章上方 Developer Console 設定時，要選一個 Scopes，有勾 profile 才能使用 <code><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color">liff.getProfile()</mark></code>。</p>



<p class="wp-block-paragraph">詳細 LIFF API 規格參考官方文件<br><a href="https://developers.line.biz/en/reference/liff/" target="_blank" rel="noreferrer noopener nofollow">https://developers.line.biz/en/reference/liff/</a></p>



<h3 class="wp-block-heading">init / login 完成了，你的應用就可以開始了</h3>



<p class="wp-block-paragraph">init / login 完成了，你的應用就可以開始了。例如，如果需要 LIFF app 與你的系統主機作互動，用 access token 或 ID token 當溝通方式。</p>



<pre class="wp-block-code"><code>// 二擇一，如果需要回傳 server
liff.getAccessToken();
liff.getIDToken(); // 需要 Scope openid 的權限</code></pre>



<p class="wp-block-paragraph">完整的互動方式請參考官方文件，有 sequence diagram<br><a href="https://developers.line.biz/en/docs/liff/using-user-profile/" target="_blank" rel="noreferrer noopener nofollow">https://developers.line.biz/en/docs/liff/using-user-profile/</a></p>



<p class="wp-block-paragraph">以上大概就是 LIFF app 的架構。建立一個實體網頁 → 在 Developer Console 中設定 → 在實體網頁嵌入 LIFF SDK 並初始成功 → 在 LIFF browser (也就是在 LINE App 中) 點開 <strong>LIFF URL</strong>，建立好的 LIFF app 就會彈出了。</p>



<p class="wp-block-paragraph">接著就是建立你的系統需求、應用、以及變化。</p>



<h2 class="wp-block-heading">結論</h2>



<p class="wp-block-paragraph">本篇文章走了一遍 LIFF app 大的架構與理解，細節有需要請參考官方文件。</p>



<p class="wp-block-paragraph"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color">LIFF 因為是網頁的形式，可以達成一些「問答式訊息」做不到的效果。</mark>在 LINE app 中點開 LIFF，直接用戶登入後就可以開始應用。網頁開發上應該也與一般網頁無異 (不要使用 LIFF browser 不支援的技術)。</p>



<p class="wp-block-paragraph">另外，LIFF 因為是 LINE 自家的東西，高度整合，在 LINE 裡彈出 LIFF 網頁，用戶體驗應該也比轉址其他網頁好。</p>



<p class="wp-block-paragraph"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color">很多服務業，例如餐飲業或美業，如果有建立 FB/IG 粉絲頁、Google 商家，其實並不需要也沒有官網。</mark>此時 LINE 的應用就派上用場了，例如查詢預約及會員點數。</p>



<p class="wp-block-paragraph">其實很多行業並不需要官網，我們要在這個認知下，做系統的規劃。</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
