[CS193P] 第十二堂課摘要及心得筆記

在這一次的CS193P課程中,我們將學習如何使用Web View來在iPhone應用程式上顯示網頁內容,並且透過Core Location和Map Kit來取得使用者的地理位置和顯示地圖,就讓我們一起來看看吧!
評論
評論

在這一次的 CS193P 課程中,我們將學習如何使用 Web View 來在 iPhone 應用程式上顯示網頁內容,並且透過 Core Location 和 Map Kit 來取得使用者的地理位置和顯示地圖,就讓我們一起來看看吧!

UIWebView

UIWebView 是 UIKit 所提供來顯示網頁內容的 View,背後使用的瀏覽技術就如同 iPhone 的 Safari 一樣,換而言之,就如同 Safari 能夠開啟 PDF/DOC 等檔案格式,透過 UIWebView 這些內容也理所當然的能夠在我們的應用程式中顯示。

UIWebView 的資料來源主要有三者:

  1. 本機上的 HTML 字串
  2. 本機上的資料 + MIME type
  3. 遠端的 URL

需要注意的是,UIWebView 對於網頁的一些功能有所限制,像是 JavaScript 最多只能執行 5 秒,而最多也只能使用 10MB 的記憶體空間。

而我們要如何建立 UIWebView 呢?我們當然可以透過 Interface Builder 來建立,也可以使用程式碼。而當我們建立好 View 之後,可以使用以下 API 來提供顯示資料給 View:

- (void)loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL; - (void)loadData:(NSData *)data MIMEType:(NSString *)MIMEType textEncodingName:(NSString *)encodingName baseURL:(NSURL *)baseURL; - (void)loadRequest:(NSURLRequest *)request;

而這三種 API 也就是上面所說的三種不同的資料來源,分別是 HTML 字串、資料和 URL。這邊的 NSURLRequest 是一個包裝過後的物件,負責紀錄所要擷取的 URL 和快取原則。此外,UIWebView 也有以下 Properties 和方法:

@property BOOL loading; // 是否在讀取中? @property BOOL canGoBack;  // 是否有上一頁? @property BOOL canGoForward; // 是否有下一頁? - (void)reload; // 重新讀取  - (void)stopLoading; // 停止讀取  - (void)goBack; // 回到上一頁  - (void)goForward; // 回到下一頁  // 以下是設定值 @property BOOL scalesPageToFit // 是否自動縮放頁面 @property BOOL detectsPhoneNumbers; // 是否自動偵測電話號碼並轉成可點的連結

就如同大多數複雜的類別一樣,UIWebView 當然也會有對應的 delegate 方法:

- (void)webViewDidStartLoad:(UIWebView *)webView; - (void)webViewDidFinishLoad:(UIWebView *)webView; // 開始讀取頁面 - (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error; // 讀取失敗 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType; // 判斷是否要讀取新的頁面

Core Location

Core Location 是在 Cocoa Touch 中所提供用來處理地理訊息的 framework,包含了以下類別:

  • CLLocation -- 地理位置資訊
  • CLLocationManager -- 用來協助取得 CLLocation
  • CLHeading -- 用來表示羅盤指向的位置

要注意的是,Core Location 並不包含任何 UI 元件,而是只負責單純的位置管理而已。而 Core Location 在運作上,會透過 iPhone 上得三種方式來定位:

  • GPS -- 最準確但也最慢
  • Wi-Fi -- 速度跟時間都處於中間
  • 基地台三角定位 -- 最快但也最不準

而我們要如何確定 iPhone 使用的是哪一種定位方式呢?我們可以透過設定不同的準確度來達成,假設我們設定誤差只能在 1 公尺以內,那 iPhone 自然會使用 GPS 來取得位置。而當我們需要獲得當前的座標時,我們需要建立新的 CLLocationManager,如下方程式碼:

@property CLLocation *location; // 取得的位置 @property id  delegate; // 設定 delegate @property CLLocationDistance distanceFilter; // 當使用者移動多遠之後才會更新座標  @property CLLocationAccuracy verticalAccuracy; // 設定準確度 - (void)startUpdatingLocation // 開始更新座標 - (void)stopUpdatingLocation // 停止更新座標 - (void)startUpdatingHeading // 開始更新羅盤方向 - (void)stopUpdatingHeading // 停止更新羅盤方向

