Jorge Serrano
  • Home

Hello World con Electron

  • By jorge
  • Jun-13-2018
  • Electron, JavaScript, Node.js
  • 0 Comments.

En otra entrada en mi blog detallaba como llevar a cabo los primeros pasos con Electron, que no consistían en otra cosa que en definir cómo debíamos hacer para preparar la base de una aplicación basada en Electron.

En esta ocasión, voy a llevar a cabo el desarrollo de nuestra primera aplicación con Electron.
Algo muy básico, para entender bien algunos conceptos.
La típica aplicación «Hello World».

¡Vamos allá!.

Como herramientas iniciales, utilizaré la consola del sistema operativo, y Visual Studio Code como editor de código de nuestra aplicación.

Lo primero de todo es como decía antes, tener la base de nuestra aplicación Electron que habremos creado a través de la consola.
Sitúe la base de la aplicación Electron en una carpeta, la que quiera.

En mi caso y en el momento de hacer este ejemplo, estoy creando una aplicación con Electron v2.0.2.
Como base, estoy usando npm v6.1.0 y node v6.11.0.

Una vez hecho esto, abriremos la carpeta de nuestra aplicación Electron con Visual Studio Code.

Lo primero que haremos será crear la página index.html con el contenido que queramos y que se mostrará al ejecutar nuestra aplicación.
En concreto y en mi caso, crearé el contenido del «Hello World» y cuyo contenido será el siguiente:

index.html

<!DOCTYPE html>
<html lang=»en»>
<head>
<meta charset=»UTF-8″>
<title>Electron – Sample 01</title>
</head>
<body style=»background-color:#272822;»>
<h1><font color=»#F54B0F» face=»Verdana»>Hello</font>&nbsp;<font face=»Verdana» color=»#9AB323″>World</font>&nbsp;<font face=»Verdana» color=»#FFFFFF»>Electron</font></h1>
</body>
</html>

A continuación, crearemos un nuevo archivo de nombre main.js.
Este fichero de JavaScript será nuestro fichero principal de entrada y sobre el cual realizaremos las peticiones principales de Electron.

Dentro de este fichero iremos agregando diferentes líneas de código.

main.js

Lo primero que haremos será importar el paquete de Electron en nuestra aplicación para poder utilizarlo.
Esto lo realizaremos escribiendo la siguiente línea de código:

const electron = require(‘electron’)

A continuación cargaremos dinámicamente la constante electron sobre las variables app y BrowserWindow.
Para ello, escribiremos la siguiente línea de código:

const {app, BrowserWindow} = electron

En la variable app tendremos declarado el ciclo de vida de nuestra aplicación Electron.

Por otro lado, lo que vamos a hacer en nuestro ejemplo es mostrar la página Web index.html, por lo que Electron deberá acceder a dicha página para poder mostrarla.
Para ello, declararemos dos constantes que nos permita cargar carpetas, archivos y URLs dinámicamente.
Escribiremos las siguientes líneas de código:

const path = require(‘path’)
const url = require(‘url’)

Una vez declaradas las constantes que utilizaremos en nuestra primera aplicación Electron, vamos a declarar una variable global.
Para ello escribiremos la siguiente línea de código:

let win

En este punto, vamos a empezar a utilizar las variables declaradas anteriormente y escribir la base principal de funcionamiento de nuestra aplicación.

Dado que en app tenemos declarado el ciclo de vida de nuestra aplicación, vamos a gestionar el proceso cuando nuestra aplicación cargue.
Al cargar nuestra aplicación, vamos a redireccionar la ejecución de nuestra aplicación a una función.
Esa función creará en nuestro caso, una ventana en Chrome con un ancho y alto concreto que indicaremos también.

El código de la función quedará por su parte de la siguiente forma:

function createWindow(){
win = new BrowserWindow({width: 640, height: 480})
win.loadURL(url.format({
pathname: path.join(__dirname, ‘index.html’),
protocol: ‘file’,
slashes: true
}))
}

El código de app que ejecutará la función será el siguiente:

app.on(‘ready’, createWindow)

Ya tenemos la base principal de nuestra primera aplicación con Electron.

Ahora sólo nos queda hacer algunos pequeños ajustes que realizaremos sobre el fichero package.json.

package.json

En mi caso voy a abrir el fichero package.json dentro del cual modificaré el contenido de scripts para dejarlo de esta forma:

«scripts»: {
«start» : «electron main.js»
},

De esta forma, cargaremos el archivo main.js al ejecutar nuestra aplicación.

Para ello, simplemente tendremos que abrir la consola de trabajo situándonos dentro de la carpeta de nuestro proyecto, y ejecutar el comando:

npm start

Si por cualquier motivo no tenemos descargados los paquetes de Electron, recuerda que antes del comando start, deberías ejecutar el comando:

