Express

Node.js 圖表處理 (5)

基本介紹

教學目標

透過 Polymer 開源碼專案之 Google Chart 套件呈現 iOS App 使用分析的比例圖表。

前置作業

  • 完成 Node.js 套件安裝與設置。

  • 建立專案資料夾,同時安裝 Polymer 相關套件

    1
    2
    3
    4
    $ mkdir app
    $ cd app
    $ npm install -g bower
    $ bower init

按照步驟輸入對應資訊產生設定檔,如下所示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
name: 'app',
version: '0.0.1',
authors: [
'leoyeh.me@gmail.com'
],
license: 'MIT',
ignore: [
'**/.*',
'node_modules',
'bower_components',
'public/components',
'test',
'tests'
]
}

接著安裝 Polymer 相關套件。

1
2
3
4
$ bower install --save Polymer/polymer
$ bower install --save Polymer/core-elements
$ bower install --save Polymer/paper-elements
$ bower install --save GoogleWebComponents/google-chart

  • 最後在專案資料夾中新增前端和後端的程式碼檔案。
    ./public/app.html
    ./server.js

使用教學

撰寫相關程式碼至適當檔案中。

./public/app.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html>
<head>
<script src="components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="components/core-toolbar/core-toolbar.html">
<link rel="import" href="components/core-header-panel/core-header-panel.html">
<link rel="import" href="components/core-icons/core-icons.html">
<link rel="import" href="components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="components/paper-shadow/paper-shadow.html">
<link rel="import" href="components/google-chart/google-chart.html">
<style type="text/css">
body {
font-family: Arial;
margin: 0;
color: #333;
}

core-toolbar {
background-color: #00bcd4;
color: #fff;
box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);
}

.card {
display: inline-block;
background: white;
box-sizing: border-box;
width: 500px;
margin: 16px;
padding: 16px;
border-radius: 2px;
}

google-chart {
width: 100%;
}

</style>

</head>
<body fullbleed vertical layout unresolved>
<core-toolbar>
<paper-icon-button id="navicon" icon="menu"></paper-icon-button>
<span flex>iOS App 使用分析</span>
<paper-icon-button id="morebutton" icon="more-vert"></paper-icon-button>
</core-toolbar>
<center>
<paper-shadow z="1" class="card">
<h3>iPhone 每天最多人使用 App</h3>
<google-chart
type='pie'
data='/api/v1/iphone_most_popular_apps.json'>

</google-chart>
<p>資料來源: VPON</p>
</paper-shadow>
<paper-shadow z="1" class="card">
<h3>iPad 每天最多人使用 App</h3>
<google-chart
type='pie'
data='/api/v1/ipad_most_popular_apps.json'>

</google-chart>
<p>資料來源: VPON</p>
</paper-shadow>
</center>
</body>
</html>

./server.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public'));
app.get("/api/v1/iphone_most_popular_apps.json", function(req, res) {
var data = [["App 類型", "百分比"],
["Entertainment", 28.7 ], ["Finance", 0.2], ["Life", 29.5], ["News", 5.2],
["Social", 8.1], ["Tech", 0.2], ["Travel", 0.8], ["Videos", 27.1], ["Education", 0.1] ]
res.json(data);
});
app.get("/api/v1/ipad_most_popular_apps.json", function(req, res) {
var data = [["App 類型", "百分比"],
["Entertainment", 20.6 ], ["Finance", 0.2], ["Life", 5.0], ["News", 3.2],
["Social", 9.0], ["Tech", 0.2], ["Travel", 0.4], ["Videos", 61.3], ["Education", 0.2] ]
res.json(data);
});
app.listen(8080);

開啟終端機,切換至該專案目錄下,接著執行伺服器程式。

1
$ node server.js

開啟瀏覽器,在網址列輸入 http://127.0.0.1:8080/app.html 進行測試。

相關資源

Node.js 測試處理 (2)

基本介紹

教學目標

透過 supertest 套件進行 Node.js API 的規格測試。

套件安裝

1
$ npm install supertest --save

使用教學

準備程式

建立取得使用者資料的 API 伺服器程式。

1
2
3
4
5
6
7
8
9
var request = require('supertest');
var express = require('express');
var should = require('should');

var app = express();

app.get('/user', function(req, res){
res.send(200, { name: 'leoyeh' });
});

進行取得使用者資料 Node.js 的 API 測試

  • 回傳 HTTP 狀態碼為 200
  • 回傳格式為 JSON
  • 沒有任何錯誤的情況發生

符合上述規格執行至 done(),代表完成 Node.js 的 API 測試,結果正常。

1
2
3
4
5
6
7
8
9
10
11
12
describe('GET /users', function(){
it('respond with json', function(done){
request(app)
.get('/user')
.set('Accept', 'application/json')
.expect(200)
.end(function(err, res){
if (err) return done(err);
done()
});

})

});

相關資源

Node.js 前端處理 (2)

基本介紹

教學目標

透過 Node.js 實作 API ,並且與前端 Angularjs 框架進行表單處理。

前置作業

  1. 完成 Node.js 套件安裝與設置。
  2. 建立專案資料夾,並且新增三個檔案。
    ./public/app.html
    ./public/js/app.js
    ./server.js

