diff --git a/docs-translations/pt-BR/tutorial/quick-start.md b/docs-translations/pt-BR/tutorial/quick-start.md new file mode 100644 index 0000000000..3ec71961a9 --- /dev/null +++ b/docs-translations/pt-BR/tutorial/quick-start.md @@ -0,0 +1,192 @@ +# 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 blibliotécas +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 + +Desde 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 tem permissão de acesso para recursos nativos. Usuários Electron, entretanto, +tem 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 gerência 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 +gerênciar 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 +your-app/ +├── package.json +├── main.js +└── index.html +``` + +O formato de `package.json` é exatamente o mesmo que os dos módulos do Node, e +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" : "your-app", + "version" : "0.1.0", + "main" : "main.js" +} +``` + +__Nota__: Se o campo `main` não estiver presente no `package.jso`, 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 +var app = require('app'); // Módulo para controlar o ciclo de vida do app. +var BrowserWindow = require('browser-window'); // Módulo para criar uma janela nativa do browser. + +// Relate falhas para nossos servidores. +require('crash-reporter').start(); + +// Mantenha uma referência global para o objeto window, se você não o fizer, +// a janela será fechada automaticamente quando o objeto JavaScript for +// coletado pelo garbage collector. +var mainWindow = null; + +// Sair quando todas as janelas estiverem fechadas. +app.on('window-all-closed', function() { + // No OS X é comum para as aplicações na barra de menu + // continuarem ativas até que o usuário saia explicitamente + // com Cmd + Q + if (process.platform != 'darwin') { + app.quit(); + } +}); + +// Esse método irá ser chamado quando o Electron finalizar +// a inicialização e estiver pronto para criar janelas do browser. +app.on('ready', function() { + // Criar a janela do navegador. + mainWindow = new BrowserWindow({width: 800, height: 600}); + + // e carrega o index.html do app. + mainWindow.loadUrl('file://' + __dirname + '/index.html'); + + // Abre os DevTools. + mainWindow.openDevTools(); + + // Emitido quando a janela é fechada. + mainWindow.on('closed', function() { + // Desfaz a referência para o objeto window, normalmente você deverá + // guardar as janelas em um array se seu app suportar várias janelas, + // essa é a hora que você deverá deletar o elemento correspondente. + mainWindow = null; + }); +}); +``` + +Finalmente o `index.html` é a página web que você quer mostrar: + +```html + + +
+ +