App #1 – Show Pet’s Name – Video 1

Anteriormente les mostré sobre botones,
hablamos sobre etiquetas y campos de texto. Ahora es el momento de poner todo lo que hemos aprendido
en una aplicación. Así que va a construir su primera
aplicación y esta aplicación se llamará Pet's Name. Muy bien, esencialmente lo
que hará la aplicación, para que el usuario pueda ingresar el nombre de una mascota, correcto, vamos a tener una
vista de imagen, así que eso es algo nuevo que vamos a aprender y luego Tendrá un botón
en el que una vez que hayan ingresado el nombre de sus mascotas,
podremos hacer clic en Enviar, momento en el que tendremos una etiqueta, que será el nombre de la
mascota que acaban de ingresar, ¿está bien? Así que esta va a ser una aplicación muy emocionante
porque vamos a poder juntar todo lo que hemos aprendido hasta ahora y
agregar un nuevo componente de interfaz de usuario, en este caso, la vista de imagen, y luego vamos
para poder armar una aplicación completa desde cero.

Muy bien, ¿estás listo para el desafío? Muy bien, hagamos esto. Así que aquí estamos, así que lo primero que
vamos a hacer es seguir adelante y abrir nuestro Xcode. Ya lo tengo abierto, así que si no lo tienes,
solo adelante, ábrelo y comencemos. Muy bien, continuaré aquí y
diré crear un nuevo proyecto de Xcode, así que haga clic en eso y, por supuesto, iremos a la
aplicación en iOS, será una aplicación de vista única y seguiremos. Vamos a nombrar a esta mascota Nombre, ¿de acuerdo? Esto va a ser, al final aquí, va
a ser Pet Name, ¿de acuerdo? Va a ser Swift, universal, y en
todo lo demás simplemente desmarque.

Todo está bien, haga clic en Siguiente. Nos aseguraremos de poner los proyectos
en nuestra carpeta, crear, y deberíamos tener nuestro proyecto creado aquí. Muy bien, está bien, lo primero que
vamos a hacer es seguir adelante y abrir nuestro guión gráfico aquí, el guión gráfico principal, y
ahí está. Vayamos y cerremos esto y nuevamente asegurémonos de hacer
clic aquí en la parte superior de nuestro guión gráfico y vamos a ir y cambiar el
tamaño nuevamente a 4.7 para que refleje nuestro iPhone 6, que recomiendo. Muy bien, ahí vamos, eso es realmente bueno. Ahora lo primero que tenemos que hacer, vamos
a seguir adelante y empezar a juntar los elementos de la interfaz de usuario antes de poner nada. Muy bien, lo primero que
pondremos aquí en la parte superior será nuestra vista de imagen. Ahora bien, no hemos hablado de las vistas de imágenes, pero las
vistas de imágenes, como su nombre lo indica, es una vista que contiene imágenes. Entonces, si desea poner imágenes en nuestra aplicación
aquí para que los usuarios puedan ver, tenemos que insertar aquí una vista de imagen.

¿Cómo conseguimos visualizaciones de imágenes? Bueno, vamos aquí en la parte inferior de nuestra
biblioteca de objetos, podemos desplazarnos hacia arriba y hacia abajo para encontrarlo o podemos continuar y escribir
y decir vista de imagen y ya está : Vista de imagen. Muy bien, vamos a hacer clic y arrastrar aquí,
vamos a tratar de asegurarnos de que esté bien allí. Es bueno, muy agradable y tenemos nuestra
vista de imagen aquí, y una cosa que me gustaría señalar. Entonces puede hacer clic en la vista de imagen, miramos en
nuestro inspector aquí, notará que hay muchas cosas que podemos hacer con nuestra imagen,
así que ahora que tenemos nuestra vista de imagen, necesitamos ir y obtener una imagen. Así que todavía no tengo una imagen, así que lo que
vamos a hacer es ingresar a Google y buscar solo una linda imagen
de mascotas.

