Introducci贸n a Electron

1

Paso a paso para construi aplicaciones con Electron

2

驴Qu茅 es Electron?

3

驴C贸mo funciona Electron?

4

Herramientas necesarias

Comenzando con Electron

5

Creando nuestro proyecto

6

Nuestra primera ventana

7

Propiedades de una ventana de Electron

Comenzando con nuestro aplicativo

8

El frontend y Electron

9

Configurando nuestro frontend

10

Herramientas de desarrollo para Electron

11

Algunos frameworks recomendados

12

Construyendo el layout

13

Completar elementos del Layout

Agregando interacci贸n a nuestra aplicaci贸n

14

JavaScript en el frontend

15

Selecciona im谩genes

16

Buscar im谩genes

17

A帽adir filtros a la imagen

18

Comunicaci贸n entre procesos

19

Accesando recursos de la m谩quina

20

Leer archivos de directorios

21

Generar listas de imagenes

22

Refactor del proyecto

23

Usando el di谩logo de guardar

24

Guardar im谩genes en disco

25

Usando cajas de mensajes

26

Detectando errores

Interactuando con el sistema operativo

27

Organizando el c贸digo del proceso principal

28

M煤ltiples ventanas y comunicaci贸n entre ellas

29

Creando assets para una nueva ventana

30

Consideraciones para m煤ltiples plataformas

31

Manejo de preferencias

32

Usuario y contrase帽a

33

Creando un 铆cono en la bandeja del sistema

34

Imprimiendo

35

Subir una imagen

36

Portapapeles con texto o im谩genes

37

Emitiendo notificaciones

38

Agregando un Men煤

39

Atajos

40

Protocolos personalizados

Generando un ejecutable para nuestra aplicaci贸n

41

A tener en cuenta para generar ejecutables

42

Configurando el entorno para construcci贸n

43

Configurando el entorno para construcci贸n 2

44

Personalizando nuestro ejecutable

Creando paquetes para distribuir nuestro aplicativo

45

Considerando instaladores para m煤ltiples plataformas

46

Firmas digitales con Code Signing

47

Cierre del curso

Bonus

48

Integraci贸n continua

49

Escribiendo tests con Ava y Spectron

Desafios

50

Crear un filtro personalizado

51

Leer las im谩genes ubicaciones remotas (Cloudup)

52

Previsualizaci贸n de filtros

Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Curso de Electron: Apps de escritorio en Windows y Mac

Curso de Electron: Apps de escritorio en Windows y Mac

platzerito18092018 platzerito18092018

platzerito18092018 platzerito18092018

Configurando nuestro frontend

9/52
Recursos

El proyecto electron-compile, nos permite escribir en diferentes tecnolog铆as que no est谩n soportadas nativamente en HTML y compila el c贸digo
en tiempo de ejecuci贸n.
En Windows instalemos la herramienta cross-env que nos permite que las variables de entorno que configuremos en package.json sean iguales para Windows, Linux y Mac.

npm install cross-env --save

Aportes 31

Preguntas 7

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Valdr铆a la pena revisar el curso y actualizarlo donde haga falta. Hasta ahora est谩 muy bien explicado y lo entiendo a la perfecci贸n. Muy buen instructor. Sin embargo, debido a la naturaleza del software y los cambios tan r谩pidos algunos m贸dulos ya no son compatibles y otros simplemente est谩n desatendidos. Afortunadamente me gusta aprender y busco la forma de sobrepasar estos obst谩culos por mi cuenta, pero para ser un curso por el que estamos pagando creo que deber铆a contar con una revisi贸n peri贸dica.

Por lo que v铆 en los videos posteriores todos dejaron por la paz el curso aqu铆.

  1. Es verdad que con electron-compile obsoleto una gran parte del curso muere, sin embargo por diversi贸n, viendo alternativas, les dejo esto:
    webpack-electron-example
    En donde hago un peque帽o ejemplo de como usar webpack para reemplazar por decir de alguna forma, a electron-compile.
    Con eso podr铆an continuar el curso, s贸lo deben ir comparando que este curso es de hace dos a帽os, versus los cambios que han habido.

  2. Pueden sacarle el m谩ximo a este curso qued谩ndose y repasando las secciones:
    Interactuando con el sistema operativo
    Generando un ejecutable para nuestra aplicaci贸n

  3. En este curso se utiliza html,css y js desde cero para que la curva de aprendizaje no sea tan salvaje. Sin embargo en 鈥渓a vida real鈥 absolutamente todos los proyectos se hacen con Angular, React o Vue, as铆 que los invito enteramente a que se echen un chapuzon con un 鈥渉ow to build a electron vue app鈥 o similar.

  4. Carreras de Platzi que har谩 que puedan con pura documentaci贸n armarse su app de Electron:
    Arquitectura Frontend
    Javascript
    Desarrollo con Angular | Frontend con React | VueJs
    Listo y no se desanimen 馃槂

Ten茅is que actualizar, este curso es casi inservible para la mayor铆a.

Ya no s茅 si seguir el curso o me voy a YouTube a buscar algo m谩s actualizado.

Les dejo este enlace para los que quieren aprender c贸mo integrar Electron con React. https://www.freecodecamp.org/news/building-an-electron-application-with-create-react-app-97945861647c/

  1. Electron-compile est谩 depreciado, pero no es necesario usarlo.

  2. En windows

consola >> set NODE_ENV=development

devtools.js

const reload = require('electron-reload')

function run_dev_tools() {
    reload(__dirname)
}

exports.run_dev_tools = run_dev_tools

main.js

const devtools = require('./devtools')

if (process.env.NODE_ENV === 'development') {
    devtools.run_dev_tools()
}

Lastima que el proyecto queda deprecado por el uso de las dependencias de este video. Por favor Platzi actualicen este curso.

No se puede avanzar de esta clase en windows, ya lo instale todo lei los manuales, y no deja importar como se muestra el video, deben de actualizarlo o ver una manera para que sirva para todos

rayos no se si seguir o dejarlo aqui :0
pero quiero aprender

platzi no podemos avanzar por el contenido de esta clase. actualizen por favor! estamos pagando por este contenido!

27/Sep/2022
electron-compile esta deprecado, encontre una solucion para seguir con el curso.

  1. ejecutar 鈥渘pm install electron-reload鈥

  2. En el archivo devtools.js realizar el siguente codigo

const path = require('path')

function devtools(){
    require('electron-reload')(__dirname, {
        electron: path.join(__dirname, 'node_modules', '.bin', 'electron'),
        hardResetMethod: 'exit'
    })
}

module.exports = {
    devtools
}
  1. En el archivo principal index.js realizar lo siguiente
const { devtools } = require('./devtools')

if(process.env.NODE_ENV === 'development'){
    devtools
}

Todo lo dem谩s funciona al d铆a de hoy

deprecated :c

instal茅 el cross-env y deje el const de electron como estaba, y sustitu铆 el electron-compile por este otro https://www.npmjs.com/package/electron-reloader , pongan el c贸digo dentro del mismo if que hizo el profe. No s茅 si es la mejor opci贸n, pero de momento lo solucione as铆, y funciona tal cual la demostraci贸n, as铆 puedo continuar con el curso.

Cap铆tulos desactualizados. electron-compile DEPRECATED.

Una soluci贸n para electron-compile

Instalan elctron reloader

npm install electron-reloader --save-dev

Pegan este codigo en el index.js o lo importan de devtools.js

const env = process.env.NODE_ENV || 'development';
  
if (env === 'development') {
    try {
        require('electron-reloader')(module, {
            debug: true,
            watchRenderer: true
        });
    } catch (_) { console.log('Error'); }    
}

Hola! Parece que electron-compiler viene deprecado hace ya unos a帽os.
Encontr茅 esta alternativa que al parecer puede ser un buen reemplazo https://webpack.electron.build/

Ayuda, al correr npm install electron-prebuilt-compile --save-dev me sale todo esto, no se que signifique.
PS C:\users\elvis\documents\elvis\javascript\electron\siad\src\assets> cd鈥
PS C:\users\elvis\documents\elvis\javascript\electron\siad\src> cd鈥
PS C:\users\elvis\documents\elvis\javascript\electron\siad> npm install electron-prebuilt-compile --save-dev
npm WARN deprecated [email protected]: CoffeeScript on NPM has moved to 鈥渃offeescript鈥 (no hyphen)
npm WARN deprecated [email protected]: Jade has been renamed to pug, please install the latest version of pug instead of jade
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: Please update to at least constantinople 3.1.1
npm WARN deprecated [email protected]: Deprecated, use jstransformer
npm WARN deprecated [email protected]: This version is no longer maintained. Please upgrade to the latest version.
npm WARN deprecated [email protected]: This version is no longer maintained. Please upgrade to the latest version.
npm WARN deprecated [email protected]: This version is no longer maintained. Please upgrade to the latest version.

[email protected] postinstall C:\users\elvis\documents\elvis\javascript\electron\siad\node_modules\electron-prebuilt-compile\node_modules\electron
node install.js

