Electron JS y React JS: Creando un Spotify

Desarrolla una App de Escritorio como Spotify usando React JS, Electron JS, Firebase y SASS

4.90 (314 reviews)
Udemy
platform
Español
language
Web Development
category
2,051
students
12.5 hours
content
Sep 2023
last update
$64.99
regular price

What you will learn

¡La Biblioteca creada por Facebook! REACT JS

El Framework Electron JS para crear Apps de Escritorio

Juntaremos React JS con Electron JS

Aprende a usar Firesbase, Firestore y Storage

Añadiremos SASS al proyecto

Sistema de Login y Registro

Sistema de seguridad para verificar cuenta y recuperar cuentas

Sistema de permisos y roles

Enrutamiento con React Router Dom

Crearemos un reproductor de música personalizado

Subiremos música al servidor usando Drag & Drop

Subiremos imágenes al servidor usando Drag & Drop

Enlazaremos Artistas con Álbumes y Canciones

Configuraremos la app para poder compilar

Crearemos el .dmg para instalar en Sistemas Operativos MacOS

Crearemos el .exe para poder instalar en Sistema Operativos Windows

Description

En este curso vas a aprender a crear una aplicación de Escritorio tipo Spotify donde podremos subir Artistas, Álbumes y Canciones, después podremos reproducir cualquier canción, te tengamos subida a la aplicación y podremos controlar el estado de la reproducción y el volumen, directamente desde nuestra app.

Aprenderás a crear tu propio reproductor de música controlado con un Context y un Hooks personalizado creado desde cero.

Crearemos nuestra aplicación desde cero conectando React JS, Electron JS y Firebase.

Cuando tengamos nuestra aplicación terminara aprenderemos a crear el .DMG para MacOS y el .EXE para Windows.

Este curso tiene como objetivo enseñarte a desarrollar cualquier tipo de aplicación de escritorio con React y Electron desde cero.


Estructura del curso

  • ¡La Biblioteca creada por Facebook! REACT JS

  • El Framework Electron JS para crear Apps de Escritorio

  • Juntaremos React JS con Electron JS

  • Aprende a usar Firesbase, Firestore y Storage

  • Añadiremos SASS al proyecto

  • Sistema de Login y Registro

  • Sistema de seguridad para verificar cuenta y recuperar cuentas

  • Sistema de permisos y roles

  • Enrutamiento con React Router Dom

  • Crearemos un reproductor de música personalizado

  • Subiremos música al servidor usando Drag & Drop

  • Subiremos imágenes al servidor usando Drag & Drop

  • Enlazaremos Artistas con Álbumes y Canciones

  • Configuraremos la app para poder compilar

  • Crearemos el .dmg para instalar en Sistemas Operativos MacOS

  • Crearemos el .exe para poder instalar en Sistema Operativos Windows

Content

Herramientas y entorno de desarrollo

Instalación del Navegador
Instalando React Developer Tools en Google Chrome
Seleccionando el Editor de Código
Instalando Extensiones en Visual Studio Code
Instalando Node JS
Instalando YARN
Instalando Electron JS

Conceptos básicos

¿Qué vamos hacer en esta sección?
Introducción a JSX
Conceptos básicos de React JS
Creando nuestra primera app en React JS
Estructura de React JS
Nuestro primer Componente en React JS
¿Que son los Props de React?
Pasando props básicos entre componentes
Pasando variables y objetos entre componentes por los props
Pasando funciones entre componente por los props
El uso de la Asignación por Destructuring
Props por defecto
Template Strings
Hook de estado - useState
Hook de efecto - useEffect

Creando y configurando la App

Creando nuestra App de React JS
Añadiendo Electron JS a nuestra App en React JS
Solucionar Warning Content-Security-Policy
Añadiendo proyecto de Firebase a nuestra App
Añadiendo React Developer Tool
Creando un proyecto nuevo en Firebase
Añadiendo fichero SASS al nuestra app
Creando sistema de variables con SASS
Instalando React Router Dom para crear sistema de rutas
Instalando Semantic UI React