Muy bien, voy a seguir adelante y
abrir una ventana de Google aquí, así que abre Google aquí y vamos a escribir,
digamos, imágenes de mascotas y hay algunas. Pasemos a las imágenes aquí. Ok, lo que es bueno aquí, vamos a conseguir este aquí,
suena como uno muy hermoso. Así que digamos que haga clic con el botón derecho en Guardar imagen como, Guardar. Eso es genial, ahora vamos a seguir adelante
aquí. Ahora, poner la imagen en nuestro proyecto es bastante
simple. Todo lo que tenemos que hacer es navegar hasta donde
colocamos la imagen, por lo que en nuestro caso está en el escritorio y simplemente arrastrar y soltar.

A ver aquí, ahí está, esa es nuestra imagen. Lo que vamos a hacer, simplemente arrástrelo y suéltelo
aquí y céntrelo aquí nuevamente, y lo que debemos hacer, queremos asegurarnos de que diga
elementos de copia de destino si es necesario y crear grupos también, y eso es realmente importante
porque queremos asegurarnos de que incluso si cambiamos la ubicación de la imagen, la imagen seguirá
estando incluida en nuestros proyectos. Así que digamos que termine y verá de
inmediato que allí está nuestra imagen de mascota. Ok, se está cargando, si haces clic en él, y
ahí está. Muy bien, volvamos a nuestro guión gráfico
aquí y ahora podemos hacer clic en la imagen e ir a la derecha aquí, en nuestro inspector de atributos,
haga clic en el menú desplegable de la imagen.

Allí verá la imagen de la mascota, así que simplemente haga clic
en ella y verá nuestra imagen de la mascota. Ahora la otra cosa, así que haga clic en esa imagen
y podrá ver que hay muchos otros atributos aquí, uno de los cuales es que queremos asegurarnos de
que el modo que vamos a cambiar se llene de aspecto. Ahí vamos, está bien, ahí se ve
muy bien, tenemos nuestra imagen aquí de estas hermosas mascotas aquí. Tenemos gatos y perros, así que eso debería ser bueno. Muy bien, ahora vamos a seguir adelante y
tener aquí nuestro campo de texto, porque eso es lo que los usuarios van a usar para ingresar el nombre
de su mascota. Así que tengo un desafío para ti. Quiero que vayas e insertes un campo de texto aquí
en la parte inferior. Entonces, lo que harías sería buscar
el campo de texto y ponerlo aquí. Muy bien, adelante. En este momento, probablemente haya terminado y
si no logró obtener el campo de texto , está bien. Así que así es como lo haces.

Podríamos desplazarnos aquí en la parte inferior
de nuestra biblioteca de objetos aquí o podríamos continuar y decir campo de texto y ahí está,
así que simplemente arrástrelo y suéltelo aquí. Puedes ver que está centrado aquí, así que suéltalo
y pasemos el cursor hacia la izquierda para hacer y hacer clic y luego vamos a arrastrarlo
hasta allí, ¿de acuerdo? Y haz lo mismo aquí a la derecha, hazlo
un poco más grande y listo. Entonces, ahora que hemos hecho clic en este campo de texto,
mire nuestro inspector aquí, hay muchas cosas que puede hacer como mencionamos en
videos anteriores, pero una de las cosas que me gustaría señalar es que tenemos este marcador de posición
aquí. Entonces, si hace clic en el marcador de posición, puede
ingresar texto como puede ver, el texto se mostrará aquí en gris.

Ahora, lo que hace este marcador de posición es que permite a los
usuarios tener una idea de lo que se requiere de ellos para ingresar, ¿de acuerdo? Entonces podemos poner aquí podemos decir Ingrese el nombre de la mascota a la
derecha. Así que aquí está atenuado, pero dice que ingrese
el nombre de la mascota. Ejecutemos esta aplicación ahora mismo para que podamos ver
exactamente cómo se ven las cosas. Bien, corre, con suerte la compilación tendrá éxito
para que podamos ver la aplicación. Bien, ahí vamos, compilación exitosa. Ok, está funcionando, está bien, ahí está. Como puede ver, tenemos nuestra imagen aquí en
la parte superior con estas lindas mascotas, y luego tenemos aquí nuestro campo de texto.

