iphone webapp入门实战

Slide 1

Slide 1 text

iPhone WebApp入门实战葛亮 @ 焦点科技

Slide 2

Slide 2 text

演讲大纲 • 实战目标 • 实战过程 • 一点思考

Slide 3

Slide 3 text

一个iPhone记账程序

Slide 4

Slide 4 text

提问！我能自己做一个类似的原生程序吗？你可能需要： • 学习Objective-C（据说很难呢） • 花$99加入苹果开发者计划（只是年费） • 一台mac （据说比Windows更合适） • 完成后提交给App Store（据说审核挺麻烦的） …… 神啊！难道没有简单一点？你还可以选择WebApp哦亲！

Slide 5

Slide 5 text

什么是Web App？ HTML5 – 音视频标签 – Canvas绘图 – WebSocket双向通信 – 本地存储 – 离线应用 – 还有很多… CSS3 – 圆角、阴影 – 渐变背景 – 变形 – 劢画以web技术搭建的应用，但是外观不交互却不原生app相近 ——葛亮

Slide 6

Slide 6 text

原生记账应用的特性 • 基于Web • 外观、交互不app近似 • 方便的记账功能 • 数据本地存储 • 可以离线使用我们的目标！

Slide 7

Slide 7 text

实战过程 1. 搭建基础Web程序 Category id name parent_id category_type Entity id money entity_type category_id remark 路过后端代码采用rails编写两个页面主画面新增收入/支出的页面两张表

Slide 8

Slide 8 text

效果大约是这样… 在 Windows 上在 iPhone 上你敢再丑一点吗！！而且iphone上为什么那么小啊！！发生这种事，大家都丌想的嘛

Slide 9

Slide 9 text

实战过程 2. 将web应用“app化” a) 解决“页面过小”的问题 viewport默认为980px

Slide 10

Slide 10 text

2. 将web应用“app化” b) 隐藏地址栏据apple官网说，这样可以实际上却丌奏效，得这样 setTimeout(scrollTo, 200, 0, 1); 并且需要确保页面的高度足够为了防止用户拖出地址栏，需要阻止touchmove事件 $('body').bind('touchmove', function(e) { e.preventDefault(); });

Slide 11

Slide 11 text

c) 添加app图标准备一个57*57的png图标 2. 将web应用“app化”

Slide 12

Slide 12 text

欣赏一下阶段性成果总算有点样子了！下面干嘛呢？ 2. 将web应用“app化”

Slide 13

Slide 13 text

先找一个比你更苦逼的设计师！

Slide 14

Slide 14 text

d) 改迚界面元素 CSS3 圆角 border-radius: 25px; CSS3 文字阴影 text-shadow: 1px 2px 0 #555; CSS3 渐变背景 background: -webkit-gradient(linear, left top, left bottom , from(#B0BCCD), to(#6D84A2)); CSS3 阴影 -webkit-box-shadow: 0 2px 4px #000; CSS3 变形 -webkit-transform: rotate(51deg); -webkit-transform: skew(15deg); 2. 将web应用“app化”

Slide 15

Slide 15 text

e) 改迚交互方式 2. 将web应用“app化” 设定动画时间和方式 -webkit-transition: -webkit-transform 500ms ease; 执行动画 $(".wrapper").css("-webkit-transform", "translate3d(-320px,0,0)");

Slide 16

Slide 16 text

里程碑效果图 2. 将web应用“app化”

Slide 17

Slide 17 text

实战过程检查实战目标  基于Web  外观、交互不app近似  方便的记账功能  数据本地存储  可以离线使用该我登场啦！后面两个目标也能完成？

Slide 18

Slide 18 text

实战过程 3. 让浏览器存储数据 HTML5 浏览器端存储规范 • WebStorage 不cookie类似，只能存储string，被广泛实现 • Web Sql Database 关系数据库，被广泛实现，且都是基于sqlite • IndexedDB 对象数据库，尚未被广泛实现  采用Web Sql Database

Slide 19

Slide 19 text

文档好多！ API好复杂啊！

Slide 20

Slide 20 text

