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

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Completando nuestra pantalla de inicio de sesión

7/36
Recursos

Aportes 16

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Dejo un pequeño aporte:
Agregué (solo para practicar) un botón con la imagen de un ojo (como usualmente se le incluyen a algunos formularios de contraseña). Al darle click se cambia el SecureField por un TextField para dejar ver la contraseña.

Excelente clase!

Lo unico que no estoy deacuerdo es que la funcion la escribio fuera de los struct entonces quedo de manera global…

Todo lo demas quedo bien explicado

Pienso que el elemento de “¿Olvidaste tu contraseña?” debería ser un botón, ya que si es un texto no se podrá seleccionar, y aunque no esté implementada su acción, es preferible que sea un elemento seleccionable. Aquí mi cambio:

Un pequeño aporte:
Para que el placeholder del correo no se vea en color azul se puede definir de la siguiente manera:

Text(verbatim:"[email protected]")
                            .font(.caption)
                            .foregroundColor(.gray)

Dejo reto…
Coding en GitHub

Un workAround para que al cambiar el texto en el secureField no mueva todo, y si agregan el Eye para el mostrar contra;a no les corra mas aun… luego del Z Stack del Secure Field, agreguen::

                VStack{
                    Divider().frame(height: 1).background(Color("dark-cian")).padding(.bottom)
                    if(!contrasenia.isEmpty && !isContraseniaVisible){
                        Spacer().frame(height: 8)
                    }
                    if isContraseniaVisible{
                        Spacer().frame(width: 0.0, height: 6.4)
                    }
                }

La forma adecuada para hacer que el ancho del texto rellene la vista que lo contiene es la siguiente:

Text("¿Olvidaste tu contraseña?")
	.font(.footnote)
	.frame(
		maxWidth: .infinity,
		alignment: .trailing
	)

Sólo con utilizar maxWidth: .infinity logramos el efecto deseado.

La razón de que no sea apropiado utilizar números fijos es que en diferentes tamaños de pantalla, nuestra vista no se verá igual. Este es un principio de responsive design.

Me están gustando las clases, solo creo que sería más optimo meter la función dentro de la struct para que se vuelva un método de esta.

me gusto la idea del ojo asi que quise agregarle los dos el que sale desbloqueado o bloqueado simplemente cambias el icono por el eye.slash en el label del boton

aqui les dejo una wrapper que hize para facilitar la creacion de inputs y centralizar logica y estilos

//
//  Input.swift
//  Muniflix
//
//  Created by Martin Munilla on 24-10-21.
//

import SwiftUI

struct Input: View {
    var placeholder: String
    var label: String
    var text: Binding<String>
    var isSecure: Bool
    @State var show = false
    
    init(_ initLabel: String, _ initPlaceholder: String, _ initText: Binding<String>,secure: Bool = false) {
        placeholder = initPlaceholder
        text = initText
        label = initLabel
        isSecure = secure
    }
    
    var body: some View {
        VStack(alignment: .leading) {
            Text(label)
            HStack {
                if !show {
                    SecureField("",text:  text).placeholder(when: text.wrappedValue.isEmpty) {
                        Text(placeholder).foregroundColor(.gray)
                    }
                } else {
                    TextField("", text: text)
                        .placeholder(when: text.wrappedValue.isEmpty) {
                            Text(placeholder).foregroundColor(.gray)
                        }
                    
                }
                if isSecure {
                    
                    Button(action: {show.toggle()}) {
                        Image(systemName: !show ? "eye": "eye.slash")
                    }
                }
            }
        }.foregroundColor(.white)
    }
}

si tan solo copian y pegan ese codigo les va a tirar un error porque placeholder tambien es un util extra que cree, ese es el codigo

//
//  Placeholder.swift
//  Muniflix
//
//  Created by Martin Munilla on 24-10-21.
//
import SwiftUI

extension View {
    func placeholder<Content: View>(
        when shouldShow: Bool,
        alignment: Alignment = .leading,
        @ViewBuilder placeholder: () -> Content) -> some View {

        ZStack(alignment: alignment) {
            placeholder().opacity(shouldShow ? 1 : 0)
            self
        }
    }
}

Reto de la clase

Reto, alineación facil wrappeandolo en un VStack

VStack {
    Text("Inicia sesión con redes sociales")
        .foregroundColor(.white)
        .padding(.bottom, 8)
    
    HStack {
        Button("Facebook", action: {})
            .font(.system(size: 14, weight: .bold))
            .foregroundColor(.white)
            .frame(width: 150, height: 40)
            .background(Color("blueGray"))
            .cornerRadius(8)
        
        Button("Twitter", action: {})
            .font(.system(size: 14, weight: .bold))
            .foregroundColor(.white)
            .frame(width: 150, height: 40)
            .background(Color("blueGray"))
            .cornerRadius(8)
    }
}

aqui otra opcion!!!

Mi solución