Hola, Apple

1

Desarrollo de Apps para iOS: Elementos Clave y Estrategias Comerciales

2

Desarrollo de Apps iOS: Creación Inicial en Xcode

3

Desarrollo de Apps iOS sin iPhone: Uso de Simuladores XCode

Tu primera app en iOS

4

Creación de interfaces iOS con Storyboard y Xcode

5

Navegación en iOS con UI Navigation Controller

6

Conexión de Storyboards en iOS: Buenas Prácticas de Navegación

7

Conexiones IBOutlets e IBActions en iOS con Swift

8

Comparativa: Auto Layout vs SwiftUI en Desarrollo iOS

9

Diseño Responsivo con Auto Layout y StackView en iOS

10

Creación y Funcionalidad de TableViews en iOS

11

Creación de Celdas Personalizadas en UITableView

12

Persistencia de datos en iOS con UserDefaults

Manejo de dependencias

13

Instalación y uso de CocoaPods en proyectos iOS

14

Gestión de Dependencias en iOS con Carthage: Uso y Beneficios

Servicios Web

15

Consumo de Servicios Web con URLSession en iOS

16

Desarrollo de Servicios Web con URLSession en iOS

17

Serialización de JSON en Swift con Codable y JSONDecoder

18

Uso de Alamofire para Networking en Swift

Proyecto: PlatziTweets

19

Creación de App iOS: Red Social Platzi Tweets

20

Configuración de CocoaPods en Xcode para iOS 10.3

21

Diseño de Pantallas en Swift: Bienvenida, Login y Registro

22

Controladores UI en Swift: Creación y Configuración Básica

23

Validación de Password con Swift: Muestra Errores al Usuario

24

Modelado y Manejo de Endpoints en Swift para APIs

25

Autenticación de Usuarios con API y Simple Networking

26

Programación de servicios RESTful en Swift

27

Diseño de Interfaz de Usuario en iOS con Storyboard

28

Consumo de APIs con Simple Networking en iOS

29

Diseño de Interfaz para Publicar Tweets en SwiftUI

30

Conexión de Pantallas en Apps iOS con SwiftUI

31

Borrar Tweets con Swipe en iOS

32

Usar Cámara del iPhone para Adjuntar Fotos en iOS

33

Conexión de Apps iOS a Firebase paso a paso

34

Configurar iPhone y X-Code para desarrollo de apps

35

Subir Fotos a Firebase desde Aplicaciones Móviles

36

Publicar con Firebase: Subida de Imágenes y Texto en Android

37

Grabación y Publicación de Videos en Firebase

38

Subida de videos a Firebase desde apps iOS

39

Configuración y Uso del AVPlayer en Aplicaciones iOS

40

Accediendo al GPS: Obtener Coordenadas en Aplicaciones iOS

41

Ubicación y Mapas en Apps iOS: Integración con MapKit

42

Configuración de mapas y marcadores en aplicaciones móviles iOS

43

Creación de Pantallas Personalizadas en Aplicaciones iOS

En producción

44

Distribuir apps iOS con Firebase App Distribution y TestFlight

45

Distribución de apps con TestFlight: Paso a paso en App Store Connect

46

Escribe permisos de uso en Info.plist para iOS

iOS Avanzado

47

Implementación de Dark Mode en Aplicaciones iOS

48

Creación de interfaces con SwiftUI en iOS 13

49

Reutilización de Componentes en SwiftUI

50

Proyecto iOS con Objective-C: Creación de Tablas Paso a Paso

Hola, iOS Developer

51

Desarrollo de apps iOS con SwiftUI

52

Desarrollo de Aplicaciones en iOS para Principiantes

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Controladores UI en Swift: Creación y Configuración Básica

22/52
Recursos

¿Cómo crear controladores independientes para cada pantalla?

La organización es clave al desarrollar una aplicación móvil, y una técnica eficaz es crear controladores independientes para cada pantalla. Esto te permitirá tener un código más limpio y manejable. Para comenzar, genera tres controladores separados en tu carpeta de bienvenida.

  • WelcomeViewController: Crea con clic derecho una "Cocoa Touch Class" y asigna "UIViewController" como superclase. Llama a este controlador "WelcomeViewController".
  • LoginViewController: Repite el proceso de creación para este controlador.
  • RegisterViewController: Finalmente, crea este controlador bajo el mismo método.

Una vez creados, asegúrate de asignar cada uno a su correspondiente pantalla de interfaz de usuario.

¿Cómo configurar una interfaz de usuario con código?

Configurar elementos de la interfaz mediante código puede dar flexibilidad y precisión al diseño. Por ejemplo, redondear un botón en "WelcomeViewController":

  1. Crear el método setupUI: Este método debe incluir konfiguraciones específicas de la UI.
  2. Integrar el método en viewDidLoad: Siempre llama al método setupUI dentro de viewDidLoad.
  3. Agregar un IBOutlet para el botón: Declara el outlet y conéctalo al elemento visual.
  4. Redondear el botón: En setupUI, usa layer.cornerRadius = 25 para redondear el botón.
@IBOutlet weak var loginButton: UIButton!
   
override func viewDidLoad() {
    super.viewDidLoad()
    setupUI()
}

func setupUI() {
    loginButton.layer.cornerRadius = 25
}

Ahora repite este proceso para los controladores de LoginViewController y RegisterViewController, asegurándote de conectar adecuadamente cada outlet en el storyboard. Copiar y pegar el código inicialmente permitirá cierta rapidez, pero hay que prestar atención para ajustar nombres y conexiones.

