By mikeZheng

Contents
  1. 1. GOOGLE api 申請
  2. 2. 撰寫google 搜尋
  3. 3. 結果部分

這次要記錄的部分，源自於實驗室最近開始著手撰寫論文的氛圍，因為大家開始在實驗室內日以繼夜(誤)，因此產生了維持良好環境氣氛的想法，率先著手的是強者我同學，開了一隻內網的ＡＰＩ讓其與實驗室的音響結合，透過這個ＡＰＩ與YOUTUBE VIDEO id 就可以遠端操作實驗室的音響，讓播放音樂不用teamviewer也不用走到server前播放。
然後過了一陣子實驗室成員就提出了要有容易使用的介面這種想法，於是前端工程師就開工了。

第一個要改善的是搜尋youtube要無痛進行，因此這篇筆記就是從這個方向進行紀錄。

GOOGLE api 申請

記錄日期2016-12-01
包含記錄日期就是怕之後google改版，可能有些東西就不適用了。

首先去https://console.developers.google.com/apis/
新增專案，並開啟youtube data API

youtube data API

然後去憑證新增一個api金鑰
新增金鑰

新增完後點擊那個金鑰去裡面設定他的權限及限制，
這邊我主要是設定api授權的domian 也就是網域
設定權限

這樣基本的google設定就完成了，
這邊主要的目的就是向google申請使用它們api的授權key，
因為超過流量是要付費的，金鑰的限制一定要設，不然會被玩壞啊。
再來就是著手撰寫的部分。

撰寫google 搜尋

開始撰寫之前
有兩隻js要加載
https://apis.google.com/js/client.js?onload=onClientLoad
https://code.jquery.com/jquery-2.2.4.min.js
這邊主要載入jquery方便撰寫
及google client操作的js

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Youtube searchtitle>
    <script src="https://apis.google.com/js/client.js?onload=onClientLoad">script>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js">script>
head>

這邊是基本的html

<div class="search-container">
  <div class="search">
    <input id="queryInput" class="search-bar"  type="text">
    <button id="searchButton" class="search-button">
      Go
    button>
  div>
div>

<div id="youtube-channel" class="main-container"> div>

//2016 mizTech NTU ESOE mikeZheng 
var musicCards = [];

$(document).ready(function() {
    //替按鈕綁上事件
    $("#searchButton").on("click", function() {
        var query = $("#queryInput").val();
        //簡單防呆一下
        if (query != "") {
            loadYoutubeService($("#queryInput").val());
            console.log(query + " 搜尋中..");
        }
    });
});

//向google 使用youtube服務
function loadYoutubeService(query) {
    gapi.client.load('youtube', 'v3', function() {
        gapi.client.setApiKey('AIzaSyCRwMuGP50aOvrptyXRZtveE50faOLb8R0');
        search(query);
    });
}
//搜尋
function search(query) {
    //對於搜尋上的其他功能可以參考googleapi
    //https://developers.google.com/youtube/v3/docs/search/list#maxResults
    var request = gapi.client.youtube.search.list({
        part: 'snippet',
        q: query,
        maxResults: 24
    });

    request.execute(function(response) {
        //將結果把所需部分進行擷取
        $.each(response.items, function(i, item) {
            if (!item['id']['playlistId']) {
                var musicCard = {};
                musicCard._id = item['id']['videoId'];
                musicCard.title = item['snippet']['title'];
                musicCard.url = "https://www.youtube.com/embed/" + musicCard._id;
                musicCard.description = item['snippet']['description'];
                musicCards.push(musicCard);
            }
        });
        // console.log(musicCards);
        //將VIEW抽出來另外生成
        renderView();
    });
}

function renderView() {
    var htmlString = "";
    musicCards.forEach(function(musicCard, i) {
        var card = createCard(musicCard._id, musicCard.title, musicCard.description, musicCard.url);

        htmlString += card;
    });

    $('#youtube-channel').html(htmlString);

}

function createCard(_id, title, description, url) {
    var card = `
` +
        '
' +
        '+ _id + '/0.jpg" alt="' + description + '">' +
        '
' +
        '
' +
        '+url+'">
' + title + '
' +
        '+url+'"> https://www.youtube.com/embed/' + _id + '' +
        '
' + description + '
' +
        '
' +
        '
';
    return card;
}

我切的css 在底下jsfiddle

結果部分

jsfiddle讓你跑跑看 https://jsfiddle.net/mikzh/axemo9y8/

按下result 就可以執行簡單的youtube搜尋操作

Comments