將原本用 Android 開發的 ThingMaker 改寫成 Swift 版本，並試著實作一個 MVC 架構

1. ThingMaker in Swift
Allan Shih

2. Agenda
● XCode IDE
● ThingMaker: Category List UI
● Model-View-Controller (MVC) Structure
● Make a Server Request
● Demo
● Todo List
● Reference

3. XCode IDE

4. Editor

5. Assistant Editor View

6. Interface Builder View

7. Autolayout Constraints

8. Autolayout Misplaced View

9. Connect outlets to ViewController

10. Connect actions to ViewController

11. ThingMaker Category List UI

12. Category List Storyboard

13. Model-View-Controller (MVC) Structure

14. Project structure
● CodeData
● Helpers
● Service
● Extensions
● Views
● Models
● Controllers

15. Model
public struct CategoryList {
public var filterGroups : Array<FilterGroups>?
public var filterKey : String?
public var appStoreAPIVersion : Double?
public var status : Int?
public init() {}
/**
Constructs the object based on the given dictionary.
- parameter dictionary: NSDictionary from JSON.
- returns: CategoryList Instance.
*/
public init?(dictionary: NSDictionary) {
if (dictionary["filterGroups"] != nil) {
filterGroups = FilterGroups.modelsFromDictionaryArray(array: dictionary["filterGroups"] as! NSArray)
}
filterKey = dictionary["filterKey"] as? String
appStoreAPIVersion = dictionary["appStoreAPIVersion"] as? Double
status = dictionary["status"] as? Int
}
}

16. View
import UIKit
class CategoryCollectionViewCell: UICollectionViewCell
{
@IBOutlet weak var categoryImage: UIImageView!
@IBOutlet weak var categoryLabel: UILabel!
}

17. ViewController
class CategoryListViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {
@IBOutlet weak var categoryListCollectionView: UICollectionView!
private var filterGroups = [FilterGroups]()
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
self.categoryListCollectionView.delegate = self
self.categoryListCollectionView.dataSource = self
CategoryList.fetchCategoryList(completion: { [weak self] filterGroups in
guard let groups = filterGroups, !groups.isEmpty else {
print("group is empy")
return
}
self?.updateData(filterGroups: groups)
})
}
}

18. Making a Server Request
public static func fetchCategoryList(completion: @escaping ([FilterGroups]?) -> Void) {
let headers: HTTPHeaders = [
"APIKey": "3a484891-98f5-40c7-89ce-2a849aad8d14",
"Accept": "application/json"
]
Alamofire.request("http://stg-stable2.fuhu.org/appstore/v2/filter/TK", headers: headers)
.validate(statusCode: 200..<300)
.validate(contentType: ["application/json"])
.responseJSON { response in
guard response.result.isSuccess else {
print("Error while fetching category list: (response.result.error)")
return
}
guard let json = response.result.value as? NSDictionary else {
print("Response couldn't convert to NSDictionary.")
return
}
print("Success with json: (json)")
guard let filterGroups = CategoryList(dictionary: json)?.filterGroups, !filterGroups.isEmpty else {
print("No FilterGroups.")
return
}
completion(filterGroups)
}

19. Return result to Completion handler
class CategoryListViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {
@IBOutlet weak var categoryListCollectionView: UICollectionView!
private var filterGroups = [FilterGroups]()
override func viewDidLoad() {
...
CategoryList.fetchCategoryList(completion: { [weak self] filterGroups in
guard let groups = filterGroups, !groups.isEmpty else {
print("group is empy")
return
}
self?.updateData(filterGroups: groups)
})
}
func updateData(filterGroups: [FilterGroups]) {
self.filterGroups = filterGroups
self.categoryListCollectionView.reloadData()
}
...
}

20. Update UI - Label
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) ->
UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CategoryCell", for:
indexPath) as! CategoryCollectionViewCell
guard let filterGroup = filterGroups[safe: indexPath.row]
else {
print("no filter group")
return cell
}
// set labels
guard let categoryLabel = filterGroup.filterGroupName else {
print("no category label")
return cell
}
cell.categoryLabel.text = categoryLabel
...
}

21. Update UI - Image
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) ->
UICollectionViewCell {
...
// set images
guard let imageUrl = filterGroup.filterGroupImage?.imageUrl,
let url = URL(string: imageUrl) else {
print("Can't convert image url to URL.")
return cell
}
print("imageUrl: (imageUrl)")
cell.categoryImage.kf.setImage(with: url,
placeholder: nil,
options: [.transition(.fade(1))],
progressBlock: nil,
completionHandler: nil)
return cell
}

22. Demo

23. Todo List
● HttpDataController
● Core Data (data cache)
● Cocoa Touch Framework
● MVVM: Model-View-ViewModel

24. Reference
● The Swift Programming Language (Swift 3.0.1)
● Developing iOS 9 Apps with Swift
● Alamofire is an HTTP networking library written in Swift.
● KingFisher is a lightweight, pure-Swift library for downloading and caching
images from the web.