NYU CLOUD EXPO' 2012
02 TripTalk
李 泓 其
張 秉 鈞
h t t p : / / Tr i p Ta l k . c o m /
羅 子 為
官 佩 萱
林 奕 岑
張 子 文
Share the trip, share the saying 規劃出遊的資訊通常來自網路及朋友的推薦，這些資訊 要如何有效率的整合而能派得上用場呢?
Tri pTalk幫 助 旅 行 者 搜 尋 鄰 近 景 點 並 分 類 ， 旅 行 者 能 快 速 找 到 想 要 去 的 景 點 ； 直 向 的 Map 介 面 告 訴 你 與 鄰 近 景 點 的 關 係 ， 橫 向 操 作 的 timeline 模 式 則 能 將 景 點 快 速 的 在 時間軸上規劃，輕鬆的完成行程準備；最重要的是能將 行程分享給多位朋友，朋友幫忙修改行程並隨時提供建 議；多人參與討論，讓行程更豐富有趣！
As you going to plan a tri p for our vacation, searching forthe information through the Internet or asking for friends’ advices is the most usual way. But how we summarize the useful traveling information in a more efficient way? Now, “Tri pTalk” can help travelers search and sort the nearby scenic spots’ information! They can find the place rapidly.longi tudinal operating map relates you with the neighboring area. Horizontally “timeline” operating mode helps you scheduling the plans on the time axis. You can map out the journey easily! Most attractive, you can share your plans to your friends by “Tri pTalk”, they can give suggestions and revise to your plan instantly!
03
02 TripTalk
1
NYU CLOUD EXPO' 2012
Map
快速搜尋景點並分類搜尋結果；輸 入目的地搜尋鄰近景點，並將景點 分成吃飯、住宿、經典景點及歷史 足跡四類，幫助旅行者更快速的找 到需要的資訊，加入旅程的清單。
2
Trip List
快速儲存規劃好的行程，並分享給 多位朋友，讓多位朋友可以同步在 行程中加入意見。 1
3
2
Edit the trip
橫向的時間行程模式幫助旅 行者快速將清單中的選項規 劃到時間軸中，同時可加入 行程註解與建議或是修改行 程順序，旅行者和友人可直 接在這個平台上互動，讓旅 途更豐富更有趣。
3
04 02
NYU CLOUD EXPO' 2012
step
1
:
Topic Search 1 主題發想與收斂
【 Brain
Storming
】
由三個大方向： 社會、經濟、自然搜尋相關的事件與議題，發 散式的發想可以得到比較多元且廣泛的結果。 【發 散 式 發 想 】
每個人發想數個議題，再將所有結果匯集起 來，討論每個議題和人的相關性及發展的可能 性，分類、排序，歸納出最適合的10個議題。
【 Idea 收 斂 】
從社會、經濟、自然共30個議題中， 進一步列出可能性與發展模式，並統 整並票選出適合的8個議題。
03
1. 家庭溝通平台
5. 圖像化預知身材
2. 音樂語言治療
6. 二手書交換平台
3. 旅遊行程抱佛腳
7. 失智老人認知輔助
4. 實材控管料理推薦
8. 我愛做體操
02 TripTalk
NYU CLOUD EXPO' 2012
2 組員共同mind mapping，app 有初步的定位。
step
2
2
1
:
Mind Mapping
最後選定旅遊行程抱佛腳為app主題。 並透過使用者/差異性/需求/使用場合 等面向分析此主題，繪製Mind Map。
使用者→廣泛的找出需求此類app的使用者，進一步可以設定使用情境與需求。 需求→與使用者相輔相成，由使用對象推斷使用者的需求。 做什麼→因應使用者的需求，app可以用哪些手法解決這些問題。 場景→ app使用的情境。 差異性→歸納現有app功能、列出現有app尚未做到的功能或尚存在的問題。
04
3
NYU CLOUD EXPO' 2012
step
:
Persona
【訪 問 對 象 】
【訪 問 技 巧 】
對象主要分為三類：學生/ 商務人士 / 家庭。針對訪問對象列出題目，在 訪問對象分享經驗時，視情況加入問 題詢問使用者的意見。
1. 問題是開放式的，盡量避免是非題、 選擇題、或是引導式的問題。
2. 一開始暖身多閒聊一些是不錯的方式 ，可以建立信任基礎、逐漸打開心房。
3. 多問為什麼，盡量能夠挖掘到背後真 正的需求是什麼。
03
step
4
02 TripTalk
NYU CLOUD EXPO' 2012
:
User Study 【 character
mapping 】
整 理 出 目 標 使 用 者 的 特 色 ， 也 可 以 說 是 我 們 Pe r s o n a 的 個 性 。 Pe r s o n a ： 外 向 / 喜 歡 旅 遊 / 喜 好 分 享 / 有 效 率 的 整 裡 旅 遊 行 程 的 使 用者。確認目標使用者後可以比較明確的設定使用情境，進一步歸 納app的核心概念及功能。
04
5
NYU CLOUD EXPO' 2012
step
:
Concept 使用情境與概念初步設定
【 Scenario 】
龍：官佩萱，我禮拜六要去嘉義，可以去哪? 官：唉呀，我那天不在嘉義欸。 龍：那你直接跟我說哪好玩，什麼好吃? 官：你要先租車，中午到的話可以去吃大同火雞肉 飯，然後去公園走一走，然後… 龍：欸! 你講這麼多我聽不懂啦! 官：我用where can i go 直接幫你規劃啦! 設定最好的使用情境，歸納出最重要的核心概念。
【 Concept 】
朋友口頭推薦的行程太模糊，不清楚。 where can i go 運用你的社交圈，讓朋 友替你規劃一趟他覺得好玩且值得推薦 給你的行程。
1. 讓你走一套朋友推薦的行程。 2. 我問路，你(朋友)指路。 3. 結合地圖不迷路。
03
【 5W1H 】
WHO ─ 喜歡旅遊以及分享的使用者 WHERE ─ ANYWHERE WHEN ─ 旅遊前的準備/ 旅遊當下的搜尋 W H AT ─ 尋 求 朋 友 幫 忙 規 畫 行 程 WHY ─ 隔空問路霧煞煞 HOW ─ 朋友幫我填行程
02 TripTalk
NYU CLOUD EXPO' 2012
核心功能彙整 1. 景點推薦（朋友打卡＋ google map）。
7. 可直接將景點加入時間軸做編輯。
2. 推薦分類（自己/吃/住/玩/all）。
8. 可將行程草稿寄給朋友讓朋友加入額外標記。
3. 自己增加景點。
9. 點開單一景點可顯示詳細資訊
4. 在目前所在位置設定半徑，超過半徑的只有top-
（ 照 片 、留 言 、 建 議 ） 。
ten景點才可以顯示，使用者可調整半徑大小。
10. 在地圖上顯示行程（與導航）。
5. 搜尋景點。
11. 記錄旅遊的花費。
6. 在地圖下方顯示時間軸。
12. 使用者可直接加入時間提醒。
step
6
:
Scenario 使用情境
【情境故事法】
目的：
作法：預設目標族群一天可能遇到的情境，
1.檢視app功能是否能真正解決遇到的狀況。
將每個情況對應一個app的功能。
2.依據情境的不同修正app功能。 3.每個人發想到的情境可能不盡相同，可能想出 之前沒有想到的情境，可以發展出其他功能。
04
7
NYU CLOUD EXPO' 2012
step
:
Where can I go 功能頁面初步架構
1
2
3
好友足跡玩透透 旅遊資訊來自好友推薦與 網路知名景點，並提供景 點 熱 門 TO P 1 0 。
搜尋分類效率高 針對琳琅滿目的景點，提 供分類過濾和快速搜尋的 功能，讓你更方便閱讀並 找到目的地。
私房好物報你知 建立並分享你生活中的私 房景點，讓你的朋友有更 豐富的選擇。
5
臨近景點任逍遙 根據使用者輸入的交通工 具和設定移動的半徑，推 薦時間內可達的景點。
03
6
專屬行程導覽員 提供每一個景點的詳細 資訊並附有旅程導航及 備忘稿。
7
朋友指點更道地 將行程草稿發送給朋 友，讓朋友為你增加或 修改，變成道地且個人 化的行程。
4
景點輕鬆便行程 地圖景點可以拖曳至時間 軸讓你清楚且輕鬆的編輯 行程。
8
貼身秘書不出包 提供預算規劃，隨時記錄 花費狀況，另外可針對時 間點設定備忘提醒。
02 TripTalk
step
8
:
NYU CLOUD EXPO' 2012
Trip Talk 介 面 修 改 / Wi r e f r a m e
04
NYU CLOUD EXPO' 2012
介 面 修 改 / Wi r e f r a m e Mapout主要設計概念讓旅行 者可以在短時間內規劃一趟 行程，並即時將行程發送給 在地的朋友，讓朋友幫忙規 劃行程，我們講主軸是"規 劃行程"，因此將app命名為 mapout，意思是規劃、安排。
03
02 TripTalk
NYU CLOUD EXPO' 2012
04
NYU CLOUD EXPO' 2012
{ 情境影片 }
03
02 TripTalk
NYU CLOUD EXPO' 2012
04
NYU CLOUD EXPO' 2012
A
{設計過程分享 }
台科大工商業設計/ 林奕岑 U X 、 G U I 設 計 、 影 片 製 作 及 Pro j e c t Ma n ag e r
【 User
Experiences 】
【 UI
Design 】
了解使用者需求在初期，確切的了解與分 析使用者的回饋，在訪談內容當中找到真 正的需求作概念的延伸。 1. 架構分析
1. 設計風格
試著和使用者與資工人員溝通，確認介面的
使用Adobe
在設計概念產出之後，與另一UI 設計組 員決定app 的整體風格與美感元素。 2. 靜態UI 設計 系列的工具(Photoshop/
每一個動作與流程都符合一般使用習性。 Illustrator) 設計每個介面細節，規模 2. 介面流程確認 組化各項UI元件介面。 詳細介面流程圖繪製，並考量各種使用上可 能的錯誤，避免它們發生。
3. 互動UI 發想 美化UI 之後便是介面的互動設計發想， 實現相對應的視覺效果，決定每個動作的 回饋是如何。
03 01
02 TripTalk
NYU CLOUD EXPO' 2012
台科大工商業設計/ 官佩萱 U X 、 G U I 設 計 、 影 片 製 作 及 Pro j e c t Ma n ag e r
【 User
Experiences 】
1. 找到正確的切入點 在使用者訪談當中用開放式的問答，得到較廣泛 的回應；順著使用者分享的過程，插入跟app較 貼近的問題，得到真正對app有幫助建議。 2. 挖掘使用者潛在需求 發現使用者沒有察覺的問題，創造需求，開發新 的功能讓使用者印象深刻。 3. 介面流程規劃與討論 折衷資工團隊邏輯性的思考模式及設計團隊偏向 人性化的思考模式，一起討論是否符合使用者的 直覺反應或是是否達到引導使用者的效果。
【 感想】
【 UI
Design 】
1. 設計風格 與另一位組員共同討論app 整體架構，做出初 步的版本，再由另一位UI組員統整整體風格。 2. 靜態UI設計
B
icon發想，並繪製成向量檔，再嘗試特效(PS) 再由另一位UI統整風格。
與資工同學一起發想概念和發展app功能是我印象最深也學到最多的部分，設計端較能掌握與使用者 相關的切入點，資工的同學則能夠有邏輯的評估合理性和適合操作的手法，起初花了不少時間平衡兩 邊不一樣的思考模式，但後期漸漸習慣且可以找到衡量的平衡點，整體運作起來效果是加乘的。
04 02
NYU CLOUD EXPO' 2012 NYU CLOUD EXPO' 2012
台大資訊工程系/ 張秉鈞 Coding 統整與主要功能架
【 Programming 】 因為這次所要開發的iOS 專案非常的複 雜，所以我們希望能夠使用資工系所學到 的 設 計 模 式 ( D e s i g n Pa t t e r n ) 將 程 式 的 行為和負責修改的責任分開來。 以 程 式 設 計 而 言 ， 我 們 用 了 非 常多的”Singleton”,“Object Adapter”,“Observer”,“Factory Method” 模式。最用我們在使 用”façade” 模型將我們專案的三個大功 能切割開來，分別是地圖的控制器、搜尋 資料庫的控制器和行程規劃的控制器。
C 03 01
D
02 TripTalk
D
NYU CLOUD EXPO' 2012
台大資訊工程系/ 張子文
i o s 程 式 設 計 的 資 料 庫 是 以 SQLite3.0 來進行。資料庫設計的
【 景點資料庫】
種點在於隨叫隨用的API 架構，在
手機內含的熱門景點資料建置是來自於交通部觀光局的
訂定好規格與細節之後，只需要協
介紹，提供使用者在沒有網路服務的情況下也可以進行
調好溝通介面。可以減少需要用到
景點的搜尋及觀看介紹。
資料庫的人，使用上的複雜度。透 過資料庫提供的功能可達到新增、 刪除、搜尋等功能。
【訊息資料庫】
1. 新增─新增景點，若景點已存在進行資料更新。 2. 刪除 3. 搜尋─以關鍵字搜尋景點清單、以地理位置直半徑 搜尋景點清單、以景點ID 取得景點詳細資訊等。
紀錄與聯絡人往返的訊息傳遞。 1. 新增共同編輯的對象、根據對 象與時間點新增一筆留言資訊。
【行程資料庫】
2. 刪除留言。
行程編輯完成後，可以儲存起來，或發送給朋友徵
3. 以行程ID取得共同編輯的聯絡
詢意見或共同編輯。通過伺服器傳送而來的行程也
人、以聯絡人名稱取得所有的留
可以存入資料庫內。
言、取得一筆行程的所有留言。
04 02
NYU CLOUD EXPO' 2012
台大資訊工程系/ 張秉鈞 設負責Coding 統整與主要功能架
【 Storyboard 】 Storyboard的部份為 xcode 4.2新提出之功能，將以往的Interface Builder功 能更加延伸。過去僅能針對單一個View設計其UI layout，而在Storyboard的環 境下，每個ViewController就像是App中的每個畫面，可以利用Segue連線的方 式 將 每 個 Vi e w C o n t r o l l e r 都 串 接 起 來 ， 因 此 從 S t o r y b o a r d 上 就 可 簡 單 的 看 到 程 式 的 flow diagram！同時也降低了UI設計人員對於Xcode的門檻，讓程式與介面 設計能夠配合的更完整！
03 01
02 TripTalk
NYU CLOUD EXPO' 2012
SDK 】
因 為 Tr i p Ta l k 規 劃 好 的 行 程可以發送給 FB 好友，請 朋友推薦、或是共同編輯這份 行程。因此我們就需要取得 Facebook Friends 的功能。 然而要在iOS上開發Facebook 相關的應用程式，絕對不能不 知道 Hackbook，它是一個
將iOSFacebook大部分的 SDK實作出來的範例，除 了 看 官 方 的 i O S Tu t o r i a l for Facebook之外，從 Hackbook中更可看到各 個SDK被實作使用的過 程，對於程式開發也更有 幫助。一開始遇到最大的
問題就是要利用Delegate 的方式取得Facebook 的 A c c e s s To k e n ， 了 解 D e l e g a t e 與 Pr o t o c o l 的 概 念後，對Hackbook的程式 也能慢慢了解！
【介面動畫】 實作介面動畫的過程中 非常有趣，有時候千言 萬語不如一分鐘的影 片來的清楚！與設計 同學的溝通就靠著一 段影片，呈現明確且 清楚的需求，也讓我 在開發上相當順利！ 開發內容主要都是利用 UIViewAnimation 的
元件來實現，藉由設定起始 大小或位置、結束大小或位 置、動畫過程的時間…就可 讓我完成了：下拉抽屜的彈 性開關、地圖景點標記的縮 小放大、新增景點的彈力提 示以及圖片動畫等。實作後 覺得不是太複雜的功能，但 卻讓整個 App 的質感往上 加分的不少，效果滿分！
E
04 02
NYU CLOUD EXPO' 2012
台大資訊工程系/ 羅子為 Tr i p s 行 程 列 表 頁 面 以 及 手 機 之 間 訊 息 的 傳 遞 。 (包含架設GAE Server以及Push推播通知功能)
【 Trips
行程列表 - 外觀及功能】
這個地方的功能是要顯示所有的行程，包含自己的行程以及朋友送來的行程，一 開始要先”客制化”我們的列表，像是要放行程的名稱，修改的日期，以及行程 的preview還有共同編輯人的大頭照等等，在客制化的部分我先用StoryB oard 的元件把我們要的外觀先建立好，設定位置與長寬，然後再建立一個Class來描述 每個元件要做的事情，像是什麼資料要傳到什麼位置，或是點下哪個按鈕要發生 什麼事情等等，最後，在Trips的頁面匯入該Class來建立我們的table cell 就 成功了!
【 Trips 行 程 列 表
- 網路資料與本機資料】
處理Trips 頁面的資料很麻煩，因為資料來源包含網路( 朋友寄過來的) 以及 本機( 自己儲存的)，所以在Trips 頁面我首先將網路的資料下載下來(Json 格 式)，用JSON 的library 去parse 他，將他存成Array 與Dictionary，然後再 與本機資料庫比對是否有新資料，有的話就存入本機端，等到本機與網路端Sync 完畢之後，再從本機端將所有資料讀出，顯示在Trips 頁面。
【發送行程頁面
- 資料傳送】
這頁的layout 以及facebook 選好友的功能是泓其做的，我主要是在處理選完好 友之後將行程送出的這件事，因為一個行程可能會有多位好友一起編輯以及含有 多個景點，所以在傳遞資料的時候就必須使用批次上傳的方法，然後在Server 那 邊再把整包好友或是景點解析出來。
03 01
02 TripTalk
【 GAE
Server 】
為了讓手機之前可以傳遞資料，我用Google App Engine 架設 了一個Server，讓每隻手機的本機資料可以上傳到Server 做備 份，並且寄送給其他人，比較麻煩的部分是因為每個行程會有很 多的景點以及很多個共同編輯人，所以在處理上必須使用多維矩 陣去處理，然後再把矩陣轉成json 格式傳回手機。
【 Push 推 撥 通 知 】 為了讓我們的app更fancy，我 們 把 他 做 的 像 是 w h a t ’s a p p 或 是Line 一樣，當有人寄行程給 你時你的手機就會咑啷的響一 下，並起跑出我們的mark 以 及一些文字，這個部分使用的 是ApplePush Notification Service (APNS) 的功能。要做 到Push 的功能，首先必須到iOS developer 的地方申請開通push 功能，並將要用來做push 的key hash 上傳到iOS developer，上 傳成功以後再把新的憑證下載下 來安裝到要開發的電腦裡，然後 開始建立自己的push server ， 建立自己的push server 必須先 安裝架站程式Apache，然後安 裝php，然後再安裝MySQL 資料 庫，
這三個東西可以分開裝也可 以下載別人的懶人包一次裝 好，懶人包在windows 叫 做XAMPP，在Mac 叫做 MAMP，whatever 裝好架 站程式之後你就有一個個人 網站，然後開始架設push server，要架設push ser 先我們先建立一個虛擬主機 ( Vi r t u a l H o s t ) 以 免 干 擾 到 正常的port80，建立的方法 是在Apache 的config 檔案 裡面建立一個新的port 然後 指定到特定資料夾，建立完 Vi r t u a l H o s t 之 後 我 們 先 運 行一個背景常駐程式來檢查 資料庫裡面有沒有需要push 的資料，有的話就用我們剛 剛建立的virtual host 來 push 出去，如此一
NYU CLOUD EXPO' 2012
F
來只要我們一把需要push的 資料寫入資料庫時他就會自 動被push出去，而如何將需 要push的資料寫入資料庫就 是用一般的php+MySQL 語 法來實現，寫到這邊push server 終於做好了，但是 別忘記我們還要寫iOS 的 code，在手機部分為了實現 push功能，我們必須得到每 支手機獨一無二的token， 注意是token 不是機碼，一 隻手機只有一個機碼，但是 每個app 都會有不一樣的 token for pushservice，獲 取token 的方法是在手機的 delegate 裡面加code來跟 APNS 索取token，然後再把 這個token註冊到我們自己的 手機。
04 02