如何創建以API為中心的Web應用

如何創建以API為中心的Web應用，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

正計劃著要開始搞一個新的網絡應用？在這篇教程中，我們將討論如何創建以API為中心的網絡應用，還會解釋在今天的多平臺世界，這類應用為什么是重要的。

引言

API？

對于還不甚熟悉這個術語的朋友，API是Application Programming Interface（應用編程接口）的簡稱。根據維基百科：

API可視化

圖片蒙惠http://blog.zoho.com

簡單地講，API指的是一組應用中的函數，它們能夠被其它應用（或者這些函數所屬應用自己，下文中我們將會看到）用來與應用進行交互。API是一種很棒的向外部應用安全和妥善地表明其功能的方式，因為這些外部應用所能利用的所有功能僅限于API中所表現出的功能。

什么是“以API為中心的”網絡應用？

以API為中心的網絡應用就是基本上通過API調用執行大多數甚或所有功能的一類網絡應用。舉個例子，如果你正要登錄一個用戶，你應當將其認證信息發送給API，然后API會向你返回一個結果，說明該用戶是否提供了正確的用戶名-密碼組合。

以API為中心的網絡應用的另外一個特征就是API一直是無狀態的，這意味著這種應用無法辨別由會話發起的API調用。由于API調用通常由后端代碼構成，實現對會話的掌控將比較困難，因為這其中通常沒有cookies介入。這種局限事實上是好事——它“迫使”開發者建造不基于當前用戶狀態工作的 API，但是相應地在功能上，它使測試易于進行，因為用戶的當前狀態無需被重建。

為什么要經歷這些麻煩？

作為Web開發者，我們已經親眼目睹了技術的進步。有一個常識是，當代的人們不會只通過瀏覽器來使用應用，還會通過其它諸如移動電話和平板電腦之類的設備使用。舉個例子，這篇發表在Mashable上的名為“用戶在移動應用上花的時間比在網絡上的多”的寫道：

這里還有一篇來自ReadWriteWeb的更新的文章“在移動設備上瀏覽網絡的人多于使用IE6和IE7的人數總和”：

正如我們所見，越來越多的人正通過其它途徑獲得訊息，特別是移動設備。

這與我創建以API為中心的網絡應用有何關系？

創建以API為中心的網絡應用的主要優勢之一便是它幫助你建立可以用于任何設備的功能，瀏覽器、移動電話、甚至是桌面應用。你所需要做的就是創建的API 能夠使所有這些設備利用它完成通信，然后，瞧！你將能夠建造一個集中式應用，它能夠接受來自用戶所使用的任何設備的輸入并執行相應的功能。

以API為中心的應用的框圖

通過以這種方式創建應用，我們能夠從容地利用不同的人使用不同的媒介這一優勢。這必將使應用更加有用，因為它能用在用戶需要的任何地方。

為了證明我們的觀點，這里有一篇關于Twitter的重新設計的網站的文章，文章告訴我們他們現在如何利用他們的API來驅動Twitter.com的，實質上是使其以API為中心：

在本篇教程中，我們將創建一個簡單的TODO列表應用，該應用以API為中心；還要創建一個瀏覽器上的前端客戶端，該客戶端與我們的TODO列表應用進行交互。文末，你就能了解一個以API為中心的應用的有機組成部分，同時，還能了解怎樣使應用和客戶端兩者之間的安全通信變得容易。記住這些，我們開始吧！

步驟 1: 規劃該應用的功能

本教程中我們將要構建的這個 TODO 應用將會有下面幾個基本的CRUD功能:

• 創建 TODO 條目

• 讀取 TODO 條目

• 更新 TODO 條目 (重命名，標記為完成，標記為未完成)

• 刪除 TODO 條目

每一個 TODO 條目將擁有:

• 一個標題 Title

• 一個截止日期 Date Due

• 一個描述 Description

• 一個判斷 TODO 條目是否完成的標志 Is Done

讓我們模擬一下該應用，使我們考慮該應用以后會是什么樣子時，能有有一個直觀的參考:

 
簡單的TODO 模擬示例

步驟 2: 創建API服務器

既然我們是在開發一個以API為中心的應用，我們將創建兩個“項目”: API 服務器，和前端客戶端。 我們首先從創建API服務器開始。

在你的web server文件夾，創建一個文件夾，命名為simpletodo_api，然后創建一個index.php文件。這個index.php文件將作為一個訪問API的前端控制器，所以，所有訪問API服務器的請求都會由該文件產生。打開它并往里輸入下列代碼:

