Parse 和 Swift 搭建一個像 Instagram

標籤：

【編者按】本篇文章作者是Reinder de Vries，既是一名企業家，也是優秀的程式員，發表多篇應用程式的部落格。本篇文章中，作者主要介紹了如何基於Parse特點，打造一款類似Instagram的應用，完整而清晰的步驟，為開發人員提供一次絕佳的學習體驗。本文系 OneAPM 工程師編譯整理。

Parse 是一個行動裝置 App開發平台，旗下有個很有意思的產品：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 = 25self.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官方技術部落格。

  標籤: parse

Parse 和 Swift 搭建一個像 Instagram