Chrome网页应用开发教程[转]

Chrome网页应用开发教程

作者：史蒂芬51Testing软件测试网"uQ[x#]C-It v

发布时间：2011年2月1日

发布源：How-Tos（OhBoard）51Testing软件测试网P!n6rtk$i

我花了10天时间开发了OhBorad，这个小巧的白板应用。12月12日，我萌生了想法，12月22日我赚到了第一笔钱3.99美金。而这一切，只花了240小时。嘿，你看看这是不是很酷呢？51Testing软件测试网q R8B:|~-i(G!B6q+D

所以在这里和大家分享一下这个开发指南。如果你打算自己做Chrome网页应用，那么你可幸运了！因为读过这个指南后，你就能像我一样从这个巨大的市场（10%的网民）中获得收益。51Testing软件测试网_]/wa)f P)U;ss

第一步：想到一个好点子51Testing软件测试网'W.MgpPE

谷歌网络在线商店Chrome Web Store 的应用数量还非常小，远远不及苹果应用商店。51Testing软件测试网&C^'o.m.]+Np)Xy

在此，我给大家支几招：51Testing软件测试网f7q K3n8d7B'w

一个线下的to-do list51Testing软件测试网LS_z:jJt l

一份文本计算器51Testing软件测试网&c^cFhc}

一个简单的计时应用

一个zen-mode 文本编辑器

当然了，在此之前，我要先推荐两位谷歌开发者的文章： Thinking in Web Apps.

第二步：开发应用51Testing软件测试网'{/?O&rrs
一共有两种类型的应用：hosted apps 和 packeged apps

Hosted apps 是一种常规的网页应用，自带特殊文件manifest.json。所有程序均在开发者主机上运行。好处是，开发者能在谷歌在线商店上获得推荐机会。当用户使用这个应用的时候，他们就能够直接进入应用主站了。

另一方面，用户需要将Packaged apps从应用商店中下载下来，存到个人电脑中使用。开发packaged app使用HTML，CSS或JavaScrip语言。因此，如果你懂得这几种开发语言，很容易就能开发这类应用了。注：OhBoard就是packged app。

chrome支持所有HTML5语言。OhBoard利用本地存储将用户所有涂鸦存储在本地电脑中，随时可以调用。当然你也可以利用HTML5的地理位置定位，桌面提醒功能，等等。51Testing软件测试网.v,[?.QoA-j\wq

第三步：创建 manifest.json文件

Manifest.json为你的app提供人性化的帮助，它能告诉chrome名字，描述，版本，icon位置等。最重要的是，它告诉chrome用户需要打开哪个页面。同时，你也可以给你的app不一样的指令，包括无限存储，地理位置，桌面提示，历史记录，书签，存储等等。51Testing软件测试网"zwk`,v Vq

以下是OhBoard的manifest.json:51Testing软件测试网,d7t_J.H(Z7jA

{

“name”:”OhBoard”51Testing软件测试网)~k{c
~

“description”: “A ridiculously simple whiteboard app for Chrome. Great for wireframing, sketching, diagramming, brainstorming, and doodling.”,

“version”: “1.1″,51Testing软件测试网FzI;`fuV

“app”: {51Testing软件测试网k ? zbY:ui-gU%B

“launch”: {51Testing软件测试网N|kYwYk|

“local_path”: “index.html”51Testing软件测试网I:j+Vn/zfm(N;J

}51Testing软件测试网yE-C~6e ly JDu
a

},

“icons”: {

“16″: “favicon.png”,51Testing软件测试网l8N"E?2K'^!Cn)c:{

“128″: “logo.png”

},

“permissions”: [ "unlimitedStorage" ]

}51Testing软件测试网 ayYA%~U(T;X4P[

第四步：设计icon51Testing软件测试网5`*Yce*`!B9kRg:sn

你需要设计两个icon，一个是128*128px的，用于app主页，也在新标签页展示app时使用。另一个是16*16px的，作为favicon使用，它会显示在标题栏，方便用户辨认标签。51Testing软件测试网5o KV'{j8ukj$G

请遵从以下几个规则：

·    不需要为128*128的图片留白边；ui会自动添加。51Testing软件测试网%wJI fLEg{

·    如果你设计的icon属于暗色，可以考虑设计微弱的白色外发光，与背景形成对比，看起来更好一些。

·    不必设计明显的阴影；UI会自动添加。小阴影即可形成对比。51Testing软件测试网9JTU M L a.c

·    如果icon底部是斜面，推荐4像素深度。51Testing软件测试网]E!Bx6z4z)l c)L

·    icon应该设计成大众能易于接受的，避免设计成难以理解的样式。51Testing软件测试网 T$Q$qVj.pD,Tq

icon设计完毕后，必须要在manifest.json中添加好位置（如上提及）。
z2w d!Q)ka {Fw0屏幕截图
1t1^9h/h6B0H3X0图片的重要性不言而喻，所以截几个好看的图能帮助你更好地推广你的应用。截图大小在400*275像素。
e!AJ{S VJ-fS0来看看我的做法：

这里有几个小提醒：截图只是用来做一件事的，那就是展示你的app。许多人误增加一些文字简介，推荐语，twitter账号名在上面。其实你会有足够的地方写这些东西，截图只要给用户一个视觉上的印象就对了。

]?%c8ut0再次提醒，千万不要违反谷歌的规则。51Testing软件测试网 SSDBl{!d y8GGeq&s,l
第六步：视频演示
:EXo/Xk(v fy;Vm)O0demo的作用同样不言而喻！如果你想要省钱，试试用一下这些好用的工具吧：

Screenflow（我就打算用这个）51Testing软件测试网U&T]
Q-T2x A6c

Camtasia51Testing软件测试网S`Wp0i)ih

iShowU51Testing软件测试网sVB:Y5wq

Captivate51Testing软件测试网#F7X6Bo U;z U4O

如果希望你的app更高级一些，可以找相关机构设计更专业的视频demo。已经有视频制作者开始为高品质app做设计了。

HiLoMedia51Testing软件测试网$fMf+U'e!O

Clear Media

SwitchMarketing

第七步：写介绍

如果你的屏幕截图看起来一般，那么就写个精彩的介绍，完全可以翻盘。以下提供三个好建议：51Testing软件测试网q6nY.V|b;q

尽量简短。大多数用户都没有时间去读一个5段的文字介绍，所以黄金守则就是尽可能的短。只要说明好处和特色就行了。

列出要点。由于人们不喜欢读大篇幅的文字，所以把好处和特色按要点列出即可。51Testing软件测试网X`/],Pd.Sxp
举个应用实例。也许用户并不相信开发者说的话，所以把用户的亲自体验放上去会更有说服力。
]Y_5c*ia%Ek0可以看看我是怎么做的，以我为例。51Testing软件测试网2_%h$F nW
第八步：定价51Testing软件测试网'Y+F&`n#]s} I$F
一般情况下只有两个情况：免费或收费。但是在谷歌在线商店，有五种支付方法可以选。
A-WBf}S8u!zA0·免费。如果你是第一次开发谷歌网页应用，免费学点经验并没有什么不好。

·利用谷歌的checkout服务一次性付费。如果你的app确实提供了便利，这意味着你帮助用户节省了时间和金钱。51Testing软件测试网R`e`s;p mC
h

利用Google Checkout自动周期扣款。如果你的app有足够大的存储空间，选择这种方式是很棒的。51Testing软件测试网'~ T*K0x5K}
免费试用。如果你的app玩法复杂，可以给一个免费试用版，试用后收费。此种盈利方法适用于hostedapp。
*Y?%M@Oi0自创支付方法。如果你不想用google checkout，你也可以自行设计，通过PayPal来支付。
3n6i}A!q0我发现google有一个技术教程，详细的介绍了如何通过google的licensing api来查看用户支付情况。注意：只有hosted app可以调用这个licensing api。
eA$^J_#u V-k0第九步：测试

