CHAPTER 24 - 串接 Parse (deprecated)

Parse 網站將於 2017/1/28 關閉服務,因此本篇教學已不建議閱讀,詳情請看官網文章




上一篇介紹完 Firebase,這篇想當然爾就是串接現在雲端資料庫當紅炸子雞 Parse,既然要串 Parse,就一定要先來一下 Parse 的註冊使用流程,先來連上 Parse 的官方網站吧 ( https://parse.com/ )

CHAPTER 24 - 串接 Parse



連上網站之後就要註冊

CHAPTER 24 - 串接 Parse



註冊之後他會要你 Create App,我這邊建立了一個名為 test 的 App ( 這個 App 不是我們手機玩的 App 不要搞混噢 ),建立好之後,就會得到一串裡面有兩個超長亂數組成的程式,這兩串超長的亂數分別是 Application IDJavascript key

CHAPTER 24 - 串接 Parse



有了這串程式碼,以及下方的測試代碼,我們就可以用 EZoApp 來測試看看,在測試之前,由於 EZoApp 沒有內建 Parse.js ,與 Firebase 相同,複製這段程式碼貼上去,裡頭就放入載完 JS 才會執行的 function 即可。

(function (document, $) {

  $(document).on('pageinit', '#home', function () {
    loadJS(' 要載入的 JS ', function () {
    //JS 載入之後要執行的 function
    });
  });

  function loadJS(src, callback) {
    var head = document.getElementsByTagName("head")[0],
      script = document.createElement('script');
    script.src = src;
    script.onload = callback;
    script.onerror = function (e) {
      alert("failed: " + JSON.stringify(e));
    };
    head.appendChild(script);
    head.removeChild(script);
  }

}(document, jQuery));

CHAPTER 24 - 串接 Parse



然後照著上面的做法把 parse.js 放進去,把你的 key 和測試的程式也都放進去,preview 看看會不會有 alert 提示成功了!( 範例,請換成自己的 key:http://jqmdesigner.appspot.com/designer.html#&ref=5166865982685184 )

CHAPTER 24 - 串接 Parse



當然如果你不是第一次使用 Parse,也可以直接點選「Start using the Dashboard」,然後從右上角 Creat New App 來建立一份新的。

CHAPTER 24 - 串接 Parse

CHAPTER 24 - 串接 Parse



按下 create 就會出現很多需要的 key,而你只需要這兩組:Application ID 與 Javascript key。

CHAPTER 24 - 串接 Parse



選擇 data,Add a Parse Class。

CHAPTER 24 - 串接 Parse

CHAPTER 24 - 串接 Parse



新增 Col 可以增加欄位,然後新增 Row,日期與 id 會自動產生。

CHAPTER 24 - 串接 Parse



好了之後,就可以開始使用 Parse 提供的 API 讀取這些資料,首先要來閱讀一下 Parse 的文件。

CHAPTER 24 - 串接 Parse



按照文件中的寫法,應該是可以順利的讀取到其中一筆資料,以我的範例來說,可以讀取到孫小美的資料。( 範例,請換成自己的 key:http://jqmdesigner.appspot.com/designer.html#&ref=5140690036064256 )

$(document).on('pageinit', '#home', function () {
  loadJS('http://www.parsecdn.com/js/parse-1.3.0.min.js', function () {

    Parse.initialize(" 你的 Application ID", " 你的 Javascript key");

    var Data = Parse.Object.extend("Data"),
      query = new Parse.Query(Data);
    query.equalTo("name", "孫小美");
    query.find({
      success: function (results) {
        console.log("Successfully retrieved " + results.length + " scores.");
        // Do something with the returned Parse.Object values
        for (var i = 0; i < results.length; i++) {
          var object = results[i];
          console.log(object.id + ' - ' + object.get('name'));
        }
      },
      error: function (error) {
        alert("Error: " + error.code + " " + error.message);
      }
    });

  });
});

CHAPTER 24 - 串接 Parse



到這個步驟基本上已經算是串起來了,最後一步就是要把 Parse 內的資料用 EZoApp 的元件來顯示,這時內容只要寫改成 ( 記得 HTML 要放上 listview ) :

$(document).on('pageinit', '#home', function () {
  loadJS('http://www.parsecdn.com/js/parse-1.3.0.min.js', function () {

    Parse.initialize(" 你的 Application ID", " 你的 Javascript key");

    var Data = Parse.Object.extend("Data"),
      query = new Parse.Query(Data);

    query.find().then(function (results) {
      $('#listview').empty();
      for (var i = 0; i < results.length; i++) {
        var obj = results[i],
          name = obj.get('name');
        $('#listview').append('<li>' + name + '</li>');
      }
      $('#listview').listview('refresh');
    });

  });
});



這樣就可以順利的串起來了!( 範例,請換成自己的 key:http://jqmdesigner.appspot.com/designer.html#&ref=5123982613282816 )



其實會寫資料庫的人,應該會對 Parse 這個雲端資料庫很有興趣,也因為有 Parse,更造福了許多寫前端的工程師,不過 Parse 的文件非常的豐富,這裡只是單純介紹如何用 EZoApp 串起 Parse 的服務,如果想了解更多 Parse 的細節,就請上 Parse 的官方網站去閱讀囉!( https://parse.com/ )



繼續閱讀 Chapter 25 - 發佈 HTML 與 APK
回文章目錄

results matching ""

    No results matching ""