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

Pantalla de registro de usuario

8/36
Recursos

¿Cómo crear la interfaz gráfica de la pantalla de registro?

¿Alguna vez has querido saber cómo crear una interfaz gráfica para una aplicación? En esta lección guiada, te mostraremos cómo diseñar una pantalla de registro utilizando Xcode. La pantalla de registro es una parte fundamental en cualquier aplicación que requiera autenticación de usuario. Con un enfoque paso a paso, aprenderás a implementar gráficos, botones y campos de texto para usuarios nuevos.

¿Cómo iniciar el proyecto en Xcode?

Primero, asegúrate de tener Xcode instalado y crear un nuevo proyecto. Si ya has seguido el desarrollo de la pantalla de inicio de sesión, notarás que muchas de las estructuras y componentes son similares. La clave reside en reaprovechar el código existente para esta nueva pantalla.

¿Cómo importar y manejar imágenes?

Uno de los primeros pasos es importar imágenes necesarias para la pantalla de registro. Para esto:

  1. Ve a los assets y selecciona la opción de importar.
  2. Importa la imagen del perfil, que será utilizada en el diseño.

Asegúrate de nombrar las imágenes correctamente para evitar futuros errores de compilación.

¿Cómo estructurar los elementos en la pantalla de registro?

La estructura de la UI para la pantalla de registro es parecida a la de inicio, pero con diferencias sutiles. Aquí te dejamos un ejemplo de cómo se trabaja en Xcode:

// Agregando un B stack para la imagen
B stack {
    Alignment = .center
    VStack {
        Text("Elige una foto de perfil")
            .font(.system(size: 20, weight: .bold, design: .default))
            .foregroundColor(.white)
        Text("Puedes cambiar o elegirla más adelante")
            .font(.footnote)
            .foregroundColor(.gray)
    }
}

Además, es crucial crear botones con acción. Puedes usar un botón para capturar la foto de perfil del usuario. La acción se programará de la siguiente manera:

// Creando el botón para tomar foto
Button(action: {
    self.tomarFoto()
}) {
    ZStack {
        Image("perfilEjemplo")
            .resizable()
            .frame(width: 80, height: 80)
            .aspectRatio(contentMode: .fit)
        Image(systemName: "camera")
            .foregroundColor(.white)
    }
}

¿Cómo añadir campos de texto para registro?

En los campos de texto se deben manejar inputs como correo electrónico y contraseña. Asegúrate de vincular estos inputs adecuadamente y de añadir placeholders que guíen al usuario:

@State private var email: String = ""
@State private var password: String = ""
@State private var confirmarPassword: String = ""

Y en el diseño:

VStack {
    TextField("Correo Electrónico*", text: $email)
    SecureField("Contraseña", text: $password)
    SecureField("Confirmar Contraseña", text: $confirmarPassword)
}

¿Cómo mejorar la organización del código?

Para evitar sobrecargar un stack de elementos, es recomendable dividir los elementos visuales en módulos pequeños. Por ejemplo:

  • Un stack para los campos de texto.
  • Otro stack separado para los botones de acción.

¿Qué errores comunes se pueden evitar?

  1. Demasiados elementos en un Stack: Asegúrate de no superar la cantidad máxima de elementos permitida en un stack.
  2. Typo en el Código: Verifica que todos los elementos tengan los nombres correctos y sean consistentes.
  3. Propiedades mal asignadas: Cada variable debe tener un state inicializado correctamente.

¿Cuál es el siguiente paso?

Una vez cumplidos los requisitos de la pantalla de registro, prueba la funcionalidad. Un reto adicional sería alinear los textos y eliminar cualquier componente no deseado. Incrementar la calidad visual de tus interfaces y resolver cada pequeño error te ayudará a crear interfaces más profesionales y funcionales.

Sigue adelante y explora más oportunidades en el mundo del desarrollo de aplicaciones. El esfuerzo y aprendizaje constante hacen la diferencia. ¡Ánimo y sigue aprendiendo!

Aportes 12

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Me resultó mejor crear un componente para los inputs.

struct InputForm: View {
    @Binding var textBinding: String
    
    var label: String
    var placeholder: String
    var isSecureTextField: Bool = false
    var bottomSpace: CGFloat?
    
    var body: some View {
        VStack(alignment: .leading) {
            Text(label)
                .foregroundColor(Color("darkCian"))
                .fontWeight(.bold)
            
            ZStack(alignment: .leading) {
                if textBinding.isEmpty {
                    Text(placeholder)
                        .font(.caption)
                        .foregroundColor(Color("lightGray"))
                }
                
                if isSecureTextField {
                    SecureField("", text: $textBinding)
                        .font(.body)
                        .foregroundColor(.white)
                
                } else {
                    TextField("", text: $textBinding)
                        .font(.body)
                        .foregroundColor(.white)
                }
            }
            
            if let bottomSpace = self.bottomSpace {
                Divider()
                    .frame(height: 1)
                    .background(Color("darkCian"))
                    .padding(.bottom, bottomSpace)
            
            } else {
                Divider()
                    .frame(height: 1)
                    .background(Color("darkCian"))
                    .padding(.bottom)
            }
        }
    }
}

No olviden agregar color blanco con foreground a los Text de los input de Correo y Contraseñas en ambas vistas.

Me refiero a los Text que contienen el binding $correo, $contraseña y $confirmarContraseña ya que por defecto el sistema lo pone en negro cuando escribimos.

Excellent, this is my first view:

de verdad no me parece buena practica solo tener una imagen del diseño y imaginar las distancias y los tamaños de los objetos deberían seguir el figma en cuanto a paddings y distancia de los objetos, incluso el figma les puede dar un ejemplo del objeto en código SwiftUI, si ya tienes las herramientas usalas no las ignores.

Ahi vamos de apoco. ![](

Todo bien pero aqui hace falta demasiada reutilizazion de views, se esta repitiendo demasiado codigo, deberian enseñar a programar bien desde 0, por lo menos esta parte no me esta gustando, los fields contraseña deberian ser reutilizados y correo deberian ser reutilizados, aqui estamos repitiendo el mismo codigo mas de 5 veces es una barbaridad
jeje ![](https://static.platzi.com/media/user_upload/image-9abeb0f3-2f76-4549-ae54-a470547f9a99.jpg)

Le agregue la funcionalidad de asignar una foto de perfil random, a cada User que se esta registrando:

Viendo las clases, veo el avance de los procesadores M de Apple sobre los Intel, mi Mac recopila más rápido que la de el profe jaja y me imagino que el debe de tener la que en su año era una de las más top jaja

En el reto anterior lo hice de la siguiente manera:

Text("Enter with social networks").foregroundColor(.white).frame(maxWidth: .infinity, alignment: .center).padding(.vertical).font(.footnote)
                
                HStack {
                    Button(action: signInFacebook, label: {
                        Text("Facebook").fontWeight(.bold).foregroundColor(.white).frame(maxWidth: .infinity, alignment: .center).padding(EdgeInsets(top: 11, leading: 18, bottom: 11, trailing: 18)).background(RoundedRectangle(cornerRadius: 6).fill(Color("BlueGray")))
                    })
                    
                    Button(action: signInTwitter, label: {
                        Text("Twitter").fontWeight(.bold).foregroundColor(.white).frame(maxWidth: .infinity, alignment: .center).padding(EdgeInsets(top: 11, leading: 18, bottom: 11, trailing: 18)).background(RoundedRectangle(cornerRadius: 6).fill(Color("BlueGray")))
                    })

                }