Sistema de Login y Registro de usuarios

Control de usuarios logeado o no logeados
1/2 - Página para seleccionar Login o Registro de usuario
2/2 - Página para seleccionar Login o Registro de usuario
Añadiendo el los botones de Login y Registro
1/2 - Creando el formulario de Registro de usuarios
2/2 - Creando el formulario de Registro de usuarios
Guardando los valores del formulario en un estado
Funcionalidad para mostrar o ocultar la contraseña
Validando formulario de Registro de Usuarios
Registrado usuario en Firebase
Creando Toast para notificar al usuario
Actualizando el nombre del usuario al darse de alta
Sistema de verificación de cuenta por email
Creando el formulario de Login
Funcionalidad para mostrar o ocultar la contraseña
Guardando datos del formulario de login en un estado
Validando formulario de login
1/2 - Realizando login y avisando si el usuario no tiene la cuenta verificada
2/2 - Realizando login y avisando si el usuario no tiene la cuenta verificada
Añadir Loading al botón de Iniciar sesión

Panel usuario logeado

Creando el Layout para usuario logeados
Creando sistemas de rutas con React Router Dom

Menu Lateral

Creando la estructura del menu lateral
Añadiendo Links al menu
Sistema para mostrar el menu activo en todo momento
Sistema de permisos para mostrar los botones de añadir Canción y Artista
Componente BasicModal
Sistema de modal para añadir artistas y canciones

TopBar de Usuario

Estructura de la barra superior
Desactivar menú activo al entrar en la cuenta del usuario
Funcionalidad para ir atras
Funcionalidad para cerrar sesión

Página de configuración de usuario

Creando el componente Settings
Estructura del cambio de avatar
Logica para subir el avatar
Subiendo Avatar a Firebase y actualizando usuario
Actualizando avatar del TopBar al subir un nuevo avatar
Estructura para actualizar el nombre del usuario
Abriendo un modal para actualizar el nombre del usuario
Creando el formulario para actualizar el nombre del usuario
Lógica para actualizar el nombre del usuario en Firebase
Interface para actualizar el email del usuario
Creando formulario para cambiar email y abriéndolo en el modal
Mostrando y ocultando contraseña con el icono
Guardando el email y la password en un estado
Reautenticando usuario para poder cambiar el email
Función para controlar los errores de Firebase
Actualizando email firebase y seguridad antirrobo de cuentas
Interface para actualizar la contraseña del usuario
Creando formulario para cambiar la contraseña y abriéndolo en el modal
Funcionalidad para mostrar y ocultar todas las contraseñas
Guardando la información del formulario en un estado
Validando formulario antes de cambiar la contraseña
Reautenticando usuario para poder cambiar la contraseña
Actualizando contraseña en Firebase

Sistema de Artistas

Creando formulario para crear un nuevo artista
Habilitando la subida de imágenes para el artista
Mostrando la imagen subida en el banner y en el avatar
Guardando los datos del formulario en un estado
Validando formulario
Subiendo la imagen del artista al Storage de Firebase
Subiendo los datos de artista a Firebase
Añadiendo banner principal en la home
Obteniendo todos los artistas de Firebase
Creando un slider con React Slick
Pintando los artistas dentro del slider
Añadiendo el evento de click a cada artista para ir a su página
Obteniendo la información del artista seleccionado
1/2 - Pintando el banner con la información del artista
2/2 - Pintando el banner con la información del artista
Creando la página de artistas
Obteniendo todos los artistas de Firebase
Obteniendo las imágenes de todos los artistas
Mostrando todos los artistas en la aplicación

Sistema de Álbumes

