LINE Chatbot 建立遊戲化體驗APP|Day5建立徽章積分制度

前一章節我們從積分去判斷出使用者的積分,以及他應得的徽章,這章我們要將它實現在LIFF的頁面上。

LIFF提供使用者登入後能夠提交他的userID給後台,我們根據userID判斷哪些徽章應該亮起來

1.首先我們利用LIFF的sdk,用js取得userID

var liffID = 'XXXXXXXXXXXX';

liff.init({
  liffId: liffID
}).then(function() {
  console.log('LIFF init');
  
  // 這邊開始寫使用其他功能
  
}).catch(function(error) {
  console.log(error);
});

2.得到userID後,使用js回傳值給python函式,python回傳值給html,判斷應該生成哪些徽章,這邊使用的是Axios。Axios 是一個輕量的 AJAX 套件,本質上亦是將 XHR 方法做封裝,並使用 Promise 方法,對一個單純用來做 AJAX 的套件幾乎可以說是沒有什麼缺點。

首先引入Axios的CDN

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

然後寫入js,先寫入判斷登入,如果以登入,就可以獲得user profile(詳細API使用查看官網)

isLoggedIn = liff.isLoggedIn();
        console.log(isLoggedIn);
        if(isLoggedIn) {
            liff.getProfile()
        .then(function(profile) {
            console.log('profile:' + profile);
            document.getElementById("user-info").value = profile.displayName;
            document.getElementById("userid").value = profile.userId;
            document.getElementById("pointtest").value = sendID(profile.userId);
            document.getElementById("get-point").value = getPoint();
        });
            }

寫一個sendID函式,去獲得post後的數值

function sendID(uid){
        axios.post('https://linechatv5.herokuapp.com/update_ajax',
            {'sCustId': uid },
            { headers: { 'Content-Type': 'application/json' } })
            .then(res => document.getElementById("sendsuccess").value = res.data)
            .catch(err => console.log(err));
            
            document.getElementById("sendfail").value = err;
            return res.data;
    }

簡單講解一下

  1. axios.post是引用axios做ajax的動作,選擇的是post的HTTP Method
  2. {‘sCustId’: ‘cid’,’sActivityId’: ‘activitVal’} 是傳入的data,這邊用json的方式
  3. { headers: { ‘Content-Type’: ‘application/json’ } } 送出資料的設定
  4. .then(res => //執行的函式 ) 如果POST成功,就執行這個函式,一般會放console.log(res)
  5. document.getElementById(“sendsuccess”).value = res.data 使用js取代值方式,將網站的內容做替換
  6. .catch(err => console.log(err)); 如果POST失敗,就執行這個函式

參考資料:let’s write LIFF最詳盡的介紹

從js用ajax傳送post,回應到html

JavaScript – 常見的 AJAX 實現方式

AXIOS DOCS

回到頂端