【編者按】本篇文章作者是Reinder de Vries，既是一名企業(yè)家，也是優(yōu)秀的程序員，發(fā)表多篇應(yīng)用程序的博客。本篇文章中，作者主要介紹了如何基于Parse特點(diǎn)，打造一款類似Instagram的應(yīng)用，完整而清晰的步驟，為開(kāi)發(fā)者提供一次絕佳的學(xué)習(xí)體驗(yàn)。本文系 OneAPM 工程師編譯整理。

Parse 是一個(gè)移動(dòng)應(yīng)用開(kāi)發(fā)平臺(tái)，旗下有個(gè)很有意思的產(chǎn)品：Parse Core。它的特色之一是允許應(yīng)用開(kāi)發(fā)者直接將數(shù)據(jù)存儲(chǔ)在云端，而無(wú)需擔(dān)心設(shè)置服務(wù)器或重新設(shè)計(jì)一個(gè) REST API。Parse Core 是本地備份（比如核心數(shù)據(jù)），這使得它能輕松解決線上線下等后端問(wèn)題。

如何用 Parse 和 Swift 搭建一個(gè)像 Instagram 那樣的應(yīng)用？

本篇教程主要介紹如何創(chuàng)建一個(gè)基于 Parse 的應(yīng)用。我們將打造一個(gè)類似 Instagram 的應(yīng)用，它包括以下特征：

1. 從 Parse 加載數(shù)據(jù)，存儲(chǔ)在本地；
2. 保存數(shù)據(jù)到 Parse，并寫(xiě)回云端；
3. 為 Cat 的圖片點(diǎn)贊。

這款應(yīng)用將完全使用 Swift 語(yǔ)言開(kāi)發(fā)，Swift 是蘋(píng)果最新的編程語(yǔ)言，用于打造 iOS 應(yīng)用。Parse 并不用完全重寫(xiě) Swift，所以我們需要?jiǎng)?chuàng)建一個(gè)橋接頭來(lái)處理它倆的兼容性。

通過(guò)這篇文章你將學(xué)到以下技能：

• 用 Parse 實(shí)現(xiàn)檢索，存儲(chǔ)數(shù)據(jù)到云端；
• Cocoapods 整合一個(gè)調(diào)用 Objective-C 框架的 Swfit 程序；
• 建立視圖和有接口的自定義表視圖單元；
• 從零開(kāi)始，用 Swift 編寫(xiě)一個(gè)完整的 App；
• 使用自動(dòng)布局和約束；
• 使用手勢(shì)識(shí)別、可選類型、條件、閉包、屬性、出口和動(dòng)作。

那開(kāi)始吧！

首先，你得有一個(gè) Parse 帳戶。這可以通過(guò)你的 Facebook、Google+、GitHub 帳號(hào)或郵件在 Parse.com 注冊(cè)。
然后，登錄 Parse，通過(guò) https://www.parse.com/apps 可以到你的 apps Dashboard。

通過(guò)點(diǎn)擊「創(chuàng)建新應(yīng)用」 按鈕，創(chuàng)建一個(gè)新的應(yīng)用程序，輸入「Paws」作為應(yīng)用名。接著，打開(kāi)新應(yīng)用，確保你能看到下圖的的核心選項(xiàng)卡。

如何用 Parse 和 Swift 搭建一個(gè)像 Instagram 那樣的應(yīng)用？

創(chuàng)建數(shù)據(jù)存儲(chǔ)區(qū)

從技術(shù)上說(shuō)，Parse 只是在線數(shù)據(jù)庫(kù)。數(shù)據(jù)被存儲(chǔ)為具有一個(gè)名稱和多個(gè)字段的對(duì)象，如電子表格。這樣的對(duì)象被稱為一個(gè)類，它的功能是數(shù)據(jù)結(jié)構(gòu)的藍(lán)圖。我們將要使用的類名為 Cat。

在核心選項(xiàng)卡單擊該按鈕添加一個(gè)類。在下拉框中選擇自定義，然后鍵入類的名稱：Cat。然后，單擊創(chuàng)建類。

Imgur

