Chrome網頁應用開發(fā)教程
我花了10天時間開發(fā)了OhBorad，這個小巧的白板應用。12月12日，我萌生了想法，12月22日我賺到了***筆錢3.99美金。而這一切，只花了240小時。嘿，你看看這是不是很酷呢?所以在這里和大家分享一下這個開發(fā)指南。如果你打算自己做Chrome網頁應用，那么你可幸運了!因為讀過這個指南后，你就能像我一樣從這個巨大的市場(10%的網民)中獲得收益。
***步：想到一個好點子
谷歌網絡在線商店Chrome Web Store 的應用數量還非常小，遠遠不及蘋果應用商店。在此，我給大家支幾招：
◆ 一個線下的to-do list
◆ 一份文本計算器
◆ 一個簡單的計時應用
◆ 一個zen-mode 文本編輯器
第二步：開發(fā)應用
一共有兩種類型的應用：hosted apps 和 packeged apps
Hosted apps 是一種常規(guī)的網頁應用，自帶特殊文件manifest.json。所有程序均在開發(fā)者主機上運行。好處是，開發(fā)者能在谷歌在線商店上獲得推薦機會。當用戶使用這個應用的時候，他們就能夠直接進入應用主站了。
另一方面，用戶需要將Packaged apps從應用商店中下載下來，存到個人電腦中使用。開發(fā)packaged app使用HTML，CSS或JavaScrip語言。因此，如果你懂得這幾種開發(fā)語言，很容易就能開發(fā)這類應用了。注：OhBoard就是packged app。
chrome支持所有HTML5語言。OhBoard利用本地存儲將用戶所有涂鴉存儲在本地電腦中，隨時可以調用。當然你也可以利用HTML5的地理位置定位，桌面提醒功能，等等。
第三步：創(chuàng)建 manifest.json文件
Manifest.json為你的app提供人性化的幫助，它能告訴chrome名字，描述，版本，icon位置等。最重要的是，它告訴chrome用戶需要打開哪個頁面。同時，你也可以給你的app不一樣的指令，包括無限存儲，地理位置，桌面提示，歷史記錄，書簽，存儲等等。
以下是OhBoard的manifest.json:
- {
- "name":"OhBoard"
- "description": "A ridiculously simple whiteboard app for Chrome. Great for wireframing, sketching, diagramming, brainstorming, and doodling.",
- "version": "1.1",
- "app": {
- "launch": {
- "local_path": "index.html"
- }
- },
- "icons": {
- "16": "favicon.png",
- "128": "logo.png"
- },
- "permissions": [ "unlimitedStorage" ]
- }
第四步：設計icon
你需要設計兩個icon，一個是128*128px的，用于app主頁，也在新標簽頁展示app時使用。另一個是16*16px的，作為favicon使用，它會顯示在標題欄，方便用戶辨認標簽。請遵從以下幾個規(guī)則：
◆ 不需要為128*128的圖片留白邊;ui會自動添加。
◆ 如果你設計的icon屬于暗色，可以考慮設計微弱的白色外發(fā)光，與背景形成對比，看起來更好一些。
◆ 不必設計明顯的陰影;UI會自動添加。小陰影即可形成對比。
◆ 如果icon底部是斜面，推薦4像素深度。
◆ icon應該設計成大眾能易于接受的，避免設計成難以理解的樣式。
icon設計完畢后，必須要在manifest.json中添加好位置(如上提及)。
屏幕截圖
圖片的重要性不言而喻，所以截幾個好看的圖能幫助你更好地推廣你的應用。截圖大小在400*275像素。
來看看我的做法：
這里有幾個小提醒：截圖只是用來做一件事的，那就是展示你的app。許多人誤增加一些文字簡介，推薦語，twitter賬號名在上面。其實你會有足夠的地方寫這些東西，截圖只要給用戶一個視覺上的印象就對了。
再次提醒，千萬不要違反谷歌的規(guī)則。
第六步：視頻演示
demo的作用同樣不言而喻!如果你想要省錢，試試用一下這些好用的工具吧：
Screenflow(我就打算用這個)
Camtasia
iShowU
Captivate
如果希望你的app更高級一些，可以找相關機構設計更專業(yè)的視頻demo。已經有視頻制作者開始為高品質app做設計了。
HiLoMedia
Clear Media
SwitchMarketing
第七步：寫介紹
如果你的屏幕截圖看起來一般，那么就寫個精彩的介紹，完全可以翻盤。以下提供三個好建議：
盡量簡短。大多數用戶都沒有時間去讀一個5段的文字介紹，所以黃金守則就是盡可能的短。只要說明好處和特色就行了。列出要點。由于人們不喜歡讀大篇幅的文字，所以把好處和特色按要點列出即可。
舉個應用實例。也許用戶并不相信開發(fā)者說的話，所以把用戶的親自體驗放上去會更有說服力。
可以看看我是怎么做的，以我為例。
第八步：定價
一般情況下只有兩個情況：免費或收費。但是在谷歌在線商店，有五種支付方法可以選。
◆ 免費。如果你是***次開發(fā)谷歌網頁應用，免費學點經驗并沒有什么不好。
◆ 利用谷歌的checkout服務一次性付費。如果你的app確實提供了便利，這意味著你幫助用戶節(jié)省了時間和金錢。
◆ 利用Google Checkout自動周期扣款。如果你的app有足夠大的存儲空間，選擇這種方式是很棒的。
◆ 免費試用。如果你的app玩法復雜，可以給一個免費試用版，試用后收費。此種盈利方法適用于hostedapp。
◆ 自創(chuàng)支付方法。如果你不想用google checkout，你也可以自行設計，通過PayPal來支付。
我發(fā)現(xiàn)google有一個技術教程，詳細的介紹了如何通過google的licensing api來查看用戶支付情況。注意：只有hosted app可以調用這個licensing api。
第九步：測試
app開發(fā)完畢之時，你可以輕易的在chrome上進行測試了。路徑如下：Window => Extensions => Developer Mode => Load unpacked extension… =>點擊你的app文件打開一個新tab頁，你就可以在dashboard上看到你的app icon了。如果這是一個packaged app,你要保證你的app沒有缺陷。如果是hosted app，點擊icon會直接鏈接到你的主頁，就不用擔心這個問題了。
第十步：發(fā)布app
在發(fā)布之前，確保你已經完成了前面的所有事宜。
萬事俱備后，你可以回到開發(fā)界面，登陸谷歌賬號，發(fā)布app了。
發(fā)布過程非常簡單。
點擊Add new item按鈕
壓縮應用文件包(附帶manifest.json文件和你的icon)，上傳壓縮文件包。
填寫app相關信息，包括價格，類別，語言，文字介紹，谷歌分析(可選)，鏈接，評級等等。
上傳所有相關文檔，包括截圖和視頻。你同樣能在利用front page設計頁面時自行進行背景設計和推薦其他內容。
預覽一下。
一次性支付五美金的開發(fā)費用
發(fā)布app
結語
如果你很順利的完成了開發(fā)，那么恭喜你，非常棒!：)希望這個冗長的教程和我提供的相關資料能在chrome網頁應用開發(fā)上助你一臂之力。
原文：http://article.yeeyan.org/view/205689/208136
【編輯推薦】
