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 : 10H : 30M : 23S

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

Herramientas de desarrollo para Electron10/52

  1. Herramienta para verificaci贸n del estilo de c贸digo:

Standard https://www.npmjs.com/package/standard

  1. DevTools, nos muestra las opciones de desarrollo de la ventana
    que vamos a cargar. Electron-debug nos permite trabajar con opciones de
    desarrollo en el ambiente de desarollo.

npm i electron-debug -S

  1. Devtron son las herramientas oficiales de Electron para hacer debug.

npm install --save-dev devtron

Standard tambi茅n ofrece un comando para poder arreglar la mayor parte del c贸digo en cuesti贸n de espacios, identaci贸n, etc鈥 que lo pueden agregar al package.json como una instrucci贸n

Los conflictos de partes no definidas o no utilizadas por ejemplo solo las he podido hacer a mano

"lint": "standard",
"lint-fix": "standard --fix",```

En windows no se ejecutaba el script de lint debido a que no detectaba el ejecutable dentro de la variable de entorno PATH.

Lo solucion茅 instal谩ndolo igual como dependencia de desarrollo, pero ejecut谩ndolo con npx.

{
    "start": "set NODE_ENV=development&&electron ./src/main.js",
    "lint": "npx standard",
    "lint-fix": "npx standard --fix"
  }

De igual forma, algunos paquetes del v铆deo est谩n obsoletos. Por ello defino la variable NODE_ENV al iniciar mi aplicaci贸n, de esta forma puedo despu茅s iniciar las devTools 煤nicamente si me encuentro en desarrollo:

  if (process.env.NODE_ENV === 'development') {
    // Open the DevTools.
    mainWindow.webContents.openDevTools()
  }
npm install --save-dev prettier pretty-quick

para que puedas corregir tu code en estructura

Para abrir las devtools pueden utilizar los shortcuts:
-Mac: option + command + I
-Windows: Ctrl + Shift + I
-Linux: u know it better than me bro 馃馃徏鈥嶁檪锔

devtron

standard

electron-debug

03/02/21 a mi si me funciona el win.toggleDevTools() , pero no logro instalar el devtron. De hecho sigo teniendo problemas a la hora de usar import y const require al mismo tiempo.

Revise la documentaci贸n oficial de devtron, al final de la misma esta la instalaci贸n https://www.electronjs.org/devtron pero tampoco sirvi贸 para mi. Devtron se instala en node, pero no logro anexarlo al proyecto usando el require(鈥榙evtron鈥).install() en la consola como indica. Me dice que require no existe.

Entonces lo solucione agregando nodeIntegration: true al webPreferences: { } de nuestro new BrowserWindow. Pero luego surge que no se instala correctamente, entonces seteamos ah铆 mismo el enableRemoteModule: true y listo. Y reci茅n ahora aparece el error de que devtron esta algo obsoleto a pesar de que su web (https://www.electronjs.org/devtron) aparenta no estarlo:

(electron) 'BrowserWindow.getDevToolsExtensions' is deprecated and will be removed. Please use 'session.getAllExtensions' instead.
(electron) 'BrowserWindow.addDevToolsExtension' is deprecated and will be removed. Please use 'session.loadExtension' instead.

Investigue sobre esto y todos los resultados me hacen llegar al mismo lugar pr谩cticamente, el cual sinceramente no entend铆 como solucionarlo.

En fin, lo reemplace con https://github.com/MarshallOfSound/electron-devtools-installer
aunque posiblemente no me sirva (veremos como continua el curso) donde el desaf铆o m谩s que aprender es repararlo XD

A enero de 2021 no funciona win.toggleDevTools() del minuto 2:46.
Lo que tuve que hacer agregar :
webPreferences: {
devTools: true
}

al objeto BrowserWindow

luego activa devtools con

win.webContents.openDevTools()

algunos comandos usados en el video quiza no sean los correctos por que estan desactualizados鈥 en el link agregado en la descripcion del video esta la documentacion.
Les recomiendo leerla para saber especificamente como utilizarlo.

Hola, me aparece la herramienta de depuraci贸n pero no me aparece el men煤 devtron por que?

package.json

"devDependencies": {
    "devtron": "^1.4.0",
    "electron-prebuilt-compile": "^1.8.2-beta.3"
  }

no me funciona :V
toggleDevtools()

Existe un m贸dulo de npm que genere una estructura base de electr贸n y react?, algo similar como lo hace 鈥漜reate-app-react鈥 de Facebook.

Standard tambi茅n ofrece un comando para poder arreglar la mayor parte del c贸digo en cuesti贸n de espacios, identaci贸n, etc鈥 que lo pueden agregar al package.json como una instrucci贸n

Los conflictos de partes no definidas o no utilizadas por ejemplo solo las he podido hacer a mano

"lint": "standard",
"lint-fix": "standard --fix",```

