Configurando el entorno para construcción

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

Pablo Almonte

student•

Tuve el siguiente error al intentar importar el proyecto a electron-forge.

An unhandled rejection has occurred inside Forge:
Cannot read property 'replace' of undefined
TypeError: Cannot read property 'replace' of undefined
    at setInitialForgeConfig (C:\Users\MR\AppData\Roaming\npm\node_modules\electron-forge\dist\util\forge-config.js:86:78)
    at C:\Users\MR\AppData\Roaming\npm\node_modules\electron-forge\dist\api\import.js:292:44
    at Generator.next (<anonymous>)
    at Generator.tryCatcher (C:\Users\MR\AppData\Roaming\npm\node_modules\electron-forge\node_modules\bluebird\js\release\util.js:16:23)
    at PromiseSpawn._promiseFulfilled (C:\Users\MR\AppData\Roaming\npm\node_modules\electron-forge\node_modules\bluebird\js\release\generators.js:97:49)
    at Promise._settlePromise (C:\Users\MR\AppData\Roaming\npm\node_modules\electron-forge\node_modules\bluebird\js\release\promise.js:574:26)
    at Promise._settlePromise0 (C:\Users\MR\AppData\Roaming\npm\node_modules\electron-forge\node_modules\bluebird\js\release\promise.js:614:10)
    at Promise._settlePromises (C:\Users\MR\AppData\Roaming\npm\node_modules\electron-forge\node_modules\bluebird\js\release\promise.js:693:18)
    at Async._drainQueue (C:\Users\MR\AppData\Roaming\npm\node_modules\electron-forge\node_modules\bluebird\js\release\async.js:133:16)
    at Async._drainQueues (C:\Users\MR\AppData\Roaming\npm\node_modules\electron-forge\node_modules\bluebird\js\release\async.js:143:10)
    at Immediate.Async.drainQueues (C:\Users\MR\AppData\Roaming\npm\node_modules\electron-forge\node_modules\bluebird\js\release\async.js:17:14)
    at runCallback (timers.js:785:20)
    at tryOnImmediate (timers.js:747:5)
    at processImmediate [as _immediateCallback] (timers.js:718:5)

Se soluciona poniendo en el package.json

"productName": "Platzipics",

Guillermo Baldán López

student•

Después de haber instalado globalmente electron-forge con npm install -g electron-forge cualquier comando que meto en la terminal relativo a electron-forge me da el siguiente mensaje:

It looks like you are missing some dependencies you need to get Electron running. Make sure you have git installed and Node.js version 6.0.0+

No sé porque me dice que le falta git y Node de la que ambas he instalado tanto local como globalmente las versiones 0.1.5 y 14.0.0 respectivamente.

Guillermo Baldán López

student•

La respuesta está en los comentarios de esta pregunta en inglés: Error Message: It looks like you are missing some dependencies you need to get Electron running pesar del breve comentario que me hace un usuario, resulta muy revelador. Deduzco que node o lo que sea que hace correr electron-forge necesita el CLI de git. Entonces voy a la página oficial de git, en mi caso me descargo la versión de git para widows y mientras la instalo en uno de los menus escojo la opción de instalar el CLI, para usar el Git Bash.

Bruno Orozco Mejía

student•

++Notas de la clase++

Utilizaremos electron-forge para desarrollar nuestro aplicativo.

No sólo permite crear instaladores y ejecutar aplicativos sino también provee plantillas para comenzar el desarrollo de un aplicativo de electrón y la posibilidad de publicarlo.

Instalamos electron-forge de forma global

npm install -g electron-forge

Importamos el proyecto en electron-forge

electron-forge import

Guillermo Baldán López

student•

Cuando pongo la terminal electron-forge import me sale este mensaje:

It looks like you are missing some dependencies you need to get Electron running. Make sure you have git installed and Node.js version 6.0.0+

No lo entiendo porque ambas aparecen en el package.json. En el package.json me aparecen tanto git (^0.1.5) como node (^14.0.0).

{ "name": "memoryassitant-electron", "version": "1.0.0", "description": "software para estudiantes de asistencia en procesos de memorización de información diversa", "main": "index.js", "dependencies": { "electron-forge": "^5.2.4", "git": "^0.1.5", "node": "^14.0.0" }, "devDependencies": { "electron": "^8.2.3" }, "scripts": { "test": "test", "dev": "electron index.js", "test1": "electron frontend.html", "installer1": "electron-forge import" }, "keywords": [ "memory", "learning", "asistant" ], "author": "Guillermo Baldán", "license": "ISC" }

Octavio Villavicencio Cruz

student•

https://www.electronforge.io/import-existing-project

softdynamic sac

student•

 proyecto_electron@1.0.0 package C:\xampp\htdocs\offline\proyecto_electron              
 electron-forge package                                                                 
                                                                                        
 Checking your system                                                                   
 Preparing to Package Application for arch: x64                                         
n unhandled rejection has occurred inside Forge:                                        
annot find module 'C:\xampp\htdocs\offline\proyecto_electron\index.js'                  
rror: Cannot find module 'C:\xampp\htdocs\offline\proyecto_electron\index.js'           
   at Function.Module._resolveFilename (module.js:476:15)                               
   at Function.resolve (internal/module.js:27:19)                                       
   at C:\xampp\htdocs\offline\proyecto_electron\node_modules\electron-forge\dist\api\pac