此外,為了能夠接收得到的資料,我們也需要設定 delegate,並且實做以下方法:

- (void)locationManager:(CLLocationManager *)manager didUpdateToLocation:(CLLocation *)newLocation fromLocation:(CLLocation *)oldLocation; // 取得座標 - (void)locationManager:(CLLocationManager *)manager didUpdateHeading:(CLHeading *)newHeading; // 取得羅盤方向 - (void)locationManager:(CLLocationManager *)manager didFailLoadWithError:(NSError *)error; // 處理錯誤

Map Kit

最後我們要談的就是 Map Kit,也就是 iPhone 上用來顯示地圖的元件。而想當然爾,背後的技術是透過 Google 地圖,所以地圖資訊算是相當完整,也因此支援衛星雲圖的功能。除此之外,Map Kit 也可以用來轉換 CLLocation,將其座標位置轉成平常使用的地址。

而在 Map Kit 的 API 中,MKMapView 顧名思義就是用來顯示地圖的 View 元素,除了顯示地圖之外,MKMapView 也提供了地圖上的標記跟顯示使用者當下位置的功能,擁有以下 Properties:

@property MKCoordinateRegion region; // 顯示區域 @property CLLocationCoordinate2D centerCoordinate; // 中央座標 @property MKMapType mapType; // 地圖類型 @property NSArray *annotations; // 地圖上的標記 @property MKUserLocation userLocation; // 使用者的位置

除了這些 Property 之外,也有許許多多的 delegate 方法,有興趣的讀者還請參考投影片 21、22 兩頁,或者是 MKMapView 的 Class Reference

而我們剛剛有看到 MKMapView 有提供地圖標記的功能,而這些地圖標記並非獨立的類別,而是實做 ProtocolMKAnnotation 來完成。或者是也可以直接使用 MKPlacemark:

- (void)initWithCoordinate:(CLLocationCoordinate2D *)coordinate addressDictionary:(NSDictionary *)dictionary;

至於使用者的當前位置,則是透過 MKUserLocation,具有以下 properties:

@property BOOL updating (getter = isUpdating); // 是否在更新中 @property CLLocation *location; // 目前的位置 @property NSString *title; // 標題  @property NSString *subtitle; // 次標題

最後,Map Kit 也提供了從地理座標找地址的功能,透過 MKReverseGeocoder:

- (void)initWithCoordinate:(CLLocationCoordinate2D)coordinate; @property id  delegate; - (void)start; - (void)cancel;

當然也有 delegate:

- (void)reverseGeocoder:(MKReverseGeocoder *)geocoder didFindPlacemark:(MKPlacemark *)placemark; - (void)reverseGeocoder:(MKReverseGeocoder *)geocoder didFailWithError:(NSError *)error;

結論

這次的課程內容包含了 UIWebView 和 Map Kit 的相關介紹,這兩者在 iPhone 應用程式中常常出現,實用度也是相當的高!在下一次的課程中,我們將一同探討如何在 iPhone 中整合手機中的通訊錄設計一些應用程式,還請期待!

參考資源


從物流到巡檢!無人機小兵立大功,助產業翻轉應用場景、加速智慧城鄉腳步

隨著科技進步,在推動智慧城鄉的道路上,已發展出應用無人機來縮短城鄉差距、加速產業應用佈局,同時提升民眾的生活品質。
評論
photo credit:經濟部工業局
評論

談起無人機會令你想到什麼?對多數消費者而言,第一時間聯想到的或許是結合影音、娛樂的應用場景,藉由飛行優勢捕捉各種畫面、創造更有趣的觀賞體驗,但其實無人機早已升級,在許多我們意想不到的場域裡發揮它的技術,改善我們當前的生活品質。

根據 DRONEII.Com 的報告指出,全球無人機市場將從 2018 年 140 億美元、一舉躍升到 2024 年 430 億美元,其中能發揮無人機應用的場景除了熟悉的娛樂、拍攝外,勘/救災、預警系統、資料蒐集與分析與環境監測等,亦是無人機可著力之處。

看準無人機所具備的這些優勢,讓經濟部工業局在「普及智慧城鄉生活應用計畫」中,善用無人機的價值,讓它得以跳脫娛樂拍攝場景,以物流、巡檢等角色走入偏鄉,為在地民眾以科技力注入創新活水。