En windows no se ejecutaba el script de lint debido a que no detectaba el ejecutable dentro de la variable de entorno PATH.

Lo solucion茅 instal谩ndolo igual como dependencia de desarrollo, pero ejecut谩ndolo con npx.

{
    "start": "set NODE_ENV=development&&electron ./src/main.js",
    "lint": "npx standard",
    "lint-fix": "npx standard --fix"
  }

De igual forma, algunos paquetes del v铆deo est谩n obsoletos. Por ello defino la variable NODE_ENV al iniciar mi aplicaci贸n, de esta forma puedo despu茅s iniciar las devTools 煤nicamente si me encuentro en desarrollo:

  if (process.env.NODE_ENV === 'development') {
    // Open the DevTools.
    mainWindow.webContents.openDevTools()
  }
npm install --save-dev prettier pretty-quick

para que puedas corregir tu code en estructura

Para abrir las devtools pueden utilizar los shortcuts:
-Mac: option + command + I
-Windows: Ctrl + Shift + I
-Linux: u know it better than me bro 馃馃徏鈥嶁檪锔

devtron

standard

electron-debug

03/02/21 a mi si me funciona el win.toggleDevTools() , pero no logro instalar el devtron. De hecho sigo teniendo problemas a la hora de usar import y const require al mismo tiempo.

Revise la documentaci贸n oficial de devtron, al final de la misma esta la instalaci贸n https://www.electronjs.org/devtron pero tampoco sirvi贸 para mi. Devtron se instala en node, pero no logro anexarlo al proyecto usando el require(鈥榙evtron鈥).install() en la consola como indica. Me dice que require no existe.

Entonces lo solucione agregando nodeIntegration: true al webPreferences: { } de nuestro new BrowserWindow. Pero luego surge que no se instala correctamente, entonces seteamos ah铆 mismo el enableRemoteModule: true y listo. Y reci茅n ahora aparece el error de que devtron esta algo obsoleto a pesar de que su web (https://www.electronjs.org/devtron) aparenta no estarlo:

(electron) 'BrowserWindow.getDevToolsExtensions' is deprecated and will be removed. Please use 'session.getAllExtensions' instead.
(electron) 'BrowserWindow.addDevToolsExtension' is deprecated and will be removed. Please use 'session.loadExtension' instead.

Investigue sobre esto y todos los resultados me hacen llegar al mismo lugar pr谩cticamente, el cual sinceramente no entend铆 como solucionarlo.

En fin, lo reemplace con https://github.com/MarshallOfSound/electron-devtools-installer
aunque posiblemente no me sirva (veremos como continua el curso) donde el desaf铆o m谩s que aprender es repararlo XD

A enero de 2021 no funciona win.toggleDevTools() del minuto 2:46.
Lo que tuve que hacer agregar :
webPreferences: {
devTools: true
}

al objeto BrowserWindow

luego activa devtools con

win.webContents.openDevTools()

algunos comandos usados en el video quiza no sean los correctos por que estan desactualizados鈥 en el link agregado en la descripcion del video esta la documentacion.
Les recomiendo leerla para saber especificamente como utilizarlo.

Hola, me aparece la herramienta de depuraci贸n pero no me aparece el men煤 devtron por que?

package.json

"devDependencies": {
    "devtron": "^1.4.0",
    "electron-prebuilt-compile": "^1.8.2-beta.3"
  }

no me funciona :V
toggleDevtools()

Existe un m贸dulo de npm que genere una estructura base de electr贸n y react?, algo similar como lo hace 鈥漜reate-app-react鈥 de Facebook.