¿Cómo validar campos de forma profesional?

La validación es crucial para garantizar la entrada de datos correcta y proporcionar una buena experiencia de usuario. Aquí se explica cómo puedes implementar validaciones usando el controlador de login como ejemplo:

  1. Conectar outlets de los campos: Agrega outlets para los campos de email y contraseña.
  2. Crear un IBAction para el botón de login: Esto se activa cuando el usuario presiona el botón.
  3. Agregar validaciones dentro de un método separado: Evita insertar lógica dentro de IBAction. En cambio, llama a un método que maneje la validación, ejemplo performLogin.
@IBAction func loginButtonAction(_ sender: UIButton) {
    performLogin()
}

private func performLogin() {
    // Validar email
    guard let email = emailTextField.text, !email.isEmpty else {
        // Mostrar error
        return
    }
    // Resto del código...
}
  1. Mostrar mensajes de error: Usa librerías de terceros como NotificationBannerSwift para mostrar errores elegantemente al usuario.
import NotificationBannerSwift

private func showErrorBanner(_ message: String) {
    let banner = NotificationBanner(title: "Error", subtitle: message, style: .warning)
    banner.show()
}

Conectar adecuadamente las acciones y asegurar la correcta implementación de librerías te permitirá no solo mejorar la usabilidad sino también manejar errores de forma eficientemente visual para el usuario. ¡No olvides mantener tu código ordenado y documentado!

Desafío Adicional

Implementa una validación similar para la contraseña y asegúrate de notificar al usuario cuando ingrese credenciales correctas, quizás usando un banner verde de éxito. Las librerías y la correcta organización son tus aliados en esta tarea. ¡Buena suerte!

Aportes 13

Preguntas 0

Ordenar por:

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

Hola!
Mi proyecto no me reconocía el cornerRadius. Era debido a un tema de versiones de iOS.

Lo solucioné de esta manera:

loginButtons.clipsToBounds = true
loginButtons.layer.cornerRadius = 25.0
if #available(iOS 13.0, *) {
loginButtons.layer.cornerCurve = .continuous
}

También podemos redondear los botones asignadole un Key Path

Los temas de IOS son muy bonitos y organizados 😄

Si les aparece el siguiente error:

Xcode 12: Compiling for iOS 13.0, but module 'NotificationBannerSwift' has a minimum deployment target of iOS 12.0

Agreguen lo siguiente al final de su Podfile:

deployment_target = '12.0'

post_install do |installer|
    installer.generated_projects.each do |project|
        project.targets.each do |target|
            target.build_configurations.each do |config|
                config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = deployment_target
            end
        end
        project.build_configurations.each do |bc|
            bc.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = deployment_target
        end
    end
end

Y cambien el target a iOS 12.0, y vuelvan a compilar con command + B

private func performLogin() {
        guard let email = emailTextField.text, !email.isEmpty else{
            NotificationBanner(title: "Error", subtitle: "Debes especificar un correo.", style: .warning).show()
                
            return
        }
        
        guard let password = passwordTextField.text, !password.isEmpty else{
            NotificationBanner(title: "Error", subtitle: "Debes ingresar una contraseña.", style: .warning).show()
            
            return
        }
        
        if !email.isEmpty && !password.isEmpty{
            NotificationBanner(title: "Success", subtitle: "Has ingresado los datos correctamente", style: .success).show()
        }
    }

Reto cumplido, e incluso agregue un banner en caso de que el usuario si introdujo los dos campos correspondientes…

import UIKit
import NotificationBannerSwift

class LoginViewController: UIViewController
{
    
    // MARK: - IBOutlets
    
    @IBOutlet weak var loginButton : UIButton!
    @IBOutlet weak var emailTextField: UITextField!
    @IBOutlet weak var passwordTextField: UITextField!
    
    // MARK: - IBActions
    @IBAction func loginButtonAction()
    {
        performLogin()
    }
    
    // MARK: - Functions

    override func viewDidLoad()
    {
        super.viewDidLoad()

        setupUI()
    }
    

    // MARK: - PRIVATE METHODS
    
    private func setupUI()
    {
        loginButton.layer.cornerRadius = 25
        //Esto se puede hacer con un KeyPath...
    }
    
    private func performLogin()
    {
        guard let email = emailTextField.text,
              !email.isEmpty else
        {
            
            NotificationBanner(title: "¡Hey!", subtitle: "Debes especificar un correo", style: .warning).show()
            
            return
        }
        
        guard let password = passwordTextField.text,
              !password.isEmpty else
        {
            NotificationBanner(title: "¡Hey!", subtitle: "Debes especificar una contraseña", style: .warning).show()
            
            return
        }
        
        guard let email = emailTextField.text,
              let password = passwordTextField.text,
              email.isEmpty,
              password.isEmpty else
        {
            NotificationBanner(title: "OK", subtitle: "Has introducido todas tus credenciales correspondientes", style: BannerStyle.info).show()
            
            return
        }
        
    }
  
}

Muy buena clase para entender mejor el manejo de la UI de iOS

Reto muy fácil de lograr vamos a por más!!! 😎

No lograba redondear los botones por código así que investigando las características del botón, hay una propiedad que se llama CornerStyle, lo dejas como capsule y listo!

No soy muy fan de tener que hacer cambios de UI fuera del storyboard, por el tema de que con el tiempo podrian existir tantos cambios de UI en el codigo que mover algo en un storyboard sea peligroso.

Me gustó mucho la librería NotificationBannerSwift