看無人機如何從物流到巡檢,翻轉智慧城鄉

「智慧城鄉的目的就是要透過科技力,讓偏鄉地區的民眾也能同步享受等同於都會區的資源與生活品質。」作為國內長期投入研發無人機的中光電智能機器人王仲平協理觀察,這也是為什麼中光電加入「普及智慧城鄉生活應用計畫」後,選擇以物流、巡檢等場景作為起手式,希望藉由技術的輔助讓偏鄉地區的生活體驗可以再升級。

攤開 Google 地圖,從新竹火車站前往尖石鄉的路程接近 3 小時,途中更是九彎十八拐,也常因天災造成道路坍方,切斷輸送物資的主要管道。「但這趟路對無人機而言僅需 10 分鐘」在天氣許可下,無人機能垂直飛行加速物資運送,讓偏鄉在資源需求上邁進了一大步。當然,王仲平也解釋,這樣的場景是需要串接地方政府、物流業者乃至於零售業者都缺一不可,中光電發揮在無人機的技術與專業,攜手夥伴們才能讓智慧城鄉的發展被實現。

而這項技術也已輸出海外、與日本樂天合作。王仲平透露,目前已在白馬山進行試飛,在高低落差近 1600 公尺、往返距離約 10 公里的地區,以無人機方式將貨物運送至目的地。讓過去需要耗費車程、人力約 7 小時的路途,如今只需要 10 分鐘就能解決,不只能運送物資上山、也同時能將山上的垃圾運下來,藉由無人機創造雙向價值、提升偏鄉的生活體驗。

除了物流場域,巡檢應用也同樣能發揮無人機效益。王仲平表示,電塔維護關係著偏鄉居民的生活及維修人員的生命財產安全,過去動輒爬上高處修繕或需要跨域的奔波,不僅耗時耗力、也可能有人為無法判斷的疏漏發生。如今在無人機的輔助下,不僅大範圍的檢測不成問題,因不受空間影響、更能 360 度的徹底檢查,即便在環境惡劣的山區也難不倒它。

photo credit:經濟部工業局

用「眼睛」跟「大腦」,讓無人機更智慧地徜徉在場域中

無人機之所以能實現如此多應用場景、強化偏鄉地區生活品質與智慧水準,全仰賴技術上的突破,「你就想像現在的無人機其實是台會飛行的掃地機器人,」王仲平生動地解釋。傳統無人機因缺乏人工智慧的導入,讓任務執行依舊需要耗費大量人力監控,也可能因人為操作而發生意外,而這也是為什麼中光電在研發無人機的第一天起,就希望能賦予智慧設計,讓無人機能具有思考與判斷能力。

首先,要能被稱作為智能機器人就需要配置影像辨識系統,王仲平表示這讓無人機如同人眼一般,能捕捉外界影像,讓它在執行任務時能採集需要的資訊,同時透過 SLAM 避障技術,協助無人機判別外界的障礙物,無論在運輸或是巡檢的過程中,更加順利。

此外,智能機器人也需要具備良好的運算平台、就像是大腦一樣,能將捕捉到的影像進行分析、並且建立模型,以利未來在同一條路徑上的飛行時,可以更加熟悉、也讓這台無人機得以減少對人為操作的依賴,加速對偏鄉服務的提供效率。

偏鄉需求大,無人機應用潛力無窮

「其實物流體系的成本有 75% 都是耗費在最後一哩路。」王仲平說,若能借重無人機的技術突破瓶頸,相信在偏鄉的民眾生活品質將會有大幅度邁進,同時為加快腳步,他認為每個物流節點都需要擁抱數位工具、面臨數位轉型,才能攜手翻轉當前的應用場景。

展望未來、王仲平更是滿心期待,他相信還有很多場域正等著無人機發揮技術突破現有框架,「你能想像如果我們有空中計程車的時候嗎?那將會是航空界的革命性發展,也將為偏鄉居民的醫療帶來全新的體驗。」短程的載人運送服務將可能為偏鄉居民、甚至是因登山發生意外的狀況,有了更即時與效率的幫助。藉著這次的計畫,王仲平相信在攜手產官學一同合作打造可落地的應用,就能讓更多人看見無人機的價值、也才能加速偏鄉擁抱智慧科技。

經濟部工業局廣告