Introducci贸n al curso

1

Construyamos una app para iOS

2

Introducci贸n a la arquitectura MVVM

3

Planeando nuestra app

Creando las primeras pantallas de la app

4

Programando la primera pantalla en m贸dulos

5

Escribiendo la l贸gica para mostrar dos pantallas

6

Pantalla de inicio de sesi贸n con SecureField y Scroll

7

Completando nuestra pantalla de inicio de sesi贸n

8

Pantalla de registro de usuario

9

Comprobando el funcionamiento de nuestras pantallas

10

Estructura de las pantallas con TabView

11

Creando nuestra pantalla home

12

Pantalla home: logo y barra de b煤squeda

13

Pantalla home: programaci贸n de interfaces est谩ticas

14

Pantalla home: carruseles

Aplicando arquitectura MVVM

15

Creando estructura para arquitectura MVVM

16

Modelando nuestro JSON

17

Peticiones al servidor

18

Mostrar informaci贸n de un servidor de manera din谩mica

19

Mostrar im谩genes de forma din谩mica y eficiente con LazyVGrid

Reproductor y b煤squeda de video

20

Pasar datos entre pantallas

21

Darle datos de inicio a un Canvas

22

Reproducir videos din谩micamente de un servidor

23

Mostrar im谩genes din谩micamente de un servidor

24

Mostrar alertas

25

Programar clase de b煤squeda

26

Programar m茅todo de b煤squeda

脷ltimas pantallas de la app

27

Pantalla de favoritos

28

Pantalla de perfil de usuario

29

M贸dulo de ajustes de perfil con Toggle

30

Pantalla de edici贸n de perfil

31

M贸dulo de edici贸n de perfil

32

Guardado interno de datos

Utilizando la c谩mara y fotos del iPhone

33

Captura de foto de perfil: ImagePicker y vista Sheet

34

Captura de foto de perfil con la c谩mara: modificar librer铆as de terceros

35

Captura de foto de perfil con la c谩mara: recuperar im谩genes guardadas

驴Qu茅 m谩s posibilidades tiene SwiftUI?

36

Mejoremos nuestra app

No tienes acceso a esta clase

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

Mostrar alertas

24/36
Recursos

驴C贸mo crear una alerta en una aplicaci贸n de SwiftUI?

En el mundo del desarrollo de interfaces de usuario, las alertas son elementos esenciales para proporcionar retroalimentaci贸n inmediata a los usuarios. En esta lecci贸n, nos enfocaremos en la implementaci贸n de alertas en SwiftUI, espec铆ficamente en una aplicaci贸n donde se realiza la b煤squeda de videojuegos. Aprenderemos a integrar una alerta que informe al usuario cuando no se encuentra un juego en particular. 隆Acomp谩帽anos en este emocionante viaje!

驴C贸mo reorganizar los componentes de la interfaz?

Para lograr una mejor organizaci贸n y funcionalidad en nuestra aplicaci贸n, se requiere reorganizar algunos subm贸dulos en la vista principal. Originalmente, el m贸dulo de b煤squeda con su barra y el 铆cono de lupa se encontraba colocado junto a otros elementos fijos en la pantalla principal.

  1. Reubicaci贸n del m贸dulo de b煤squeda: Se decidi贸 mover el m贸dulo de b煤squeda a una nueva posici贸n en el subm贸dulo, justo arriba del listado de los juegos m谩s populares. Esto permitir谩 a los usuarios realizar b煤squedas de una manera m谩s din谩mica y eficiente.

  2. Reconfiguraci贸n del m贸dulo: La intenci贸n es integrar una b煤squeda que sea din谩mica, proporcionando una respuesta en tiempo real conforme el usuario interact煤a con la aplicaci贸n.

驴C贸mo implementar el m茅todo WatchGame?

El m茅todo WatchGame es esencial en nuestra l贸gica, ya que se activa cuando los usuarios desean buscar un videojuego espec铆fico. A continuaci贸n, los pasos claves para su implementaci贸n:

  1. Definici贸n del m茅todo: Dentro de nuestra clase, se define la funci贸n WatchGame que aceptar谩 como par谩metro un nombre de tipo String. Este m茅todo, aunque no devuelve un valor, es crucial para controlar el flujo de la alerta.
func watchGame(name: String) {
    print("Buscar juego")
}
  1. Llamada al m茅todo desde la interfaz: Cuando el usuario presiona el bot贸n de b煤squeda, este m茅todo se activa en el stack de navegaci贸n. Se configura el m茅todo para mostrar mensajes mediante print, que ayuda a verificar el funcionamiento del flujo.

