# YouTube Search Engine 實作

###### tags: `實作` `AJAX` `javascript`

[實作頁面連結](https://allenw0815.github.io/mission/mission_33/index.html)


### Flowchart

1. HTML CSS 不多
2. 如何串接 YT 的 API 取得搜尋的相關資料
3. JS 讓資料在 input 點擊時顯示搜尋資料
4. 判斷有無上下頁來生成按鈕

### YouTube API 取得

透過此平台( [Google cloud club Platform](https://cloud.google.com/?hl=zh-tw) )取得服務，建立憑證取得金鑰以及啟用下圖的 API ，這邊理解金鑰為辨認請求端身分以及做限制 ( 每日配額或影片嵌入權限之類的 )，圖三為每個金鑰的配額度，而不同的請求會消耗掉不同額度的配額，參考( [YouTube Data API (v3) - Quota Calculator](https://developers.google.com/youtube/v3/determine_quota_cost) )，也就是說我在頁面中搜尋個一百次達到配額上限後，之後的回應就會是 403 拒絕回復了。


---

---

>JS流程
1. call API 得到資料，帶有各參數來取得資料

let key = "AIzaSyC3Uae2cxrss-MgXU3XyoXXh6As_4ffE4Y"
let key2 = "AIzaSyAR5RPNsaVqHdtlYeNjtQQm12R8KSzsnHY" // 啟用兩組因配額用完

$('.submit').click(function(){
    let q = $('input').val()
    videoSearch(key2,q,5)
})

function videoSearch (key, q, limit) {
    $.get('https://www.googleapis.com/youtube/v3/search', 
    {
        part: "snippet,id",
        q: q, //搜尋內容
        type: "video",
        key: key, // 金鑰
        maxResults: limit,//筆數
    },
    function(data){
        // 換頁用
        let nextPageToken = data.nextPageToken
        let prevPageToken = data.prevPageToken

        data.items.forEach((item)={
        // display... 畫面內容生成
        })
        $('.result ul').html(display) // 生畫面
        let btns = createBtn(nextPageToken,prevPageToken,q) //造按鈕
        $('.pages').html(btns) //生按鈕
        $('#prev').on('click',prevPage)           
        $('#next').on('click',nextPage)           
    })
}

2. 換頁面按鈕的部分，在資料中有換頁的 token 可使用，取得後傳入此 function 內紀錄在 data-key 屬性裡面，q 搜尋結果也傳進來 ( 這樣當 input.value 更換時沒有案搜尋都不會改變資料 )

function createBtn(nextPageToken,prevPageToken,q){
    let output = ''
    // 讓第一頁只有下一頁的一個按鈕之判斷
    if(!prevPageToken){
        output = `
        <button class="switch" id="next" data-token=${nextPageToken} data-query=${q} onclick="nextPage()">
          <i class="fas fa-arrow-circle-right"></i>
        </button>
        `
    }else{    
        output = `
        <button class="switch" id="prev" data-token=${prevPageToken} data-query=${q} onclick="prevPage()">
           <i class="fas fa-arrow-circle-left"></i>
        </button>
        <button class="switch" id="next" data-token=${nextPageToken} data-query=${q} onclick="nextPage()">
          <i class="fas fa-arrow-circle-right"></i>
        </button>
        `
    }
     return output
}

這邊只差在多了一個帶入參數，上下頁取不同 token 即可

function nextPage(){
        let token = $('#next').data('token')
        let q = $('#next').data('query')

        $.get('https://www.googleapis.com/youtube/v3/search', 
        {
            part: "snippet,id",
            q: q,
            type: "video",
            key: key,
            pageToken: token, //唯一差別在這邊多傳入了此參數
            maxResults: limit,
        },
        function(data){
        // 換頁用
        let nextPageToken = data.nextPageToken
        let prevPageToken = data.prevPageToken

        data.items.forEach((item)={
        // display... 畫面內容生成
        })
        $('.result ul').html(display) // 再生下一頁畫面
        let btns = createBtn(nextPageToken,prevPageToken,q) //造按鈕
        $('.pages').html(btns) //生按鈕
        $('#prev').on('click',prevPage)           
        $('#next').on('click',nextPage)           
    }) 
}

### 紀錄

* 要用JavaScript操縱網頁的DOM元素時，必須等網頁完全載入後才可安全地進行操作，而要確保網頁載入，可使用 JQ ( 一 ) & JS ( 二 )

$( document ).ready(function() {
  // 在這撰寫javascript程式碼
});

window.onload = function() {
  // 在這撰寫javascript程式碼
};

* 最後這個光箱函式庫來播放影片，沒有多研究，引入後只套 class 而已。
[fresco.js](https://www.frescojs.com

### 小記

整個專案只做到拿到資料、顯示畫面、換頁、光箱播放，除此之外有需多文件跟有的沒有的設定很複雜，上網查也有許多不同的做法，而且有許多小問題會出現，像是配額這部分原本不知道，出錯後找了半天才發現，有些影片回無法撥放有些卻可以，好像是影片的類型也有區別的樣子，好難啊幹!
等之後強一點再補充吧。