這樣，我們就創(chuàng)建了新的類，接著我們還可以添加一系列的標(biāo)準(zhǔn)字段，如 ObjectId、createdAt、updatedat和ACL。

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

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

這些字段將為 Cat 數(shù)據(jù)庫(kù)提供基本信息。

導(dǎo)入數(shù)據(jù)

現(xiàn)在我們已經(jīng)設(shè)置好基礎(chǔ)結(jié)構(gòu)，可以導(dǎo)入數(shù)據(jù)了！將該文件保存到：cat.json。
然后，回到核心選項(xiàng)卡和數(shù)據(jù)庫(kù)，左鍵點(diǎn)擊「導(dǎo)入」按鈕。選中你剛保存的文件并上傳。確保類別集是「自定義」 ，并重命名為 Cat（而不是rs1_cat）。再單擊「完成導(dǎo)入」。如果導(dǎo)入是完整的，Parse 會(huì)及時(shí)提示。點(diǎn)擊「Got it」并重新加載頁(yè)面。
如果一切順利，你現(xiàn)在應(yīng)該能看到數(shù)據(jù)庫(kù)中有10個(gè) Cat。它們都有一個(gè)名字、一個(gè) URL、一些得票數(shù)和一些為原則這預(yù)留的空間。

如何用 Parse 和 Swift 搭建一個(gè)像 Instagram 那樣的應(yīng)用？

至此，我們?cè)?Parse 中的全部工作已經(jīng)完成。下面開(kāi)始構(gòu)建 Swift Xcode 程序。

構(gòu)建 Xcode

打開(kāi) Xcode 并創(chuàng)建一個(gè)新項(xiàng)目，從開(kāi)始界面選擇「菜單→新建→工程」。
選擇類別「iOS→應(yīng)用模板」的單一視圖的應(yīng)用。在下一屏上輸入以下字段：

• 產(chǎn)品名稱：Paws
• 結(jié)構(gòu)名稱：隨意
• 結(jié)構(gòu)標(biāo)識(shí)符：隨意，比如com.appcoda
• 語(yǔ)言：Swift
• 設(shè)備：通用

單擊「下一步」 ，選擇工程目錄文件夾，再單擊「創(chuàng)建」 。

我們不打算使用 Storyboards，所以單擊左上的 Paws、2 targets、 iOS SDK，打開(kāi)工程設(shè)置。在左側(cè)的列表中單擊 Target 下方的 Paws，然后找到屏幕中主區(qū)域的主界面設(shè)置。將 textMain 從框中移除。

如何用 Parse 和 Swift 搭建一個(gè)像 Instagram 那樣的應(yīng)用？

用 Cocoapods 將 Parse 庫(kù)添加到 Xcode 項(xiàng)目

在程序代碼中使用 Parse 之前，我們必須將其添加依賴關(guān)系。因此我們選擇 Cocoapods，它是一個(gè)軟件包管理器。許多應(yīng)用項(xiàng)目依賴于第三方庫(kù)，比如 Parse。CocoaPods 是方便加載庫(kù)的工具，并確保其實(shí)時(shí)更新。
在終端執(zhí)行以下命令安裝 Cocoapods。它會(huì)要求你輸入你的 Mac 用戶密碼。但不允許包含「$」符號(hào)。這標(biāo)志意味著 shell 命令！

$ sudo gem install cocoapods

中途如果一兩分鐘沒(méi)有進(jìn)展也無(wú)需擔(dān)心，那是因?yàn)?Cocoapods 正在安裝中。安裝完成后你可以看到一堆線條，最終...安裝完成。

如何用 Parse 和 Swift 搭建一個(gè)像 Instagram 那樣的應(yīng)用？

接下來(lái)，在 Xcode 項(xiàng)目的根目錄下創(chuàng)建一個(gè)空文件，并調(diào)用 Podfile 文件。用你喜歡的文本編輯器打開(kāi)，并粘貼下面代碼到該文件：

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

Podfile 會(huì)告知 Cocoapods 哪些庫(kù)是我們需要的。這樣的話，Parse 的版本是1.7.1，而ParseUI版本是1.1.3。
現(xiàn)在，關(guān)閉 Xcode，并使用終端找到程序項(xiàng)目的根目錄。寫(xiě)入終端 cd，然后在 Paws 目錄中查找，并將其拖至終端。

