前言

在練習 Ajax 串接實作時，饅頭計畫中就推薦就找了幾個實作作業，找有開放資源的網站(如：YouTube、Github、氣象局)，製作搜尋引擎取得資料。而在串接其他平台的資料，很重要的一點就是要練習看該平台所提供的官方文件，從提供的資料可以知道要怎麼取得所需要的資料、參數要如何放。必須說，一開始真的花滿多的時間在看文件，不段嘗試串接的參數，反覆查看取得的資料是否合乎需求。

成品

觀察功能需求

• 搜尋框，輸入搜尋關鍵字，下方會列出5筆列表
  • 有圖片縮圖、影片標題、影片描述
• 按下next page 會取得下5筆資料
• 按下prev page，會取得上5筆資料

youtube API(application programming interface)資料查看

YouTube 資料 API 參考手冊

取得授權：憑證

項目拆解說明

1.嘗試串接Youtube API

• 首先需考量，我們所需要的資料參數有哪些
• 在抓取成功的部分，要設置抓取5筆搜尋到的5筆資料，並將其呈現於頁面
  • 除了5筆資料外，還需要跳轉上、下頁的按鈕

function getVideo() {
  let value = $('#search-field').val();
  let youtubeURL = "https://www.googleapis.com/youtube/v3/search";
  $.ajax({
    type: "GET",
    url: youtubeURL,
    data: {//將要放入網址的參數放在這
      part:
        'id,snippet',// 必填，把需要的資訊列出來
      q: value,// 查詢文字
      maxResults: 5,// 預設為五筆資料，可以設定1~50
      type: "video",
      key: '放入申請的金鑰'// 使用 API 只能取得公開的播放清單

    },
    dataType: "json",
    success: function (data) {
      //console.log(data);
      let nextPageToken = data.nextPageToken;
      let prevPageToken = data.prevPageToken;

      //試著將收到的資料傳入，並呈現於畫面中
      insertItems(data);

      getBtn(data, prevPageToken, nextPageToken)


    }, error: function (err) {
      console.log('oh no');
    }
  });
}

網址放入參數
[JS] 使用 JavaScript 解析網址與處理網址中的參數（URL Parameters）

2.將資料呈現於頁面(insertItems())

• 透過迴圈方式將要抓取的資料依序填入
• 觀察原本畫面結構，並依據去找尋資料中符合的資料
  • videoId、videoTitle、description、channelTitle...

function insertItems(item) {
  let output = '';
  $.each(item.items, function (index, value) {
    let videoId = item.items[index].id.videoId;
    let videoTitle = item.items[index].snippet.title;
    let description = item.items[index].snippet.description;
    let thumbnailURL = item.items[index].snippet.thumbnails.high.url;//高解析度影片縮圖
    let channelTitle = item.items[index].snippet.channelTitle;
    let publishedDate = item.items[index].snippet.publishedAt;
    // 按鈕

    output += `<li><div class="list-left">
    <img src=" ${thumbnailURL}"></div>
    <div class="list-right">
    <h3>
    <a data-fancybox data-type="iframe" data-src="https://www.youtube.com/embed/${videoId}" "href="javascript:;"> ${videoTitle} </a></h3> <small>By <span class="cTitle"> ${channelTitle}</span> on ${publishedDate}</small>
    <p> ${description} <p></div></li> <div classs="clearfix"></div> 
    `

    $('#results').html(output);
  });
};

3.製作上、下頁的按鈕鍵

• 注意該函式要帶入的參數有哪些
• 我們要判斷為，在第一頁時，只有下一頁的按鈕
  • 判斷方式為，(!prevPageToken)沒有上一頁的token
  • （截圖）
• 在判斷之中，我們需要將要插入的標籤與內容，放入，並append到畫面要呈現的位置
• 注意：在插入的button之中，加入data-token="${nextPageToken}" data-query="${value}"，用於後續抓取屬性內容。

