O documento apresenta o framework Electron, que permite a criação de aplicações desktop utilizando tecnologias web como JavaScript, HTML e CSS. Ele é multiplataforma e não requer experiência em desenvolvimento nativo, facilitando o processo para desenvolvedores. Através de exemplos práticos, o documento orienta sobre a instalação e organização inicial de um projeto utilizando Electron.

1. Electron JavaScript
Disciplina: Desenvolvimento Desktop
Prof. José Anderson Rodrigues de Souza

2. Definição
Electron é um framework que te permite criar aplicações
desktop com JavaScript, HTML e CSS.
Permite que você mantenha uma base de código para
JavaScript e crie aplicações multiplataforma que funcionam
no Windows, macOS e Linux — sem a necessidade de ter
experiência em desenvolvimento nativo.

3. Aplicativos desenvolvidos com Electron
https://www.electronjs.org/pt/

4. Exemplo

5. Pré-requisitos
❖ HTML5 e CSS3
❖ JavaScript Moderno (Arrow functions,
Classes, Promises etc.)
❖ Node.js com npm

6. Electron
● Open-source
● Multiplataforma
● Tecnologias WEB
● Chromium + Node.js
○ Chromium: Construção das janelas
○ Node.js: Tempo de execução e interação com o
sistema operacional

7. Funcionamento do Electron

8. Documentação Electron
https://www.electronjs.org/

9. Primeira Prática - Electron
● Abrir o VSCode
● Criar uma pasta chamada Aula01
● Criar o gerenciador de tarefas: npm init –y
● Instalar o electron no projeto: npm install electron --save-dev

10. Prática
● Confirmar se o pacote foi instalado:

11. Prática
● É necessário criar um script dentro do package.json para iniciar
a aplicação.

12. Prática
● Criar um arquivo main.js para executar o script inicial do
projeto.

13. Prática
● No package.json modificar o “main”: “index.js” por:

14. Prática
● Inicializar e testar o projeto: npm start

15. Prática
● Organização do projeto em diretórios:
public: elementos estáticos
views: elementos que envolve a interface

16. Prática
● Abrir o index.html e incluir as seguintes modificações:

17. Prática
● Retornar ao arquivo main.js e incluir os parâmetros iniciais da app
desktop padrão da documentação:
https://www.electronjs.org/pt/docs/latest/tutorial/tutorial-first-app

18. Prática
● Retornar ao arquivo main.js

19. Prática
● Incluir o caminho correto do index.html

20. Prática
● Testar a aplicação desktop:

21. OBRIGADO!
José Anderson Rodrigues de Souza
e-mail: ______@ifgoiano.edu.br