本项目的需求还不是特别完整,并不是一个完整的项目,其主要目的还只是用于学习,适合给想用Ionic做项目的同学做参考。编码方面还有很多地方需要改善,如果您能献上宝贵的建议,不甚感激!
本项目包括两个客户端,分别是车主端、货主端。服务端代码使用的是Node.js,Express4框架,数据库采用MongoDB,使用Mongoose来操作MongoDB数据库。
物流配货车主端Hybrid App主要的功能有:
1、用户注册、登录,用户上传个人照片。
2、首页会定位到车主当前城市,然后显示出发地为当前城市的所有货源列表。
3、搜索货源。(模糊查询)
4、车主可以对货源进行抢单,抢单操作完成后生成运单。并且服务端会推送一条类似【已有车主接了您的货源】的通知给货主。
5、添加车辆。
6、发布车源。
物流配货货主端Hybrid App主要的功能有:
1、用户注册、登录,用户上传个人照片。
2、发布货源,系统会将该货源与系统中未交易的车源进行匹配,然后推送一条类似【您收到一条新的货源】的通知给多个符合条件的车源的车主。
3、查看运单。
使用到的关键技术有如下:
- ionic - HTML5框架,可以帮助快速打造界面优美的app,基于AngularJS与Cordova,详细教程参见ionic官网。
- CrossWalk - 用于提升性能。
- 相机拍照。
- 上传图片到服务端。
- 百度地图定位API。
- 百度地图位置关键词搜索API。
- 百度地图计算两地距离API。
- JPush消息推送。
首先,为项目添加对应平台,此App主要应用于Android系统,IOS系统暂时不考虑。
ionic platform add android
其次,插件安装,
// ngCordova
bower install ngCordova --save
ngCordova官网地址:http://ngcordova.com/
// 相机、文件插件
ionic plugin add cordova-plugin-camera
ionic plugin add cordova-plugin-file
ionic plugin add cordova-plugin-file-transfer
// 在项目中调用原生页面切换插件
ionic plugin add https://github.com/Telerik-Verified-Plugins/NativePageTransitions#0.6.2
// 如果是IOS还要添加
ionic plugin add cordova-plugin-wkwebview
原生页面切换插件GitHub地址:https://github.com/shprink/ionic-native-transitions
// 使用百度地图插件,后来自己修改了这个插件,修改内容后续内容会讲
ionic plugin add https://github.com/mrwutong/cordova-qdc-baidu-location --variable API_KEY="API_KEY"
API_KEY为你自己的key,详细教程参考百度定位SDK。另外还需要在build.gradle上添加
sourceSets {
main {
jniLibs.srcDirs = ['libs']
}}
// 极光推送插件
cordova plugin add jpush-phonegap-plugin --variable API_KEY=your_jpush_appkey
需要到极光推送官网注册一个账号,然后到自己的控制台创建一个应用,注意应用名称与项目名称一致,应用包名务必为你项目的包名(可以在config.xml中查看),创建成功后会生成一个appKey,使用这个appKey来安装极光推送插件。 极光推送官网文档:http://docs.jpush.io/
cordova plugin add cordova-plugin-crosswalk-webview
注意:
-
集成Crosswalk以后,apk比原来大了20MB左右,但是app速度明显比以前快了很多,没那么卡了。
-
在platform/android目录下新建gradle.properties文件,内容为:
android.useDeprecatedNdk =true
,否则放到Android studio中build的时候会报Ndk的错误。 -
在config.xml文件中添加:
<!--if you are using Crosswalk > 1.3 please add the following to your config.xml-->
<preference name="CrosswalkAnimatable" value="true" />
Crosswalk官网地址:https://crosswalk-project.org/
注意:运行之前要先开启MongoDB服务,将用NodeJS写的服务端跑起来,然后修改www/js/config.js文件中的api为你本机的IP地址,服务端代码地址戳这里:https://github.com/Mxxim/nodejs_logistics
刚开始数据库中没有数据,所以看不到什么效果,如果想要看效果图,可以移步本人博客:http://www.cnblogs.com/mxxim/p/5584821.html
测试机:酷派f2全网通(Android4.4);华为荣耀3C(Android4.2)