Creando nuestro proyecto

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

Resumen

Creación del proyecto Platzipcs usando npm.

npm init

Recuerda que aunque puedes tener instalado Electron globalmente lo mas recomendado es instalarlo localmente para cada proyecto.

Roberto Prince

student•

la vida es corta plazti-locos usen esto

npm i -s electron

Juan Carlos Correa Herrera

student•

Oh :v

Daniel Hidalgo

student•

¿Qué hace este comando (con exactitud) ?

Jorge flores

student•

Las nuevas versiones de Node.js vienen con windows-build-tools incluido asi que no es necesario instalarlo aparte

Fernando Jimenez

student•

Gracias, bro

Roberto Prince

student•

hey platzi-fans usen esto:

npm init -y

bye, los quiero, adios

Samuel Hinojosa

student•

buen aporte

Platzi Team

student•

No olviden poner description que les sale error en el ``` npm run make

Alejandro Robleto

student•

no puedo iniciar electron por error pero no se como interpretarlo la licencia que me dio la instalacion no es MIT es SCI, y lo demas esta igual, el error que me sale es este.

npm ERR! missing script: dev

npm ERR! A complete log of this run can be found in: npm ERR! /Users/roberto/.npm/_logs/2019-06-11T15_58_48_716Z-debug.log

Alejandro Robleto

student•

hola como estas, veras el error no esta en la fase de configuracion primaria que donde inicias creando el directorio y vas dando enter, la verdad no es ahi el error no hay ningun problema con la licencia ya que a mi asi tambien me salio asi.

el problema esta en el codigo, una ves que has echo la configuracion inicial, ve y busca e archivo ( es decir la carpeta que creaste) y abrela con e editor de codigo que prefieras o manejes mejor, luego ASEGURATE de que en la parte donde dice "script': { antes de lo que sigue le pongas "dev": "electron", guardas el cambio y vas a la terminal con eso todo estara bien......

ya que el error que te sale es como que la terminal te diga !! oye no encuentro la orden que me das!! SUERTE espero lo logres

José Francisco Ojeda Vera

student•

Cuando instalo obtengo el siguiente error
e intentado cambiando la version de node y npm y nada el mismo error
a que se debera…

root@jose-pc:/home/jose/Escritorio/electron# npm install electron --save
npm ERR! Linux 4.10.0-28-generic
npm ERR! argv “/root/.nvm/versions/node/v6.11.0/bin/node” “/root/.nvm/versions/node/v6.11.0/bin/npm” “install” “electron” "–save"
npm ERR! node v6.11.0
npm ERR! npm v3.10.10
npm ERR! code ENOSELF

npm ERR! Refusing to install electron as a dependency of itself
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues

npm ERR! Please include the following file with any support request:
npm ERR! /home/jose/Escritorio/electron/npm-debug.log
root@jose-pc:/home/jose/Escritorio/electron# npm -v
3.10.10
root@jose-pc:/home/jose/Escritorio/electron# npm install

electron@1.6.6 postinstall /home/jose/Escritorio/electron/node_modules/electron
node install.js

Diego Forero

Team Platzi•

Creo que el error es porque llamas a la carpeta de tu proyecto electron y eso causa conflictos.

José Francisco Ojeda Vera

student•

Ya resuelto el problema era que no se descargaban correctamente las dependencias, porque, efectivamente repeti el proceso como tres veces y funciona Saludos

Darwin Felipe Uzcategui Gonzalez

student•

**Adrian Estrada **
hasta aquí Todo Bien pero se queda cuando va instalar electron
C:\platziMiapp>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See npm help json for definitive documentation on these fields
and exactly what they do.

Use npm install <pkg> afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (platzimiapp)
version: (1.0.0)
description: Mi primer Aplicacion electron
entry point: (index.js)
test command:
git repository:
keywords:
author: Darwin Felipe Uzcategui Gonzalez
license: (ISC)
About to write to C:\platziMiapp\package.json:

{
“name”: “platzimiapp”,
“version”: “1.0.0”,
“description”: “Mi primer Aplicacion electron”,
“main”: “index.js”,
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”
},
“author”: “Darwin Felipe Uzcategui Gonzalez”,
“license”: “ISC”
}

Darwin Felipe Uzcategui Gonzalez

student•

**SE QUEDA AQUI LA INSTALACION **
C:\platziMiapp>npm install --save electron

electron@1.7.10 postinstall C:\platziMiapp\node_modules\electron
node install.js

Mohamed El Saheli

student•

Cómo me aseguro de que Electron se ha instalado localmente en lugar de globalmente?

Diego Forero

Team Platzi•

Primero si instalas algún paquete como administrador y con el flag -g esta instalado de manera global, lo segundo es revisar los paquetes instalados de npm.
En linux y mac
sudo npm -g list
En caso de windows abres la terminal como administrador y ejecutas
npm -g list
Asi puedes ver que paquetes están globales.

Juan Camilo Espitia

student•

Su ayuda por favor, si alguien ve este comentario tuve el siguiente error.

/mnt/d/documentos/programacion/platzipics/node_modules/electron/dist/electron: error while loading shared libraries: libXcursor.so.1: cannot open shared object file: No such file or directory npm ERR! code ELIFECYCLE npm ERR! syscall spawn npm ERR! file sh npm ERR! errno ENOENT npm ERR! platzipics@1.0.0 dev: electron index.js npm ERR! spawn ENOENT npm ERR! npm ERR! Failed at the platzipics@1.0.0 dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! /home/regniek/.npm/_logs/2020-05-23T23_15_32_323Z-debug.log

Gracias

Carlos Gutierrez

student•

Trata de abrirlo en un prompt como administrador

Juan Camilo Espitia

student•

que es un Prompt?

Wanda Peruzzo

student•

npm install electron --save-dev
con este comando no hay que cambiar donde dice DEV en minuto 2:50 lo hace solo.

daniel kant

student•

npm install electron

daniel kant

student•

npm init

Daniel Hidalgo

student•

Estoy un poco acomplejado en esta parte. El profesor establece que usualmente con node.js los proyectos se trabajan creando el directorio y configurándolo.

Menciona que a ese proyecto se le instala electron, pese a que puede existir de manera global.

Si estoy en windows, ¿cual es la manera correcta de hacer esto? en Windows es más habitual usar una instalación global. help.

Alberto Pedron

student•

Ya sea Windows, Linux o Mac en cualquier plataforma lo ideal es instalar todos los módulos de manera local en cada proyecto, cuando haces una instalación global es para poder usar el comando desde cualquier lugar, por ejemplo te vas al proyecto y lanzas directamente el comando electron y funcionará, esto es porque el sistema usa los binarios de la version global que instalaste mientras que cuando haces una instalación local la única manera es que hagas un script en el package.json como hizo el profesor y lo corras con npm run [nombre_script] al hacer esto npm buscará los binarios en el proyecto actúal y correrá electron.

La idea de mantener instalaciones locales y no globales es porque si tienes dos proyectos con electron y usan diferentes versiones del mismo al usar una version global tendrías que estarla cambiando dependiento del proyecto (reinstalando la version adecuada) mientras que si usas dos instalaciones localas todo funcionará con su version local exacta.

Adonis Perez Perez Farias

student•

me esta sucediendo un problema, cuando estoy descargando el modulo de electron se me va el internet y deja de descargar, osea de queda estatico la descarga sin decir mas nada, que puedo hacer? intente aplicar los comandos nuevamente de descargar me me sale este error,
npm install electron --save

electron@1.8.2 postinstall C:\Users\adonia\documents\cursos de platzi\curso de electron\miappy\node_modules\electron
node install.js

Downloading electron-v1.8.2-win32-x64.zip
Error: read ECONNRESET
C:\Users\adonia\documents\cursos de platzi\curso de electron\miappy\node_modules\electron\install.js:47
throw err
^

Error: read ECONNRESET
at _errnoException (util.js:1022:11)
at TLSWrap.onread (net.js:615:25)
npm WARN miappy@1.0.0 No description
npm WARN miappy@1.0.0 No repository field.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! electron@1.8.2 postinstall: node install.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the electron@1.8.2 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\adonia\AppData\Roaming\npm-cache_logs\2018-02-22T02_19_42_928Z-debug.log

David Toca

student•

Eso parece un problema de red, si estas en una red con los puertos cerrados, como lo es una empresa que tiene un proxy, podrias tener problemas, pon aqui el contenido del archivo C:\Users\adonia\AppData\Roaming\npm-cache_logs\2018-02-22T02_19_42_928Z-debug.log para poder ver mas en detalle el error

Adonis Perez Perez Farias

student•

el problema era que no descargaba bien el modulo de electrón por tener mala conexión a Internet, lo que hice fue borrar y hacer todo de nuevo con la conexión buena. gracias de todas maneras

XaviCloud

student•

Hola a tod@s,
¿Dónde quedó el proyecto inicial Pomodorize. me ?
Estaba bastante interesado, soy un desastre en organizarme jaja
Gracias

XaviCloud

student•

Gracias @edsadr

Darwin Felipe Uzcategui Gonzalez

student•

Instalación de Electro

Luis Ángel López Pedres

student•

Creando nuestro proyecto

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