iT邦幫忙

2021 iThome 鐵人賽

DAY 29
0
自我挑戰組

邊工作邊進行前端學習之旅系列 第 29

[Day 29] JS 實作練習 - YouTube API

前言

在練習 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展示影片

  • 使用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


上一篇
[Day 28] JS實作練習 - Scroll Blog無限捲動
下一篇
[Day 30] 完賽心得
系列文
邊工作邊進行前端學習之旅30

尚未有邦友留言

立即登入留言