Menu

ELECTRON: DESARROLLO DE APLICACIONES DE ESCRITORIO

ELECTRON: DESARROLLO DE APLICACIONES DE ESCRITORIO

En Alastresenpunto siempre estamos a la última en lo que se refiere a tendencias de tecnología, desarrollo de aplicaciones web o de escritorio. Somos expertos en la materia de programación. Nuestro equipo profesional te ofrece soluciones a medida en base a los objetivos de tu empresa.

En esta entrada vamos a hablar sobre Electron, un framework open source respaldado por Github y su comunidad  (lo que ofrece una cierta garantía) para el desarrollo de aplicaciones de escritorio multiplataforma.

Anteriormente conocido como Atom Shell, Electron permite la creación de estas aplicaciones mediante el uso de HTML, CSS y Javascript con Chromium y Node.js. Podríamos considerarlo como una variante IO.js pero centrándose en aplicaciones de escritorio en lugar de servidores web.

Electron utiliza páginas web como interfaz gráfica de usuario por lo que, salvando las distancias, se podría ver como un navegador Chromium controlado por javascript. Electron utiliza la arquitectura multi-proceso de Chrome, es decir, cada página en Electron se ejecuta en su propio proceso, lo que se conoce como proceso de render.

¡OJO!, Electron no emplea librerías gráficas del sistema operativo, ya que su GUI (interfaz gráfica de usuario) se maqueta mediante HTML, pero podemos aprovechar ciertas características de las librerías nativas mediante Chromium. Compañías como Microsoft, Facebook y Docker utilizan esta plataforma. Además ofrece a los desarrolladores una serie de facilidades, tales como: reporte de fallos, actualizaciones automáticas, depuración y análisis sistemático del contenido de la fuente de datos, menús y notificaciones nativas…etc.

¿CÓMO EMPEZAR A TRABAJAR CON ELECTRON?

A continuación vamos realizar el típico Hola Mundo con Electron;
Primero debemos instalar Io.js y Node.js, una vez instalados instalamos electron y nos creamos la carpeta que contendrá nuestro proyecto que en mi caso se va a llamar electron-hola-mundo.
Para instalar el comando electron globalmente:

Para instalar como dependencia de desarrollo:

Una vez creada la carpeta del proyecto accedemos a nuestra carpeta a través del terminal y una vez en la raíz ejecutamos:

Y procederemos a rellenar las distintas opciones de nuestro package.json.

Una vez inicializado nuestro package.json abrimos el editor y hacemos algunas modificaciones:

Ahora creamos nuestro “main” que se llamará index.js que quedará de la siguiente manera:

Este sería el código básico que necesitaríamos para crear nuestro “Hola Mundo”, podríamos haber incluido reporte de errores, habilitar las opciones de desarrollador…etc.
Sólo nos faltaría crear la vista:

y ejecutamos el siguiente comando para ejecutarla

Y este sería el resultado de nuestro HOLA MUNDO

Por lo que para terminar y a modo de resumen tenemos que:

  • Instalamos requisitos previos necesarios.
  • Creamos carpeta de proyecto
  • Inicializamos nuestro package.json
  • Creamos el index.js
  • Creamos la vista (index.html)
  • “npm start” para ver el resultado.

 

Fuentes: http://blog.atom.io/    http://electron.atom.io/

0 Comentarios Responder

    Deja un comentario

    Su comentario(click en el botón para enviar)

    4 × dos =

    Compartir

    This is a unique website which will require a more modern browser to work!

    Please upgrade today!