Breaking

Post Top Ad

Your Ad Spot

jueves, 30 de mayo de 2019

Construir una aplicación de escritorio con electrónica y angular

En este tutorial, construiremos una aplicación de escritorio multiplataforma con tecnologías electrónicas y web como TypeScript y Angular.
Electron.js es una plataforma popular para crear aplicaciones de escritorio multiplataforma para Windows, Linux y macOS con JavaScript, HTML y CSS. Fue creado y mantenido por GitHub y está disponible bajo la licencia permisiva MIT. Inicialmente fue creado para el editor Atom de GitHub , pero desde entonces ha sido utilizado para crear aplicaciones por compañías como Microsoft ( Visual Studio Code ), Facebook, Slack y Docker.
Electron hace uso de potentes plataformas como Google Chromium y Node.js, pero también proporciona su propio conjunto de API ricas para interactuar con el sistema operativo subyacente.
Electron proporciona un contenedor nativo que envuelve las aplicaciones web para que se vean y se sientan como aplicaciones de escritorio con acceso a las características del sistema operativo (similar a Cordova para aplicaciones móviles). Esto significa que podemos usar cualquier biblioteca o marco de JavaScript para construir nuestra aplicación. En este tutorial, usaremos Angular.

Prerrequisitos

Para este tutorial, deberá tener cubiertos estos prerrequisitos:
  • Familiaridad con TypeScript y Angular.
  • Node.js y npm instalados en su máquina de desarrollo.

Instalación de CLI angular

Comencemos instalando Angular CLI, que es la herramienta oficial para crear y trabajar con proyectos Angular. Abre un nuevo terminal y ejecuta el siguiente comando:
npm install -g @angular/cli
Instalaremos el CLI angular en todo el mundo en nuestro sistema. Si el comando falla con el error EACCESS , agregue sudo antes de su comando en Linux o macOS, o ejecute el símbolo del sistema como administrador en Windows.
Si la CLI se instaló correctamente, navegue a su directorio de trabajo y cree un nuevo proyecto Angular usando los siguientes comandos:
cd ~
ng new electron-angular-demo
Espere a que se generen los archivos de su proyecto y se instalen las dependencias desde npm. A continuación, navegue a la raíz de su proyecto y ejecute el siguiente comando para instalar la última versión de Electron desde npm como una dependencia de desarrollo:
npm install --save-dev electron@latest
A partir de este escrito, este comando instalará Electron v4.1.4 .
A continuación, crea un main.jsarchivo y agrega el siguiente código:
    const {app, BrowserWindow} = require('electron')
    const url = require("url");
    const path = require("path");

    let mainWindow

    function createWindow () {
      mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
          nodeIntegration: true
        }
      })

      mainWindow.loadURL(
        url.format({
          pathname: path.join(__dirname, `/dist/index.html`),
          protocol: "file:",
          slashes: true
        })
      );
      // Open the DevTools.
      mainWindow.webContents.openDevTools()

      mainWindow.on('closed', function () {
        mainWindow = null
      })
    }

    app.on('ready', createWindow)

    app.on('window-all-closed', function () {
      if (process.platform !== 'darwin') app.quit()
    })

    app.on('activate', function () {
      if (mainWindow === null) createWindow()
    })
Este código simplemente crea una ventana GUI y carga el index.htmlarchivo que debería estar disponible en la distcarpeta después de que construyamos nuestra aplicación Angular. Este código de ejemplo está adaptado del repositorio de inicio oficial .
A continuación, abra el package.jsonarchivo de su proyecto y agregue la mainclave para establecer el main.jsarchivo como el punto de entrada principal:
    {
      "name": "electron-angular-demo",
      "version": "0.0.0",
      "main": "main.js",
      // [...]
    }
A continuación, debemos agregar un script para iniciar fácilmente la aplicación Electron después de construir el proyecto Angular:

    {
      "name": "electron-angular-demo",
      "version": "0.0.0",
      "main": "main.js",
      "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e",
        "start:electron": "ng build --base-href ./ && electron ."
      }, 
      // [...]
    }
Añadimos el start:electronscript que ejecuta el ng build --base-href ./ && electron .comando:
  • La ng build --base-href ./parte del comando crea la aplicación Angular y establece la base href en ./.
  • La electron .parte del comando inicia nuestra aplicación Electron desde el directorio actual.
Ahora, en tu terminal, ejecuta el siguiente comando:
npm run start:electron
Se abrirá una ventana electrónica de GUI, pero estará en blanco. En la consola, verá el No permitido cargar el recurso local: /electron-angular-demo/dist/index.html error.
Electron no puede cargar el archivo desde la distcarpeta porque simplemente no existe. Si busca en la carpeta de su proyecto, verá que Angular CLI crea su aplicación en la dist/electron-angular-democarpeta en lugar de solo en la distcarpeta.
En nuestro main.jsarchivo, le estamos diciendo a Electron que busque el index.htmlarchivo en la distcarpeta sin una subcarpeta:
       mainWindow.loadURL(
        url.format({
          pathname: path.join(__dirname, `/dist/index.html`),
          protocol: "file:",
          slashes: true
        })
      );
