iT邦幫忙

DAY 23
1

使用 EZoApp 開發 App 好好玩系列 第 23

Day 23 - EZoApp 串接 flickr 做最新照片 App

  • 分享至 

  • xImage
  •  


前一篇看完了利用 picasa 做海賊懸賞單的 App,這篇就要來看跟 picasa 一樣頗負盛名的網路相簿 flickr,不過要用 RSS 串 flickr 就沒有 picasa 來得方便,雖然 flickr 有提供 API,但要申請金鑰才能使用,而這篇的重點也是在於讓大家簡單的就可以串接相簿,所以還是以 RSS + imggallery 為主。

完成範例:http://jqmdesigner.appspot.com/designer.html#&ref=5693191340687360

要串 flickr 就一定要先來它的官方網站瞧瞧,由於在這裡不用他的 API,所以看到 feed 的部分:https://www.flickr.com/services/feeds/

如果不清楚它在講什麼也沒關係,最重要的就是這串網址:https://api.flickr.com/services/feeds/photos_public.gne ,只要有公開在 flickr 上的相片或相簿,就都可以用這串網址得到相對應的 RSS,不過呢,裡面卻有很多眉眉角角需要留心。

最需要注意的眉角就是『使用者的 id』,先隨便找個攝影師的個人資料,好吧就是這個外國人了:http://www.flickr.com/photos/sunsward7/ 從該攝影師的相片集可以發現,不論是網址的 sunsward7 或自訂的 Sunsword & Moonsabre,其實都不是真正的 flickr id,真正的 id 可以從程式碼裡面搜尋「N0」大概就可以找到,真正的 id 就是 44912907@N05 ,而且你還可以直接從裡頭發現這也是 RSS 的網址 ( 很神奇的是,你在網頁裡找不到,不過程式碼裡頭卻有 ),https://www.flickr.com/services/feeds/photos_public.gne?id=44912907@N05&format=rss_200 這串就是 RSS 的網址,可以看到 user id 就在裡頭。( 如果不想這樣找,也可以利用這個網站找 flickr 的使用者 id:http://idgettr.com/ )

為了證實,就要讓 EZoApp 和 flickr 串起來試試看,跟串 picasa 同樣的做法,我們要結合 RSS 元件部分的程式碼與 imggallery 元件,幾乎同樣的做法,輕輕鬆鬆串起 RSS。

$(document).on("gkComponentsReady", function (w) {
  var $ele = $("#flickr"),
    a, content,title,
    img = [],
    rss = 'https://www.flickr.com/services/feeds/photos_public.gne?id=44912907@N05&format=rss_200',
    url = 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=500&callback=?&q=' + encodeURIComponent(rss);
  $.ajax({
    type: "GET",
    url: url,
    dataType: "json",
    error: function (e) {
      console.log('oh no');
    },
    success: function (e) {
      a = $(e);
      num = a[0].responseData.feed.entries.length;
      content = a[0].responseData.feed.entries[0].mediaGroups[0].contents[0].url;
      title = a[0].responseData.feed.entries[0].mediaGroups[0].contents[0].title;
      console.log(a);
      console.log(num);
      console.log(content);
      console.log(title);
    }
  });
});

完成後就要讓 imggallery 吃這些資料,先修改一下 HTML,主要只是調整樣式,以及給予一個 id 叫 flickr:

    <div id="flickr" is="imggallery" style="background-color:#fafafa;width:100%;margin:0 auto;">
      <div style="width:90px; height:90px; overflow:hidden; border:3px solid #ccc; display:inline-block;margin:1px;">
        <a href="#imgpage" data-transition="slide">
          <img data-src="{{data-src}}" style="width:100%; min-height:100%;">
        </a>
      </div>