age.js:185:40                                                                           
   at next (native)                                                                     
   at tryCatcher (C:\xampp\htdocs\offline\proyecto_electron\node_modules\bluebird\js\rel
ase\util.js:16:23)                                                                      
   at PromiseSpawn._promiseFulfilled (C:\xampp\htdocs\offline\proyecto_electron\node_mod
les\bluebird\js\release\generators.js:97:49)                                            
   at Promise._settlePromise (C:\xampp\htdocs\offline\proyecto_electron\node_modules\blu
bird\js\release\promise.js:574:26)                                                      
   at Promise._settlePromise0 (C:\xampp\htdocs\offline\proyecto_electron\node_modules\bl
ebird\js\release\promise.js:614:10)                                                     
   at Promise._settlePromises (C:\xampp\htdocs\offline\proyecto_electron\node_modules\bl
ebird\js\release\promise.js:693:18)                                                     
   at Async._drainQueue (C:\xampp\htdocs\offline\proyecto_electron\node_modules\bluebird
js\release\async.js:133:16)                                                             
   at Async._drainQueues (C:\xampp\htdocs\offline\proyecto_electron\node_modules\bluebir
\js\release\async.js:143:10)

softdynamic sac

student•

Me sale este error

C:\xampp\htdocs\offline\proyecto_electron_2 (master -> origin) (proyecto_electron@1.0.0)  
                                                                                          
λ npm run package-win                                                                     
                                                                                          
> proyecto_electron@1.0.0 package-win C:\xampp\htdocs\offline\proyecto_electron_2         
> electron-forge package --platform=win32 -- arch=ia32                                    
                                                                                          
√ Checking your system                                                                    
- Preparing to Package Application for arch: x64                                          
An unhandled rejection has occurred inside Forge:                                         
Cannot find module 'C:\xampp\htdocs\offline\proyecto_electron_2\y'                        
Error: Cannot find module 'C:\xampp\htdocs\offline\proyecto_electron_2\y'                 
    at Function.Module._resolveFilename (module.js:476:15)                                
    at Function.resolve (internal/module.js:27:19)                                        
    at C:\xampp\htdocs\offline\proyecto_electron_2\node_modules\electron-forge\dist\api\p 
ackage.js:185:40                                                                          
    at next (native)                                                                      
    at tryCatcher (C:\xampp\htdocs\offline\proyecto_electron_2\node_modules\bluebird\js\r 
elease\util.js:16:23)                                                                     
    at PromiseSpawn._promiseFulfilled (C:\xampp\htdocs\offline\proyecto_electron_2\node_m 
odules\bluebird\js\release\generators.js:97:49)                                           
    at Promise._settlePromise (C:\xampp\htdocs\offline\proyecto_electron_2\node_modules\b 
luebird\js\release\promise.js:574:26)                                                     
    at Promise._settlePromise0 (C:\xampp\htdocs\offline\proyecto_electron_2\node_modules\ 
bluebird\js\release\promise.js:614:10)                                                    
    at Promise._settlePromises (C:\xampp\htdocs\offline\proyecto_electron_2\node_modules\ 
bluebird\js\release\promise.js:693:18)                                                    
    at Async._drainQueue (C:\xampp\htdocs\offline\proyecto_electron_2\node_modules\bluebi 
rd\js\release\async.js:133:16)                                                            
    at Async._drainQueues (C:\xampp\htdocs\offline\proyecto_electron_2\node_modules\blueb 
ird\js\release\async.js:143:10)                                                           
    at Immediate.Async.drainQueues (C:\xampp\htdocs\offline\proyecto_electron_2\node_modu 
les\bluebird\js\release\async.js:17:14)                                                   
    at runCallback (timers.js:672:20)                                                     
    at tryOnImmediate (timers.js:645:5)                                                   
    at processImmediate [as _immediateCallback] (timers.js:617:5)                         
                                                                                          
npm ERR! Windows_NT 6.1.7601                                                              
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modu 
les\\npm\\bin\\npm-cli.js" "run" "package-win"                                            
npm ERR! node v6.14.3                                                                     
npm ERR! npm  v3.10.10                                                                    
npm ERR! code ELIFECYCLE                                                                  
npm ERR! proyecto_electron@1.0.0 package-win: `electron-forge package --platform=win32 -- 
 arch=ia32`                                                                               
npm ERR! Exit status 1                                                                    
npm ERR!                                                                                  
npm ERR! Failed at the proyecto_electron@1.0.0 package-win script 'electron-forge package 
 --platform=win32 -- arch=ia32'.                                                          
npm ERR! Make sure you have the latest version of node.js and npm installed.              
npm ERR! If you do, this is most likely a problem with the proyecto_electron package,     
npm ERR! not with npm itself.                                                             
npm ERR! Tell the author that this fails on your system:                                  
npm ERR!     electron-forge package --platform=win32 -- arch=ia32                         
npm ERR! You can get information on how to open an issue for this project with:           
npm ERR!     npm bugs proyecto_electron                                                   
npm ERR! Or if that isn't available, you can get their info via:                          
npm ERR!     npm owner ls proyecto_electron                                               
npm ERR! There is likely additional logging output above.                                 
                                                                                          
npm ERR! Please include the following file with any support request:                      
npm ERR!     C:\xampp\htdocs\offline\proyecto_electron_2\npm-debug.log                    
                                                                                          ```

Diego Forero

Team Platzi•

Esta intentando llamar un modulo llamado y, revisa que no tengas un import mal.

David Sosa Trejo

student•

En macOS tuve este problema al intentar instalar electron-forge:
Error: EACCES: permission denied, access ‘/opt/local/lib/node_modules/electron-forge’

La solución fue instalarlo con el siguiente comando:
sudo npm install -g electron --unsafe-perm=true --allow-root

… según se comenta aquí:
https://github.com/npm/npm/issues/17268

Configurando el entorno para construcción

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