使用教學

撰寫相關程式碼至適當檔案中。

./public/app.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html ng-app="App">
<head>
<script src="http://library.leoyeh.me/js/angularjs/angular-1.3.1.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div ng-controller="AppController">
<form name="form" ng-submit="query(form.$valid);">
<p>姓名: <input type="name" ng-model="user.name" required /></p>
<button type="submit" >查詢信箱</button>
</form>
<p>信箱: {{user.mail}}</p>
</div>
</body>
</html>

./public/js/app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
angular.module('App', []).controller('AppController', ['$scope', '$http', function($scope, $http) {
$scope.query = function(isValid) {
if (isValid) {
$http({
method: "POST",
url: "/api/user",
data: $scope.user
}).success(function(data) {
$scope.user = data;
});
}
};
}]);

./server.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var express = require('express'); 
var app = express();
var body_parser = require('body-parser');
app.use(body_parser.json());
app.use(body_parser.urlencoded({ extended: true }));
var router = express.Router();
app.use(express.static(__dirname + '/public'));
app.use('/api', router);
var user = [{
id: 1 ,
name: "Leo Yeh" ,
mail: "leoyeh.me@gmail.com"
}];
router.post('/user', function(req, res){
var data = new Object();
data.name = req.body.name
data.mail = "沒有信箱!";
for (var n=0; n<user.length; n++) {
if (user[n].name == req.body.name) {
data.mail = user[n].mail;
}
}
res.json(data);
});
var port = process.env.PORT || 8080;
app.listen(port);

開啟終端機,切換至該專案目錄下,接著執行伺服器程式。

1
$ node server.js

開啟瀏覽器,在網址列輸入 http://127.0.0.1:8080/app.html 進行測試。

相關資源

Node.js 前端處理 (1)

基本介紹

教學目標

透過 Node.js 實作 API ,並且與前端 Angularjs 框架進行資料處理。

前置作業

  1. 完成 Node.js 套件安裝與設置。
  2. 建立專案資料夾,並且新增三個檔案。
    ./public/app.html
    ./public/js/app.js
    ./server.js

使用教學

撰寫相關程式碼至適當檔案中。

./public/app.html

1
2
3
4
5
6
7
8
9
10
11
12
13
<!doctype html>
<html ng-app="App">
<head>
<script src="http://library.leoyeh.me/js/angularjs/angular-1.3.1.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div ng-controller="AppController">
<p>姓名: {{user.name}}</p>
<p>信箱: {{user.mail}}</p>
</div>
</body>
</html>

./public/js/app.js

1
2
3
4
5
6
7
8
angular.module('App', []).controller('AppController', ['$scope', '$http', function($scope, $http) {
$http({
method: "GET",
url: "/api/user",
}).success(function(data) {
$scope.user = data;
});
}]);

./server.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var express = require('express'); 
var app = express();
var router = express.Router();
app.use(express.static(__dirname + '/public'));
app.use('/api', router);
var user = {
id: 1 ,
name: "Leo Yeh" ,
mail: "leoyeh.me@gmail.com"
};
router.get('/user', function(req, res){
res.json(user);
});
var port = process.env.PORT || 8080;
app.listen(port);

開啟終端機,切換至該專案目錄下,接著執行伺服器程式。

1
$ node server.js

開啟瀏覽器,在網址列輸入 http://127.0.0.1:8080/app.html 進行測試。

相關資源

Node.js API 處理 (2)

基本介紹

教學目標

透過 express 套件進行 API 參數傳遞。

  1. Path 參數傳遞
  2. Query 參數傳遞
  3. Body 參數傳遞

前置作業

  1. 完成 Node.js 套件安裝與設置。
  2. 新增程式碼檔案,命名為 server.js。

套件安裝

1
2
$ npm install express --save
$ npm install body-parser --save

使用教學

初始伺服器

1
2
3
var express = require('express'); 

var app = express();

進階設定

1
2
3
4
var body_parser = require('body-parser');

app.use(body_parser.json());
app.use(body_parser.urlencoded({ extended: true }));

路徑設定

1
2
3
var router = express.Router();

app.use('/api/v1', router);

資料設定

1
var user = ["leoyeh"];

Path 參數傳遞

1
2
3
4
router.get('/user/:id', function(req, res){
var id = parseInt(req.param.id) - 1;
res.send(user[id]);
});

ex: HTTP/1.1 GET http://127.0.0.1/api/v1/user/1

Query 參數傳遞

1
2
3
4
router.get('/user', function(req, res){
var id = parseInt(req.query.id) - 1;
res.send(user[id]);
});

ex: HTTP/1.1 GET http://127.0.0.1/api/v1/user?id=1

Body 參數傳遞

必需搭配進行進階設定,並且不適用 HTTP 的 GET 方法。

1
2
3
4
router.post('/user', function(req, res){
var id = parseInt(req.body.id) - 1;
res.send(user[id]);
});

ex: HTTP/1.1 POST http://127.0.0.1/api/v1/user

1
2
3
{
id: 1
}

設定伺服器

1
2
3
var port = process.env.PORT || 8080;

app.listen(port);

啟動伺服器

1
$ sudo PORT=80 node server.js

相關資源