Passbook 是蘋果發布的 iOS 6 技術中最火熱的一個, 它所帶來的開創性超過我們的想象。
Passbook 是一些是一個非常棒的組合。 四項獨立的技術結合到一起,為 iPhone 使用者帶來了一個全新的體驗:
- 新的 iOS 架構 PassKit
- 全新的 Passbook 應用,隨著 iOS 一起綁定發布
- 蘋果的 推播通知 服務(這次會保證發送成功)
- 你自己的服務端代碼!
Passbook 和你曾經用到過的其他蘋果的技術很不同。 讓他變得與眾不同的是關於一個檔案格式的概念。 由你來建立 Passbook 檔案, 然後用你希望的方式將他們展現給使用者。 用什麼技術和程式設計語言來實現它也完全取決於你!
毫無疑問, 通過這樣的設定,相比其他蘋果的技術, 你能夠對你實現的東西有更多的控制。
因為蘋果並沒有處理 Passbook 的後端機制, 你需要使用一系列不同的技術來實現它。 在這篇教程中, 你將會用到 Objective-C 和 iOS,使用 JSON, 發送帶有附件的多部分 Email, 使用 OpenSSL 對檔案進行數位簽章, 還有更多。
這篇教程被分為兩個部分:
- 首先,你會學習到如何手工的建立 Passbook 檔案。 你將從一個空的檔案開始,最終完成一個完全風格化並且數位簽章的 Passbook 檔案。
- 然後, 你將會開發一個小型的 iOS 應用,用來在 iPhone 模擬器或者你的裝置上面預覽 Passbook。 你也將會瞭解不同種類的 Passbook 檔案, 然後你會成為 Passbook 專家。
這個章節看起來有些淩亂, 但非常有好處 – 看完它之後, 你將會精通蘋果最新的技術!
第一部分:瞭解和建立 Passbook 檔案Passbook 就是你口袋裡的一切東西蘋果關於 Passbook 的介紹中說 “你口袋裡面的一切東西”。 我非常喜歡這句話, 因為它非常好的示範了你怎樣能夠並且應該創造性的建立你的應用程式和服務。 Passbook 可以是任何東西。
“但他們是什麼呢?”, 你可能會這樣問.
好吧, 這就是 Passbook 在 iPhone 上面的樣子:
你能夠很容易的認出這個 Pass 上面的幾個不同的元素, 他們給了你一些重要的資訊:一個 logo 和 公司的名稱在最上方, “Free hug!” 清楚的描述了這個 Pass, 並且還有關於它的可用性的資訊 (起始時間,期間)。
然後,在最下面,有一個條碼。 它和你在火車票,飛機票,購物券上面看到的條碼很象。如果你仔細的想一想, 你的 iPhone 中的 Pass 可以和那些塞滿你口袋的紙質的票據儲存同樣的資訊,對吧? 一些文字,一個條碼 – 就是這些了。相信我,你的 iPhone 上面的數字票卷可以做更多的事情。
Pass 由什麼構成,一個Pass再看一下 pass 中有什麼, 想一想它擁有的不同部分:
所有類型的 pass 都有這些重要的東西:
- 頂部抬頭. 頂部條包含了一個容易辨認的 Logo 和一個公司名稱。 頭部地區使用者會在 Passbook 的列表中看到。 它包含了你要給使用者提供的最關鍵的資訊, 這樣他們就可以辨認出他們需要的 pass 了。
- 主體地區. 這部分包含了 pass 的內容。 每個 pass 在這個地區都有不同的風格, 它通常在 pass 開啟時顯示最主要的資訊。 像是 “打折 20%”, “一杯免費咖啡”, “餘額 $120″ 或是其他這類的資訊非常有用。
- 附加資訊. 第三個部分用作附加資訊 – 仍然是很重要的資料(例子中的促銷的有效性和開始時間), 但絕對不像關於 pass 是什麼東西這樣的資訊那麼重要。
- 條碼. 條碼包含了編碼後的資訊, 可以通過條碼掃描器很容易的將這些資訊轉移到其他系統中。在上面的例子中, 條碼包含了一個加密代碼。 檔被掃描器節解碼後, 它會給這個 pass 的所有者一個免費的擁抱(立即發送)。
現在,你可能會想紙質的票和購物券是什麼樣的。 這些你每天用到的東西可以被轉換到 iPhone 上面。
Do I board with this pass, or do I get a free coffee?在你寫任何代碼之前, 看一下不同類型的 pass。
蘋果定義了 4 種不同的 pass, 每個都很常用, 還有第 5 種, 用作 “普遍” 用途。 為什麼有這麼多不同的 pass 呢, 你怎樣識別他們呢?
預定義的這些 pass 類型,每一個都是為了顯示不同種類的資訊,以適應不同的用途。這也是為什麼你的健身房會員證和你的音樂會門票的布局和內容是不同的! 前者需要你的照片,而後者不需要。
布局是區分這些不同種類的 pass 的主要方式, 但是一些 UI 特性, 比如圓角,剪紙同樣能很容易的識別出 pass 來。 這些不同之處很小, 但是很明顯, 這也是為什麼你要確保用的是正確的 pass 類型的原因。
這裡是四個預定義的 pass 類型:
- 優惠劵
- 登機證
- 購物券
- 活動門票
但讓, 還有通用類型的 pass。 教程的第二部分會討論所有這五種類型。
現在,看一下下面這個登機證的例子。 你會看到他和前面的那個擁抱優惠券很像, 但有一些關鍵的不同點:它提供了兩列的布局方式, 這樣能夠很容易的找出離開和到達的城市; 離開的月台號,事件和座位號也都擺放整齊。
現在,我確定你已經被說服了, pass 是 iPhone 上面一個很偉大的東西! 讓我們看看 pass 是如何設定的, 並且如何建立一個!
pass 的內部結構這部分將會介紹 pass 的構成部分。 pass 通過一個副檔名為 .pkpass 的檔案展現給使用者。 (“pkpass” 的意思是 PassKit Pass – 很好理解,對嗎?)
.pkpass 只是一個 .zip 檔案。 如果你將它重新命名為 ZIP 並解壓它, 你會找到一些檔案。 這是你前面看到的Free Hug Pass 的內容:
- pass.json – 關於這個 pass 的資訊地區的描述,他們的內容, 和元資訊。
- manifest.json – 這個檔案描述了這個 pass 中的檔案清單, 和每個檔案的 SHA1 校正和。
- signature – manifest.json 一個分離的的 DER 簽名, 通過蘋果提供的認證產生的。
- background.png – 顯示在 pass 正面的圖片。
- background@2x.png – 視網膜屏尺寸的顯示在 pass 正面的圖片。
- logo.png – 在 pass 的頭部地區顯示的 logo。 蘋果推薦的是一個純色單色的 logo。 圖片的尺寸由你決定, 但是高度不能大於 50px 以便適合頭部的高度。
- logo@2x.png – 視網膜螢幕的 logo 圖片
- icon.png – pass 的一個小表徵圖, 當 pass 作為 email 附件的時候會被用到。 在寫這篇教程的時候, 還沒有關於這個圖片尺寸的文檔,但看起來像是 29×29 像素(大尺寸的表徵圖會被縮放,所以他們的顯示效果也不錯)。
- icon@2x.png – 視網膜版本的表徵圖
- strip.png 和 strip@2x.png – 用作主條目的背景;僅用於優惠劵和購物券
這就是所有了!
正如你看到的, pass 的主檔案是 pass.json 這個 JSON 檔案。 在它裡面你聲明了這個 pass 正面和反面的所有資訊, 你提供了這個 pass 需要顯示的所有圖片(在優惠券的情況中, 你僅僅需要指定background.png和它的視網膜版本)。最終,你需要一個資訊清單檔,它包含了所有這些檔案的 SHA1 校正和,和一個分開的簽名, 這樣 Passbook 能夠驗證這個 pass 在你建立之後沒有被修改過。
讓我們來寫一些 JSON!現在你可以寫一些代碼了。 讓我們看看你能否重新建立一個Free Hug pass!
等一下! JSON 不是 Objective-C。 它甚至不是任何一種程式設計語言。 它僅僅是一個標記語言, 用來描述資料結構。 那麼,你如何寫 JSON 呢? 實際上你可以使用任何的文字編輯器 – Xcode, TextMate, Coda 或者 TextEdit. 在這章中, 你會用到 Xcode。
在 Xcode 的菜單中, 選擇 File/New/File… 然後選擇 iOS/Other/Empty 作為檔案類型。 將新檔案命名為pass.json 並將它儲存到你選擇的目錄中。 注意你可能想要建立一個新的目錄來存放 pass, 因為你會將很多和 pass 相關的檔案存放到同一個目錄中, 將他們放在一起是一個不錯的選擇。
你現在應該能看到這個空白的視窗, 就像這個:
但那沒什麼問題 – 不用擔心!
你可以瞭解