Bases de datos con Electron, Angular 2 y NeDB
Bases de datos con Electron, Angular 2 y NeDB

En este tutorial vamos a ver cómo podemos combinar de forma sencilla Angular 2 y Electron, nosotros vamos a realizar la configuración utilizando webpack para generar todos los archivos que vamos a necesitar en nuestra aplicación.

Cómo ya sabemos, Electron nos permite desarrollar aplicaciones de escritorio multiplataforma utilizando únicamente javascript, html y css, si a eso le sumas que podemos desarrollar estas aplicaciones utilizando Angular 2 aún mejor.

Instalar dependencias de Angular 2 y Electron

Lo primero que debemos hacer es crear una estructura similar a la siguiente.

electron-angular2

Ahora abre el archivo package.json y añade el siguiente código.


Seguidamente ejecuta el siguiente comando para instalar todas las dependencias.


Ahora vamos a abrir el archivo tsconfig.json y añadimos el siguiente código.


Finalmente sólo nos queda configurar el archivo webpack.config.js, así que ábrelo y añade lo siguiente.


De forma abreviada lo que hará este archivo será generar todos los archivos que vamos a necesitar dentro del directorio build, el cual se generara automáticamente al ejecutar el comando npm run watch.

Desarrollando una aplicación con Angular 2 y Electron

Ahora abre el archivo angular2-app/package.json y añade el siguiente código, el cuál es necesario para que todo funcione.


Ya que le hemos dicho al anterior archivo que la entrada será main.js, vamos a abrirlo y añadir el siguiente código, que será el punto de entrada para Electron.


De la misma forma que antes, vamos a aplicar la lógica necesaria sobre el archivo angular2-app/index.html que es el que está utilizando electron con la siguiente línea.


Así que ábrelo y añade el siguiente código.


Aquí ya podemos ver cosas de Angular 2, y también cómo hacemos la carga de los archivos que hemos generado con webpack, sólo nos quedan por hacer dos cosas, crear un componente con Angular 2 y definir el bootstrap de la aplicación.

Abre el archivo app.ts y añade el siguiente código, el cuál será el componente de nuestra app.


Cómo puedes ver es un sencillo componente generado con Angular 2, ahora sólo nos queda abrir el archivo bootstrap.ts y añadir lo siguiente para finalizar la app.

Ejecutar Angular 2 y Electron

Para ejecutar la aplicación necesitarás dos terminales y ejecutar en cada una de ellas los siguientes comandos.


Si lo hemos hecho todo bien podremos ver en acción una nueva aplicación trabajando con Angular 2 y Electron.

Si te interesa aprender a trabajar con Angular 2 aquí tienes un curso completo y actualizado donde aprendemos a utilizar este framework desde 0 durante 73 videotutoriales.