Merge pull request #4260 from fbukevin/master
Finished current entries translation of Guides part into zh-TW
This commit is contained in:
Cheng Zhao
commit
8348910483
9 changed files with 698 additions and 1 deletions
|
|
@ -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)
|
||||
|
||||
## 教學
|
||||
|
||||
|
|
|
|||
108
docs-translations/zh-TW/tutorial/application-distribution.md
Normal file
108
docs-translations/zh-TW/tutorial/application-distribution.md
Normal file
|
|
@ -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)
|
||||
150
docs-translations/zh-TW/tutorial/application-packaging.md
Normal file
150
docs-translations/zh-TW/tutorial/application-packaging.md
Normal file
|
|
@ -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
|
||||
<script>
|
||||
var $ = require('./jquery.min.js');
|
||||
$.get('file:///path/to/example.asar/file.txt', function(data) {
|
||||
console.log(data);
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
### 把一個 `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
|
||||
71
docs-translations/zh-TW/tutorial/debugging-main-process.md
Normal file
71
docs-translations/zh-TW/tutorial/debugging-main-process.md
Normal file
|
|
@ -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
|
||||
|
||||
46
docs-translations/zh-TW/tutorial/devtools-extension.md
Normal file
46
docs-translations/zh-TW/tutorial/devtools-extension.md
Normal file
|
|
@ -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
|
||||
|
|
@ -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
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
|
||||
<plist version="1.0">
|
||||
<dict>
|
||||
<key>com.apple.security.app-sandbox</key>
|
||||
<true/>
|
||||
<key>com.apple.security.inherit</key>
|
||||
<true/>
|
||||
</dict>
|
||||
</plist>
|
||||
```
|
||||
|
||||
`parent.plist`:
|
||||
|
||||
```xml
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
|
||||
<plist version="1.0">
|
||||
<dict>
|
||||
<key>com.apple.security.app-sandbox</key>
|
||||
<true/>
|
||||
</dict>
|
||||
</plist>
|
||||
```
|
||||
|
||||
接著遵照下面的腳本簽署你的應用程式：
|
||||
|
||||
```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/
|
||||
|
|
@ -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 位元系統。
|
||||
|
|
@ -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
|
||||
});
|
||||
```
|
||||
|
||||
## 在一個 `<webview>` Tag 中啟用 Flash 外掛
|
||||
|
||||
把 `plugins` 屬性加入 `<webview>` tag。
|
||||
|
||||
```html
|
||||
<webview src="http://www.adobe.com/software/flash/about/" plugins></webview>
|
||||
```
|
||||
123
docs-translations/zh-TW/tutorial/using-selenium-and-webdriver.md
Normal file
123
docs-translations/zh-TW/tutorial/using-selenium-and-webdriver.md
Normal file
|
|
@ -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/
|
||||
Loading…
Reference in a new issue