<?php  // 定義數據目錄的路徑  define('DATA_PATH', realpath(dirname(__FILE__).'/data'));   //引入我們的models  include_once 'models/TodoItem.php';   //在一個try-catch塊中包含所有代碼，來捕獲所有可能的異常!  try {      //獲得在POST/GET request中的所有參數      $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.');      }            //創建一個新的controller實例，并把從request中獲取的參數傳給它      $controller = new $controller($params);            //檢查controller中是否存在action。如果不存在，拋出異常。      if( method_exists($controller, $action) === false ) {          throw new Exception('Action is invalid.');      }            //執行action      $result['data'] = $controller->$action();      $result['success'] = true;        } catch( Exception $e ) {      //捕獲任何一次樣并且報告問題      $result = array();      $result['success'] = false;      $result['errormsg'] = $e->getMessage();  }   //回顯調用API的結果  echo json_encode($result);  exit();

實質上，這里我們創建的是一個簡單的前端控制器，它實現了下列功能:

• 接受一次擁有任意個參數的API調用

• 為本次API調用抽取出Controller和Action

• 進行必要的檢查確保Controller和Action都存在

• 執行API調用

• 捕獲異常，如果有的話

• 返回一個結果給調用者

除了需要創建index.php外你還需要創建三個文件夾:  controllers, models 和  data.

• controllers  文件夾存放的是所有我們API服務器將會用到的的控制器。我們用MVC架構來使API服務器結構更清楚合理。

• models 文件夾存放所有API服務器要用到的數據模型。

• data 文件夾將會用來保存API服務器的任何數據。

在controllers文件夾下創建一個叫Todo.php的文件。這將是任何TODO列表有關任務的控制器。按照TODO應用所需提供的功能，向Todo控制器里面添加必要的方法：

<?php  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      }  }

現在為每個action中添加必要的功能實現。我將會提供createAction()方法的源碼，其他方法將留作作業。如果你覺得毫無頭緒，你也可以下載示例的源碼，從那里拷貝。

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下創建TodoItem.php，這樣我們就可以創建“條目添加”的代碼了。注意：我并沒有和數據庫進行連接，相反我將信息保存到文件中，雖然這可以用任何數據庫來實現,但是 這樣做相對來說要容易些。

<?php  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保存到一個文件中，如有必要，需要設置todo_id。

• toArray() – 該方法返回一個以變量為索引的數組Todo條目。

由于API需要通過HTTP請求調用，在瀏覽器輸入如下地址測試API：

http://localhost/simpletodo_api/?controller=todo&action=create&title=test%20title&description=test%20description&due_date=12/08/2011&username=nikko&userpass=test1234

如果沒有錯，你應該在data文件夾下看到一個新的文件夾，在該文件夾里面有一個文件，文件內容如下：

 

createAction()結果

恭喜！您已經成功創建了一個的API服務器和API調用！

步驟3：確保API服務器具有APP ID和APP SECRET

目前，API服務器被設置為接受全部API請求。我們將需要將之限制在我們自己的應用上，以確保只有我們自己的前端客戶端能夠完成API請求。另外，你實際上也可以創建一個系統，其中的用戶可以創建他們自己的應用，而那些應用也用用對你的API服務器的訪問權，這與Facebook和Twitter的應用的的工作原理類似。

我們從為使用API服務器的用戶創建一組id-密碼對開始。由于這只是一個Demo，我們可以使用任何隨機的、32位字符串。對于APP ID，我們將其設定為APP001。

再次打開index.php文件，然后用下列代碼更新之：

<?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;      ...      ...      ...

我們在這里已經完成的實際上是實現一個非常簡單的認證我們的前端客戶端的方法，它利用了與公共-私有密鑰認證相似的系統?；旧?，這里給出的就是認證過程的步驟分解：

 
公鑰加密

• 完成一個API調用，其中提供了$app_id和$enc_request

• $enc_request的值是API調用的參數，利用APP KEY進行加密。APP KEY絕對不會被發送到服務器，它只是被用來散列請求。此外，該請求只能利用APP KEY被解密

• 一旦API調用到達API服務器，它會查驗它自己的應用列表是否與APP ID所提供的一致

• 當調用被發現，API服務器嘗試利用與APP ID發送的密鑰相匹配的密鑰進行解密

• 如果請求被解密成功，那么繼續執行程序

既然API服務器已經確保具有APP ID和APP SECRET，那么我們就可以開始編寫使用API服務器的前端客戶端了。

步驟4：創建瀏覽器客戶端