npm install restore

Después de unos segundos, nuestra aplicación debería lanzarse y abrirse una ventana mostrando la página index.html dentro de ella.

Podrás acceder al código fuente de este primer ejemplo en este enlace.

Happy Coding!

Comments

Deja un comentario Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

← Previous Post Next Post →

Jorge Serrano

MVP Reconnect


¡Subscríbete a mi canal!
YouTube

Donaciones
Donation

Entradas recientes

  • Go – Arrays
  • Go – Operators
  • Go – Constants
  • Go – Tipos de Datos
  • Go – Variables
  • Hello Go-rld!
  • Introducción a Go o Golang
  • JSON Patch en ASP.NET Core 5 Web API
  • Null Checking en C#
  • ¿Porqué mi página web por defecto de ASP.NET Core no se vé en mi Azure Web App y me da un 404?

Categorías

  • .NET 5
  • .NET Core
  • .NET Core 3.0
  • .NET Core 3.1
  • .NET Framework 2.0
  • .NET Framework 3.0
  • .NET Framework 3.5
  • .NET Framework 4.0
  • .NET Framework 4.5
  • .NET Framework 4.6
  • .NET Framework 4.7
  • .NET Framework 4.8
  • .NET Standard 2.0
  • .NET Standard 2.1
  • AMQP
  • Android
  • Angular
  • API REST
  • Apple
  • Apple iOS
  • Apple macOs
  • Arquitectura
  • ASP.NET
  • ASP.NET Core
  • ASP.NET Core 3
  • ASP.NET Core 5
  • AWS
  • Azure App Service
  • Azure Application Insights
  • Azure Cosmos DB
  • Azure Database Migration Service
  • Azure Databricks
  • Azure DevOps
  • Azure Event Grid
  • Azure Functions
  • Azure IoT
  • Azure Portal
  • Azure PowerShell
  • Azure Queue Storage
  • Azure SQL
  • Azure Storage
  • Azure Virtual Datacenter
  • Azure WebApps
  • Big Data
  • Bing
  • Blazor
  • Blog
  • Bots
  • C#
  • C# 7.0
  • C# 7.1
  • C# 7.2
  • C# 7.3
  • C# 8.0
  • C# 9.0
  • Channel 9
  • Codeplex
  • Codespaces
  • Containers
  • Debugging
  • DevOps
  • Docker
  • Electron
  • Entity Framework
  • Entity Framework Core
  • Entity Framework Core 3.0
  • Entity Framework Core 5
  • Eventos
  • F#
  • FaaS
  • FeatureFlags
  • FeatureToggles
  • Feeds
  • Fluent Assertions
  • General
  • GIMP
  • Git
  • GitHub
  • Go
  • Google
  • Google Analytics
  • Gradle
  • gRPC
  • GSA
  • Historia de la Informática
  • HoloLens
  • HtmlAgilityPack
  • IdentityServer4
  • Inkscape
  • Ionic
  • iOS
  • IoT
  • Java
  • JavaScript
  • JDBC
  • JSON
  • Kubernetes
  • Lenguajes de Programación
  • Libros y Cursos
  • LINQ
  • Linux
  • LiteDB
  • Machine Learning
  • macOS
  • Microservices
  • Microsoft
  • Microsoft .NET Framework 4.5
  • Microsoft 365
  • Microsoft Azure
  • Microsoft Build
  • Microsoft Ignite
  • Microsoft Learn
  • Microsoft Orleans
  • Microsoft Surface Go
  • Microsoft Teams
  • ML.NET
  • MQTT
  • MRO
  • MS-DOS
  • MsCoders Madrid
  • MVP
  • NancyFx
  • Node.js
  • NoSQL
  • NuGet
  • NUnit
  • OData
  • ODP.NET Core
  • Office 2007
  • Office 2010
  • Office 2013
  • Office 2016
  • Office 2019
  • Office 365
  • Open Source
  • Open XML SDK
  • Opinión
  • Orchard CMS
  • OT
  • PaaS
  • Patterns
  • PdfSharpCore
  • Performance
  • PHP
  • Postman
  • Power BI
  • PowerShell
  • PowerShell Core
  • Productividad
  • Project Server 2019
  • R
  • Rendimiento
  • Scala
  • Scraper
  • Security
  • Serverless
  • Service Fabric
  • SharePoint Server 2019
  • SignalR
  • Sin categoría
  • Sistemas Distribuidos
  • Skype
  • Skype for Business Server 2019
  • Small Basic Online
  • SQL Server 2005
  • SQL Server 2008
  • SQL Server 2012
  • SQL Server 2014
  • SQL Server 2016
  • SQL Server 2017
  • SQL Server 2019
  • STOMP
  • Swagger
  • Testing
  • TFS 2017
  • TFS 2018
  • Tools
  • TypeScript
  • Unity
  • UWP
  • UX
  • Visio
  • Visual Basic
  • Visual Studio 2010
  • Visual Studio 2012
  • Visual Studio 2013
  • Visual Studio 2015
  • Visual Studio 2017
  • Visual Studio 2017 for Mac
  • Visual Studio 2019
  • Visual Studio 2019 for Mac
  • Visual Studio App Center
  • Visual Studio Code
  • Visual Studio IntelliCode
  • Visual Studio Live Share
  • Visual Studio Live Share Audio
  • Visual Studio Online
  • VS Anywhere
  • Vue.js
  • Web API
  • WebAssembly
  • WinDbg
  • Windows
  • Windows 10
  • Windows Compatibility Pack
  • Windows Phone 10
  • Windows Phone 7
  • Windows Phone 8
  • Windows Server 2008
  • Windows Server 2012
  • Windows Server 2016
  • Windows Server 2019
  • Windows Service
  • WinForms
  • WinUI
  • WPF
  • Xamarin
  • Xbox
  • Xcode
  • Xiaomi Mi Band 2
  • xUnit
  • YAML

