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