佈署網站

1.申請一個亞馬遜免費主機
http://blog.json.tw/teaching-ten-minutes-to-quickly-build-a-free-amazon-ec2-host
其中security，一開始先選擇port:3000

申請完後記下public ip

2.申請一個網域
https://www.godaddy.com/?isc=gofhtw03&ci=
https://sofree.cc/wordpress-box-tip-1/
申請一個好記又好聽的名子
在這個網頁選擇Manage DNS，可以增加record (設定IP)以及設定Nameserver

3.使用DNS代管
https://www.cloudflare.com/
登入後到下面網頁選擇DNS，增加一個record，填入網域名稱以及網址，記下NameServer
將Nameserver 填入上一個步驟的網頁裡。

4.執行nslookup nomain_name IP 確認網域是否與IP連線成功
http://extra.pchome.com.tw/adm/faq_content02.htm?channel_no=&exh_no=P000007&pexh_no=P000181&cexh_no=H000185&faq_id=327&qnum=1

5.在ubuntu環境裡還可以使用whois來確認網域名稱的狀態
或是:
http://www.whois365.com/tw/
https://www.whois.net/
6.登入amazon主機

ssh -i "coolio.pem" ubuntu@52.24.185.68 or ssh -i "coolio.pem" ubuntu@ironcaptain.com

其中coolio.pem是申請虛擬雞過程產生的ssh key

7.接下來就是一般ubuntu的操作,安裝git,node js,express....

8.安裝nginx 

http://wiki.nginx.org/Install

增加一個nginx設定檔/etc/nginx/conf.d/ironcaptain.com.conf

內如如下

upstream backend{
  server 120.0.0.1:3000; 
}
proxy_cache_path /var/nginx/cache/ironcaptain keys_zone=ironcaptain:20m;
 
server{
 listen 80;
 server_name ironcaptain.com;
 access_log /var/log/nginx/ironcaptain.access.log;
 proxy_cache ironcaptain;
 location / {
  proxy_pass http://backend;
 }
}

說明:

1.server 120.0.0.1:3000:主機使用port 3000但是由nginx管理的port 80對外 (listen 80;)

2.proxy_cache ironcaptain;指定cache的大小(20M)與存放位址

3.server_name ironcaptain.com;登入的網址

4.location / :主頁 會轉到http://backend;也就是server 120.0.0.1:3000;
5.當有佈署其他的主機在此欄位增加

upstream backend{
  server 120.0.0.1:3000;
  server 120.0.0.1:3001; 
}
啟動service
1.service nginx start
2.service nginx restart
http://serverfault.com/questions/213185/how-to-restart-nginx
http://wiki.nginx.org/InitScripts

9.安裝node js daemon forever

https://github.com/foreverjs/forever

啟動:

forever start app.js

其中app.js 是nodejs的啟動程式在我們的case要看package.json中的"start": "node ./bin/www"

所以應該是執行 

forever start ./bin/www

停止 :

forever stop./bin/www

將D3 js porting 到backbone 框架

1.下載source code

https://github.com/wotcity/dotcity-starter-kit安裝套件
npm i -g browserify

npm i -g gulp

npm i -g bower  

npm install

npm i d3 --save

bower install
2.到D3 js 選擇適當的模組 http://d3js.org/
3.將範例HTML使用到的 module require 到src/index.js css加到index.html

4.將範例HTML中的script標籤移植到到src/index.js中

5.在執行C:\dotcity-starter-kit-master\gulp build 結果產生在dist/index.js
6.登入wot city 記下device ID
7.修改tests/test.js 將ID填入
8.執行 tests/node test.js push DATA到server
9.打開index.html在URL後面加#XXXXXX =>XXXXX是device ID名稱

Node.js +REST API 實作(1)

將井字遊戲中的分數紀錄用rest api來實作

1.首先在routes.js中增加以下幾個設定

   // partjs boilerplate

  app.get('/timeline*', require('./views/timeline/index').init);

  app.get('/post*', require('./views/post/index').init);

  app.get('/unsplash*', require('./views/unsplash/index').init);

  app.get('/about', require('./views/index').about);  

  app.get('/sensor', require('./views/index').sensor);  

  app.get('/dashboard', require('./views/index').dashboard);  

  app.get('/1/game', require('./views/api/game.js/index').read); 

  app.post('/1/game', require('./views/api/game.js/index').write);  

  app.post('/1/game:name', require('./views/api/game.js/index').test); 

2.在上述的路徑中增加一個index.js的檔案內容如下

var score = {

  you:0,

  me:0

 };

exports.read = function(req, res){

res.json(score);

 };

exports.write = function(req, res){

 var action = req.query;

 var score = req.body;                      //===>body?什麼的函式庫來的

 res.json(score);

};

exports.test = function(req, res){

 var name = req.params.name;

 console.log('name : '+ name);

  res.json(score);

};

3.在Front end讀取rest api 使用backbone 框架

在game.js中設定model 

app.Contact = Backbone.Model.extend({  //1

      url: '/1/game',

      defaults: {

        you:0,

        me:0

    }

 });