驴C贸mo presentar una alerta en la aplicaci贸n?

La implementaci贸n de una alerta proporciona a los usuarios una retroalimentaci贸n inmediata cuando no encuentran resultados en su b煤squeda. Veamos c贸mo se configura esta funcionalidad:

  1. Declaraci贸n del estado: Se inicializa un estado para monitorear la informaci贸n recuperada sobre los juegos. Este estado, isGameInfoEmpty, verifica si se ha encontrado la informaci贸n o no.
@State var isGameInfoEmpty = false
  1. Configuraci贸n de la alerta: La alerta se define justo despu茅s de los elementos visuales, configurando un alert que se activa mediante el estado antes declarado. Este lleva un t铆tulo, mensaje y un bot贸n que permitir谩 al usuario cerrar la alerta.
.alert(isPresented: $isGameInfoEmpty) {
    Alert(
        title: Text("Error"),
        message: Text("No se encontr贸 el juego"),
        dismissButton: .default(Text("Entendido"))
    )
}
  1. Condiciones de activaci贸n: La alerta se configura para mostrarse cuando el estado isGameInfoEmpty se eval煤a como true, lo que ocurre dentro del m茅todo de b煤squeda al no encontrar el juego especificado.

Consejos pr谩cticos para manejar alertas

  • Mejora la experiencia del usuario: Aseg煤rate de que el mensaje de la alerta sea claro y directo para que los usuarios comprendan el problema r谩pidamente.
  • Pruebas exhaustivas: Compila y prueba la aplicaci贸n frecuentemente para asegurarte de que las alertas se activen en los escenarios adecuados.
  • Organizaci贸n del c贸digo: Mant茅n el c贸digo bien estructurado, dividiendo las funciones y m茅todos en partes l贸gicas. Esto facilita el mantenimiento y la ampliaci贸n de nuevas funcionalidades.

En resumen, crear alertas efectivas en SwiftUI es una pr谩ctica esencial para cualquier desarrollador que desee mejorar la interacci贸n y experiencia de usuario. Siguiendo los pasos descritos, puedes asegurarte de que tus alertas sean eficientes y cumplan el prop贸sito deseado. 隆No dudes en experimentar y aprender m谩s sobre el potencial de SwiftUI!

Aportes 2

Preguntas 0

Ordenar por:

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

Si quieren tener un teclado con el boton aceptar y que cuando terminen de escribir y presionen aceptar (para no tener que presionar siempre el icono de lupa y mejorar la UX) ejecute la funci贸n de buscar la palabra que acaba de escribir, escriban el siguiente c贸digo al final del textfield

Creo que como parte de la clase tambi茅n seria bueno que mostraran como refactorizar correctamente el c贸digo en vistas individuales 鉁岋笍

//
//  ScreenHomeTab.swift
//  GameStream
//
//  Created by Jonathan Ixcayau on 16/09/21.
//

import SwiftUI
import AVKit

struct ScreenHomeTab: View {
    @State var searchText: String = ""
    @State var isPlayerActive = false
    @State var url : String = "https://cdn.cloudflare.steamstatic.com/steam/apps/256658589/movie480.mp4"
    @State var isGameInfoEmpty = false
    
