快速入門

由 4 位貢獻者:

本入門指南將介紹 Open Web App 的核心概念、開發工具,以及撰寫 Firefox OS App 時的特定需求。且假設你已經熟悉了 HTML、CSS、JavaScript、MVC 等架構為前提。

有太多方式可開發 Ope Web App。要從檯面上眾多的框架、工具、函式庫中挑選最佳的開發方式,實在頗為不易。Mozilla 為此推薦一套 Javascript 函式庫與開發工具,供開發者能順利撰寫下個 App。從專案起定、建立範本,直到佈署作業,這套工具將可協助加快一連串的開發流程。

本文提到絕大多數的技巧,都適合開發一般的 Web App,而不會特別受限於某些平台。我們也會額外介紹某些適合開發 Firefox OS App 的工具和概念。Firefox OS App 均為 Open Web App,並可安裝於 Firefox OS 上執行 (當然也享有某些優勢),且同樣使用標準的 Web 技術。

注意:如果你已經很熟悉 HTML、CSS、JavaScript,但才剛開始要用 MVC 架構撰寫 App,則可參閱《Modern Web App Architecture 指南》,可帶領你使用本文所介紹的工具,逐步打造 App。

Note: 如果想要 Firefox OS App 的快速入門開發指南,包含開發條件,以及 Firefox OS App 和一般 Open Web App 不同之處,可參閱《Building apps for Firefox OS》。

Mozilla 推薦開發工具

Mozilla 推薦的工具,內含可協助開發者整理程式碼的 MVC 框架、處理重複性開發工作的命令列 (Command line) 工具,另有數個 JavaScript 函式庫可更輕鬆建構常見的 App 功能。我們仍會持續更新此一系列開發工具。

框架:Ember.js
Ember.js 為用戶端的框架,可協助整理程式碼。Ember 的 App 可為你的 App 提供 MVC (Model-View-Controller) 架構。後續再介紹 Ember 與 MVC 架構的核心概念。
開發工具:Ember 與 Ember CLI
既然建議了 Ember 框架,就能利用 Ember CLI 命令列工具,處理重複且瑣碎的開發工作。此工具可為 App 產生設計藍圖,再串接、建置、最小化相關檔案,使其成為可上線的狀態。
函式庫
JavaScript 函式庫可簡化功能開發作業,寫出更簡潔易讀的程式碼。推薦的函式庫有:

這些工具適合我嗎 ?

本文的重點在於「推薦」。除了「實用」的要素以外,我們不會推銷特定工具,也不代表開發者不應該嘗試其他工具,我們亦不會堅持這裡提到的才是最好的工具。如果你已經有熟悉的開發工具當然很好。但如果你才剛開始接觸複雜的 Web App,或根本不喜歡手上的工具,那也許可以試試本文推薦的工具。

必備知識

你應了解 HTML、CSS、JavaScript。但不論你目前的程度為何,我們希望加快所有開發者的速度。我們建議初學者能先看過《Web 入門》指南,再繼續著手開發。MDN 也提供許多資源:

雖然你不一定要知道 Ember,但某些相關資訊還頗有用。關於 Ember 相關資訊,可參考: http://emberjs.com/

安裝

首先透過命令提示工具,在自己的平台 (Mac、Linux、Windows) 上安裝 Ember 與 Ember CLI:

  1. 必須先安裝 Git,才能使用 Ember 的某些功能。
  2. Ember CLI 需要 Node.js 與 Bower。先下載並安裝 Node,再找到 Bower,以繼續下列步驟。
  3. 打開自己的終端機畫面或命令提示工具。
  4. 利用 Node Package Manager (NPM) 安裝 Ember CLI:

    npm install -g ember-cli
  5. 輸入以下指令確認安裝成功:

    ember -v

疑難排解

我不知道終端機\命令列工具在哪
每套作業系統均有預設的命令列工具,請見說明
NPM 權限錯誤
如果你使用 Linux、Mac OS X,或其他 Unix 類的作業系統,並遇到權限上的錯誤問題,就可能是 .npm 目錄的所有權問題。我們很快就會建議某些解決方案,並強烈建議不要使用 sudo 指令,以免封包執行惡意指令。

下一步

接下來就是用安裝好的 Ember CLI 工具,產生可開始著手撰寫的 App 骨架。

Join the Web apps community

Choose your preferred method for joining the discussion:

Document Tags and Contributors

Contributors to this page: MashKao, foxbrush, teoli, markg
最近更新: MashKao,
隱藏側邊欄