CON+ 獲得 SDN 國際服務設計大賽學生組 Winner
More

設計報告內容 - 子文

ios程式設計的資料庫是以SQLite3.0來進行。資料庫設計的種點在於隨叫隨用的API架構,在訂定好規格與細節之後,只需要協調好溝通介面。可以減少需要用到資料庫的人,使用上的複雜度。透過資料庫提供的功能可達到新增、刪除、搜尋等功能。

[景點資料庫]

手機內含的熱門景點資料建置是來自於交通部觀光局的介紹,提供使用者在沒有網路服務的情況下也可以進行景點的搜尋及觀看介紹。

  • 新增

     新增一筆景點,若景點已存在進行資料更新

  • 刪除

    刪除一筆景點

  • 搜尋

    以關鍵字搜尋景點清單、以地理位置直半徑搜尋景點清單、以景點ID取得景點詳細資訊等

[行程資料庫]

行程編輯完成後,可以儲存起來,或發送給朋友徵詢意見或共同編輯。通過伺服器傳送而來的行程也可以存入資料庫內

  • 新增

     新增一筆行程,若行逞已存在進行資料更新、為行程添加細項

  • 刪除

    刪除一筆行程

  • 搜尋

   取得所有的行程、取得一筆行程的所有細項

[訊息資料庫]

紀錄與聯絡人往返的訊息傳遞

  • 新增

     新增共同編輯的對象、根據對象與時間點新增一筆留言資訊

  • 刪除

    刪除留言

  • 搜尋

   以行程ID取得共同編輯的聯絡人、以聯絡人名稱取得所有的留言、取得一筆行程的所有留言

設計報告內容 - 子為

我負責的部分是Trips行程列表頁面以及手機之間訊息的傳遞,包含架設GAE Server以及Push推播通知功能。

[Trips行程列表 - 外觀及功能]

這個地方的功能是要顯示所有的行程,包含自己的行程以及朋友送來的行程,一開始要先”客制化”我們的列表,像是要放行程的名稱,修改的日期,以及行程的preview還有共同編輯人的大頭照等等,在客制化的部分我先用StoryBoard的元件把我們要的外觀先建立好,設定位置與長寬,然後再建立一個Class來描述每個元件要做的事情,像是什麼資料要傳到什麼位置,或是點下哪個按鈕要發生什麼事情等等,最後,在Trips的頁面匯入該Class來建立我們的table cell就成功了!

[Trips行程列表 - 網路資料與本機資料]

處理Trips頁面的資料很麻煩,因為資料來源包含網路(朋友寄過來的)以及本機(自己儲存的),所以在Trips頁面我首先將網路的資料下載下來(Json格式),用JSON的library去parse他,將他存成Array與Dictionary,然後再與本機資料庫比對是否有新資料,有的話就存入本機端,等到本機與網路端Sync完畢之後,再從本機端將所有資料讀出,顯示在Trips頁面。

[發送行程頁面 - 資料傳送]

這頁的layout以及facebook選好友的功能是泓其做的,我主要是在處理選完好友之後將行程送出的這件事,因為一個行程可能會有多位好友一起編輯以及含有多個景點,所以在傳遞資料的時候就必須使用批次上傳的方法,然後在Server那邊再把整包好友或是景點解析出來。

[GAE Server]

為了讓手機之前可以傳遞資料,我用Google App Engine (GAE)架設了一個Server,讓每隻手機的本機資料可以上傳到Server做備份,並且寄送給其他人,比較麻煩的部分是因為每個行程會有很多的景點以及很多個共同編輯人,所以在處理上必須使用多維矩陣去處理,然後再把矩陣轉成json格式傳回手機。

[Push推撥通知]

