Electron: Construindo Aplicações Desktop Multi-Plataforma com HTML, CSS e JS

ELECTRON Construindo Aplicações Desktop Multi-Plataforma com HTML, CSS e JS
Rafael Jaques (@rafajaques) FISL 17

“Os que conﬁam no SENHOR serão como o monte de
Sião, que não se abala, mas permanece para sempre.” (Salmo 125.1)

Rafael Jaques @rafajaques Professor do IFRS Desenvolvedor web e viciado
em segurança Entusiasta Open Source Evangelista PHP e Electron rafajaques.com.br phpit.com.br github.com/rafajaques speakerdeck.com/rafajaques

O que veremos? O que é o Electron? Como funciona?
O que já existe? Primeiros passos Distribuindo a aplicação E várias outras coisas…

O que é o Electron?

Electron é um framework para desenvolvimento desktop multi-plataforma com a
utilização de tecnologias web.

Conhecido inicialmente como Atom Shell, foi criado para que pudesse
ser desenvolvido o Atom.

Plataformas suportadas Electron >= 1.0.0 >= 7 x86; x64 Ubuntu
>= 12 Fedora >= 21 Debian >= 8 Possivelmente outras x86; x64; arm >= 10.9 x64

Tecnologias envolvidas

Basicamente o Electron é um Chromium com poderes de Node.js

Como o Electron funciona?

Renderer Página Web Main Ciclo de vida da app browser-window
ipc Node.js menu dialog web-frame ipc Node.js DOM remote

Apps desenvolvidos com Electron

O que se pode fazer?

Primeiros passos

Estrutura mínima Primeiro app

Estrutura mínima package.json main.js index.html

package.json { "main": "main.js" }

main.js const {app,BrowserWindow} = require('electron'); let mainWindow = null; app.on('ready',
() => { mainWindow = new BrowserWindow({width:800, height:600}); mainWindow.loadURL('file://' + __dirname + '/index.html'); });

index.html <html> <head> <title>Exemplo Electron</title> </head> <body> <h1>Fala, galera!</h1> <p>Palestra
do Rafa Jaques sobre Electron</p> </body> </html>

$ npm install -g electron-prebuilt $ electron .

https://github.com/rafajaques/ electron-exemplos

Preparando o ambiente

maneiras de rodar uma aplicação com Electron 3

1. NPM 2. Prebuilt binaries 3. Dependência

Preparando o ambiente

$ npm install -g electron-prebuilt

Preparando o ambiente Prebuilt binaries

https://github.com/electron/electron

Preparando o ambiente Dependência

package.json { "main": "main.js", "devDependencies": { "electron-prebuilt": "^1.2.5" } }

Quick start!

$ git clone https://github.com/electron/electron-quick-start $ cd electron-quick-start $ npm install
&& npm start

Conhecendo a API do Electron

Main Renderer Ambos app autoUpdater BrowserWindow contentTracing dialog DownloadItem globalShortcut
ipcMain Menu MenuItem powerMonitor powerSaveBlocker protocol session systemPreferences Tray webContents desktopCapturer File Object ipcRenderer remote webFrame clipboard crashReporter nativeImage process screen shell

app Controla o ciclo de vida da aplicação app.quit() app.relaunch()
app.focus() app.getLocale() app.setBadgeCount() [OSX,Linux] app.dock.bounce() [OSX] http://electron.atom.io/docs/api/app/

BrowserWindow Cria e controla janelas

BrowserWindow // No processo principal const {BrowserWindow} = require('electron'); //
Ou no processo renderer const {BrowserWindow} = require('electron').remote; let win = new BrowserWindow({width: 800, height: 600}); win.on('closed', () => { win = null; }); win.loadURL('http://rafajaques.com.br'); // http://electron.atom.io/docs/api/browser-window/

http://electron.atom.io/docs/api/browser-window/

Frameless const {BrowserWindow} = require('electron'); let win = new BrowserWindow({
width: 800, height: 600, frame: false });

dialog Manipula janelas nativas do sistema (abrir, salvar etc.) dialog.showOpenDialog()
dialog.showSaveDialog() dialog.showMessageBox() dialog.showErrorBox() http://electron.atom.io/docs/api/dialog/

