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

• 地圖呈現
• 註冊/登入
App Demo
App Demo
App Demo
列表呈現
• 新增TableViewController
– File->new->Objective-C class
– Name of class: myTableViewController
– Subclass: UITableView...
列表呈現
• MyTableViewController.h
– 指定delegate與datasource
• @interface MyTableViewController : UITableViewController
<UITable...
列表呈現
• 在MyTableViewController中宣告dataArry
來存放要顯示的內容
– .h
• @property (strong, nonatomic) NSArray
*dataArray;

– .m
• @synth...
列表呈現
• (NSInteger)numberOfSectionsInTableView:(UITableVie
w *)tableView
– 回傳table有幾個section

• - (NSInteger)tableView:(UIT...
取得地理位置
• MyTableViewController.h
– #import <CoreLocation/CoreLocation.h>
– @interface MyTableViewController :
UITableViewC...
取得地理位置
• MyTableViewController.m
– - (void)locationManager:(CLLocationManager
*)manager didUpdateLocations:(NSArray
*)loca...
引用內容集
•
•
•
•
•

註冊並登入COIMOTION網站
建立APP
進入內容寶庫
選擇要用的APP
引用”飲料店資訊”(代碼: drinks)
以API取得內容
• URL
– http://api.coimotion.com/{app代
碼}/drinks/shops/gsearch

