[MobileWeb]網路掛號Prototype-3(jsonp、HTML5 localStorage)

我們把localStorage當成profile的暫存區，可以有效減少網路的傳輸次數，以下只是簡單的範例~
1.模擬遠端資料(jsonp)
JavaScript

function simRemoteData()
{
  var remoteData = [
    {"醫師": "柯X哲", "科別": "外科", "時段": "上午(08:30~11:30)"},
    {"醫師": "邱X逹", "科別": "外科", "時段": "下午(13:30~17:00)"},
    {"醫師": "沈X雄", "科別": "內科", "時段": "上午(08:30~11:30)"},
    {"醫師": "賴X德", "科別": "內科", "時段": "上午(08:30~11:30)"},
    {"醫師": "柯X銘", "科別": "牙科", "時段": "上午(08:30~11:30)"},
    {"醫師": "涂X哲", "科別": "內科", "時段": "夜診(08:30~11:30)"}
  ];
  var remoteJsonpData = { jsonData: JSON.stringify(remoteData), delay: 3 };
  return remoteJsonpData;
}

2.接收遠端資料(jsonp)並存入本地端 Local Storage(HTML5)
JavaScript

function getRemoteData()
{
  $.ajax({
    type: "GET",
    url: "//jsfiddle.net/echo/jsonp/",
    dataType: "jsonp",
    data: simRemoteData(),
    cache: false,
    error: function (jqXHR, textStatus, errorThrown) {
      console.log(textStatus + " - " + errorThrown);
    },
    success: function (data, textStatus, jqXHR) {
      console.log(textStatus + " - " + data);
          
      var jsonData = JSON.parse(data.jsonData);
      if (jsonData) {
        localStorage.查詣資料 = JSON.stringify(jsonData);

        var _targetList = $("#查詢時間List");
        var _jsonData = getLocalData();
        display查詣資料Data(_targetList, _jsonData);
      }
    }
  });
}

3.取得本地端 Local Storage(HTML5)資料
JavaScript

function getLocalData()
{
  var jsonData = localStorage.查詣資料;
  if (!jsonData){
    jsonData = {};
    localStorage.查詣資料 = JSON.stringify(jsonData);
  } else {
    jsonData = JSON.parse(jsonData);
  }
  return jsonData;
}

4.顯示"查詣資料"頁面資料
JavaScript

function display查詣資料Data(_targetList, _jsonData)
{
  if (_jsonData) {
    var markup = "";
    var dataLength = _jsonData.length;
    for (var i = 0; i < dataLength; i++) {
      markup += "

" + _jsonData[i].醫師 + "
" + _jsonData[i].科別 + "
";
    }
    
    _targetList.html(markup).listview({
      autodividers: true,
      autodividersSelector: function ( li ) {
        return li.data("時段");
      }
    }).listview("refresh");
  }
}

※ 原始碼及執行預覽(jsFiddle)： http://jsfiddle.net/L8su2/810/
參考資料
[1] Create a CRUD web app using JQuery Mobile and LocalStorage

[PaaS]試用 OpenShift 平台-4(嘗試建立可以運作 Mono 的 nginx 平台~結果失敗！)

四、嘗試建立可以運作 Mono 的 nginx 平台~結果失敗！
4.1. 建立 DIY/Custom 的虛擬主機
rhc create-app myapp2 diy-0.1

4.2. 切換至 ssh 模式
cd myapp2
rhc ssh

4.3. 切換目錄至 $OPENSHIFT_DATA_DIR
cd  $OPENSHIFT_DATA_DIR

4.4. 下載 Nginx 及 PCRE library 的壓縮檔
(Perl Compatible Regular Expressions)
wget http://nginx.org/download/nginx-1.6.2.tar.gz
wget ftp://ftp.csx.cam.ac.uk/pub/software/programming/pcre/pcre-8.36.tar.gz

4.5. 解壓縮
tar zxvf nginx-1.6.2.tar.gz
tar zxvf pcre-8.36.tar.gz

4.6. 切換目錄至 nginx
cd nginx-1.6.2

4.7. 安裝及編譯 nginx
./configure --with-pcre=$OPENSHIFT_DATA_DIR/pcre-8.36 --prefix=$OPENSHIFT_DATA_DIR/nginx --with-http_realip_module

make
make install

4.8. 設定 nginx
vi $OPENSHIFT_DATA_DIR/nginx/conf/nginx.conf
修改 listen 為 $OPENSHIFT_IP:$OPENSHIFT_PORT

複製 template
mv nginx.conf nginx.conf.template

4.9. 最後的調整(自動的重啓程式)
離開 ssh session
修改 .openshift/action_hooks/start

註解原有的設定
# nohup $OPENSHIFT_REPO_DIR/diy/testrubyserver.rb $OPENSHIFT_DIY_IP $OPENSHIFT_REPO_DIR/diy |& /usr/bin/logshifter -tag diy &

增加以下的設定
sed -e "s/`echo '$OPENSHIFT_IP:$OPENSHIFT_PORT'`/`echo $OPENSHIFT_DIY_IP:$OPENSHIFT_DIY_PORT`/" $OPENSHIFT_DATA_DIR/nginx/conf/nginx.conf.template > $OPENSHIFT_DATA_DIR/nginx/conf/nginx.conf
 
nohup $OPENSHIFT_DATA_DIR/nginx/sbin/nginx > $OPENSHIFT_DIY_LOG_DIR/server.log 2>&1 &

更新設定
git commit -a -m "start nginx when starting up the app"
git push

4.10. 測試
http://myapp2-bobohan.rhcloud.com

可利用 "rhc tail -a myapp2" 來除錯

4.11. 下載 Mono 的壓縮檔
wget http://download.mono-project.com/sources/mono/mono-3.12.1.tar.bz2

4.12. 解壓縮
tar jxvf mono-3.12.1.tar.bz2

4.13. 切換目錄至 mono
cd mono-3.12.1

4.14. 安裝及編譯 Mono
./configure --prefix=$OPENSHIFT_DATA_DIR/mono

make 跟 make install 的過程中皆有錯誤訊息

4.15. 替代方案
由於 OpenShift 平台因為權限的限制，無法用 RPM 的方式來安裝軟體，所以都要用以下的方式來安裝：
wget + extract + configure + make + make install

但是 nginx 成功但 Mono 就失敗！若你只是單純想要建立一個可以運作 Mono 的虛擬主機，可以使用網路上神人所分享的 cartridge，可以使用以下指令建立：
rhc create-app myapp3 https://raw.github.com/wshearn/openshift-community-cartridge-mono/3.2.1-aspx/metadata/manifest.yml

參考資料
[1] Installing the OpenShift Client Tools
[2] Getting Started with MongoDB on Node.js on OpenShift
[3] Running Nginx on OpenShift
[4] 《OPENSHIFT》可綁網址、無限流免費雲端主機
[5] 在 OpenShift 上部署 MongoDB 和 Node.js 应用
[6] OpenShift安裝Nginx+MYSQL+PHP5.4
[7] Nginx | Mono
[8] Compiling Mono on Linux
[9] Getting Started with OpenShift and Mono