我們從為前端客戶端設定新建文件夾開始。在你的Web服務器上的文件夾中創建一個名為simpletodo_client_browser的文件夾。完成后，創建一個index.php文件，并將下列代碼寫進去：

<!DOCTYPE html> <html> <head>     <title>SimpleTODO</title>           <link rel="stylesheet" href="css/reset.css" type="text/css" />     <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />           <script src="js/jquery.min.js"></script>     <script src="js/jquery-ui-1.8.16.custom.min.js"></script>           <style>     body {          padding-top: 40px;      }      #main {          margin-top: 80px;          text-align: center;      }      </style> </head> <body>     <div class="topbar">         <div class="fill">             <div class="container">                 <a class="brand" href="index.php">SimpleTODO</a>             </div>         </div>     </div>     <div id="main" class="container">         <form class="form-stacked" method="POST" action="login.php">             <div class="row">                 <div class="span5 offset5">                     <label for="login_username">Username:</label>                     <input type="text" id="login_username" name="login_username" placeholder="username" />                                       <label for="login_password">Password:</label>                     <input type="password" id="login_password" name="login_password" placeholder="password" />                                       </div>             </div>             <div class="actions">                 <button type="submit" name="login_submit" class="btn primary large">Login or Register</button>             </div>         </form>     </div> </body> </html>

這段代碼的運行結果看起來就像這樣：

 
SimpleTODO的登錄頁

需要注意的是我在這里已經包含了兩個JavaScript文件和兩個CSS文件：

• reset.css是你的標準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

接下來，我們創建login.php文件來存儲客戶端會話中的用戶名和密碼。

<?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();

這里，我們簡單地為用戶開啟一次會話，所依據的是用戶所提供的用戶名和密碼組合。這充當了簡單的組合密鑰，它允許用戶訪問某個特定用戶名和密碼組合所存儲的TODO項。然后我們重定向至todo.php，那里是我們開始與API服務器交互的地方。然而在我們開始編寫todo.php文件之前，先創建一個 ApiCaller類，它將封裝我們所需的全部API調用方法，包括請求的加密。

創建apicaller.php，并把下面的代碼寫進去：

<?php  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服務器發送請求。這樣，所有必需的加密和cURL初始化代碼將會寫在一個地方，我們就不用重復代碼了。

• __construct函數接受三個參數：

1. $app_id——客戶端的APP ID（瀏覽器端是APP001）
    

2. $app_key——客戶端的APP KEY（瀏覽器端是28e336ac6c9423d946ba02d19c6a2632）
    

3. $api_url——API服務器的URL，此處為http://localhost/simpletodo_api/

• sendRequest()函數：

1. 利用mcrypt庫以API服務對其解密的同樣方式來對請求參數進行加密

2. 生成發往API服務器的$_POST參數

3. 通過cURL執行API調用

4. 查驗API調用的結果是否正確

5. 當一切都按計劃進行的時候返回數據

現在，我們開始寫todo.php。首先，我們創建一些代碼來為密碼為test1234的用戶nikko（這是我們先前用來測試API服務器的那個用戶名/密碼組合）獲取當前的todo項。

<?php  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登錄，然后你應該看到我們先前創建的TODO項的avar_dump()。

恭喜，你已經成功地做好了一個向API服務器的API調用！在這段代碼中，我們已經：

• 開啟會話，使我們擁有了對$_SESSION中的username以及userpass的訪問權

• 實例化了一個新的ApiCaller類，為其提供了APP ID，APP KEY，以及API服務器的URL
   

• 通過sendRequest()方法發送了一個請求

現在，我們來重新格式化一下數據，讓它們開起來更好看些。向todo.php中添加下列HTML。別忘了移去var_dump()！

