Pages

Saturday, February 25, 2012

AddressMap 讓地址直接開啟呈現在地圖上

AddressMap
在之前一篇 開發 Location based 的 iPhone app , MapKit 知多少 介紹了開發實務上會碰到的基本題和進階題。而其中進階題目第三題「透過使用者輸入地址查詢到該地址的座標」,這部分該怎麼做? Apple 沒有提供這樣的功能輸入地址就可以馬上查到了,所以這部分要借助別的方式。

有兩種會碰到的設計方式:
  1. 從 Search Bar 讓使用者輸入,幫它查詢完給予地點清單,再讓使用者點選哪一個適合他的,點選後再開啟到地圖上呈現。 
  2. 在 Table View 提供地址資訊,使用者只要點選地址就可以直接開啟在地圖上呈現。
我在 GitHub 上面開了一個 Open Source Project,叫做 Address Map。實作上是以第二個方式來呈現,但是如果挑用裡面的查詢功能,也是可以完成第一種效果。這個 Demo 程式步驟如下:
  1. AMLocationsModel.h 跟 Google Maps API 問詢經緯度座標。 
  2. 會將回傳的 JSON 內容轉換為需要的 Objects 叫做 AMLocationSpot.h 。 
  3. 再將這些 Annotations 加到地圖上面。
  4. 透過 Zoom 的效果讓它全部的點可以清楚呈現在畫面上。
目前設計上為了使用方便,直接拿 AMMapViewController.h 來用即可,給予地址就可以直接呈現在地圖上了。這個 Project 有用到兩個外部 Libraries 分別是 asi-http-request 和 JSONKit,為了是要解決呼叫 Google API 和解析回傳 JSON 格式所需。

如何使用呢?

  1. 用 Git command 將這 projects 透過 clone 下載回去。 
  2. 記得要下 git submodule init 和 git submodule update,如此一來才會將外部 libraries 建立起來。
  3. 參考 DemoViewController 就可以知道如何引用了。
地圖與經緯度有很多變化,這個 project 還會不會擴充再看實務上有什麼需求剛好貼切,再來擴充上去了。歡迎使用!

Friday, February 24, 2012

RateStars 讓使用者透過點選星星給予評分

是否覺得這個畫面跟 App Store 讓使用者給予 Review 的畫面很像,的確是完全參照它的特色設計這個元件的。

RateStars 提供了最主要 Class 叫做 RSTapRateView,這個 Class 繼承了 UIView,所以只要裝載在 iOS App 任何畫面地方都能簡單使用,只要給予它的 Frame 大小後,設定好 Delegate,就能根據使用者點選了幾顆星,得到星星數值。

在設計上用了 5 個 UIButton,分別代表了五個按鈕,透過 UIControlState 來改變它的狀態,來顯現不同的圖片,未選前是空心的星星,選擇後則是填滿實心的星星。1 個 UILabel 放在最下方顯示 "Tap a Star to Rate" 讓使用者知道這是可以按的。另外如果要歸零只要呼叫 clean 即可歸零從新點選。

規劃了一個 DemoViewController,所以從這邊當起頭就可以知道 RateStars 怎麼引用了。RateStars 目前放在 GitHub 上面,不論是直接 Download 或者使用指令 Git clone 都可以享用,非常歡迎!

相關聯結

Thursday, February 23, 2012

Xcode Storyboard 讓我們可以更快速的打造 App 出來體驗

Xcode Storyboard
Xcode 的 Storyboard 開發工具,可以讓我們往後任何 Idea 更快速打造出快速可互動的 Prototyping,而且這過程會很有趣。
建議採用找幾個朋友夥伴 Workshop 形式,先學習如何上手 Storyboard 之後馬上做中學、學中做。可以取用原先已經準備好的 iOS App 圖形雛型,數量大約 10~15 張圖片,每一個成員打開 Xcode Storyboard,在限定的時間內 (1~2hrs) 做個競賽,時間到以套最多圖片,做出最多互動效果為目標。而當時間到,所有的成員大方的展示自己的製作技巧與成果,而在這裡面互相學習彼此的技巧。甚至最後,我們將 Storyboard 建置到 iPhone 上,直接實機展示,這種互動式體驗更為的生動。
談到 Prototyping 可以分為:
  • Paper Prototyping 用手繪方式畫出雛形。
  • Static Image 用繪圖工具畫出高品質的圖面雛形。
  • Interactive Tool 用工具做出可互動性的雛形。
  • SDK coding 寫程式作出雛形。

而在這些裡面各個方式有他的優勢好處與劣勢缺點,其中 Xcode Storyboard 對於我們開發人員而言,是影響到了後面兩項,Interactive Tool 和 SDK coding。首先可以用 GUI 介面拖拉我們想要的樣貌,可以藉由 Zoom In, Zoom Out 效果來做細微調整,全貌俯瞰了解來龍去脈,在適當的位置加上一點 code 做出互動效果,達到不同的頁面可以在不動情況下,演練出這個 iOS App 該呈現的行為。
另外 Storyboard 可以做到直接拿來從零開始開發,也可以從既有的專案切入做新功能的開發,也可以像我們一樣,拿來做敏捷式雛形開發上應用。
以上不論怎麼樣的 Prototyping,只有真正自己動手做,才會覺得樂在其中,了解其中的奧妙與好玩之處。

本篇最原始由 Edward 發表於 thepolydice.com 的部落格文章 Storyboard – 讓我們的任何 Ideas 可以更快速的打造出來體驗