function getBtn(value, prevPageToken, nextPageToken) {
  console.log(nextPageToken)
  if (!prevPageToken) {
    var btnOutput = $(`<div class="button-container">
    <button id="next-button" class="paging-button" data-token="${nextPageToken}" data-query="${value}" onclick="pressNext();"> Next Page</button></div>`
    )
    $("#buttons").append(btnOutput);
  } else {
    var btnOutput = $(`<div class="button-container"><button id="prev-button" class="paging-button" data-token="${prevPageToken}" data-query="${value}" onclick="pressPrev();"> Prev Page</button>  
    <button id="next-button" class="paging-button"  data-token="${nextPageToken}" data-query="${value}" onclick="pressNext();">Next Page</button></div>`)
    $("#buttons").append(btnOutput);
  }

}

Youtube:Implementation: Pagination

4.下一頁點下後，下五筆的資料

• 同樣以ajax的方式來抓取
  • 在參數的地方我們要抓取的是，按取下一頁的token
• success之中所應用的函示，同樣為插入5筆的資料，以及上下頁的按鈕

//取得下一頁的資料
function pressNext() {

  let youtubeURL = "https://www.googleapis.com/youtube/v3/search";
  let token = $('#next-button').data('token');
  let value = $('#search-field').val();
  $.ajax({
    type: "GET",
    url: youtubeURL,
    data: {//將要放入網址的參數放在這
      part:
        'id,snippet',// 必填，把需要的資訊列出來
      q: value,// 查詢文字
      pageToken: token,
      maxResults: 5,// 預設為五筆資料，可以設定1~50
      type: "video",

      key: '放入申請的金鑰'// 使用 API 只能取得公開的播放清單

    },
    dataType: "json",
    success: function (data) {
      console.log(data);
      let nextPageToken = data.nextPageToken;
      let prevPageToken = data.prevPageToken;

      // 清空內容
      $('#results').html('');
      $('#buttons').html('');
      //試著將收到的資料傳入，並呈現於畫面中
      insertItems(data);

      getBtn(data, prevPageToken, nextPageToken)


    }, error: function (err) {
      console.log('oh no');
    }
  });

}

5.上一頁

• 同樣的抓取方式，只有要帶入的資料有些差異
• token = $('#prev-button').data('token');

//前一頁
function pressPrev() {
  // 清空內容
  $('#results').html('');
  $('#buttons').html('');
  let youtubeURL = new URL(`https://www.googleapis.com/youtube/v3/search?`);
  let token = $('#prev-button').data('token');
  let value = $('#search-field').val();
  $.ajax({
    type: "GET",
    url: youtubeURL,
    data: {//將要放入網址的參數放在這
      part:
        'id,snippet',// 必填，把需要的資訊列出來
      q: value,// 查詢文字
      pageToken: token,
      maxResults: 5,// 預設為五筆資料，可以設定1~50
      type: "video",

      key: '放入申請的金鑰'// 使用 API 只能取得公開的播放清單

    },
    dataType: "json",
    success: function (data) {
      console.log(data);
      let nextPageToken = data.nextPageToken;
      let prevPageToken = data.prevPageToken;

      // 清空內容
      $('#results').html('');
      $('#buttons').html('');
      //試著將收到的資料傳入，並呈現於畫面中
      insertItems(data);

      getBtn(data, prevPageToken, nextPageToken)


    }, error: function (err) {
      console.log('oh no');
    }
  });

}

HTML5 自定義屬性 data-* 和 jQuery.data 詳解
2018.06.20
[技術分享] 什麼是 HTML 5 中的資料屬性（data-* attribute）

6.運用fancybox的方式彈出

• 使用fancyBox展示影片

  • fancybox Documention
  • fancybox-CDN

• 使用iframe連結欲嵌入的外部影片連結

  • iframe 是框架的一種，也稱為內置框架或內聯框架，用來在網頁內嵌入另外一個網頁
    

• 透過CDN方式連結fancybox套件

<!-- fancyBox -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>

• 在我們點選該影片名稱區，插入影片id

<h3><a data-fancybox data-type="iframe" data-src="https://www.youtube.com/embed/${videoId}" "href="javascript:;"> ${videoTitle} 
</a></h3>

$('[data-fancybox]').fancybox({
  toolbar  : false,
  smallBtn : true,
  iframe : {
    preload : false
  }
})

今天文章的練習來源： [jQuery] - 練習-Youtube Search Engine