Archivos

  • enero 2021
  • diciembre 2020
  • noviembre 2020
  • octubre 2020
  • septiembre 2020
  • agosto 2020
  • julio 2020
  • junio 2020
  • mayo 2020
  • abril 2020
  • marzo 2020
  • febrero 2020
  • enero 2020
  • diciembre 2019
  • noviembre 2019
  • octubre 2019
  • septiembre 2019
  • agosto 2019
  • julio 2019
  • junio 2019
  • mayo 2019
  • abril 2019
  • marzo 2019
  • febrero 2019
  • enero 2019
  • diciembre 2018
  • noviembre 2018
  • octubre 2018
  • septiembre 2018
  • agosto 2018
  • julio 2018
  • junio 2018
  • mayo 2018
  • abril 2018
  • marzo 2018
  • febrero 2018
  • enero 2018
  • diciembre 2017
  • noviembre 2017
  • octubre 2017
  • septiembre 2017
  • agosto 2017
  • julio 2017
  • junio 2017
  • febrero 2015
  • octubre 2014
  • junio 2014
  • marzo 2014
  • febrero 2014
  • enero 2014
  • diciembre 2013
  • septiembre 2013
  • agosto 2013
  • julio 2013
  • junio 2013
  • abril 2013
  • febrero 2013
  • enero 2013
  • diciembre 2012
  • noviembre 2012
  • septiembre 2012
  • agosto 2012
  • junio 2012
  • mayo 2012
  • abril 2012
  • marzo 2012
  • febrero 2012
  • enero 2012
  • diciembre 2011
  • noviembre 2011
  • octubre 2011
  • septiembre 2011
  • agosto 2011
  • julio 2011
  • junio 2011
  • mayo 2011
  • abril 2011
  • marzo 2011
  • enero 2011
  • diciembre 2010
  • noviembre 2010
  • octubre 2010
  • septiembre 2010
  • agosto 2010
  • julio 2010
  • junio 2010
  • mayo 2010
  • abril 2010
  • marzo 2010
  • febrero 2010
  • enero 2010
  • diciembre 2009
  • noviembre 2009
  • octubre 2009
  • septiembre 2009
  • agosto 2009
  • julio 2009
  • junio 2009
  • mayo 2009
  • abril 2009
  • marzo 2009
  • febrero 2009
  • enero 2009
  • diciembre 2008
  • noviembre 2008
  • octubre 2008
  • septiembre 2008
  • agosto 2008
  • julio 2008
  • junio 2008
  • mayo 2008
  • abril 2008
  • marzo 2008
  • febrero 2008
  • enero 2008
  • diciembre 2007
  • noviembre 2007
  • octubre 2007
  • septiembre 2007
  • agosto 2007
  • julio 2007
  • junio 2007
  • mayo 2007
  • abril 2007
  • marzo 2007
  • febrero 2007
  • enero 2007
  • diciembre 2006
  • noviembre 2006
  • octubre 2006
  • septiembre 2006
  • agosto 2006
  • julio 2006
  • junio 2006
  • mayo 2006
About This Site

A cras tincidunt, ut tellus et. Gravida scel ipsum sed iaculis, nunc non nam. Placerat sed phase llus, purus purus elit.

Archives Widget
  • January 2010
  • December 2009
  • November 2009
  • October 2009
Categories
  • Entertainment
  • Technology
  • Sports & Recreation
  • Jobs & Lifestyle
Search
  • twitter

Powered by WordPress  |  Business Directory by InkThemes.

This site uses cookies: Find out more.