add workshop

Author: smlsunxie

Diff for: .gitignore

@@ -0,0 +1 @@
+_book

Diff for: 004-js-workshop/004001-install.md

@@ -0,0 +1,88 @@
+# 運行範例專案
+
+
+## 範例專案網址
+
+* <https://github.com/agileworks-tw/express-example>
+* <https://github.com/agileworks-tw/express-example-vue>
+
+
+
+## server side
+
+```
+git clone https://github.com/agileworks-tw/express-example.git
+```
+
+```
+cd express-example
+npm install
+node_modules/.bin/sequelize db:migrate
+npm start
+```
+
+運行網址: <http://localhost:3000/>
+
+
+### 資料結構說明
+
+```
+.
+├── README.md
+
+├── app.js          程式進入點
+
+├── package.json    此專案用到的套件
+├── config          設定檔
+
+├── models          資料表 ORM 定義
+├── migrations      資料庫遷移檔
+
+├── routes          controller 及 API path 定義
+
+├── views           後台前端頁面
+├── public          靜態檔案
+
+├── test            測試案例
+
+
+```
+
+
+## client side
+
+```
+git clone https://github.com/agileworks-tw/express-example-vue.git
+```
+
+```
+npm install
+npm run dev
+```
+
+運行網址: <http://localhost:4000/>
+
+### 資料結構說明
+
+```
+.
+├── README.md
+├── index.html
+├── package.json
+
+├── build                   建置相關所需檔案
+├── config                  設定檔
+│   ├── dev.env.js          development config 
+│   ├── index.js
+│   └── prod.env.js         production config
+├── src
+│   ├── App.vue
+│   ├── main.js
+│   ├── assets
+│   └── components
+│       ├── ToDo.vue        ToDo 顯示
+│       ├── ToDoForm.vue    ToDo 新增表單
+│       └── TodoList.vue    ToDo 清單及 API 呼叫
+└── static
+
+```

Diff for: 004-js-workshop/004002-model.md

@@ -0,0 +1,78 @@
+# ORM model 定義
+
+## 使用套件
+
+Sequelize: <http://docs.sequelizejs.com/>
+
+
+## 定義資料庫連線
+
+
+```
+module.exports = {
+  development: {
+    dialect: "sqlite",
+    storage: "./db.development.sqlite"
+  },
+  test: {
+    dialect: "sqlite",
+    storage: ":memory:"
+  },
+  production: {
+    username: process.env.DB_USERNAME,
+    password: process.env.DB_PASSWORD,
+    database: process.env.DB_NAME,
+    host: process.env.DB_HOSTNAME,
+    dialect: 'mysql',
+    use_env_variable: 'DATABASE_URL'
+  }
+};
+```
+
+根據不同 mode 給予不同類型的 database server 的連線方式
+
+
+## 定義資料表
+
+### User 
+
+User 有一欄位為 username
+
+與 Task 資料表為 one to many 的關聯
+
+```
+module.exports = (sequelize, DataTypes) => {
+  var User = sequelize.define('User', {
+    username: DataTypes.STRING
+  });
+
+  User.associate = function(models) {
+    models.User.hasMany(models.Task);
+  };
+
+  return User;
+};
+
+```
+
+
+### Task
+
+```
+module.exports = (sequelize, DataTypes) => {
+  var Task = sequelize.define('Task', {
+    title: DataTypes.STRING
+  });
+
+  Task.associate = function (models) {
+    models.Task.belongsTo(models.User, {
+      onDelete: "CASCADE",
+      foreignKey: {
+        allowNull: false
+      }
+    });
+  };
+
+  return Task;
+};
+```

Diff for: 004-js-workshop/004003-test.md

@@ -0,0 +1,144 @@
+# 測試
+
+## 單元測試：驗證 model 設置正確
+
+### 開始測試前準備
+
+```
+  before(async function () {
+    // 初始資料庫
+    await require('../../models').sequelize.sync();
+  });
+
+  beforeEach(function () {
+    // 載入預計測試的 model，確保 require 可以正確完成
+    this.User = require('../../models').User;
+    this.Task = require('../../models').Task;
+  });
+
+```
+
+### 測試案例
+
+```
+  describe('create', function () {
+    it('creates a task',async function () {
+      let user = await this.User.create({
+        username: 'johndoe'
+      });
+      let task = await this.Task.create({
+        title: 'a title',
+        UserId: user.id
+      });
+      expect(task.title).to.equal('a title');
+
+    });
+  });
+```
+
+執行 `npm run test-unit` 確認運行結果
+
+
+```
+  models/task
+    create
+      ✓ creates a task
+
+```
+
+## 整合測試：定義 API spec
+
+
+### 開始測試前準備
+
+```
+  before(async function () {
+      await require('../../models').sequelize.sync();
+  });
+  
+  beforeEach(async function () {
+    this.models = require('../../models');
+    await this.models.Task.destroy({ truncate: true })
+    await this.models.User.destroy({ truncate: true })
+
+  });
+
+```
+
+### 測試案例
+
+```
+  
+  it('透過 api 取得特定 user 之所有 task list 資料', async function () {
+    // 建立測試資料
+    let username = 'johndoe';
+    let user = await this.models.User.create({
+      username
+    });
+    
+    await this.models.Task.create({
+      title: 'johndoe task',
+      UserId: user.id
+    });
+
+    // 呼叫 API 取得資料
+    let response = await request(app).get(`/api/users/${username}/tasks`);
+    let result = response.body;
+
+    // 確認資料結構
+    expect(result.tasks).to.be.an('array');
+    expect(result.tasks[0])
+      .to.be.an('object')
+      .and.to.have.property("title");
+  });
+
+  it('透過 api 新增特定 user 之 task 資料', async function () {
+
+    // 建立測試資料
+    let username = 'andy';
+    await this.models.User.create({
+      username
+    });
+
+    let taskData = {
+      title: "andy task"
+    }
+
+    // 呼叫 API 新增 task
+    let response = await request(app)
+      .post(`/api/users/${username}/tasks/create`)
+      .send(taskData);
+    let result = response.body;
+    
+    // 確認資料結構
+    expect(result.task)
+      .to.be.an('object')
+      .and.to.have.property("title");
+  });
+
+
+
+```
+因為是測試先行，尚未實作 API，因此在這邊運作下列指令時
+
+`npm run test-integration`
+
+將會出現下面錯誤訊息
+
+```
+    1) 透過 api 取得特定 user 之所有 task list 資料
+    2) 透過 api 新增特定 user 之 task 資料
+
+  0 passing (513ms)
+  2 failing
+
+  1) user creation page
+       透過 api 取得特定 user 之所有 task list 資料:
+     Error: expected undefined to be an array
+      at Assertion.assert 
+  2) user creation page
+       透過 api 新增特定 user 之 task 資料:
+     Error: expected undefined to be an object
+```
+
+下一節將實作 API 並且在前台尚未開始使用 API 時，透過 test case 驗證 API 運作正常。