「iOS」行车服务app 「客户端、后端思路+代码」

  • 最近开发了一个行车服务项目,iOS客户端采用Objective-C编写, 后端采用PHP搭建,部署在阿里云,操作系统为Linux CentOS 7.3,数据库MySQL,服务器为Apache,是比较基础的LAMP组合。
  • iOS端代码部分我会讲述整体的开发思路,一些有意思的功能点也会详细说说。
  • 后端代码比较简单,想要自己尝试开发API的iOS开发者可以参考。
  • 发这篇文的主要目的是对最近的开发做一个整体回顾,同时希望对有需要的同学提供到一些帮助,有很多不尽合理和完善的地方,也请求各位同学不吝赐教,感谢大家!

首先上整体的效果图:


show.gif

在POI检索结果页面,地图控件显示为空白,是因为模拟器运行的原因,真机效果良好

这里是 iOS项目地址后端项目地址 。如果有帮助,希望点一下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展示。各个CellIcon使用阿里巴巴的iconfont图标,将以往的图片素材转为字体来使用,对于素材整理、高清保真、代码方便来说有极大的效率提升。在Web移动客户端开发领域已经非常广泛地在使用。
  • 某一功能VC
IMG_2011.PNG
  • 这部分UI参考了高德地图附近界面UI以及部分特性。导航栏隐去,最上面是一个地图控件,以及透明的返回按钮。下面是POI信息的tableview。在tableview向下滑动时,地图隐去,tableviewframe上移,导航栏出现。向上滑动到顶部时,tableview下移,地图出现,导航栏隐去。
  • tableview滑动时特性的实现:通过scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate代理方法,判断滑动的方向,从而对tableviewframe以及导航栏等元素进行操作。
    代码如下:
//判断滑动手势方向,决定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中。在页面数据加载完成的回调中,调用tableviewreload方法,而后将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图。移除时机就简单放在了webViewfinishLoad回调方法中。其实对于Webview真正加载完成时机的判断还有很多可以聊的东西,日后补充。

  • 设置页面

IMG_2015.PNG
  • 这个页面显而易见是采用两个sectiontableview实现。在页面的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;
                    });
                });
            }];
    

代码的主要开发思路基本讲述完,具体的细节大家可以和我继续交流~项目中有许多不尽合理的实现方式,小部分是考虑到时间因素。欢迎大家进行讨论、指教。
有相关的问题,欢迎大家进行留言。项目中使用的自有接口,部署在我的阿里云服务器中,可外网访问。请求大家合理使用。

后端项目数据库相关的sql代码,我已上传至后端项目

如果大家有兴趣,以后我可以再讲述一下server端的代码,当然,后端我也是初学者的水平,仅供想要入门的同学参考。

我的个人博客网站地址: Halo的个人博客 ,欢迎大家访问。

代码已开源,地址在文章首部。如果点一下star,我真的会非常感谢~
halo

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,117评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,328评论 1 293
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,839评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,007评论 0 206
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,384评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,629评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,880评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,593评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,313评论 1 243
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,575评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,066评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,392评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,052评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,082评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,844评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,662评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,575评论 2 270

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,569评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,614评论 4 59
  • 作者:邓安庆 她坐在教室里一点儿都不显眼,常常坐的是第五排第四个位置,前三个位置是她的室友。上课前她们围在一起说话...
    睡神YZY阅读 1,255评论 0 2
  • 假日期间,在我们尽情出门游玩的时候,有一群年轻的小伙子,他们却要放弃休息的时间,全副武装地在城区的各个角落来回巡守...
    燕赵警务资讯网李春亮阅读 548评论 0 0
  • 今天,上课发现学生去体检了,刚好隔壁班有一节语文的公开课,就去听了,也算是意外的收获。这节课上的是语文课《春夜宴从...
    lucyqing阅读 668评论 1 2