EC(五)：Parse，雲端程式開發平台

Parse.com是一個專業、後台夠強大的雲端資料庫，更重要的，他也是雲端程式開發平台。Facebook在2013就將Parse買下，讓開發人員能夠以最快的速度打造跨平台的應用程式。





以傳統的方式開發APP要花比較多時間也比較複雜，尤其在後端開發也是困難的一部份。Parse提供Baas(Backend as a Service)，幫助使用者在撰寫後端程式連接的部分更方便，提供如下圖所示的APP快速開發功能

--Parse開發Web範例--

到專案Quick Start > Data > Web > New Project 裡下載

HTML專案檔，並將key記下來

以編輯器打開index.html檔，把42行的
Parse.initialize("APPLICATION_ID", "JAVASCRIPT_KEY");
換成自己專案的key，開啟網頁所示如下：

接著我們想要讀取存放在Parse雲端資料庫的資料，將index.html裡的44~53行替換成如下的程式碼：

這時網頁會將資料庫每筆資料以alert的方式讀出。

為了做成APP的形式，使用Mobile Design Template裡面的開發樣版來製作，下載zip檔，範例使用的是List View裡面的Picture.html檔案，並將它放到common目錄底下，程式裡的相對位置../common/

打開Picture.html檔案，把34~98行，也就是原本的資料檔刪除，換成以下的程式碼

<ul id="TheList" class="list-view with-swipe left-thumbs right-one-icons">  
 </ul>  
 <script type="text/javascript">  
 Parse.initialize("APPLICATION_ID", "JAVASCRIPT_KEY");     //這裡要記得填上自己的Keys喔  
 var ProductsList = Parse.Object.extend("ProductsList");  
 var query = new Parse.Query(ProductsList);  
 // query.equalTo("欄位名稱", "欄位內容"); 不執行這行就等於是讀出全部的記錄  
 query.find({  
  success: function(results) {  
      var str = '';  
      // Do something with the returned Parse.Object values  
      for (var i = 0; i < results.length; i++) {  
       var object = results[i];  
       str += '<li>';
       str +=      '<div class="thumbs">';  
       str +=           '<img class="thumb thumb-3" src="' + object.get("Photo") + '">';  
       str +=      '</div><!-- .thumbs -->';  
       str +=      '<a href="#" class="content">';  
       str +=           '<h2>' + object.get("Pname") + '</h2>';  
       str +=           '價格' + object.get("Price") + '元';  
       str +=           '<div class="list-view-icons">';  
       str +=                '<span class="icon-right-arrow">&nbsp;</span>';  
       str +=           '</div>';  
       str +=     '</a>';  
       str += '</li>';  
      }  
      document.getElementById("TheList").innerHTML = str;  
  },  
  error: function(error) {  
      alert("Error: " + error.code + " " + error.message);  
  }  
 });  
 </script>  

把js的語法引用到html檔的head裡面

<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.4.0.min.js"></script>  

以行動裝置的瀏覽器來看，就會有漂亮的排版囉

參考資料：
http://practical-dbm.blogspot.tw/search/label/Parse Parse練習範例