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

時間 2019-11-21

標籤 ios 行車服務 app 客戶端後端思路代碼欄目 iOS 简体版

原文原文鏈接

最近開發了一個行車服務項目，iOS客戶端採用Objective-C編寫，後端採用PHP搭建，部署在阿里雲，操做系統爲Linux CentOS 7.3，數據庫MySQL，服務器爲Apache，是比較基礎的LAMP組合。

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

後端代碼比較簡單，想要本身嘗試開發API的iOS開發者能夠參考。

發這篇文的主要目的是對最近的開發作一個總體回顧，同時但願對有須要的同窗提供到一些幫助，有不少不盡合理和完善的地方，也請求各位同窗不吝賜教，感謝你們！

首先上總體的效果圖：
ios

在POI檢索結果頁面，地圖控件顯示爲空白，是由於模擬器運行的緣由，真機效果良好git

這裏是 iOS項目地址、後端項目地址。若是有幫助，但願點一下`Star`以示鼓勵，感謝~

這裏是後端代碼簡析的文章後端代碼簡析github

「Tips」：對於發現代碼運行報錯的同窗，項目使用CocoaPods進行第三方庫的集成。以前爲了方便我對Pods文件夾作了ignore操做。剛剛已經更新，你們能夠直接打開後綴爲xcworkspace的項目文件運行。不過這樣Github上面的項目體積會比較大。web

簡單介紹：項目UI總體儘可能保持了餓了麼的藍色風格，其中某些頁面參考了高德地圖、餓了麼、Max+的設計風格。sql

項目功能點

帳戶、用戶資料管理
參照餓了麼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

地理位置和天氣部分。
- 這部分是單獨封裝的View，UI參考了餓了麼。地理位置和通知列表按鈕的點擊事件採用代理交由當前VC實現。
- 因爲模擬器定位獲取的座標沒法使用高德地圖的國內API，我對運行環境作了一下判斷，若是是模擬器運行，則設置了默認座標，對應地點大概是北京市海淀區北京理工大學。
- 當前VC加載過程當中，開啓定位，在地理位置反編碼的成功回調中調用天氣信息的接口。注意地理位置和天氣信息的UI更新放在主線程執行。
- 點擊地理位置的文字時，會模態彈出從新定位的界面，從新定位按鈕的點擊事件使用代理交由主界面VC實現，避免在此界面再次實例化定位相關的對象。
功能欄
- 使用UICollectionView展現。各個Cell的Icon使用阿里巴巴的iconfont圖標，將以往的圖片素材轉爲字體來使用，對於素材整理、高清保真、代碼方便來講有極大的效率提高。在Web、移動客戶端開發領域已經很是普遍地在使用。

某一功能VC

這部分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<0){
    NSLog(@"tttt");
    if (self.poiList.frame.origin.y == 300){
        [UIView animateWithDuration:0.2 animations:^{
            showMap = NO;
            self.navigationController.navigationBar.hidden = NO;
            self.poiList.frame = listFullFrame;
        }];
    }
}
}複製代碼

在界面加載時，使用了本身封裝的loading頁面：
後端

IMG_2018.PNG
- 在頁面view加載的最開始，將loading頁的view加入到當前VC的view中。在頁面數據加載完成的回調中，調用tableview的reload方法，然後將loading頁移除。
- loading頁使用basicAnimation製做了簡單的呼吸動畫，keyPath爲logo圖標的透明度。
第一個cell的POI地點默承認預定，顯示預定圖標，點擊進入預定界面。
api

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的過程當中，緩存數據都有可能發生變化。
- 我的信息
  - 頁面依然採用tableview實現。在信息編輯頁面，仿照了微信信息更改頁面的邏輯。頁面出現時，當即彈出鍵盤。關於使textField在頁面加載完成時即成爲第一響應者的問題，須要重寫- (BOOL)becomeFirstResponder方法。代碼以下：
```
- (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級別，並做正確顯示。
- 退出登陸
  - 點擊此按鈕，清除userDefaults中相關數據，而後模態彈出登陸頁面。
  - 這裏能夠注意的一點是，咱們在模態彈出登錄頁，而且再次登陸以後，界面是在退出登陸以前的頁面的，也就是tab欄的第三個頁面。若是想要再次登陸以後，界面出如今tab欄的首頁，咱們能夠在模態彈出登陸頁的完成回調中，對當前tabVC的selected index進行設置。代碼以下：
```
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;
              });
          });
      }];複製代碼
```