200 lines
6.3 KiB
Markdown
200 lines
6.3 KiB
Markdown
# Introdução
|
|
|
|
Electron permite criar aplicações desktop com puro JavaScript através de
|
|
um runtime com APIs ricas e nativas. Você pode ver isso como uma variação do
|
|
runtime do io.js que é focado em aplicações desktop em vez de web servers.
|
|
|
|
Isso não significa que o Electron é uma ligação em JavaScript para bibliotecas
|
|
de interface gráfica (GUI). Em vez disso, Electron usa páginas web como
|
|
interface gráfica, então você pode ver isso também como um navegador Chromium
|
|
mínimo, controlado por JavaScript.
|
|
|
|
### Processo Principal
|
|
|
|
No Electron, o processo que executa o script principal (main) do `package.json`
|
|
é chamado __processo principal__. O script que roda no processo principal pode
|
|
mostrar uma GUI criando páginas web.
|
|
|
|
### Processo Renderizador
|
|
|
|
Já que o Electron usa o Chromium para mostrar as páginas web, a arquitetura
|
|
multi-processo do Chromium também é usada. Cada página web no Electron roda em
|
|
seu próprio processo, o que é chamado de __processo renderizador__.
|
|
|
|
Em navegadores comuns, as páginas web normalmente rodam em um ambiente em sandbox
|
|
e não têm permissão de acesso para recursos nativos. Usuários Electron, entretanto,
|
|
têm o poder de usar as APIs do io.js nas páginas web, permitindo interações de baixo
|
|
nível no sistema operacional.
|
|
|
|
### Diferenças Entre o Processo Principal e o Processo Renderizador
|
|
|
|
O processo principal cria as páginas web criando instâncias de `BrowserWindow`.
|
|
Cada instância de `BrowserWindow` roda a página web em seu próprio processo renderizador.
|
|
Quando uma instância de `BrowserWindow` é destruída, o processo renderizador
|
|
correspondente também é finalizado.
|
|
|
|
O processo principal gerencia todas as páginas web de seus processos renderizadores
|
|
correspondentes. Cada processo renderizador é isolado e toma conta de sua
|
|
respectiva página web.
|
|
|
|
Nas páginas web, chamar APIs nativas relacionadas à GUI não é permitido porque
|
|
gerenciar recursos de GUI em páginas web é muito perigoso e torna fácil o vazamento de
|
|
recursos. Se você quer realizar operações com GUI em páginas web, o processo
|
|
renderizador da página web deve se comunicar com o processo principal para requisitar
|
|
que o processo principal realize estas operações.
|
|
|
|
No Electron, nós fornecemos o módulo [ipc](../../../docs/api/ipc-renderer.md) para
|
|
comunicação entre o processo principal e o processo renderizador. Que é também um
|
|
módulo [remoto](../../../docs/api/remote.md) para comunicação RPC.
|
|
|
|
## Crie seu Primeiro App Electron
|
|
|
|
Geralmente, um app Electron é estruturado assim:
|
|
|
|
```text
|
|
seu-app/
|
|
├── package.json
|
|
├── main.js
|
|
└── index.html
|
|
```
|
|
|
|
O formato de `package.json` é exatamente o mesmo que o dos módulos do Node,
|
|
e o script especificado pelo campo `main` é o script de inicialização do seu app,
|
|
que irá executar o processo principal. Um exemplo do seu `package.json` deve parecer
|
|
com isso:
|
|
|
|
```json
|
|
{
|
|
"name" : "seu-app",
|
|
"version" : "0.1.0",
|
|
"main" : "main.js"
|
|
}
|
|
```
|
|
|
|
__Nota__: Se o campo `main` não estiver presente no `package.json`, o Electron irá
|
|
tentar carregar um `index.js`
|
|
|
|
O `main.js` deve criar as janelas e os manipuladores de eventos do sistema, um típico
|
|
exemplo:
|
|
|
|
```javascript
|
|
const {app, BrowserWindow} = require('electron')
|
|
|
|
// Keep a global reference of the window object, if you don't, the window will
|
|
// be closed automatically when the JavaScript object is garbage collected.
|
|
let win
|
|
|
|
function createWindow () {
|
|
// Create the browser window.
|
|
win = new BrowserWindow({width: 800, height: 600})
|
|
|
|
// and load the index.html of the app.
|
|
win.loadURL(`file://${__dirname}/index.html`)
|
|
|
|
// Open the DevTools.
|
|
win.webContents.openDevTools()
|
|
|
|
// Emitted when the window is closed.
|
|
win.on('closed', () => {
|
|
// Dereference the window object, usually you would store windows
|
|
// in an array if your app supports multi windows, this is the time
|
|
// when you should delete the corresponding element.
|
|
win = null
|
|
})
|
|
}
|
|
|
|
// This method will be called when Electron has finished
|
|
// initialization and is ready to create browser windows.
|
|
// Some APIs can only be used after this event occurs.
|
|
app.on('ready', createWindow)
|
|
|
|
// Quit when all windows are closed.
|
|
app.on('window-all-closed', () => {
|
|
// On macOS it is common for applications and their menu bar
|
|
// to stay active until the user quits explicitly with Cmd + Q
|
|
if (process.platform !== 'darwin') {
|
|
app.quit()
|
|
}
|
|
})
|
|
|
|
app.on('activate', () => {
|
|
// On macOS it's common to re-create a window in the app when the
|
|
// dock icon is clicked and there are no other windows open.
|
|
if (win === null) {
|
|
createWindow()
|
|
}
|
|
})
|
|
|
|
// In this file you can include the rest of your app's specific main process
|
|
// code. You can also put them in separate files and require them here.
|
|
```
|
|
|
|
Finalmente o `index.html` é a página web que você quer mostrar:
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Hello World!</title>
|
|
</head>
|
|
<body>
|
|
<h1>Hello World!</h1>
|
|
Nós estamos usando io.js <script>document.write(process.version)</script>
|
|
e Electron <script>document.write(process.versions.electron)</script>.
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
## Execute seu App
|
|
|
|
Uma vez que você criou seus arquivos `main.js`, `index.html`, e `package.json` iniciais,
|
|
você provavelmente vai querer tentar executar seu app localmente para testa-lo e ter
|
|
certeza que funciona como você espera.
|
|
|
|
### electron-prebuilt
|
|
|
|
Se você instalou `electron-prebuilt` globalmente com `npm`, então você irá precisar apenas
|
|
rodar o seguinte comando no diretório fonte do seu app:
|
|
|
|
```bash
|
|
electron .
|
|
```
|
|
|
|
Se você o instalou localmente, então execute:
|
|
|
|
```bash
|
|
./node_modules/.bin/electron .
|
|
```
|
|
|
|
### Binário do Electron Baixado Manualmente
|
|
|
|
Se você baixou o Electron manualmente, você pode também usar o binário incluído para
|
|
executar seu app diretamente.
|
|
|
|
#### Windows
|
|
|
|
```bash
|
|
$ .\electron\electron.exe seu-app\
|
|
```
|
|
|
|
#### Linux
|
|
|
|
```bash
|
|
$ ./electron/electron seu-app/
|
|
```
|
|
|
|
#### macOS
|
|
|
|
```bash
|
|
$ ./Electron.app/Contents/MacOS/Electron seu-app/
|
|
```
|
|
|
|
`Electron.app` aqui é uma parte do pacote de lançamento do Electron, você pode baixa-lo
|
|
[aqui](https://github.com/electron/electron/releases).
|
|
|
|
### Executar como uma distribuição
|
|
|
|
Depois de terminar seu app, você pode criar uma distribuição seguindo o guia
|
|
[Distribuição de aplicações](./application-distribution.md) e então executar o app
|
|
empacotado.
|