• 參數
– lat: 緯度 (ex. 22.622757)
– lng: 經度 (ex. 120...
以API取得內容
• GET resource
– http://api.coimotion.com/demoApp/drinks/sho
ps/gsearch?lat=22.622757&lng=120.270083

• 與App結合
– ...
以API取得內容
• 建立function: - (void)drinkShopsSearchAtLat:
(float) latitude Lng:(float)longitude
– 建立NSURL
• NSString *urlStrin...
以API取得內容
• - (void)connection:(NSURLConnection
*)conn didReceiveData:(NSData *)
incomingData
– 剖析JSON字串
• NSDictionary *se...
以API取得內容
• 顯示取得的list內容
• 將searchInfoDic中的value下的list指定給dataArray
– dataArray = [[searchInfoDic
objectForKey:@"value"]objec...
NavigationController
NavigationController
• 建立UINavigationController
– AppDelegate.m
• MyTableViewController *mainVC = [[MyTableViewController
...
NavigationController
• 開啟新的view controller
– MyTableViewController.h
• Import DetailViewController.h

– MyTableViewControl...
顯示更多資訊
• URL:
http://api.coimotion.com/demoApp/drinks/s
hops/info/[geID]?detail=1
– 取得[geID]的詳細資訊顯示於畫面

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

– #import "mapAnnotaion.h”
• 標記地圖的物件結構,需自己實作
地圖呈現
• MapListingViewController.m
– Map相關
• - (void)mapView:(MKMapView *)mapView
didSelectAnnotationView:(MKAnnotationView...
地圖呈現
• MapListingViewController.m
– Location相關
• viewDidLoad時會呼叫startUpdatingLocation
• - (void)locationManager:(CLLocatio...
地圖呈現
• MapListingViewController.m
– 處理search結果
• didReceiveData
• 和列表呈現一樣,先以一個array把data存起來
• 照array的index產生對應的annotation並...
登入
• COIMOTION使用token做為身份驗證的資
訊
• 登入成功時API會回傳token做為之後溝通
用
• Client端必須幫使用者保存token並在呼叫
API時做為參數
註冊
• COIMOTION提供開發者API可管理自己的使
用者
• 使用者註冊成功會取得一個啟動碼,之後再經
過啟動程序後即可順利登入
• 通常使用者都可以在開發者的web服務上註冊,
透過email啟動帳號,才完成註冊手續
• 此demo的...
Upcoming SlideShare
Loading in …5
×

Coimotion demo

935
-1

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
935
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Coimotion demo

  1. 1. COIMOTION
  2. 2. 摘要 • App Demo • 列表呈現 – 取得地理位置 – 以API取得內容 – NavigationController – 顯示更多資訊 • 地圖呈現 • 註冊/登入
  3. 3. App Demo
  4. 4. App Demo
  5. 5. App Demo
  6. 6. 列表呈現 • 新增TableViewController – File->new->Objective-C class – Name of class: myTableViewController – Subclass: UITableViewController – create
  7. 7. 列表呈現 • 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
  8. 8. 列表呈現 • 在MyTableViewController中宣告dataArry 來存放要顯示的內容 – .h • @property (strong, nonatomic) NSArray *dataArray; – .m • @synthesize dataArray; • 在ViewDidLoad中初始化 – dataArray = [[NSArray alloc] initWithObjects:@"Row 1", @"Row 2", @"Row 3", nil];
  9. 9. 列表呈現 • (NSInteger)numberOfSectionsInTableView:(UITableVie w *)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的內容
  10. 10. 取得地理位置 • MyTableViewController.h – #import <CoreLocation/CoreLocation.h> – @interface MyTableViewController : UITableViewController <UITableViewDataSource, UITableViewDelegate, CLLocationManagerDelegate> – @property (strong, nonatomic) CLLocationManager *locationManager;
  11. 11. 取得地理位置 • MyTableViewController.m – - (void)locationManager:(CLLocationManager *)manager didUpdateLocations:(NSArray *)locations • 取得地理位置時執行的function • locations為取得的位置列表 • 為避免浪費電,要停止locationManager的更新
  12. 12. 引用內容集 • • • • • 註冊並登入COIMOTION網站 建立APP 進入內容寶庫 選擇要用的APP 引用”飲料店資訊”(代碼: drinks)
  13. 13. 以API取得內容 • URL – http://api.coimotion.com/{app代 碼}/drinks/shops/gsearch • 參數 – lat: 緯度 (ex. 22.622757) – lng: 經度 (ex. 120.270083)
  14. 14. 以API取得內容 • GET resource – http://api.coimotion.com/demoApp/drinks/sho ps/gsearch?lat=22.622757&lng=120.270083 • 與App結合 – API需要傳送目前的經緯度做為參數 – 所以要在didUpdateLocations後才能呼叫API
  15. 15. 以API取得內容 • 建立function: - (void)drinkShopsSearchAtLat: (float) latitude Lng:(float)longitude – 建立NSURL • NSString *urlString = [[NSString alloc] initWithFormat:@"http://api.coimotion.com/demoApp/drinks/s hops/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];
  16. 16. 以API取得內容 • - (void)connection:(NSURLConnection *)conn didReceiveData:(NSData *) incomingData – 剖析JSON字串 • NSDictionary *searchInfoDic = [NSJSONSerialization JSONObjectWithData:incomingData options:0 error:nil]; • NSLog(@"get data: %@", searchInfoDic);
  17. 17. 以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”];
  18. 18. NavigationController
  19. 19. 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;
  20. 20. 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];
  21. 21. 顯示更多資訊 • URL: http://api.coimotion.com/demoApp/drinks/s hops/info/[geID]?detail=1 – 取得[geID]的詳細資訊顯示於畫面 • DetailViewController – viewDidLoad初始化 – 取得開啟時傳入的資料,取出geId以建立 connection到取得該地點的詳細資訊 – 取得後剖析資料以顯示於畫面上
  22. 22. 地圖呈現 • MapListingViewController.h – #import <MapKit/MapKit.h> • 使用地圖元件 – #import "mapAnnotaion.h” • 標記地圖的物件結構,需自己實作
  23. 23. 地圖呈現 • MapListingViewController.m – Map相關 • - (void)mapView:(MKMapView *)mapView didSelectAnnotationView:(MKAnnotationView *)view – 點選annotation的事件 – 開啟MKAnnotationView • - (void)mapView:(MKMapView *)mapView regionDidChangeAnimated:(BOOL)animated – 地圖位置移動的事件 – 取得新地圖的中心位置並透過API取得新的資訊
  24. 24. 地圖呈現 • MapListingViewController.m – Location相關 • viewDidLoad時會呼叫startUpdatingLocation • - (void)locationManager:(CLLocationManager *)manager didUpdateLocations:(NSArray *)locations – startUpdatingLocation取得結果時會呼叫此function – 取得目前定位結果並將地圖的中心點定為此 – Region change會觸發search
  25. 25. 地圖呈現 • MapListingViewController.m – 處理search結果 • didReceiveData • 和列表呈現一樣,先以一個array把data存起來 • 照array的index產生對應的annotation並加到map view上 – 處理點選annotation的回應 • didSelectAnnotationView • 取得目前annotation的view • 加上callOutButton
  26. 26. 登入 • COIMOTION使用token做為身份驗證的資 訊 • 登入成功時API會回傳token做為之後溝通 用 • Client端必須幫使用者保存token並在呼叫 API時做為參數
  27. 27. 註冊 • COIMOTION提供開發者API可管理自己的使 用者 • 使用者註冊成功會取得一個啟動碼,之後再經 過啟動程序後即可順利登入 • 通常使用者都可以在開發者的web服務上註冊, 透過email啟動帳號,才完成註冊手續 • 此demo的app中實做了註冊的功能,使用者註 冊後可自動進行啟動與登入
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×