diff --git a/docs-translations/zh-TW/README.md b/docs-translations/zh-TW/README.md index 1e69c97443..29ed827c66 100644 --- a/docs-translations/zh-TW/README.md +++ b/docs-translations/zh-TW/README.md @@ -8,7 +8,7 @@ * [主行程 Debug](tutorial/debugging-main-process.md) * [使用 Selenium 和 WebDriver](tutorial/using-selenium-and-webdriver.md) * [DevTools 擴充](tutorial/devtools-extension.md) -* [使用 Pepper Flash 套件](tutorial/using-pepper-flash-plugin.md) +* [使用 Pepper Flash 外掛](tutorial/using-pepper-flash-plugin.md) ## 教學 diff --git a/docs-translations/zh-TW/tutorial/application-distribution.md b/docs-translations/zh-TW/tutorial/application-distribution.md new file mode 100644 index 0000000000..60d32f88be --- /dev/null +++ b/docs-translations/zh-TW/tutorial/application-distribution.md @@ -0,0 +1,108 @@ +# 應用程式部署 + +要部屬你的 Electron 應用程式,你需要把你的應用程式資料夾命名為 `app`,並放置於 Electron 的資源目錄下 (在 OS X 中位在 `Electron.app/Contents/Resources/` 而 Linux 和 Windows 的是在 `resources/`),例如: + +OS X: + +```text +electron/Electron.app/Contents/Resources/app/ +├── package.json +├── main.js +└── index.html +``` + +Windows 和 Linux: + +```text +electron/resources/app +├── package.json +├── main.js +└── index.html +``` + +然後執行 `Electron.app` (或者在 Linux 中是 `electron`, Windows 中是 `electron.exe`),然後 Electron 將會啟動你的應用程式,目錄 `electron` 會接著被部署給最後使用者。 + +## 打包你的應用程式成一個檔案 + +除了透過複製所有原始檔案來發布你的應用程式,你也可以使用 [asar](https://github.com/atom/asar) 來打包你的應用程式為一個壓縮檔,來避免暴露你的原始碼給使用者。 + +要使用 `asar` 壓縮檔來取代 `app` 資料夾,你需要重新命名該壓縮檔為 `app.asar`,然後如下所示把它放到 Electron 的資源目錄中,接著 Electron 就會試著讀取壓縮檔並從它開始執行。 + +OS X: + +```text +electron/Electron.app/Contents/Resources/ +└── app.asar +``` + +Windows 和 Linux: + +```text +electron/resources/ +└── app.asar +``` + +更多詳細的介紹請參閱 [應用程式打包](application-packaging.md). + +## 重新塑造你的下載執行檔品牌形象 + +當你完成 Electron 的應用程式打包後,在發布給使用者前,你會想想要重新塑造你的 Electron。 + +### Windows + +你可以重新命名 `electron.exe` 為任何你喜歡的名稱,然後透過像是 [rcedit](https://github.com/atom/rcedit) 或 +[ResEdit](http://www.resedit.net) 的工具來編輯它的圖示(icon)和其他資訊。 + +### OS X + +你可以重新命名 `Electron.app` 為任何你喜歡的名稱,另外你也需要重新命名下列檔案中的 `CFBundleDisplayName`、`CFBundleIdentifier` 和 `CFBundleName` 欄位: + +* `Electron.app/Contents/Info.plist` +* `Electron.app/Contents/Frameworks/Electron Helper.app/Contents/Info.plist` + +你也可以重新命名 helper 應用程式來避免在活動監視器中秀出 `Electron Helper` +,但請確認你有重新命名 helper 應用程式的可執行檔名稱。 + +重新命名後的應用程式檔案結構可能長得相這樣: + +``` +MyApp.app/Contents +├── Info.plist +├── MacOS/ +│   └── MyApp +└── Frameworks/ + ├── MyApp Helper EH.app + | ├── Info.plist + | └── MacOS/ + |    └── MyApp Helper EH + ├── MyApp Helper NP.app + | ├── Info.plist + | └── MacOS/ + |    └── MyApp Helper NP + └── MyApp Helper.app + ├── Info.plist + └── MacOS/ +    └── MyApp Helper +``` + +### Linux + +你可以重新命名 `electron` 可執行檔為任何你想要的名字。 + +## 透過重新建置 Electron 原始碼重塑品牌形象 + +你也可以透過改變產品名稱和重新建置原始碼來重塑 Electron 的品牌形象,要這麼做的話,你需要修改 `atom.gyp` 檔案並在重新建置前清理已建置的所有檔案。 + +### grunt-build-atom-shell + +手動取得 Electron 的原始碼和重新建置可能事件複雜的事,因此有一個建立好的 Grunt 任務(task)可以自動化的處理這些事情: +[grunt-build-atom-shell](https://github.com/paulcbetts/grunt-build-atom-shell). + +這個任務將會自動的處理編輯 `.gyp` 檔,建置原始碼,然後重新建置你的應用程式原生 Node 模組來符合新的可執行檔名稱。 + +## 打包工具 + +除了手動打包你的應用程式,你也可以選擇使用第三方打包工具來幫助你: + +* [electron-packager](https://github.com/maxogden/electron-packager) +* [electron-builder](https://github.com/loopline-systems/electron-builder) diff --git a/docs-translations/zh-TW/tutorial/application-packaging.md b/docs-translations/zh-TW/tutorial/application-packaging.md new file mode 100644 index 0000000000..438d513e2b --- /dev/null +++ b/docs-translations/zh-TW/tutorial/application-packaging.md @@ -0,0 +1,150 @@ +# 應用程式打包 + +為了減少圍繞著 Windows 上長路徑名稱問題的 [issues](https://github.com/joyent/node/issues/6960) ,稍微地加速 `require` 和隱藏你的原始碼避免不小心被看到,你可以選擇把你的應用程式打包成一個 [asar][asar] 壓縮檔,只需要改變一點點你的原始碼就好。 +## 產生 `asar` 壓縮檔 + +一個 [asar][asar] 壓縮檔是一個簡單的類 tar 格式的檔案,它會把幾個檔案串接成一個檔案, Electron 可以不需要解壓縮整個檔案就從中讀取任意檔案。 + +把你的應用程式打包成 `asar` 壓縮檔的步驟: + +### 1. 安裝 asar 工具包 + +```bash +$ npm install -g asar +``` + +### 2. 用 `asar pack` 打包 + +```bash +$ asar pack your-app app.asar +``` + +## 使用 `asar` 壓縮檔 + +在 Electron 中有兩組 API:Node.js 提供的 Node APIs 和 Chromium 提供的 Web +APIs,兩組 API 都支援從 `asar` 壓縮檔中讀取檔案。 + +### Node API + +因為 Electron 中有一些特別的補釘,像是 `fs.readFile` 和 `require` 這樣的 Node API 會將 `asar` 壓縮檔視為許多虛擬目錄,將裡頭的檔案視為在檔案系統上的一般檔案。 + +例如,假設我們有一個 `example.asar` 壓縮檔在 `/path/to` 中: + +```bash +$ asar list /path/to/example.asar +/app.js +/file.txt +/dir/module.js +/static/index.html +/static/main.css +/static/jquery.min.js +``` + +讀取一個在 `asar` 壓縮檔中的檔案: + +```javascript +const fs = require('fs'); +fs.readFileSync('/path/to/example.asar/file.txt'); +``` + +列出所有在壓縮檔根目錄下的檔案: + +```javascript +const fs = require('fs'); +fs.readdirSync('/path/to/example.asar'); +``` + +使用一個壓縮檔中的模組: + +```javascript +require('/path/to/example.asar/dir/module.js'); +``` + +你也可以利用 `BrowserWindow` 在 `asar` 壓縮檔中呈現一個網頁: + +```javascript +const BrowserWindow = require('electron').BrowserWindow; +var win = new BrowserWindow({width: 800, height: 600}); +win.loadURL('file:///path/to/example.asar/static/index.html'); +``` + +### Web API + +在一個網頁中,壓縮檔中的檔案都可以透過 `file:` 這個協定被存取,如同 Node API,`asar` 壓縮檔都被視為目錄。 + +例如,要透過 `$.get` 取得一個檔案: + +```html + +``` + +### 把一個 `asar` 壓縮檔視為一般檔案 + +在一些像是驗證 `asar` 壓縮檔檢查碼(checksum)的例子中,我們需要以檔案的方式讀取 `asar` 壓縮檔中的內容,為了達到這個目的,你可以使用內建的 +`original-fs` 模組,它提供了沒有 `asar` 支援的原生 `fs` API: + +```javascript +var originalFs = require('original-fs'); +originalFs.readFileSync('/path/to/example.asar'); +``` + +你也可以設定 `process.noAsar` 為 `true` 來關掉在 `fs` 模組中的 `asar` 支援: + +```javascript +process.noAsar = true; +fs.readFileSync('/path/to/example.asar'); +``` + +## Node API 上的限制 + +儘管我們盡可能的努力嘗試著使 Node API 中的 `asar` 壓縮檔像目錄一樣運作,還是有一些基於 Node API 低階本質的限制存在。 + +### 壓縮檔都是唯讀的 + +所有壓縮檔都無法被修改,因此所有可以修改檔案的 Node API 都無法與 `asar ` 壓縮檔一起運作。 + +### 使用中的目錄無法被設為壓縮檔中的目錄 + +儘管 `asar` 壓縮檔被視為目錄,卻並沒有真正的目錄在檔案系統中,所以你永遠無法將使用中的目錄設定成 `asar` 壓縮檔中的目錄,把他們以 `cwd` 選項的方式傳遞,對某些 API 也會造成錯誤。 + +### 更多透過 API 拆封的方法 + +大部分 `fs` API 可以讀取一個檔案,或是不用拆封就從 `asar` 壓縮檔中取得一個檔案的資訊,但對一些需要傳遞真實檔案路徑給現行系統呼叫的 API ,Electron 將會解開需要的檔案到一個暫時的檔案,然後傳遞該暫時檔案的路徑給那些 API 以便使他們可以運作,這會增加這些 API 一點負擔。 + + +需要額外拆封的 API : + +* `child_process.execFile` +* `child_process.execFileSync` +* `fs.open` +* `fs.openSync` +* `process.dlopen` - 在原生模組中被 `require` 使用 + +### `fs.stat` 的不真實的狀態資訊 + +`fs.stat` 回傳的 `Stats` 物件和它在 `asar` 壓縮檔中的檔案朋友都是以猜測的方式產生的,因為那些檔案不存在檔案系統,所以你不應該信任 `Stats` 物件,除了取得檔案大小和確認檔案型態之外。 + +### 執行 `asar` 壓縮檔中的二進位檔 + +有像是 `child_process.exec`、`child_process.spawn` 和 `child_process.execFile` 的 Node APIs 可以執行二進位檔,但只有 `execFile` 是 `asar` 壓縮檔中可以執行二進位檔的。 + +這是因為 `exec` 和 `spawn` 接受的輸入是 `command` 而不是 `file`,而 `command` 們都是在 shell 底下執行,我們找不到可靠的方法來決定是否一個命令使用一個在 `asar` 壓縮檔中的檔案,而儘管我們找得到,我們也無法確定是否我們可以在沒有外部影響(side effect)的情況下替換掉命令中的路徑。 + +## 加入拆封檔案到 `asar` 壓縮檔中 + +如前述,一些 Node API 再被呼叫時會拆封檔案到檔案系統,除了效能議題外,它也會導致掃毒軟體發出 false alerts。 + +要繞過這個問題,你可以透過使用 `--unpack` 選向來拆封一些建立壓縮檔的檔案,以下是一個不包含共享原生模組的函式庫的例子: + +```bash +$ asar pack app app.asar --unpack *.node +``` + +執行這個命令以後,除了 `app.asar` 以外,還有一個帶有拆封檔案的 `app.asar.unpacked` 資料夾被產生出來,當你要發布給使用者時,你應該把它和 `app.asar` 一起複。 + +[asar]: https://github.com/atom/asar diff --git a/docs-translations/zh-TW/tutorial/debugging-main-process.md b/docs-translations/zh-TW/tutorial/debugging-main-process.md new file mode 100644 index 0000000000..f1a7e84095 --- /dev/null +++ b/docs-translations/zh-TW/tutorial/debugging-main-process.md @@ -0,0 +1,71 @@ +# 主行程 Debug + +瀏覽器視窗開發工具 DevTools 只可以用來幫渲染器的行程腳本(renderer process script,網頁畫面)除錯(debug),為了提供一個方法在主行程中除錯,Electron 有提供 `--debug` 和 `--debug-brk` 開關。 + +## 命令列開關 + +使用以下命令列切換來為 Electron 的主行程除錯: + +### `--debug=[port]` + +當這個開關被使用,Electron 將會透過 `port` 來監聽 V8 的除錯協定訊息,預設的 `port` 是 `5858`。 + +### `--debug-brk=[port]` + +同 `--debug` 但暫停在腳本的第一行。 + +## 使用 node-inspector 來除錯 + +__Note:__ Electron 近期沒有跟 node-inspector 處的很好,而且如果你透過 node-inspector's console 查看 `process` 物件,主行程將會爆掉。 + +### 1. 確保你有安裝 [node-gyp required tools][node-gyp-required-tools] + +### 2. 安裝 [node-inspector][node-inspector] + +```bash +$ npm install node-inspector +``` + +### 3. 安裝一個修補過版本的 `node-pre-gyp` + +```bash +$ npm install git+https://git@github.com/enlight/node-pre-gyp.git#detect-electron-runtime-in-find +``` + +### 4. 除心編譯 `node-inspector` `v8` 模組給 Electron (變更 target 為你的 Electron 編號) + +```bash +$ node_modules/.bin/node-pre-gyp --target=0.36.2 --runtime=electron --fallback-to-build --directory node_modules/v8-debug/ --dist-url=https://atom.io/download/atom-shell reinstall +$ node_modules/.bin/node-pre-gyp --target=0.36.2 --runtime=electron --fallback-to-build --directory node_modules/v8-profiler/ --dist-url=https://atom.io/download/atom-shell reinstall +``` + +參閱 [如何安裝原生模組](how-to-install-native-modules). + +### 5. 給 Electron 啟用除錯模式 + +你可以啟動 Electron 並帶有一個除錯 flag ,例如: + +```bash +$ electron --debug=5858 your/app +``` + +或者,讓你的腳本暫停在第一行: + +```bash +$ electron --debug-brk=5858 your/app +``` + +### 6. 使用啟動 [node-inspector][node-inspector] 伺服器 + +```bash +$ ELECTRON_RUN_AS_NODE=true path/to/electron.exe node_modules/node-inspector/bin/inspector.js +``` + +### 7. 載入除錯介面 + +在你的 Chrome 瀏覽器打開 http://127.0.0.1:8080/debug?ws=127.0.0.1:8080&port=5858,你可能需要點擊暫停假如你是透過使用 debug-brk 啟動並停在進入行(entry line)的話。 + +[node-inspector]: https://github.com/node-inspector/node-inspector +[node-gyp-required-tools]: https://github.com/nodejs/node-gyp#installation +[how-to-install-native-modules]: using-native-node-modules.md#how-to-install-native-modules + diff --git a/docs-translations/zh-TW/tutorial/devtools-extension.md b/docs-translations/zh-TW/tutorial/devtools-extension.md new file mode 100644 index 0000000000..1a419fb837 --- /dev/null +++ b/docs-translations/zh-TW/tutorial/devtools-extension.md @@ -0,0 +1,46 @@ +# DevTools 擴充套件 + +要使除錯更簡單,Electron 有對 [Chrome DevTools(開發人員工具) Extension][devtools-extension] 基本的支援。 + +多數的 DevTools 擴充可以簡單地透過下載原始碼然後使用 `BrowserWindow.addDevToolsExtension` API 來載入它們,已載入的擴充套件會被記住,如此一來你就不用每次建立一個視窗的時候就要呼叫 API。 + +** 注意: React DevTools 無法使用,參考 [issue](https://github.com/atom/electron/issues/915) ** + +例如使用 [React DevTools Extension](https://github.com/facebook/react-devtools),首先你需要下載它的原始碼: + +```bash +$ cd /some-directory +$ git clone --recursive https://github.com/facebook/react-devtools.git +``` + +照著 [`react-devtools/shells/chrome/Readme.md`](https://github.com/facebook/react-devtools/blob/master/shells/chrome/Readme.md) 的指示來建置擴充套件。 + +接著你就可以在 Electron 中打開任何視窗來載入擴充套件了,然後在 DevTools console 執行以下的程式碼: + +```javascript +const BrowserWindow = require('electron').remote.BrowserWindow; +BrowserWindow.addDevToolsExtension('/some-directory/react-devtools/shells/chrome'); +``` + +要卸載擴充套件,你可以呼叫 `BrowserWindow.removeDevToolsExtension` +API,並帶入套件的名稱,則套件就不會在下次起打開 DevTools 的時候載入了: + +```javascript +BrowserWindow.removeDevToolsExtension('React Developer Tools'); +``` + +## DevTools 擴充套件的格式 + +理想上,所有寫給 Chrome 瀏覽器用的 DevTools 擴充套件都要能夠被 Electron 載入,但它們需要是在一個普通的目錄下,那些以 `crx` 包裝的擴充套件,Electron 沒有辦法載入它們除非你找到一個解壓縮他們到目錄的方法。 + +## Background Pages + +目前 Electron 沒有支援 Chrome 擴充套件的 background pages,所以一些會用到 background pages 的 DevTools 擴充套件可能會無法在 Electron 中運作。 + +## `chrome.*` APIs + +一些 Chrome 擴充套件可能使用到 `chrome.*` API,而儘管在 Electron 中有一些這種 API 的實作,還是沒有所有的部分都被實作到。 + +因為並非所有 `chrome.*` API 都有實作,如果一個 DevTools 擴充套件有使用到而非 `chrome.devtools.*`,這個套件非常有可能無法運作,你可以回報失敗的擴充套件到 issue tracker,那我們就可以把這些 API 加入支援。 + +[devtools-extension]: https://developer.chrome.com/extensions/devtools diff --git a/docs-translations/zh-TW/tutorial/mac-app-store-submission-guide.md b/docs-translations/zh-TW/tutorial/mac-app-store-submission-guide.md new file mode 100644 index 0000000000..6deaa8295e --- /dev/null +++ b/docs-translations/zh-TW/tutorial/mac-app-store-submission-guide.md @@ -0,0 +1,104 @@ +# Mac App Store 提交指引 + +自從版本 v0.34.0 開始,Electron 允許提交打包好的應用程式到 Mac App Store(MAS),這個指引提供了以下資訊:如何提交你的應用程式和 MAS 的建置限制。 + +__Note:__ 提交一個應用程式到 Mac App Store 需要註冊要付費的 [Apple Developer +Program][developer-program]. + +## 如何提交你的應用程式 + +以下步驟介紹了一個簡單的方法提交你的應用程式到 Mac App Store,然而這些步驟不保證你的應用程式會被 Apple 批准,你仍然需要閱讀 Apple 的 [Submitting Your App][submitting-your-app] 指引來達到 Mac App Store 的要求。 + +### 取得認證 + +要提交你的應用程式到 Mac App Store,你首先必須取得 Apple 的認證,你可以遵循這些網路上的 [existing guides][nwjs-guide]。 + +### 簽署你的應用程式 + +取得了 Apple 的認證以後,你可以遵照 [Application Distribution](application-distribution.md) 來打包你的應用程式,然後進行你應用程式的簽署,這個步驟基本上與其他程式相同,但重點在於你要一一為每個 Electron 的相依套件做簽署。 + +首先,你需要準備兩個管理權限用的檔案。 + +`child.plist`: + +```xml + + + + + com.apple.security.app-sandbox + + com.apple.security.inherit + + + +``` + +`parent.plist`: + +```xml + + + + + com.apple.security.app-sandbox + + + +``` + +接著遵照下面的腳本簽署你的應用程式: + +```bash +#!/bin/bash + +# Name of your app. +APP="YourApp" +# The path of you app to sign. +APP_PATH="/path/to/YouApp.app" +# The path to the location you want to put the signed package. +RESULT_PATH="~/Desktop/$APP.pkg" +# The name of certificates you requested. +APP_KEY="3rd Party Mac Developer Application: Company Name (APPIDENTITY)" +INSTALLER_KEY="3rd Party Mac Developer Installer: Company Name (APPIDENTITY)" + +FRAMEWORKS_PATH="$APP_PATH/Contents/Frameworks" + +codesign --deep -fs "$APP_KEY" --entitlements child.plist "$FRAMEWORKS_PATH/Electron Framework.framework/Libraries/libnode.dylib" +codesign --deep -fs "$APP_KEY" --entitlements child.plist "$FRAMEWORKS_PATH/Electron Framework.framework/Electron Framework" +codesign --deep -fs "$APP_KEY" --entitlements child.plist "$FRAMEWORKS_PATH/Electron Framework.framework/" +codesign --deep -fs "$APP_KEY" --entitlements child.plist "$FRAMEWORKS_PATH/$APP Helper.app/" +codesign --deep -fs "$APP_KEY" --entitlements child.plist "$FRAMEWORKS_PATH/$APP Helper EH.app/" +codesign --deep -fs "$APP_KEY" --entitlements child.plist "$FRAMEWORKS_PATH/$APP Helper NP.app/" +codesign -fs "$APP_KEY" --entitlements parent.plist "$APP_PATH" +productbuild --component "$APP_PATH" /Applications --sign "$INSTALLER_KEY" "$RESULT_PATH" +``` + +如果你是第一次使用 OS X 下的應用程式沙盒(app sandboxing),你應該也要閱讀 Apple 的 [Enabling App Sandbox][enable-app-sandbox] 以舉被基本概念,然後把你的應用程式會用到的 key 的權限都加入管理權現的檔案中。 + +### 上傳你的應用程式和提交檢視 + +當你簽署好你的應用程式後,你可以使用應用程式載入器(Application Loader)把他上傳到 iTunes,處理中請保持連線順暢,在上傳以前請確保你已經 [建立一個紀錄][create-record],機著你就可以提交你的應用程式去檢視了。 + +## MAS 建置的限制 + +為了滿足應用程式沙盒的所有的要求,以下模組需要在 MAS 建置過程中被停用: + +* `crash-reporter` +* `auto-updater` + +然後以下的動作已經被變更: + +* 在某些機器上影像捕捉可能不能運作 +* 特定的存取特性可能無法運作 +* 應用程式將不管 DNS 的改變 + +此外,由於使用了應用程式沙盒,那些可以被應用程式存取的資源會被嚴格限制,你可以閱讀 [App Sandboxing][app-sandboxing] 以取得更多資訊。 + +[developer-program]: https://developer.apple.com/support/compare-memberships/ +[submitting-your-app]: https://developer.apple.com/library/mac/documentation/IDEs/Conceptual/AppDistributionGuide/SubmittingYourApp/SubmittingYourApp.html +[nwjs-guide]: https://github.com/nwjs/nw.js/wiki/Mac-App-Store-%28MAS%29-Submission-Guideline#first-steps +[enable-app-sandbox]: https://developer.apple.com/library/ios/documentation/Miscellaneous/Reference/EntitlementKeyReference/Chapters/EnablingAppSandbox.html +[create-record]: https://developer.apple.com/library/ios/documentation/LanguagesUtilities/Conceptual/iTunesConnect_Guide/Chapters/CreatingiTunesConnectRecord.html +[submit-for-review]: https://developer.apple.com/library/ios/documentation/LanguagesUtilities/Conceptual/iTunesConnect_Guide/Chapters/SubmittingTheApp.html +[app-sandboxing]: https://developer.apple.com/app-sandboxing/ \ No newline at end of file diff --git a/docs-translations/zh-TW/tutorial/using-native-node-modules.md b/docs-translations/zh-TW/tutorial/using-native-node-modules.md new file mode 100644 index 0000000000..82febb6d5a --- /dev/null +++ b/docs-translations/zh-TW/tutorial/using-native-node-modules.md @@ -0,0 +1,50 @@ +# 使用原生 node 模組 + +原生的 Node 模組 Electron 都有支援,但自從 Electron 使用了與 Node 官方不同的 V8 版本後,當你要建置原生模組的時候,你需要手動指定 Electron 標頭的位置。 + +## 原生 Node 模組的相容性 + +原生模組可能在 Node 開始使用一個新版本的 V8 時毀損,為了確保你想要用的模組能正確與 Electron 一起運行,你應該檢查是否支援 Electron 內部 Node 版本,你可以查看 [releases](https://github.com/atom/electron/releases) 或是使用 `process.version` (範例請見 [Quick Start](https://github.com/atom/electron/blob/master/docs/tutorial/quick-start.md)) 來檢查哪個 Node 版本是現在的 Electron 使用的。 + +你可以考慮給你自己的模組使用 [NAN](https://github.com/nodejs/nan/),因為它可以較輕易的支援多種版本的 Node,它對於移植舊的模組到新版本的 Node 以便與 Electron 一起運作也是很有用的。 + +## 如何安裝原生模組 + +三種安裝原生模組的方式: + +### 簡單的方法 + +最直接重新建置原生模組的方法是透過 [`electron-rebuild`](https://github.com/paulcbetts/electron-rebuild) 套件,這個套件處理了手動下載標頭和建制原生模組的步驟: + +```sh +npm install --save-dev electron-rebuild + +# 每次你執行 "npm install", 執行這句 +./node_modules/.bin/electron-rebuild + +# 在 Windows 上如果你有狀況,試試看: +.\node_modules\.bin\electron-rebuild.cmd +``` + +### 使用 npm + +你也可以使用 `npm` 安裝模組,步驟與 Node 模組的安裝相同,除了你需要設定一些環境變數: + +```bash +export npm_config_disturl=https://atom.io/download/atom-shell +export npm_config_target=0.33.1 +export npm_config_arch=x64 +export npm_config_runtime=electron +HOME=~/.electron-gyp npm install module-name +``` + +### 使用 node-gyp + +要把 Node 模組與 Eletron 的標頭一起建置,你需要告訴 `node-gyp` 下載標頭到哪裡,以及要使用哪個版本: + +```bash +$ cd /path-to-module/ +$ HOME=~/.electron-gyp node-gyp rebuild --target=0.29.1 --arch=x64 --dist-url=https://atom.io/download/atom-shell +``` + +`HOME=~/.electron-gyp` 改變了尋找開發標頭的地方,`--target=0.29.1` 是 Eletron 的版本, `--dist-url=...` 指定了下載標頭到哪, `--arch=x64` 指出模組要建置在 64 位元系統。 diff --git a/docs-translations/zh-TW/tutorial/using-pepper-flash-plugin.md b/docs-translations/zh-TW/tutorial/using-pepper-flash-plugin.md new file mode 100644 index 0000000000..e27554c516 --- /dev/null +++ b/docs-translations/zh-TW/tutorial/using-pepper-flash-plugin.md @@ -0,0 +1,45 @@ +# 使用 Pepper Flash 外掛 + +Electron 現在支援 Pepper Flash 外掛,要在 Electron 中使用 Pepper Flash 外掛,你應該手動指定 Pepper Flash 外掛的位置,並在你的應用程式中啟用它。 + +## 準備一份 Flash 外掛 + +在 OS X 和 Linux 上,Pepper Flash 外掛的細節可以透過查看 Chrome 瀏覽器中的 `chrome://plugins` 來得知,它的位置和版本對於 Electron 的 Pepper Flash 支援都有很大的幫助,你可以把它複製一份到別的位置。 + +## 加入 Electron 開關 + +你可以直接加入 `--ppapi-flash-path` 和 `ppapi-flash-version` 到 +Electron 命定列或是在應用程式的 ready 事件之前使用 `app.commandLine.appendSwitch` 方法,並且加入 `browser-window` 的 `plugins` 開關。 + +例如: + +```javascript +// 指定 Flash 路徑 +// Windows 中可能是 /path/to/pepflashplayer.dll +// OS X 中 /path/to/PepperFlashPlayer.plugin +// Linux 中 /path/to/libpepflashplayer.so +app.commandLine.appendSwitch('ppapi-flash-path', '/path/to/libpepflashplayer.so'); + +// 指定 Flash 版本, 例如 v17.0.0.169 +app.commandLine.appendSwitch('ppapi-flash-version', '17.0.0.169'); + +app.on('ready', function() { + mainWindow = new BrowserWindow({ + 'width': 800, + 'height': 600, + 'web-preferences': { + 'plugins': true + } + }); + mainWindow.loadURL('file://' + __dirname + '/index.html'); + // Something else +}); +``` + +## 在一個 `` Tag 中啟用 Flash 外掛 + +把 `plugins` 屬性加入 `` tag。 + +```html + +``` diff --git a/docs-translations/zh-TW/tutorial/using-selenium-and-webdriver.md b/docs-translations/zh-TW/tutorial/using-selenium-and-webdriver.md new file mode 100644 index 0000000000..8f90597dda --- /dev/null +++ b/docs-translations/zh-TW/tutorial/using-selenium-and-webdriver.md @@ -0,0 +1,123 @@ +# 使用 Selenium 和 WebDriver + +根據 [ChromeDriver - WebDriver for Chrome][chrome-driver]: + +> WebDriver is an open source tool for automated testing of web apps across many +> browsers. It provides capabilities for navigating to web pages, user input, +> JavaScript execution, and more. ChromeDriver is a standalone server which +> implements WebDriver's wire protocol for Chromium. It is being developed by +> members of the Chromium and WebDriver teams. + +為了與 Electron 一起使用 `chromedriver`,你需要告訴 `chromedriver` 去哪找 Electron 並讓他知道 Electron 是 Chrome 瀏覽器。 + +## 透過 WebDriverJs 設定 + +[WebDriverJs](https://code.google.com/p/selenium/wiki/WebDriverJs) 提供一個 Node 套件來透過 web driver 做測試,我們將使用它作為例子。 + +### 1. 啟動 ChromeDriver + +首先你需要下載 `chromedriver` 執行檔,然後執行它: + +```bash +$ ./chromedriver +Starting ChromeDriver (v2.10.291558) on port 9515 +Only local connections are allowed. +``` + +記住埠號(port number) `9515`,等等會使用到它 + +### 2. 安裝 WebDriverJS + +```bash +$ npm install selenium-webdriver +``` + +### 3. 連接到 ChromeDriver + +與 Electron 一起使用 `selenium-webdriver` 的方法基本上與 upstream 相同,除了你需要手動指定如何連接 chrome driver 和去哪找 Electron 的執行檔: + +```javascript +const webdriver = require('selenium-webdriver'); + +var driver = new webdriver.Builder() + // The "9515" is the port opened by chrome driver. + .usingServer('http://localhost:9515') + .withCapabilities({ + chromeOptions: { + // Here is the path to your Electron binary. + binary: '/Path-to-Your-App.app/Contents/MacOS/Atom', + } + }) + .forBrowser('electron') + .build(); + +driver.get('http://www.google.com'); +driver.findElement(webdriver.By.name('q')).sendKeys('webdriver'); +driver.findElement(webdriver.By.name('btnG')).click(); +driver.wait(function() { + return driver.getTitle().then(function(title) { + return title === 'webdriver - Google Search'; + }); +}, 1000); + +driver.quit(); +``` + +## 透過 WebdriverIO 設定 + +[WebdriverIO](http://webdriver.io/) 提供一個 Node 套件來透過 web driver 做測試。 + +### 1. 啟動 ChromeDriver + +首先你需要下載 `chromedriver` 執行檔,然後執行它: + +```bash +$ chromedriver --url-base=wd/hub --port=9515 +Starting ChromeDriver (v2.10.291558) on port 9515 +Only local connections are allowed. +``` + +記住埠號(port number) `9515`,等等會用到它 + +### 2. 安裝 WebdriverIO + +```bash +$ npm install webdriverio +``` + +### 3. 連接到 chrome driver + +```javascript +const webdriverio = require('webdriverio'); +var options = { + host: "localhost", // Use localhost as chrome driver server + port: 9515, // "9515" is the port opened by chrome driver. + desiredCapabilities: { + browserName: 'chrome', + chromeOptions: { + binary: '/Path-to-Your-App/electron', // Path to your Electron binary. + args: [/* cli arguments */] // Optional, perhaps 'app=' + /path/to/your/app/ + } + } +}; + +var client = webdriverio.remote(options); + +client + .init() + .url('http://google.com') + .setValue('#q', 'webdriverio') + .click('#btnG') + .getTitle().then(function(title) { + console.log('Title was: ' + title); + }) + .end(); +``` + +## 運作流程 + +要在不重新建置 Electron 的情況下測試你的應用程式,只需要 [放置](https://github.com/atom/electron/blob/master/docs/tutorial/application-distribution.md) 你的應用程式到 Electron 的資源目錄中即可。 + +或者,傳遞一個指向你應用程式資料夾的參數來透過你的 Electron 執行檔運行,這會減少複製你應用程式到 Electron 資源資料夾的需求。 + +[chrome-driver]: https://sites.google.com/a/chromium.org/chromedriver/