Remember to maintain security and privacy. Do not share sensitive information. Procedimento.com.br may make mistakes. Verify important information. Termo de Responsabilidade

Como criar aplicações multiplataforma com Electron no macOS

Electron é uma estrutura popular para o desenvolvimento de aplicativos de desktop multiplataforma usando tecnologias da web, como HTML, CSS e JavaScript. Ele permite que os desenvolvedores criem aplicativos que funcionam em Windows, macOS e Linux a partir de uma única base de código. No ambiente Apple, o Electron é especialmente relevante para desenvolvedores que desejam alavancar suas habilidades em desenvolvimento web para criar aplicativos nativos para macOS sem precisar aprender linguagens específicas de desenvolvimento de desktop, como Swift ou Objective-C.


Exemplos:


1. Instalação do Node.js e npm:
Para começar a desenvolver com Electron, você precisará do Node.js e npm (Node Package Manager). Eles podem ser instalados facilmente via Homebrew, um popular gerenciador de pacotes para macOS.


   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

   brew install node

2. Criação de um novo projeto Electron:
Primeiro, crie uma nova pasta para o seu projeto e navegue até ela no terminal.


   mkdir meu-app-electron

   cd meu-app-electron

Em seguida, inicialize um novo projeto Node.js.


   npm init -y

Instale o Electron como uma dependência de desenvolvimento.


   npm install electron --save-dev

3. Configuração do projeto:
Crie um arquivo main.js na raiz do seu projeto. Este arquivo será o ponto de entrada do seu aplicativo Electron.


   const { app, BrowserWindow } = require('electron')



   function createWindow () {

     const win = new BrowserWindow({

       width: 800,

       height: 600,

       webPreferences: {

         nodeIntegration: true

       }

     })



     win.loadFile('index.html')

   }



   app.whenReady().then(createWindow)



   app.on('window-all-closed', () => {

     if (process.platform !== 'darwin') {

       app.quit()

     }

   })



   app.on('activate', () => {

     if (BrowserWindow.getAllWindows().length === 0) {

       createWindow()

     }

   })

Crie um arquivo index.html na raiz do seu projeto.


   <!DOCTYPE html>

   <html>

   <head>

       <title>Meu App Electron</title>

   </head>

   <body>

       <h1>Olá, Electron!</h1>

   </body>

   </html>

4. Adicionar script de inicialização no package.json:
Modifique o arquivo package.json para adicionar um script de inicialização para o Electron.


   {

     "name": "meu-app-electron",

     "version": "1.0.0",

     "main": "main.js",

     "scripts": {

       "start": "electron ."

     },

     "devDependencies": {

       "electron": "^13.1.7"

     }

   }

5. Executar o aplicativo Electron:
Agora, você pode iniciar o seu aplicativo Electron com o seguinte comando:


   npm start

Isso abrirá uma janela do Electron exibindo o conteúdo do seu arquivo index.html.


To share Download PDF

macOS Terminal Node.js npm Electron Homebrew JavaScript HTML CSS