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;
    }

簡單講解一下

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

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

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

JavaScript – 常見的 AJAX 實現方式

AXIOS DOCS