接下來(lái)，在命令行輸入以下代碼：

$ pod install

CocoaPods 會(huì)查找 Podfile，并嘗試安裝我們?cè)O(shè)置的依賴關(guān)系。這個(gè)步驟大概會(huì)花上幾分鐘。結(jié)果應(yīng)該是這樣：

如何用 Parse 和 Swift 搭建一個(gè)像 Instagram 那樣的應(yīng)用？

CocoaPods 已經(jīng)下載并編譯 Parse，并把它添加到一個(gè)新的工作區(qū)。從現(xiàn)在開(kāi)始，我們不再使用原來(lái)的應(yīng)用項(xiàng)目，而會(huì)使用 CocoaPods 創(chuàng)建的工作區(qū)。它包含了我們的原始項(xiàng)目和 CocoaPods 項(xiàng)目。

這里要注意的是：通過(guò)搜索瀏覽找到程序的根目錄，打開(kāi) Xcode 中的新工作區(qū)，再打開(kāi)其中的 Paws.xcworkspace。驗(yàn)證下左側(cè)的導(dǎo)航項(xiàng)目，會(huì)看到：Pods 和 Paws。

在我們直接編寫(xiě)應(yīng)用前，需要建立 Parse 和項(xiàng)目之間的連接。Parse 是用 Objective-C 搭建的，而我們的項(xiàng)目則是用 Swift 語(yǔ)言，兩者之間需要適當(dāng)?shù)脑O(shè)置才能兼容。

在 Swift 項(xiàng)目中使用 Objective-C

任何 Objective-C 庫(kù)、項(xiàng)目或類都可以通過(guò)設(shè)置橋接頭才能與 Swift 兼容。從技術(shù)上講，這樣的橋接將 Objective-C 的頭文件轉(zhuǎn)換成 Swift 語(yǔ)言。

創(chuàng)建一個(gè)橋接頭需要執(zhí)行以下操作：

1．在 Paws 目錄添加一個(gè)新文件，選擇 Paws 工程下的 Paws 目錄，單擊右鍵，然后單擊「新建文件」。
2．從「iOS→源」類別中選擇Objective-C文件模板并單擊「下一步」。
3．將類命名為「Paws」（或其它你喜歡的名字），然后繼續(xù)進(jìn)行并保存文件。出現(xiàn)提示時(shí)，單擊「是」來(lái)配置 Objective-C 橋接頭。

如何用 Parse 和 Swift 搭建一個(gè)像 Instagram 那樣的應(yīng)用？

Xcode 創(chuàng)建兩個(gè)新文件：Paws.m 和 Paws-Bridging-Header.h。Paws.m 文件沒(méi)什么用，你可以直接將它刪除。在 Paws-Bridging-Header.h 文件中寫(xiě)入以下代碼：

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

看到這里，你不禁會(huì)問(wèn)難道這一大堆工作只是為了建立一個(gè)編程項(xiàng)目么？別擔(dān)心，我們接下來(lái)就來(lái)搞點(diǎn)有趣的。請(qǐng)記?。篜arse 提供一個(gè)現(xiàn)成的在線后端，能節(jié)省大量時(shí)間！

驗(yàn)證 Parse 是如何工作的

通過(guò) https://parse.com/apps，返回 Parse 的 Dashboard。將鼠標(biāo)懸停在你帳戶名的右上角，單擊帳戶，再單擊應(yīng)用鍵標(biāo)簽最上面一欄。你還可以直接訪問(wèn) https://parse.com/account/keys。
確定應(yīng)用的 Parse 網(wǎng)絡(luò)服務(wù)后，該頁(yè)面將顯示你的應(yīng)用鍵。應(yīng)用鍵由一串字母數(shù)字或字符組成，基本上這就是應(yīng)用的密碼，要注意保密。
接下來(lái)，在 Xcode 中打開(kāi)文件 AppDelegate.swift。找到應(yīng)用程序的 didFinishLaunchingWithOptions 方法。
添加以下代碼到方法中，確保它在該方法的首行。完整的是這樣：

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