然後再在 JS 裡頭加上一個 function,圖片網址餵給 imggallery。

  function imggallery(num) {
    for (var i = 0; i < num; i++) {
      img.push({
        "data-src": a[0].responseData.feed.entries[i].mediaGroups[0].contents[0].url,
        "title": a[0].responseData.feed.entries[i].mediaGroups[0].contents[0].title
      });
    }
    if (img.length >= num) {
      console.log(img);
      $ele.gk("model", img);
    }
  }

預覽一下,就可以看到相片都以正方形的排列出現了。( 點選 preview 預覽:http://jqmdesigner.appspot.com/designer.html#&ref=6035770280247296 )

接著就是點選放大圖的效果,基本上和 picasa 的做法一模一樣,先建立一個名為 imgpage 的頁面,然後建立兩個全域變數,點選圖片的時候將圖片網址與名稱帶給全域變數,imgpage 在 pageshow 的時候讀取變數就完成囉!

imgpage HTML:

<div id="imgpage" data-role="page" is="page">
  <div data-role="header" data-position="fixed" data-theme="b">
    <h3>圖片資訊</h3>
    <a class="ui-btn ui-btn-left ui-icon-back ui-btn-icon-notext ui-corner-all" data-rel="back">Button</a>
  </div>
  <div role="main" class="ui-content" is="content">
    <h4 style="font-size:12px; margin:5px 10px;">123</h4>
  </div>
</div>

完整的 JS:

var imgsrc, imgtitle;
$(document).on("gkComponentsReady", function (w) {
  var $ele = $("#flickr"),
    a, content, title,
    img = [],
    rss = 'https://www.flickr.com/services/feeds/photos_public.gne?id=44912907@N05&format=rss_200',
    url = 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=500&callback=?&q=' + encodeURIComponent(rss);
  $.ajax({
    type: "GET",
    url: url,
    dataType: "json",
    error: function (e) {
      console.log('oh no');
    },
    success: function (e) {
      a = $(e);
      num = a[0].responseData.feed.entries.length;
      content = a[0].responseData.feed.entries[0].mediaGroups[0].contents[0].url;
      title = a[0].responseData.feed.entries[0].mediaGroups[0].contents[0].title;
      console.log(a);
      console.log(num);
      console.log(content);
      console.log(title);
      imggallery(num);
    }
  });

  function imggallery(num) {
    for (var i = 0; i < num; i++) {
      img.push({
        "data-src": a[0].responseData.feed.entries[i].mediaGroups[0].contents[0].url,
        "title": a[0].responseData.feed.entries[i].mediaGroups[0].contents[0].title
      });
    }
    if (img.length >= num) {
      console.log(img);
      $ele.gk("model", img);
    }
    $ele.find('a').on('click', function () {
      var aIndex = $(this).parent('div').index();
      imgsrc = $(this).find('img').attr('src');
      imgtitle = img[aIndex].title;
      console.log(imgtitle);
      console.log(imgsrc);
    });
  }
});
(function () {
  $(document).on('pageshow', '#imgpage', function () {
    $('#imgpage .ui-content').append('<img src="' + imgsrc + '" style="width:100%;"/>');
    $('#imgpage h4').text(imgtitle);
  });
})();
(function () {
  $(document).on('pageshow', '#home', function () {
    $('#imgpage .ui-content').find('img').remove();
    $('#imgpage h4').text('');
  });
})();

不過很可惜的,flickr 只提供了最新 20 張照片的 rss,除非使用它的 API 才可以真正串接相簿、上傳照片或留言,但在這次的介紹不會介紹詳細的 flickr,如果有強烈只需要 RSS 做相簿應用的朋友,就可以先使用 picasa 囉!如果只是想追蹤某個攝影師的相片動態,就可以使用 flickr,反正做法幾乎一樣啦!
( 完成範例:http://jqmdesigner.appspot.com/designer.html#&ref=5758894273986560 )


上一篇
Day 22 - EZoApp 串接 picasa 做「海賊懸賞單」 App
下一篇
Day 24 - EZoApp 串接 Firebase 做「陌生人聊天」 App
系列文
使用 EZoApp 開發 App 好好玩30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言