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

You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

0 Días
8 Hrs
17 Min
20 Seg
Curso de Electron: Apps de escritorio en Windows y Mac

Curso de Electron: Apps de escritorio en Windows y Mac

platzerito18092018 platzerito18092018

platzerito18092018 platzerito18092018

Usuario y contraseña

32/52
Resources

In this video we learn how to save our username and password to be able to log in with cloud app.

Inside our form we have 2 text fields, one for password and one for email inside this preferences-frontend.js file we have to import the electron settings so that in case the information is valid we can store the information provided.

Finally we have to make sure to validate the information of the form, encrypt the data provided by the user so that they travel securely and with that finish the user and password entry form.

To perform the encryption we must import Node's "crypto" module and use the instruction

const cipher = crypto.createCipher('aes192', 'Platzi')
And we create the variable where we will store the encrypted content:

let encrypted = cipher.update()

Contributions 9

Questions 1

Sort by:

Want to see more contributions, questions and answers from the community?

crypto esta desactualizada, tendran que usar https://www.npmjs.com/package/crypto-js

o pueden crear un archivo de utilerias con esto que encontre…

he implementarlo asi en el archivo de preferencias…

En 2020, para setear los datos:

// Obtiene usuario y contraseña
const credential = {
  user: document.getElementById('cloudup-user').value,
  password: document.getElementById('cloudup-password').value,
};

// Asigna a settings
settings.set('cloudup', credential);

Para obtener los datos hay que hacerlo en una función asincrona.

async function initForm() {
  if (settings.has('cloudup')) {
    // Obtiene credencial
    const credential = await settings.get('cloudup');

    // Asigna credenciales en formulario
    document.getElementById('cloudup-user').value = credential.user;
    document.getElementById('cloudup-password').value = credential.password;
  }
}
<code>

Si no quieren colocar document.getElement… para seleccionar el valor de los inputs de CloudUp pueden usar el API nativa de FormData de esta forma:

  1. Colocar el atributo name a sus inputs.

  2. Traer los datos de la instancia de FormData así:

const $form = document.getElementById("form");

  $form.addEventListener("submit", function (event) {
    event.preventDefault();
    const formData = new FormData(this),
     { user, password } = {
      user: formData.get("email"),
      password: formData.get("password"),
    };

      localStorage.setItem("cloudUpInformation", JSON.stringify({ user,
        password }));

    showDialog({
      type: "info",
      message: "Guardado con éxito",
      title: "Pics",
    });
    closeWindow();
  });
}

Que diferencia hay entre usar document.getElementById(’…’).innerHTML vs document.getElementById(’…’).value ??

En uno de los videos anteriores, para editar el footer, uso innerHTML.

//guardar en settings
const encypted = crypto.AES.encrypt(document.getElementById(‘cloudup-passwd’).value, ‘Pruebas’).toString()
await settings.set(‘cloudup’, {
user: document.getElementById(‘cloudup-user’).value,
passwd: encypted
})

//recuperar
await settings.has(‘cloudup.user’) && (document.getElementById(‘cloudup-user’).value = await settings.get(‘cloudup.user’))

if (await settings.has(‘cloudup.passwd’)) {
const bytes = crypto.AES.decrypt(await settings.get(‘cloudup.passwd’), ‘Pruebas’)
const decypted = bytes.toString(crypto.enc.Utf8)
document.getElementById(‘cloudup-passwd’).value = decypted
}

Encriptación

como crypto.createCipher y crypto.createDecipher estan depricated. lo hice asi:

import { remote, ipcRenderer } from 'electron'
import settings from 'electron-settings'
import crypto from 'crypto'

const password = 'Platzipics'
const key = crypto.scryptSync(password, 'salt', 24)

window.addEventListener('load', () => {
  cancelButton()
  saveButton()

  if (settings.has('cloudup.user')) {
    document.getElementById('cloudup-user').value = settings.get('cloudup.user')

  }
  if (settings.has('cloudup.passwd')) {
    const iv = Buffer.alloc(16, 0);
    const decipher = crypto.createDecipheriv('aes-192-cbc', key, iv)
    let decrypted = decipher.update(settings.get('cloudup.passwd'), 'hex', 'utf8')
    decrypted += decipher.final('utf8')
    document.getElementById('cloudup-passwd').value = decrypted
  }
})

function cancelButton() {
  const cancelButton = document.getElementById('cancel-button')

  cancelButton.addEventListener('click', () => {
    const prefsWindow = remote.getCurrentWindow()
    prefsWindow.close()
  })
}

function saveButton() {
  const saveButton = document.getElementById('save-button')
  const prefsForm = document.getElementById('preferences-form')

  saveButton.addEventListener('click', () => {
    if (prefsForm.reportValidity()) {
      console.log(document.getElementById('cloudup-passwd').value)
      const iv = Buffer.alloc(16, 0);
      const cipher = crypto.createCipheriv('aes-192-cbc', key, iv)
      let encrypted = cipher.update(document.getElementById('cloudup-passwd').value)
      encrypted += cipher.final('hex')

      settings.set('cloudup.user', document.getElementById('cloudup-user').value)
      settings.set('cloudup.passwd', encrypted)
      const prefsWindow = remote.getCurrentWindow()
      prefsWindow.close()
    } else {
      ipcRenderer.send('show-dialog', {
        type: 'error',
        title: 'Platzi Picts',
        message: 'Please fill all form.'
      })
    }
  })
}

ps : el codígo lo tome de este link