Electron JS y React JS: Creando un Spotify
Desarrolla una App de Escritorio como Spotify usando React JS, Electron JS, Firebase y SASS
4,83(3 valoraciones)
Creado por Agustin Navarro Galdon
Última actualizacion: 08/2022
Comenzar ahoraContenido del curso
Introducción2 clases
Resultado final de la app
Repositorio de la app
Herramientas y entorno de desarrollo6 clases
Instalación del Navegador
Seleccionando el Editor de Código
Instalando Extensiones en Visual Studio Code
Instalando Node JS
Instalando YARN
Instalando Electron JS
Conceptos básicos15 clases
¿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 App8 clases
Creando la app de React JS
Añadiendo Electron JS a nuestra App en React JS
Solucionando BROWSER no se reconoce
Abriendo inspeccionar
Solucionar Warning Content-Security-Policy
Añadiendo SASS al proyecto
Sistema de variables de SASS
Instalando Semantic UI React
Firebase2 clases
Creando un proyecto en firebase
Añadiendo firebase a nuestra app
Sistema de navegación4 clases
Zona para usuarios no logeado y logeados
Paginas de la zona logeada
Navegación de usuario logeado
Navegación para usuario no logeados
Sistema de registró y login13 clases
Assets de la app
Contenedor del Auth
Opciones de registro y login
Creando el formulario de registro
Estilos globales para errores en inputs
Estilos globales para el botón primary de un formulario
Controlando formulario con Formik
Validando formulario con Yup
Registrando usuario
Botón para cerrar sesión
Formulario de login
Controlando y validando formulario
Logeando usuario
Layout zona usuario6 clases
Estructura del layout
Left Menu
Top Bar
Añadiendo funciones al top bar
Estructura del Footer
Estructura del reproductor
Ajustes del usuario16 clases
Estructura de los ajustes
Componente del avatar
Controlando el fichero
Subiendo avatar a firebase
Actualizando el avatar del usuario
Creando el modal
Controlando el contenido del modal
Formulario para cambiar displayName
Controlando y validando formulario
Actualizando displayName
Formulario para cambiar email
Controlando y validando formulario
Actualizando email
Formulario para cambiar la contraseña
Controlando y validando formulario
Actualizando contraseña
Sistema de Artistas9 clases
Modal para abrir formularios de creación
Formulario para crear artistas
Controlando y validando formulario
Controlando imagen del formulario
Creando un artista
Obtener todos los artistas
Listando los artistas
Obteniendo los datos de un artista
Pintando la información de un artista
Sistema de álbumes12 clases
Formulario para crear álbumes
Formulario para crear álbumes
Controlando la imagen
Cargando artistas en el dropdown
Creando el album
Obteniendo todos los albums
Pintando albumes
Obteniendo los datos de un album
Pintando información del album
Datos del artista del album visitado
Obtener albumes del artista visitado
Renderizando un slider de albumes
Sistema de canciones10 clases
Formulario para subir canciones
Controlando y validando formulario
Controlando fichero de musica
Controlando albumes
Subiendo la canción
Obteniendo canciones del album visitado
Listando canciones del album visitado
Obteniendo las canciones de un artista
Listando canciones en el perfil del artista
Adaptando slider a las canciones
Home Screen5 clases
Añadiendo el banner principal
Obteniendo y pintando los últimos artistas
Solucionando error de las imágenes
Obteniendo y pintando albumes
Obteniendo y pintando canciones
Reproductor de musica6 clases
Creando contexto del reproductor
Controlando la canción que se reproducirá
Controlando el volumen
Reproduciendo la canción
Controles del reproductor
Linea de tiempo del reproductor
Configuración de Electron6 clases
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 app3 clases
Configurando nuestra App para poder compilar
Creando el .dmg para MacOS
Creando el .exe para Windows
Comentarios de los estudiantes
4.8
Valoración del curso
Este curso incluye:
123 recursos educativos
Certificado de finalizazión
Consultas al tutor gratuitas
Compatible con todos los dispositivos
Compartir
Instructor del curso
Agustin Navarro Galdon
Frontend Developer
Soy un desarrollador de aplicaciones multiplataforma, mobile y E-Commerce con más de 7 años en el mundo del desarrollo de aplicaciones de todo tipo.
Valoraciones
No se ha escrito ningún comentario para la calificación que has seleccionado.