在view中加入變數的處裡函數

if(this.result.indexOf(3) !== -1){

      var you = this.model.get('you');

      this.model.set('you',you+1);

      this.model.save();

      alert('X 贏 ');

      this.render();

    }

        

    if(this.result.indexOf(-3) !== -1){

      var me = this.model.get('me');

      this.model.set('me',me+1);

      this.model.save();

      alert('O 贏');

      this.render();

    }

4.接下來增加顯示的部分

 render: function() {

      this.$el.prepend(this.template( this.model.attributes ));//3

      console.log(this.model.attributes)

      var self = this;

      setInterval(function(){

        var item = Math.floor(Math.random()*9);

        var me = $("[data-num="+ item +"]");

        

        me.removeClass('fa-circle-o');

        me.removeClass('fa-times');

        self.n[item]=0;

    },1000);

    },

IOT實驗

1.Hello world mBed
    1.到mbed網站申請帳號
    2.加入devivce
    3.creat project
2.溫度sensor實驗
   1.到Study spec
      http://www.seeedstudio.com/wiki/index.php?title=Main_Page#Grove
      http://www.seeedstudio.com/wiki/Grove_-_Starter_Kit_Plus
   2.作法參考
       https://www.mokoversity.com/workshop/mbed-school/02-gpio-introduction
3.加上四段顯示器
    1.載入lib
       https://developer.mbed.org/users/Seeed/code/DigitDisplay/
    2.參考
       https://developer.mbed.org/users/yihui/code/Arch_Digit_Display/file/89330707469d/main.cpp
4.上網
    1.載入EthernetInterface這個lib,編譯時會發生error再載入mbed_rtos這個lib
    2.再載入WebSocketClient這個lib
程式碼如下:
#include "mbed.h"
#include "DigitDisplay.h"
#include "EthernetInterface.h"
#include "Websocket.h"

AnalogIn temp(P0_23);
DigitalOut myled(LED1);
DigitalOut myled1(LED2);
DigitDisplay digdisp(P4_29,P4_28);
EthernetInterface eth;
int main() {

    char data[1024];
    float temperature;
    float resistance;
    int B=3975;                  //B value of the thermistor
    int a;
    int ret;

    eth.init(); //DHCP
    eth.connect();
 
    Websocket ws("ws://wot.city/object/554ed61eae74407734000119/send");
    ws.connect();
 
loop:
    a=temp.read()*657;
    resistance=(float)(1023-a)*10000/a; //get the resistance of the sensor;
    temperature=1/(log(resistance/10000)/B+1/298.15)-273.15;//convert to temperature via datasheet
    sprintf( data , "{ \"temperature\": %f }", temperature);
    ret = ws.send(data);
    myled1 = 1;
    wait(0.5);
    myled1 = 0;
    wait(0.5);
    goto loop;
}  
   3.到http://wotcity.com/申請帳號產生一個務間編號將他填到Websocket contruct之中
 
 當裝置連線為live即可利用live App看到溫度數值


5.修改網頁
    1.到http://wotcity.com/docs/dotcity-starter-kit下載網頁包
    2.解壓縮照上面的步驟安裝函示庫
    3.打開網址在網址後面輸入#554ed61eae74407734000119

即可看到溫度計的結果

bootstrap第三天實驗

用jQuery寫一個井字遊戲
1.jQuery原始檔


(function(){
var flag = 0;
var n=[0,0,0,0,0,0,0,0,0];
var result=[0,0,0,0,0,0,0,0];
var invalidate = function(item){  //時間到一定會執行
$( '.cell' ).each(function(idx) {
if(idx !== item)
return;
var me = $(this);
  me.find('i').removeClass('fa-circle-o');
  me.find('i').removeClass('fa-times');
  n[idx] = 0;
});
};

setInterval(function(){
var item = Math.floor(Math.random()*9);
invalidate(item);
},1000);


$( '.cell' ).each(function(idx) {
  var me = $(this);               //一開始會直9次註冊每個 cell 物件的click event call back function
  me.on('click',function(){  //只有在click evevt 發生時才會執行
  if(me.find('i').hasClass('fa-circle-o') || me.find('i').hasClass('fa-times'))
  return;
  //if (flag == 9)
  // return;
  if(flag % 2)
me.find('i').addClass('fa-circle-o');
else
me.find('i').addClass('fa-times');

flag++;

n[idx] = (flag % 2) ? 1:-1;
result[0]=n[0]+n[1]+n[2];
result[1]=n[3]+n[4]+n[5];
result[2]=n[6]+n[7]+n[8];
result[3]=n[0]+n[3]+n[6];
result[4]=n[1]+n[4]+n[7];
result[5]=n[2]+n[5]+n[8];
result[6]=n[0]+n[4]+n[8];
result[7]=n[2]+n[4]+n[6];


if(result.indexOf(3) !== -1)
alert('You win');

if(result.indexOf(-3) !== -1)
alert('I win');
  })
});
})();

