如何用 Parse 和 Swift 搭建一個像 Instagram 那樣的應用？

【編者按】本篇文章做者是Reinder de Vries，既是一名企業家，也是優秀的程序員，發表多篇應用程序的博客。本篇文章中，做者主要介紹瞭如何基於Parse特色，打造一款相似Instagram的應用，完整而清晰的步驟，爲開發者提供一次絕佳的學習體驗。本文系 OneAPM 工程師編譯整理。

Parse 是一個移動應用開發平臺，旗下有個頗有意思的產品：Parse Core。它的特點之一是容許應用開發者直接將數據存儲在雲端，而無需擔憂設置服務器或從新設計一個 REST API。Parse Core 是本地備份（好比核心數據），這使得它能輕鬆解決線上線下等後端問題。

本篇教程主要介紹如何建立一個基於 Parse 的應用。咱們將打造一個相似 Instagram 的應用，它包括如下特徵：

1. 從 Parse 加載數據，存儲在本地；
2. 保存數據到 Parse，並寫回雲端；
3. 爲 Cat 的圖片點贊。

這款應用將徹底使用 Swift 語言開發，Swift 是蘋果最新的編程語言，用於打造 iOS 應用。Parse 並不用徹底重寫 Swift，因此咱們須要建立一個橋接頭來處理它倆的兼容性。

經過這篇文章你將學到如下技能：

• 用 Parse 實現檢索，存儲數據到雲端；
• Cocoapods 整合一個調用 Objective-C 框架的 Swfit 程序；
• 創建視圖和有接口的自定義表視圖單元；
• 從零開始，用 Swift 編寫一個完整的 App；
• 使用自動佈局和約束；
• 使用手勢識別、可選類型、條件、閉包、屬性、出口和動做。

##那開始吧！

首先，你得有一個 Parse 賬戶。這能夠經過你的 Facebook、Google+、GitHub 賬號或郵件在 Parse.com 註冊。 而後，登陸 Parse，經過 https://www.parse.com/apps 能夠到你的 apps Dashboard。

經過點擊「建立新應用」 按鈕，建立一個新的應用程序，輸入「Paws」做爲應用名。接着，打開新應用，確保你能看到下圖的的核心選項卡。

##建立數據存儲區

從技術上說，Parse 只是在線數據庫。數據被存儲爲具備一個名稱和多個字段的對象，如電子表格。這樣的對象被稱爲一個類，它的功能是數據結構的藍圖。咱們將要使用的類名爲 Cat。

在覈心選項卡單擊該按鈕添加一個類。在下拉框中選擇自定義，而後鍵入類的名稱：Cat。而後，單擊建立類。

這樣，咱們就建立了新的類，接着咱們還能夠添加一系列的標準字段，如 ObjectId、createdAt、updatedat和ACL。

將+Col按鈕翻到最上，添加下列字段，名稱和類型：

• Name: name, type: String.
• votes, type Number.
• url, type String.
• cc_by, type String.

這些字段將爲 Cat 數據庫提供基本信息。

##導入數據

如今咱們已經設置好基礎結構，能夠導入數據了！將該文件保存到：cat.json。 而後，回到核心選項卡和數據庫，左鍵點擊「導入」按鈕。選中你剛保存的文件並上傳。確保類別集是「自定義」 ，並重命名爲 Cat（而不是rs1_cat）。再單擊「完成導入」。若是導入是完整的，Parse 會及時提示。點擊「Got it」並從新加載頁面。 若是一切順利，你如今應該能看到數據庫中有10個 Cat。它們都有一個名字、一個 URL、一些得票數和一些爲原則這預留的空間。

至此，咱們在 Parse 中的所有工做已經完成。下面開始構建 Swift Xcode 程序。

##構建 Xcode

打開 Xcode 並建立一個新項目，從開始界面選擇「菜單→新建→工程」。 選擇類別「iOS→應用模板」的單一視圖的應用。在下一屏上輸入如下字段：

• 產品名稱：Paws
• 結構名稱：隨意
• 結構標識符：隨意，好比com.appcoda
• 語言：Swift
• 設備：通用

單擊「下一步」 ，選擇工程目錄文件夾，再單擊「建立」 。

咱們不打算使用 Storyboards，因此單擊左上的 Paws、2 targets、 iOS SDK，打開工程設置。在左側的列表中單擊 Target 下方的 Paws，而後找到屏幕中主區域的主界面設置。將 textMain 從框中移除。

##用 Cocoapods 將 Parse 庫添加到 Xcode 項目

在程序代碼中使用 Parse 以前，咱們必須將其添加依賴關係。所以咱們選擇 Cocoapods，它是一個軟件包管理器。許多應用項目依賴於第三方庫，好比 Parse。CocoaPods 是方便加載庫的工具，並確保其實時更新。 在終端執行如下命令安裝 Cocoapods。它會要求你輸入你的 Mac 用戶密碼。但不容許包含「$」符號。這標誌意味着 shell 命令！

$ sudo gem install cocoapods

