Nuestra primera ventana

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

Resumen

En esta parte del curso iniciamos con la creación de nuestra primera ventana en Electron, para esto es importante entender muy bien el uso del objeto App, es un objeto que nos permite controlar el ciclo de vida de la aplicación.

El objeto **BrowserWindow ** es el que nos permite cargar todo el contenido visual de la aplicación de escritorio.

La documentación oficial de Electron esta en: https://electron.atom.io/docs/

Iván Gabriel Guerra

student•

Me parece que el link a la documentacion oficial esta mal. La documentacion oficial de electron esta en: https://electron.atom.io/docs/

Diego Forero

Team Platzi•

Gracias por el reporte.

Isaac Morales Cedeño

student•

Igual ya esta la redicción de este sitio anterior al nuevo

Manuel Salv. Lemos Foncubierta

student•

El objecto app

Todo app de Electron es controlada por el objecto app, el cual permite controlar y responder a todos los eventos del ciclo de vida del app y acciones como las de cerrar, obtener foco, ocultar, entre otros.

GARCIA CAMARENA EZEQUIEL

student•

Este curso no tiene una pagina del curso escrito, como el curso profesional de JavaScript.

Roger Carlos Ariel Alba

student•

Hola,

¿Te refieres a repositorio o te refieres a la presentación del curso?

Diesan Romero

student•

Que buen profesor, lo sé porque usa el modo estricto de Javascript.

Emiliano Gramajo

student•

cuando ejecuto por primera vez el comando npm run dev en windows 7 me arroja el siguiente error:

