El frontend y Electron

Clase 8 de 52 • Curso de Electron: Apps de escritorio en Windows y Mac

Contenido del curso

Introducción a Electron

Comenzando con Electron

Comenzando con nuestro aplicativo

Agregando interacción a nuestra aplicación

Interactuando con el sistema operativo

Generando un ejecutable para nuestra aplicación

Creando paquetes para distribuir nuestro aplicativo

Bonus

Desafios

Tomar examen

Resumen

Electron nos permite trabajar con tecnologías Web para crear aplicaciones de escritorio, Adrian nos muestra como crear una aplicación de prueba en la que usaremos HTML, CSS y JavaScript. Comenzamos con el desarrollo de Platzipics, veamos como crear una estructura de directorios en nuestro proyecto que nos va a ayudar a mantenerlo organizado.

Comentarios

CIRO VLADIMIR ARREOLA CAMACHO

student•

pues a mi me apareció el siguiente error:

Not allowed to load local resource:

al parecer ahora tienes que incluir el atributo nodeIntegration a la configuración de la ventana y utilizar el método loadFile en vez de loadURL.

let win = new BrowserWindow({
        show: false,
        webPreferences: {
            nodeIntegration: true
        }
    })

win.loadFile(`${__dirname}/index.html`)

además en el archivo package.json especificar el archivo de entrada de la app de electron y en el listado de scripts ya no especificar el archivo, sino el directorio.

{
  "name": "electron-platzi",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "dev": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "electron": "^4.1.3"
  }
}

fuentes: https://electronjs.org/docs/tutorial/first-app https://github.com/electron/electron-quick-start/blob/master/main.js

Juan Escobar

student•

intenta añadir "file://" en la parte en la que cargas el index

Brian Sánchez Izquierdo

student•

Intenta con la función loadFile

Aaron Felipe Isaacs

student•

¿Es posible y recomendable realizar aplicaciones con de escritorio con Electron Js y React?

Oscar Barajas Tavares

Team Platzi•

Sí, Slack es un ejemplo de este caso que mencionas.

Iulian Gafiu

student•

Buenas, estoy haciendo el curso pero veo que electron-compile está @deprecated y no sé por dónde seguir. ¿Alguien me puede echar una mano?

Efraín Gómez Tapia

student•

Tengo el mismo problema :/

Moises Samuel Urias Moreno

student•

En linux lo hice correr de la siguiente forma:

    win.loadFile(`${__dirname}/renderer/index.html`)

Laura Monserrat Romero Hernández

student•

No aparecía el texto mandado por la parte del frontend y lo solucione así Al parecer en mi caso causa problema que en la parte index se use doble comilla (" ")para escribir mensaje y en la parte de frontend se use comilla simple (' '), solamente use el mismo tipo de comilla en ambos En el minuto 3:42 index.html

<code>
<p id="mensaje"></p>

frontend.js

<code>

document.getElementById('mensaje').innerHTML = 'este es un mensaje instertado por JS'

claudio vargas alejos

student•

Si tengo una aplicación web desarrollada con JS , HTML y CSS debo reescribirla para funcione con Electron?

Hebert lughi villafuerte ccacala

student•

alguien me explica como hacer esta cosa ( ` ) xd en ubuntu

Hebert lughi villafuerte ccacala

student•

psdt:antes de preguntar ise todas las pruebas en mi teclado… y nada 😦 tmbn busque en internet … nohay rpta 😦

Diego Forero

Team Platzi•

Eso depende mucho de la configuración de teclado, en los teclados en ingles esta a la izquierda de la tecla número 1, en los teclados españoles esta a la derecha de la tecla P

Guillermo Quiñones Villarreal

student•

no me funciona la sintaxis ${} para concatenar strings, alguien me puede ayudar?

Diego Forero

Team Platzi•

Tienes que usar las backtics o comillas inversas

let saludo = "Hola";
`${saludo} mundo`;

Aaron Felipe Isaacs

student•

Compañero, le recomiendo buscar información sobre template literals, aquí la documentación de mozilla:

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/template_strings

Juan Escobar

student•

El console.log(' ') no me funciona en el frontend.js

{
  "name": "electron-platzi",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "dev": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "electron": "^4.1.3"
  }
}

El frontend y Electron

Introducción a Electron

Paso a paso para construi aplicaciones con Electron

¿Qué es Electron?

¿Cómo funciona Electron?

Herramientas necesarias

Comenzando con Electron

Creando nuestro proyecto

Nuestra primera ventana

Propiedades de una ventana de Electron

Comenzando con nuestro aplicativo