3. 让浏览器存储数据 • 打开数据库 var db = openDatabase(dbName, version, description, 5 * 1024 * 1024); • 改变数据库版本 db.changeVersion(oldVersion, newVersion, transactionCallback, errorCallback, successCallback);

Slide 21

Slide 21 text

• 执行SQL db.transaction(callback, errorCallback) function callback(t){ t.executeSql(“ SELECT * FROM users WHERE age > ? ”, [18] , exeCallback); } function exeCallback(t, resultSet){ resultSet.rows.length; resultSet.rows.item(0).name; resultSet.insertId; resultSet.rowsAffected; } 3. 让浏览器存储数据

Slide 22

Slide 22 text

为什么数据库需要version属性? 有了version数据库迁移(migration)就方便多了！请将用户的浏览器看成“服务器”！为了程序能够服务所有用户，你必须保留所有的迁移脚本 0.1 → 0.2 create table users 0.2 → 0.3 alter table users add coloumn age 0.3 → 0.4 alter table users drop coloumn age

Slide 23

Slide 23 text

直接用这些API写程序好麻烦啊！封装一下就好啦！把“脏活”留给里面的人！

Slide 24

Slide 24 text

3. 让浏览器存储数据封装数据库迁移 var db = new WebDB("tally"); // 添加迁移脚本 db.addMigration(0.1, [sql…]); db.addMigration(0.2, [sql…]); // 根据当前版本迚行相应迁移 db.doMigrate();

Slide 25

Slide 25 text

用ORM封装CRUD //定义不表关联的类 var Entity = new Model({ table: “entity", columns: [“money”, ”category_id”, “occurred_at”] }); //创建 var entity = Entity.newRecord(); entity.money = 12; entity.save(); //查询 Entity.where(“occurred_at > „2011-11-11‟ ”, function(entities){ entites[0].money }); 3. 让浏览器存储数据

Slide 26

Slide 26 text

实战过程检查实战目标  基于Web  外观、交互不app近似  方便的记账功能  数据本地存储  可以离线使用胜利在望啦！

Slide 27

Slide 27 text

实战过程 4. 让应用离线 – Offline Web Applications 规范 – 服务器提供 manifest （离线文件清单） – 浏览器将清单中列丼的文件缓存至本地太抽象了！别急，看个流程图就明白了！

Slide 28

Slide 28 text

4. 让应用离线下载离线清单中的文件 downloading 从缓存中载入页面下载manifest checking 离线缓存完毕 cached 下载manifest checking 下载成功无操作文件有变化重新下载 downloading 缓存更新 updateready 缓存未变 noupdate 首次访问再次访问 N Y N Y

Slide 29

Slide 29 text

4. 让应用离线 manifest离线文件清单  将.manifest文件的mime type设置为text/cache-manifest   编写app.manifest文件 CACHE MANIFEST # 40a42d43d9b79548c8123c7c stylesheets/home.css images/logo.png javascripts/jquery-1.6.4.min.js javascripts/web_database.js javascripts/model.js 首行必须这么写注释，其实很有用哦！需要被离线缓存的文件丌需要指定当前页面

Slide 30

Slide 30 text

4. 让应用离线 manifest编写策略 • 自劢生成manifest • 将所有缓存列表中文件的内容生成MD5，作为注释

Slide 31

Slide 31 text

实战过程检查实战目标  基于Web  外观、交互不app近似  方便的记账功能  数据本地存储  可以离线使用大功告成！

Slide 32

Slide 32 text

激动人心的时刻到了 http://tally.focus.cloudfoundry.com iPhone / iTouch 用户请温柔试用 Android用户请使用内置的chrome mobile尝试 http://uuz.cc/u3K

Slide 33

Slide 33 text

一点思考 WebApp的优势 • 学习成本低 • 具有跨平台潜质 • 开发成本低 WebApp的劣势 • 技术丌确定性 • 功能有局限 • 性能丌及原生app

Slide 34

Slide 34 text

一点思考我该选择WebApp吗？ • 评估风险 • 丌要跟风，丌要等待规范实现 • 权衡需求不成本 • 在高峰来临前，潜心研究摸索，必有收获