abstract business meeting · editor de código-fonte desenvolvido para windows, macos e linux....
TRANSCRIPT
![Page 1: ABSTRACT BUSINESS MEETING · Editor de código-fonte desenvolvido para Windows, macOS e Linux. Editor de texto de código aberto disponível para Linux, macOS e Windows. ELECTRON](https://reader034.vdocuments.mx/reader034/viewer/2022042119/5e988a74dcb92c6152504084/html5/thumbnails/1.jpg)
Do web ao desktop em poucos comandos
Electron
![Page 2: ABSTRACT BUSINESS MEETING · Editor de código-fonte desenvolvido para Windows, macOS e Linux. Editor de texto de código aberto disponível para Linux, macOS e Windows. ELECTRON](https://reader034.vdocuments.mx/reader034/viewer/2022042119/5e988a74dcb92c6152504084/html5/thumbnails/2.jpg)
AGENDA
Exemplos e Aplicação Prática
03
Electron – O que é
01
Quem utiliza o Electron
02
Build e Deploy
04
![Page 3: ABSTRACT BUSINESS MEETING · Editor de código-fonte desenvolvido para Windows, macOS e Linux. Editor de texto de código aberto disponível para Linux, macOS e Windows. ELECTRON](https://reader034.vdocuments.mx/reader034/viewer/2022042119/5e988a74dcb92c6152504084/html5/thumbnails/3.jpg)
APRESENTAÇÃO
Desenvolvedor de Software na NelogicaBacharel em Ciência da Computação pela UPF
MBA em Gestão de Projetos pela Universidade La Salle
Julio Sieg
![Page 4: ABSTRACT BUSINESS MEETING · Editor de código-fonte desenvolvido para Windows, macOS e Linux. Editor de texto de código aberto disponível para Linux, macOS e Windows. ELECTRON](https://reader034.vdocuments.mx/reader034/viewer/2022042119/5e988a74dcb92c6152504084/html5/thumbnails/4.jpg)
Permite o desenvolvimento de aplicaçõesdesktop, usando Javascript, HTML e CSS.
Desenvolvido pelo Github.
Utiliza tecnologias como o Node.js e o Chromium
ELECTRONO QUE É?
![Page 5: ABSTRACT BUSINESS MEETING · Editor de código-fonte desenvolvido para Windows, macOS e Linux. Editor de texto de código aberto disponível para Linux, macOS e Windows. ELECTRON](https://reader034.vdocuments.mx/reader034/viewer/2022042119/5e988a74dcb92c6152504084/html5/thumbnails/5.jpg)
Editor de código-fonte desenvolvido para Windows,
macOS e Linux.
Editor de texto de código aberto disponível para Linux,
macOS e Windows.
ELECTRONQUEM UTILIZA?
VISUAL STUDIO CODE ATOM EDITOR
Plataforma proprietária de mensagens baseada na nuvem.
SLACK
Microsoft Github Slack
![Page 6: ABSTRACT BUSINESS MEETING · Editor de código-fonte desenvolvido para Windows, macOS e Linux. Editor de texto de código aberto disponível para Linux, macOS e Windows. ELECTRON](https://reader034.vdocuments.mx/reader034/viewer/2022042119/5e988a74dcb92c6152504084/html5/thumbnails/6.jpg)
Aplicativo multiplataforma de mensagens instantâneas e
chamadas de voz.
O WebTorrent é um cliente torrent de streaming ponto a
ponto.
ELECTRONQUEM UTILIZA?
WHATSAPPDESKTOP
WEBTORRENTDESKTOP
Manutenção de sitesWordpress através do
aplicativo desktop
WORDPRESSDESKTOP
Whatsapp Inc. Webtorrent Wordpress
![Page 7: ABSTRACT BUSINESS MEETING · Editor de código-fonte desenvolvido para Windows, macOS e Linux. Editor de texto de código aberto disponível para Linux, macOS e Windows. ELECTRON](https://reader034.vdocuments.mx/reader034/viewer/2022042119/5e988a74dcb92c6152504084/html5/thumbnails/7.jpg)
“É mais fácil do que você
pensa. Se você pode construir
um website, você pode
construir um aplicativo
desktop.”
— Documentação do Electron
![Page 8: ABSTRACT BUSINESS MEETING · Editor de código-fonte desenvolvido para Windows, macOS e Linux. Editor de texto de código aberto disponível para Linux, macOS e Windows. ELECTRON](https://reader034.vdocuments.mx/reader034/viewer/2022042119/5e988a74dcb92c6152504084/html5/thumbnails/8.jpg)
O Electron usa o Chromium e o
Node.js, assim você pode
construir sua aplicação com
HTML, CSS e JavaScript.
Tecnologias Web
Compatíveis com Mac,
Windows, e Linux, aplicativos
Electron são construídos e
executados nas três
plataformas.
MultiplataformaElectron é um projeto de
código aberto mantido pelo
GitHub e por uma comunidade
ativa de colaboradores.
CódigoAberto
![Page 9: ABSTRACT BUSINESS MEETING · Editor de código-fonte desenvolvido para Windows, macOS e Linux. Editor de texto de código aberto disponível para Linux, macOS e Windows. ELECTRON](https://reader034.vdocuments.mx/reader034/viewer/2022042119/5e988a74dcb92c6152504084/html5/thumbnails/9.jpg)
ATUALIZAÇÕES AUTOMÁTICAS
SIMPLIFICANDO
DEPURAÇÃO E CRIAÇÃO DE PERFIL
NOTIFICAÇÕES E MENU NATIVOS
RELATÓRIO DE FALHAS
INSTALADORES DO WINDOWS
![Page 10: ABSTRACT BUSINESS MEETING · Editor de código-fonte desenvolvido para Windows, macOS e Linux. Editor de texto de código aberto disponível para Linux, macOS e Windows. ELECTRON](https://reader034.vdocuments.mx/reader034/viewer/2022042119/5e988a74dcb92c6152504084/html5/thumbnails/10.jpg)
LET’S DOTHIS
![Page 11: ABSTRACT BUSINESS MEETING · Editor de código-fonte desenvolvido para Windows, macOS e Linux. Editor de texto de código aberto disponível para Linux, macOS e Windows. ELECTRON](https://reader034.vdocuments.mx/reader034/viewer/2022042119/5e988a74dcb92c6152504084/html5/thumbnails/11.jpg)
# Clone o repositório Quick Start$ git clone https://github.com/electron/electron-quick-start
# Ir para o repositório$ cd electron-quick-start
# Instale as dependências e execute$ npm install && npm start
POR ONDE COMEÇAR
![Page 12: ABSTRACT BUSINESS MEETING · Editor de código-fonte desenvolvido para Windows, macOS e Linux. Editor de texto de código aberto disponível para Linux, macOS e Windows. ELECTRON](https://reader034.vdocuments.mx/reader034/viewer/2022042119/5e988a74dcb92c6152504084/html5/thumbnails/12.jpg)
![Page 13: ABSTRACT BUSINESS MEETING · Editor de código-fonte desenvolvido para Windows, macOS e Linux. Editor de texto de código aberto disponível para Linux, macOS e Windows. ELECTRON](https://reader034.vdocuments.mx/reader034/viewer/2022042119/5e988a74dcb92c6152504084/html5/thumbnails/13.jpg)
const {app, BrowserWindow} = require('electron')const path = require('path')
let mainWindow
function createWindow () {mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {
preload: path.join(__dirname, 'preload.js')}
})
mainWindow.loadFile('index.html')
mainWindow.on('closed', function () {mainWindow = null
})}
app.on('ready', createWindow)
main.js
![Page 14: ABSTRACT BUSINESS MEETING · Editor de código-fonte desenvolvido para Windows, macOS e Linux. Editor de texto de código aberto disponível para Linux, macOS e Windows. ELECTRON](https://reader034.vdocuments.mx/reader034/viewer/2022042119/5e988a74dcb92c6152504084/html5/thumbnails/14.jpg)
<!DOCTYPE html><html>
<head><meta charset="UTF-8"><title>Hello World!</title>
</head><body>
<h1>Hello World!</h1>We are using Node.js <span id="node-version"></span>,Chromium <span id="chrome-version"></span>,and Electron <span id="electron-version"></span>.
<!-- You can also require other files to run in this process --><script src="./renderer.js"></script>
</body></html>
index.html
![Page 15: ABSTRACT BUSINESS MEETING · Editor de código-fonte desenvolvido para Windows, macOS e Linux. Editor de texto de código aberto disponível para Linux, macOS e Windows. ELECTRON](https://reader034.vdocuments.mx/reader034/viewer/2022042119/5e988a74dcb92c6152504084/html5/thumbnails/15.jpg)
// All of the Node.js APIs are available in the preload process.// It has the same sandbox as a Chrome extension.window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {const element = document.getElementById(selector)if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {replaceText(`${type}-version`, process.versions[type])
}})
preload.js
![Page 16: ABSTRACT BUSINESS MEETING · Editor de código-fonte desenvolvido para Windows, macOS e Linux. Editor de texto de código aberto disponível para Linux, macOS e Windows. ELECTRON](https://reader034.vdocuments.mx/reader034/viewer/2022042119/5e988a74dcb92c6152504084/html5/thumbnails/16.jpg)
# Criando nova pasta para o projeto$ mkdir projeto-tdc
# Ir para o repositório$ cd projeto-tdc
# Instalar o electron$ npm install –g electron
# Inicializa$ npm init
# Executar$ electron .
RENDERIZANDO PÁGINA WEB
![Page 17: ABSTRACT BUSINESS MEETING · Editor de código-fonte desenvolvido para Windows, macOS e Linux. Editor de texto de código aberto disponível para Linux, macOS e Windows. ELECTRON](https://reader034.vdocuments.mx/reader034/viewer/2022042119/5e988a74dcb92c6152504084/html5/thumbnails/17.jpg)
const { app, BrowserWindow } = require('electron')
let win
app.on('ready', function(){win = new BrowserWindow({ width: 800, height: 600 })win.loadURL('https://www.thedevelopersconference.com.br/tdc/2019/portoaleg
re/trilhas')})
main.js
![Page 18: ABSTRACT BUSINESS MEETING · Editor de código-fonte desenvolvido para Windows, macOS e Linux. Editor de texto de código aberto disponível para Linux, macOS e Windows. ELECTRON](https://reader034.vdocuments.mx/reader034/viewer/2022042119/5e988a74dcb92c6152504084/html5/thumbnails/18.jpg)
![Page 19: ABSTRACT BUSINESS MEETING · Editor de código-fonte desenvolvido para Windows, macOS e Linux. Editor de texto de código aberto disponível para Linux, macOS e Windows. ELECTRON](https://reader034.vdocuments.mx/reader034/viewer/2022042119/5e988a74dcb92c6152504084/html5/thumbnails/19.jpg)
# Instalar o Electron Builder$ npm install electron-builder --save-dev
BUILD E DEPLOY
![Page 20: ABSTRACT BUSINESS MEETING · Editor de código-fonte desenvolvido para Windows, macOS e Linux. Editor de texto de código aberto disponível para Linux, macOS e Windows. ELECTRON](https://reader034.vdocuments.mx/reader034/viewer/2022042119/5e988a74dcb92c6152504084/html5/thumbnails/20.jpg)
{"name": "exemplo-tdc","version": "1.0.0","description": "","main": "main.js","scripts": {
"test": "echo \"Error: no test specified\" && exit 1","start": "node main.js","pack": "electron-builder --dir","dist": "electron-builder"
},"build": {
"appId": "your.id","mac": {"category": "your.app.category.type"
}},"author": "","license": "ISC","devDependencies": {
"electron": "^7.0.0","electron-builder": "^21.2.0"
}}
package.json
![Page 21: ABSTRACT BUSINESS MEETING · Editor de código-fonte desenvolvido para Windows, macOS e Linux. Editor de texto de código aberto disponível para Linux, macOS e Windows. ELECTRON](https://reader034.vdocuments.mx/reader034/viewer/2022042119/5e988a74dcb92c6152504084/html5/thumbnails/21.jpg)
# Rodar o electron-builder$ npm run dist
BUILD E DEPLOY
![Page 22: ABSTRACT BUSINESS MEETING · Editor de código-fonte desenvolvido para Windows, macOS e Linux. Editor de texto de código aberto disponível para Linux, macOS e Windows. ELECTRON](https://reader034.vdocuments.mx/reader034/viewer/2022042119/5e988a74dcb92c6152504084/html5/thumbnails/22.jpg)
BUILD E DEPLOY