2.html檔

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <title>Bootstrap test</title>

    <!-- Bootstrap -->

    <link href="/vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

    <link href="/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet">

    <link href="/game.js/game.css" rel="stylesheet">

  </head>

  <body>

<div class="container" id="game">

  <div class="row">

    <div class="cell col-md-4 col-sm-4 col-xs-4"><i data-num='0' class="fa">&nbsp;</i></div>

    <div class="cell col-md-4 col-sm-4 col-xs-4"><i data-num='1' class="fa">&nbsp;</i> </div>

    <div class="cell col-md-4 col-sm-4 col-xs-4"><i data-num='2' class="fa">&nbsp;</i> </div>

  </div>

  <div class="row">

    <div class="cell col-md-4 col-sm-4 col-xs-4"><i data-num='3' class="fa">&nbsp;</i></div>

    <div class="cell col-md-4 col-sm-4 col-xs-4"><i data-num='3' class="fa">&nbsp;</i> </div>

    <div class="cell col-md-4 col-sm-4 col-xs-4"><i data-num='5' class="fa">&nbsp;</i> </div>

  </div>

  <div class="row">

    <div class="cell col-md-4 col-sm-4 col-xs-4"><i data-num='6' class="fa">&nbsp;</i></div>

    <div class="cell col-md-4 col-sm-4 col-xs-4"><i data-num='7' class="fa">&nbsp;</i> </div>

    <div class="cell col-md-4 col-sm-4 col-xs-4"><i data-num='8' class="fa">&nbsp;</i> </div>

  </div>

</div>

    <script src="/vendor/jquery/dist/jquery.min.js"></script>

    <script src="/vendor/bootstrap/dist/js/bootstrap.min.js"></script>

    <script src="/game.js/game.js"></script>

  </body>

</html>

bootstrap第二天實驗

新增一個jade樣板
1.在./routes.js中新增app.get('/landing', require('./views/index').landing);
   /landing:是url的名稱,
   ./views/index是指./views/index.js
  .landing:是指/views/index.js 中export檔案的名稱
2.接下來看./views/index.js這個檔案在這個檔案新增
    exports.landing = function(req, res){
             res.render('landing');       //代表會去找landing.jade這個檔案做render的動作
   };
3.再來參考index.jade新增landing.jade
   打開index.jade:

extends layouts/default

block fb_meta
  meta(property='og:site_name', content='PartJS')
  meta(property='og:title', content='Next generation WoT and SPA.')
  meta(property='og:url', content='#{currentURL("")}')
  meta(property='og:image', content='')
  meta(property='article:published_time', content='')

block head
  title Next Generation WoT and SPA Framework

block neck

block feet
  script(src='/views/build/sandbox.js')
  //- script(src='/views/build/index.js')

block body
....

其中extends layouts/default代表index.jade繼承自./views/layouts/default.jade
打開default.jade
doctype html
html
  head
    block meta
    block fb_meta
    block head
    include css
    block neck
  body#top
    include navbar

    div.page
      block body

    include js
    block feet

    include footer

可以看出這是整個頁面的樣板其中的, block fb_meta,block head 就是樣板的成員變數
而index.jade繼承default.jade樣板並複寫其成員變數block fb_meta,block head...
當中include是用來導入其他jade file的語法。
4.jade是利用縮排來代表巢狀結構

參考
1.http://rhsieh76.pixnet.net/blog/post/48559282-%E6%B7%BA%E8%AB%87node.js%E6%A8%A1%E7%89%88%E5%BC%95%E6%93%8E%E2%80%93-jade
2.http://jade-lang.com/

bootstrap 第一天實驗

1.網頁為MVC架構,前端主要為html，javascrip，css三者所構成。
   框架的跟目錄為 \partjs-master\public
   例如:include css檔放在 <link href="/index.css" rel="stylesheet">
   其中index.css所在的目錄為\partjs-master\public\index.css

2.自動更新網頁的工具gulp

• 安裝gulp: npm -g i gulp
• 編輯gulpfile.js   在gulp.task('serve', function () 加入

           browserSync.init(null, {

                  server: {

                        baseDir: ['app', '.tmp']

                   },

                  notify: false

          });

         gulp.watch(['public/index.cssl'], reload); 

• 執行 gulp serve 

3.minify

• 方法一 grunt build
• 方法二 修改Gruntfile.js

           uglify: {

                     less: {

                              views: {

                                         files: [{

                                                 expand: true,

                                                 cwd: 'public/',

                                                 src: ['*.css'],

                                                 dest: 'public/',

                                                 ext: '.min.css'

                                         }

                              }   

                     }             

           }

         

         執行grunt less:views

4.jade jade file可編譯成html語法上用縮排來代表巢狀結構

   找到routes.js檔找到//partjs boilerplate
   參考 app.get('/dashboard',requirre(./views/index').dashboard);

   由此可知道在views底下有一個index.jade檔將他打開來後在檔案的頭有一行

   extend layouts/default 然後去views/layouts
   底下找到default.jade就可以找到相對應的jade檔案設定再根據裡面的設定去修改他。