Pues voy a bajarle un poquito a esto, hoy vamos a estar haciendo una aplicación de Electron desde cero
¿Qué es Electron? Pues te voy a contar yo qué es Electron
Electron básicamente sería como, no sé si llamarle una herramienta o un framework
porque al final vais a ver que, bueno, vamos a llamarle un framework, ¿vale?
Es un framework que te permite crear aplicaciones de escritorio utilizando tecnologías web
¿Y qué tecnologías web son? Pues JavaScript, HTML y CSS
Ah, una pasada
De hecho, Electron, por si quieres saber de dónde sale, por qué sale
apareció gracias al editor Atom
No sé si lo utilizabas o si lo sabías
pero Electron es una tecnología que creó en su día GitHub justamente para poder crear el editor Atom
El editor Atom utiliza Electron
aunque ya sabéis que Atom se va a archivar el 15 de diciembre
o sea, si no está muerto, está casi, ¿vale?
Y hay más ejemplos, por supuesto
Tenemos nuestro querido Visual Studio Code, también está hecho con Electron
Slack está hecho con Electron
Hay un montón de aplicaciones
WhatsApp está hecha con Electron
Twitch con Electron
Microsoft Teams
Figma
Hay un montón de aplicaciones que utilizas en tu día a día que utilizan Electron
¿Y sabéis una de ellas que mucha gente cree que está hecha con Electron y no está hecha con Electron?
Spotify
Spotify no está hecha con Electron
Mucha gente, de hecho ya me lo estaban diciendo justamente en el chat
Pero os puedo confirmar que no está hecha con Electron Spotify
Más que nada porque hablé con un ingeniero de Spotify cuando estuve en Polonia
Y me lo confirmó
Me dijo, no, eso es una cosa que mucha gente cree
Pero no, es mentira, es mentira
No, lo que tiene la gente de
Lo que tiene la gente de
De Spotify
Es justamente
Como un Electron suyo propio, ¿vale?
Pero bueno
Hyper, la terminal
Sí, WhatsApp ya no, es verdad
Porque WhatsApp la han
La han
Hace poquito
Que la han migrado
La nueva versión de WhatsApp está fuera de beta
No sé qué
Bueno, el 16 de agosto, joder
Pero esto de hace nada
Esto de hace nada
Igualmente
Esto es con todo
O sea, esto parece de Windows
¿No?
Esta parece la versión de Windows
No sé si en todos los sistemas
Ha dejado de ser Electron
No lo sé
Y me imagino que esta versión nueva
Utiliza React Native
Me imagino
Me imagino
Pero bueno
El tema es
Que aquí lo importante
El tema es
Ah, está con Flader
¿En serio?
La de WhatsApp con Flader
A ver, podría ser
Pero me extraña, la verdad
Me sorprende
Si está hecha
Pues mira, bien por ello
El tema
El tema es
Que Electron está en todos los sitios
De verdad
O sea, allí donde
No te des cuenta
Pues allí está
Y al final
Utilizarlo
Es bastante sencillo
Pero obviamente
Volverte como un maestro
Digamos
O sea
Manejar todo lo que tiene
Que son muchas cosas
Eso ya es más difícil
Eso es más difícil
Yo de hecho
Lo llegué a utilizar
Hace 10.000 millones de años
Pero ya
No me acuerdo
Ni de la mitad
Pero vamos a ir comentando
Con el que tiene Startup
Y poco a poco
Iremos subiendo
Increchendo
Iremos increchendo
¿Vale?
Así que nada
Vamos a empezar
Con nuestro querido Electron
Aquí tenéis
Como las diferentes releases
Las releases
Vais a ver
Que muchas veces
Están alineadas
Como podéis ver
A tres cosas
Uno
La propia versión de Electron
¿Veis?
La versión 20
Luego tenemos
La versión de Node
La 16.15
Y luego la versión
De Chromium
¿Vale?
¿Por qué es esto?
Esto es porque
El propio paquete de Electron
Como que ya viene incorporado
Tanto Node
Como Chromium
¿Vale?
Y luego vamos a explicar
Por qué
Y lo vas a entender
Vamos
Facilísimo
Vas a verlo
Clarísimo
Clarísimo
Así que nada
Vámonos al Getting Started
Vamos a empezar por algún sitio
¿Vale?
Mira
Getting Started
Mira
Te recomendamos que empieces
Por este tutorial
No sé si está en castellano
A ver si está en castellano
Está en Spanglish
Está en Spanglish
Tiene partes en castellano
Pues mirad
Muchas veces me preguntáis
Quiero apoyar
Hacer cosas de código abierto
Aquí tenéis un
Una oportunidad de oro
Aquí tenéis una oportunidad de oro
Mirad
Esto está en inglés
Esto lo podéis traducir
O vais a Github
Lo buscáis
Buscáis las docs
A ver si están por aquí
Ay, qué raro
Que no están aquí
Las traducciones
Bueno, podéis ver
Primero
Primero
¿Veis el contribute?
¿Veis?
Contributing
A ver qué pone aquí
Igual pone que no aceptan traducciones
Mira, languages
Aceptamos issues en cualquier lenguaje
¡Wow!
Impresionante
Impresionante
Esto me parece muy bien
Me parece muy bien
Bueno
Pues le echáis un vistazo
Y podéis contribuir a la documentación
Que está en la mitad en inglés
Justamente
¿Vale?
Vale
Pues venga
Vamos aquí
Prerrequisitos
Importante
Los prerequisitos
Son bastante claros
Realmente no hay muchos
Pero bueno
Os lo voy a comentar
Obviamente necesitáis saber
Tecnología web
HTML
CSS
Y JavaScript
También necesitáis tener un editor de código
Visual Studio Code
Necesitáis tener una terminal
Saber un poco de Git y GitHub
Bueno, esto en el caso de que queráis tener algún repositorio
Con lo que sea
Node.js y NPM
Aunque
Ojo con esto
Esto es muy importante
Que no mezcléis las cosas
Node.js y NPM
No es que lo necesite Electron
Es para que tú desarrolles
Crees el proyecto
Instales dependencias
Y todo esto
¿Vale?
La versión que tú tengas de Node
En tu terminal
O sea, yo cuando haga aquí
Node
Menos V
Esta versión
No será la misma
Que utilice luego Electron
Al ejecutarse
¿Vale?
Importantísimo
Porque si no podéis intentar
Utilizar cosas en Electron
Que en realidad no tienen soporte
Por la versión
Y es porque Electron
Tiene su propia versión de Node
Ya dentro
¿Vale?
Del paquete
De hecho me parece
¿Ves?
Creo que lo pone
Aquí lo está explicando
¿Ves?
Electron
No utiliza el Node
Que tienes en tu sistema
Utiliza el que tiene instalado
¿Vale?
Venga
Así que ahí ya sabemos
Un poco las cositas
Que necesitamos
Vamos a construir
Nuestra primera aplicación
¿Estáis nerviosos?
Para construir
Vuestra primera aplicación
De escritorio
Midu
Lo ves clarísimo
Empieza a comer RAM
Sí, lo veo, sí
Bueno
A ver
Ha mejorado bastante Electron
Las cosas como son
Hombre, vamos a codear
Gracias por suscribirte
Durante un mes
Con nivel 1
5 meses ya
Idinojako
Jmal
Malemán
Jairoz
Jessydani
Vichilox
Álvaro Prieto
Landref
Ogate
Joder, un montón de gente
Cero KSH
Muchas gracias amigos
Vale
Pues vamos a empezar
De nuevo
Vamos a empezar
Básico
Básico
Así que
Vais a ver
Que lo vamos a hacer
Muy de cero
Y poquito a poco
Para que lo sigamos
Todos
Vamos a poner aquí
Electron App
Por ejemplo
Y ponemos
Electron App
Empezamos siempre
Con un
NPM Init
Como veis
Como veis
Desde cero
Se utiliza una plantilla
Y tal
Desde cero
Y luego ya
Si es
Utilizamos una plantilla
Y vemos como lo hacemos
NPM Init
Menos i
Para que nos empiece
El proyecto
Ahí a saco
Vale
Ya nos ha creado
El package json
Con todo lo que queríamos
Y ya está
Una vez que hemos hecho esto
Pues solo tenemos que instalar
La dependencia de desarrollo
De Electron
Así que
NPM install
Electron
Menos d
Vale
Y esto
Esto tarda
Porque fíjate
Hay cosas que tiene
Esto tiene
Node
Y también tiene
Chromium
Que sería como la versión
De Chrome
Pero sin
De código abierto
A ver
Chrome también de código abierto
Lo que pasa es que tiene
Cosas que te pillan
Y esto
Pues la versión de Chromium
No tiene ese tipo de cosas
Es verdad
Esto es verídico 100%
También pasa lo mismo
Con Visual Studio Code
No sé si lo sabéis
Pero hay una versión
De Visual Studio Code
Que no tiene
Digamos
Todo el tema
De envío de tracking
De Microsoft
Porque es como la versión
De hecho
La versión de código abierto
De Visual Studio Code
No tiene eso
Exacto
Muy bien
Feral
Visual Studio Codium
Esta es
¿Ves?
Free
Libre
Open source
Software
Binary
Visual Studio Code
Es exactamente lo mismo
¿Vale?
Es el Visual Studio Code
De toda la vida
Lo que pasa
Es que no tiene
Digamos
Pues todo lo que
Te traquea
De Microsoft
Es bastante interesante
Muchas gracias
Por decirme el nombre
Vale
Entonces
Ya tenemos instalado
Como dependencia
De desarrollo
Electron
Voy a levantar
Voy a abrir aquí esto
Code.
Abrimos
Nuestro proyectito
¿Vale?
Voy a quitar el package
Lock este
Que no me gusta
Package
Y aquí tenemos
Nuestro Electron
Que es la versión
20
La versión 20
Ya
Madre mía
Como ha llovido
Dios mío
Como ha llovido
Yo
Mira aquí
Ni la documentación
Está
Está bien
Al día
Vamos a poner
Un gitignore
Para ignorar
Algunas cositas
Gitignore
Vamos a ignorar
El package lock
Por si acaso
Aparece
Y el no modules
¿Vale?
Quitamos el gitignore
Esto más que nada
Para luego
Por si subo el repositor
A algún sitio
¿Vale?
Venga
Vamos a ejecutar
Nuestra aplicación
De Electron
Desde el principio
Vamos a crear
Aquí un archivo
Que le vamos a llamar
Main.js
Y voy a poner
Console.log
Hola
Desde Electron
¿Vale?
Bueno
Se me está quejando
Aquí del slint
Así que vamos a hacer
Otra cosita
Mira
Esto lo voy a hacer
Aquí de
Grande
Vamos a
En esta terminal
Voy a poner
Npm install
Standard
Menos d
Voy a instalar
Como standard
Para que no sepa
Lo que es
Aunque lo he explicado
Unas cuantas veces
Ya por aquí
Es como
Un montón de reglas
Tiene slint
Integrado
Y tiene un montón
De reglas ya
Predefinidas
Para que tú no las tengas
Que configurar
Y todo esto
Y es una forma
Bastante rápida
De que tú vayas aquí
A tu package.json
Y pongas esto
Slint
Config
Extends
Y aquí
Podemos poner
Standard
Y
Si no me he equivocado
Ahora
¿Ves?
Ya me está funcionando
Me está funcionando
El linter
Sin necesidad de haber configurado
Absolutamente nada
Lo único que he puesto
Son tres líneas de código
A mí me encanta esto
Me encanta
¡Hombre!
¡Gartiel!
¡Hola!
Te extrañé mucho
Midu
¡Gartiel!
¿Estás bien, tío?
¿Estás bien?
¿Cuánto tiempo sin verte?
¡Gartiel!
¿Cómo estamos?
Cuéntame, tío
Que es de tu vida
Pues sí, esto es un trucazo
Esto, ¿sabéis qué pasa?
¿Sabéis de qué vienen estos trucos?
Estos trucos vienen
Porque a mí no me gusta configurar cosas
A mí me gusta crear cosas
Hay mucha gente que le encanta
Que es su sueño configurar
¿Sabes?
Y que tiene opiniones muy fuertes
No, quiero que el linter se configure así
Con punto y coma y tal
Y no, tío
Yo lo que quiero es desarrollar
Yo quiero crear cosas
O sea
¿Se puede configurar estándar con semicolons?
Creo que sí
Que hay un semi-estándar que se llama
Semi-estándar
Creo que se llama
Y sería lo mismo
Creo que es este
¿Ves?
Semi-estándar
Todo lo bueno de goodness
With semicolons
O sea, es lo mismo
Pero con semicolons
Es exactamente lo mismo con semicolons
Así que, bueno
Si te gustan los semicolons
Puedes utilizar semi-estándar
Y punto pelota
Vale
Pues como veis
Ya lo tengo configurado
Pim, pam
Tres líneas de código
Una instalación
Todo configurado
A tomar por saco
Bueno
Hemos puesto este console.log
En el main.js
Digamos que el main.js
Este archivo que tenemos aquí
Es el punto de entrada
De nuestra aplicación de escritorio
Y vais a ver por qué
Vais a ver por qué
Porque por ahí es por donde pasa
Absolutamente todo
De hecho
Veis aquí que en el package
Tenemos el index.js
Vamos a ponerle que el main
Es el main.js
Y ahora solo necesitamos
Y ahora solo necesitamos
Poner
Dev
Electron
Punto
Cerramos esto
Nos vamos a la terminal
Y hacemos un
mpn run
Dev
Electron
Punto
Vale
Hola desde Electron
Ya está
¿Veis este console.log que tenemos aquí?
Pues ha quedado ahí
Hola desde Electron
Y esto es lo que hemos puesto aquí
Bueno
Aquí hay como un error
Un poco raro
Pero esto me parece
Esto es algo más interno
De Electron
Vete a saber por qué
Pero fijaos
Que aunque yo solo he puesto aquí
Un console.log
Fijaos que me ha abierto aquí ya
Como
Bueno no sé si lo veis
A ver
Os lo muevo por aquí
Para que lo veáis bien
¿Vale?
Pero me ha abierto
No lo veis igual
No lo veis igual
Perdonad
Es que no puedo
¿Esto lo puedo mover a la izquierda?
Sí
Mira
Madre mía
Lo que hago por mi público
Ah pues no
¿Dónde me ha dejado?
No me lo ha dejado en ningún sitio
¿Dónde me ha dejado el doc?
Me lo ha perdido
Me ha perdido el doc
Tío
Me ha perdido el doc
Me ha dicho que me lo iba a poner a la izquierda
Y era mentira
Ah
Vale vale
Es que me lo ha puesto a la izquierda
Pero a la izquierda de todo
Vale vale
Aquí ya está
Ahora sí
Dios
Bueno
Que me ha abierto este
Digo ¿Dónde me lo ha dejado?
Tampoco se ve aquí
La madre que me parió
La madre que me parió
Joder
Voy a tener que quitar
Voy a tener que quitar esto
Un momento
Voy a tener que quitar esto
Me sabe mal
Porque igual nos quedamos sin
A ver
¿Dónde quitamos esto?
Voy a quitar esto
Perdónate
Ya está
Ya está
Para que lo veamos bien
Porque lo vamos a necesitar ver
Unas cuantas veces
¿Veis?
Aquí tenemos ya como nuestro icono de electrón
Si le das clic
No me ha abierto ninguna ventana
No tengo nada
¿Vale?
Ay
Podría haber movido el icono
Tienes toda razón
Bueno
Me ha abierto una ventana
Pero no tengo ventana
¿Vale?
No tengo ventana todavía
Esto lo vamos a ver ahora
Cómo creamos la ventana y tal
Lo importante es que ya tengo nuestra aplicación abierta
Con todo esto que hemos hecho
Punto pelota
Muy bien
Ahora
Vamos a continuar con
Un poquito
Vamos a seguir al principio
Un poco esto
¿Vale?
Empie en run start
Esto ya lo hemos hecho
Vamos a crear nuestra página web
¿Por qué?
Porque electrón
Es que son páginas web
Es que vas a ver esto
Y vas a decir
No me lo puedo creer
Que esto sea tan sencillo
Mira
Vamos a crear un index.hml
Y vamos a poner aquí esto
Y aquí en el title
Vamos a poner
Eh
Midu mark
Vamos a darle
Midu mark
Por si hicimos el markdown
Por si lo hacemos
Vamos a poner aquí
H1
Hola
Desde electron
¿Ok?
Hola desde electron
Voy a cerrar aquí
Ojo cuidado con esto
Porque
¿Veis que yo he cerrado aquí?
Vale
Me lo ha hecho bien
Hay veces que
Sobre todo en Mac
No tanto en Windows
Pero en Mac
Si
En Windows y en Linux
Es que funciona diferente
Pero en Mac
Cuando tú tienes una ventana abierta
Se queda abierta la ventana
A veces no se cierra automáticamente
Se queda el proceso
Así que te tienes que asegurar
Que te ha cerrado la ventana
¿Vale?
Vale
Ahora sí que me lo ha cerrado
Bueno
Yo he creado aquí el index.html
Pero obviamente todavía tenemos que hacer más cosas
¿No?
Creamos el index.html
Estos metas
Estos del content security policy
Esto es porque como te puedes imaginar
Al utilizar una página web
Como una aplicación de escritorio
Hay un montón de políticas de seguridad
Que tienes que tener en cuenta
Desde acceso a ficheros del disco duro
Qué página web se pueden abrir
Sin ningún tipo de problemas
Qué scripts puedes cargar
Así que esto
Lo que nos va a permitir
Es cargar ciertos scripts
Que sean de nuestra propia página
¿Vale?
Para que así tenga acceso
Si no
Lo que podría ocurrir
Es que no tuviese acceso
Por un tema de políticas de seguridad
Y nos daría un error
Y no podríamos ver nada
Así que le vamos a dar ahí
Si queréis más información
Aquí tenéis el content security policy
Aquí lo tenéis
Content security policy
Esto es para evitar justamente
Que te inyecten scripts
Y cosas así de terceros
¿Vale?
Vale
Pues con esto que tenemos
Ahora ya podemos pasar
Mira, lo voy a dejar por aquí
Y así os lo explico
Mientras lo voy viendo por aquí
Vale
Nos vamos al main
Que es donde hemos hecho
Nuestro console log
Así que vamos a empezar primero
Y nos vamos a traer dos cositas
Por uno
Mira, muy bien
Guija Copilot
La aplicación
Y el browser windows
Y esto nos lo traemos
De electrón
Lo primero que vamos a hacer
Es crear una función
Que le damos create window
Y esta función
Vamos a decirle
Que cree una ventanita
Le damos win
Porque podría ser window
Y aquí hacemos
New browser window
Y vamos a decirle
Cuáles son las medidas
Que tiene esta ventana
Vamos a poner 800
Por 600
Me encanta
Como web preferences
Todavía no
Esto lo veremos después
Si es necesario
Y aquí
Podríamos hacer
Un window.loadfile
Y ahí le decimos
Cuál es el archivo
Que tiene que cargar
Pero como podéis ver
Aquí podríais cargar
Diferentes archivos
O sea, no hace falta
Que carguéis
Un index.html
Podríais cargar
Cualquier cosa
Lo que os dé la gana
De hecho
En windows
Si no me equivoco
Veréis que aquí
Hay un montón de cosas
Y una de hecha
De ellas
Podría ser un loadurl
De hecho
A ver
Lo vamos a probar
Bueno
Vamos a probar primero esto
Y luego probamos
Loadurl
A ver si sin necesidad
De ningún tipo de permiso
Lo carga
Y vais a ver una cosa
Que es muy interesante
Entonces
Le decimos
Vale
Cuando la aplicación
Esté preparada
Entonces
Vamos a
Yo voy a hacerlo así
Vale
Vamos a
Crear
La ventana
Ok
Y con esto
Ya deberíamos
Poder ejecutar aquí
Nuestro
No sé si he puesto
Start o dev
Dev
Le he puesto
MPN run dev
Vale
Y fíjate lo que ha salido por aquí
¡Tachán!
¡Hola!
Desde Electron
Ya tenemos nuestra aplicación hecha
No, nada tenemos hecha todavía
¿Vale?
Pero bueno
Ya tenemos justamente aquí
Algo ya que tiene bastante buena pinta
Ya pone aquí
Hola desde Electron
Ya podemos aquí cambiar cositas de nuestra página web
Por ejemplo
Hola desde Electron
Poder esto
¿Cuál es el problema que vais a ver?
Claro
Si yo cambio esto
Si yo modifico esto
Y pongo aquí
¿Ves?
Esto no se cambia
Pero si le das
Al comando R
¿Has visto que ahora sí que han salido?
Voy a hacerlo otra vez
¡Ah!
Mira
Ahora hasta aquí
No pasa nada
Pero dentro de aquí
Si le doy a comando R
¿Por qué?
Porque es que en realidad es un navegador
Es un navegador
Fíjate si es un navegador
Que mira
¡Ay!
Me ha dejado fatal
Ahora
Mira que hay aquí
¿Pero esto qué es?
Son las herramientas de desarrollo de Chrome
Son las herramientas de desarrollo de Chrome
Tenéis acceso a las herramientas de desarrollo de Chrome
Sin ningún tipo de problema
Dentro de vuestra propia aplicación
Obviamente una cosa importante
Esto es en modo de desarrollo
¿Vale?
Cuando
Aunque habréis visto en Visual Studio Code
Podéis hacer exactamente lo mismo
No sé si os lo habéis dado cuenta alguna vez
Pero en Visual Studio Code
Podéis ir por aquí
A ver
Developer
¡Ay!
Mierda
Un momento
Que es que me
Tengo un programita
Que se llama Color Picker
Que la rata
Esta rata
Se me inicia con el ordenador
Todavía no lo he quitado
Y me quita un acceso directo
Del Visual Studio Code
Que necesito
¡Quítate!
¡Fuera!
¡Muere!
Vale
Comando P
¡Ay!
Ahora
Developer
Developer Tools
Creo que era
Open
Mira
¿Veis?
Esto es de Visual Studio Code
También
También lo tiene
Para que veáis que está hecho con electrones
Esto no lo esperabais
Pues es totalmente
Una aplicación de
Una aplicación web
Así que podéis abrir
Las herramientas de desarrollo
Y le podéis ir dando
Por ejemplo
Mira esto
No sé si esto lo habíais
Llegado a ver
Pero esto es Visual Studio Code
Esto que veis aquí
Todo esto es HTML
Hay mucha gente
Que es que se cree
A mí me parto la caja
Muchas veces
De que la gente
Menosprecia la web
Pero es que la web
Está en todos los sitios
Y hay mucha gente
Que utiliza este tipo de cosas
Y no se da cuenta
Que es una web
¿Sabes?
Es que
Pues eso
Todo lo que veis aquí
Esto son etiquetas web
Literal
Esto son spans
Mira
Esto es un span
Y lo puedes cambiar
Aquí
Si cambio esto
¿Ves?
Lo he cambiado desde la herramienta de desarrollo
Que le está volando a la mente
A un montón de gente
Por lo que veo
Ostras
Pues yo pensaba que esto lo sabía todo el mundo
Bueno
Está bien
Está bien
Que os vuelva la cabeza de vez en cuando
Total
Que al menos ya os habéis dado cuenta
De cómo mola esto
A que está súper chulo
Bueno
Igual la he liado un poco parda ahora
Porque
Ah no
Ya la arreglo
Total
Esto mismo que habéis visto
Es lo que estamos haciendo aquí con Electron
De hecho aquí tenemos nuestras herramientas de desarrollo
Estamos haciendo
Una aplicación con HTML
Y por lo tanto
Tenemos las herramientas de desarrollo de Chrome
Aquí dentro
¿Vale?
Bueno
Pero por ahora
No la vamos a necesitar
Luego igual
Es interesante
Como veis
Podemos hacer esto pequeño
Más grande
Aunque
Ya en el browser Windows este
Si que se le pueden pasar
Diferentes
Cositas
Por ejemplo
Se le puede pasar un min
Para evitar que se haga más pequeño de algo
Vamos a ponerle por ejemplo
Min
¿Vale?
Vamos a hacerlo
Que esto
No se puede hacer tan pequeño como esto
Pero
Ten cuidado
¿Por qué?
Porque esta configuración
Por más que ahora haga
El comando R
Esto sí que se pierde
¿Ok?
Esto sí que se pierde
Esto se pierde
Porque está en dos procesos diferentes
Y esto es súper importante
Vamos a verlo
Porque esto
Necesitas entenderlo
Para todo lo que vamos a intentar
Ir haciendo poco a poco
¿Ok?
Si vamos al monitor de actividad
Y vamos a Electron
Vas a ver que tenemos
Tres procesos
¿Cómo que tres procesos?
¿Pero qué es esto?
Bueno
Tenemos cuatro en realidad
Pero
No
Es trampa
Es trampa porque
Los importantes son estos
Tres procesos que tenemos por aquí
¿Vale?
Entonces tenemos uno que es el de la GPU
Este nos olvidamos
Porque al final
Es el de la GPU
Y es el normal
Y luego
Digamos que tenemos
Los dos importantes
Que los dos importantes
Sería por un lado
El que es el principal
Que es el que estaría hecho con Note
Y el otro
Sería Chromium
O sea el navegador
Que sería este
El renderer
Y para que te des cuenta
Como podemos tener un montón de procesos
Una cosa que podríamos hacer
Para que lo veas clarísimo
Si yo puedo crear más de un proceso
¿Vale?
Mira
Vamos a cerrar esto
Y
Vale
Y ahora hacemos
En Pien Randev
Y esto
Me va a crear
Mira
Uno
Dos
Tres
Cuatro
Cinco ventanas
Ah no
Seis ventanas
Ya no sé ni cuántas veces
La había puesto
Entonces
Si ahora vamos al monitor de actividad
Podemos ver que tenemos
Uno
Dos
Tres
Cuatro
Cinco
Seis
Seis procesos
Un proceso para cada ventana
Y estos procesos son separados
Y ya veis que tampoco está chupando tanta memoria
¿No?
A ver
Vamos a ver cuánta memoria está chupando
20 megas
50
20 megas
Bueno también es verdad que no tiene nada
Que ya sería raro que se pusiera a chupar
¿Vale?
Pero el tema es
Que esto es
Tenéis que tener muy claro
Que hay dos
Dos procesos como mínimo
Uno
De note
Que digamos que está aquí
En este main
.js
Este sería el hilo
De note
¿Vale?
Y por otro lado tendríamos
Otro proceso que es el
Renderer
Que es el que ejecuta el navegador
Chrome
Y
Es un proceso
Separado
De hecho para comunicar estos procesos
Tenemos diferentes formas de hacerlo
Para que se puedan comunicar
Pero no podemos comunicarlos
Así como decir
Aquí algo
¿Vale?
Sino que hay que comunicarlos
De una forma
Son dos procesos separados
Es lo que quiero que os quede claro
Dos procesos separados
¿Vale?
Así que
Vale
Vamos a cerrar esto
Perfecto
Voy a hacerlo esto solo una vez
Y ya está
¿Por dónde podríamos seguir?
Ah bueno
Vamos a seguir un poco con la
Primero con la documentación
Ya que está ¿No?
Vamos a intentar seguir un poco la documentación
Vale
Esto ya os lo he enseñado
Ah
Una cosa que os quería enseñar
Que a veces es muy interesante
Es esto de aquí
Vamos a ver si esto
Sin permiso lo hace
No lo hace
Vale
¿Veis?
Que no da permiso
No tiene permisos
¿Ves?
O sea
Ah no
Es que he puesto load file
Perdón
Load URL
¿Vale?
Tatán
¿Qué os parece esto?
Con esto ya tendríamos un navegador
De hecho
De hecho esto que parece una chorrada
Esto que he hecho
Esto es una aplicación de escritorio
¿Vale?
Y como veis
Estamos cargando una página web
Esto parece una tontería ¿Verdad?
Esto parece una chorrada
Pero
Esto es lo que te puede permitir
Y de hecho hay un paquete
Que te lo hace
Que se llama
Nativifier
Creo
Imagínate
¿Ves?
Esto está hecho con Electron
Este Nativifier
O al menos antes estaba hecho con Electron
No sé si esto habrá cambiado
Pero esto lo que te permite
Es que tú haces Nativifier
Y le pasas la URL
Y te crea
Una aplicación de escritorio
De cualquier página web
De cualquier página web
Que te gusta Twitter
La página web de Twitter
Puedes utilizar Nativifier
Y poner la página web de Twitter
Y aquí podríamos haber puesto
La página web de Twitter
Como que podríamos haber puesto
Lo que queramos
Y mira
Tú puedes navegar perfectamente
Incluso obviamente
Lo que podríamos hacer
Es poner los botones
De antes
Después
Podríamos hacer lo que queramos
De hecho yo
Hace años
La última vez que toqué
Electron
Fue porque me hice
Un mini browser
Me hice un navegador pequeñito
Para que mientras trabajaba
Pudiera poner aquí
Youtube
Y todo este tipo de cosas
Lo siento
Es verdad
Lo hice
Pero bueno
Está bastante chulo
¿No es mejor hacer
Una proxy web app?
No
La verdad es que no
Porque eso te obliga
O sea
El distribuible es diferente
Tendrías que entrar
Con la página web
Y tal
Entonces
No tiene por qué
Porque esto lo que te permite
Es no depender del navegador
Porque está
Es como al revés
La proxy web app
Es una aplicación
Que necesita el navegador
Pero es que esto
Tiene el navegador ya puesto
Además para distribuirlo
Es totalmente diferente
O sea que
A ver
Además le puedes meter
Como ciertas cosas
¿Sabes?
Ciertos constraints
Que no podrías hacer
Con una proxy web app
Por ejemplo
El hecho de que
Se queda así de pequeño
Y no se puede hacer nada más
O por ejemplo
Que tenga aquí
Una barra de direcciones
Y que tú puedas navegar
Eso lo podríamos hacer
Poner ahí una barra de direcciones
¿Sabes?
Y que tú puedas ir cambiando
La página que va cargando
Eso lo podríamos hacer
Sin ningún tipo de problema
¿Por qué no abrir
Un navegador normal
Para ver Youtube?
Bueno
Lo que pasaba en su día
Es que en su día
Hace años
Cuando yo la última vez
Que toqué Electron
No estaba el pip
Que es el
Picture in picture
¿Vale?
Y entonces me ponía
Con Electron
Hice un Youtube pequeñito
Que lo podía poner aquí
Aquí debajo
En chiquitito
Pero es porque
No existía ni el picture in picture
Que hace tiempo
¿Vale?
Hace tiempo
Así que
Bueno
Estaba chulo
Ah mira
Dale al Youtube
No creo que me deje
Porque seguramente
Lo tengo un target blank
Claro ¿Ves?
Tengo un target blank
Y todavía me está llevando
A otra página
Claro
Hay que tener en cuenta
Que los target blank
O sea target blank
Te llevaría a otro sitio
Hay que tener cuidado
Pero bueno
Que aquí
Sí que podríamos tener
Una
Bueno una aplicación bonita
Se puede hacer cosas muy chulas
Bueno
Esto es solo para que lo veáis rápido
Para que veáis todas las cosas
Que podéis hacer
Que es muy interesante
Ahora
Vamos a hacer una cosa
¿Qué pasa?
Os voy a explicar una cosa
Que nos va a ayudar también
A que entendáis
Como es un poco
El ciclo de vida
De una aplicación
Porque como os he dicho
¿Veis?
Yo cuando levanto
Si yo levanto aquí
En P&RandEv
Y yo tengo esta
Que es una aplicación
En P&RandEv
Uy
Y yo tengo esta
Que es una aplicación
En P&RandEv
Calla
Calla
Y yo tengo esta
Vale
Ah
Ahora esto lo han arreglado
¿Vale?
Porque veis que se ha cerrado solo
Esto antes no era así
Porque en Mac
Cuando tú lo cierras todo
Cuando cierras todas las ventanas
Aún así
El proceso se quedaba
Se quedaba encendido
Pero ya veo que sí que lo han arreglado
Si no
Lo que se puede hacer
Es que cuando
Tú puedes escuchar el evento
De Windows
Mira aquí tienes un montón de eventos
¿Veis?
Cuando haces
App.on
Y aquí tenemos un montón de eventos
Window.on.close
Todo esto son eventos
Que puedes escuchar
Accesibilidad
Cuando se activa
Antes de quitarlo
Cuando te has ido
De la ventana
Cuando te has añadido
A la ventana
Hay un montón
De eventos
Uno de ellos
Es que puedes detectar
Cuando se han cerrado
Todas las ventanas
Y entonces puedes decir
Cuando se han cerrado
Todas las ventanas
Y aquí puedes hacer
Cosas como
Bueno
Podrías incluso
Crear una nueva ventana
Si fuese necesario
Pero bueno
No lo vas a hacer
Lo que puedes hacer es
Con el
Mira esto
Puedes mirar
La plataforma en la que estás
Y dependiendo de la plataforma
Si es Darwin
Darwin
Para el que no sepa
Es Macos
¿Vale?
O por ejemplo
Está Win32
Que es Windows
Obviamente
Darwin
Que es Macos
Y
¿Cuál era el otro?
Linux
Que es Linux
¿Vale?
Bueno
Eso me dice
GitHub Copilot
Porque de ese no me acuerdo
Así que podríamos hacer algo así
Asegurarnos que se cierra
En el caso de que se cierren
Todas las ventanas
¿Vale?
Entonces
Veo que por aquí
Esto ya está
Vamos a empezar a crear
A añadir algo de
JavaScript
¿Vale?
Para que veamos
Porque tenemos que darle
Alguno de funcionalidad
A esto ¿No?
Vamos a darle algo
De funcionalidad
Hombre
Señor Drax
Gracias por volver
Suscribirte
Con esos 15 meses
Doctor Metadona
Arikano
¿Qué tal?
Muchas gracias
Hombre
¿Por qué Darwin?
Hostia
Pues buena pregunta
Yo creo que era
Porque Darwin
Era el procesador
Creo que era
El procesador Darwin
¿No?
¿Vale?
¿Por qué?
Mira vamos a buscarlo aquí
¿Por qué Macos
Se llama Darwin?
Macos no es Darwin
Y Darwin no es Macos
La historia de Macos
Es de bla bla bla
Yo creo que Darwin
Era el nombre del procesador
Si no me equivoco
Si no me equivoco
¿Ves?
Ah es el core
En el que se había hecho
Antes Macos
Ah pues pensaba
Que era el procesador
Pero no
Parece que es
Es algo
Más
Del sistema operativo
Que no del procesador
Pensaba que el procesador
Antes se llamaba así
O era un nombre en clave
Y lo habían dejado así
Ay
Es compatible con React
Sin ningún problema
Lo que pasa es que
Luego lo veremos
Luego vamos a hacerlo rápidamente
Venga
Vamos a darle cañita
Que hay muchas cosas que hacer
Y no nos va a dar la vida
Voy a dejar
La documentación por aquí
Vale
¿Y esto qué es?
Ah el Natifier
Vale
A tomar por saco
Natifier
A ver
Vamos a poner aquí
El renderer
Y puedes hacer
Diferentes cosas
A la hora de cargar
Javascript
¿No?
O sea
Podrías cargar por un lado
Javascript
Que se precargue
Y esto lo podemos hacer aquí
En Web Preferences
Tú aquí lo que le puedes decir
Es que precargue
Esto es un script
Que se va a cargar
Antes de cualquier script
Antes de que se ejecute la página
Y esto puede estar interesante
Si quieres
Como pasarle
A cierta información
Esto sería una forma
¿Vale?
Y otra forma
Que es un poco más normal
Sería aquí
Ponerle
El script
De toda la vida
¿Vale?
Le vamos a llamar
Renderer.js
Y lo vamos a hacer así
Ah no me acuerdo
Si esto funcionaba así
O sea
Se podía hacer de otra forma
Pero lo vamos a probar
¿Vale?
Vamos a probar aquí
Hacer
El
Renderer
Que se llame
Renderer
Esto le puedes llamar
Como tú quieras
Pero en este caso
Es para que
Sepamos diferenciar rápidamente
¿Vale?
Así que vamos a poner aquí
Un botón
Clica aquí
¿Vale?
Esto
El span típico
Id
Count
Vamos a ponerle
Cero
Y
Const
Selector
Bueno
Selector
Document
Query
Selector
Del selector
¿Vale?
Y así vamos a poner
El count
El count
Que tenemos aquí
PPP
Const
Count
Const
Button
Y con el button
A TV Listener
Cuando hagamos un click
Vamos a poner
Button
Inner text
Este sea el count
El number del count
Count
Más
Más
Bueno
Count
Más uno
Count
Inner text
Tal
Bueno
No sé si esto funcionará
Así de una
Vamos a asegurarnos
Que funcione el script
Y luego veremos
Así que ejecuto aquí esto
MPM run dev
Y ahora os enseñaré
En cuanto veamos
Que esto
Hostia
Espérate
Que se me ha olvidado
Que aquí he puesto
Load url
Y no he vuelto a poner el file
Vale
Y ahora os enseñaré
Una cosa súper interesante
Porque esto como veis
Es una página web
Y no tiene mucha historia
Pero os voy a enseñar
A hacer los menús
Vale
Aquí tenemos ya
Vale
Vemos que esto no funciona
Pero lo bueno
Es que podemos salir aquí
Y ver por qué no funciona
No puede leer
La propiedad de null
De no sé qué
Vale
O sea que el javascript
Lo está cargando bien
Solo que yo
Algo no he hecho bien
¿Qué es lo que no he hecho bien?
Ajá
Lo que no he hecho bien
Obviamente
Es que el script
Lo he puesto
Antes
Del
Del
Del html
Y entonces no funciona
Así que vamos a poner esto por aquí
Vamos a recargar
Vale
Y sale un none
Porque este
Esto
Me la he liado
Pensaba que esto lo iba a transformar
A ver
Count
Más uno
Inner
HTML
No sé si pone el toString
Este
El innerText
Yo pensaba que esto era
Esto me lo iba a transformar
Pero
No es el count este
Ya estoy liando
El innerText este
Si lo transforma así
Esto por qué no me lo está transformando
Por qué no me transforma esto
Pero como lo
Como veis una cosa que está chulo
Ah concho
Que es que estoy
Estoy pillando el button
No el count
Anda que me decís algo
Anda que me decís algo
¿Vale?
Anda que me decís algo
Estoy pillando el texto
Bueno
Es solo para que veamos que funciona
Count
Y esto
InnerText
Pero si esto debería
Ahora
Ya está
Bueno
Ya está funcionando el JavaScript
Con toda la funcionalidad
Y todo esto
¿Vale?
Sí estaba pillando el botón
Ya está
Ya está
Arreglado
Arreglado
Bueno
Ahora con esto
Esto está bastante
Bastante chulo
Pero claro
Para que realmente
Esto parezca
A ver
Donde he dejado esto
Vale
Esto he dejado por aquí
Para que esto realmente
Parezca que es como
Que es nativo
Lo que deberíamos hacer
Es añadirle menús
Así que vamos a añadirle
Menús nativos
¿No?
Porque yo estoy aquí
Pero fíjate que aquí
Tengo el file
El edit
Que bueno
El edit no está mal
El view
Window
Pero le falta
Como
Yo que sé
Podríamos poner
Que veo
Que tiene un montón de cosas
Esto antes no salía
Este tipo de cosas
Antes no estaban
Antes por defecto
No salían
No sé si se podrán quitar
O lo que sea
Pero bueno
Vamos a añadirle
Alguno nuestro
¿Vale?
Para que veamos
Como se hace
Vamos a
Ponerlo por aquí
Vale
Vale
Vamos a
Ir
A ver
Que podemos añadir
Es que
Yo pensaba
Que no venía ninguno
Pero como veo que
Vienen un montón
No sé si esto
Se podrán quitar
Por defecto
Aquí
Menú
No
Pues nada
Pues vamos a añadirle
Los nuestros que queramos
Y ya está
Vale
Vamos a
Traernos aquí
El menu
Menú
Y con esto
Lo que vamos a hacer
Es añadirle
Lo que nos dé la gana
¿Vale?
Vamos a añadir aquí
Yo que sé
Tres menús
Que les diga
Que podemos
Ah mira
Voy a enseñarlos
Cómo podemos hacer
El tema de
Mostrar un aviso
Un aviso
Venga
Vamos a hacer eso
Así que
Nos vamos aquí
Al main
Al main
O podemos crear
Un archivo que sea
Menú
Menú.js
Me voy a traer
Esto que he pillado
Por aquí
Lo vamos a poner aquí
App
Menú
Require
Electron
Y ahora
Podemos mirar
Si es Windows
Si no Windows
Pero bueno
Da igual
Lo vamos a hacer así
Un poquito a saco
Module.export
Set main
Menu
Vamos a crear
La función
Con set main
Menu
Y al set main
Menu
En principio
No me vamos a pasar
Nada
Vamos a poner esto
Por aquí
Vale
Necesitamos primero
Un template
Un template
Es un array
Un array
De objetos
Donde en cada objeto
Le tenemos que decir
El label
Que queremos
Que muestre
Por ejemplo
Normalmente
Como podemos ver
En macos
El primero
Es el nombre
Del programa
O sea que
En lugar de file
Claro
Por eso aquí diríamos
Si es Windows
Entonces pon file
Que es lo típico
Si no
Pone el nombre
De no sé qué
Así que voy a poner aquí
El midu markdown
Aunque podríamos recuperar
El nombre desde la app
Podemos hacer
App.getname
Y podríamos recuperar
El nombre de la aplicación
Que tengas en el package.json
Pero en este caso
Lo vamos a poner a saco
¿Vale?
Midu markdown
Luego
Aparte del label
¿Qué es lo que tiene cada label?
Un submenú
Y en cada menú
Tenemos un array
De nuevo
De objetos
Así que vamos a poner un label
Y en realidad
Esta aplicación
Como podéis ver
Ya tiene
Lo cual me
Me sorprende
No sé si
No sé si es normal
Que ya tenga
Antiguamente
Al menos no tenía
Supongo que la he hecho
En una nueva versión
Pero voy a ver
Si puedo añadir
Yo lo que sea
No sé
Igual que es aquí
Un about
Pues vamos a poner aquí
Que sea
Yo que sé
Fuera de aquí
Y vamos a ver
Cómo podríamos salir
Ah
Me he acordado
Una cosa muy chula
Bueno
Vamos a hacer
Le añadimos un click
Y hacemos que cuando
Hagamos click aquí
Pues nada
Salga de aquí
¿Vale?
Y luego
Aparte de esto
Tiene una cosa
Que se llaman
Los aceleradores
Accelerator
Bueno no sé
Por qué nos sale
Pero yo creo
Que se llama
Accelerator
No sé si lo han cambiado
Vamos a buscar
Un momento
La documentación
A ver si esto no
A ver si ahora
Se hace de otra forma
Yo estoy aquí
Accelerator
Ah
Pues no
Ya no es
Accelerator
Pues nada
Pues espérate
A ver si
Es que ha cambiado
También la
No
El template está igual
Es un array de objetos
¿No?
Es en menú
Esto
Esto bien
Label
Submenú
Vale
Esto de que tengas
Los roles
Estos son los roles
Por defecto
Por ejemplo
Copiar
Undo
Y todo esto
Son roles por defecto
Que ya están
Mira este está en castellano
Entonces
Vamos a empezar
Porque me imagino
Que si no tiene ningún menú
Te está poniendo este por defecto
Pero vamos a poner el nuestro propio
A ver si de esta forma
Vemos el que nos interesa
Vamos a poner
Vamos a poner primero este
Y ya
Ah mira
Ves que tiene el rol
Quitar
Ah pues mira
Vamos a empezar primero con estos
Y luego
Y aquí pone app.name
Vamos a poner esto
Vamos a poner primero estos de roles
Y ahora
Intentamos el otro
¿Vale?
Hacemos esto
Set main menu
Esto
Ta ta ta
Vale
Build for a template
Pam pam pam
Vale
Lo que tenemos que hacer
Del menú que hemos importado aquí
Este menú
Lo que hacemos es
Construir desde el template
Que hemos creado
Que al final era
Este array de objetos
Y lo que hacemos es
Hacer que este sea
El menú de la aplicación
Pasándole el menú
Este es el main menu
Lo vamos a importar aquí
Ah espérate
Así
Require
Y lo vamos a traer
El main menu
Main
Menu
Punto js
Y lo ejecutamos aquí
Y ya está
Así que lo guardamos todo
Y como podéis ver
Mira
En el submenú
Lo vamos a ver ahora
Visualmente bastante mejor
¿Vale?
Pero en el submenú
Tenemos diferentes roles
Esto es porque hay
Algunas acciones
Que ya existen
Por ejemplo
La de about
El poner un separador
¿Veis aquí que hay un separador?
Este separador
Este separador
Lo vais a poder poner
En algún momento
¿Ves ese separador?
Entonces ese separador
Ya tú pones
Type separator
Y te lo pone
Servicios
Esto es una cosa nativa
¿Ves?
Servicios
Esto es una cosa nativa
Que ya tienen
Un montón de aplicaciones
Y entonces
Las puedes poner aquí
El high
Todo esto
Como podéis ver
Lo estamos como replicando
Lo podríamos comentar
Para ver si solo sale el about
Vamos a dejar también el kit
Que está interesante
Y vamos a
Quitar esto
Lo volvemos a ejecutar
¿Vale?
La aplicación funciona
Y fíjate que ha cambiado el menú
Veo que me sigue poniendo solo electron
Pero me ha quitado el resto
Yo creo que esto de que lo ponga electron
Me da la sensación
Me da la sensación
Porque aquí veo que tampoco
Template
Dice
Label
App name
Pero me da la sensación
Que esto es porque
En modo desarrollo
Sale electron
Pero que si hacemos
El ability
Y todo esto
Que saldrá el nombre
De la aplicación
¿Vale?
Lo digo para que no lo
Lo pongáis
No os asustéis
¿Vale?
Así que
Pero bueno
Está bien
Antes no ponían el menú
Ni por defecto
Pero bueno
Ahora al menos
Como podéis ver
Ya sí que tenemos el menú
Que nosotros hemos puesto
El about y tal
Si empezamos a poner esto
Bueno pues ya tendríamos
Los que serían más
Los típicos
Así que
Vamos a poner esto por aquí
Y aquí
Si le miramos
¿Ves?
Ya tenemos lo típico
Pero
Ahora es donde viene
Un poco la magia
Porque bueno
Podríamos poner el edit
Y todo esto
Pero lo interesante
Es que aquí
Podríamos poner
Lo que queramos
Por ejemplo
Vamos a poner
Themes
Y dentro de Themes
Pues ponemos
Lo que
Mira
Label light
Cuando hacemos click
Bueno
Esto
Vamos a poner por ahora
Select
Light
Theme
O
Bueno ahora veremos
Otra cosa que vamos a poder hacer
Con esto
¿Vale?
Label dark
Y cuando hacemos click
Pues console lock
Vale
Hacemos esto
Console lock
Y ya está
Ahora
Espérate
Me falta
Pues cerrar esto
Guardamos los cambios
Y ahora vais a ver
Que tenemos aquí
Perfectamente
El themes
¿Ves?
Y así es como se hacen los menús
O sea
No tiene mucha historia
¿Habéis visto?
Ahí es donde está
La magia
Ponéis themes
Claro
Lo malo es que ahora
Le voy a dar al light
Y como podéis ver
El console lock
Sal aquí
Pero no
No me está sirviendo
Ojo
Es súper importante
Como hemos dicho
Como hemos dicho
Lo que está pasando aquí
Es en Node
Por eso este console lock
Sale en Node
Y no sale
En el renderer
No sale aquí
Si yo abro las herramientas
De desarrollo
Aquí
Si soy capaz
Que no soy capaz ahora
¡Ah!
Ostras
Claro
No me abre las herramientas
De desarrollo
Porque he quitado
Los menús por defecto
Y por eso ya no me abre
Las herramientas de desarrollo
La madre que lo trajo
Hay alguna de las que haya
Por aquí por defecto
No sé si el view
Uno de estos
¿Veis?
Este view
Mira
Voy a volver a poner
El view menu
Este
Este view menu
Porque no me está abriendo
Las herramientas de desarrollo
Por culpa de eso
Vamos a abrirlas otra vez
Tenemos otra vez
La aplicación
¿Veis?
Ahora tengo el view
Y aquí sí
Tengo toggle
Developer tools
Entonces ahora sí que me sale
Developer tools
Pero lo que es importante
Es que ves esta consola
Si yo ejecuto el themes
Que tengo un console lock
Lo que vamos a ver
Es que sale aquí
Pero no sale aquí
O sea
Está en el proceso
De node
No está en el proceso
De las herramientas de desarrollo
De chrome
¿Vale?
Así que tenlo en cuenta
Ahora
Una cosita que puede ser interesante
Vamos a hacer algo interesante
No sé si lo pondrá
A ver
Vamos a ver un momento
La documentación
Porque igual lo pone
Y a lo mejor
Pues seguimos un momento
El tutorial
Agregar funciones
No
Bueno
Es el tema de los procesos
¿No?
Esto
Comunicación entre procesos
Vamos a aprovechar el theme
Este
Lo que hemos hecho del theme
Para que veamos un poco
Esto de la comunicación
Entre procesos
¿Vale?
Lo que se puede hacer
A la hora de hablar
Entre una y otra
Es con el ipc
Tú puedes enviar
Dicesle
Vale
He hecho esto
Y puedes escuchar ese evento
Y hacer algo con ese evento
Y viceversa
¿No?
O sea
Tú puedes tener
En el proceso principal de main
Puedes escuchar o enviar eventos
Y en el de renderer
Podrías hacer exactamente lo mismo
Lo propio
De esta forma
Puedes hacer que se comuniquen
Y que cambien
Puedes cambiar el título
Puedes cambiar los colores
Puedes hacer un montón de cosas
Así que
Lo que vamos a hacer en este caso
Es enviar un evento
Vamos a hacer
Por ejemplo
Vamos a enviar
Del main
Vamos a ver
Del main
Al renderer
¿Por qué?
Porque cada vez que yo cambio
Algo en el menú
Lo que quiero es que el main
Le diga al renderer
Oye
Ahora
Lo que necesitas hacer es
Lo que sea
¿No?
Así que
Mirad
Aquí cuando creamos el window
Vamos a hacer una cosa
Cuando creamos el window
Este set main menu
Lo vamos a poner aquí dentro
Y de esta forma
Cuando creamos el window
Le vamos a pasar al set main menu
El window
¿Vale?
Ahora
En el menú
Como parámetro
Va a recibir
El window
Vale
Voy a dejar esto por aquí
De referencia
Y vamos a ponernos por aquí
Ahora
Cuando cliquemos
En un theme
El light
O el dark
Lo que queremos
Es que cambie nuestra página
¿No?
Esto luego nos vendrá bien
Para nuestro markdown
Porque tendremos themes
Y queremos que cada uno
Haga una cosa
Vale
Pues en lugar de hacer
Un console log
Quiero que cambie visualmente
Mi página
Bueno
Pues le vamos a decir
Claro
La verdad es que
Window no es un nombre
Muy
Muy
Muy bueno
Porque va a aparecer
El objeto global window
¿Vale?
Entonces vamos a poner
Aquí main window
Main window
Main window
Main window
¿Vale?
Y aquí main window
Así que lo que hacemos es
Main window
Punto
Web contents
Punto
Send
Y le vamos a decir
Que el theme
Ha pasado a ser light
¿Vale?
Y lo mismo
Main window
Web contents
Y le enviamos aquí
Pero aquí le vamos a decir
Que ha pasado a dark
Esto que
Ves
Esto es como funciona
Básicamente
Visual Studio Code
O sea
Todo lo que estamos viendo aquí
Esto es como funciona
Visual Studio Code
Porque toda esta magia
Es como se cambian
Todas las configuraciones
Que veis en Visual Studio Code
¿Vale?
Entonces
Ahora
Lo que queremos
Es
A ver
Counter value
Web contents
Module
Estoy mirando la documentación
Que a ver si
No la lío parda
¿Vale?
El main window este
Esto ya lo tenemos
¿Vale?
Con el
Lo que tengo dudas
Tengo dudas
Si hace falta
Inicializar algo más
Pero creo que no
Creo que no
¿Vale?
¿Vale?
Ahora
Lo que
Hay una cosa
Que en la parte esta
Del renderer
Aquí
Claro
Para poder utilizar
El renderer
Creo
Que podríamos
Importar
Electrón
O sea
Creo que podemos hacer esto
Electrón
Y aquí
Tenemos diferentes módulos
Disponibles
Y uno
Vale
Vale
Aquí tenemos el ipc main
Y ipc renderer
Entonces
Aquí
En el ipc renderer
Este
Deberíamos ser capaces
De escuchar
Cuando
Uno de esos eventos
Ha venido
O sea
Podríamos decirle aquí
ipc renderer
On theme
Mira
Si ya me lo está diciendo
On theme
Y aquí tendríamos
Dos parámetros
El evento
Y el theme
El valor
Esto sería light
O sería dark
Aquí puedes enviar objetos
Puedes enviar lo que te dé la gana
Vale
Así que
Aquí
Deberíamos ser capaces
De ver el evento
Y el theme
Vamos a ver
Si con esto
Es suficiente
Porque lo que tengo dudas
Es si esto
Está expuesto
De esta forma
De hecho
Si esto funciona
Luego te enseñan
Una cosa que es bastante importante
También
A la hora de
Tener en cuenta
Que este require electron
Aunque ves que está
En la parte
Del cliente
Este require
Si que se puede hacer aquí
Porque es un poquito especial
Y lo que hace
Es que puedas
Utilizar los módulos
Que tienes en Electron
A día de hoy
Alguien se preguntará
¿Y por qué utilizas
Common GS
Y no estás utilizando
Otra cosa?
Pues es porque
Que yo sepa
A día de hoy
Electron todavía no funciona bien
Con Enmascript Modules
Así que tienes que utilizar
Requires
Tienes que utilizar
Common GS
¿Vale?
Así que
Vale
Vamos a ver si esto
Que hemos hecho funciona
Y si no funciona
Pues nada
Veremos por qué no funciona
Hasta aquí bien
Ok
Vamos a abrir aquí
Herramentas de desarrollo
Ah
Requires not defined
Me ha dejado
Planchado
Pues no
On update container
No se puede así
No se puede así
Vale
Esto es porque ahora
Se tienen que exponer
Los métodos que quieres utilizar
Lo cual me parece bien
Pero antes al menos
Se podía utilizar así
Vamos a hacerlo de otra forma
¿Vale?
No pasa nada
Nos vamos al
Nos vamos al main
Y en el main
Antes os he explicado
Que podías cargar
Como preloads
¿Vale?
Para inyectar
Aquí se podía hacer
El
¿Cómo era esto?
Tu tu tu
Será
¿Cómo era?
Freeload
¿Vale?
Y aquí se podía cargar
Como un archivo
Que se iba a cargar
Antes de la página
Que ibas a ver
¿No?
Lo bueno que
Al hacer esto
Vamos a utilizar
El dirneim y tal
Al hacer esto
Lo que puedes hacer
Es como exponer
Vamos a hacer
Path join
Dirneim
Puedes exponer
Métodos y tal
Que tengas en Node
Y eso es lo que vamos a hacer
¿Vale?
Así que ponemos
Este path aquí
Require del path
Y vamos a crear aquí
El preload este
.js
Use the top string
Concatenation
Ya está
¿Vale?
Preload
Preload
Path join
Dirneim
Preload
.js
Bueno esto no hace falta
La barra esta
¿Vale?
Entonces web preference
Y aquí en el preload
Lo que vamos a hacer
Es que
Le vamos a poner aquí
Const
Y vamos a crear un puente
Vamos a crear un puente
Para que los contextos
Los dos procesos
Se puedan
Se puedan pasar información
Básicamente le vamos a pasar información
Del main
A nuestra aplicación
¿Vale?
Así que le vamos a decir
Context bridge
Y el ipc renderer
Que es el que queríamos utilizar justamente
Y que no podíamos utilizar
Y ahora aquí
Hacemos el context bridge
Y me encanta este nombre
Expon
Al mundo principal
Expose
Expose
Y main word
¿Vale?
Y aquí tendríamos como
Este es el nombre
Que va a tener el objeto
Que queremos exponer
Hay gente que le llama
Electron
Hay gente que le llama
Electron api
Le puedes llamar api directamente
O midwipi
Lo que quieras
Voy a llamarle
Electron api
Pero ten en cuenta
Que este nombre
Se lo estamos dando nosotros
¿Vale?
Ahora cuando accedamos a él
Que tengas en cuenta
Que el nombre
Se lo estamos dando nosotros
No es que exista este objeto
Porque sí
Ahora lo veremos
Donde está utilizando
Y vamos a poner
On update theme
Aquí le vamos a pasar
El callback
Y esto va a ser un método
Que cuando se ejecute
Cuando se tenga
IPC renderer
On
Y aquí tendríamos
El update theme
¿Cómo le hemos llamado aquí?
En el menú
Theme
O sea
No sé si ponerle
Update theme
¿No?
Que tiene un poco más de sentido
Vamos a poner update theme
Para que se entienda más
Update theme
Y aquí
Cuando actualizamos
El theme
Ejecutamos el callback
¿Vale?
Así
Vale
Ahora este método
Lo vamos a poder utilizar
Sin problemas
En el
En el otro sitio
¿Vale?
Vamos a poder utilizarlo
En el renderer
Ahora sí
Porque lo vamos a tener
Como en un objeto
Que está en el window
En el electron api
Vámonos
Al renderer
¿Vale?
En lugar de utilizar
El IPC renderer este
Que ya habéis visto
Que no podíamos
Hacemos
Window
Punto
Electron
Api
De nuevo
Este nombre
Es el que le hemos dado
Nosotros
En este preload
Aquí
Lo bueno de este preload
Es que lo haces una vez
Y ya está
¿Vale?
No tienes que liarte mucho
Y ahora aquí
Sí que podemos acceder
Justamente
A
On update theme
Así que le damos aquí
On update theme
Y ya está
Aquí podemos ejecutar
La información que queramos
Tendríamos tanto el evento
Como el theme
Y esto
Hacemos aquí
Lo que íbamos a hacer aquí
Y esto
Si hemos hecho todo bien
Debería funcionar
Y ahora veremos
Además
Podríamos hacer el modo oscuro
Si funciona
Vamos a guardarlo todo
El preload
Lo tenemos por aquí
Este
Lo hemos guardado también
En pnrandef
Y ahora
Le echamos un vistazo
¿Vale?
Y os lo explico paso a paso
No os preocupéis
¿Vale?
Vamos a abrir la herramienta
Desarrollo
¿Vale?
¿Veis?
Ya lo tenemos aquí
Object light
Y ahora cuando yo voy a theme
Y le voy al dark
¿Vale?
Aquí tenemos el evento
Y el dark
O sea, tenemos tanto el objeto
Como el valor
Otra vez light
Dark
Y esto ya lo que nos permite
Es que estamos comunicando
El menú de arriba
Con lo que sería nuestra página
Y para que lo veamos
Más visual incluso
Para que
Veamos esto
Como funciona
Vamos a
Nos vamos a renderer
Y lo que hacemos
Vamos a poner aquí
Ah, porque
Ni siquiera hemos cargado
Unos estilos todavía
Que se pueden cargar estilos
Sin ningún problema
Link
Real estate sheet
Style.css
Margin 0
Padding 0
Min high
¿Vale?
Vamos a poner aquí
Un display grid
Place content
Center
Al menos para que se vea
Todo bonito
Y luego
Family
System UI
¿Cómo era esto del color?
Hay una forma
Fácil
De hacer un modo oscuro
Que es el color scheme
Este
No sé si
¿Lo habéis visto alguna vez?
Color scheme
Light dark
Color scheme
Vale
¿Ves?
Ahora está en modo oscuro
Porque yo lo tengo
En modo oscuro
¿Vale?
Yo lo tengo en modo oscuro
Y lo que podríamos hacer
Es que cambiase
Ahora todavía no va a cambiar
Pero al menos
Tenemos aquí la información
Lo que podríamos hacer
Es tener aquí
Los themes
O sea
Vamos a poner
Light dark
Y
Vamos a intentar cambiar esto
A saco
A ver si somos capaces
¿Vale?
Aquí vamos a poner
Bar
Scheme
¿Vale?
Esto es una custom property
Le hemos dicho que
Aceptamos
Tanto light como dark
Y va a utilizar
El que tenga en el sistema operativo
El color scheme
Le ponemos
Esta variable
Y lo que vamos a intentar
Es esta variable
La vamos a
A cambiar
¿Vale?
A ver
Vamos a poner
Change
Root
Custom property
A ver si me acuerdo
Este tipo no lo hago
JavaScript
Vale
Ah es document
Esto
Esto es lo que no me acordaba
Que es document document
Bueno vamos a
No me acordaba ya
Como era esto
Para el root
Se hace así
Document punto
Document element
Y esto lo que nos debería permitir
Es cambiar
Por ejemplo
Hacer un root
Punto style
Punto set property
Y le decimos
Cual es la custom property
Que queremos cambiar
Que es esta de aquí
Scheme
Scheme
Y le deberíamos pasar
El theme
No sé si esto funcionará
La verdad
A ver una cosa
Ah vale
Que tenemos un console.log
Del evento
Vale
Vamos a poner
Console.log
Solo del theme
Y vamos a cerrar esto
Lo abrimos otra vez
Ahora lo tenemos aquí así
Theme
Light
¿Qué os parece?
Pues ya tenemos
Un modo oscuro y claro
Que se cambia
En base
A
El menú
Que hay arriba
Y con esto
Pues a ver
A partir de aquí
El límite
Es tu imaginación
¿Por qué?
Porque
Hay un montón
De themes
Por ejemplo
Si piensas en
RunGS
RunGS
RunGS
RunGS
También utiliza
Electron
Esto utiliza
Electron
Aquí hay un montón
De herramientas
Y tal
Por ejemplo
Temas
¿Veis como muestra
Aquí los temas?
Y fíjate
Que tú le das a un tema
Y cambia el tema
Esto utiliza
Utiliza la misma
Exactamente
La misma técnica
Que os acabo de enseñar
La misma técnica
O sea
Ya os lo puedo asegurar
Que es exactamente
La misma técnica
Solo que me muestra
Un poco más bonito
La verdad que está
Bastante chulo
Como lo muestra
Pero es la misma técnica
Que hemos visto
Hace todo lo que he hecho
Es como lo hace
RunGS
Directamente
Entonces
Vamos a hacer un repaso
¿Vale?
Que me imagino
Que hay unas cuantas personas
Que están ahora mismo
Midu me he perdido
¿Qué ha hecho?
¿Qué ha hecho?
Bueno
Se me han ido 100 personas
Y todo
Se me han ido 100 personas
Pobres
Asustados
Pues es que no iba a ser fácil
¿Qué te esperaba?
Que esto
Es que estamos últimamente
Que lo queremos
Todo fácil
No hombre
No
No va a ser todo fácil
Cago en la leche
No, pero no pasa nada
Os lo explico
Lo vamos a revisar
¿Vale?
Y ahora os lo explico
Sí, sí
No, es que la gente
En cuanto ve algo complicado
Dice
Ya me voy de aquí
Mi trabajo aquí ha terminado
Yo solo quiero cosas fáciles
Bueno
No, que no
No me rayo
No me rayo
No me rayo
Para nada
Os lo explico
¿Vale?
Paso a paso
Que sé que ha habido
Un montón de cosas
Pero creo que está muy bien
Porque hemos hecho
Cosas muy chulas
En un momentito
Entonces
No os preocupéis
Los voy a explicar
Paso a paso
Primero
El punto de entrada
De nuestra aplicación
Es el main.js
¿Vale?
De nuestra aplicación
De escritorio
Lo que estamos haciendo aquí
Es importar diferentes módulos
Por ejemplo
Los de Electron
Para poder crear
Nuestra ventanita
La ventanita
De nuestra aplicación
La que tenemos aquí
Esta ventanita
La estamos creando
Gracias al browser window
De forma que le estamos diciendo
La resolución
Le estamos diciendo
Queremos una ventanita
De 800 por 600
Que como mínimo
Tenga esto
Y lo que estamos haciendo
Aquí en web preferences
Le estamos diciendo
Que tiene que precargar
Antes de que cargue
Justamente nuestra aplicación
Un javascript
Esto es útil
¿Por qué?
Porque
El main.js
Es el proceso
De node
Y en cambio
El renderer
Es el proceso
Del navegador
Y son dos procesos
Que son separados
Y vamos a necesitar
Que se comuniquen
De alguna forma
Para que puedan
Enviarse información
Porque node
Va a gestionar
Ciertas cosas nativas
Y el navegador
Va a recibir
Esa información
No hay forma
De mezclar
Ese código
Y necesitamos
Algún canal de comunicación
Ahora luego veremos
Cómo lo vamos a hacer
¿Vale?
Entonces
Para cuando creamos
Este window
Lo que decimos es
Vale
Este window
Lo que tiene que hacer
Es cargar el archivo
Index.html
Esto no tiene
Ningún tipo de magia
Ninguna historia
¿Por qué?
Porque este index.html
Es HTML
Puro y duro
Esto lo entiende
Todo el mundo
HTML
No tiene ninguna historia
Lo único
Que tiene un poquito especial
Que igual lo podría quitar
Para ver si funciona
Es el tema
Del content security policy
Esto al final
Son atributos
Que lo que nos van a permitir
Es que
La página actual
Tenga unas políticas
De contenido
Para
Indicarle
Qué scripts
Puede cargar
¿Por qué hacemos esto?
Porque puede haber
Ataques
Malintencionados
A nuestra aplicación
Intentando
Inyectar
Javascript
Y no queremos
Que eso ocurra
¿Vale?
Entonces lo que le estamos diciendo
Es que solo puede cargar
Javascript
Que está
En nuestro propio directorio
Si no alguien
Imagínate
Intentase
Inyectar algún tipo
De código
De una aplicación
De terceros
Aquí puede decir
CDN.com
Pues no queremos
Solo tiene que ser
Cosas nuestras
¿Vale?
¿Vale?
Sí
Lo chungo de electrón
Es hacerlo todo seguro
Por eso están
Tan separados
Los procesos
Sí, sí
Tiene un montón
De cositas
Y esta es una de ellas
¿Vale?
Para evitar
Que se carguen scripts
Que son de fuera
El HTML
No tiene mucha historia
Más allá
De que aquí
Estamos cargando
Un script
Que estamos
Haciendo con
Defer
Que es el
Renderer
Y este script
Es el que le va a dotar
Como de funcionalidad
A nuestra aplicación
Que nuestra aplicación
Ahora desclique aquí
Pero bueno
Luego más adelante
Lo que haremos
Es ir añadiendo cosas
De hecho
Vamos a intentar
Hacer un editor
De Markdown
Si nos da tiempo
Hoy lo haremos otro día
Donde tenemos
A la izquierda
El editor
Y a la derecha
Una preview
Y esto lo vamos a hacer
Como una aplicación
De escritorio
Que cualquier persona
Se pueda instalar
Y de código abierto
Y tal
Entonces
El Renderer
Ahora mismo
No tiene mucha historia
Tiene la funcionalidad
Esta del contador
Recuperar con el query selector
El elemento
Le vas haciendo click
Y tal
Pero
Aquí es donde está
Lo interesante
¿Por qué?
Porque tenemos en Windows
Un objeto especial
Llamado
Electron API
Que tiene un método
Que se llama
OnUpdateTheme
Y este método
No ha salido de la nada
Este método
En realidad
Lo hemos creado nosotros
¿Vale?
Este método
Lo hemos creado nosotros
Donde recibe
Un evento
Como primer parámetro
Y como segundo parámetro
El theme
¿Estos theme
¿Cuándo ocurre esto?
Esto ocurre
Porque justamente
Nuestra aplicación de Electron
Tiene un menú
Aquí arriba
Tiene un menú
¿Ves?
Electron
Themes
Este themes
Esto se lo he creado yo
Esto lo he hecho yo
Porque he querido
Ponerlo y ya está
Entonces tenemos
Light
Y tenemos Dark
Y fíjate que funciona
Ahí todo
O sea
Es una maravilla
Esto
Esto mismo
Que parece una tontería
Pero esto
El RunGS
Este editor de
Playground
Que tenemos
Es que
Hace exactamente
Lo mismo
Con esta parte
De aquí
También es una aplicación
De Electron
Y está utilizando
Exactamente lo mismo
¿Vale?
Pues
Lo que estamos haciendo aquí
Cuando detecta
Que estamos cambiando
El theme
Es
Pues
Cambiar un CSS
Una propiedad
Una custom property
Para hacer que sea
Oscuro
O no sea oscuro
¿Vale?
Entonces
¿Dónde aparece esta magia
Y cómo está pasando esto?
Como os he dicho
Hay dos procesos
El main
Que sería
El de Node.js
Y el renderer
Que sería
El de la aplicación
Del navegador
¿Vale?
Porque esto al final
Lo que vemos aquí
Esto es un Chrome
Así que
Main
Sería de Node
El renderer
Sería de Chrome
Sería la parte del cliente
Pues la magia
Está en que
En el main
Hemos creado
Aquí
Nuestro propio menú
El set main menu
Le hemos dicho
Que esta ventana
Tiene que tener
Su propio
O sea
El set main menu
Es a nivel de aplicación
Le estamos pasando la ventana
Le hemos dicho
Oye
Esta aplicación
Que tenemos aquí
Tiene que tener
Su propio menú
Lo voy a configurar
¿Vale?
Y hemos configurado
Justamente esto
¿Cómo lo hemos configurado?
Pues en el archivo menu
Hemos traído aquí
Hemos cargado
El módulo de menu
Desde Electron
Hemos creado un set main menu
Que le pasamos
El main window
Y ahora verás
Porque es importante
Y creamos el template
Este template
Le pasamos label
Que este midu markdown
Aquí
Puedes ver que pone Electron
Pero esto es porque
Es modo desarrollo
En modo producción
Saldría el nombre
Y todo lo que ves aquí
En realidad
Es esto de aquí
Eso que ves ahí
Es esto de aquí
De hecho
Para que lo vea mal fácil
Ponemos label
Edit
Ponemos submenu
Y ponemos aquí
Por ejemplo
Label
Hola
¿Vale?
Y ya está
Vamos a poner
Label hola
Ponemos aquí una coma
Esto lo volvemos a
Vamos a
Refrescarlo
En pionrandef
Y tenemos ahora
Nuestro nuevo menú
¿Vale?
En edit
Hola
No es el menú
Más útil del mundo
Pero ahí lo tenemos
Ahora
Dentro de themes
Tenemos también
Un submenú
¿Ves?
Que en themes
Tenemos los dos menús
Light y el dark
Lo que le puedes indicar
También es
Que cuando haga clic
Hagas alguna cosa
¿No?
Porque si no al final
Dices
Ostras
¿Cuál es el...
¿Qué es lo que tiene que hacer
Cuando le des clic?
Pues tú le dices
Vale
Lo que vamos a hacer
Cuando hagas clic en el theme
Es a la ventana principal
A esta ventanita de aquí
Le vamos a enviar
Un evento
Al contenido web
Le vamos a enviar un evento
Con el nombre
UpdateTheme
Y el valor
Light
Tú aquí
Le puedes pasar un objeto completo
¿Vale?
Le podrías pasar aquí
Theme
O value
Light
Color
Lo que sea
Le puedes pasar el objeto
Le puedes pasar lo que tú quieras
En este caso
Tenemos suficiente
Con que sea un string
Pero bueno
Puedes hacer lo que quieras
Un número
Un boleano
Lo que necesites
¿Vale?
Y finalmente
Tenemos el labelDAR
Que hace lo mismo
Solo que el valor
Que estamos pasando
Es diferente
Esto
El mainwindow.webcontents.send
Lo tenemos que escuchar
Este evento
Lo tenemos que escuchar
En algún sitio
¿No?
Porque si no
No sabemos
Cómo estamos
Comunicando
El proceso del main
Con el proceso
Del renderer
Pues lo estamos haciendo aquí
Desde el main
Estamos enviándole
Un evento al renderer
Para que sepa
Que hemos cambiado
El theme
Desde el menú
Porque si no
No sería capaz
De saberlo
Y para lograr
Esa comunicación
Que hemos visto
En el renderer
Que estamos haciendo aquí
Con este
Window.electronapi.onupdatetheme
Esta magia
Esta magia
Está en el archivo
Preload.js
Esto es un javascript
Que estamos cargando
Justo antes
De que se inicialice
Nuestra aplicación
Y es la que nos va a permitir
Exponer
Algunos métodos
Para poder tener acceso
Al ipc renderer
Este es el que va a escuchar
El evento
Del update theme
Y lo que estamos haciendo aquí
Es crear un objeto
Que le decimos
Vale, cuando actualices el theme
Ejecuta el callback
Que le estás pasando
Y este
Onupdatetheme
En el objeto
ElectronAPI
Es el que estamos accediendo
En window.electronapi.onupdatetheme
Y este
Es el callback
Que le estamos pasando
Aquí
Este es el callback
Que le estamos pasando
Y esa es la aplicación
Amigos
¿Se pueden pasar buffers?
Hostia
No lo sé
Pero me imagino que sí
No creo que haya ningún problema
No creo que haya ningún problema
¿Qué tal?
¿Tenéis más preguntas?
¿Hay alguna?
¿Qué opciones tiene Electron
De cara a impresión
De informes y tickets?
A ver
No hemos visto
Es que no hemos visto casi nada
Es que Electron
No te lo acabas
Electron
No nos lo acabamos
¿Por qué?
Vamos a ver un momento
Por encima
Algunas APIs que tiene
Y vais a ver
Que tiene APIs para todo
No sé si de imprimir tiene
Pero por ejemplo
Tiene el auto-updater
Para actualizar automáticamente
La aplicación
Clipboard
Para poder escribir
Y leer
Del clipboard
Bueno
Del portapapeles
Y además
No solo texto
Sino HTML
Imágenes
Cosas así
Bueno
Para mostrar un dialog
Que básicamente sería
Para mostrar la ventana nativa
Esto por ejemplo
Esto está chulísimo
Esto está
Mira
Esto lo vamos a hacer
Un momento
Porque esto es
Esto es chulísimo
Esto está muy chulo
Por ejemplo
Te vas al menú
Y vamos a poner
En este hola
Vamos a poner un clic
O abrir archivo
Es que
Cuando hagamos el editor
Cuando hagamos el editor
Que quiero hacer
Creo que esto se importa aquí
Cuando hagamos el editor
De Mardom
Que quiero hacer
Vamos a ver un montón
De estas cositas
Si no me equivoco
Además tiene
Extensions
Filters
Porque se le pueden pasar
Diferentes
Show open dialogue
Sync
No
Vamos a poner este
Vale
Show open dialogue
Este
Y
Properties
Open file
A ver si encuentro
Aquí
Options
Es que
Porque llama properties
Properties
Stream open file
Es que le puedes
Incluso poner
Las extensiones
Es que no encuentro
Ah
Filters
Es que es filters
Ah filters
File filters
Vale
Ahora lo he entendido
Filters
Es que
No me acuerdo ya
Ni como
Esto es un array
De objetos
Donde le pones
Ves
Le ponemos
El nombre
Markdown
Extensión SMD
Vale
Esto por un lado
Properties
Open file
Creo que
Debería ser
Open file
Porque open directory
Creo que no es necesario
Y luego le podríamos decir
El título
Por ejemplo
Selecciona
Tu archivo
Markdown
Vale
Y también
Le podemos poner aquí
El default path
Que en este caso
Creo que podemos poner
El TMP
Por poner uno
Vale
Es que
Si pongo el downloads
Puede ser un
Un locurón
A ver voy a poner desktop
A ver si cuela esto
A ver si cuela
Y button label
Nada
Esto es opcional
Creo que si esto
No ha ido mal
Si esto no ha ido mal
Lo vamos a probar
Un momento
Si esto no ha ido mal
Si no he hecho nada raro
Vale
Y ahora me abre aquí
La aplicación
Y me voy aquí
Al menú
Uy
Hola
Ahora
Abrir archivo
Esto es
Esto es brutal
Esto es brutal
O sea
Aquí podéis ver
Como me ha abierto
Como me ha abierto
El selector
Veis que están
Como desactivados
Esto es porque
Como he filtrado
Solo los markdowns
Me tendría que ir
Por ejemplo
A ver aquí
Mira veis
Talleresbelt
.md
O sea
Solo ha detectado
No puedo seleccionar uno
Que no sea .md
Le das a abrir
Y obviamente
Ahora no va a pasar nada
Pero esto
Te devuelve
Una promesa
Y puedes tener
El contenido del archivo
Y ponerlo en el editor
Es brutal
Y cuánto he tardado
En hacer esto
No he tardado nada
O sea
He tardado cero
Dialog.show
OpenDialog
Y ya está
Se podría utilizar
El file system access
De la API del navegador
También se podría hacer
Esto era bastante interesante
Justamente antes
Y ahora esta parte
La puedes hacer también
Desde la parte
Más
De la web
¿Sabes?
Pero aún así
Está bastante bien
Está bastante bien
Para el director de 6 horas
Está guapo
Sí
Puedes hacer drag and drop
Sin ningún problema también
Podrías hacer también
El drag and drop
Sin ningún tipo de problema
2.3 minutos
Es que está brutal
Es que tiene este tipo de cosas
Que de forma súper fácil
Claro
Con el file system access
Del navegador
El problema
Es que creo que
No puedes llegar
A poner tantos filtros
O sea
Los filtros creo que sí
Pero todas las opciones
Que hay aquí
Yo creo que no
Por ejemplo
El hecho de cambiarle
El título
A la ventana
El cambiarle
El botón
El nombre del botón
Creo que no se pueden
Hacer tantas cosas
Pero bueno
Que igualmente
Bueno aquí veis
O sea
Es que una vez
Que tenéis la consola aquí
Vamos a ponerlo
Un momento
Pam pam pam
Ponéis aquí el den
En un momentito
Vamos aquí
Themes
Edit
Abrir archivo
Taller es belt
Abrir
Y mira
Users
Mediodef
Y ya tienes esto
Y esto
Tú lo que podrías hacer
Es un read file
Con el file system
De node
Y finísimo
Y finísimo
El vídeo
De los truquitos visual
Lo mejor de la historia
Que grande
Que es esto
Mark text
Ah mira
Gracias
Lo que cambia
Ya
Pues
Ya
L unions
Arh họpe
Solo
aden