Creando una calculadora – introducción a Electronjs

Ejemplo Calculadora con electron.js

El siguiente post es el inicio de un manual que nos llevará paso a paso por el desarrollo de una aplicación con electron.js, la intensión es llegar asta la producción, publicación y el sistema de actualizaciones:

 

Electronjs (intro y un poquito de historia):

El proyecto Electron.js inicialmente concebido como Atom-Shell ya que inicialmente fue la herramienta que permitía al equipo de github generar el binario de Atom el cual es un editor de código multiplataforma.

Comenta la historia que los miembros de github tenían problemas con integrar su desarrollo ya que tienen un gente muy eficiente en lenguajes de bajo nivel (p.e. Scott Chacon) y por otra parte tienen excelente elementos en el manejo del UX (p.e. Mark Otto).

Todo esto genero algo de conflicto ya que querían llevar todo el look and feel de la web en una aplicación de escritorio, fue entonces cuando a Cheng Zhao se le ocurrió la maravillosa de crear Atom-Shell partiendo de :

  • Realizar la  aplicación utilizando un  webView de código abierto (utilizaron Chromium).
  • Programar la lógica desde Javascript utilizando nodejs (con todos los módulos compatibles).

funcionamiento de electron.js

Instalando electronjs.

Una ves explicado que es electronjs y que hace uso de nodejs por lo tanto para empezar a construir aplicaciones con electron.js necesitamos:

Creando un programa electron.js

Electronjs define varios elementos de los cuales los elementos mas basicos son dos:

  • browserWindow: que es la ventana gráfica, de este objeto abra una instancia para cada ventana de la aplicación.
  • app: es la aplicación de electron.js de esta solo existe una instancia que contiene la aplicación(solo hay una única instancia).

La siguiente estructura de directorios es la que tendra inicialmente el proyecto:

|--package.json        <-- Def. del proyecto, p.e. la lista de dependencias
|--disparador.js       <-- Se encarga de arrancar electron
`--src/
   |-- estilo.css      <-- Contiene el diseño de la aplicación
   |-- icon.png        <-- El icono de la aplicación
   |-- index.html      <-- Contiene la interfaz de la aplicación
   `-- logica.js       <-- Administrar la lógica de la aplicación

El funcionamiento de la aplicación la trataré de describir con el siguiente diagrama:

Diagrama de flujo de la aplicación

En la siguiente imagen se muestra a grandes rasgos como esta construida la interfaz.

Elementos que componen el UI de la aplicacición

 

Me gustaría explicar como crear una aplicación básica en electrón pero creo que la documentación oficial es muy buena así que me delimitaré a dejar el enlace:

https://electronjs.org/docs/tutorial/first-app#installing-electron/

 

Por otra parte agregue el proyecto a un repositorio al cual le iré creando una etiqueta que apunte a cada uno de los siguientes posts, de momento esta la versión 0.1:

https://github.com/fitorec/calculadora-electron/tree/v0.1

 

¿Que sigue?

En el siguiente post vamos hablar sobre el uso de eventos en electron.js de tal forma que podamos cachar la acción de las teclas.

Por otra parte me gustaría que me dejarán en los comentarios que tema les gustaría que se tratara en las próximas sesiones.