owned this note
owned this note
Published
Linked with GitHub
# 第一章 創立 Express Application
學習目標:
1. 建立 NodeJS App
2. Express Framework
3. 部署到 IBM Cloud
## 準備開發環境
安裝下列軟體:
* MS Visual Studio Code
* NodeJS
* IBM Cloud CLI
開發環境預備:
step 1: 在 D: 建立屬於你的工作資料夾, 再將該工作資料夾加入到 IDE.
step 2: 建立 Terminal > New Terminal
```
PS D:\cloud109> mkdir ntust-find-author
PS D:\cloud109> cd ntust-find-author
```
## 1 建立 NodeJS App
step 1: 用 'npm init' 命令建立 NodeJS App, 並填寫相關資訊.
```
PS D:\cloud109\ntust-find-author> npm init
package name: (ntust-find-author)
version: (1.0.0)
description: application for finding author
entry point: (index.js) app.js
test command:
git repository:
keywords:
author: Rebecca Chen
license: (ISC) MIT
About to write to D:\cloud109\ntust-find-author\package.json:
{
"name": "ntust-find-author",
"version": "1.0.0",
"description": "application for finding author",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1" },
"author": "Rebecca Chen",
"license": "MIT"
}
Is this OK? (yes)
PS D:\cloud109\ntust-find-author>
```
step 2: 觀察 package.json 檔案
step 3: 建立 NodeJS's express framework, 再觀察 package.json 檔案
```
PS D:\cloud109\ntust-find-author> npm install --save express
```
step 4: 建立 app.js 檔案
Code snippet: Instantiate Express framework (GET and POST) for app.js
```javascript=
var port = process.env.VCAP_APP_PORT || 5000;
//Express Web Framework, and create a new express server
var express = require('express'),
app = express();
// In case the caller calls GET to the root '/', return 'Hello Express!'.
app.get('/', function(req, res) {
res.send('Hello Express!');
});
// In case the caller calls POST to /author, return 'Author name'
app.post('/author', function(req, res) {
res.send('Author name');
});
// start server on the specified port and binding host
app.listen(port, function(req, res){
console.log(`Server started on port` + port);
});
```
step 5: 執行下列命令啟動程式, 並打開視窗 http://localhost:5000
```
PS D:\cloud109\ntust-find-author> node app.js
```
step 6: 建立一個簡單的 HTML 前端頁面
創建 "views" 資料夾, 並建立 "index.html" 檔案
```htmlmixed=
<html>
<body>
<h1 style="color:blue;">Watson Author Finder</h1>
<p>To get information about the author of an article, enter the URL of that article.</p>
<form action="author" method="post">
<input type="text" name="url" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
```
step 7: 整合前端的網頁, 安裝 'path' package, 並修改 app.js 檔案
```
PS D:\cloud109\ntust-find-author> npm install --save path
```
將下面的 code snippet 加入 app.js 檔案
```javascript=
var path = require('path');
// In case the caller calls GET to the root '/', return 'views/index.html' file.
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname, 'views/index.html'));
});
```
step 8: 安裝中介軟體(middleware), body-parser, 對 http POST 請求的請求內容進行解析.
```
PS D:\cloud109\ntust-find-author> npm install --save body-parser
```
再將下面的 code snippet 加入 app.js 檔案
```javascript=
var bodyParser = require('body-parser');
//parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }));
```
step 9: 修改 app.js 檔案, line 19. 用下面的 code snippet 取代原
res.send('Author name').
```
res.send('You called the server requesting the author of the article: ' + req.body.url);
```
最後的 app.js 如下:
```javascript=
var port = process.env.VCAP_APP_PORT || 5000;
//Express Web Framework, and create a new express server
var express = require('express'),
app = express();
var path = require('path');
var bodyParser = require('body-parser');
//parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }));
// In case the caller calls GET to the root '/', return 'views/index.html' file.
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname, 'views/index.html'));
});
// In case the caller calls POST to /author, return 'Author name'
app.post('/author', function(req, res) {
res.send('You called the server requesting the author of the article: ' + req.body.url);
});
// start server on the specified port and binding host
app.listen(port, function(req, res){
console.log(`Server started on port` + port);
});
```
## 2. Express Router
接下來, 將所有和 "routing" 相關的程式碼, 搬到 routes 模組.
step 1: 創建 "routes" 資料夾, 並建立 "index.js" 檔案
step 2: 將下面的 code snippet 搬移到 index.js 檔案
```javascript=
// index.js - Index route module
var express = require('express');
var router = express.Router();
//Provides utilities for dealing with directories
var path = require('path');
// Home page route
router.get('/', function (req, res) {
res.sendFile(path.join(__dirname, '../views/index.html'));
});
module.exports = router;
```
step 3: 將下面的 code snippet 搬移到 author.js 檔案
```javascript=
// author.js - Author route module
var express = require('express');
var router = express.Router();
router.post('/', function (req, res) {
res.send('You called the server requesting the author of the article: ' + req.body.url);
});
module.exports = router;
```
step 4: 參考下列 Code snippet 修改 app.js 的配置使用 routes 模組裡的 index.js 和 author.js 再將不必要的程式碼從 app.js 移除.
```javascript=
//Routes modules
var index = require('./routes'),
author = require('./routes/author');
//In case the caller access any URI under the root /, call index route
app.use('/', index);
//In case the caller access any URI under /author, call author route
app.use('/author', author);
```
最後的 app.js 如下:
```javascript=
var port = process.env.VCAP_APP_PORT || 5000;
//Express Web Framework, and create a new express server
var express = require('express'),
app = express();
var bodyParser = require('body-parser');
//Routes modules
var index = require('./routes');
var author = require('./routes/author');
//parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }));
//In case the caller access any URI under the root /, call index route
app.use('/', index);
//In case the caller access any URI under /author, call author route
app.use('/author', author);
// start server on the specified port and binding host
app.listen(port, function(req, res){
console.log(`Server started on port` + port);
});
```
## 3. 如何部署到 IBM Cloud
step 1: 準備雲端app的描述檔, manifest.yml
```yaml=
applications:
- path: .
name: coke1015cloud
environment_json: {}
memory: 64M
instances: 1
disk_quota: 1024M
services: []
```
step 2: 登入 IBM Cloud
```
ibmcloud login
```
step 3: 用下列指令設定 Cloud Foundry 服務所需要的 "組織" (org) 及 "空間"(space).
```
ibmcloud target --cf
```
step 4: 用下列命令部署 app 到 IBM Cloud
```
ibmcloud cf push
```
Google Drive
Gist
Clipboard
Sign in with Wallet