return true  
}

用 Parse 的應(yīng)用鍵分別替換「...」

1. 第一個(gè)，應(yīng)用 ID
2. 第二個(gè)，客戶端密鑰

之后，嘗試運(yùn)行應(yīng)用程序：

1．確保選擇正確的設(shè)備，通過(guò)確認(rèn)PLAY按鈕的右上方，確保設(shè)備選擇，比如 iPhone 或 iPhone6。
2．然后，點(diǎn)擊Play按鈕或按下 Command-R 運(yùn)行程序。

項(xiàng)目在構(gòu)造、運(yùn)行過(guò)程中沒(méi)有錯(cuò)誤。一旦運(yùn)行，你可以看到 iPhone 會(huì)出現(xiàn)有一個(gè)黑色的窗口，但窗口上卻什么都沒(méi)有——這是因?yàn)槲覀円瞥酥黜?yè)面腳本，還沒(méi)有替換。
值得高興的是：你已經(jīng)成功用 Parse 和 CocoaPods 配置好你的項(xiàng)目了！

創(chuàng)建表視圖控制器

為了顯示出 Paws 應(yīng)用中的 Cat 圖片，我們需要使用一個(gè)表視圖控制器。這是非常常見(jiàn)的 iOS 接口元件，能在垂直列表中展示各行數(shù)據(jù)。顯而易見(jiàn)的例子就是 iPhone 上的聯(lián)系人應(yīng)用中人和號(hào)碼的垂直列表。在 Objective-C 和 Swift 中，一個(gè)表視圖控制器本身就是 UITableViewController 類。

注：陌生的術(shù)語(yǔ)類？把它當(dāng)作原型，也就是你在鐵鑄件時(shí)用的模具。你把鐵倒入模具，就出來(lái)一個(gè)副本。這種復(fù)制被稱作該類的一個(gè)實(shí)例。

Parse 有個(gè)很棒的對(duì)應(yīng)叫 ParseUI，是 UI 元素集合，能與 Parse 產(chǎn)品緊密結(jié)合。我們即將使用 PFQueryTableViewController 類。它用 Parse 數(shù)據(jù)擴(kuò)展 UITableViewController 類的功能。這簡(jiǎn)直是完美的結(jié)合。
創(chuàng)建一個(gè)名為 catstableviewcontroller 的 Swift 新類。在項(xiàng)目瀏覽器中，右鍵單擊 Paws 目錄并選擇新文件。從「iOS→源」，選擇 Cocoa Touch 類模板。輸入以下設(shè)置：

• 類：CatsTableViewController
• 繼承：PFQueryTableViewControlle
• 語(yǔ)言：Swift
• 確保創(chuàng)建 XIB 文件處于未選中狀態(tài)

如何用 Parse 和 Swift 搭建一個(gè)像 Instagram 那樣的應(yīng)用？

保存文件到 Paws 目錄。選擇目錄時(shí)，請(qǐng)確保 Paws 作為目標(biāo)被選中。

打開(kāi)新類文件，可以看到的基本結(jié)構(gòu)：一個(gè)名為 viewDidLoad；另一個(gè)名為 didReceiveMemoryWarning。需要注意的是，CatsTableViewController 擴(kuò)展 PFQueryTableViewController，是它的子類。反過(guò)來(lái)，PFQueryTableViewController 類是 UITableViewController 的擴(kuò)展，所以我們的表視圖控制器將繼承所有表視圖功能，同時(shí)可用 ParseUI 添加代碼和功能。

編碼表視圖控制器

首先，我們必須重寫(xiě)類的構(gòu)造方法來(lái)配置基礎(chǔ)設(shè)置。

將以下兩種方法添加到類的頂部，在文件的第一個(gè)大括號(hào)之后：

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")  
}

你剛添加了兩個(gè)方法：

• 指定初始化的 init，這需要兩個(gè)參數(shù)：表視圖的風(fēng)格和我們要使用的 Parse 類名（在這里是 C）
• 必需的初始化，需要一個(gè)參數(shù)：NSCoder 的一個(gè)實(shí)例?，F(xiàn)在為止，它的內(nèi)容是不相關(guān)的，堅(jiān)持做下去，但不要求你創(chuàng)造性地使用該方法。

