基于 API 驅動的 Web App 基本計劃

現代的網站開發工程師和設計者，與API 打交道是很普遍的事了。API 能夠幫助網站提供一個豐富的，動態體驗的效果。 比起那些靜態的標志和圖片，您一定更愿意動態的把數據從服務器上推送到瀏覽，并基于您所考慮的如何更好的展現給用戶經驗，動態的加載和瀉染網頁。

在這篇文章里，我們就會建立一個簡單的 API 驅動的應用。 我們所使用的是 iTunes API, 我們可以彩任何一個 iOS或是 Mac 的應用的鏈接，然后加載到瀏覽器里面將其渲染成全分辨率的圖標。 這個特定的應用也許不是立刻就很適合你用，但是我們主要是通過這個例子來學習這種開發的基本思路吧。

概覽

大部分設計精良的 iOS 或是 OSX 的應用都能提供一個高分辨率的很具有藝術性的圖標。可以肯定的是，這些圖標都只會用 150 *150 的大小顯示在您的iPhone面板上，或是 OSX 的 Dock 上。 但隨著視網膜屏的流行，在不同的操作系統上已經開始需要的是不同大小的圖標了，蘋果也已經開始要求應用開發商是需要提供高分辨率的圖標文件了, 圖標文件要達到1024 * 1024 的大小了！ 例如：下圖您所看到的 Tweetbot for Mac 的圖標：左邊是大約在您的 Dock上面顯示出來的效果，而右邊則是他全分辨率的大小：

Apple 讓這些圖標的資源文件可以通過 iTunes API來訪問。 所以如果您想得到這個高分辨率的，全尺寸的圖標，是可以做到的。您只需要這個應用的標識符，然后向 iTunes API 發起請求，就會得到很多關于這個應用的信息，包括蘋果商店里面可以提供的該應用的高分辨率的圖標的鏈接。

本文可不會主要關注于學習 iTunes API, 我們更關注的是在通過API 返回的內容動態生成的 Web App 以及渲染效果背后的基本原則。 一旦您了解了如何和這些API打交道，就可以非常容易的用些第三方的API 來建造您自己的個人網站，比方說：Dribble 或是 Twitter.

為了能完成我們最終的目標產品中，我把本文要用到一些概念列在下面，您可以快速瀏覽一下。

• 用線框畫出您基本的想法
• 用速描畫出您的產品原型
• 使用 HTML/CSS 建造網站
• 通過 JavaScript 添加交互方式

線框圖

為了讓您更明白我們打算做個啥東東，讓我們開始詳細的描述一下我們這個小應用的基本想法吧。一旦這個工作完成，我們就可以把這個應用的主要組件都列出來，以使我們的應用更清晰化。

應用的基本想法

為了能用線框圖畫出我們的應用主要組成部件，我們需要先列出該應用的基本功能和想法：

• 用戶需要提交一個 iOS 或是 Mac 應用的鏈接 （就比如是：https://itunes.apple.com/us/app/twitter/id333903271?mt=8).
• 應用首先判斷該鏈接是否有效，然后將該請求提交給 iTunes API。
• 解析 API的回應，確保從 API的回應信息是有效的，并收集相關的信息。
• 給用戶展示從 API 返回的信息，無論是出錯信息也好，是得到了正確的 全分辨率的圖標也成。

應用的主要組成部件

現在我們已經對該應用要完成的任務有了一個基本的概念，我們就可以利用線框圖畫出該應用的不同組件了。需要記住的是，我們需要的這個 Web App 是一個響應式的網站，所以我們要確保這些組件是可以根據響應來放大或是縮小的。

頁頭： 在頁面的最頂部的位置，我們需要放置一些設計好樣式的文本，以展示我們應用的名字，同時也包括一個簡單的描述，告訴用戶這個應用是用來做什么的。 “Gimmie Dat iCon” 是我給該應用想出來的有點傻傻的名字。

輸入框： 我們需要給用戶提供一個輸入鏈接的方式，該鏈接就是那個用戶很感興趣的想要得到圖標的應用的地址。所以我們要做的就是在頁頭的正下方加一個簡單的輸入框，以及一個提交按鈕。

展示區： 一定這個有效的鏈接拿到了我們所需要的信息，我們就需要一塊兒區域給客戶展示該應用從 iTune商店里面拿到的應用的圖標。 所以我們就在輸入框的正下方建一個展示區。

這就足夠了，現在我們就已經具備了所有的需要的組件部分了。這些組件能夠幫助我們完成從客戶那邊得到一個鏈接，在驗證他有效的情況下，我們從iTunes API里面拿到該鏈接所對應的全分辨率的圖標并展示給用戶。

組件狀態

我們在線框圖的階段還有一個重要的因素是需要考慮的：每一個組件都會有不同的狀態的。 在不同的時間，我們的小應用都會處于不同的狀態。 比方說： 我們現在已經知道我們需要給客戶展示從 iTunes API里面得到的圖標文件的，我們已經把這個問題處理的很好了。但是如果 API的返回值出錯了怎么辦？ 或者，如果用戶輸入了一個無效的鏈接？所以我們也需要處理好程序的出錯問題了，根據應用運行的不同狀態，我們的程序有可能返回來的不一樣的信息。其實因為我們的應用非常簡單，所以我們只需要考慮到以下的一些情況就足夠了.

零狀態： 當用戶第一次打開我們的應用時應該是什么情況：在展示區里面是不會有圖標顯示出來的，因為這時他還沒有輸入任何有效鏈接。 所以這時我們需要考慮一個友好的方式展示零狀態，比方這種提示信息：“您還沒有輸入鏈接，請先輸入有效鏈接后在此為您展示相應的圖標。”

出錯狀態：在執行應用的時候，非常有可能出現一些錯誤。比方說： 用戶有可能輸入了一個無效的鏈接。 或者， iTunes API返回了一些損壞的數據，或者根本就不是返回數據。 我們在設計該應用的時候就得考慮著把這些事兒給用戶們處理好，否則到時他們會一頭霧水，不知道該怎么辦了。所以我們需要設計一個報錯機制去展示錯誤信息（根據不同的錯誤信息，這里的展示文本也會變化）。

加載：由于我們是通過API調用的，所以操作很有可能不會即時就完成。用戶的電腦先生成這個請求，提交到了第三方的服務器，該服務器的程序運行計算了該請求，并把相應的信息返回到用戶的電腦上。 這有可能會花幾秒鐘的時間完成。 所以我們得保證我們的應用設計要給用戶提供一個交流方式以告之用戶我們的內容正在加載中。 這種方法得足夠友好，至少不能讓用戶崩潰，或是盯著那個一動不動的屏幕，以為應用死機了（其實我們開發人員是明白的，這時的應用正在后臺努力的加載那）。

現在可以說把計劃做完了！我們考慮到了應用中的各種不同組件，以及他們的不同狀態。 在下一篇文章，我們就會開始使用線框圖進行視覺化設計了。

不深思則不能造于道。不深思而得者，其得易失。

名人名言- 曾國藩

• By 優聯實達(譯)
• 2015-10-06
• 1945
• 公司新聞，網站開發，網站設計，UI