COIMOTION

摘要• App Demo• 列表呈現– 取得地理位置– 以 API 取得內容– NavigationController– 顯示更多資訊

• 地圖呈現• 註冊 / 登入

App Demo

App Demo

App Demo

列表呈現• 新增 TableViewController– File->new->Objective-C class– Name of class: myTableViewController– Subclass: UITableViewController– create

列表呈現• MyTableViewController.h

– 指定 delegate 與 datasource• @interface MyTableViewController : UITableViewController

<UITableViewDataSource, UITableViewDelegate>

• MyTableViewController.m– - (NSInteger)numberOfSectionsInTableView:(UITableView

*)tableView– - (NSInteger)tableView:(UITableView *)tableView

numberOfRowsInSection:(NSInteger)section– - (UITableViewCell *)tableView:(UITableView *)tableView

cellForRowAtIndexPath:(NSIndexPath *)indexPath– - (void)tableView:(UITableView *)tableView willDisplayCell:

(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath

列表呈現• 在 MyTableViewController 中宣告

dataArry 來存放要顯示的內容– .h

• @property (strong, nonatomic) NSArray *dataArray;

– .m• @synthesize dataArray;• 在 ViewDidLoad 中初始化

– dataArray = [[NSArray alloc] initWithObjects:@"Row 1", @"Row 2", @"Row 3", nil];

列表呈現• - (NSInteger)numberOfSectionsInTableView:(UITableView

*)tableView– 回傳 table 有幾個 section

• - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section– 回傳每個 section 有幾個 row

• - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath– 回傳每個 cell 長什麼樣子

• - (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath– 指定 cell 的內容

取得地理位置• MyTableViewController.h–#import <CoreLocation/CoreLocation.h>–@interface MyTableViewController :

UITableViewController <UITableViewDataSource, UITableViewDelegate, CLLocationManagerDelegate>

–@property (strong, nonatomic) CLLocationManager *locationManager;

取得地理位置• MyTableViewController.m– - (void)locationManager:

(CLLocationManager *)manager didUpdateLocations:(NSArray *)locations• 取得地理位置時執行的 function• locations 為取得的位置列表• 為避免浪費電，要停止 locationManager 的更新

引用內容集• 註冊並登入 COIMOTION 網站• 建立 APP• 進入內容寶庫• 選擇要用的 APP• 引用”飲料店資訊” ( 代碼 : drinks)

以 API 取得內容• URL– http://api.coimotion.com/{app 代碼 }/

drinks/shops/gsearch

• 參數– lat: 緯度 (ex. 22.622757)– lng: 經度 (ex. 120.270083)

以 API 取得內容• GET resource– http://api.coimotion.com/demoApp/drink

s/shops/gsearch?lat=22.622757&lng=120.270083

• 與 App 結合– API 需要傳送目前的經緯度做為參數– 所以要在 didUpdateLocations 後才能呼叫

API

以 API 取得內容• 建立 function: - (void)drinkShopsSearchAtLat:

(float) latitude Lng:(float)longitude– 建立 NSURL

• NSString *urlString = [[NSString alloc] initWithFormat:@"http://api.coimotion.com/demoApp/drinks/shops/gsearch?lat=%f&lng=%f", latitude, longitude];

• NSURL *url = [[NSURL alloc] initWithString:urlString];

– 建立 NSURLRequest• NSURLRequest * request = [[NSMutableURLRequest alloc]

initWithURL:url];

– 建立 NSURLConnection• NSURLConnection *connection = [[NSURLConnection alloc]

initWithRequest:request delegate:self];

以 API 取得內容• - (void)connection:(NSURLConnection

*)conn didReceiveData:(NSData *) incomingData– 剖析 JSON 字串• NSDictionary *searchInfoDic =

[NSJSONSerialization JSONObjectWithData:incomingData options:0 error:nil];• NSLog(@"get data: %@", searchInfoDic);

以 API 取得內容• 顯示取得的 list 內容• 將 searchInfoDic 中的 value 下的 list 指定給 dataArray

– dataArray = [[searchInfoDic objectForKey:@"value"]objectForKey:@"list"];

– [[self tableView] reloadData];– 修改 - (UITableViewCell *)tableView:(UITableView *)tableView

cellForRowAtIndexPath:(NSIndexPath *)indexPath• UITableViewCellStyleDefault -> UITableViewCellStyleSubtitle

– 修改 - (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath• cell.textLabel.text = [[dataArray objectAtIndex:indexPath.row]

objectForKey:@”title”];• Cell.detailTextLabe.text = [[dataArray

objectAtIndex:indexPath.row] objectForKey:@”addr”];

NavigationController

NavigationController• 建立 UINavigationController– AppDelegate.m

• MyTableViewController *mainVC = [[MyTableViewController alloc] init];

• self.window.rootViewController = mainVC;

– Modified:• MyTableViewController *mainVC = [[MyTableViewController

alloc] init];• UINavigationController *navVC = [[UINavigationController

alloc] initWithRootViewController:mainVC];• mainVC.title = @"LIST”;• self.window.rootViewController = navVC;

NavigationController• 開啟新的 view controller– MyTableViewController.h

• Import DetailViewController.h

– MyTableViewController.m• - (void)tableView:(UITableView *)tableView

didSelectRowAtIndexPath:(NSIndexPath *)indexPath– 為 tableView 增加”選擇”的事件– 傳入 data 給 DetailViewController

» DetailedViewController *detailedVC = [[DetailedViewController alloc] initWithNibName:@"DetailedViewController" bundle:nil];

» detailedVC.data = dataArray[indexPath.row];– 在 navigation controller 中開啟 DetailView

» [self.navigationController pushViewController:detailedVC animated:YES];

顯示更多資訊• URL:

http://api.coimotion.com/demoApp/drinks/shops/info/[geID]?detail=1– 取得 [geID] 的詳細資訊顯示於畫面

• DetailViewController– viewDidLoad 初始化– 取得開啟時傳入的資料，取出 geId 以建立

connection 到取得該地點的詳細資訊– 取得後剖析資料以顯示於畫面上

地圖呈現• MapListingViewController.h–#import <MapKit/MapKit.h>• 使用地圖元件

–#import "mapAnnotaion.h”• 標記地圖的物件結構，需自己實作

地圖呈現• MapListingViewController.m–Map 相關• - (void)mapView:(MKMapView *)mapView

didSelectAnnotationView:(MKAnnotationView *)view– 點選 annotation 的事件– 開啟 MKAnnotationView

• - (void)mapView:(MKMapView *)mapView regionDidChangeAnimated:(BOOL)animated– 地圖位置移動的事件– 取得新地圖的中心位置並透過 API 取得新的資訊

地圖呈現• MapListingViewController.m– Location 相關• viewDidLoad 時會呼叫 startUpdatingLocation• - (void)locationManager:(CLLocationManager

*)manager didUpdateLocations:(NSArray *)locations– startUpdatingLocation 取得結果時會呼叫此 function– 取得目前定位結果並將地圖的中心點定為此– Region change 會觸發 search

地圖呈現• MapListingViewController.m– 處理 search 結果• didReceiveData• 和列表呈現一樣，先以一個 array 把 data 存起來• 照 array 的 index 產生對應的 annotation 並加到

map view 上– 處理點選 annotation 的回應• didSelectAnnotationView• 取得目前 annotation 的 view• 加上 callOutButton

登入• COIMOTION 使用 token 做為身份驗證的

資訊

• 登入成功時 API 會回傳 token 做為之後溝通用

• Client 端必須幫使用者保存 token 並在呼叫 API 時做為參數

註冊• COIMOTION 提供開發者 API 可管理自己的使用者

• 使用者註冊成功會取得一個啟動碼，之後再經過啟動程序後即可順利登入

• 通常使用者都可以在開發者的 web 服務上註冊，透過 email 啟動帳號，才完成註冊手續

• 此 demo 的 app 中實做了註冊的功能，使用者註冊後可自動進行啟動與登入