用 Swift、Foursquare API 和 Realm 創建一個咖啡店 App

人們常說，程序員能將咖啡變成電腦程式。接下來，我們將編寫一個 App，列出距離你最近的咖啡屋！

在本教程中，你將使用到如下技能：

• Swift、Xcode 和 Interface Builder (自動佈局、約束和故事板)
• Realm，一個輕量級的 Core Data 封裝，用於本地數據庫。
• Foursquare，用 “Das Quadrat” 庫來訪問 Foursquare 的 REST API。
• CocoaPods 和 Geolocation

這個 App 會以你當前位置為中心，從 Foursquare 抓取以此為中心 500*500 米範圍內的地標信息。然後用一個地圖視圖（MKMapView)和表格視圖（UITableView)來顯示這些數據。并使用 Realm 來篩選數據，并在閉包中對數據進行排序。

你可以從 GitHub 上下載完整的的源代碼和 Xcode 項目：reinderdevries/CoffeeGuide

如此簡單？讓我們快快進入正題吧！

設置 Xcode 項目

首先，我們需要在 Xcode 進行一些設置。打開 Xcode，選擇 FileNewProject…

在 iOSApplication 類別下選擇 Single View Application。然後，填写這些内容：

• Product Name: Coffee
• Organization Name: 任意
• Organization Identifier: 任意，用反域名格式：com.mycompanyname
• Language: Swift
• Devices: iPhone
• 反選 Use Core Data、Include Unit Tests 以及 Incluse UI Tests

然後選擇項目存放路徑，“創建本地庫”（create a local Git repository）一項可選可不選。

接下來，需要創建一個 Podfile 文件。在項目導航窗口，在項目名稱上右鍵，選擇 New File…，如下圖所示，選擇 iOSOther 下的 Empty 模板。

將文件命名為 Podfile（沒有擴展名），然后將它保存在 .xcodeproj 文件的同一目錄下。最後，確認一下 Tagets 列表下 Coffee 前面的選擇框已被正確勾選。

然後，在 Podfile 文件中輸入以下內容：

source 'https://github.com/CocoaPods/Specs.git'
platform :ios,'8.0'
use_frameworks!

pod 'QuadratTouch','>= 1.0'
pod 'RealmSwift'

在本項目中，我們要用到兩個外部庫：Realm 和一個用於 Foursquare REST API 的 Swift 庫 Das Quadrat。

然後，關閉項目，關閉 Xcode。打開 OS X 的終端窗口，將目錄切換到你的項目目錄。如果你不知道怎麼做，請遵循如下步驟：

1. 打開終端程式
2. 輸入 cd (c、d、空格)
3. 打開 Finder
4. 在 Finder 中找到你的項目目錄，但不要進到目錄裡面
5. 從 Finder 窗口中將項目目錄拖拽到終端窗口
6. 項目的絕對路徑將自動填寫到 cd 命令之後
7. 敲回車
8. 這樣你就將當前工作目錄切換到項目目錄下了

然後在終端窗口中輸入:

pod install

命令的執行大約要個幾分鐘時間，同時屏幕上將有大量信息滾動顯示。Cocoapods 將為你的項目安裝所需的庫。同時將你的項目轉換為工作空間（由多個項目組成）。

然後，在 Finder 中找到新生成的 .xcworkspace 文件并打開它。這個文件就位於你的項目的根目錄下。

注意：當你在 Xcode 中打開這個工作空間時，你的項目很可能是處於折叠狀態。你可以將項目文件恢復到原來的打開狀態 ── 關閉工作空間，然後再打開工作空間。這會導致項目文件不再是折叠狀態。

這就是你需要為本 App 的 Xcode 項目所進行的所有設置。如果一切順利，你應該擁有了一個包含了兩個項目的工作空間。其中 Pods 項目包含了 Realm 和 Das Quadrat 庫的代碼。

用故事板創建 UI

Coffee 的 UI 非常簡單。它只有兩個 UI 元素：一個地圖視圖和一個表格視圖。

Xcode 已經為我們做了大量的工作。Single View Application 模板包含了一個故事板文件 Main.storyboard，它是 App 的入口。

要創建地圖視圖，需要：

1. 打開 Main.storyboard
2. 在 Xcode 右下角的 Object Library 窗口中，找到 Map Kit View (MKMapKitView)
3. 將它拖到故事板編輯器中，并放到 View Controller 的左上角。讓它的高度大致等於 View Controller 的一半，寬度則完全佔滿。
4. 在 Object Library 窗口中找到 Table View (UITableView) 并將它拖到故事板編輯器的 View Controller 上。讓它的寬度完全佔滿，高度則佔據 View Controller 的下半部。

接著為這兩個 View 設置自動佈局約束。首先，選中地圖視圖，點擊故事板編輯器右下角的 Pin 按鈕，這個按鈕位於右邊第二個位置，形如星戰中鈦式戰機 …

然後會彈出一個小窗口，接下來你需要做：

1. 反選“Constrain to margins”。
2. 點擊左、上、右三個 I 形線，讓它們依次變成紅色。
3. 每個 I 形線旁邊都有一個輸入框，將它們分別設置為 0。
4. 點擊“Add 3 constraints”

接下來，在表格視圖上重複同樣的動作。但是將上面的 I 形線替換成下面的 I 形線（同時還有左和右）。同樣地，反選“Constrain to margins”選項，然後點擊“Add 3 constraints”按鈕。

我們讓兩個 View 分別相對於上對齊和下對齊，寬度都是父 View 的百分之百。還有一件事情，就是讓兩個 View 的垂直高度都等於整個屏幕高度的 50%。

我們可以用多個約束來實現這點，但這是最簡單的：

1. 選中地圖視圖和表格視圖（按住 Command 鍵，然後分別點擊這兩個 View）。
2. 點擊 Pin 按鈕。
3. 勾選 Equal Heights 選項。
4. 點擊“Add 1 constraint”。

現在 Xcode 可能會報錯說“有佈局衝突”。別擔心，我們會來修復它。

1. 點擊地圖視圖，然後點擊 Pin 按鈕。
2. 反選 “Constrain to margins” 選項，然後點擊下面的 I 形線，將它的值修改為 0。
3. 點擊“Add 1 constraint”。

現在紅線消失了，IB 又開始顯示黃線。這表示有部份約束當前顯示不正確。所有的約束都是對的，僅僅是 IB 在顯示上不正確。

要解決這個問題，點擊黃色的帶圈的箭頭，這個圖標位於故事板編輯器 Document Outline 窗口的右上角。

點擊這個圖標后，會顯示一個新的界面。點擊黃色的三角，然後點 Update frames，再點擊 Fix misplacement。在每個黃色的三角上重複同樣步驟。當然，Update frames 的辦法并不是每次都有效，因此確保你的約束都創建正確，再讓你的 frame 也正確。

不幸的是，佈局約束經常會出現大量錯誤。如果你搞錯了某些事情，你可以從 Document Outline 窗口中將約束刪除，然後重建。

編譯 App 并修復錯誤

讓我們來咝幸幌

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!