0 info it worked if it ends with ok
1 verbose cli [ ‘C:\Program Files\nodejs\node.exe’,
1 verbose cli ‘C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js’,
1 verbose cli ‘run’,
1 verbose cli ‘dev’ ]
2 info using npm@5.6.0
3 info using node@v8.11.3
4 verbose run-script [ ‘predev’, ‘dev’, ‘postdev’ ]
5 info lifecycle PlatziElectronPractice@1.0.0predev: PlatziElectronPractice@1.0.0
6 info lifecycle PlatziElectronPractice@1.0.0dev: PlatziElectronPractice@1.0.0
7 verbose lifecycle PlatziElectronPractice@1.0.0dev: unsafe-perm in lifecycle true
8 verbose lifecycle PlatziElectronPractice@1.0.0dev: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\mbaldini\Desktop\PlatziElectronPractice\node_modules.bin;C:\Program Files\Common Files\Oracle\Java\javapath;C:\Users\mbaldini\Desktop\ProgramFiles\Python\Scripts;C:\Users\mbaldini\Desktop\ProgramFiles\Python;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;C:\Program Files\Git\cmd;C:\Users\mbaldini\Desktop\Automation\phantomjs - 2.1.1 - windows\phantomjs - 2.1.1 - windows\bin\phantomjs.exe;C:\Program Files\nodejs;C:\Users\mbaldini\AppData\Roaming\npm
9 verbose lifecycle PlatziElectronPractice@1.0.0dev: CWD: C:\Users\mbaldini\Desktop\PlatziElectronPractice
10 silly lifecycle PlatziElectronPractice@1.0.0dev: Args: [ ‘/d /s /c’, ‘electron index.js’ ]
11 silly lifecycle PlatziElectronPractice@1.0.0dev: Returned: code: 1 signal: null
12 info lifecycle PlatziElectronPractice@1.0.0dev: Failed to exec dev script
13 verbose stack Error: PlatziElectronPractice@1.0.0 dev: electron index.js
13 verbose stack Exit status 1
13 verbose stack at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:285:16)
13 verbose stack at emitTwo (events.js:126:13)
13 verbose stack at EventEmitter.emit (events.js:214:7)
13 verbose stack at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at emitTwo (events.js:126:13)
13 verbose stack at ChildProcess.emit (events.js:214:7)
13 verbose stack at maybeClose (internal/child_process.js:925:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
14 verbose pkgid PlatziElectronPractice@1.0.0
15 verbose cwd C:\Users\mbaldini\Desktop\PlatziElectronPractice\node_modules
16 verbose Windows_NT 6.1.7601
17 verbose argv “C:\Program Files\nodejs\node.exe” “C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js” “run” "dev"
18 verbose node v8.11.3
19 verbose npm v5.6.0
20 error code ELIFECYCLE
21 error errno 1
22 error PlatziElectronPractice@1.0.0 dev: electron index.js
22 error Exit status 1
23 error Failed at the PlatziElectronPractice@1.0.0 dev script.
23 error This is probably not a problem with npm. There is likely additional logging output above.

alguien sabe que puede ser’ probe instalando yarn, lo cual sugeria en la pagina de github per o no solucionó nada

Diego Forero

Team Platzi•

El stack trace del error solo menciona que el proceso falla al ejecutar el dev script pero no dice nada más, puedes compartir tu código en un repo en github para ayudarte a revisar, no creo que sea un error de sintaxis pero no veo la causa del error.

SAVNE SAS (NIT 901 130 426)

student•

Buenas. Tengo un pequeño problema y es que no me aparece en consola las propiedades del objeto app, me podrían ayudar con esto por favor?

Fernando Fajardo

student•

hay planes de una segunda version de este curso o un curso avanzado?!

Cesar Anibal Soto Castro

student•

hla estoy tomando el curso ahora no entiendo mucho...vengo de vb 6

la ventana se abre pero desaparece... que podrá ser? no se si alguien me podrá ayudar

Bruno Orozco Mejía

student•

Código para crear tu primera ventana:

'use strict'

// El objeto app permitirá controlar eventos
const { app, BrowserWindow } = require('electron')

//console.dir(app)
// Imprimirá en consola saliendo después de quitar
app.on('before-quit', () => {
    console.log("saliendo..");
})

// Construye nuestra primera ventana
app.on('ready', () => {
    let win = new BrowserWindow()

    win.on('closed', () => {
        win = null
        app.quit()
    })
})

//app.quit()

Brian Sánchez Izquierdo

student•

Hola, les dejo mi resumen el proceso global de Electron: Electron está basado cobre Chromium y Nodejs, por lo que hereda la particularidad multi-proceso (no multi-hilo) por lo que un solo proceso (NodeJs) controlo todos los demas procesos así como el ciclo de vida en general.

El proceso principal corre sobre nodeJs lo que permite hacer uso de sus características como require

BroserWindow

El proceso principal se encarga de hacer el render de una página web en una instancia de la Clase BrowserWindow, la cual es un EventListener por lo que expone eventos como minimizar o maximizar pantalla. Además se puede interactuar con el contenido de BrowserWindow (HTML elements?) a traves de su propiedad BrowserWindow.webContents

Application lifecycle El proceso principal interactúa con el ciclo de vida de la aplicacion a través del módulo app

Native APIs Para extender el propósito de Electron más allá de una envoltura para web apps, se exponen módulos que controlan funcionalidad nativa del computador.

Se puede acceder al tipo de plataforma mediante el global process con el key platform.

Jorge Martínez

student•

¿Que tipografia esta ocupando en sublimetext?, se me hace muy limpia y legible.

platzerito18092018 platzerito18092018

teacher•

Esta es la que uso:

Miguel Ruiz Moreno

student•

¿Por qué usar el modo estricto?

Jhon Esaa

student•

El modo estricto hace varios cambios en la semántica normal de JavaScript. Primero, elimina algunos errores silenciosos de JavaScript haciendo que lancen excepciones. Segundo, corrige errores que hacen que sea difícil para los motores de JavaScript realizar optimizaciones: a veces, el código escrito en modo estricto puede correr más rápido que el que no es estricto. Tercero, el modo estricto prohibe cierta sintaxis que es probable que sea definida en futuras versiones de ECMAScript.

El modo estricto cambia la sintaxis y el comportamiento en tiempo de ejecución. Los cambios generalmente caen dentro de estas categorías: cambios que convierten erratas en errores (como errores de sintaxis o en tiempo de ejecución), cambios que simplifican como una variable particular es calculada, cambios que simplifian el uso de eval y arguments, cambios que hacen más fácil escribir JavaScript “seguro”, y cambios que anticipan la evolución futura de EMACScript.

Fuente:

Yeison Daza

student•

El modo estricto evita cometer ciertos errores, en general es buena practica

Fernando Muñoz

student•

Tengo el mismo código, tal cual, hasta ahora no he tenido ningún error, pero al ejecutar el ultimo npm run dev la ventana se cierra instantaneamente y no la alcanzo a ver

Nico Quiroz

student•

hola Fernando, recién estoy iniciando con electron. Quizás te falto quitar el app.quit() de la linea 19 ?

Juan Carlos Correa Herrera

student•

Excelente profesor! parece que pinta bien el curso

Usuario anónimo

user•

genial :)

