Platzi
Platzi

隆Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes: $349
$259
Currency
Antes: $349
Ahorras: $90
COMIENZA AHORA
Termina en: 17D : 11H : 19M : 43S

Debes tener cuenta en Platzi

Para ver esta clase abierta debes iniciar sesi贸n

Curso de Electron: Apps de escritorio en Windows y Mac

Curso de Electron: Apps de escritorio en Windows y Mac

platzerito18092018 platzerito18092018

platzerito18092018 platzerito18092018

Nuestra primera ventana6/52

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/

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

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.

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 [ 鈥楥:\Program Files\nodejs\node.exe鈥,
1 verbose cli 鈥楥:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js鈥,
1 verbose cli 鈥榬un鈥,
1 verbose cli 鈥榙ev鈥 ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 鈥榩redev鈥, 鈥榙ev鈥, 鈥榩ostdev鈥 ]
5 info lifecycle [email protected]~predev: [email protected]
6 info lifecycle [email protected]~dev: [email protected]
7 verbose lifecycle [email protected]~dev: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~dev: 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 [email protected]~dev: CWD: C:\Users\mbaldini\Desktop\PlatziElectronPractice
10 silly lifecycle [email protected]~dev: Args: [ 鈥/d /s /c鈥, 鈥榚lectron index.js鈥 ]
11 silly lifecycle [email protected]~dev: Returned: code: 1 signal: null
12 info lifecycle [email protected]~dev: Failed to exec dev script
13 verbose stack Error: [email protected] 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 [email protected]
15 verbose cwd C:\Users\mbaldini\Desktop\PlatziElectronPractice\node_modules
16 verbose Windows_NT 6.1.7601
17 verbose argv 鈥淐:\Program Files\nodejs\node.exe鈥 鈥淐:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js鈥 鈥渞un鈥 "dev"
18 verbose node v8.11.3
19 verbose npm v5.6.0
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] dev: electron index.js
22 error Exit status 1
23 error Failed at the [email protected] 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

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

驴Por qu茅 usar el modo estricto?

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

Excelente profesor! parece que pinta bien el curso

genial 馃槂

super. 馃槂 gracias!!

Objeto App API Electron

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 

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()

Puedo cargar 2 ventanas(BrowserWidget) en la misma ventana?
Lo que pretendo hacer es :Cargar una primera p谩gina , por debajo de esta cargar la segunda p谩gina, luego eliminar la primera p谩gina cuando el contenido de la segunda est茅 lista

hola a todos quer铆a saber que como solucionar el siguiente error

App threw an error during load
ReferenceError: win is not defined
at Object.<anonymous> (C:\sities\platzipics\index.js:13:1)
at Object.<anonymous> (C:\sities\platzipics\index.js:18:3)
at Module._compile (module.js:569:30)
at Object.Module._extensions鈥s (module.js:580:10)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)
at loadApplicationPackage (C:\sities\platzipics\node_modules\electron\dist\resources\default_app.asar\main.js:287:12)
at Object.<anonymous> (C:\sities\platzipics\node_modules\electron\dist\resources\default_app.asar\main.js:329:5)
at Object.<anonymous> (C:\sities\platzipics\node_modules\electron\dist\resources\default_app.asar\main.js:366:3)

Que maravilla, de verdad.

Hola, no conozco la sintaxis cuando declara la constante app, en que curso puedo ver a detalle esto?

Gracias

'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()

  })

})```

Yo suelo subir casi todo lo que hago a GitHub, aqu铆 les comparto el repositorio con lo que se va realizando en el curso, adem谩s voy documentando el c贸digo y las cosas que me parecen relevantes las voy colocando en el README.md.

Repositorio del curso - Platzi Pics

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

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.

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 [ 鈥楥:\Program Files\nodejs\node.exe鈥,
1 verbose cli 鈥楥:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js鈥,
1 verbose cli 鈥榬un鈥,
1 verbose cli 鈥榙ev鈥 ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 鈥榩redev鈥, 鈥榙ev鈥, 鈥榩ostdev鈥 ]
5 info lifecycle [email protected]~predev: [email protected]
6 info lifecycle [email protected]~dev: [email protected]
7 verbose lifecycle [email protected]~dev: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~dev: 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 [email protected]~dev: CWD: C:\Users\mbaldini\Desktop\PlatziElectronPractice
10 silly lifecycle [email protected]~dev: Args: [ 鈥/d /s /c鈥, 鈥榚lectron index.js鈥 ]
11 silly lifecycle [email protected]~dev: Returned: code: 1 signal: null
12 info lifecycle [email protected]~dev: Failed to exec dev script
13 verbose stack Error: [email protected] 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 [email protected]
15 verbose cwd C:\Users\mbaldini\Desktop\PlatziElectronPractice\node_modules
16 verbose Windows_NT 6.1.7601
17 verbose argv 鈥淐:\Program Files\nodejs\node.exe鈥 鈥淐:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js鈥 鈥渞un鈥 "dev"
18 verbose node v8.11.3
19 verbose npm v5.6.0
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] dev: electron index.js
22 error Exit status 1
23 error Failed at the [email protected] 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

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

驴Por qu茅 usar el modo estricto?

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

Excelente profesor! parece que pinta bien el curso

genial 馃槂

super. 馃槂 gracias!!

Objeto App API Electron

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 

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()

Puedo cargar 2 ventanas(BrowserWidget) en la misma ventana?
Lo que pretendo hacer es :Cargar una primera p谩gina , por debajo de esta cargar la segunda p谩gina, luego eliminar la primera p谩gina cuando el contenido de la segunda est茅 lista

hola a todos quer铆a saber que como solucionar el siguiente error

App threw an error during load
ReferenceError: win is not defined
at Object.<anonymous> (C:\sities\platzipics\index.js:13:1)
at Object.<anonymous> (C:\sities\platzipics\index.js:18:3)
at Module._compile (module.js:569:30)
at Object.Module._extensions鈥s (module.js:580:10)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)
at loadApplicationPackage (C:\sities\platzipics\node_modules\electron\dist\resources\default_app.asar\main.js:287:12)
at Object.<anonymous> (C:\sities\platzipics\node_modules\electron\dist\resources\default_app.asar\main.js:329:5)
at Object.<anonymous> (C:\sities\platzipics\node_modules\electron\dist\resources\default_app.asar\main.js:366:3)

Que maravilla, de verdad.

Hola, no conozco la sintaxis cuando declara la constante app, en que curso puedo ver a detalle esto?

Gracias

'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()

  })

})```

Yo suelo subir casi todo lo que hago a GitHub, aqu铆 les comparto el repositorio con lo que se va realizando en el curso, adem谩s voy documentando el c贸digo y las cosas que me parecen relevantes las voy colocando en el README.md.

Repositorio del curso - Platzi Pics