Slide 1
Slide 1 text
ELECTRON
Construindo Aplicações Desktop
Multi-Plataforma com HTML, CSS e JS
Rafael Jaques (@rafajaques)
FISL 17
Slide 2
Slide 2 text
“Os que confiam no SENHOR serão como o
monte de Sião, que não se abala, mas
permanece para sempre.” (Salmo 125.1)
Slide 3
Slide 3 text
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
Slide 4
Slide 4 text
O que veremos?
O que é o Electron?
Como funciona?
O que já existe?
Primeiros passos
Distribuindo a aplicação
E várias outras coisas…
Slide 5
Slide 5 text
O que é o Electron?
Slide 6
Slide 6 text
Electron é um framework para
desenvolvimento desktop
multi-plataforma com a
utilização de tecnologias web.
Slide 7
Slide 7 text
Conhecido inicialmente como Atom
Shell, foi criado para que pudesse ser
desenvolvido o Atom.
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
Plataformas suportadas
Electron >= 1.0.0
>= 7
x86; x64
Ubuntu >= 12
Fedora >= 21
Debian >= 8
Possivelmente outras
x86; x64; arm
>= 10.9
x64
Slide 10
Slide 10 text
Tecnologias envolvidas
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
Basicamente o Electron é um
Chromium com
poderes de Node.js
Slide 14
Slide 14 text
Como o Electron
funciona?
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
Renderer
Página Web
Main
Ciclo de vida da app
browser-window
ipc
Node.js
menu
dialog
web-frame
ipc
Node.js
DOM
remote
Slide 17
Slide 17 text
Apps desenvolvidos
com Electron
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
O que se pode
fazer?
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
Primeiros passos
Slide 22
Slide 22 text
Estrutura mínima
Primeiro app
Slide 23
Slide 23 text
Estrutura mínima
package.json
main.js
index.html
Slide 24
Slide 24 text
package.json
{
"main": "main.js"
}
Slide 25
Slide 25 text
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');
});
Slide 26
Slide 26 text
index.html
Exemplo Electron
Fala, galera!
Palestra do Rafa Jaques sobre Electron
Slide 27
Slide 27 text
$ npm install -g electron-prebuilt
$ electron .
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
https://github.com/rafajaques/
electron-exemplos
Slide 30
Slide 30 text
Preparando
o ambiente
Slide 31
Slide 31 text
maneiras de rodar uma
aplicação com Electron
3
Slide 32
Slide 32 text
1. NPM
2. Prebuilt binaries
3. Dependência
Slide 33
Slide 33 text
Preparando
o ambiente
Slide 34
Slide 34 text
$ npm install -g electron-prebuilt
Slide 35
Slide 35 text
Preparando
o ambiente
Prebuilt binaries
Slide 36
Slide 36 text
https://github.com/electron/electron
Slide 37
Slide 37 text
Preparando
o ambiente
Dependência
Slide 38
Slide 38 text
package.json
{
"main": "main.js",
"devDependencies": {
"electron-prebuilt": "^1.2.5"
}
}
Slide 39
Slide 39 text
Quick start!
Slide 40
Slide 40 text
$ git clone https://github.com/electron/electron-quick-start
$ cd electron-quick-start
$ npm install && npm start
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
Conhecendo a API
do Electron
Slide 43
Slide 43 text
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
Slide 44
Slide 44 text
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/
Slide 45
Slide 45 text
BrowserWindow
Cria e controla janelas
Slide 46
Slide 46 text
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/
Slide 47
Slide 47 text
http://electron.atom.io/docs/api/browser-window/
Slide 48
Slide 48 text
Frameless
const {BrowserWindow} = require('electron');
let win = new BrowserWindow({
width: 800,
height: 600,
frame: false
});
Slide 49
Slide 49 text
dialog
Manipula janelas nativas do
sistema (abrir, salvar etc.)
dialog.showOpenDialog()
dialog.showSaveDialog()
dialog.showMessageBox()
dialog.showErrorBox()
http://electron.atom.io/docs/api/dialog/
Slide 50
Slide 50 text
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
]
}));
Slide 51
Slide 51 text
screen
Recupera informações da tela:
tamanho, displays, cursor etc.
Slide 52
Slide 52 text
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/
Slide 53
Slide 53 text
Tray
Adiciona ícones e menus à área
de notificação do sistema
Existem algumas limitações
http://electron.atom.io/docs/api/tray/
Slide 54
Slide 54 text
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);
});
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
Comunicação entre
camadas
Slide 57
Slide 57 text
IPC
Inter-process communication
Slide 58
Slide 58 text
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');
Slide 59
Slide 59 text
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"
Slide 60
Slide 60 text
WebContents
Executando JS no navegador
Slide 61
Slide 61 text
Executar JS via webContents
// Caso a sua janela esteja na variável "mainWindow"
mainWindow.webContents.executeJavaScript(
'alert("Funcionando!")'
);
Tente evitar…
Slide 62
Slide 62 text
Armazenando
dados
Slide 63
Slide 63 text
1. Local Storage
2. Bancos de Dados
(via pacotes npm)
Slide 64
Slide 64 text
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
Slide 65
Slide 65 text
https://www.npmjs.com
Slide 66
Slide 66 text
Exemplos
em Electron
Slide 67
Slide 67 text
Lembre-se que é possível utilizar
as funções do Node.js em
qualquer JS da aplicação
Slide 68
Slide 68 text
https://github.com/electron/electron-api-demos
Slide 69
Slide 69 text
https://github.com/hokein/electron-sample-apps
Slide 70
Slide 70 text
https://github.com/sindresorhus/awesome-electron
Slide 71
Slide 71 text
Exemplos de
código
Slide 72
Slide 72 text
Abrir um arquivo,
escrever e salvar
Slide 73
Slide 73 text
// Não tem Electron envolvido, apenas Node.js
const fs = require('fs');
fs.writeFileSync('arquivo.txt', 'Aqui eu escrevo!');
Slide 74
Slide 74 text
Detectar múltiplos
displays
Slide 75
Slide 75 text
const electron = require('electron');
const {app, BrowserWindow} = require('electron');
let win;
app.on('ready', () => {
let displays = electron.screen.getAllDisplays();
let externalDisplay = displays.find((display) => {
return display.bounds.x !== 0 || display.bounds.y !== 0;
});
if (externalDisplay) {
win = new BrowserWindow({
x: externalDisplay.bounds.x + 50,
y: externalDisplay.bounds.y + 50
});
} else {
console.log('Sem monitor externo :(');
}
});
Slide 76
Slide 76 text
Criando menu
com aceleradores
Slide 77
Slide 77 text
const template = [
{
label: 'Visualizar',
submenu: [
{
label: 'Recarregar',
accelerator: 'CmdOrCtrl+R',
click(item, focusedWindow) {
if (focusedWindow) focusedWindow.reload();
}
},
[...]
Slide 78
Slide 78 text
{
label: 'Toggle Developer Tools',
accelerator: process.platform === 'darwin' ?
'Alt+Command+I' : 'Ctrl+Shift+I',
click(item, focusedWindow) {
if (focusedWindow)
focusedWindow.webContents.toggleDevTools();
}
},
]
},
[...]
Slide 79
Slide 79 text
{
role: 'window',
submenu: [
{
role: 'minimize'
},
{
role: 'close'
},
]
}
];
const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);
Slide 80
Slide 80 text
Detectar o
sistema operacional
Slide 81
Slide 81 text
// Aqui também não tem Electron
console.log(process.platform);
// Linux === linux
// Windows === win32
// Mac OS === darwin
Slide 82
Slide 82 text
Rodando comandos
no terminal
Slide 83
Slide 83 text
// Novamente, nada de Electron
const process = require('child_process');
process.exec('ls', (err, response, stderr) => {
console.log(response);
});
Slide 84
Slide 84 text
Obtendo dados
do package.json
Slide 85
Slide 85 text
const packageInfo = require('./package.json');
console.log(packageInfo.name);
console.log(packageInfo.version);
Slide 86
Slide 86 text
Distribuindo a
aplicação
Slide 87
Slide 87 text
Electron Builder
1. Dependências NPM compiladas nativamente
2. Code Signing
3. Auto Update (Windows e Mac)
4. Publica para o GitHub Releases
Slide 88
Slide 88 text
https://github.com/electron-userland/electron-builder
Slide 89
Slide 89 text
Builder
* sem dor de cabeça
Slide 90
Slide 90 text
Mas não precisa se
preocupar com isso…
Um servidor de integração contínua
resolve o problema
Slide 91
Slide 91 text
1º passo
Estrutura com dois package.json
Electron Builder
Raiz
ʮʒʒ app
ʔ ʮʒʒ index.html
ʔ ʮʒʒ main.js
ʔ ʦʒʒ package.json
ʮʒʒ build
ʮʒʒ node_modules
ʦʒʒ package.json devDependencies
dependencies
Slide 92
Slide 92 text
2º passo
Definir os campos obrigatórios
do package.json
Electron Builder
name
description
version
author
homepage
license
Slide 93
Slide 93 text
3º passo
Especificar configurações de build
no package.json de desenvolvimento
Electron Builder
Slide 94
Slide 94 text
package.json - dev
{
"build": {
"appId": "id.do.seu.app",
"app-category-type": "categoria.do.seu.app",
"win": {
"iconUrl": "link http(s) para o ícone"
}
}
}
Slide 95
Slide 95 text
4º passo
Criar o diretório build contendo
três arquivos
Electron Builder
Slide 96
Slide 96 text
icon.icns (Mac)
icon.ico (Windows)
Slide 97
Slide 97 text
background.png
(imagem de fundo do DMG)
Slide 98
Slide 98 text
5º passo
Adicionar scripts de build
ao package.json de desenvolvimento
Electron Builder
Slide 99
Slide 99 text
package.json - dev
{
"scripts": {
"postinstall": "install-app-deps",
"pack": "build --dir",
"dist": "build"
}
}
Slide 100
Slide 100 text
6º passo
Executar o empacotamento
Electron Builder
Slide 101
Slide 101 text
$ npm run dist
Slide 102
Slide 102 text
Se o empacotamento
falhar…
Slide 103
Slide 103 text
https://github.com/electron-userland/electron-builder/wiki/Multi-Platform-Build
Slide 104
Slide 104 text
Artefatos gerados
pelo Builder
Slide 105
Slide 105 text
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)
Slide 106
Slide 106 text
Integração
Contínua
Slide 107
Slide 107 text
Explicando de maneira simples,
Integração Contínua permite testar e
compilar o código a cada commit
Slide 108
Slide 108 text
+
Slide 109
Slide 109 text
Como isso ajuda?
Slide 110
Slide 110 text
https://travis-ci.org
Slide 111
Slide 111 text
https://appveyor.com
Slide 112
Slide 112 text
Com um servidor de CI é possível
testar e empacotar a aplicação
em ambiente nativo
Slide 113
Slide 113 text
Exportando os binários
usando um servidor de CI
Slide 114
Slide 114 text
No content
Slide 115
Slide 115 text
.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'
[...]
Slide 116
Slide 116 text
.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
Slide 117
Slide 117 text
No content
Slide 118
Slide 118 text
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
Slide 119
Slide 119 text
No content
Slide 120
Slide 120 text
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"
}
}
Slide 121
Slide 121 text
Para publicar (--publish)
é preciso exportar o GH_TOKEN
Slide 122
Slide 122 text
Complementando
o Electron
Slide 123
Slide 123 text
http://photonkit.com/
Slide 124
Slide 124 text
https://github.com/gabrielbull/react-desktop
Slide 125
Slide 125 text
https://github.com/maxogden/menubar
Slide 126
Slide 126 text
PHP Assistant
Slide 127
Slide 127 text
Meu primeiro projeto com Electron
Slide 128
Slide 128 text
No content
Slide 129
Slide 129 text
No content
Slide 130
Slide 130 text
No content
Slide 131
Slide 131 text
No content
Slide 132
Slide 132 text
https://github.com/rafajaques/php-assistant
Slide 133
Slide 133 text
Dúvidas?
Slide 134
Slide 134 text
Obrigado!
Rafael Jaques
[email protected]
rafajaques.com.br / phpit.com.br
@rafajaques
speakerdeck.com/rafajaques
w
@
Slide 135
Slide 135 text
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/