reference-project / ionic_logistics_cargo Goto Github PK

#用Ionic开发的物流配货App

 本项目的需求还不是特别完整，并不是一个完整的项目，其主要目的还只是用于学习，适合给想用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

// 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/

###集成Crosswalk

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）