Formulario para añadir nuevo Álbum
Añadiendo useDropzone para el avatar el album
Añadiendo Artistas disponibles al Dropdown
Guardando toda la información del formulario en un estado
Validando formulario
Subiendo imagen del álbum al Storage
Subiendo álbum a Firestore
Obteniendo todos los álbumes de Firebase en la home
Pintando el slider de álbumes
Creando la página de Álbumes y añadiéndola al menú lateral
Obteniendo los datos de todos los álbumes
Creando el Grid de álbumes
Obteniendo todas las imágenes de los álbumes
Pintando el listado de álbumes
Creando la página de Álbum y añadiendola a las rutas
Obteniendo toda la información el álbum seleccionado
Obteniendo la URL de la imagen del álbum
Obteniendo la información del artista del álbum
Renderizando todos los datos en la página
Obteniendo Albumes del artista en su perfil
Pintando todos los álbumes del artista

Reproductor de música

Creando el componente Player e instalando react-player
Creando la estructura del player
Mostrando la canción que se esta reproduciendo
Controles de música y linea de tiempo
Añadiendo el sistema de volumen
Añadiendo React Player
Pruebas sobre el Player

Sistema de Canciones

Creando el componente AddSongForm para subir música
Estructura del formulario
Obteniendo todos los álbumes y usandolos en el Dropdown
Añadiendo una zona para subir la música
Guardando toda la información del formulario en un estado
Validando formulario
Subiendo canción al Storage de Firebase
Subiendo todos los datos a firestore
Obteniendo 10 canciones subidas a firebase en al home
Componente para renderizar un slider de canciones
Creando el slider de canciones
Obteniendo la imagen del Álbum al que pertenece la canción
Estructura para mostrar todas las canciones
Añadiendo la funcionalidad de reproducción canción
Obteniendo todas las canciones de un artista
Pintando un slider con todas las canciones obtenidas
Obteniendo todas las canciones de un álbum
Creando el componente ListSongs
Creando la estructura de la lista de canciones
Renderizando todas las canciones obtenidas
Añadiendo la funcionalidad de reproducción de canciones a la lista

Configuración de Electron

Configurando el Ancho y el Alto
Bloquear o no bloquear el resizable de la ventana
App Modo Kiosko
Cambiando titulo de la app
Añadiendo botones de Maximizar, Minimizar y Cerrar la interfaz de nuestra app
Cambiar icono

Compilando nuestra app

Configurando nuestra App para poder compilar
Creando el .dmg para MacOs
Creando el .exe para Windows

Despedida

Repositorio de la aplicación
Clase Extra

Screenshots

Electron JS y React JS: Creando un Spotify - Screenshot_01Electron JS y React JS: Creando un Spotify - Screenshot_02Electron JS y React JS: Creando un Spotify - Screenshot_03Electron JS y React JS: Creando un Spotify - Screenshot_04

Reviews