為了讓我們的app更fancy,我們把他做的像是what’s app或是Line一樣,當有人寄行程給你時你的手機就會咑啷的響一下,並起跑出我們的mark以及一些文字,這個部分使用的是Apple Push Notification Service (APNS)的功能,主要參考http://www.raywenderlich.com/3443/apple-push-notification-services-tutorial-part-12這篇,要做到Push的功能,首先必須到iOS developer的地方申請開通push功能,並將要用來做push的key hash上傳到iOS developer,上傳成功以後再把新的憑證下載下來安裝到要開發的電腦裡,然後開始建立自己的push server (沒錯,到現在都還沒開始寫手機程式),建立自己的push server必須先安裝架站程式Apache,然後安裝php,然後再安裝MySQL資料庫,這三個東西可以分開裝也可以下載別人的懶人包一次裝好,懶人包在windows叫做XAMPP,在Mac叫做MAMP,whatever裝好架站程式之後你就有一個個人網站,然後開始架設push server,要架設push server首先我們先建立一個虛擬主機(Virtual Host)以免干擾到正常的port80,建立的方法是在Apache的config檔案裡面建立一個新的port然後指定到特定資料夾,建立完Virtual Host之後我們先運行一個背景常駐程式來檢查資料庫裡面有沒有需要push的資料,有的話就用我們剛剛建立的virtual host來push出去,如此一來只要我們一把需要push的資料寫入資料庫時他就會自動被push出去,而如何將需要push的資料寫入資料庫就是用一般的php+MySQL語法來實現,寫到這邊push server終於做好了,但是別忘記我們還要寫iOS的code,在手機部分為了實現push功能,我們必須得到每支手機獨一無二的token,注意是token不是機碼,一隻手機只有一個機碼,但是每個app都會有不一樣的token for push service,獲取token的方法是在手機的delegate裡面加code來跟APNS索取token,然後再把這個token註冊到我們自己的資料庫以便之後能夠push到此手機,完成!

設計報告內容 - 泓其

TripTalk 的 Project 中,我主要負責的部份為 Storyboard 的建立以及 Facebook SDK 使用,而前兩部分完成後,就開始協助介面動畫美化部分。

[Storyboard]

Storyboard 的部份為 xcode 4.2 新提出之功能,將以往的 Interface Builder 功能更加延伸。過去僅能針對單一個 View 設計其 UI layout,而在 Storyboard 的環境下,每個 ViewController 就像是 App 中的每個畫面,可以利用 Segue 連線的方式將每個 ViewController 都串接起來,因此從 Storyboard 上就可簡單的看到程式的 flow diagram!同時也降低了 UI 設計人員對於 Xcode 的門檻,讓程式與介面設計能夠配合的更完整!

TripTalk Storyboard:

當然一開始 Storyboard 的建立都相當的簡單,因為不用動到程式碼只要拉拉線即可做出簡單的 Prototype!不過越到後面,就會發現每個頁面的串連之間相當複雜,可能 NavigationBar 的按鈕要連一個頁面、下方的 TableViewCell 又要連一個頁面!因此就會出現上方有點小複雜的 Storyboard,過程中有個需特別留意的點,因為 Storyboard 是可以真的透過Modal、Push、…等等的方式將頁面跳轉,因此在頁面之間傳值的動作就需要特別寫出來,而此功能就可利用 -(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender{} 來實作,當同一個頁面的 Segue 連線太多時,每條線上就必須註明其 identifier,才能將正確的值透過正確的 Segue 傳到對應的頁面喔!

[Facebook SDK]

因為 TripTalk 規劃好的行程可以發送給 FB 好友,請朋友推薦、或是共同編輯這份行程。因此我們就需要取得 Facebook Friends 的功能。然而要在 iOS 上開發 Facebook 相關的應用程式,絕對不能不知道 Hackbook (https://github.com/facebook/facebook-ios-sdk/tree/master/sample/Hackbook) 是一個將 iOS Facebook 大部分的 SDK 實作出來的範例,除了看官方的 iOS Tutorial for Facebook (https://developers.facebook.com/docs/mobile/ios/build/) 之外,從 Hackbook 中更可看到各個 SDK 被實作使用的過程,對於程式開發也更有幫助。一開始遇到最大的問題就是要利用 Delegate 的方式取得 Facebook 的 Access Token,後來了解了 Delegate 與 Protocol 的概念後,對於 Hackbook 的程式也能慢慢了解!

取得好友清單的部份,主要呼叫 [[delegate facebook] requestWithGraphPath:@”me/friends” andDelegate:self]; 這個 API,但因為我們除了所有朋友之外,更希望能夠將同樣有使用 TripTalk 的朋友優先顯示出來,因此我們也需要  [[delegate facebookrequestWithParams:@”friends.getAppUsers”@”method” andDelegate:self]; 這個 API,當然要發送給朋友,取得自己的資料也是很重要的,因此 [[delegate facebook] requestWithGraphPath:@”me” andParams:params andDelegate:self]; 取得個人資料的 API 也會使用到!經過資料的回傳再整合後,就可以呈現個人的好友列表啦!過程中也了解了 iOS 中 connection、JSON、以及 TableViewCell 的用法,學到很多細節的東西!

[介面動畫]

實作介面動畫的過程中非常有趣,有時候千言萬語不如一分鐘的影片來的清楚!與設計同學的溝通就靠著一段影片,呈現明確且清楚的需求,也讓我在開發上相當順利!開發內容主要都是利用 UIViewAnimation 的元件來實現,藉由設定起始大小或位置、結束大小或位置、動畫過程的時間、…就可讓我完成了:下拉抽屜的彈性開關、地圖景點標記的縮小放大、新增景點的彈力提示以及圖片動畫等。實作後覺得不是太複雜的功能,但卻讓整個 App 的質感往上加分的不少,效果滿分!

05/28

今天進行了五個小時的co-work,主要進行的內容為與好

友互相溝通彼此意見架構流程設計。

伺服器與手機端的整合必須要共同進行,整合完成後在套

上設計團隊精美的UI,兼顧功能與介面,完整且精美的產

出。

溝通用UI

另一方面景點資訊的資料庫建置也在同步進行。

資料庫設計的種點在於隨叫隨用的API架構,在訂定好規

格與細節之後,只需要協調好溝通介面。可以減少需要用

到資料庫的人,使用上的複雜度。

齊全的景點資料庫,是我們的app所需的基本功能,除此

之外還必須具備擴展、刪除、更新等功能。

同時配合展示景點資訊的UI畫面,可以達到很棒的效果呈

現。

景點資訊UI

05/31 介面Demo

期末發表將近,資工團隊徹夜寫code,以下是一個晚上的感人產出。

【將景點由清單加到時間軸】

景點清單拖拉到時間軸完成!而且有清楚的景點圖片了!

景點詳細資訊的對話框部分,風格確定,使用有紙質感的淺灰色調,並加上陰影增加整體空間感。

【好友增加註解】

使用者或是朋友藥在景點上曾加註解,長按畫面空白處,便會出現中間長的像箭靶的圖像,點選之後會出現對話泡泡,可以在裡面增加註解,這個部分仍在嘗試,包含是否直覺以及尺寸是否適中。

介面細節設計端仍在微調中,一微調完就會馬上PO到Dropbox讓資工Test;資工團隊有新的產出也會馬上po到社團做確認與校正,來來回回修改花去不少時間,但介面細緻度都一次比一次更好;另外,朋友新增註解的泡泡仍在努力中,各位加油!

05/30 介面Demo

【Timelin模式】

1.橫向介面decoration:

Timeline及Timeline起始點。

景點清單Bar。

景點分類icon。

Topbar的next鍵(右)和list鍵(左)由文字按鍵換成圖像按鍵。

2.動態:

景點清單bar由上往下彈出。

Timeline可左右滑動。

  

【搜尋結果顯示】                        

搜尋結果顯示working

searchbar decoration

【map操作模式】

1.decoration:

一般景點圖釘(灰色)。

景點泡泡(info和+的icon尚未更新)。

景點清單/景點分類icon。

Topbar的next鍵(右)和list鍵(左)由文字按鍵換成圖像按鍵。

2.動態:

景點清單bar由上往下彈出。

按對話泡泡中的+,可以將景點新增景點清單中。

05/17

本週討論的過程中大家收集並嘗試了許多資料

如:iPhone 預設元件大小 http://www.idev101.com/code/User_Interface/sizes.html

GAE 小 demo:http://map-out.appspot.com/

當然!程式組與設計組也如火如荼的繼續進行中

秉均已經開始製作購物車以及橫向時間軸的模組

當然子文的 SQLite 、子為的 GAE Server、泓其的 FB Connect SDK

也持續的進行中,只是沒有圖!

設計組也設計出了更詳細美觀的地圖畫面:

只能說從資工的角度來看這些設計畫面

真的都超美觀的阿!!!

繼續前進吧!各位組員們~

05/24 設計報告內容-秉鈞

    經過一大段時間,大家已經寫了不少的程式碼,也利用到設計模式的威力將專案包裝了起來。同一時間,我們組內的設計大師也將APP要用到的使用者互動介面設計完成。所以我們要把介面美化起來以及加上一些很酷炫的動畫上去。

    其中介面的話,我們傾向於將設計同學設計出來的介面,以元素裁切出不同的部份,並且對應上去。所以有很多客製化的按鈕和客製化的大頭針及陰影。回想起來,當時覺得比較難的技術是把上方的那一條上上去漸層的顏色,因為預設他只能選擇一種顏色,所以比較困難。最後我們找到核心的iOS函式硬是將漸層用圖層的方式加上去。

    以下是要做可以拉動的抽屜的示意圖,首先要加上位置偵測並隨之滑動的程式,接下來還要記錄最後的位置趨勢變化,以決定要往上還是往下滑動到底。

 

 

   新增景點到下方的購物車也有相對應的動畫,翻頁也是有旋轉的特效。我們主要是使用到iOS給介面使用的動畫函式來達成!