    let  urlVideos: [String] = [
        "https://cdn.cloudflare.steamstatic.com/steam/apps/256658589/movie480.mp4",
        "https://cdn.cloudflare.steamstatic.com/steam/apps/256671638/movie480.mp4",
        "https://cdn.cloudflare.steamstatic.com/steam/apps/256720061/movie480.mp4",
        "https://cdn.cloudflare.steamstatic.com/steam/apps/256814567/movie480.mp4",
        "https://cdn.cloudflare.steamstatic.com/steam/apps/256705156/movie480.mp4",
        "https://cdn.cloudflare.steamstatic.com/steam/apps/256801252/movie480.mp4",
        "https://cdn.cloudflare.steamstatic.com/steam/apps/256757119/movie480.mp4"
    ]
    
    
    var body: some View {
        ZStack{
            Color("backgroundColor")
                .ignoresSafeArea()
            
            ScrollView{
                VStack {
                    GameStreamLogo()
                        .padding(.bottom)
                    
                    HStack{
                        Button(
                            action: search,
                            label: {
                                Image(systemName: "magnifyingglass")
                                    .foregroundColor(
                                        searchText.isEmpty ? Color(.yellow) : Color("darkCianColor"))
                            }
                        )
                            .alert(isPresented: $isGameInfoEmpty){
                                Alert(
                                    title: Text("Error"),
                                    message: Text("No se encontro el juego"),
                                    dismissButton: .default(Text("Entendido"))
                                )
                            }
                        
                        
                        ZStack(alignment: .leading){
                            CommonInput(content: $searchText, hint: "Buscar un video", hasBottomPadding: false)
                        }
                    }
                    .padding([.top, .bottom], 11)
                    .padding([.leading, .trailing], 18)
                    .background(Color("tabBarColor"))
                    .clipShape(Capsule())
                    
                    PopularsView(urlPlayer: $url, isPlayerActive: $isPlayerActive, url: urlVideos[0] )
                    SuggestedCategories()
                    RecommendedForYou(urlPlayer: $url, isPlayerActive: $isPlayerActive, urlVideos: urlVideos)
                    
                }
                .padding(.horizontal, 24)
            }
            
            NavigationLink(
                destination: VideoPlayer(player: AVPlayer(url: URL(string: url)!))
                    .frame(width: 400, height: 300),
                isActive: $isPlayerActive,
                label: {
                    EmptyView()
                }
            )
        }
        .navigationBarHidden(true)
        .navigationBarBackButtonHidden(true)
    }
    
    func search() {
        print("Searching \(searchText)")
        isGameInfoEmpty = searchText.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty
    }
}

struct PopularsView: View {
    @Binding var urlPlayer: String
    @Binding var isPlayerActive: Bool
    
    let url: String
    
    var body: some View {
        VStack  {
            HomeBaseTitle(title: "LOS M脕S POPULARES")
            
            ZStack{
                Button(
                    action: {
                        urlPlayer = url
                        isPlayerActive = true
                    },
                    label: {
                        VStack(spacing:0){
                            ZStack{
                                Image("thewitcher")
                                    .resizable()
                                    .scaledToFit()
                                    .frame(minWidth: 0,  maxWidth: .infinity, minHeight: 200, maxHeight: 200)
                                
                                Image(systemName: "play.circle.fill")
                                    .resizable()
                                    .foregroundColor(.white)
                                    .frame(width: 42, height: 42)
                            }
                            .padding(.bottom, 4)
                            
                            Text("The Witcher 3")
                                .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
                        }
                    }
                )
                    .frame(minWidth: 0, maxWidth: .infinity, alignment: .center)
                    .background(Color("tabBarColor"))
            }
        }
    }
}

struct SuggestedCategories:View {
    
    var body: some View {
        VStack{
            HomeBaseTitle(title:"CATEGOR脥AS SUGERIDAS PARA TI")
            
            ScrollView(.horizontal, showsIndicators: false){
                HStack{
                    HomeCategoryButton(imagePath: "category")
                    HomeCategoryButton(imagePath: "fps")
                    HomeCategoryButton(imagePath: "rpg")
                    HomeCategoryButton(imagePath: "world")
                }
            }
        }
    }
}

struct RecommendedForYou:View {
    @Binding var urlPlayer: String
    @Binding var isPlayerActive: Bool
    
    let urlVideos: [String]
    
    var body: some View {
        VStack{
            HomeBaseTitle(title:"RECOMENDADO PARA TI")
            
            ScrollView(.horizontal, showsIndicators: false){
                HStack{
                    RecommendedForYouButton(
                        imagePath: "Abzu",
                        action: {
                            urlPlayer = urlVideos[1]
                            isPlayerActive = true
                        }
                    )
                    RecommendedForYouButton(
                        imagePath: "Crash Bandicoot",
                        action: {
                            urlPlayer = urlVideos[2]
                            isPlayerActive = true
                        }
                    )
                    RecommendedForYouButton(
                        imagePath: "DEATH STRANDING",
                        action: {
                            urlPlayer = urlVideos[3]
                            isPlayerActive = true
                        }
                    )
                }
            }
        }
        .padding(.bottom, 20)
    }
}

struct HomeBaseTitle:View {
    let title : String
    
    var body: some View {
        Text(title)
            .font(.title3)
            .foregroundColor(.white)
            .bold()
            .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
            .padding(.top)
    }
}

struct ScreenHomeTab_Previews: PreviewProvider {
    static var previews: some View {
        HomeView()
    }
}