API

解決問題 Wekan (2)

教學目標

主要解決如何在 CentOS 7 作業系統上安裝與應用 Wekan API 優化流程的問題。

重點概念

首先 Wekan 開源專案主要是用 Node.js + MongoDB 開發的看版管理網站,然而若要優化流程,則還需要客製化輸出結果,此時是否有 REST API 能夠直接取得 Wekan 網站中的卡片資訊呢?答案是有的,我們可以使用 Wekan API 以 REST API 的方式直接取得 Wekan 網站中的卡片資訊。

接著我們可以透過下述指令安裝 Wekan API ,此 Wekan API 主要是用 Python + MongoDB 開發,透過 Python 能夠讓我們整合更多元化的機器學習和資料分析模組,將有助於流程的自動優化,以利企業達到最大的效益。

1
2
3
4
5
6
$ git clone https://github.com/LINKIWI/wekan-api.git 
$ sudo yum install python-virtualenv
$ virtualenv env
$ source env/bin/activate
$ make bootstrap
$ make serve

再來我們就能夠輸入「http://localhost:5000/」的網址開始使用 Wekan API,Wekan API 目前主要能夠取得三個重要的資訊,分別為:

  1. 看板 (boards)
  2. 清單 (lists)
  3. 卡片 (cards)

最後不同看板中會有不同清單,我們可以將清單當成不同的流程階段,並且不同清單會有不同卡片,我們可以將卡片當成不同的流程步驟,至於不同卡片中則會有許多關鍵資訊,包括人、事、時、地和物,其中我們可以針對每張卡片的成員、開始日期和結束日期搭配排程演算法優化流程的安排。此外我們還可以修改「/src/core」目錄中的「app.py」檔案,就能夠讓其它不同網域的應用程式進行跨網頁存取,像是 HTML5 網頁,請注意若要進行跨網頁存取則需要安裝 flask-cors 模組。

安裝 flask-cors 模組。

1
$ pip install -U flask-cors

修改「app.py」程式碼。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import json
import os

from flask import Flask
from flask_cors import CORS
from pymongo import MongoClient

app = Flask(__name__)
CORS(app)

def init_db():
config_file = os.path.join(
os.path.dirname(os.path.abspath(__file__)),
'../../config/database.json',
)
database_config = json.loads(open(config_file).read())

client = MongoClient(database_config['host'], database_config['port'])
return client[database_config['name']]

撰寫 HTML5 程式碼 (部份)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$(document).ready(function(){
$.ajax({
url: 'http://localhost:5000/cards',
type: "GET",
dataType: "json",
complete: function(data, textStatus, jqXHR) {
console.log(textStatus);
},
success: function (data, textStatus, jqXHR) {
console.log(data.crads);
}
});
});

總結我們透過 Wekan API 搭配跨網域存取的功能,將能夠在 HTML5 網頁中直接透過 jQuery 的 Ajax 函數直接存取 Wekan API 的資訊,並且搭配 Bootstrap 美化介面,同時將排程演算法先以 JavaScript 進行撰寫,此時就能夠在短時間完成概念性驗證的示範網站立即與相關人員立即溝通與快速調整,以利符合流程的需求,更進一步優化流程。因此 Wekan 提供 80% 與流程操作相關的實用功能之外,20% 與流程操作相關的客製化功能,則能夠很輕易的進行客製化開發,以利滿足企業組織中流程優化的特別需求。

相關資源

Java 基本介紹 (3)

教學目標

初步了解 Java 程式語言中物件導向中類別、繼承、介面和套件的基本概念與應用。

重點概念

Java 程式語言中物件導向的基本概念主要包括物件、類別、繼承、介面和套件。所謂類別是一個軟體建構主要定義狀態和行為,它本身並不是一個物件,類別就像是一個藍圖,主要定義當物件從類別宣告的規範中建立物件的狀態和行為,透過實體化物件所定義的類別以取得具體的物件。因此我們可以從一個類別定義中實體化許多物件。若對應至現實生活中,則我們經常會發現許多單獨的物件都是一樣的。

然而不同種類的物件通常具有一定共同之處,此時若透過物件導向為主的程式設計則允許類別從其它類別繼承常用的狀態和行為,所有類別物件皆會繼承 Object 類別,此外在 Java 程式語言中一個類別只能繼承單一類別,也就是單一繼承模型。若我們要繼承多個類別時,則只能透過實作介面的方式解決,因為多重繼承會為程式設計師的混亂和膨脹,此時 Java 程式語言中透過介面以更優雅的方式解決問題。在 Java 程式語言中只是針對物件宣告將會實作的方法規範,並不包括實體變數或實體方式,只會以常數和方法宣告的方式實作,簡單來說物件透過公開的方法定義與外部溝通的方式,此時方法就是物件與外部溝通的介面。

範例程式碼

檔案名稱

MRT.java

情境說明

在現實生活中台北捷運站每一站皆有自動提款機,此時我們就能用 Java 物件導向的概念進行初步實作在台北捷運站中啟動和關閉自動提款機。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import java.lang.*;
public class MRT {
public static void main(String[] argv) {
ATM atm1 = new ATM();
ATM atm2 = new ATM();
atm1.on();
atm2.on();
atm1.off();
atm2.off();
}
}
interface Machine {
void on();
void off();
}
class ATM extends Object implements Machine{
private String bank = "國泰世華銀行";
public void on() {
System.out.println(bank + "的自動提款機啟動。");
}
public void off() {
System.out.println(bank + "的自動提款機停止。");
}
}

執行結果

1
2
3
4
國泰世華銀行的自動提款機啟動。
國泰世華銀行的自動提款機啟動。
國泰世華銀行的自動提款機停止。
國泰世華銀行的自動提款機停止。

此外在 Java 程式語言中宣告一個類別、方法和資料時,則可以設定四種等級的存取方式,分別為公開、保護、私有和友好,首先公開為可以隨時隨地的使用,接著保護為只能在該類別和繼承類別中存取,再來私有為只能在該類別中存取,至於友好則是沒有指定存取等級,則代表在同一個套件中所有的物件皆可存取。

宣告關鍵字 同一類別 同一套件 繼承類別 其它套件
public
protected
friendly
private

最後在 Java 程式語言中的套件則是指命名空間,其主要是組織一組相關的類別和介面,概念上有點類似資料夾,由於在 Java 程式語言開發軟體的過程中主要是由數百或數千個單獨的類別所組成,所以透過將相關的類別和介面打包為套件是有意義的一件事,當然在 Java 平台中也提供龐大的類別庫,這種類別庫被稱為 API,其代表通用開發最相關的任務,例如: String 物件包括字串的狀態和行為,File 物件允許程式設計師輕鬆地建立,刪除,檢查,比較或修改文件,…,等,因此對於程式設計師來說主要專注於特定應用程式的設計,而不是針對工作所需的基礎架構進行設計。總結與其說 Java 是個程式語言,還不如說 Java 是個平台更為適當。

相關資源

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 進行測試。

相關資源

雲端服務 API 新經濟 (1)

( 以下內容純屬參與活動會後的重點心得筆記,資料來源: IDC, 2014 )

基本介紹

教學目標

初步了解開放 API 新經濟體系將會帶動創新的商業模式。

基本概念

開放 API 產生創新連結

  • 海量資料的大數據潛力無窮,該如何促進數據流通 ?
  • 物聯網時代,該如何串聯萬物的資訊 ?
  • O2O虛實整合,該如何整合資源創新服務 ?

開放 API 帶動創新商業模式

2014 年是第三平台的基礎確立與創新發展的期間,市場上由許多藉由開放 API 的方式加速創新與創造營收。在面對企業經營「成本」與「彈性」的兩難問題,IDC 認為透過雲端服務不但是最佳解決途徑,更是改變市場遊戲規則的關鍵,加速企業在典範轉移的過程中取得市場先機與提升市場競爭力與佔有率。

Amazon、Google 與 Salesforce.com 等雲端服務業者更藉由 開放 API 加速服務普及度與創造巨額營收。

  • Amazon 每天都透過開放 API 處理近 1 兆筆的交易資料。
  • Google 透過開放 API 創造十億美金以上的營收。
  • Salesforce.com 則有超過一半以上的營收來自於 開放 API。

隨著開放 API 的大量產生,是否有相對應的管理平台與銷售平台變的越來越重要。

  • Mulesoft 以 3 千 7 百萬美金收購最活耀 API 社群 (Programmable Web) 所推出的 API 發佈平台 - Anypoint API Portal。

第三平台興起 -> 雲端服務 -> API 新經濟

雲端服務下的新經濟體系 (API 新經濟)。

  • API is the product
    主要按照交易次數、分級訂價機制獲得直接營收,例如: PayPay、Skype、Googe AdWords。
  • API projects the product
    接觸更多客戶、提供更多功能,以及進行更深層的服務整合,例如: Salesforce.com、Spotify。
  • API promotes the product
    商務發展導向、提升使用人數、推銷品牌與廣告,例如: Netflix。
  • API powers and feeds the product
    獲得更多內容與夥伴合伴進行內部創新,例如: Facebook、Youtube、Twitter。

更多開放 API 可以參考 Mashape 免費 API 管理平台和市集。

相關資源

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 進行測試。

相關資源