「iOS」行車服務app 「客戶端、後端思路+程式碼」

• 最近開發了一個行車服務專案，iOS客戶端採用Objective-C編寫， 後端採用PHP搭建，部署在阿里雲，作業系統為Linux CentOS 7.3，資料庫MySQL，伺服器為Apache，是比較基礎的LAMP組合。

• iOS端程式碼部分我會講述整體的開發思路，一些有意思的功能點也會詳細說說。

• 後端程式碼比較簡單，想要自己嘗試開發API的iOS開發者可以參考。

• 發這篇文的主要目的是對最近的開發做一個整體回顧，同時希望對有需要的同學提供到一些幫助，有很多不盡合理和完善的地方，也請求各位同學不吝賜教，感謝大家！

首先上整體的效果圖：

show.gif

在POI檢索結果頁面，地圖控制元件顯示為空白，是因為模擬器執行的原因，真機效果良好

這裡是 、 。如果有幫助，希望點一下Star以示鼓勵，感謝~

這裡是後端程式碼簡析的文章

「Tips」：對於發現程式碼執行報錯的同學，專案使用CocoaPods進行第三方庫的整合。之前為了方便我對Pods資料夾做了ignore操作。剛剛已經更新，大家可以直接開啟字尾為xcworkspace的專案檔案執行。不過這樣Github上面的專案體積會比較大。

簡單介紹：專案UI整體儘量保持了餓了麼的藍色風格，其中某些頁面參考了高德地圖、餓了麼、Max+的設計風格。

專案功能點

• 賬戶、使用者資料管理

• 參照餓了麼UI的定位、天氣模組

• 基於高德地圖API開發的POI檢索，同時介面也加入了一些和高德地圖app類似的特性

• 自定義互動邏輯的預定及結果通知功能

• 簡單參照Max+app的資訊模組

• 使用者歷史足跡、歷史事件維護

專案使用到的API及第三方庫

• 高德地圖API

• 和風天氣API

• 自己搭建的後端相關介面

• AFNetworking 3.0

• SDWebImage

• MBProgressHUD

• 專案內的Icon大量使用阿里巴巴的iconfont圖示，極力推薦

專案涉及的技術點

• 高德地圖API的相關使用。包括地圖、POI檢索、導航等功能。

• GCD的使用示例。包括耗時操作的後臺執行、UI更新相關操作等。

• NSUserDefaults維護賬戶資訊。這裡是為使用方便，僅供參考。

• Core Animation的使用。由於TableView載入時採用HUD的使用者體驗不是很友善，我自己封裝了Loading頁面。

開發思路

• 登入註冊頁面

IMG_2008.PNG

• 專案初始化時採用Tabbar VC作為rootController，如果此時沒有賬戶資訊，則採用模態彈出方式彈出登入頁面。

• 這部分比較簡單，客戶端會先對使用者輸入的資訊進行簡單的合法判斷，然後呼叫登入介面。

• 有一些關於TextField的點選空白和Return回收鍵盤以及撥出鍵盤時控制元件移位防止遮擋的程式碼可以注意一下。

• 在Tabbar VC初始化時，第一個tab欄的VC會進行定位操作，如果此時為已登入狀態，則直接呼叫傳送歷史足跡的介面。在未登入狀態下，使用者點選登入按鈕，登入成功時，會向第一個tab欄VC傳送一個呼叫歷史足跡介面的通知。

• 主介面（tabbar欄首頁）

IMG_2009.PNG

IMG_2010.PNG

• 地理位置和天氣部分。

• 這部分是單獨封裝的View，UI參考了餓了麼。地理位置和通知列表按鈕的點選事件採用代理交由當前VC實現。

• 由於模擬器定位獲取的座標無法使用高德地圖的國內API，我對執行環境做了一下判斷，如果是模擬器執行，則設定了預設座標，對應地點大概是北京市海淀區北京理工大學。

• 當前VC載入過程中，開啟定位，在地理位置反編碼的成功回撥中呼叫天氣資訊的介面。注意地理位置和天氣資訊的UI更新放在主執行緒執行。

• 點選地理位置的文字時，會模態彈出重新定位的介面，重新定位按鈕的點選事件使用代理交由主介面VC實現，避免在此介面再次例項化定位相關的物件。

• 功能欄

• 使用UICollectionView展示。各個Cell的Icon使用阿里巴巴的iconfont圖示，將以往的圖片素材轉為字型來使用，對於素材整理、高畫質保真、程式碼方便來說有極大的效率提升。在Web、移動客戶端開發領域已經非常廣泛地在使用。

• 某一功能VC

IMG_2011.PNG

• 這部分UI參考了高德地圖的附近介面UI以及部分特性。導航欄隱去，最上面是一個地圖控制元件，以及透明的返回按鈕。下面是POI資訊的tableview。在tableview向下滑動時，地圖隱去，tableview的frame上移，導航欄出現。向上滑動到頂部時，tableview下移，地圖出現，導航欄隱去。

• tableview滑動時特性的實現：透過scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate代理方法，判斷滑動的方向，從而對tableview的frame以及導航欄等元素進行操作。
  程式碼如下：