npm WARN [email protected] No repository field.

  • [email protected]
    added 428 packages from 506 contributors and audited 4284 packages in 142.437s
    found 6 vulnerabilities (2 low, 4 moderate)
    run npm audit fix to fix them, or npm audit for details

Tuve que dejarlo al curso鈥uy desactualizado y no funciona a partir de las ultimas instalaciones. Me funciono hasta la ventana amararilla con los dos parrafos

El curso esta Algo o mucho desactualizado 馃ゲ

Listo compae

Para todos los que tenemos problemas para seguir el curso por lo mucho que ha cambiado esta tecnolog铆a.

La forma que encontr茅 para poder seguir el curso sin problemas fue instalar las versiones exactas que esta usando el profesor en el curso, por ejemplo en lugar de solo darle 鈥渘pm install electron鈥, colocar "npm i [email protected]"
lo mismo para todos los paquetes que instala a lo largo del curso
npm i [email protected]
npm install [email protected] --save-dev
npm r electron鈥搒ave && npm install --save [email protected]
npm install --save [email protected]
npm install [email protected] --save

cada que el profe instale un paquete durante el curso va a tocar fijarse cual es la versi贸n que le indica en la consola que fue instalada e instalar exactamente esa

recomendacion para los que estan trabajando EN WINDOWS, realicen el procedimiento del npm install cross-env --save a penas terminen de hacer la instalacion del electron-compile (minuto 7:30)鈥

despues de varios intentos pude hacerlo asi y se evitan varios dolores de cabeza鈥

Con la version 4.0.0 de electron-prebuilt-compile da error al ejecutar el comando npm run dev.
Ha alguien le paso y sabe como solucionarlo? Yo no he encontrado solucion aun.

App threw an error during load
TypeError: _fs2.default.statSyncNoException is not a function
at findPackageJson (/home/spizzirri/Proyectos/Platzi/electron/node_modules/electron-prebuilt-compile/lib/es6-init.js:25:20)
at main (/home/spizzirri/Proyectos/Platzi/electron/node_modules/electron-prebuilt-compile/lib/es6-init.js:44:23)
at Object.<anonymous> (/home/spizzirri/Proyectos/Platzi/electron/node_modules/electron-prebuilt-compile/lib/es6-init.js:61:1)
at Object.<anonymous> (/home/spizzirri/Proyectos/Platzi/electron/node_modules/electron-prebuilt-compile/lib/es6-init.js:63:3)
at Module._compile (internal/modules/cjs/loader.js:693:30)
at Object.Module._extensions鈥s (internal/modules/cjs/loader.js:704:10)
at Module.load (internal/modules/cjs/loader.js:602:32)
at tryModuleLoad (internal/modules/cjs/loader.js:541:12)
at Function.Module._load (internal/modules/cjs/loader.js:533:3)
at loadApplicationPackage (/home/spizzirri/Proyectos/Platzi/electron/node_modules/electron/dist/resources/default_app.asar/main.js:119:12)

Con la version 1.6.6, como muestra el video, si me funciono.

Tengo esto errror alguien que me pueda ayudar
App threw an error during load
TypeError: _fs2.default.statSyncNoException is not a function
at findPackageJson (C:\Users\Iran Canul\Documents\Cursos\electro\node_modules\electron-prebuilt-compile\lib\es6-init.js:25:20)
at main (C:\Users\Iran Canul\Documents\Cursos\electro\node_modules\electron-prebuilt-compile\lib\es6-init.js:44:23)
at Object.<anonymous> (C:\Users\Iran Canul\Documents\Cursos\electro\node_modules\electron-prebuilt-compile\lib\es6-init.js:61:1)
at Object.<anonymous> (C:\Users\Iran Canul\Documents\Cursos\electro\node_modules\electron-prebuilt-compile\lib\es6-init.js:63:3)
at Module._compile (internal/modules/cjs/loader.js:693:30)
at Object.Module._extensions鈥s (internal/modules/cjs/loader.js:704:10)
at Module.load (internal/modules/cjs/loader.js:602:32)
at tryModuleLoad (internal/modules/cjs/loader.js:541:12)
at Function.Module._load (internal/modules/cjs/loader.js:533:3)
at loadApplicationPackage (C:\Users\Iran Canul\Documents\Cursos\electro\node_modules\electron-prebuilt-compile\node_modules\electron\dist\resources\default_app.asar\main.js:119:12)

Electron-compile est谩 obsoleto, asi que aconsejo que busqueis otras soluciones como webpack.

Para cuando una actulizacion鈥

liveReload

cross-env

electron-compile

驴Qu茅 significa esto?

process.env.NODE_ENV```