中途若是一兩分鐘沒有進展也無需擔憂，那是由於 Cocoapods 正在安裝中。安裝完成後你能夠看到一堆線條，最終...安裝完成。

接下來，在 Xcode 項目的根目錄下建立一個空文件，並調用 Podfile 文件。用你喜歡的文本編輯器打開，並粘貼下面代碼到該文件：

pod ‘Parse’, ‘~> 1.7.1′
pod ‘ParseUI’, ‘~> 1.1.3′

Podfile 會告知 Cocoapods 哪些庫是咱們須要的。這樣的話，Parse 的版本是1.7.1，而ParseUI版本是1.1.3。 如今，關閉 Xcode，並使用終端找到程序項目的根目錄。寫入終端 cd，而後在 Paws 目錄中查找，並將其拖至終端。

接下來，在命令行輸入如下代碼：

$ pod install

CocoaPods 會查找 Podfile，並嘗試安裝咱們設置的依賴關係。這個步驟大概會花上幾分鐘。結果應該是這樣：

CocoaPods 已經下載並編譯 Parse，並把它添加到一個新的工做區。從如今開始，咱們再也不使用原來的應用項目，而會使用 CocoaPods 建立的工做區。它包含了咱們的原始項目和 CocoaPods 項目。

這裏要注意的是：經過搜索瀏覽找到程序的根目錄，打開 Xcode 中的新工做區，再打開其中的 Paws.xcworkspace。驗證下左側的導航項目，會看到：Pods 和 Paws。

在咱們直接編寫應用前，須要創建 Parse 和項目之間的鏈接。Parse 是用 Objective-C 搭建的，而咱們的項目則是用 Swift 語言，二者之間須要適當的設置才能兼容。

##在 Swift 項目中使用 Objective-C

任何 Objective-C 庫、項目或類均可以經過設置橋接頭才能與 Swift 兼容。從技術上講，這樣的橋接將 Objective-C 的頭文件轉換成 Swift 語言。

建立一個橋接頭須要執行如下操做：

1．在 Paws 目錄添加一個新文件，選擇 Paws 工程下的 Paws 目錄，單擊右鍵，而後單擊「新建文件」。 2．從「iOS→源」類別中選擇Objective-C文件模板並單擊「下一步」。 3．將類命名爲「Paws」（或其它你喜歡的名字），而後繼續進行並保存文件。出現提示時，單擊「是」來配置 Objective-C 橋接頭。

Xcode 建立兩個新文件：Paws.m 和 Paws-Bridging-Header.h。Paws.m 文件沒什麼用，你能夠直接將它刪除。在 Paws-Bridging-Header.h 文件中寫入如下代碼：

#import <Parse/Parse.h>
#import <ParseUI/ParseUI.h>
#import <Bolts/Bolts.h>

看到這裏，你不由會問難道這一大堆工做只是爲了創建一個編程項目麼？別擔憂，咱們接下來就來搞點有趣的。請記住：Parse 提供一個現成的在線後端，能節省大量時間！

##驗證 Parse 是如何工做的

經過 https://parse.com/apps，返回 Parse 的 Dashboard。將鼠標懸停在你賬戶名的右上角，單擊賬戶，再單擊應用鍵標籤最上面一欄。你還能夠直接訪問 https://parse.com/account/keys。 肯定應用的 Parse 網絡服務後，該頁面將顯示你的應用鍵。應用鍵由一串字母數字或字符組成，基本上這就是應用的密碼，要注意保密。 接下來，在 Xcode 中打開文件 AppDelegate.swift。找到應用程序的 didFinishLaunchingWithOptions 方法。 添加如下代碼到方法中，確保它在該方法的首行。完整的是這樣：

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool  
{
	Parse.setApplicationId("...", clientKey: "...")

return true  
}

用 Parse 的應用鍵分別替換「...」

1. 第一個，應用 ID
2. 第二個，客戶端密鑰

以後，嘗試運行應用程序：

1．確保選擇正確的設備，經過確認PLAY按鈕的右上方，確保設備選擇，好比 iPhone 或 iPhone6。 2．而後，點擊Play按鈕或按下 Command-R 運行程序。

項目在構造、運行過程當中沒有錯誤。一旦運行，你能夠看到 iPhone 會出現有一個黑色的窗口，但窗口上卻什麼都沒有——這是由於咱們移除了主頁面腳本，尚未替換。 值得高興的是：你已經成功用 Parse 和 CocoaPods 配置好你的項目了！

##建立表視圖控制器

爲了顯示出 Paws 應用中的 Cat 圖片，咱們須要使用一個表視圖控制器。這是很是常見的 iOS 接口元件，能在垂直列表中展現各行數據。顯而易見的例子就是 iPhone 上的聯繫人應用中人和號碼的垂直列表。在 Objective-C 和 Swift 中，一個表視圖控制器自己就是 UITableViewController 類。

注：陌生的術語類？把它看成原型，也就是你在鐵鑄件時用的模具。你把鐵倒入模具，就出來一個副本。這種複製被稱做該類的一個實例。