Ahora, como puede ver, en el momento en que hace clic en
él y aparece el teclado y, observe aquí, enfóquese en el campo de texto real aquí, en el
momento en que comienza a escribir algo, adivine qué: todo ese marcador de posición desapareció, así que
bórrelo; allí aparece Ingresar nombre de mascota. Bien, está funcionando, así que ese es el atributo de marcador de posición
que podemos usar en nuestros campos de texto.

De esa manera, podemos decirles a los usuarios qué se
requiere que ingresen en nuestro campo de texto. Muy bien, eso es genial. Bien, volvamos aquí. Ahora tenemos nuestra imagen, tenemos nuestro campo de texto. Lo que necesitamos ahora es un botón aquí, así que adelante
, arrastre un botón y colóquelo aquí abajo. Por favor, mira si puedes manejarlo. Muy bien, estoy seguro de que pudiste entender eso,
así que voy a seguir adelante y decir botón aquí, así que toma el primero aquí y vamos
a seguir adelante y ponerlo aquí y ver si está el medio allí. Perfecto, vamos a hacer doble clic,
voy a decir enviar nombre, está bien. Bien, ahí va, el nombre de envío está allí
y, por supuesto, puede continuar y cambiar el color, los colores del texto y cualquier otra
cosa que desee aquí.

No voy a entrar en eso, pero eres
más que bienvenido a volverte loco con el diseño y asegurarte de que se vea como quieres que
se vea. Ok, ese va a ser uno de tus ejercicios. Vuélvete loco, cambia las fuentes de color y lo que
quieras. Ok, por ahora solo voy a ir con lo
que tengo aquí, así que enviar el nombre está ahí, ahora vamos a seguir adelante y colocar aquí una
etiqueta de texto aquí, que cuando se hace clic en Enviar nombre , continuará y obtenga lo que los usuarios
ingresen aquí en nuestro campo de texto y luego muéstrelo aquí.

Muy bien, entonces lo que vamos a hacer, vamos
a volver aquí a nuestra biblioteca de objetos y decir etiqueta y ahí está, nuestra etiqueta. Vamos a ponerlo en la parte inferior aquí en el medio. Hagámoslo un poco más grande así que
vamos así y ahí está, y todo el camino, volvamos aquí y bien, allá
vamos. Probemos de nuevo y ahí está. Bien, ahí está nuestra etiqueta. Otra cosa que quiero, quiero asegurarme de
que esté centrado para que la alineación esté centrada. Así que seguiré adelante y haré clic en esta segunda
opción aquí, centrada, justo aquí. Bien, de nuevo, si quieres seguir adelante y
cambiar los colores y cualquier otra cosa, eres más que bienvenido. Eso es maravilloso. Muy bien, ahora tenemos nuestra interfaz de
usuario lista para funcionar; vamos a ver. Voy a detener el simulador ahora y
volver a ejecutarlo; Voy a echar un vistazo y ver cómo se ven las cosas. Muy bien, se está ejecutando y ahí está, aquí está
nuestro botón: enviar nombre. Por supuesto, nada funciona realmente porque
no hemos escrito ningún código que luego procese toda esta información aquí, lo cual
está bien.

Vamos a hacer esto en el próximo video,
como puede ver aquí, nuestra aplicación está a la mitad. Tenemos nuestra interfaz de usuario lista para
usar con nuestros abrigos, ahora el próximo video vamos a ir y comenzar a armar
el código y finalizar nuestra aplicación. Muy bien, entonces nos vemos en el próximo video..

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *