新聞中心
正計劃著要開始搞一個新的網(wǎng)絡(luò)應(yīng)用?在這篇教程中,我們將討論如何創(chuàng)建以API為中心的網(wǎng)絡(luò)應(yīng)用,還會解釋在今天的多平臺世界,這類應(yīng)用為什么是重要的。

引言
API?
對于還不甚熟悉這個術(shù)語的朋友,API是Application Programming Interface(應(yīng)用編程接口)的簡稱。根據(jù)維基百科:
| API是以源代碼為基礎(chǔ)的約定,它用于軟件組件之間相互通信的接口。API可能包含函數(shù)、數(shù)據(jù)結(jié)構(gòu)、對象類、以及變量等的約定。 |
API可視化
圖片蒙惠http://blog.zoho.com
簡單地講,API指的是一組應(yīng)用中的函數(shù),它們能夠被其它應(yīng)用(或者這些函數(shù)所屬應(yīng)用自己,下文中我們將會看到)用來與應(yīng)用進(jìn)行交互。API是一種很棒的向外部應(yīng)用安全和妥善地表明其功能的方式,因為這些外部應(yīng)用所能利用的所有功能僅限于API中所表現(xiàn)出的功能。
什么是“以API為中心的”網(wǎng)絡(luò)應(yīng)用?
| 以API為中心的網(wǎng)絡(luò)應(yīng)用就是基本上通過API調(diào)用執(zhí)行大多數(shù)甚或所有功能的一類網(wǎng)絡(luò)應(yīng)用。 |
以API為中心的網(wǎng)絡(luò)應(yīng)用就是基本上通過API調(diào)用執(zhí)行大多數(shù)甚或所有功能的一類網(wǎng)絡(luò)應(yīng)用。舉個例子,如果你正要登錄一個用戶,你應(yīng)當(dāng)將其認(rèn)證信息發(fā)送給API,然后API會向你返回一個結(jié)果,說明該用戶是否提供了正確的用戶名-密碼組合。
以API為中心的網(wǎng)絡(luò)應(yīng)用的另外一個特征就是API一直是無狀態(tài)的,這意味著這種應(yīng)用無法辨別由會話發(fā)起的API調(diào)用。由于API調(diào)用通常由后端代碼構(gòu)成,實(shí)現(xiàn)對會話的掌控將比較困難,因為這其中通常沒有cookies介入。這種局限事實(shí)上是好事——它“迫使”開發(fā)者建造不基于當(dāng)前用戶狀態(tài)工作的 API,但是相應(yīng)地在功能上,它使測試易于進(jìn)行,因為用戶的當(dāng)前狀態(tài)無需被重建。
為什么要經(jīng)歷這些麻煩?
作為Web開發(fā)者,我們已經(jīng)親眼目睹了技術(shù)的進(jìn)步。有一個常識是,當(dāng)代的人們不會只通過瀏覽器來使用應(yīng)用,還會通過其它諸如移動電話和平板電腦之類的設(shè)備使用。舉個例子,這篇發(fā)表在Mashable上的名為“用戶在移動應(yīng)用上花的時間比在網(wǎng)絡(luò)上的多”的寫道:
| 一項新近的報告表明,用戶花在移動應(yīng)用上的時間首次超過了花在網(wǎng)絡(luò)上的時間。 |
| Flurry對比了其移動數(shù)據(jù)與來自comScore和Alexa的統(tǒng)計數(shù)據(jù),發(fā)現(xiàn)在六月,用戶每天花費(fèi)81分鐘使用移動應(yīng)用,而只花74分鐘用于網(wǎng)上沖浪。 |
這里還有一篇來自ReadWriteWeb的更新的文章“在移動設(shè)備上瀏覽網(wǎng)絡(luò)的人多于使用IE6和IE7的人數(shù)總和”:
| 來自Sitepoint的 瀏覽器趨勢的最新數(shù)據(jù)表明,在智能手機(jī)上瀏覽Web的人比使用IE6和IE7瀏覽的人更多。這兩件難有起色的老古董多年來一直是Web開發(fā)者的噩夢,它們需要各網(wǎng)站盡可能妥當(dāng)?shù)亟蹈竦街辽俪S脼g覽器所能支持的水平。但是現(xiàn)在時代不同了;2011年十一月中,6.95%的Web活動在移動瀏覽器上發(fā)生,而發(fā)生在IE6或 IE7上的則只有6.49%。 |
正如我們所見,越來越多的人正通過其它途徑獲得訊息,特別是移動設(shè)備。
這與我創(chuàng)建以API為中心的網(wǎng)絡(luò)應(yīng)用有何關(guān)系?
| 這必將會使我們的應(yīng)用更加有用,因為它可以用在任何你需要的地方。 |
創(chuàng)建以API為中心的網(wǎng)絡(luò)應(yīng)用的主要優(yōu)勢之一便是它幫助你建立可以用于任何設(shè)備的功能,瀏覽器、移動電話、甚至是桌面應(yīng)用。你所需要做的就是創(chuàng)建的API 能夠使所有這些設(shè)備利用它完成通信,然后,瞧!你將能夠建造一個集中式應(yīng)用,它能夠接受來自用戶所使用的任何設(shè)備的輸入并執(zhí)行相應(yīng)的功能。
以API為中心的應(yīng)用的框圖
通過以這種方式創(chuàng)建應(yīng)用,我們能夠從容地利用不同的人使用不同的媒介這一優(yōu)勢。這必將使應(yīng)用更加有用,因為它能用在用戶需要的任何地方。
為了證明我們的觀點(diǎn),這里有一篇關(guān)于Twitter的重新設(shè)計的網(wǎng)站的文章,文章告訴我們他們現(xiàn)在如何利用他們的API來驅(qū)動Twitter.com的,實(shí)質(zhì)上是使其以API為中心:
| 最重要的架構(gòu)改動之一就是Twitter.com現(xiàn)在是我們自己API的客戶。它從終端提取數(shù)據(jù),此終端與移動網(wǎng)站,我們?yōu)閕Phone、iPad、 Android,以及所有第三方應(yīng)用所用端點(diǎn)相同。這一轉(zhuǎn)變使我們能向API團(tuán)隊分配更多的資源,同時生成了40多個補(bǔ)丁。在初始頁面負(fù)載和來自客戶端的每個調(diào)用上,所有的數(shù)據(jù)現(xiàn)在都是從一個高度優(yōu)化的JSON段緩存中獲取的。 |
在本篇教程中,我們將創(chuàng)建一個簡單的TODO列表應(yīng)用,該應(yīng)用以API為中心;還要創(chuàng)建一個瀏覽器上的前端客戶端,該客戶端與我們的TODO列表應(yīng)用進(jìn)行交互。文末,你就能了解一個以API為中心的應(yīng)用的有機(jī)組成部分,同時,還能了解怎樣使應(yīng)用和客戶端兩者之間的安全通信變得容易。記住這些,我們開始吧!
步驟 1: 規(guī)劃該應(yīng)用的功能
本教程中我們將要構(gòu)建的這個 TODO 應(yīng)用將會有下面幾個基本的CRUD功能:
- 創(chuàng)建 TODO 條目
- 讀取 TODO 條目
- 更新 TODO 條目 (重命名,標(biāo)記為完成,標(biāo)記為未完成)
- 刪除 TODO 條目
每一個 TODO 條目將擁有:
- 一個標(biāo)題 Title
- 一個截止日期 Date Due
- 一個描述 Description
- 一個判斷 TODO 條目是否完成的標(biāo)志 Is Done
讓我們模擬一下該應(yīng)用,使我們考慮該應(yīng)用以后會是什么樣子時,能有有一個直觀的參考:
簡單的TODO 模擬示例
#p#
步驟 2: 創(chuàng)建API服務(wù)器
既然我們是在開發(fā)一個以API為中心的應(yīng)用,我們將創(chuàng)建兩個“項目”: API 服務(wù)器,和前端客戶端。 我們首先從創(chuàng)建API服務(wù)器開始。
在你的web server文件夾,創(chuàng)建一個文件夾,命名為simpletodo_api,然后創(chuàng)建一個index.php文件。這個index.php文件將作為一個訪問API的前端控制器,所以,所有訪問API服務(wù)器的請求都會由該文件產(chǎn)生。打開它并往里輸入下列代碼:
- // 定義數(shù)據(jù)目錄的路徑
- define('DATA_PATH', realpath(dirname(__FILE__).'/data'));
- //引入我們的models
- include_once 'models/TodoItem.php';
- //在一個try-catch塊中包含所有代碼,來捕獲所有可能的異常!
- try {
- //獲得在POST/GET request中的所有參數(shù)
- $params = $_REQUEST;
- //獲取controller并把它正確的格式化使得第一個字母總是大寫的
- $controller = ucfirst(strtolower($params['controller']));
- //獲取action并把它正確的格式化,使它所有的字母都是小寫的,并追加一個'Action'
- $action = strtolower($params['action']).'Action';
- //檢查controller是否存在。如果不存在,拋出異常
- if( file_exists("controllers/{$controller}.php") ) {
- include_once "controllers/{$controller}.php";
- } else {
- throw new Exception('Controller is invalid.');
- }
- //創(chuàng)建一個新的controller實(shí)例,并把從request中獲取的參數(shù)傳給它
- $controller = new $controller($params);
- //檢查controller中是否存在action。如果不存在,拋出異常。
- if( method_exists($controller, $action) === false ) {
- throw new Exception('Action is invalid.');
- }
- //執(zhí)行action
- $result['data'] = $controller->$action();
- $result['success'] = true;
- } catch( Exception $e ) {
- //捕獲任何一次樣并且報告問題
- $result = array();
- $result['success'] = false;
- $result['errormsg'] = $e->getMessage();
- }
- //回顯調(diào)用API的結(jié)果
- echo json_encode($result);
- exit();
實(shí)質(zhì)上,這里我們創(chuàng)建的是一個簡單的前端控制器,它實(shí)現(xiàn)了下列功能:
- 接受一次擁有任意個參數(shù)的API調(diào)用
- 為本次API調(diào)用抽取出Controller和Action
- 進(jìn)行必要的檢查確保Controller和Action都存在
- 執(zhí)行API調(diào)用
- 捕獲異常,如果有的話
- 返回一個結(jié)果給調(diào)用者
除了需要創(chuàng)建index.php外你還需要創(chuàng)建三個文件夾: controllers, models 和 data.
- controllers 文件夾存放的是所有我們API服務(wù)器將會用到的的控制器。我們用MVC架構(gòu)來使API服務(wù)器結(jié)構(gòu)更清楚合理。
- models 文件夾存放所有API服務(wù)器要用到的數(shù)據(jù)模型。
- data 文件夾將會用來保存API服務(wù)器的任何數(shù)據(jù)。
在controllers文件夾下創(chuàng)建一個叫Todo.php的文件。這將是任何TODO列表有關(guān)任務(wù)的控制器。按照TODO應(yīng)用所需提供的功能,向Todo控制器里面添加必要的方法:
- class Todo
- {
- private $_params;
- public function __construct($params)
- {
- $this->_params = $params;
- }
- public function createAction()
- {
- //create a new todo item
- }
- public function readAction()
- {
- //read all the todo items
- }
- public function updateAction()
- {
- //update a todo item
- }
- public function deleteAction()
- {
- //delete a todo item
- }
- }
現(xiàn)在為每個action中添加必要的功能實(shí)現(xiàn)。我將會提供createAction()方法的源碼,其他方法將留作作業(yè)。如果你覺得毫無頭緒,你也可以下載示例的源碼,從那里拷貝。
- public function createAction()
- {
- //create a new todo item
- $todo = new TodoItem();
- $todo->title = $this->_params['title'];
- $todo->description = $this->_params['description'];
- $todo->due_date = $this->_params['due_date'];
- $todo->is_done = 'false';
- //pass the user's username and password to authenticate the user
- $todo->save($this->_params['username'], $this->_params['userpass']);
- //return the todo item in array format
- return $todo->toArray();
- }
在文件夾models下創(chuàng)建TodoItem.php,這樣我們就可以創(chuàng)建“條目添加”的代碼了。注意:我并沒有和數(shù)據(jù)庫進(jìn)行連接,相反我將信息保存到文件中,雖然這可以用任何數(shù)據(jù)庫來實(shí)現(xiàn),但是 這樣做相對來說要容易些。
- class TodoItem
- {
- public $todo_id;
- public $title;
- public $description;
- public $due_date;
- public $is_done;
- public function save($username, $userpass)
- {
- //get the username/password hash
- $userhash = sha1("{$username}_{$userpass}");
- if( is_dir(DATA_PATH."/{$userhash}") === false ) {
- mkdir(DATA_PATH."/{$userhash}");
- }
- //if the $todo_id isn't set yet, it means we need to create a new todo item
- if( is_null($this->todo_id) || !is_numeric($this->todo_id) ) {
- //the todo id is the current time
- $this->todo_id = time();
- }
- //get the array version of this todo item
- $todo_item_array = $this->toArray();
- //save the serialized array version into a file
- $success = file_put_contents(DATA_PATH."/{$userhash}/{$this->todo_id}.txt", serialize($todo_item_array));
- //if saving was not successful, throw an exception
- if( $success === false ) {
- throw new Exception('Failed to save todo item');
- }
- //return the array version
- return $todo_item_array;
- }
- public function toArray()
- {
- //return an array version of the todo item
- return array(
- 'todo_id' => $this->todo_id,
- 'title' => $this->title,
- 'description' => $this->description,
- 'due_date' => $this->due_date,
- 'is_done' => $this->is_done
- );
- }
- }
createAction方法使用到TodoItem模型里面兩個方法:
- save() – 該方法將TodoItem保存到一個文件中,如有必要,需要設(shè)置todo_id。
- toArray() – 該方法返回一個以變量為索引的數(shù)組Todo條目。
由于API需要通過HTTP請求調(diào)用,在瀏覽器輸入如下地址測試API:
http://localhost/simpletodo_api/?controller=todo&action=create&title=test%20title&description=test%20description&due_date=12/08/2011&username=nikko&userpass=test1234
如果沒有錯,你應(yīng)該在data文件夾下看到一個新的文件夾,在該文件夾里面有一個文件,文件內(nèi)容如下:
createAction()結(jié)果
恭喜!您已經(jīng)成功創(chuàng)建了一個的API服務(wù)器和API調(diào)用!
#p#
步驟3:確保API服務(wù)器具有APP ID和APP SECRET
目前,API服務(wù)器被設(shè)置為接受全部API請求。我們將需要將之限制在我們自己的應(yīng)用上,以確保只有我們自己的前端客戶端能夠完成API請求。另外,你實(shí)際上也可以創(chuàng)建一個系統(tǒng),其中的用戶可以創(chuàng)建他們自己的應(yīng)用,而那些應(yīng)用也用用對你的API服務(wù)器的訪問權(quán),這與Facebook和Twitter的應(yīng)用的的工作原理類似。
我們從為使用API服務(wù)器的用戶創(chuàng)建一組id-密碼對開始。由于這只是一個Demo,我們可以使用任何隨機(jī)的、32位字符串。對于APP ID,我們將其設(shè)定為APP001。
再次打開index.php文件,然后用下列代碼更新之:
- // Define path to data folder
- define('DATA_PATH', realpath(dirname(__FILE__).'/data'));
- //Define our id-key pairs
- $applications = array(
- 'APP001' => '28e336ac6c9423d946ba02d19c6a2632', //randomly generated app key
- );
- //include our models
- include_once 'models/TodoItem.php';
- //wrap the whole thing in a try-catch block to catch any wayward exceptions!
- try {
- //*UPDATED*
- //get the encrypted request
- $enc_request = $_REQUEST['enc_request'];
- //get the provided app id
- $app_id = $_REQUEST['app_id'];
- //check first if the app id exists in the list of applications
- if( !isset($applications[$app_id]) ) {
- throw new Exception('Application does not exist!');
- }
- //decrypt the request
- $params = json_decode(trim(mcrypt_decrypt(MCRYPT_RIJNDAEL_256, $applications[$app_id], base64_decode($enc_request), MCRYPT_MODE_ECB)));
- //check if the request is valid by checking if it's an array and looking for the controller and action
- if( $params == false || isset($params->controller) == false || isset($params->action) == false ) {
- throw new Exception('Request is not valid');
- }
- //cast it into an array
- $params = (array) $params;
- ...
- ...
- ...
我們在這里已經(jīng)完成的實(shí)際上是實(shí)現(xiàn)一個非常簡單的認(rèn)證我們的前端客戶端的方法,它利用了與公共-私有密鑰認(rèn)證相似的系統(tǒng)?;旧希@里給出的就是認(rèn)證過程的步驟分解:
公鑰加密
- 完成一個API調(diào)用,其中提供了$app_id和$enc_request
- $enc_request的值是API調(diào)用的參數(shù),利用APP KEY進(jìn)行加密。APP KEY絕對不會被發(fā)送到服務(wù)器,它只是被用來散列請求。此外,該請求只能利用APP KEY被解密
- 一旦API調(diào)用到達(dá)API服務(wù)器,它會查驗它自己的應(yīng)用列表是否與APP ID所提供的一致
- 當(dāng)調(diào)用被發(fā)現(xiàn),API服務(wù)器嘗試?yán)门cAPP ID發(fā)送的密鑰相匹配的密鑰進(jìn)行解密
- 如果請求被解密成功,那么繼續(xù)執(zhí)行程序
既然API服務(wù)器已經(jīng)確保具有APP ID和APP SECRET,那么我們就可以開始編寫使用API服務(wù)器的前端客戶端了。
#p#
步驟4:創(chuàng)建瀏覽器客戶端
我們從為前端客戶端設(shè)定新建文件夾開始。在你的Web服務(wù)器上的文件夾中創(chuàng)建一個名為simpletodo_client_browser的文件夾。完成后,創(chuàng)建一個index.php文件,并將下列代碼寫進(jìn)去:
SimpleTODO
這段代碼的運(yùn)行結(jié)果看起來就像這樣:
SimpleTODO的登錄頁
需要注意的是我在這里已經(jīng)包含了兩個JavaScript文件和兩個CSS文件:
- reset.css是你的標(biāo)準(zhǔn)CSS重置腳本。我使用了meyerweb.com css reset.
- bootstrap.min.css是Twitter Bootstrap
- jquery.min.js是最新版的jQuery library
- jquery-ui-1.8.16.custom.min.js是最新版的jQuery UI library
接下來,我們創(chuàng)建login.php文件來存儲客戶端會話中的用戶名和密碼。
- //get the form values
- $username = $_POST['login_username'];
- $userpass = $_POST['login_password'];
- session_start();
- $_SESSION['username'] = $username;
- $_SESSION['userpass'] = $userpass;
- header('Location: todo.php');
- exit();
這里,我們簡單地為用戶開啟一次會話,所依據(jù)的是用戶所提供的用戶名和密碼組合。這充當(dāng)了簡單的組合密鑰,它允許用戶訪問某個特定用戶名和密碼組合所存儲的TODO項。然后我們重定向至todo.php,那里是我們開始與API服務(wù)器交互的地方。然而在我們開始編寫todo.php文件之前,先創(chuàng)建一個 ApiCaller類,它將封裝我們所需的全部API調(diào)用方法,包括請求的加密。
創(chuàng)建apicaller.php,并把下面的代碼寫進(jìn)去:
- class ApiCaller
- {
- //some variables for the object
- private $_app_id;
- private $_app_key;
- private $_api_url;
- //construct an ApiCaller object, taking an
- //APP ID, APP KEY and API URL parameter
- public function __construct($app_id, $app_key, $api_url)
- {
- $this->_app_id = $app_id;
- $this->_app_key = $app_key;
- $this->_api_url = $api_url;
- }
- //send the request to the API server
- //also encrypts the request, then checks
- //if the results are valid
- public function sendRequest($request_params)
- {
- //encrypt the request parameters
- $enc_request = base64_encode(mcrypt_encrypt(MCRYPT_RIJNDAEL_256, $this->_app_key, json_encode($request_params), MCRYPT_MODE_ECB));
- //create the params array, which will
- //be the POST parameters
- $params = array();
- $params['enc_request'] = $enc_request;
- $params['app_id'] = $this->_app_id;
- //initialize and setup the curl handler
- $ch = curl_init();
- curl_setopt($ch, CURLOPT_URL, $this->_api_url);
- curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
- curl_setopt($ch, CURLOPT_POST, count($params));
- curl_setopt($ch, CURLOPT_POSTFIELDS, $params);
- //execute the request
- $result = curl_exec($ch);
- //json_decode the result
- $result = @json_decode($result);
- //check if we're able to json_decode the result correctly
- if( $result == false || isset($result['success']) == false ) {
- throw new Exception('Request was not correct');
- }
- //if there was an error in the request, throw an exception
- if( $result['success'] == false ) {
- throw new Exception($result['errormsg']);
- }
- //if everything went great, return the data
- return $result['data'];
- }
- }
我們將利用ApiCaller類向我們的API服務(wù)器發(fā)送請求。這樣,所有必需的加密和cURL初始化代碼將會寫在一個地方,我們就不用重復(fù)代碼了。
- __construct函數(shù)接受三個參數(shù):
- $app_id——客戶端的APP ID(瀏覽器端是APP001)
- $app_key——客戶端的APP KEY(瀏覽器端是28e336ac6c9423d946ba02d19c6a2632)
- $api_url——API服務(wù)器的URL,此處為http://localhost/simpletodo_api/
- sendRequest()函數(shù):
- 利用mcrypt庫以API服務(wù)對其解密的同樣方式來對請求參數(shù)進(jìn)行加密
- 生成發(fā)往API服務(wù)器的$_POST參數(shù)
- 通過cURL執(zhí)行API調(diào)用
- 查驗API調(diào)用的結(jié)果是否正確
- 當(dāng)一切都按計劃進(jìn)行的時候返回數(shù)據(jù)
現(xiàn)在,我們開始寫todo.php。首先,我們創(chuàng)建一些代碼來為密碼為test1234的用戶nikko(這是我們先前用來測試API服務(wù)器的那個用戶名/密碼組合)獲取當(dāng)前的todo項。
- session_start();
- include_once 'apicaller.php';
- $apicaller = new ApiCaller('APP001', '28e336ac6c9423d946ba02d19c6a2632', 'http://localhost/simpletodo_api/');
- $todo_items = $apicaller->sendRequest(array(
- 'controller' => 'todo',
- 'action' => 'read',
- 'username' => $_SESSION['username'],
- 'userpass' => $_SESSION['userpass']
- ));
- echo '';
- var_dump($todo_items);
打開index.php,以nikko/tes1234登錄,然后你應(yīng)該看到我們先前創(chuàng)建的TODO項的avar_dump()。
恭喜,你已經(jīng)成功地做好了一個向API服務(wù)器的API調(diào)用!在這段代碼中,我們已經(jīng):
- 開啟會話,使我們擁有了對$_SESSION中的username以及userpass的訪問權(quán)
- 實(shí)例化了一個新的ApiCaller類,為其提供了APP ID,APP KEY,以及API服務(wù)器的URL
- 通過sendRequest()方法發(fā)送了一個請求
現(xiàn)在,我們來重新格式化一下數(shù)據(jù),讓它們開起來更好看些。向todo.php中添加下列HTML。別忘了移去var_dump()!
SimpleTODO


咨詢
建站咨詢