app开发完毕之时，你可以轻易的在chrome上进行测试了。路径如下：Window => Extensions => Developer Mode => Load unpacked extension… =>点击你的app文件

打开一个新tab页，你就可以在dashboard上看到你的app icon了。如果这是一个packaged app,你要保证你的app没有缺陷。如果是hosted app，点击icon会直接链接到你的主页，就不用担心这个问题了。
g0Vx1w { _!DH2Q:a#l)I#d0第十步：发布app51Testing软件测试网7I:W d&D7L8F:]*A[BIJ
在发布之前，确保你已经完成了前面的所有事宜。
o+Q3NB8J9^0万事俱备后，你可以回到开发界面，登陆谷歌账号，发布app了。51Testing软件测试网7\M1@Z d
发布过程非常简单。
~tXCh.yn0点击Add new item按钮51Testing软件测试网1p$_ C&LO%{_
压缩应用文件包（附带manifest.json文件和你的icon），上传压缩文件包。51Testing软件测试网@$Bd1RN)i+fAX
填写app相关信息，包括价格，类别，语言，文字介绍，谷歌分析（可选），链接，评级等等。
8ORK.b1[@8P0上传所有相关文档，包括截图和视频。你同样能在利用front page设计页面时自行进行背景设计和推荐其他内容。51Testing软件测试网I0T{%H&M$n
预览一下。51Testing软件测试网_*c `aX%I#i9_3A
一次性支付五美金的开发费用51Testing软件测试网4QY8md:a%v1i
n
发布app51Testing软件测试网 F7y#EX/Vct:O
结语
`*B
j,|i0rX$f0如果你很顺利的完成了开发，那么恭喜你，非常棒！：）希望这个冗长的教程和我提供的相关资料能在chrome网页应用开发上助你一臂之力。
0H1Y}:XD2e0今后，我会围绕更多主题继续更深入地写一些教程，所以敬请关注这个博客。51Testing软件测试网y2j5i3P0O r5BJ
也建议你参加谷歌的Chrome开发者团队，这样更方便交流。51Testing软件测试网1VJ&fl;Ye
如果有任何问题，请随时和我联系，email，twitter或者给我写评论都可以。51Testing软件测试网H8R'tcja
最后，如果你喜欢这个教程，你也会喜欢OhBoard的, 去试试吧！