Camilo Bellon

student•

super. :) gracias!!

Darwin Felipe Uzcategui Gonzalez

student•

'use strict'

const { app, BrowserWindow } = require('electron')

//console.dir(app)

app.on('before-quit', ()=>{
	console.log('Saliendo...')
})

app.on('ready',() =>{

  let win=new BrowserWindow()

  win.on('closed', ()=>{
  	win = null
  	app.quit()

  })

})```

Darwin Felipe Uzcategui Gonzalez

student•

C:\platzipics>npm run dev

platzipics@1.0.0 dev C:\platzipics
electron index.js
Excelente ya me sale mi ventana nativa de windows

Nury Mirian Quispe Ccallo

student•

Marco Elizalde

student•

Objeto App API Electron

Enrique Benitez

student•

A quién más le aparece el siguiente error en la terminal al correr Electron? 🤔

/Library/Caches/com.apple.xbs/Sources/AppleGVA/AppleGVA-10.1.17/Sources/Slices/Driver/AVD_loader.cpp: failed to get a service for display 3

Sergio Correa Lopez

student•

Mi consulta apunta a que el console.log, no me arroja nada (y tampoco errores)

hay que tener alguna configuracion especial para utilizarlo en windows 10 y powershell

'use strict'

const {app, BrowserWindow} = require('electron')

console.dir(app)

app.on('before-quit', () => {
	console.log('Saliendo...')
})

app.quit()

Sergio Correa Lopez

student•

curiosamente lo probe con windows 10 y CMD y funciono sin problemas
funciona console.log

Saludos

Julio Burgos

student•

intenta con esto

event.preventDefault()

Nuestra primera ventana

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

El frontend y Electron

Configurando nuestro frontend

Herramientas de desarrollo para Electron

Algunos frameworks recomendados

Construyendo el layout

Completar elementos del Layout

Agregando interacción a nuestra aplicación

JavaScript en el frontend

Selecciona imágenes

Buscar imágenes

Añadir filtros a la imagen

Comunicación entre procesos

Accesando recursos de la máquina

Leer archivos de directorios

Generar listas de imagenes

Refactor del proyecto

Usando el diálogo de guardar

Guardar imágenes en disco

Usando cajas de mensajes

Detectando errores

Interactuando con el sistema operativo

Organizando el código del proceso principal

Múltiples ventanas y comunicación entre ellas

Creando assets para una nueva ventana

Consideraciones para múltiples plataformas

Manejo de preferencias

Usuario y contraseña

Creando un ícono en la bandeja del sistema

Imprimiendo

Subir una imagen

Portapapeles con texto o imágenes

Emitiendo notificaciones

Agregando un Menú

Atajos

Protocolos personalizados

Generando un ejecutable para nuestra aplicación

A tener en cuenta para generar ejecutables

Configurando el entorno para construcción

Configurando el entorno para construcción 2

Personalizando nuestro ejecutable

Creando paquetes para distribuir nuestro aplicativo

Considerando instaladores para múltiples plataformas

Firmas digitales con Code Signing

Cierre del curso

Bonus

Integración continua

Escribiendo tests con Ava y Spectron

Desafios

Crear un filtro personalizado

Leer las imágenes ubicaciones remotas (Cloudup)

Previsualización de filtros