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

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de Electron: Apps de escritorio en Windows y Mac

Curso de Electron: Apps de escritorio en Windows y Mac

platzerito18092018 platzerito18092018

platzerito18092018 platzerito18092018

Usuario y contrase帽a

32/52
Recursos

En este video aprendemos a guardar nuestro usuario y password para poder iniciar sesi贸n con cloud app.

Dentro de nuestro formulario tenemos 2 campos de texto, uno de password y otro de email dentro de este archivo de preferences-frontend.js tenemos que importar los settings de electron para que en caso de que la informaci贸n sea v谩lida podamos almacenar la informaci贸n proporcionada.

Por 煤ltimo tenemos que asegurarnos de validar la informaci贸n del formulario, encriptar los datos proporcionados por el usuario para que viajen de forma segura y con eso terminar el formulario de ingreso de usuario y contrase帽a.

Para llevar a cabo la encriptaci贸n debemos importar el m贸dulo 鈥渃rypto鈥 de Node y utilizamos la instrucci贸n

const cipher = crypto.createCipher(麓aes192麓, 麓Platzi麓)
Y creamos la variable en donde guardaremos el contenido cifrado:

let encrypted = cipher.update()

Aportes 9

Preguntas 1

Ordenar por:

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

o inicia sesi贸n.

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(鈥榗loudup-passwd鈥).value, 鈥楶ruebas鈥).toString()
await settings.set(鈥榗loudup鈥, {
user: document.getElementById(鈥榗loudup-user鈥).value,
passwd: encypted
})

//recuperar
await settings.has(鈥榗loudup.user鈥) && (document.getElementById(鈥榗loudup-user鈥).value = await settings.get(鈥榗loudup.user鈥))

if (await settings.has(鈥榗loudup.passwd鈥)) {
const bytes = crypto.AES.decrypt(await settings.get(鈥榗loudup.passwd鈥), 鈥楶ruebas鈥)
const decypted = bytes.toString(crypto.enc.Utf8)
document.getElementById(鈥榗loudup-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