Swift 3: Integración con tecnologías backend

Interfaz de login y sign up

¡Prueba gratis durante 10 días

nuestros 1242 cursos !

Prueba gratis Mostrar modalidades de suscripción
En este video haremos un flujo de nuestra aplicación con un storyboard y algunos pequeños botones de navegación. Esto lo realizamos para poder tener una vista general de cómo vamos a navegar por nuestro proyecto.

Transcripción

Es hora de comenzar con el cliente. Para iniciar el proyecto de cliente, vamos a ocupar Xcode. En este caso, yo estoy usando la versión 8.2. Y lo que vamos a hacer muy rápido es crear el proyecto y generar la navegación para colocar las pantallas de "Login" y de "Sign up". Le voy a dar aquí en donde dice "Crear un nuevo proyecto de Xcode". Me salen aquí todas las plantillas. Si yo estoy en algún otro lado donde no debería, le doy aquí por la categoría de iOS y después el "Single View". Podría utilizar "Table Application", pero en realidad quiero construirla desde cero para que sepas cómo se está armando el "storyboard" Así que me voy a ir a "Single View". Le voy a dar "Next". El nombre del producto va a ser "CoffeeTable". El lenguaje, me voy a asegurar de que esté en "Switft". Y no voy a ocupar ahora las pruebas unitarias ni las pruebas de interfaz. Okay, le voy a dar "Next". Lo voy a guardar aquí en el escritorio. Muy bien. Y voy a revisar de manera muy rápida qué es lo que hay. Bueno, pues está el "Application Delegate", que es el objeto en el cual el sistema operativo me va a mandar llamar cada vez que haya algún evento relevante. El "ViewController" que es el principal o el primero que tenemos y el "Storyboard". Lo que voy a hacer aquí es muy rápido. Voy a construir la navegación de una manera muy rápida y sencilla para nuestra aplicación. Entonces, voy a ocultar aquí este panel. Este panel de acá también. Me voy a centrar en el "View Controller". Y lo primero que necesito identificar... Ahora, ya que tenemos seleccionado nuestro "View Controller", eso va a pasar cuando le demos clic aquí en "View Controller". Este puntito amarillo, en realidad, es el archivo de "Swift" que nosotros tenemos. Si te fijas, aquí tenemos el explorador de nuestro documento. Este se abre con este botón de aqui, por si no lo estás viendo. El círculo amarillo es el "View Controller" y aquí estamos seleccionando el "View". Esta es la vista en donde vamos a empezar a arrojar nuestros elementos. Lo primero que tenemos que hacer es seleccionar el "ViewController", irnos al menú "Editor", luego "Embed in" y después seleccionar "Navigation Controller". Lo que va a hacer esto es meter nuestro "View Controller" dentro del "Navigation Controller". Aquí aparece muy arriba, así que lo voy a arrastrar para acá. Muy bien. Entonces, nuestro "Main Storyboard" va a tener un "Navigation Controller". Esto va a ser para que yo pueda estar apilando todas las vistas de mi "Vista". Ahora, este va a tener aquí nuestro formulario para hacer el "login". Así que voy a buscar aquí, "Text", "Text Field". Voy a arrastrar el primero. Voy a arrastrar otro para el "password". Voy a arrastrar un botón. "Button". Okay. Y voy a arrastrar otro botón para registrar un nuevo usuario. Perfecto. ¿Por qué no ponemos aquí un pequeño "Label"? Y lo voy a poner aquí arriba. Muy bien. Entonces es... Aquí voy a poner la palabra "Welcome". Este va a ser el del "Username". Para esto, lo voy a seleccionar. Si no tengo abierto mi inspector, le doy clic aquí para abrir el "Panel de utilidades". Después, aquí voy a ver todas las propiedades y, en donde dice "Placeholder" le voy a poner "Username". Si te fijas, aquí ya aparece la palabra "Username". Aquí voy a ponerle "password". Y este botón en realidad va a ser... "Login". Y este de aquí es "Sign up". Okay, parece que este está muy cortito. Lo voy a hacer más grande. Perfecto. Ahora, ya tenemos "Username". Ya tenemos "Password". Ah, el password hay que hacerlo de entrada segura. Esto lo voy a encontrar aquí. "Secure Text Entry". Listo. Ahora, cada vez que yo presione el botón de "Login", tengo que hacerlo referencia en otra pantalla. ¿Para qué? Para que se mueva a otro archivo. ¿Cómo lo voy a hacer? Voy a crear otro "storyboard". Va a ver un "storyboard" para el proceso de registro y de acceso. Y va a ver un nuevo "storyboard" en donde ya manejo el flujo de un usuario registrado. Para esto, voy a crear un nuevo archivo, "Storyboard". Le voy a dar "Next". El nombre del "storyboard" va a ser "LoggedIn". Muy bien, aquí ya tenemos el "storyboard". Y este "storyboard" primero va a arrancar con un "View Controller". Si te fijas, está vacío. No tenemos nada en todo el "storyboard". Así que voy a arrastrar este "View Controller". Lo voy a dejar por aquí. Lo voy a marcar como "Initial View Controller". ¿Dónde está? Aquí está. Aquí debajo de "View Controller", en el panel de "Utilidades". Voy a poder marcar esto como "Initial View Controller" y vas a ver una flechita. Esto quiere decir que cuando alguien haga referencia a este "storyboard", va a mandarlo directamente para acá. Ahora, este "ViewController", en específico, va a estar envuelto por un "Table Controller". Este "Table Controller" lo voy a envolver dando clic aquí en "Editor" "Embed In" Y listo, aquí ya tenemos el "Tab Bar Controller" y vamos a tener aquí nuestro primer "View Controller". Este "View Controller", para elementos más sencillos, le voy a poner un "Label" para identificarlo. Lo voy a arrastrar por aquí. Y este va a ser el del "Perfil". Ahora, también voy a necesitar envolver este dentro de un "Navigation Bar". Así que le voy a dar clic. Al "View Controller" lo envuelvo en un "Navigation Controller". Y listo. Tendemos el "Tab Bar Controller", el "Navigation Controller" y, después, nuestro "View Controller". Aquí está nuestro elemento. Parece que no lo vemos, pero es que está detrás de... Entonces vamos a bajarlo a... Vamos a ponerle 128 y ya con eso lo vamos a ver. Okay. Aquí lo vamos a colocar. Muy bien. Ahora, ya tenemos este "Navigation Controller", pero me hace falta otro: el de los amigos. Este va a ser para el perfil y el otro va a ser para los amigos. Así que voy a arrojar este... Aquí hay un "Table View", "View Controller". Okay, este es un "Table View Controller". En realidad este lo único que tiene es una tabla. Y esta tabla va a hacer referencia a otros elementos. Pero para nuestro caso esta tabla la voy a envolver en un "Navigation Controller". Y, a su vez, este "Navigation Controller" va a ser la referencia que necesito como un segundo "item" en el "Tab Bar Controller". Presiono la tecla "Control" y arrastro desde el "Tab Bar Controller" hasta el nuevo "Navigation Controller". Lo suelto. Me va a salir este menú. Y voy a elegir la opción "View Controllers". Muy bien. Ahora, voy a cerrar los paneles y voy a hacer "zoom out" para que puedas ver cómo está hecho. Si te fijas, el primer elemento al que van a acceder cuando entren a este "storyboard", va a ser el "Tab Bar Controller". Después, voy a entrar a los "Navigation Controller" y cada uno de ellos me va a llevar ya sea a la lista de amigos o al perfil del usuario. Para poderlo marcar, voy a darle clic aquí en el "item", que es la parte inferior de este elemento. Me voy a abrir el panel de "Utilidades". Y aquí en vez de que diga "item", le voy a decir "Profile". Y voy a hacer lo mismo aquí, en el de amigos. "Friends". Listo. Muy bien. Ya tenemos el segundo archivo. ¿Cómo lo conectamos con el primero? Muy sencillo. Voy a abrir el "Main storyboard". Y voy a arrojar aquí un elemento que se llama "Storyboard Reference". Si te fijas, es la segunda opción si limpiamos el filtro. Voy a arrojarlo aquí. Y este "Storyboard Reference" cuando lo selecciono aquí en el panel de utilidades, me va a decir a quién estoy haciendo referencia. Voy a abrir el menú y le voy a decir "estoy haciendo referencia al archivo "Logged In"". También puedo hacer referencia a otro "bundle" o puedo estar haciendo referencia específicamente a un identificador. Como yo solamente quiero hacer referencia al archivo, lo voy a colocar ahí. Y voy a arrastrar con el mouse y la tecla "Control" presionada desde "Logged In" hasta la referencia "Logged In". Le voy a dar dentro del menú "Show". Y voy a arrancar mi aplicación. Lo que vamos a hacer es simplemente simular cómo va a ver el usuario el flujo entre nuestros botones y nuestras vistas. Aquí tenemos nuestro iPhone 7. Si no lo alcanzas a ver completo, es porque tal vez te hace falta escalarlo. Aquí tenemos una versión escalada del iPhone 7 Plus. Le voy a dar clic aquí en "LogIn". Y si te fijas, ya me lleva a "Profile". Pero en la parte de abajo, ya tenemos "Profile" y tenemos "Friends". Ahora, aquí tenemos el botón de "Back". Esto ya lo resolveremos después. Pero en un principio, esto nos va a servir para poder colocar todos nuestros elementos de nuestra interfaz en una aplicación de iOS.

Swift 3: Integración con tecnologías backend

Aprende a vincular tus aplicaciones web creadas con Swift 3 con el servidor, comienza a enviar información entre ambos y aprovecha esto al máximo dentro de tus sistemas.

3:08 horas (27 Videos)
Actualmente no hay comentarios.
 

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.