Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

IDF2013大会分享——《使用新浪移动云开发全平台应用》

  • Login to see the comments

  • Be the first to like this

IDF2013大会分享——《使用新浪移动云开发全平台应用》

  1. 1. 用新浪移动云打造全平台应用 @Easy
  2. 2. 什么是全平台应⽤用 2
  3. 3. 移动应⽤用 数 据 同 步 3
  4. 4. 全平台应⽤用 API
  5. 5. 新浪移动云平台 –  使⽤用SinaAppEngine实现云端API–  使⽤用HTML5开发WebAPP–  使⽤用中间件打包NativeAPP
  6. 6. ? 新浪移动云平台 能开发出什么样的应⽤用 6
  7. 7. TeamToy 全平台团队TODO⼯工具 TeamToy.org7
  8. 8. TeamToy WEB
  9. 9. TeamToy Mobile
  10. 10. TeamToy–  TODO、Feed流,且均⽀支持评论–  下拉刷新,摇⼀一摇清除已完成TODO–  联系⼈人浏览、同步、群发短信–  语⾳音识别、扫描⼆二维码登⼊入–  Web、Android、iOS、PC/Mac客户端
  11. 11. TeamToy–  1个⼈人,180⼩小时*–  PHP/MySQL/HTML/CSS/JavaScript–  Chrome、SVN、Notepad++
  12. 12. TeamToy Github.com/easychen/TeamToy Github.com/easychen/TeamToy-­‐Pocket Github.com/easychen/TeamToy-­‐Plugins
  13. 13. 使⽤用SAE实现云端API13
  14. 14. Sina App EngineWeb应⽤用开发和运⾏行平台 sae.sina.com.cn
  15. 15. 分布式访问控制
  16. 16. 运⾏行时和沙箱
  17. 17. 服务 分布式缓存 MySQL数据库集群 批量任务调度
  18. 18. 更多服务 –  键值数据库、定时任务、计数器排⾏行榜 –  分词、全⽂文检索 –  短信发送、地理信息、⾳音频⼆二维码
  19. 19. LazyRest通过Web配置的API Server h7ps://github.com/easychen/lazyrest/
  20. 20. LazyRest–  数据库+元数据 = API–  读取数据库信息,让开发者指定元信息 – 通过元信息直接实现API,当元信息发⽣生变动时,⽆无需编码,接⼝口直接可⽤用
  21. 21. LazyRest
  22. 22. LazyRest
  23. 23. LazyRest
  24. 24. LazyRest I/O 过滤设置
  25. 25. LazyRest
  26. 26. LazyRest
  27. 27. 更多信息请访问LazyRest@Github Github.com/easychen/lazyrest
  28. 28. 使⽤用HTML5实现WebApp28
  29. 29. WebApp ≠ WebPage
  30. 30. WebApp API JS模 控制 数据 板 器 对象 云端 浏览器
  31. 31. 离线状态使⽤用Local storage和Indexed DB
  32. 32. Local storage 缓存 Json 接⼝口数据–  当API成功返回时更新本地缓存 –  当⺴⽹网络请求失败时使⽤用本地数据 –  典型场景:信息流
  33. 33. Local storage 缓存 Json 接⼝口数据
  34. 34. Indexed DB实现本地持久化–  以离线为前提设计相关功能 –  联⺴⽹网时向云端同步数据 –  典型场景:离线操作TODO–  不适合:及时性和⼀一致性强的情况
  35. 35. Indexed DB实现本地持久化 同步 JS模 控制 数据 板 器 对象 云端 持久化 Indexed   DB 浏览器
  36. 36. Indexed DB实现本地持久化 JS模 控制 数据 板 器 对象 云端 持久化 Indexed   DB 浏览器 离线正常⼯工作
  37. 37. Responsive Design⼀一套CSS兼容平板和⼿手机设计
  38. 38. Responsive Design 平板
  39. 39. Responsive Design ⼿手机
  40. 40. Responsive Design
  41. 41. JS/UI库的选择和⽐比较
  42. 42. JS/UI库的选择 标签式 对象式
  43. 43. JavaScript库的选择 ⽀支持IE 不⽀支持IE
  44. 44. Lib.Sinaapp.ComJavaScript公共库CDN加速服务
  45. 45. 使⽤用中间件打包NativeAPP45
  46. 46. 打包的好处–  调⽤用更多的接⼝口,如通讯录*、短信 –  主动消息:推送 –  独⽴立⼊入⼝口:桌⾯面图标* –  更多渠道:应⽤用商店和下载⺴⽹网站
  47. 47. CORDOVA PhoneGap
  48. 48. CSS JavaScript 浏览器内核 JavaScript 接⼝口 本地接⼝口
  49. 49. 标准接⼝口
  50. 50. 新浪云扩展接⼝口 h7ps://github.com/sinacloud/phonegap-­‐plugins–  微博插件 –  定时器 –  语⾳音识别 –  顶栏管理 –  图像滤镜 –  ⼆二维码 –  短信发送 –  系统⼯工具集 退出、唤醒
  51. 51. 新浪移动云平台⼀一站式全平台应⽤用流⽔水线
  52. 52. 在线编辑
  53. 53. 实时调试云窗调试器
  54. 54. 实时调试
  55. 55. 云端打包
  56. 56. 下载&发布
  57. 57. 代码模板可快速修改的项⺫⽬目原型
  58. 58. 选择代码模板
  59. 59. 默认模板针对移动Web优化的HTML5空⽩白模版
  60. 60. Tab模板 JqueryMobile + LazyRest 常⽤用资讯类应⽤用模板
  61. 61. 社交应⽤用模板 oPath 社交类应⽤用模板
  62. 62. 云打包器已开源Github.com/sinacloud/PhoneGap-­‐PackagerWe love open source
  63. 63. SinaCloud.com更多资讯和资源请访问官⽅方⺴⽹网站 @SinaAppEngine @Easy 可到Demo展台试⽤用
  64. 64. software.intel.com/html5

×