Develop web based cross platform mobile application

开发基于WEB 技术的跨平台移动应用
Cordova phonegap angular.js node.js gulp bower iOS android
My blog:http://toozhao.com/

Transcript

1. 开发基于Web跨平台移动应⽤用 Develop Web based cross platform mobile application
2. 为什么我要选基于web的⽅方式?
3. Demo time
4. 其他的优点呢？
5. 学习成本低
6. 开发快速，⼤大量 web 开发组件供 使⽤用
7. 天⽣生跨平台，编写 ⼀一次，多平台运⾏行
8. Cordova/ Phonegap 越来越多的plugin, 已经⽀支持⼤大部分对 系统功能的操作 相机 通讯录 重⼒力感应 运动感应 ⽂文件系统 截图 电池信息 软件国际化 ⾳音视频操作 ⺴⽹网络信息等
9. ⼯工欲善其事，必先利其器 打造⾼高效的开发环境、框架、配置
10. •基于Angular 的框架，提 供⼤大量的插件和directive •卓越的性能，最⼩小化的 DOM 操作、⽆无jQuery、基 于硬件加速的动画 •漂亮的UI，类iOS 7的扁平 界⾯面⻛风格 •社区驱动，演进很快，基 本每两周就有⼀一个新版本 诞⽣生 •刚获得投资$1million
11. • Angular directive • ⽀支持滑⽤用户动操作 ! List
12. Tabs •可嵌套的视图 •每个tab 都有⾃自⼰己的操 作历史
13. Side menu
14. Action sheet
15. Pull to refresh
16. node.js 项⺫⽬目依赖管理、构建等相关操作
17. • gulp-minify-css 压缩CSS • gulp-concat 合并CSS、 JS 等assets • gulp-coffee coffee 转js • gulp-uglify js 压缩 • gulp-exec 执⾏行shell 命令（类似 maven-exec-plugin） • gulp-bower 对项⺫⽬目进⾏行js、 CSS 依赖进⾏行管理 • http-server node web 服务器，实时预览所开发应⽤用
18. CoffeeScript 代码更可读、像写Class ⼀一样书写Angular 代码
20. 不同环境配置⽂文件 local / dev / sys / uat / production libr = angular.module 'libr.constant',[] ! Constant = {} Constant.baseUrl = "http://librme.com/api/v1" ! libr.constant 'Constant', Constant var paths = { prod: ['env/prod/**.coffee'] }; ! ! gulp.task('uglify-scripts', function () { gulp.src(paths.scripts.concat(paths.prod)) .pipe(coffee()) .pipe(uglify({mangle: false})) .pipe(concat('all.min.js')) .pipe(gulp.dest('www/dist/js')); });
21. Testing
22. Safari remote debug
23. Weinre • 可以查看HTTP请求 • 可以读取session、web storage • 可以查看console.log 消息 • 可以查看HTML 、CSS代码
24. 其他的⼀一些Tools
25. iOS 真机调试证书
26. DigitalOcean VPS hosting
27. Dokku Docker powered mini-Heroku
28. 多去想，并快速验证你的想法 谢谢