Chrome Web App Development Guide Chrome网页应用开发教程 by Stephen on February 1, 2011 in How-Tos 作者：史蒂芬 发布时间：2011年2月1日 发布源：How-Tos（OhBoard） I launched OhBoard, my little whiteboarding app, in 10 days. I took my idea-cranking shower on December 12th, and I made my first $3.99 on December 22nd. It was only 240 hours apart. Pretty cool, huh? 我花了10天时间开发了OhBorad，这个小巧的白板应用。12月12日，我萌生了想法，12月22日我赚到了第一笔钱3.99美金。而这一切，只花了240小时。嘿，你看看这是不是很酷呢？ I then decided to carefully craft a development guide for you. If you are planning to make a Chrome Web App, you are in luck! Because after reading this guide, you can do what I just did and start taking advantage of this huge market (10% of all Internet citizens) today! 所以在这里和大家分享一下这个开发指南。如果你打算自己做Chrome网页应用，那么你可幸运了！因为读过这个指南后，你就能像我一样从这个巨大的市场（10%的网民）中获得收益。 Step 1: Come up with your idea 第一步：想到一个好点子 The listing on Chrome Web Store is still pretty small, nowhere near Apple’s App Store yet. So there are many things you can make. 谷歌网络在线商店Chrome Web Store 的应用数量还非常小，远远不及苹果应用商店。 I have a list of free, simple ideas you can consider using: 在此，我给大家支几招： An offline to-do list 一个线下的to-do list A text-based calculator 一份文本计算器 A simple time tracking app 一个简单的计时应用 A zen-mode text editor 一个zen-mode 文本编辑器 Also, before moving on, I recommend reading this article by two Chrome developer advocates: Thinking in Web Apps. 当然了，在此之前，我要先推荐两位谷歌开发者的文章： Thinking in Web Apps. Step 2: Make your app第二步：开发应用 There are two different types of apps, hosted apps and packaged apps.一共有两种类型的应用：hosted apps 和 packeged apps Hosted apps are regular web apps with a special file called manifest.json. Everything is hosted on your own server. But you have the advantage of gaining exposure on Chrome Web Store. When a user launches the app, they go straight to your site and that’s it. Hosted apps 是一种常规的网页应用，自带特殊文件manifest.json。所有程序均在开发者主机上运行。好处是，开发者能在谷歌在线商店上获得推荐机会。当用户使用这个应用的时候，他们就能够直接进入应用主站了。 Packaged apps, on the other hand, are apps that users download from the Web Store and save into their own computer. All packaged app content are made out of HTML, CSS and JavaScript. So if you have knowledge about them, you can get started making packaged apps very easily. PS: OhBoard is a packaged app. 另一方面，用户需要将Packaged apps从应用商店中下载下来，存到个人电脑中使用。开发packaged app使用HTML，CSS或JavaScrip语言。因此，如果你懂得这几种开发语言，很容易就能开发这类应用了。注：OhBoard就是packged app。 Chrome supports all native HTML5 features. In OhBoard, I use local storage that saves all your drawing in local computer and it is available at all time. Besides, you can also take advantage of geolocation, desktop notifications, and many more. chrome支持所有HTML5语言。OhBoard利用本地存储将用户所有涂鸦存储在本地电脑中，随时可以调用。当然你也可以利用HTML5的地理位置定位，桌面提醒功能，等等。 Step 3: Create manifest.json第三步：创建 manifest.json文件 Manifest.json serves as the manual for your app. It tells Chrome the name, description, version, icon location, etc. Most importantly, it tells Chrome what page to open when a user launches the app. You can also give your app different permissions such as unlimited storage, geolocation, desktop notification, history, bookmarks, cookies and more. Manifest.json为你的app提供人性化的帮助，它能告诉chrome名字，描述，版本，icon位置等。最重要的是，它告诉chrome用户需要打开哪个页面。同时，你也可以给你的app不一样的指令，包括无限存储，地理位置，桌面提示，历史记录，书签，存储等等。 Here is OhBoard’s manifest.json:以下是OhBoard的manifest.json: { { "name": "OhBoard", "name":"OhBoard" "description": "A ridiculously simple whiteboard app for Chrome. Great for wireframing, sketching, diagramming, brainstorming, and doodling.", "description": "A ridiculously simple whiteboard app for Chrome. Great for wireframing, sketching, diagramming, brainstorming, and doodling.", "version": "1.1", "version": "1.1", "app": { "app": { "launch": { "launch": { "local_path": "index.html" "local_path": "index.html" } } }, }, "icons": { "icons": { "16": "favicon.png", "16": "favicon.png", "128": "logo.png" "128": "logo.png" }, }, "permissions": [ "unlimitedStorage" ] "permissions": [ "unlimitedStorage" ] } } Step 4: Create your icon 第四步：设计icon You need two icons. The first one is 128x128px, it is used on your app page, and it also represents your app on the new tab page. The second one is 16x16px, better known as favicon. It stays in the title bar and gives people a visual way to identify different tabs. 你需要设计两个icon，一个是128*128px的，用于app主页，也在新标签页展示app时使用。另一个是16*16px的，作为favicon使用，它会显示在标题栏，方便用户辨认标签。 There are few guidelines Google wants you to follow:请遵从以下几个规则： Don’t put an edge around the 128×128 image; the UI might add edges. · 不需要为128*128的图片留白边；ui会自动添加。 If your icon is mostly dark, consider adding a subtle white outer glow so it’ll look good against dark backgrounds. · 如果你设计的icon属于暗色，可以考虑设计微弱的白色外发光，与背景形成对比，看起来更好一些。 Avoid large drop shadows; the UI might add shadows. It’s OK to use small shadows for contrast.· 不必设计明显的阴影；UI会自动添加。小阴影即可形成对比。 If you have a bevel at the bottom of your icon, we recommend 4 pixels of depth. · 如果icon底部是斜面，推荐4像素深度。 Make the icon face the viewer, rather than having built-in perspective. · icon应该设计成大众能易于接受的，避免设计成难以理解的样式。 Wherever you place both icons in your package, you must specify the locations in manifest.json (as mentioned above).icon设计完毕后，必须要在manifest.json中添加好位置（如上提及）。 Step 5: Make your screenshots屏幕截图 Picture is worth thousand words. So making your screenshot correctly will increase your sales. Each screenshot is 400x275px.图片的重要性不言而喻，所以截几个好看的图能帮助你更好地推广你的应用。截图大小在400*275像素。 Take a look at a few I did:来看看我的做法： Few tips to keep in mind: The screenshots should only do 1 thing: show what your app looks like. Many people made the mistake of adding captions and putting testimonials and writing features and telling your Twitter handle. But you have the description field for that. Just show what it looks like so user can get a visual understanding.这里有几个小提醒：截图只是用来做一件事的，那就是展示你的app。许多人误增加一些文字简介，推荐语，twitter账号名在上面。其实你会有足够的地方写这些东西，截图只要给用户一个视觉上的印象就对了。 Also, make sure you don’t break Google’s rules!再次提醒，千万不要违反谷歌的规则。 Step 6: Make your demo videos第六步：视频演示 Video is worth thousand pictures, too! If you want to save money, you can make a DIY video yourself using these powerful tools:demo的作用同样不言而喻！如果你想要省钱，试试用一下这些好用的工具吧： Screenflow (the one I’m going to use) Screenflow（我就打算用这个） Camtasia Camtasia iShowU iShowU Captivate Captivate Or if you want your app to look cutting-edge, consider contracting with agencies that makes professional demos. Few media producers that have done work for high-profile apps: 如果希望你的app更高级一些，可以找相关机构设计更专业的视频demo。已经有视频制作者开始为高品质app做设计了。 HiLoMedia HiLoMedia Clear Media Clear Media SwitchMarketing SwitchMarketing Step 7: Write your descriptions 第七步：写介绍 If your screenshots and video aren’t that good, a golden description can still turn it over. Here are 3 well-known tips:如果你的屏幕截图看起来一般，那么就写个精彩的介绍，完全可以翻盘。以下提供三个好建议： Keep it simple. Most people aren’t going to have time to read a 5-paragraph description. So the rule of thumb is to keep it as short as possible. Just tell what benefits and features do the app provide. 尽量简短。大多数用户都没有时间去读一个5段的文字介绍，所以黄金守则就是尽可能的短。只要说明好处和特色就行了。 Use bullet points. Since people won’t read paragraph, listing benefits and features in bullet points will be a great idea.列出要点。由于人们不喜欢读大篇幅的文字，所以把好处和特色按要点列出即可。 Showcase testimonials. Maybe users don’t trust what you have to say, listing your customer’s testimonials can be a convincing call-to-action.举个应用实例。也许用户并不相信开发者说的话，所以把用户的亲自体验放上去会更有说服力。 Take a look at mine for an example.可以看看我是怎么做的，以我为例。 Step 8: Set your price第八步：定价 As always, there are two ways to go: free or paid. But in Chrome Web Store, there are actually 5 payment choices you can use.一般情况下只有两个情况：免费或收费。但是在谷歌在线商店，有五种支付方法可以选。 Free. If you are new to create a Chrome Web App, releasing it for free and learn from experience won’t hurt you.·免费。如果你是第一次开发谷歌网页应用，免费学点经验并没有什么不好。 One-time payment with Google Checkout. Great if your app provides utility, meaning it saves users time or money. ·利用谷歌的checkout服务一次性付费。如果你的app确实提供了便利，这意味着你帮助用户节省了时间和金钱。 Recurring payment with Google Checkout. This is perfect if your app involves any types of file storage.利用Google Checkout自动周期扣款。如果你的app有足够大的存储空间，选择这种方式是很棒的。 Free trial. If your app is complicated, giving a free trial then charge for a fee will be the best solution, although only hosted apps support free trial at this point.免费试用。如果你的app玩法复杂，可以给一个免费试用版，试用后收费。此种盈利方法适用于hosted app。 Your own payment method. If you don’t want to use Google Checkout, you can always write your own system that processes payment via PayPal.自创支付方法。如果你不想用google checkout，你也可以自行设计，通过PayPal来支付。 I found a detailed but pretty technical tutorial from Google about how to check for payments using their licensing API. Note: it only applies to hosted app because packaged apps only supports Google Checkout.我发现google有一个技术教程，详细的介绍了如何通过google的licensing api来查看用户支付情况。注意：只有hosted app可以调用这个licensing api。 Step 9: Test the app第九步：测试 After you’ve finished making your app, you can easily test it out locally in Chrome. Window => Extensions => Developer Mode => Load unpacked extension… => Choose your app folder. app开发完毕之时，你可以轻易的在chrome上进行测试了。路径如下：Window => Extensions => Developer Mode => Load unpacked extension… =>点击你的app文件 Open up a new tab, you should see your app icon showing on the dashboard! If it is packaged app, make sure everything within the app is working bug-free. If it is a hosted app, as long as the icon links to your destination website, you should be fine.打开一个新tab页，你就可以在dashboard上看到你的app icon了。如果这是一个packaged app,你要保证你的app没有缺陷。如果是hosted app，点击icon会直接链接到你的主页，就不用担心这个问题了。 Step 10: Publish the app第十步：发布app Before moving on, make sure you completed all of the pre-launched checklist items!在发布之前，确保你已经完成了前面的所有事宜。 Once everything is done, you can log in to your developer dashboard with your Google account to publish your app.万事俱备后，你可以回到开发界面，登陆谷歌账号，发布app了。 The procedure is fairly straightforward:发布过程非常简单。 Choose Add new item button点击Add new item按钮 Compress your app folder (with manifest.json and your icons) and upload the .zip.压缩应用文件包（附带manifest.json文件和你的icon），上传压缩文件包。 Fill in all the necessary information about your app. This includes price, categories, language, long description, Google Analytics (optional), links, ratings, etc.填写app相关信息，包括价格，类别，语言，文字介绍，谷歌分析（可选），链接，评级等等。 Upload all artwork. This includes screenshots & videos. You also have the ability to add default background & promotional items for the front page.上传所有相关文档，包括截图和视频。你同样能在利用front page设计页面时自行进行背景设计和推荐其他内容。 Preview the listing预览一下。 Pay $5 one-time developer fee一次性支付五美金的开发费用 Publish the app发布app 结语 If you survived all the way to the end, great job! :) My lengthy tutorial should cover up all the basic about making your own Chrome Web App as well as any relevant links I can find from Google about this process.如果你很顺利的完成了开发，那么恭喜你，非常棒！：）希望这个冗长的教程和我提供的相关资料能在chrome网页应用开发上助你一臂之力。 In the future, I will continue to write more in-depth tutorials on more specific topics, so feel free to subscribe to this blog.今后，我会围绕更多主题继续更深入地写一些教程，所以敬请关注这个博客。 I also suggest that you join Google’s Chrome development group so you can keep up with everything and ask any questions.也建议你参加谷歌的Chrome开发者团队，这样更方便交流。 If you have any more questions, feel free to email me via Email, Twitter or comments.如果有任何问题，请随时和我联系，email，twitter或者给我写评论都可以。 And lastly, if you enjoy this tutorial, you will really love OhBoard as well, give it a try!最后，如果你喜欢这个教程，你也会喜欢OhBoard的, 去试试吧！ If you are interested in keeping up with OhBoard and Stephen, subscribe to the blog & follow on Twitter! 如果对OhBoard和我本人感兴趣，请在订阅我的博客，在twitter上关注我吧！ |
|
|