Parse 有個很棒的對應叫 ParseUI，是 UI 元素集合，能與 Parse 產品緊密結合。咱們即將使用 PFQueryTableViewController 類。它用 Parse 數據擴展 UITableViewController 類的功能。這簡直是完美的結合。 建立一個名爲 catstableviewcontroller 的 Swift 新類。在項目瀏覽器中，右鍵單擊 Paws 目錄並選擇新文件。從「iOS→源」，選擇 Cocoa Touch 類模板。輸入如下設置：

• 類：CatsTableViewController
• 繼承：PFQueryTableViewControlle
• 語言：Swift
• 確保建立 XIB 文件處於未選中狀態

保存文件到 Paws 目錄。選擇目錄時，請確保 Paws 做爲目標被選中。

打開新類文件，能夠看到的基本結構：一個名爲 viewDidLoad；另外一個名爲 didReceiveMemoryWarning。須要注意的是，CatsTableViewController 擴展 PFQueryTableViewController，是它的子類。反過來，PFQueryTableViewController 類是 UITableViewController 的擴展，因此咱們的表視圖控制器將繼承全部表視圖功能，同時可用 ParseUI 添加代碼和功能。

##編碼表視圖控制器

首先，咱們必須重寫類的構造方法來配置基礎設置。

將如下兩種方法添加到類的頂部，在文件的第一個大括號以後：

override init(style: UITableViewStyle, className: String!)  
{
	super.init(style: style, className: className)

	self.pullToRefreshEnabled = true 
	self.paginationEnabled = false  
	self.objectsPerPage = 25

	self.parseClassName = className  
}

required init(coder aDecoder:NSCoder)  
{
	fatalError("NSCoding not supported")  
}

你剛添加了兩個方法：

• 指定初始化的 init，這須要兩個參數：表視圖的風格和咱們要使用的 Parse 類名（在這裏是 C）
• 必需的初始化，須要一個參數：NSCoder 的一個實例。如今爲止，它的內容是不相關的，堅持作下去，但不要求你創造性地使用該方法。

在最初的初始化中，完成了下列事項：

1．當 super.init（）調用時，初始化父類 PFQueryTableViewController，從而完成自身初始化。 2．接着，pullToRefreshEnabled 設置爲 true，繼承 PFQueryTableViewController 類。特殊變量 self 指當前做用域，爲該類的實例。 3．隨後，咱們禁用分頁，並設置表對象的最大數目爲25。 4．最後，在實例屬性 parseClassName 中存儲參數 className。 以後，當咱們建立 CatsTableViewController 類的實例，這個構造（或指定初始化）將是表示圖控制器被調用和設置的基礎。

用 queryForTable 編碼數據檢索

經過 PFQueryTableViewController 實現 Parse 表視圖的核心是方法 queryForTable。咱們繼承該方法時，繼承的其實是 PFQueryTableViewController，因此須要對其進行重寫：須要鏈接表視圖控制器到 Parse 數據存儲區時，PFQueryTableViewController 會調用它。它從表中查詢數據，所以該方法名爲 queryForTable。在該方法中，咱們能夠自定義檢索。 添加此方法到 CatsTableViewController 類（在 viewDidLoad 方法下）。注意這些括號匹配！

override func queryForTable() -> PFQuery {
    var query:PFQuery = PFQuery(className:self.parseClassName!)

    if(objects?.count == 0)
	{
	    query.cachePolicy = PFCachePolicy.CacheThenNetwork
    }

    query.orderByAscending("name")

    return query
}

來看看這個新方法：

override func queryForTable() -> PFQuery

其中包含了什麼？編寫新方法 queryForTable，告知編譯器如下事項：

1.用相同的名字覆蓋父類方法（識別標誌），使用語句覆蓋。 用 func 和名字聲明該方法，queryfortable。 2.聲明 methsignatureod 之間的參數。本例中沒有參數。 3.最後選擇「Write→ PFQuery」，返回方法類型。

在方法內發生了下列變化：

1．聲明一個新變量調用查詢，須要一個命名參數的類名，用於實例化構造函數的方法，被分配的 self.parseclassname 值。換句話說，表的類名是 Cat，利用 Cat 實例建立查詢。 2．而後，若是查詢是空，在查詢中設置 CachePolicy 屬性。它的值是連續的 PFCachePolicy.CacheThenNetwork，這意味着該查詢，首先在脫機緩存中尋找對象，若是沒有找到，它會從在線 Parse 數據存儲中下載對象。當表視圖終於顯示在應用界面上，這時 if 語句便成功執行。 3．而後，咱們以「名稱」列爲查詢對象。

最後，返回查詢結果。（未完待續...）

敬請持續關注：《如何用 Parse 和 Swift 搭建一個像 Instagram 那樣的應用》系列（2）（3）.

原文地址：Building an Instagram-Like App with Parse and Swift

本文系 OneAPM 工程師編譯整理。OneAPM 是應用性能管理領域的新興領軍企業，能幫助企業用戶和開發者輕鬆實現：緩慢的程序代碼和 SQL 語句的實時抓取。想閱讀更多技術文章，請訪問 OneAPM 官方博客。