在最初的初始化中，完成了下列事項(xiàng)：

1．當(dāng) super.init（）調(diào)用時(shí)，初始化父類 PFQueryTableViewController，從而完成自身初始化。
2．接著，pullToRefreshEnabled 設(shè)置為 true，繼承 PFQueryTableViewController 類。特殊變量 self 指當(dāng)前作用域，為該類的實(shí)例。
3．隨后，我們禁用分頁(yè)，并設(shè)置表對(duì)象的最大數(shù)目為25。
4．最后，在實(shí)例屬性 parseClassName 中存儲(chǔ)參數(shù) className。
之后，當(dāng)我們創(chuàng)建 CatsTableViewController 類的實(shí)例，這個(gè)構(gòu)造（或指定初始化）將是表示圖控制器被調(diào)用和設(shè)置的基礎(chǔ)。

用 queryForTable 編碼數(shù)據(jù)檢索

通過(guò) PFQueryTableViewController 實(shí)現(xiàn) Parse 表視圖的核心是方法 queryForTable。我們繼承該方法時(shí)，繼承的實(shí)際上是 PFQueryTableViewController，所以需要對(duì)其進(jìn)行重寫(xiě)：需要連接表視圖控制器到 Parse 數(shù)據(jù)存儲(chǔ)區(qū)時(shí)，PFQueryTableViewController 會(huì)調(diào)用它。它從表中查詢數(shù)據(jù)，因此該方法名為 queryForTable。在該方法中，我們可以自定義檢索。
添加此方法到 CatsTableViewController 類（在 viewDidLoad 方法下）。注意這些括號(hào)匹配！

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

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

    query.orderByAscending("name")

    return query
}

來(lái)看看這個(gè)新方法：

override func queryForTable() -> PFQuery

其中包含了什么？編寫(xiě)新方法 queryForTable，告知編譯器以下事項(xiàng)：

1.用相同的名字覆蓋父類方法（識(shí)別標(biāo)志），使用語(yǔ)句覆蓋。
用 func 和名字聲明該方法，queryfortable。
2.聲明 methsignatureod 之間的參數(shù)。本例中沒(méi)有參數(shù)。
3.最后選擇「Write→ PFQuery」，返回方法類型。

在方法內(nèi)發(fā)生了下列變化：

1．聲明一個(gè)新變量調(diào)用查詢，需要一個(gè)命名參數(shù)的類名，用于實(shí)例化構(gòu)造函數(shù)的方法，被分配的 self.parseclassname 值。換句話說(shuō)，表的類名是 Cat，利用 Cat 實(shí)例創(chuàng)建查詢。
2．然后，如果查詢是空，在查詢中設(shè)置 CachePolicy 屬性。它的值是連續(xù)的 PFCachePolicy.CacheThenNetwork，這意味著該查詢，首先在脫機(jī)緩存中尋找對(duì)象，如果沒(méi)有找到，它會(huì)從在線 Parse 數(shù)據(jù)存儲(chǔ)中下載對(duì)象。當(dāng)表視圖終于顯示在應(yīng)用界面上，這時(shí) if 語(yǔ)句便成功執(zhí)行。
3．然后，我們以「名稱」列為查詢對(duì)象。

最后，返回查詢結(jié)果。（未完待續(xù)...）

敬請(qǐng)持續(xù)關(guān)注：《如何用 Parse 和 Swift 搭建一個(gè)像 Instagram 那樣的應(yīng)用》系列（2）（3）.

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

本文系 OneAPM 工程師編譯整理。OneAPM 是應(yīng)用性能管理領(lǐng)域的新興領(lǐng)軍企業(yè)，能幫助企業(yè)用戶和開(kāi)發(fā)者輕松實(shí)現(xiàn)：緩慢的程序代碼和 SQL 語(yǔ)句的實(shí)時(shí)抓取。想閱讀更多技術(shù)文章，請(qǐng)?jiān)L問(wèn) OneAPM 官方博客。