[Day21] 架一個可以用 LINE 來整人的網站😍 - HTML架構 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2023 iThome 鐵人賽

DAY 21

Software Development

再騙小心沒朋友🥵 用LIFF實作LINE整人工具系列第 21 篇

[Day21] 架一個可以用 LINE 來整人的網站😍 - HTML架構

15th鐵人賽

lulu_meat

2023-10-05 22:41:09

681 瀏覽

分享至

在看了十幾篇無聊的 JavaScript 教學文章之後終於來到整人網頁的製作了！！今天要來看分享 LINE 圖文訊息網頁的架構和之後會用到的工具～先來獻上整人工具的流程圖：

會用到的工具 & 程式

HTML / CSS ：網頁的基礎

雖然網頁長成這樣，但也是有用 CSS 美化的好嗎(雖然只有調整按鈕大小笑死)。HTML 用來製作網頁的按鈕，並在按鈕中嵌入 JavaScript 的點擊事件(onclick)。
JavaScript：網頁的核心
用來建立非同步函式串接 LINE API，才能順利顯示取得的使用者資料(這個我用很久)。所有的 LINE API 都是 JavaScript 語法，如果看不懂會很痛苦。
LINE API / SDK
整個整人工具用到無數個LINE API，像是 LINE Login、shareTargetPicker、getProfile、sendMessages 等...，缺一不可，之後會介紹重要功能的使用方式。
GitHub：用來架免費網站給你們整人。
FLEX MESSAGE SIMULATOR：用來拉圖文訊息的版面，免去手刻 JSON 的困擾(下圖)。

HTML / CSS 架構

從上面的網頁圖片就可以知道我對網頁外觀沒有什麼追求，只要能用就好，所以程式碼非常簡單：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">
	<title>My LIFF App3</title>
	<style>
		button {
			display: none;
			width: 50%;
			height: 10%;
			padding: 16px 0;
			margin: auto 0;
		}
	</style>
</head>
<body>
	<button id="btnShare" onclick="sendShare_Gift()" style="display: none;margin: 20px auto;padding: 20px;">Gift</button>
	<button id="btnShare2" onclick="sendShare_Ladder()" style="display: none;margin: 20px auto;padding: 20px;">Ladder</button>
	<button id="btnShare3" onclick="sendShare_Pay()" style="display: none;margin: 20px auto;padding: 20px;">Pay</button>
	<button id="btnLogin" onclick="liff.login()" style="display: none;margin: 20px auto;padding: 20px;">Log In</button>
	<button id="btnLogOut" onclick="logOut()" style="display: none;margin: 20px auto;padding: 20px;">Log Out</button>
	<script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
</body>
</html>

上面的程式碼純粹只有前端部分，JavaScipt 的部分比較多，會從 LINE API 的功能和使用方式開始介紹再給完整的程式碼。快速列出幾個重點：

按鈕點擊事件
當使用 HTML 的 <button>標籤建立按鈕時，可以使用onclick事件執行指定的函式：

<button onclick="sendShare_Pay()">Pay</button>

這個範例代表按下Pay按鈕時會執行sendShare_Pay()函式的指令。

嵌入 LINE SDK

<script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>

被<script></script>夾住的可以是 JavaScript 程式碼、JavaScript 檔案(.js)，也可以是像上面一樣的 URL 連結。這個連結是 LINE SDK 的 CDN edge path(不會自動更新版本的文件路徑)，只要嵌入這個連結就可以從 LIFF 應用程式呼叫 LIFF SDK。之後會說明 CDN edge path 和 CDN fixed path 的差異。