<!DOCTYPE html> <html> <head>     <title>SimpleTODO</title>           <link rel="stylesheet" href="css/reset.css" type="text/css" />     <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />     <link rel="stylesheet" href="css/flick/jquery-ui-1.8.16.custom.css" type="text/css" />           <script src="js/jquery.min.js"></script>     <script src="js/jquery-ui-1.8.16.custom.min.js"></script>           <style>     body {          padding-top: 40px;      }      #main {          margin-top: 80px;      }            .textalignright {          text-align: right;      }            .marginbottom10 {          margin-bottom: 10px;      }      #newtodo_window {          text-align: left;          display: none;      }      </style>           <script>     $(document).ready(function() {          $("#todolist").accordion({              collapsible: true          });          $(".datepicker").datepicker();          $('#newtodo_window').dialog({              autoOpen: false,              height: 'auto',              width: 'auto',              modal: true          });          $('#newtodo').click(function() {              $('#newtodo_window').dialog('open');          });      });      </script> </head> <body>     <div class="topbar">         <div class="fill">             <div class="container">                 <a class="brand" href="index.php">SimpleTODO</a>             </div>         </div>     </div>     <div id="main" class="container">         <div class="textalignright marginbottom10">             <span id="newtodo" class="btn info">Create a new TODO item</span>             <div id="newtodo_window" title="Create a new TODO item">                 <form method="POST" action="new_todo.php">                     <p>Title:<br /><input type="text" class="title" name="title" placeholder="TODO title" /></p>                     <p>Date Due:<br /><input type="text" class="datepicker" name="due_date" placeholder="MM/DD/YYYY" /></p>                     <p>Description:<br /><textarea class="description" name="description"></textarea></p>                     <div class="actions">                         <input type="submit" value="Create" name="new_submit" class="btn primary" />                     </div>                 </form>             </div>         </div>         <div id="todolist">             <?php foreach($todo_items as $todo): ?>             <h4><a href="#"><?php echo $todo->title; ?></a></h4>             <div>                 <form method="POST" action="update_todo.php">                 <div class="textalignright">                     <a href="delete_todo.php?todo_id=<?php echo $todo->todo_id; ?>">Delete</a>                 </div>                 <div>                     <p>Date Due:<br /><input type="text" id="datepicker_<?php echo $todo->todo_id; ?>" class="datepicker" name="due_date" value="12/09/2011" /></p>                     <p>Description:<br /><textarea class="span8" id="description_<?php echo $todo->todo_id; ?>" class="description" name="description"><?php echo $todo->description; ?></textarea></p>                 </div>                 <div class="textalignright">                     <?php if( $todo->is_done == 'false' ): ?>                     <input type="hidden" value="false" name="is_done" />                     <input type="submit" class="btn" value="Mark as Done?" name="markasdone_button" />                     <?php else: ?>                     <input type="hidden" value="true" name="is_done" />                     <input type="button" class="btn success" value="Done!" name="done_button" />                     <?php endif; ?>                     <input type="hidden" value="<?php echo $todo->todo_id; ?>" name="todo_id" />                     <input type="hidden" value="<?php echo $todo->title; ?>" name="title" />                     <input type="submit" class="btn primary" value="Save Changes" name="update_button" />                 </div>                 </form>             </div>             <?php endforeach; ?>         </div>     </div> </body> </html>

這段代碼的運行結果如下：

很酷哈？但它目前啥也干不了，那么讓我們開始添加一些功能吧。我將為new_todo.php提供代碼，它們調用todo/createAPI調用來創建新的TODO項。創建其他頁（update_todo.php和delete_todo.php）應該與此十分相似，因此我把它們留給你。打開new_todo.php，然后把下面的代碼添進去：

<?php  session_start();  include_once 'apicaller.php';   $apicaller = new ApiCaller('APP001', '28e336ac6c9423d946ba02d19c6a2632', 'http://localhost/simpletodo_api/');   $new_item = $apicaller->sendRequest(array(      'controller' => 'todo',      'action' => 'create',      'title' => $_POST['title'],      'due_date' => $_POST['due_date'],      'description' => $_POST['description'],      'username' => $_SESSION['username'],      'userpass' => $_SESSION['userpass']  ));   header('Location: todo.php');  exit();  ?>

正如你所看到的，new_todo.php頁再次使用了ApiCaller調用來簡化向API服務器所發送的 todo/create請求。這主要完成了與之前相同的事情：

• 開啟一個會話，以使其獲得對存儲于$_SESSION中的$username和$userpass的訪問權

• 實例化一個新的ApiCaller類，為它提供APP ID， APP KEY，以及API服務器的URL

• 通過sendRequest()方法發送請求

• 重定向回todo.php

恭喜，它好用了！你已經成功地創建了一個以API為中心的應用！

結論

圍繞API創建并開發應用具有如此之多的優勢。想創建一個Android版的SimpleTODO？你需要的所有功能都已經在API服務器上了，所以你所要做的就是創建客戶端！想重構或者優化某些類？沒問題——只要確保輸出相同即可。想添加更多的功能？你可以在不影響任何客戶端代碼的前提下做到！

盡管存在著某些像是更長的開發時間或者更加復雜，但是以這種方式開發網絡應用的優勢卻遠比其劣勢更重要。今天的這種開發由我們自己權衡取舍，從而使我們能夠在將來獲益。

關于如何創建以API為中心的Web應用問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。