Pantalla de favoritos

¿Cómo programar la pantalla de favoritos en SwiftUI?

Programar una pantalla de favoritos en tu aplicación puede parecer un desafío, pero con la guía adecuada, puede ser una tarea realmente gratificante. Esta funcionalidad te permitirá mostrar una lista de videos favoritos que los usuarios pueden reproducir desde el servidor. A continuación, te mostraré cómo lograrlo paso a paso utilizando SwiftUI.

¿Cómo se prepara el entorno de desarrollo?

Ya que estamos trabajando con Xcode y SwiftUI, asegúrate de tener tu entorno configurado correctamente. A continuación, crea un nuevo archivo de tipo SwiftUI View para nuestra pantalla de favoritos.

1. Crea un archivo llamado FavoritesView.swift en tu proyecto.
2. Asegúrate de que tu estructura de proyecto esté bien organizada, por ejemplo, agrupando vistas relacionadas en la misma carpeta.

¿Cómo eliminar elementos estáticos no deseados?

Es probable que al instanciar FavoritesView, te encuentres con un texto predefinido como "pantalla favoritos." Este texto estático hay que eliminarlo y reemplazarlo con una funcionalidad más dinámica. Esto sucede porque al pulsar el tag view de favoritos, debería mostrar la lista de videos favoritos que podemos reproducir.

¿Cómo crear un objeto observado para recuperar videos?

Para manejar los videos necesitas utilizar un ObservedObject que tenga acceso a la lista de videojuegos.

@ObservedObject var todosLosVideojuegos = VideojuegoViewModel()

Este objeto nos permitirá manipular y acceder a la lista de videos que deseas mostrar, recuperándolos directamente del servidor.

¿Cómo estructurar la vista principal?

Usaremos un ZStack para crear el fondo de pantalla. Aquí configurarás el color y elementos de navegación.

ZStack {
    Color("marine").edgesIgnoringSafeArea(.all)
    VStack {
        Text("FAVORITOS").font(.title2).bold().foregroundColor(.white).padding(.bottom)

        ScrollView {
            // Colocaré el código de los reproductores aquí
        }.padding(.bottom, 8)
    }
    .navigationBarHidden(true)
    .navigationBarBackButtonHidden(true)
}

En este bloque de código, ponemos un color de fondo, ocultamos la barra de navegación y el botón de retroceso para tener control total sobre la interfaz de usuario.

¿Cómo integrar los reproductores de videos?

Usaremos AVKit para crear un reproductor de video para cada elemento de la lista. Importa la librería AVKit para usar VideoPlayer.

import AVKit

Dentro del ScrollView, usaremos un ForEach para iterar sobre cada videojuego:

ForEach(todosLosVideojuegos.gameInfo, id: \.self) { juego in
    VStack(spacing: 0) {
        VideoPlayer(player: AVPlayer(url: URL(string: juego.videosURL.mobile)!))
            .frame(height: 300)
        
        Text(juego.title)
            .foregroundColor(.white)
            .padding()
            .frame(maxWidth: .infinity, alignment: .leading)
            .background(Color("blueGray"))
            .cornerRadius(3)
    }
}

En este código, cada juego obtiene su video URL y se le asigna un VideoPlayer. También se muestra el título del videojuego bajo el video manejando estilos como el color y la alineación.

¿Qué hacer con bugs de SwiftUI?

Es posible que encuentres un bug al intentar ocultar elementos de UI al tener varios reproductores en un ForEach. Aunque hay formas de corregirlo alterando el comportamiento de la librería de navegación de Apple, puedes optar por dejarlo conforme esté para entornos no productivos.

A lo largo de este proceso, siempre es importante recompilar y probar tu aplicación para verificar que todo funcione correctamente. Ya has programado la interfaz y el funcionamiento de la pantalla de favoritos. Ahora estás listo para avanzar al siguiente reto: programar la pantalla de perfil de usuario. No te detengas y sigue con esa emoción por aprender.