iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 30
0
影片教學

用Django架構建置專屬的LINEBOT吧系列 第 30

[Day 30]用Django架構建置專屬的LINEBOT吧 - LIFF(III)建立LIFF頁面

好了,最後一天了,也沒有太多新花樣,
今天就來個組合拳吧!

建立LIFF頁面

LIFF的官方API文檔中有介紹到,關於LIFF v2的使用方法,
LIFF v2有很多可以使用的API,簡單講一下可以做哪些事情,
包括了:
1.取得基本環境資訊(使用的介面等)
2.登入、登出資訊
3.取得使用者資料
4.透過網頁傳訊息
5.開啟連結或跳轉
6.打開QRcode掃描器

還有其他更多功能,
當然這一篇是不會講到這些全部的,
只能簡單示範一下其中幾個API要怎麼使用,
今年第一次參加的鐵人賽就要下台一鞠躬啦~

這邊做一個範例,是user點了LIFF URL之後,
LINE的使用者名稱會跑到網頁上,一個簡單的範例,
但是以此類推基本上都可以比較知道API的調用方法了,

有幾個部分是初學者會需要知道的,
要使用LIFF API,有以下步驟:

1.先建立兩個HTML檔案,一個是收User暱稱的LIFF網頁,一個是呈現User暱稱的網頁,
2.將目標網址建立在urls.py當中,
3.目標網址丟到liffpy當中,產出LIFF ID
4.將LIFF ID寫到HTML檔案當中,用liff.init()進行API初始化設定
5.盡情使用LIFF API吧!!

這邊就不廢話啦,延續前兩篇的內容繼續,
首先建立一個LIFF用的HTML檔案:

#liff_test.html

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8" />
    <title>LIFF測試</title>
    <script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
    <body>
        <h1>網頁跳轉中</h1>
    </body>
</html>

第二個是呈現畫面用的HTML網頁,

#sayhi.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>LIFF抓User_name測試</title>
    </head>
    <body>
        <h1> {{name}} 完成</h1>
    </body>
</html>

這邊先建立了一個在畫面上是網頁跳轉中的HTML檔案,
其中要引入的函數庫包括LIFF v2以及jQuery,
jQuery就是一套跨瀏覽器的JavaScript函式庫,
可簡化HTML與JavaScript之間的操作,

接著下來,將預計建立LIFF使用的網址路徑,
設定至urls.py當中:

#urls.py
urlpatterns = [
    path('admin/', admin.site.urls),
    url('^callback',views.callback),
    url('^notify',views.notify),
    url('^ig_command',views.ig_command),
    url('^comm',views.comm),
    url('^index/(?P<day>\d+)/(?P<post_title>.+)$',views.index),
    url('^Weather_Predict',views.Weather_Predict),
    
    #新增liff這個url,這個是用來建例LIFF轉跳頁面用的
    url('^liff',views.liff),
    #新增sayhi這一個url,並設定(?P<name>.+),用來獲得user的名字參數並顯示在畫面上
    url('^sayhi/(?P<name>.+)',views.sayhi),

]

以將網址丟到liffpy當中,獲得LIFF ID,

#views.py

#若文字訊息中有https://,則自動將其URL建立LIFF
elif 'https://' in mtext:
    try:
        liff_id = liff_api.add(
            view_type="full",
            view_url=mtext)
        #1607718325-5QmeBQop=google首頁
        message.append(TextSendMessage(text='https://liff.line.me/'+liff_id))
        line_bot_api.reply_message(event.reply_token,message)
    except:
        print(err.message)

https://ithelp.ithome.com.tw/upload/images/20201015/20121176I7HBUJEBUZ.jpg

這樣一來就獲得了LIFF ID,這個例子中是"1607718325-8lN5k6oL"

回過頭來改一下HTML檔案:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8" />
    <title>LIFF測試</title>
    <script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
<script>


    $(document).ready(function () {
        // Using a Promise object
        liff.init({
            liffId: '1607718325-8lN5k6oL' // Use own liffId
        })
        .then(() => {
            // Start to use liff's api
            liff.getProfile()
            .then(profile => {
                liff.openWindow({
                url: "https://這邊改自己的domain/sayhi/"+profile.displayName,
                });
                liff.closeWindow();  //關閉視窗
            })
            .catch((err) => {
            console.log('error', err);
            });

        })
        .catch((err) => {
            // Error happens during initialization
            console.log(err.code, err.message);
        });
    });

</script>
</head>
    <body>
        <h1>網頁跳轉中</h1>
    </body>
</html>

中間加入的Javascript程式碼區段,
其中 $(document).ready(function()是jQuery等待網頁載完之後開始動作的語法,
後面的{}中是網頁載完之後接著做的動作,

liff.init()是LIFF初始化設定的語法,
這邊就要把LIFF ID放入了,

.then(()) => 後面指向如果成功初始化的話,接著執行的程式,
.catch((err)) => 這邊指向出現error時執行的程式

liff.getProfile()是獲得User在LINE上面的公開資訊,
這邊我們的目的是獲取暱稱,即profile.displayName,
接著我們把這個暱稱,組合成sayhi的URL後面的參數,

接著用liff.openWindow()開啟這個URL,
同時用liff.closeWindow()關閉本來的LIFF網頁,

於是就完成了跳轉的作業啦,
成果展示影片:

實際操作:

手機展示:

這樣就完成囉!
/images/emoticon/emoticon12.gif


完賽感言:
這次好不容易趁著鐵人賽把自己所學整理了一輪,
覺得意外充實阿!


上一篇
[Day 29]用Django架構建置專屬的LINEBOT吧 - LIFF(II)Django Template樣板
系列文
用Django架構建置專屬的LINEBOT吧30

尚未有邦友留言

立即登入留言