__dirname se refiere a la carpeta actual desde la que estamos ejecutando Electron.
Usamos el path.join()método para unir la ruta de la carpeta actual con la /dist/index.htmlruta.
Puede cambiar la segunda parte de la ruta /dist/electron-angular-demo/index.htmlo, mejor aún, cambiar la configuración Angular para generar los archivos en la distcarpeta sin usar una subcarpeta.
Abra el angular.jsonarchivo, ubique la projects → architect → build → options → outputPathclave y cambie su valor de dist/electron-angular-demoa solo dist:
      "projects": {
        "electron-angular-demo": {
          "root": "",
          "sourceRoot": "src",
          "projectType": "application",
          "prefix": "app",
          "schematics": {},
          "architect": {
            "build": {
              "builder": "@angular-devkit/build-angular:browser",
              "options": {
                "outputPath": "dist", 
Vuelve a tu terminal y ejecuta de nuevo el siguiente comando:
npm run start:electron
El script llamará al ng buildcomando para construir la aplicación Angular en la distcarpeta, y llamará electrondesde la carpeta actual para iniciar la ventana de Electron con la aplicación Angular cargada.
Esta es una captura de pantalla de nuestra aplicación de escritorio que ejecuta Angular:

Llamando APIs de Electron desde Angular

Veamos ahora cómo podemos llamar API de Electron desde Angular.
Las aplicaciones electrónicas utilizan un proceso principal que ejecuta Node.js y un proceso de representación que ejecuta el navegador Chromium. No podemos acceder directamente a todas las API de Electron desde la aplicación Angular.
Debemos hacer uso de IPC o comunicación entre procesos , que es un mecanismo proporcionado por los sistemas operativos para permitir la comunicación entre los diferentes procesos.
No es necesario acceder a todas las API de Electron desde el proceso principal. Se puede acceder a algunas API desde el proceso del renderizador, y se puede acceder a algunas API desde el proceso principal y el renderer.
BrowserWindow , que se utiliza para crear y controlar las ventanas del navegador, solo está disponible en el proceso principal. La API de desktopCapturer (utilizada para capturar audio y video desde el escritorio usando la navigator.mediaDevices.getUserMediaAPI) solo está disponible en el proceso del renderizador. Mientras tanto, la API del portapapeles (para realizar operaciones de copiar y pegar en el portapapeles del sistema) está disponible tanto en el proceso principal como en el de render.
Puede ver la lista completa de API de los documentos oficiales .
Veamos un ejemplo de cómo llamar a la BrowserWindowAPI, disponible solo en el proceso principal, desde la aplicación Angular.
Abra el main.jsarchivo e importe ipcMain:
    const {app, BrowserWindow, ipcMain} = require('electron')
A continuación, define la openModal()función:
    function openModal(){
      const { BrowserWindow } = require('electron');
      let modal = new BrowserWindow({ parent: mainWindow, modal: true, show: false })
      modal.loadURL('https://www.sitepoint.com')
      modal.once('ready-to-show', () => {
        modal.show()
      })
    }
Este método creará una ventana modal secundaria, cargará la https://www.sitepoint.comURL en su interior y la mostrará cuando esté lista.
A continuación, escuche un openModalmensaje que se enviará desde el proceso del renderizador y llame a la openModal()función cuando se reciba el mensaje:
    ipcMain.on('openModal', (event, arg) => {
      openModal()
    })
Ahora, abra el src/app/app.component.tsarchivo y agregue la siguiente importación:
import { IpcRenderer } from 'electron';
A continuación, defina una ipcvariable y llamerequire('electron').ipcRendererpara importar ipcRendereren su componente angular:
      private ipc: IpcRenderer
      constructor(){
        if ((<any>window).require) {
          try {
            this.ipc = (<any>window).require('electron').ipcRenderer;
          } catch (e) {
            throw e;
          }
        } else {
          console.warn('App not running inside Electron!');
        }
      }
El require()método se inyecta en tiempo de ejecución en el proceso de renderizado por parte de Electron y, como tal, solo estará disponible cuando se ejecute su aplicación web en Electron.
Finalmente, agregue el siguiente openModal()método:
      openModal(){
        console.log("Open a modal");
        this.ipc.send("openModal");
      }
Usamos el send()método de ipcRendererenviar un openModalmensaje al proceso principal.
Abra el src/app/app.component.htmlarchivo y agregue un botón, luego conéctelo al openModal()método:
    <button (click)="openModal()">
      Open Modal
    </button>
Ahora, ejecute su aplicación de escritorio con el siguiente comando:
npm run start:electron
Esta es una captura de pantalla de la ventana principal con un botón:
Si hace clic en el botón Abrir modal , se abrirá una ventana modal con el sitio web de SitePoint:
Puede encontrar el código fuente de esta demostración en este repositorio de GitHub .

Conclusión

En este tutorial, hemos analizado cómo ejecutar una aplicación web creada con Angular como una aplicación de escritorio con Electron. ¡Esperamos que haya aprendido lo fácil que puede ser comenzar a crear aplicaciones de escritorio con su kit de herramientas de desarrollo web!

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas