BluemixでバックエンドAPIを用意してiOSから呼び出す

前回はBluemixの初期設定などを行いました。
今回は前回モバイルアプリを用意した時にサンプルとして自動でできたTODOのWebアプリケーションのAPIをiOSで呼び出すためにiOS側の実装をメインに行っていきたいと思います。

Web側のAPIの確認

実はサンプルには既にAPIが自動で作られていてAPIの一覧は以下のように確認できます。

↓

Nodejsをやられている方はご存知のフレームワークかと思いますが、アプリ作成時にLoopbackが自動で使われるようです。これがAPIをうまい具合に用意してくれるようですね。

Loopbackに関してはこちらの記事もご参照してみてください。

iOS側実装

今回、iOS側の実装は以下のような流れで進めていきます。
1. 非同期通信する用にAlamofireを導入する
2. TODOの表示できるiOSアプリを作る
3. 動作の確認
※TODOデータのiOS側からの登録、変更、削除は次回以降に回します。

Almofireを導入

既にXcodeプロジェクト作成までしてあるという前提で進めていきます。

まずxcodeプロジェクトにcocoapodsを導入します。
プロジェクトのディレクトリまで行って

% pod --version
0.39.0
% pod init
% vi Podfile

それで以下のようにPodfileを編集してください。

# Uncomment this line to define a global platform for your project
# platform :ios, '6.0'

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

  pod 'Alamofire', '~> 3.0'

end

そしたらpod installします

% pod install
Updating local specs repositories

CocoaPods 1.0.0.beta.4 is available.
To update use: `sudo gem install cocoapods --pre`
[!] This is a test version we'd love you to try.

For more information see http://blog.cocoapods.org
and the CHANGELOG for this version http://git.io/BaH8pQ.

Analyzing dependencies
Downloading dependencies
Installing Alamofire (3.2.0)
Generating Pods project
Integrating client project

[!] Please close any current Xcode sessions and use `continuance.xcworkspace` for this project from now on.
Sending stats
Pod installation complete! There is 1 dependency from the Podfile and 1 total pod installed.

これでAlamofireの導入完了です。
Alamofireはswiftで書かれているので、BridgingHeaderを用意したり追記する必要はありません。

<プロジェクト名>.xcworkspaceからプロジェクトを開く事を忘れずに。。。

iOS側のTODOアプリを実装

こちらのソースもGithubにあげておきますので参考頂きながら進めて頂ければと思います。

TODOの表示

必要クラスなどの用意

シンプルにViewContorllerとUITableViewをストーリーボード上に追加、そしてToDoViewController.swiftを用意しました。

必要（便利）なcocoapodsライブラリを用意

JSONデータも扱うのでSwiftyJSONも入れときます。
参考：https://github.com/pdutourgeerling/Alamofire-SwiftyJSON-Podspec/blob/master/README.md

target 'continuance' do

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

  pod 'SwiftyJSON', :git => 'https://github.com/SwiftyJSON/SwiftyJSON.git'
  pod 'Alamofire', '~> 3.0'
  pod 'Alamofire-SwiftyJSON', :podspec => 'https://raw.githubusercontent.com/pdutourgeerling/Alamofire-SwiftyJSON-Podspec/master/Alamofire3-SwiftyJSON.podspec'

end

TODO一覧を取得して表示する

ViewControllerの実装

ToDoViewController.swift

import UIKit
import Alamofire
import SwiftyJSON
import Alamofire_SwiftyJSON

class ToDoViewController: UIViewController {

  @IBOutlet weak var tableView: UITableView!
  var toDoList:Array<Task>?
  
  override func viewDidLoad() {
    super.viewDidLoad()
    
    tableView.delegate = self
    tableView.dataSource = self
    
    tableView.tableHeaderView?.hidden = true
    
    toDoList = Array()
    
    Alamofire.request(.GET, "http://kwnpanda-app.au-syd.mybluemix.net/api/Items"
      , parameters: nil
      , encoding:.JSON).responseSwiftyJSON({(request, response, json, error) in
        for var i = 0; i < json.count; i++ {
          let todo = json[i]
        
          let task = Task(id: todo["id"].int!
            , text: todo["text"].string!
            , isDone: todo["isDone"].bool!)
          self.toDoList?.append(task)
        }
        
        self.tableView.reloadSections(NSIndexSet(index: 0), withRowAnimation:UITableViewRowAnimation.Fade)
        
      })
  }

  override func didReceiveMemoryWarning() {
    
    super.didReceiveMemoryWarning()
    
  }
}

extension ToDoViewController: UITableViewDelegate,UITableViewDataSource {
  
  func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    
    let cell = UITableViewCell(style: .Default, reuseIdentifier: "TaskCell")
    if let _ = toDoList {
      
      cell.textLabel?.text = toDoList![indexPath.row].text
      
    }
      
    return cell
    
  }
  
  func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    
    if let _ = toDoList {
      
      return toDoList!.count
      
    } else {
      
      return 0
      
    }
    
  }
  
}

modelも追加しています。

Task.swift

import UIKit

class Task: NSObject {
  
  var id: Int
  var text: String
  var isDone: Bool
  
  init(id:Int, text:String, isDone:Bool) {
    
    self.id = id
    self.text = text
    self.isDone = isDone
    
  }
  
}

ここまでやったらWeb側で適当にTODOを追加してみましょう。

そしたら次にiOS側を実行してみましょう。

ここまでで表示部分は完成です。

まとめ

今回はTODOの表示までを行いました。
次回は、一気に登録、編集、削除までやりたいと思います。

Github
cocoapodsライブラリも全部あげているのでcocoapodsが入っていなくても動くと思います。