dialog let win = ...; // BrowserWindow na qual será
aberta a janela const {dialog} = require('electron'); console.log(dialog.showOpenDialog({ properties: [ 'openFile', // Janela para abrir arquivo 'openDirectory', // Permitir abrir diretórios 'multiSelections' // Permitir selecionar vários itens ] }));

screen Recupera informações da tela: tamanho, displays, cursor etc.

screen // Criar uma janela que ocupa toda a tela
const electron = require('electron'); const {app, BrowserWindow} = electron; let win app.on('ready', () => { const {width, height} = electron.screen.getPrimaryDisplay().workAreaSize; win = new BrowserWindow({width, height}); }); // http://electron.atom.io/docs/api/screen/

Tray Adiciona ícones e menus à área de notiﬁcação do
sistema Existem algumas limitações http://electron.atom.io/docs/api/tray/

Tray const {app, Menu, Tray} = require('electron'); let tray =
null; app.on('ready', () => { tray = new Tray('/caminho/para/o/icone'); const contextMenu = Menu.buildFromTemplate([ {label: 'Opção 1', type: 'radio'}, {label: 'Opção 2', type: 'radio'}, {label: 'Opção 3', type: 'radio', checked: true}, {label: 'Opção 4', type: 'radio'} ]); tray.setToolTip('Balãozinho da aplicação'); tray.setContextMenu(contextMenu); });

Comunicação entre camadas

IPC Inter-process communication

IPC - Assíncrono // Processo principal const {ipcMain} = require('electron');
ipcMain.on('mensagem-assincrona', (event, arg) => { console.log(arg); // "ping" event.sender.send('resposta-assincrona', 'pong'); }); // No processo renderer (página web) const {ipcRenderer} = require('electron'); ipcRenderer.on('resposta-assincrona', (event, arg) => { console.log(arg); // "pong" }); ipcRenderer.send('mensagem-assincrona', 'ping');

IPC - Síncrono // Processo principal const {ipcMain} = require('electron');
ipcMain.on('mensagem-sincrona', (event, arg) => { console.log(arg); // "ping" event.returnValue = 'pong'; }); // No processo renderer (página web) const {ipcRenderer} = require('electron'); console.log(ipcRenderer.sendSync('mensagem-sincrona', 'ping')); // "pong"

WebContents Executando JS no navegador

Executar JS via webContents // Caso a sua janela esteja
na variável "mainWindow" mainWindow.webContents.executeJavaScript( 'alert("Funcionando!")' ); Tente evitar…

Armazenando dados

1. Local Storage 2. Bancos de Dados (via pacotes npm)

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

https://www.npmjs.com

Exemplos em Electron

Lembre-se que é possível utilizar as funções do Node.js em
qualquer JS da aplicação

https://github.com/electron/electron-api-demos

https://github.com/hokein/electron-sample-apps

https://github.com/sindresorhus/awesome-electron

Exemplos de código

Abrir um arquivo, escrever e salvar

// Não tem Electron envolvido, apenas Node.js const fs =
require('fs'); fs.writeFileSync('arquivo.txt', 'Aqui eu escrevo!');

Detectar múltiplos displays

Criando menu com aceleradores

const template = [ { label: 'Visualizar', submenu: [ {
label: 'Recarregar', accelerator: 'CmdOrCtrl+R', click(item, focusedWindow) { if (focusedWindow) focusedWindow.reload(); } }, [...]

{ label: 'Toggle Developer Tools', accelerator: process.platform === 'darwin' ?
'Alt+Command+I' : 'Ctrl+Shift+I', click(item, focusedWindow) { if (focusedWindow) focusedWindow.webContents.toggleDevTools(); } }, ] }, [...]

{ role: 'window', submenu: [ { role: 'minimize' }, {
role: 'close' }, ] } ]; const menu = Menu.buildFromTemplate(template); Menu.setApplicationMenu(menu);

Detectar o sistema operacional

// Aqui também não tem Electron console.log(process.platform); // Linux ===
linux // Windows === win32 // Mac OS === darwin

Rodando comandos no terminal

// Novamente, nada de Electron const process = require('child_process'); process.exec('ls',
(err, response, stderr) => { console.log(response); });

Obtendo dados do package.json

const packageInfo = require('./package.json'); console.log(packageInfo.name); console.log(packageInfo.version);

Distribuindo a aplicação

Electron Builder 1. Dependências NPM compiladas nativamente 2. Code Signing
3. Auto Update (Windows e Mac) 4. Publica para o GitHub Releases

https://github.com/electron-userland/electron-builder

Builder * sem dor de cabeça

Mas não precisa se preocupar com isso… Um servidor de
integração contínua resolve o problema

1º passo Estrutura com dois package.json Electron Builder Raiz ʮʒʒ
app ʔ ʮʒʒ index.html ʔ ʮʒʒ main.js ʔ ʦʒʒ package.json ʮʒʒ build ʮʒʒ node_modules ʦʒʒ package.json devDependencies dependencies

2º passo Deﬁnir os campos obrigatórios do package.json Electron Builder
name description version author homepage license

3º passo Especiﬁcar conﬁgurações de build no package.json de desenvolvimento
Electron Builder

package.json - dev { "build": { "appId": "id.do.seu.app", "app-category-type": "categoria.do.seu.app",
"win": { "iconUrl": "link http(s) para o ícone" } } }

4º passo Criar o diretório build contendo três arquivos Electron
Builder

icon.icns (Mac) icon.ico (Windows)

background.png (imagem de fundo do DMG)

5º passo Adicionar scripts de build ao package.json de desenvolvimento
Electron Builder

package.json - dev { "scripts": { "postinstall": "install-app-deps", "pack": "build
--dir", "dist": "build" } }

6º passo Executar o empacotamento Electron Builder

$ npm run dist

Se o empacotamento falhar…

https://github.com/electron-userland/electron-builder/wiki/Multi-Platform-Build

Artefatos gerados pelo Builder

Artefatos Todas as plataformas: 7z, zip, tar.xz, tar.lz, tar.gz, tar.bz2
Mac OS: dmg, mas Linux: AppImage, deb, rpm, freebsd, pacman, p5p, apk Windows: NSIS, Squirrel.Windows (ambos exe)

Integração Contínua

Explicando de maneira simples, Integração Contínua permite testar e compilar
o código a cada commit

Como isso ajuda?

https://travis-ci.org

https://appveyor.com

Com um servidor de CI é possível testar e empacotar
a aplicação em ambiente nativo

Exportando os binários usando um servidor de CI

.travis.yml language: node_js matrix: include: - os: osx osx_image: xcode7.3
node_js: '4' - os: linux env: CC=clang CXX=clang++ npm_config_clang=1 compiler: clang sudo: required dist: trusty node_js: ‘4' [...]

.travis.yml cache: directories: - node_modules - app/node_modules - "$HOME/.electron" addons:
apt: packages: - icnsutils - graphicsmagick - xz-utils - gcc-multilib - g++-multilib install: - npm install after_success: - npm run publish:$TRAVIS_OS_NAME

appveyor.yml version: 0.1.{build} platform: - x64 cache: - node_modules -
app\node_modules - '%APPDATA%\npm-cache' - '%USERPROFILE%\.electron' install: - git reset --hard HEAD - npm install npm -g - npm install electron-builder - npm install - npm prune build_script: - npm run publish:win

package.json { "scripts": { "publish:osx": "build --osx --publish onTagOrDraft", "publish:linux":
"build --linux deb rpm freebsd pacman tar.xz --publish onTagOrDraft", "publish:linux32": "build --linux tar.xz --ia32 --publish onTagOrDraft", "publish:linux64": "build --linux tar.xz --x64 --publish onTagOrDraft", "publish:win": "build --windows --x64 --publish onTagOrDraft" } }

Para publicar (--publish) é preciso exportar o GH_TOKEN

Complementando o Electron

http://photonkit.com/

https://github.com/gabrielbull/react-desktop

https://github.com/maxogden/menubar

PHP Assistant

Meu primeiro projeto com Electron

https://github.com/rafajaques/php-assistant

Dúvidas?

Obrigado! Rafael Jaques [email protected] rafajaques.com.br / phpit.com.br @rafajaques speakerdeck.com/rafajaques w
@

Imagens https://habrahabr.ru/post/278951/ http://www.iconarchive.com/show/colorful-long- shadow-icons-by-graphicloads/User-icon.html http://electron.atom.io/ http://github.com/ https://travis-ci.org/ https://www.appveyor.com/

Electron: Construindo Aplicações Desktop Multi-...

Electron: Construindo Aplicações Desktop Multi-Plataforma com HTML, CSS e JS

More Decks by Rafa Jaques

Other Decks in Programming

Featured

Transcript