iphone webapp入门实战

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

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

一个iPhone记账程序

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

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

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

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

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

实战过程 2. 将web应用“app化” a) 解决“页面过小”的问题 viewport默认为980px <meta name = "viewport"
content = "width = 100px"> <meta name = "viewport" content = "width = device-width“> 默认初始缩放 <meta name = "viewport" content = "initial-scale = 1.0“> 禁止用户缩放 <meta name = "viewport" content = "user-scalable = no“> 综合一下 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0;">

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

c) 添加app图标准备一个57*57的png图标 <link rel="apple-touch-icon" href=“/img/logo.png" /> 2. 将web应用“app化”

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

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

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化”

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

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

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

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

文档好多！ API好复杂啊！

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

• 执行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. 让浏览器存储数据

为什么数据库需要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

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

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

用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. 让浏览器存储数据

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

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

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

4. 让应用离线 manifest离线文件清单  将.manifest文件的mime type设置为text/cache-manifest  <html manifest=“app.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 首行必须这么写注释，其实很有用哦！需要被离线缓存的文件丌需要指定当前页面

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

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

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

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

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

感谢聆听请尽情发问

{ “name” : “葛亮” “email” ： “[email protected]” }

iphone webapp入门实战

iphone webapp入门实战

More Decks by edokeh

Other Decks in Programming

Featured

Transcript