//判斷滑動手勢方向，決定tableview的frame改變-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{  CGPoint translation = [scrollView.panGestureRecognizer translationInView:scrollView.superview];  if (translation.y>0) {      NSLog(@"ssssss");
      {          NSIndexPath *dic = self.poiList.indexPathsForVisibleRows.firstObject;          if (self.poiList.frame.origin.y == 64 && dic.row == 0){
              [UIView animateWithDuration:0.2 animations:^{                  
                  NSLog(@"visible:::%@",dic);
                  showMap = YES;                  self.navigationController.navigationBar.hidden = YES;                  self.poiList.frame = listFrame;
              }];
          }
      }
  }else if(translation.y

• 在介面載入時，使用了自己封裝的loading頁面：
  

  

  IMG_2018.PNG

  
  

• 在頁面view載入的最開始，將loading頁的view加入到當前VC的view中。在頁面資料載入完成的回撥中，呼叫tableview的reload方法，而後將loading頁移除。

• loading頁使用basicAnimation製作了簡單的呼吸動畫，keyPath為logo圖示的透明度。

• 第一個cell的POI地點預設可預約，顯示預約圖示，點選進入預約介面。
  

  

  IMG_2012.PNG

  
  

• 這個部分的和後端的互動邏輯是自己定義的。一般的預約過程是預約請求傳送成功後，一段時間內由店家進行同意或拒絕操作，而後客戶端收到結果回執。由於本專案簡單模擬此過程，均使用http協議進行通訊。所以我的實現方式是後端收到預約請求後，直接採用隨機數方式模擬店家的接受或拒絕。一定時間後，客戶端呼叫結果查詢的介面來獲取預約結果。

• 實現方式為，點選預約按鈕，若預約介面呼叫成功，按鈕字樣變為預約中，鐘錶icon開始轉動，並且按鈕變為不可點選狀態。與此同時，使用performSelector方式延時呼叫獲取預約結果的介面。在此網路請求的成功回撥中，向主介面傳送通知，而後主介面通知按鈕右側顯示通知數量的紅色圖示。如圖。

• 這裡通知列表的資料是存在UserDefaults中的，不同裝置之間無法同步。其中涉及到一些userDefaults中資料要求的知識，具體可以參考程式碼。這裡是因為需求是臨時想出，如果常規實現方式需要開發獲取通知資料的介面。我為了節省開發時間所以採用這種方式來模擬實現了。這個地方在以後可以完善~
  

  

  IMG_2013.PNG

• 資訊Tab欄

IMG_2014.PNG

• 這裡沒有花費過多的精力。資料預置了網易新聞相關資料。介面UI參考了我常常使用的Max+iOS客戶端的資訊功能。第一個Cell以全圖為背景，可以用來突出顯示重點內容。

• 資訊詳情頁是一個簡單的webView。同樣使用了自己封裝的Loading圖。移除時機就簡單放在了webView的finishLoad回撥方法中。其實對於Webview真正載入完成時機的判斷還有很多可以聊的東西，日後補充。

• 設定頁面

IMG_2015.PNG

• 這個頁面顯而易見是採用兩個section的tableview實現。在頁面的viewWillAppear方法中，需要呼叫獲取快取資料大小的方法，單獨更新清除快取cell的內容。因為在每次切換tab的過程中，快取資料都有可能發生變化。

• 個人資訊

  - (BOOL)becomeFirstResponder

• 頁面依然採用tableview實現。在資訊編輯頁面，仿照了微信資訊更改頁面的邏輯。頁面出現時，立即彈出鍵盤。關於使textField在頁面載入完成時即成為第一響應者的問題，需要重寫- (BOOL)becomeFirstResponder方法。程式碼如下：

{
[super becomeFirstResponder];
return [self.textInput becomeFirstResponder];
}
```

IMG_2016.PNG

• 歷史足跡、歷史預定、積分資訊

IMG_2017.PNG

IMG_2019.PNG

- 這部分也依然使用了封裝的loading頁面。如果資料條目為空，則不顯示tableview，提示暫無相關資訊，如圖。

• 清除快取

• 這裡其實只使用了SDImageCache的相關方法。我們還可以清除本app的快取資料所在目錄來達到真正清除快取的目的，日後討論。

• 快取資料獲取的初始單位是B，我們需要除以10241次、2次來判斷當前資料是在KB級別還是MB級別，並作正確顯示。

• 退出登入

  DELoginViewController *loginVC = [[DELoginViewController alloc] init];
          [self presentViewController:loginVC animated:YES completion:^{            dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{                // 耗時的操作
                  dispatch_async(dispatch_get_main_queue(), ^{                    // 更新介面
                      AppDelegate * appDelegate = (AppDelegate*)[UIApplication sharedApplication].delegate;
                      appDelegate.tabbarVC.selectedIndex = 0;
                  });
              });
          }];

• 點選此按鈕，清除userDefaults中相關資料，然後模態彈出登入頁面。

• 這裡可以注意的一點是，我們在模態彈出登陸頁，並且再次登入之後，介面是在退出登入之前的頁面的，也就是tab欄的第三個頁面。如果想要再次登入之後，介面出現在tab欄的首頁，我們可以在模態彈出登入頁的完成回撥中，對當前tabVC的selected index進行設定。程式碼如下：

程式碼的主要開發思路基本講述完，具體的細節大家可以和我繼續交流~專案中有許多不盡合理的實現方式，小部分是考慮到時間因素。歡迎大家進行討論、指教。
有相關的問題，歡迎大家進行留言。專案中使用的自有介面，部署在我的阿里雲伺服器中，可外網訪問。請求大家合理使用。

後端專案資料庫相關的sql程式碼，我已上傳至後端專案。

如果大家有興趣，以後我可以再講述一下server端的程式碼，當然，後端我也是初學者的水平，僅供想要入門的同學參考。

作者：halohily
連結：