Julio
September 25, 2023
Excelente curso sobre como crear una aplicación de alto nivel en React desde cero. Sin embargo, me ha faltado más contenido relacionado con ElectronJS. Podría decirse que el 95% del curso ha sido React y solo un 5% ElectronJS. Al margen de este importante detalle, he echado de menos los assets que se usan en el proyecto, tales como imágenes y banners. Por otro lado, el hook de useContext ha sido poco explicado a nivel conceptual, aunque he podido entender su aplicación dentro del contexto del proyecto. Debo añadir que el curso me ha servido para consolidar mis conocimientos en React, así que ha sido tiempo bien aprovechado. Sin embargo, voy a tener que invertir más tiempo aprendiendo la API de ElectronJS por mi cuenta o con otro curso.
Brian
May 6, 2023
Es el segundo curso que hago con el profesor, me gusta mucho la forma que tiene de explicar, se entiende muy bien. muchas gracias por el contenido!
Enrique
March 25, 2023
Yo estoy iniciendome en React .js y este curso me esta dando bases y una introduccion nivel intermedio para esta linda herramienta, falto profundisar un poco mas en conceptios de hooks.
Victor
November 9, 2022
Bastante bueno el curso excelente docente. Pero a recomendacion si pudiera ir mas despacio y expresar para que sirve cada linea de codigo mientras se va creando esto seria bien... es una simple recomendacion. Muchas gracias. Victor Rodriguez Republica Dominicana.
Javier
August 24, 2022
De momento muy contento, el profesor lo explica todo muy bien, detenidamente y sin dar lugar a dudas o dando por hecho cosas.
Alejandro
August 9, 2022
faltan algunos recursos que comenta que están en los videos, pero no están. En general me gusta que en cada sección se va al grano y no redunda enla teoría.
Carlos
June 16, 2022
En general está muy completo el curso, así que merece un 5/5. Si bien, hay alguno que otro detalle que no está actualizado, en realidad es fácil de arreglarlo si te vas a la documentación de las librerías.
Francisco
May 29, 2022
Es el curso con menos actualización que he visto, react y electron están en constante actualizaciones, no puedes hacer un curso y dejarlo abandonado porque en un año las librerías dejan de funcionar. He conseguido hacer que funcione el proyecto actualizando todas las librerías, pero he perdido 2 días para nada. No pagues por este curso si no sabes react o sabes cosas de electron ya que no puedes hacer la migración de las librerías ya que no lo conseguirás. Hay errores en librerías en la última versión que están hasta obsoletas del css. Para mí el peor curso sinceramente.
Luis
May 4, 2022
¡Ha sido un excelente curso, aprendí muchas cosas! El maestro enseña a pensar y a entender cada una de las partes. De misma manera, ayuda de manera espectacular. Espero pronto tomar más cursos similares del mismo maestro.
Jose
April 23, 2022
Una cosa es que Udemy te pague lo que te pague que no es cosa de los usuarios de esta plataforma y otra cosa es que nos hagas perder el tiempo, no sé si por dejadez o por ignorancia, pero si empiezas un hilo por lo menos se agradecería que lo terminases, sino mejor que no contestes, nos pasamos a otro tema y listo, pero no hagas perder el tiempo a los usuarios.
Sebastian
December 26, 2021
Muy buen curso. La verdad que hice varios y este es uno de los mejores. Saque muchas técnicas e ideas para el trabajo. Me costo un poco con los cambios que hubieron en Firebase pero eso es parte de ser programador. Muy bueno con las explicaciones y la velocidad al hablar. Para nada aburrido.
Luis
November 17, 2021
Muy buena manera de explicar, usa bastantes librerias que a la larga pueden ser muy utiles. PERO lamentablemente esta muy desactualizado. Entre ellos Rutas, firebase, incluso links de recursos estan rotos. Para alguien que inicia en React eso es un gran problema.
Mario
October 21, 2021
Ha sido buena elección, para repasar React sobre todo, quería aprender más acerca del mundo de electron, pero sólo se ve 20 minutos de esta tecnología, así que no lo recomiendo para aquellos que ya conozcan React y quieran toquetear un poco más de electron. Sí lo recomiendo para aquellos que tengan un conocimiento básico de React y quieran aprender a desarrollar una app con Firebase. Gracias Agustín por el curso!
Fod
September 25, 2021
Me gusta mucho su forma de explicar y el largo preciso de los video. Como recomendación, me gustaría que no ocupara tanto la muletilla 'vale', ya a que muchos de nosotros nos suena extraño.
Carlos
September 14, 2021
sin duda uno de los proyectos que te gustaría incluir en tu portafolio. Te sorprenderá la facilidad con la que puedes integrar electron con react y poder desarrollar aplicaciones de escritorio.

Coupons

DateDiscountStatus
9/1/202050% OFF
expired
10/16/202050% OFF
expired
1/5/202150% OFF
expired
6/15/202150% OFF
expired

Charts

Price

Electron JS y React JS: Creando un Spotify - Price chart

Rating

Electron JS y React JS: Creando un Spotify - Ratings chart

Enrollment distribution

Electron JS y React JS: Creando un Spotify - Distribution chart
2799754
udemy ID
2/6/2020
course created date
3/20/2020
course indexed date
Bot
course submited by