Chrome网页应用开发教程[转]
上一篇 / 下一篇 2011-10-28 14:50:04 / 个人分类:web基础
Chrome网页应用开发教程
e"T2h G?-C+E8BdQ UW0作者:史蒂芬51Testing软件测试网 o9bM A-WW0q
发布时间:2011年2月1日51Testing软件测试网 c^2_6et[8l/[M$YI
发布源:How-Tos(OhBoard)
(@7}^N\1r0我花了10天时间开发了OhBorad,这个小巧的白板应用。12月12日,我萌生了想法,12月22日我赚到了第一笔钱3.99美金。而这一切,只花了240小时。嘿,你看看这是不是很酷呢?51Testing软件测试网[D&O&VS-sSO
所以在这里和大家分享一下这个开发指南。如果你打算自己做Chrome网页应用,那么你可幸运了!因为读过这个指南后,你就能像我一样从这个巨大的市场(10%的网民)中获得收益。
&uF[\ r![5_'Nr0第一步:想到一个好点子51Testing软件测试网 e&m+t;BY0[fC&e'?F
谷歌网络在线商店Chrome Web Store 的应用数量还非常小,远远不及苹果应用商店。51Testing软件测试网"uB(])waJ#c-ktu
在此,我给大家支几招:
7Z ^"v+k4`%I.p0一个线下的to-do list51Testing软件测试网 ku{3]z#Y+Lt7XI
一份文本计算器51Testing软件测试网|uJ4L+|(x
一个简单的计时应用51Testing软件测试网9C b2u(\3M@P
一个zen-mode 文本编辑器51Testing软件测试网L rwE lb*e_f~
当然了,在此之前,我要先推荐两位谷歌开发者的文章: Thinking in Web Apps.
Jm"?W$L0第二步:开发应用
){2l xFHtO5y0一共有两种类型的应用:hosted apps 和 packeged apps51Testing软件测试网s(Q0c;B2J
Hosted apps 是一种常规的网页应用,自带特殊文件manifest.json。所有程序均在开发者主机上运行。好处是,开发者能在谷歌在线商店上获得推荐机会。当用户使用这个应用的时候,他们就能够直接进入应用主站了。51Testing软件测试网)~|i _o%~P
另一方面,用户需要将Packaged apps从应用商店中下载下来,存到个人电脑中使用。开发packaged app使用HTML,CSS或JavaScrip语言。因此,如果你懂得这几种开发语言,很容易就能开发这类应用了。注:OhBoard就是packged app。
/RJ nIa;y&n%r0chrome支持所有HTML5语言。OhBoard利用本地存储将用户所有涂鸦存储在本地电脑中,随时可以调用。当然你也可以利用HTML5的地理位置定位,桌面提醒功能,等等。
;fRL[cP V0第三步:创建 manifest.json文件
TNwyyQ7pix-`0Manifest.json为你的app提供人性化的帮助,它能告诉chrome名字,描述,版本,icon位置等。最重要的是,它告诉chrome用户需要打开哪个页面。同时,你也可以给你的app不一样的指令,包括无限存储,地理位置,桌面提示,历史记录,书签,存储等等。
*T&{$Kw2p uk0以下是OhBoard的manifest.json:51Testing软件测试网Eb9`w!op)R)^
{
"t2HY$?)y0“name”:”OhBoard”
V0E,bg8Y us(B0“description”: “A ridiculously simple whiteboard app for Chrome. Great for wireframing, sketching, diagramming, brainstorming, and doodling.”,
sT lcfE,O`g:A9G0“version”: “1.1″,
I*N3j~h)\(A0“app”: {
W Ywa g'J!D%yy0“launch”: {
;W/~5p4G0V(qoD;Id0“local_path”: “index.html”51Testing软件测试网 Ri ix`%S(`1N#O
}51Testing软件测试网6Da*]k&B%eD
},
.kP\ GE-h0“icons”: {51Testing软件测试网L _.S-xe-b8J:~C;GEH
“16″: “favicon.png”,51Testing软件测试网'Zq_:u9K\4@
“128″: “logo.png”51Testing软件测试网DRd/`HJ
},51Testing软件测试网 P;`*O*p/duR%`;Uu
“permissions”: [ "unlimitedStorage" ]51Testing软件测试网 T&`~-J;IzQQt
}
u hf'M)Oc0L0第四步:设计icon51Testing软件测试网,it0K?\!V.x)O
你需要设计两个icon,一个是128*128px的,用于app主页,也在新标签页展示app时使用。另一个是16*16px的,作为favicon使用,它会显示在标题栏,方便用户辨认标签。51Testing软件测试网&Nv%}5@$Wl`
请遵从以下几个规则:
@g(BjYfz+Y"K0· 不需要为128*128的图片留白边;ui会自动添加。51Testing软件测试网*l^Y _J~%@
· 如果你设计的icon属于暗色,可以考虑设计微弱的白色外发光,与背景形成对比,看起来更好一些。51Testing软件测试网9i%t})`NE1e+X
· 不必设计明显的阴影;UI会自动添加。小阴影即可形成对比。
T3_/VW!f(MK-p,`\0· 如果icon底部是斜面,推荐4像素深度。51Testing软件测试网.ew){(^%~ x
· icon应该设计成大众能易于接受的,避免设计成难以理解的样式。51Testing软件测试网1bI'M}a(XF xfg!U^:O
icon设计完毕后,必须要在manifest.json中添加好位置(如上提及)。
O:]
B'R{_0屏幕截图51Testing软件测试网i5y!eWQA$c
图片的重要性不言而喻,所以截几个好看的图能帮助你更好地推广你的应用。截图大小在400*275像素。
*OL%qI s{O?X4k0来看看我的做法:
这里有几个小提醒:截图只是用来做一件事的,那就是展示你的app。许多人误增加一些文字简介,推荐语,twitter账号名在上面。其实你会有足够的地方写这些东西,截图只要给用户一个视觉上的印象就对了。51Testing软件测试网r.WeV_&_%O
再次提醒,千万不要违反谷歌的规则。
q l&H~4q2du3p*bJo^0第六步:视频演示
;_?o2e0og5Nn"]d0demo的作用同样不言而喻!如果你想要省钱,试试用一下这些好用的工具吧:51Testing软件测试网.Z9SwSR(X
G5iL!T
Screenflow(我就打算用这个)51Testing软件测试网5V EN]3n l i8n
Camtasia
n [5a+?"b2Vk0iShowU51Testing软件测试网A+xuV0}%vl
Captivate51Testing软件测试网kv^ b`z^.H1\A
如果希望你的app更高级一些,可以找相关机构设计更专业的视频demo。已经有视频制作者开始为高品质app做设计了。51Testing软件测试网8L s(Dr$J2J~e
HiLoMedia51Testing软件测试网\@F uS D3}5l;j"D
Clear Media51Testing软件测试网)D7v| dWN NS
SwitchMarketing51Testing软件测试网}!z@Sn `\M4u^
第七步:写介绍
jgHU5Q(v [P0如果你的屏幕截图看起来一般,那么就写个精彩的介绍,完全可以翻盘。以下提供三个好建议:51Testing软件测试网Yk7O4~ y
尽量简短。大多数用户都没有时间去读一个5段的文字介绍,所以黄金守则就是尽可能的短。只要说明好处和特色就行了。
*}oe/]x1Cho0列出要点。由于人们不喜欢读大篇幅的文字,所以把好处和特色按要点列出即可。51Testing软件测试网i!Vzz$^$`]M-T8R
举个应用实例。也许用户并不相信开发者说的话,所以把用户的亲自体验放上去会更有说服力。51Testing软件测试网!W9l$?~[
可以看看我是怎么做的,以我为例。
aFz
Wa1eu0第八步:定价
0LwEB*A7c0一般情况下只有两个情况:免费或收费。但是在谷歌在线商店,有五种支付方法可以选。51Testing软件测试网K+V]~*UDI
·免费。如果你是第一次开发谷歌网页应用,免费学点经验并没有什么不好。
·利用谷歌的checkout服务一次性付费。如果你的app确实提供了便利,这意味着你帮助用户节省了时间和金钱。
\U%~o,Vz&{3D9p*y0利用Google Checkout自动周期扣款。如果你的app有足够大的存储空间,选择这种方式是很棒的。51Testing软件测试网;i TXk#O
免费试用。如果你的app玩法复杂,可以给一个免费试用版,试用后收费。此种盈利方法适用于hostedapp。
(E8e6zZ3x_ H0自创支付方法。如果你不想用google checkout,你也可以自行设计,通过PayPal来支付。51Testing软件测试网!j&K2A0@je
我发现google有一个技术教程,详细的介绍了如何通过google的licensing api来查看用户支付情况。注意:只有hosted app可以调用这个licensing api。51Testing软件测试网%bU2TN@
第九步:测试51Testing软件测试网&z7Z)ePY
M
app开发完毕之时,你可以轻易的在chrome上进行测试了。路径如下:Window => Extensions => Developer Mode => Load unpacked extension… =>点击你的app文件51Testing软件测试网S2i-x!m ?Q ~6@_
打开一个新tab页,你就可以在dashboard上看到你的app icon了。如果这是一个packaged app,你要保证你的app没有缺陷。如果是hosted app,点击icon会直接链接到你的主页,就不用担心这个问题了。
}uW!o4{5YD0第十步:发布app
p:[ti/P;P.Y0在发布之前,确保你已经完成了前面的所有事宜。
wN o'C8BQ;B0万事俱备后,你可以回到开发界面,登陆谷歌账号,发布app了。51Testing软件测试网N
i4x3]t z"Ig
发布过程非常简单。
X~9rg7K8sx7G I0点击Add new item按钮
?{%s.Z a,hZ0压缩应用文件包(附带manifest.json文件和你的icon),上传压缩文件包。
5G3S |T*y S^0填写app相关信息,包括价格,类别,语言,文字介绍,谷歌分析(可选),链接,评级等等。51Testing软件测试网kcJ8qT.~
v2^
上传所有相关文档,包括截图和视频。你同样能在利用front page设计页面时自行进行背景设计和推荐其他内容。
,}5AJSQ^pb0预览一下。
3p"[J~0tDH?0一次性支付五美金的开发费用51Testing软件测试网/c9q m._p8dk*O
发布app
W+C_!K'gr2S/~$d0结语
|
Yvw0gb8M.d1a0如果你很顺利的完成了开发,那么恭喜你,非常棒!:)希望这个冗长的教程和我提供的相关资料能在chrome网页应用开发上助你一臂之力。51Testing软件测试网^8e9~gJ)NZ
今后,我会围绕更多主题继续更深入地写一些教程,所以敬请关注这个博客。
0}0w4?&EhbC4T0也建议你参加谷歌的Chrome开发者团队,这样更方便交流。
1_+[
V&\-T4r9hM(@
k0如果有任何问题,请随时和我联系,email,twitter或者给我写评论都可以。51Testing软件测试网0V)]3]"I,Uo
最后,如果你喜欢这个教程,你也会喜欢OhBoard的, 去试试吧!
相关阅读:
- Chrome 9.0首个Beta版发布 修改前版本BUG问题 (xin_晴, 2011-1-10)
- IE9 RC将新增“在地址栏下显示标签”选项 (xin_晴, 2011-1-14)
- NSS Labs新评测:IE9成防御恶意软件首选 (xin_晴, 2011-1-19)
- 谷歌推出Chrome浏览器追踪屏蔽工具 (xin_晴, 2011-1-25)
- 杀招纷纷亮相:新一代浏览器大战 (xin_晴, 2011-1-27)
- chrome 最小的字体 (xiaobao0614, 2011-2-16)
- 消息称IE9正式版将于3月24日发布 (xin_晴, 2011-3-03)
- 在Ubuntu下如何安装PHP中SVN扩展包 (coffeg, 2011-5-24)
- 多浏览器兼容性测试-yc (fairylly, 2011-6-22)