Transcripciones
1. Introducción: Hola y bienvenidos. En este reto
principiante de 14 días, vas a empezar tu
viaje con una bang. Vas a aprender
cómo se hacen las aplicaciones y cómo terminan
en la tienda de aplicaciones. Te vas a
familiarizar con Xcode y ahí iniciar tu
propio proyecto de app. Vas a
aprender a construir interfaces de
usuario con Swift UI. Y vas a aprender los conceptos básicos de programación de
Swift para que puedas leer y escribir código Swift
simple. Ahora en las próximas 14 lecciones, vas a ganar todas
estas nuevas habilidades. Y vas a haber construido tu propia app que
puedes instalar en tu dispositivo y mostrar a todos tus amigos y
familiares lo que has hecho. Más importante que eso, sin embargo, estarás extremadamente confiado
y emocionado de seguir creciendo tus habilidades de
desarrollo de aplicaciones más allá de lo que hemos cubierto aquí. Esto realmente podría ser el inicio
de algo nuevo para ti. De acuerdo, Entonces si estás
listo,
enrollemos las mangas y empecemos.
2. 01: el ecosistema de desarrolladores de Apple Desarrollador: Voy a caminar por
este diagrama y después, te
diré dónde
sacar todas las piezas, todo
empieza con
el Xcode IDE. Ahora, IDE significa Entorno de
Desarrollo Integrado, que es un término para
la aplicación y todas las herramientas que un desarrollador
utiliza para construir algo. Para el resto de este curso, simplemente lo
llamaremos Xcode. Aquí es donde construimos nuestra
aplicación escribiendo código Swift, construyendo la
interfaz de usuario o UI para abreviar, y conectándola
con todos nuestros datos. Swift es el
lenguaje de programación que utilizamos para expresar nuestra lógica y para decirle al
sistema lo que queremos hacer. Incluso podemos construir la
interfaz de usuario a través de código rápido, como pronto verás. Ahora, Swift UI es un
marco de interfaz de usuario que nos facilita construir rápidamente aplicaciones para todas
las plataformas apple. Un buen beneficio de
aprender Xcode, UI
rápido y rápido es que
son las mismas habilidades y herramientas utilizadas para construir todas las aplicaciones para todas las plataformas de
Apple, incluyendo iOS, iPados, tvOS, watchOS, y Mac OS. Y en algunos casos, tu app podrá trabajar en múltiples plataformas sin
muchos cambios en absoluto. Ahora, una vez que tu aplicación esté construida, podrías distribuirla
con la App Store de Apple. Esto se hace uniéndose al Programa de Desarrolladores de
Apple, que requiere una cuota
anual de inscripción. Una vez que estás inscrito, obtienes acceso a múltiples beneficios, entre ellos el portal de conexión de App
Store, vuelo de
prueba y el portal de
aprovisionamiento. Hay algunos beneficios más,
como el acceso al software
beta y el soporte técnico
de los ingenieros de Apple. Y proporcionaré un enlace
a la lista completa a continuación. El portal de aprovisionamiento te
da acceso a herramientas para identificar y firmar
código tu aplicación. Es como poner tu
firma en la app para que Apple pueda
identificar quién la construyó. Y esto es importante
para la seguridad de los usuarios finales
descargando tu app. Y también es importante
para ti porque detiene los codificadores
maliciosos de
fingir ser tú. Una vez que tu aplicación esté en
un estado comprobable, vuelo de
prueba
te permite invitar
a personas a descargar y probar tu aplicación
beta. Allí podrá enviarle
comentarios e informes de errores directamente a través
del programa de vuelo de prueba. Usa el vuelo de prueba para
asegurarte de que tu aplicación esté tan pulida como puede
ser antes del lanzamiento. Y por último, App Store
connect es donde crearás
lo del atlas para tu app, incluidos todos los
metadatos y capturas de pantalla. Si tu app tiene
en compras de app, aquí también es donde las
configurarías. Una vez que tu aplicación esté probada
y el listado esté listo, puedes subir la
app desde Xcode a App Store conectarte desde ahí, el equipo de certificación de
Apple revisará tu aplicación para asegurarte de que cumpla con la App
Directrices de calidad de tienda. Esto toma un par de días y no te
preocupes si
fallas porque
puedes arreglar lo que
señalen y volver a enviarlo para revisión. Si todo se ve bien, aprobarán la app
y tu app estará en vivo. Enhorabuena. Muy bien, entonces, ¿dónde puedes conseguir estas diferentes piezas del Ecosistema de Desarrolladores de
Apple? Puedes descargar Xcode
gratis desde la Mac App Store. Voy a proporcionar un enlace a continuación. No necesitas obtener
Swift o Swift UI. Esos solo vienen con Xcode. En cuanto al Programa de
Desarrolladores de Apple, proporcionaré un enlace a la página de
Inscripción que aparece a continuación. Quiero mencionar que unirte
al Programa de Desarrolladores de Apple es completamente opcional si tu objetivo no es distribuir apps en el
App Store, no te unes a él. Seguirás siendo
capaz de aprender a construir aplicaciones para ti mismo. Entonces ese es el Ecosistema de
Desarrolladores de Apple. Es el proceso por el que te
estaré llevando si continúas
con este viaje de app. Ahora al final de
esta ruta de aprendizaje, estarás construyendo tus propias aplicaciones usando todas estas herramientas
que hemos cubierto, aunque no tengas experiencia en
codificación en este momento, te lo
prometo,
serás sorprendido por
lo que se puede hacer al
final de este reto. En la siguiente lección, vamos
a sumergirnos directamente en Xcode. Está bien, nos vemos ahí.
3. 02: tutorial de Xcode tutorial: Hola y bienvenidos. En este tutorial de Xcode, te vas a
familiarizar con el entorno de desarrollo en el que estarás construyendo aplicaciones. Te mostraré dónde
descargar Xcode y cómo iniciar un
nuevo proyecto de app. Y luego vamos a
pasar por las grandes áreas de Xcode y luego lo que cada uno de los archivos en tu proyecto de
app es de cuatro. Y luego finalmente,
terminaremos la lección con algunos consejos rápidos sobre cómo
navegar en Xcode. De acuerdo, con eso
dicho, vamos a sumergirnos. Empecemos
hablando de dónde conseguir Xcode. Es gratis, así que no
necesitas pagarlo. Simplemente inicia la Mac App Store en tu computadora y
luego busca Xcode. Vas a llegar a una página como esta en los resultados de búsqueda. Haga clic en él, y vas a poder
descargarlo de forma gratuita. Por lo que ya lo
tengo descargado. Entonces por eso
dice actualización aquí. Yo quiero que simplemente
ignoren la advertencia aquí. En realidad es una aplicación muy grande con muchas características
diferentes. Es comprensible que
haya algunos bichos. Y si miras las reseñas, hay personas que se
quejan de otras cosas
no relacionadas con la app. quejan de la forma en que Apple está manejando su negocio
y así sucesivamente y así sucesivamente. Y algunos de estos
son muy, muy viejos. De acuerdo, quiero que tomen nota de esta importante
información. Haga clic en esto solo
para asegurarse cuáles son
los requisitos
para instalar Xcode. Y también vuelve a comprobar que
tienes suficiente espacio libre en el
disco duro. Ahora en mi experiencia, realidad
toma más espacio en el disco
duro a lo largo del tiempo. Entonces lo que dice aquí. Entonces si tienes algo así
como 12 gigs gratis, podría no
dejarte instalar esto porque durante el
proceso de instalación en realidad ocupa más espacio y
luego creo que se deshace de un montón de archivos y
se detiene a este tamaño. No obstante, con el tiempo,
cuando descargas componentes de desarrollador
adicionales y simuladores adicionales de iOS, esto en realidad puede
llegar a ser aún mayor. Así que asegúrate de tener
suficiente espacio en disco duro. Está bien, así que si por alguna razón no
puedes obtener acceso
al Mac App Store, también
puedes visitar la página oficial de Xcode en
el sitio web de desarrolladores de Apple. Por lo que la URL es desarrollador
dot apple.com slash Xcode. Y de inmediato puedes dar click en el enlace Recursos aquí arriba. Y luego te llevarán
a una página donde podrás descargar Xcode aquí solo te lleva por
la Mac App Store. En realidad, también puedes descargar versiones
beta de Xcode. Ahora no
recomendaría esto porque muchas veces en realidad
es bastante buggy. Ahí software beta. Por lo que recomendaría apegarse
a los lanzamientos oficiales. Si por alguna razón quieres descargar una
versión anterior de Xcode, puedes desplazarte aquí abajo y puedes hacer clic en
este enlace aquí. Ahora solo una nota, para
poder descargar versiones
beta del software de Apple, necesitas estar inscrito en
su Programa de Desarrolladores de Apple, que hablamos
en la lección anterior. Para descargar
versiones anteriores de Xcode, no
creo que necesites estar
inscrito en ese programa. Creo que solo necesitas
una Apple ID gratis. Y por último, si estás en un
PC, estás ejecutando Windows. Consulta los recursos
en el inicio
del curso para ver opciones para ti. De acuerdo, así que ahora aprovecha
para descargar e instalar Xcode
si aún no lo has hecho, para luego lanzarlo por primera vez. Durante tu primer lanzamiento, te
va a pedir
tu contraseña administrativa para tu contraseña administrativa para instalar componentes de
desarrollo adicionales. Vas a querer hacer esto. Así que adelante e
ingresa tu contraseña de administrador. Después de que hayas hecho eso,
sigamos con el
resto del video. Está bien, así que ahora
hablemos de cómo iniciar un nuevo proyecto Xcode. Esta debería ser la
primera pantalla de bienvenida que veas cuando
inicias Xcode. Si no ves
esto, no te preocupes, siempre
puedes ir a Archivo
Nuevo y elegir proyecto. De lo contrario, desde esta pantalla de
bienvenida, puedes seguir adelante
y hacer clic en Crear un nuevo proyecto Xcode desde aquí. Desde aquí vas a elegir una plantilla para tu nuevo proyecto. Vas a configurar las propiedades del proyecto para esto, y luego vas a
elegir un lugar para guardarlo. Entonces empecemos
eligiendo una plantilla. El más básico para nuestros
propósitos está bajo iOS y app. Así que adelante y elige
eso y golpea Next. Y luego aquí
vas a configurar las propiedades para tu proyecto. Entonces si no tienes
equipo aquí, no te preocupes. Posteriormente puedes agregar
tu cuenta de Apple aquí y luego puedes configurar
el equipo para el proyecto. Algo de lo que querrás
asegurarte sin embargo, es establecer aquí el
identificador de tu organización. Si tienes un negocio
o un sitio web, puedes usar el nombre de estilo de
dominio inverso aquí, com dot, cualquiera que sea. E incluso puedes usar tu y
apellido
aquí si quieres. Y luego aquí
rellenarías el nombre de tu app o el nombre del producto. Entonces aquí, si lo pongo a prueba, verás que este identificador de
paquete es una combinación del identificador de
organización más el nombre del producto. Y esto en conjunto forma este
único identificador de paquete. Este identificador de paquete se utiliza en diferentes lugares
para identificar tu aplicación, como en la tienda de aplicaciones o
en el portal de aprovisionamiento, o en App Store connect. Entonces esto es muy importante. No te preocupes, puedes cambiar el identificador del paquete para
tu proyecto más adelante. Yo solo quiero llamar
su atención sobre
cómo se forma y para
qué se utiliza. Muy bien, a continuación. Tu interfaz,
vas a
asegurarte de que tengas seleccionado
Swift UI. Y para el ciclo de vida,
vas a
asegurarte de tener seleccionada la aplicación Swift
UI. Y luego finalmente para el lenguaje, elige rápido y
para estas opciones, solo déjalos todos sin marcar o si están revisados,
solo desmarcarlos. Ahora una breve nota sobre estos
desplegables aquí mismo. Con el tiempo, a medida que el desarrollo de aplicaciones
para iOS ha evolucionado, ha
habido un par de lenguajes de programación y también un par de formas de
construir interfaces de usuario. El último y más grande
es la UI rápida y rápida. Entonces eso es lo
que queremos estar usando. Adelante y golpeemos Next. Si estás contento con todas
tus selecciones aquí, y luego elige un
lugar para guardarlo. Simplemente lo voy a
guardar en mi escritorio para que sea fácil de encontrar. Ya que ya tengo
su proyecto ahí, sólo lo iba a reemplazar. Muy bien, Bienvenido a su
nuevo proyecto Xcode. Ahora podría parecer
abrumador con todos los diferentes
paneles y áreas, pero en realidad no es tan complejo una vez que sabes cómo
se descompone, en realidad solo
hay
cuatro áreas principales de Xcode. Empecemos desde la
muy, muy izquierda. Aquí tenemos el panel del navegador o el Área del Navegador en, como puedes ver aquí, tenemos un listado de archivos
de todos los diferentes archivos
en nuestro proyecto de app. El área del navegador en realidad tiene diferentes pestañas para
navegar por diferentes
cosas también, a las
que llegaremos en
futuras lecciones por ahora, está configurada en la primera pestaña y tenemos un listado
de nuestros archivos. Al hacer clic en un archivo, cambia
lo que se muestra
en esta gran área principal, y esto se llama
el área del editor. Nos permite
editar los archivos que lo
elegimos en el navegador de
archivos, puedes ver que se adapta al tipo de archivo
que elijas. Elige un archivo swift de puntos, esos son archivos de código. Si elijo este archivo de activos de XC, esta es una biblioteca de imágenes, así que me está mostrando
algo como esto. El área del editor es un lugar para editar el archivo
que elijo aquí. Por lo que el último tabulador está en el lado muy derecho y esto se le llama el área de
inspector. Y o bien me muestra información
adicional adicional sobre lo que seleccioné el área del editor, o me permite configurar
o editar lo que selecciono en el
área del editor dependiendo en qué tipo de editor
estoy trabajando actualmente. Entonces, por ejemplo, este es un editor de código porque estoy
mirando un archivo de puntos swift. Cuando paso el cursor sobre o
selecciono la palabra clave aquí, si estoy en esta pestaña de Ayuda rápida, me está mostrando información
rápida sobre para qué sirve esa pieza de
código o palabra clave. El panel inspector también tiene un par de pestañas
diferentes aquí arriba. Por ejemplo, esta
es una pestaña de identidad. Me muestra información sobre ese archivo que
tengo seleccionado sobre dónde se encuentra y qué app
se incluye en un si estábamos construyendo
nuestra interfaz de usuario. Ahora si fuera a seleccionar uno de esos elementos e
ir a esta pestaña, me permitiría
configurarlo. Entonces, para resumirlo, el panel
inspector aquí es contextual a lo que se
selecciona en el área del editor. Y el
área del editor es contextual a lo que se selecciona en
el área del navegador. Por lo que todo deriva de lo que
seleccionas aquí en el
lado izquierdo primero. Y luego cruzando la parte superior, tenemos la barra de herramientas aquí. Déjame
explicarte qué es esto. Aquí hay un botón a
la izquierda y muy derecha para esconderse y mostrar al
navegante e inspector. Estos son útiles si no tienes mucha
pantalla inmobiliaria. Lo siguiente que quiero
llamar su
atención es en el medio aquí. Esta es la barra de estado. Te dice lo que está sucediendo
actualmente. ¿ Qué hace Xcode? ¿ Tiene algún error? ¿ Tiene alguna advertencia, y así sucesivamente y demás. A la izquierda de eso, tienes un desplegable
para seleccionar un simulador. Y este simulador de iOS
es básicamente un dispositivo virtual que aparece en la pantalla donde puedes
ejecutar tu app y probarla. En realidad no necesitas
un dispositivo físico. Si sí tienes uno,
por muy nuevo que sea, conéctalo y quieres ejecutar tu proyecto Xcode en
tu dispositivo real, encontrarás que
será seleccionable desde aquí
una vez que lo conectes. Y luego a la
izquierda de este menú, vas a ver un par de botones aquí para
ejecutar tu proyecto. Golpear este botón en realidad
ejecutará tu proyecto en este simulador. Y golpear el botón de parada dejará de ejecutar tu proyecto
en el simulador. Y luego todo el camino
por el lado derecho, también
hay dos botones más. Este es el botón de biblioteca
donde vas a encontrar diferentes elementos de la
interfaz de usuario, diferentes formas de
modificar esos elementos. Código fragmentos en los activos
que has agregado al proyecto, los colores que has especificado para tu
proyecto y así sucesivamente. Este pequeño panel de biblioteca
es útil para hacer una búsqueda. Y para seleccionar rápidamente y agregar cosas al área del editor. Vamos a llegar a
eso en la siguiente lección. Pero por ahora, ese es
el área de la biblioteca. Esto, probablemente no usarás
demasiado al principio. Se trata de un tipo
de botón de revisión
o revisión de código que te
mostrará si estás
usando el control fuente, cómo se han
cambiado tus archivos a través del tiempo. Por lo que esas son las
cuatro áreas principales de la interfaz de usuario de Xcode. Muy bien, ahora repasemos los archivos de tu nuevo proyecto. Empecemos desde lo más alto. Este es el nodo raíz, o es su archivo de proyecto. Si seleccionaste, el
área del editor cambiará a esta pantalla de configuración
para que edites algunos de esos detalles que
pertenecen a tu proyecto. Por ejemplo, aquí está el identificador de
paquete
que es cambiable. Se puede configurar la
orientación del dispositivo en qué dispositivos y en qué plataformas se pueden ejecutar,
cosas así. Si bajamos un nivel, se
puede ver que aquí
hay dos carpetas. Este está conteniendo todos tus archivos de código
y archivos de proyecto. Este producto uno
contiene la salida. Cuando construyes tu
app y la compilas,
se convierte en esta app, que en última instancia es ese
pequeño paquete
o paquete implementable que enviamos
a la App Store. Realmente no tienes que hacer
demasiado aquí con esto, pero ahí es donde se almacena. Muy bien, echemos
un vistazo a este expediente. Este llevará el nombre de su nombre de producto,
app dot swift. Y puedes ver aquí
con esta etiqueta principal aquí, este es el
punto de entrada a tu app. En este punto, no hay
mucho que configurar aquí. Todo lo que realmente hace es crear esa primera vista
que el usuario ve, que es vista de contenido. Y se puede ver que este nombre asigna a la vista de contenido punto swift. Entonces echemos un vistazo a esto. Este archivo representa la
vista que ve el usuario. Ahora puedes crear vistas
adicionales, pero de forma predeterminada obtienes esta vista de
contenido para empezar. Y sí, todo es código aquí. Por lo que eso significa que
la interfaz de usuario se genera por código. Pero también hay una forma visual de personalizar
la interfaz de usuario, que verás en
la siguiente lección. Sigamos con
nuestros otros archivos. Esta, como mencioné antes, es nuestra biblioteca de activos. Aquí es donde podemos almacenar
los colores para nuestra app, así
como los iconos de la app, así
como cualquier otra imagen que queramos
agregar a nuestro proyecto. Simplemente lo arrastramos y lo
soltamos aquí. Y este es nuestro activo de imagen. Bueno, no sólo imágenes
sino Biblioteca de Activos. Y luego tenemos un
info.plist y esta es alguna
información adicional de configuración para el proyecto. Aquí tenemos contenido de vista previa, y esta es otra biblioteca de
activos, pero estos son sólo para activos de
preproducción. Entonces solo imágenes y texto
y colores y cosas así con las que
estás probando como sugiere la vista previa del nombre, si es un activo que en última instancia
llegará a la app que vas
a empujar el App Store, entonces puedes ponerlo en la biblioteca de
activos aquí en su lugar. Entonces esa es una rápida
explicación de todos los archivos de tu
proyecto en pocas palabras. En las futuras lecciones,
vamos a profundizar en
cada una y
vas a ver cómo cada uno
de estos archivos juega
un papel en la
construcción de tu app. Lo último que quiero
hacer en esta lección es darte un
par de consejos
rápidos navegar por Xcode en cuanto a
pasar por tus archivos, y también en cuanto
a editar código. Entonces, antes que nada,
hablemos de navegar y archivos. Te darás cuenta de estas
dos flechas aquí. Estos son realmente manejables
porque te va a dejar ir al último archivo
que estabas mirando. Y aunque ahora parece
un poco trivial, cuando estás
saltando por la edición y los archivos, esto se vuelve realmente útil. En lugar de tener que ir y volver a seleccionar ese archivo
desde el navegador, puedes simplemente retroceder y saltar de nuevo a ese archivo anterior. También notarás que
puedes tener varias pestañas aquí. Por lo que puedes mantener presionado el
control y puedes hacer clic en un archivo y
siempre puedes elegir abrir en nueva pestaña. También puedes abrir en una ventana
nueva si quieres. Entonces como ya
tengo eso como tabulador, entonces no me va a
abrir una segunda pestaña. Ahora bien, si quieres tener
cosas de lado a lado, puedes hacerlo también. Entonces digamos que quería mirar estos
dos archivos uno al lado del otro. Para que pueda cerrar esto. Y luego puedo
seguir adelante y puedo agregar otro panel de editor
en el lado derecho, para que pueda dividir mi
área de editor en dos áreas de Editor. Se puede ver que
aquí estoy mirando la vista de
contenido que
rápido para aquí. Echemos un vistazo a la aplicación de prueba. Por lo que son áreas independientes. Podría querer
deshacerme de mi lienzo. Y entonces puedo ver a
ambos PFOS así. Si prefieres que se apilen
horizontalmente, puedes mantener presionada la opción. Y se puede ver que
ese icono cambia. Correcto, si vuelves a pulsar
este botón, se va a añadir otra área de
editor a la derecha. Entonces te vas a
dividir en tres. O bien puedes mantener presionada Opción y puedes agregar un
editor a la parte inferior en su lugar. Entonces haces eso. También puedes hacer eso aquí, mantener presionada Opción y hacer eso. Ahora una forma rápida de lanzar un archivo en una vista dividida del editor. Entonces digamos que estoy mirando la aplicación de
prueba y quiero abrir
la vista de contenido como un área de editor
independiente. Puedo mantener presionada Opción y
hacer clic en el archivo que
quiero abrir en una vista
separada del editor. Entonces esas son algunas de las formas que puedes trabajar
con tus archivos. Tan solo para recapitular, puedes navegar. Se puede volver atrás y seguir adelante. Puedes tener diferentes pestañas. Y luego también puedes
dividir tu área de editor en múltiples instancias
del editor. Ahora quiero
hablar de editar código porque esto es mucho de
lo que vas a estar haciendo. Y el código se ve
bastante corto en este momento, pero puede llegar a ser más largo. Por lo que es útil conocer un par
de formas de lidiar con eso. En la parte superior aquí,
vas a ver este tipo de menú de migas de pan. Y notarás que ese es el nodo raíz corresponde
a eso, ¿verdad? Esta es una carpeta o
grupo, puede ver eso. Y luego esta es
la vista de contenido, que es el archivo que
estás mirando, que está aquí dentro de las pruebas. Y aquí, en realidad podemos hacer clic en esto y puedes saltar a
diferentes secciones de tu código. Se puede ver que la
vista de contenido coincide con eso. Cuerpo coincide con eso, ¿verdad? Por lo que esta es una gran
manera de saltar a diferentes secciones
en su archivo de código en caso de que su archivo de código
se vuelva bastante largo. También puedes agregar diferentes
comentarios aquí que corresponderán a
lo que ves aquí arriba. Por lo que puedes ver
aquí, he creado mi propia documentación
y la agrega aquí. Por lo que esta es una gran
manera de organizar tu archivo. Vamos a volver a hablar
de esto en el futuro. Entonces no te preocupes si esto
va un poco demasiado rápido. Muy bien, Ahora vamos a
hablar de este pequeño botón aquí. me has visto usar esto
para abrir el Canvas, pero también puedes abrir
este minimapa aquí mismo. Y este minimapa
te mostrará un esquema de
tu archivo de código. Puedes arrastrar esto para
fregar a través de tu código. Desafortunadamente, no puedo
hacerlo mucho aquí porque este
archivo de código no es muy largo. Pero si tuvieras un archivo de código
realmente largo, te
mostraría el contorno de ese archivo de código aquí abajo. Y puedes navegar realmente fácilmente haciendo clic
y arrastrando esto. Te darás cuenta de que
incluso como resalté, me
va a mostrar las
diferentes partes de mi código correspondientes
a lo que tenemos aquí. Nuevamente, esos eran solo
algunos consejos de fuego rápido. No te preocupes si eso voló
demasiado rápido porque estaremos usando todas estas cosas juntas en las
próximas lecciones. Entonces ese es un tutorial rápido
para que empieces. No tan complicado una vez que
sabes dónde están las cosas bien, Solo para recapitular,
descubriste dónde descargar Xcode y cómo
iniciar un nuevo proyecto de app. Aprendes para qué sirve cada uno de los
archivos de tu proyecto. Y aprendes las principales áreas de Xcode incluyendo el navegador,
el editor, el
inspector, la barra de herramientas. Por último, también
aprenderás algunos consejos rápidos sobre cómo
navegar con ese Xcode. Ahora, no te preocupes
si es un
poco abrumador en este momento, te sentirás como en casa con Xcode ya que lo usamos más a menudo juntos en las próximas lecciones para ayudarte a instalarte, En realidad creé una hoja de trucos
Xcode la
cual puedes
imprimir y mantenerte a tu lado ya que estás aprendiendo a usar Xcode, te
recomiendo encarecidamente
que intentes crear tu propio proyecto Xcode en tu propia computadora solo
para una práctica extra. En la siguiente lección,
y vamos a usar Xcode para construir nuestra
primera interfaz de usuario. Está bien, nos vemos ahí.
4. 03: cómo construir interfaces de usuarios: Hola y bienvenidos. En esta lección,
vas a aprender a usar Xcode podría construir
interfaces de usuario con Swift UI. Primero vamos a
aprender a previsualizar la aplicación para que realmente
puedas ver cómo es la interfaz de
usuario. No te muestran cómo usar Xcode
para
construir visualmente la interfaz de usuario o la
interfaz de usuario para abreviar. Ahora hasta ahora, el aprendizaje ha sido
bastante pasivo, lo que significa que solo puedes
sentarte y ver los videos. Pero a partir de ahora,
vamos a cambiar a un aprendizaje
más activo. Yo quiero que hagas lo que hago, repliques en tu
propio proyecto Xcode. Y quiero que intenten
cualquiera de los retos que ustedes, esta es la mejor manera de aprender. Y con toda franqueza, si solo
vas a
sentarte y ver las lecciones
y no hacer nada del trabajo. No estás haciendo lo
mejor de tu tiempo. Esta ha sido mi experiencia
personal y creo que será lo
mismo para ti. Entonces si estás listo, vamos a empezar a
ensuciarnos las manos. Hagámoslo. Empecemos por crear un
nuevo proyecto Xcode. Vamos a elegir la aplicación para iOS. Y voy a llamar a
esto una prueba de UI. Simplemente asegúrate de que las interfaces Swift UI ciclo de vida es rápida aplicación
UI y el lenguaje es rápido Aparte de eso, puedes
nombrarlo lo que quieras. Sigamos adelante y
salvemos nuestro proyecto. Y como mencioné en
la lección anterior, punto de vista de
contenido Swift
representa tu vista. Pero como puedes ver, todo
es código. Entonces, ¿cómo ves realmente
cómo se ve tu IU? Bueno, hay dos maneras
diferentes. El primer modo es
lanzar tu app en un simulador de iOS,
como mencioné antes. Entonces sigamos adelante
y hagamos eso primero. Selecciona uno que te apetezca. Por lo que voy a
seleccionar el iPhone 11. Y voy a golpear este botón de
construir y ejecutar. Ahora es la primera vez que lanzas
el simulador de iOS. Va a tardar un
tiempo en arrancar, igual que sería arrancar un dispositivo real para mí porque ya he lanzado
el simulador antes. Está sucediendo de verdad,
muy rápido. Como puedes ver, por defecto, tu proyecto tiene una etiqueta
Hello World. Vamos a
hablar de eso en un segundo. Pero primero, déjame mostrarte la otra forma en que puedes
previsualizar tu app. Entonces sigamos adelante y
detengamos nuestro proyecto. Y eso va a impedir que la aplicación se ejecute en el simulador. La segunda forma es previsualizar tu app en este
lienzo aquí mismo. Eso es parte del área de editores. Si no ves esto, puedes hacer click en este
pequeño botón aquí y asegurarte de que haya una marca de
verificación al lado de Canvas. Y si estás
mirando un archivo de punto swift, que es una vista, vas
a poder ver este Canvas. De lo contrario, si estás
mirando este archivo de punto de entrada aquí, puedes ver que no
hay vista previa. Entonces volvamos a
la vista de contenido. Asegúrate de que tenemos nuestra vista previa
aquí y haz clic en currículum. Se va a construir y a ejecutarlo. Y luego vas a
ver la vista previa aquí. Otra vez. Si es la primera
vez que lo haces, podría tardar un poco. Usemos los
controles de zoom aquí abajo y alejemos un poco para que
podamos ver todo el asunto. Ahora justo al lado del bate, hay un par de cosas
que quiero mencionar aquí. Esto es simplemente una vista previa, mientras que cuando inicias
eso en el simulador, realmente
estás
instalando esa aplicación en un dispositivo virtual para que puedas interactuar
con ella y probarla. Aquí, esta es una vista previa con la que no
puedes interactuar, pero hay una forma en la que puedes. Entonces si haces clic en este
botón aquí,
vista previa en vivo entra en un modo
donde es
igual que el simulador
que viste antes. Pero está en este lienzo de vista previa. Para que puedas seguir adelante
y golpear Stop. Y entonces de nuevo, sólo se
convierte en un adelanto normal. Eso es sólo para fines de
previsualización. Otra cosa genial de usar este lienzo de vista previa es que
puedes presionar este botón aquí y puedes elegir
un dispositivo diferente. Puedes elegir un diseño, puedes elegir el
modo oscuro o el modo claro, y puedes elegir una serie
de cosas diferentes. Esta es la
forma preferida de previsualizar tu IU
porque a medida que estás construyendo tu IU a través del
código de este lado, vas a poder ver que las cosas cambian a la derecha aquí sin tener para relanzar
la app en el simulador. Muy bien, ahora vamos a
sumergirnos y hablar de cómo vamos a
construir realmente la interfaz de usuario. Así que asegúrate de tener la
vista de contenido dot swift resaltado y sigue adelante y oculta
el navegador de archivos. Ahora hay un montón de código
aquí que conforman la vista. Pero lo vamos a
pasar a fondo más adelante cuando aprendas algunos de los conceptos básicos de
programación Swift por ahora,
para evitar confusiones, solo
quería llamar tu
atención sobre una cosa, que es esta pieza
de código aquí mismo. Lo que he destacado en
la pantalla es lo que está generando esta etiqueta aquí
que se ve en la vista previa. Observe que tenemos
una palabra clave de texto. Tenemos la pieza
de texto holomundo que puedes ver aquí. Y también tenemos este elemento
de relleno aquí, que da el relleno
alrededor de la palabra. Echemos un vistazo a esta pieza de código y lo desglosemos. En realidad sólo voy a seguir
adelante y eliminarlo. Como puedes ver,
Xcode va a lanzar todo tipo de
quejas y errores. Pero no te preocupes, lo
vamos a arreglar enseguida. Ahora, nuestros
elementos de interfaz de usuario tienen que vivir entre este soporte de apertura
y este corchete de cierre. Y solo se puede tener un elemento de interfaz de
usuario. Ahora obviamente eso no tiene
sentido porque nuestras interfaces de usuario están
conformadas por más de un elemento. Pero ahí es donde entran en juego
los elementos de contenedor. Y te mostraré un par de
esos de esta lección también. Por ahora, recrear
ese elemento de texto. Entonces lo que escribimos es esa palabra clave de
texto
seguida de un par de corchetes como
ese, corchetes redondeados. Y luego dentro de ahí tenemos
un par de comillas. Y luego ponemos la pieza de texto que queremos mostrar. Entonces aquí sólo
voy a poner hola. Pero notarás que
este marco azul rampa muy fuertemente contra
mi texto hola. Si quisieras agregar
el relleno hacia atrás, entonces escribirías punto. Y luego simplemente escribirías relleno y usando autocompletar, solo
puedes seleccionar
ese ahí mismo. Y así, hemos recreado esa
etiqueta con relleno. Este de aquí es el elemento de
texto o la etiqueta. Esta parte con el relleno de puntos. A esto se le llama modificador. Y se puede pensar en un
modificador como un apego a un elemento que cambia
el aspecto y el comportamiento del mismo. En este caso, este
modificador de
relleno agrega relleno a los elementos de texto para
que si hay un
elemento justo al lado de él, haya algún espacio
alrededor de nuestro elemento de texto. Y en realidad hay muchos
más modificadores que
podemos agregar a nuestros elementos de
interfaz de usuario. Por ejemplo, puedo agregar
uno llamado fondo, y solo lo agregaré al
final del relleno. Y voy a decir que el fondo para
esta etiqueta debe ser azul. Para que veas que nuestro lienzo de
vista previa representa muy bien lo que estamos
escribiendo aquí a través del código. Si hay algún momento en que
las cosas se dessincronicen, tal vez el código que estás escribiendo aquí está diciendo que el
fondo debe ser verde, pero no lo estás viendo aquí. El código se
considera la fuente de la verdad porque en última instancia, el lienzo de vista previa e
incluso lo que se ve en el panel Inspector son sólo representaciones visuales
del código. Y eso me lleva
a mi siguiente punto, que es cuando estás
construyendo la interfaz de usuario, no
tienes que escribir código. Hay tantas formas visuales
para que construyas el código. Vamos a borrar este
elemento de texto y otra vez, y déjame mostrarte algunas
de las formas en que
puedes construir visualmente
la interfaz de usuario. Hablé antes del panel de la
biblioteca. Por lo que puedes ver aquí que simplemente
podemos seleccionar, buscar el
elemento de texto seleccionado, y podemos arrastrarlo a nuestro editor de
código aquí mismo. Y luego podemos cambiar
el texto de marcadores de posición, pero ni siquiera tenemos que
cambiar el texto aquí. Si haces clic en
este elemento de texto y entras al panel de
inspector, puedes cambiarlo
aquí así. Y luego también en este panel
inspector, verás que
hay un montón de modificadores que podemos agregar. Entonces el agregar el relleno, podría hacer clic en esto para
agregar solo relleno superior. Y se puede ver que
el código cambia. Y está especificando que
solo un relleno en la parte superior. Y lo puedes ver
reflejado aquí. O puedo hacer clic en este aquí
y encender o apagar el relleno. Y ya puedes ver ahora tengo
relleno por todos lados. Entonces, además de algunos de los modificadores que ves aquí, aquí
abajo, hay un cuadro de
texto donde puedes buscar más modificadores. que pueda buscar el de
fondo y hacer clic en eso. Y luego selecciona ese fondo
azul, como puedes ver aquí. Y entonces también puedo
agregar ese relleno. Ahora, además de usar
los modificadores que
ves aquí y usar este cuadro de texto
Agregar modificador, también
puedes usar la
biblioteca para agregar modificadores. Por lo que esta primera pestaña te da todos los
elementos de la interfaz de usuario que
puedes agregar a tu vista aquí en
la segunda pestaña o modificadores. Entonces como puedes ver, ahí está el relleno, ahí está el de fondo. Entonces, ¿cómo se va a
añadir estos modificadores? Bueno, solo tienes que hacer clic
y lo arrastras. Pero aquí tienes que
asegurarte de que lo
arrastras hasta el final del código. Porque si accidentalmente lo
arrastras en
medio de tu código, puede
que no tome, o podrías conseguir
algo así. Eso claramente es un error. Entonces vamos a deshacer eso. Entonces como si eso fuera poco, hay un par de formas
más que quería mostrarte sobre cómo puedes modificar
visualmente tus elementos de la
interfaz de usuario en lugar
de escribir código. En primer lugar, terminemos
de configurar este fondo y vamos a seleccionar azul ahí mismo,
o tal vez verde. De acuerdo, eso no es cambiar eso. Entonces está cambiando eso, pero aquí no está cambiando. Entonces voy a seguir adelante
y seleccionar el color, y vamos a hacer g
verde, minúscula Muy bien, para que puedas
mantener presionada Comando en tu teclado y
luego puedes hacer click en el elemento de interfaz de usuario
desde tu vista previa aquí mismo. Y luego hay una
serie de cosas que
puedes hacer con ese elemento,
incluyendo esta, mostrar
Swift UI inspector. Y luego de nuevo obtienes
este Add Modifier, TextField, lo que puedes
buscar modificadores para agregar. Entonces voy a añadir
uno que se llama Desenfoque. Se puede ver que está
difuminando el color verde. Y se puede ver que ahora mi
fondo es un verde borroso. Ahora puedes hacer lo mismo
en los lados del editor de código. Para que puedas mantener presionado
el comando y puedes hacer clic en el elemento de texto y
obtienes este menú. Puede, nuevamente haga clic en
Mostrar inspector de interfaz de usuario de Swift. Y desde aquí se puede ver que este menú se parece
al inspector aquí. Y también podemos agregar
modificadores también. Entonces para ilustrar mi punto, te
he mostrado un montón
de formas diferentes
para que modifiques visualmente tu
interfaz de usuario. No tienes que
escribir el código. Pero con el tiempo, como estás haciendo
esto de la manera visual, estás viendo el código que se
genera una y otra vez. Vas a llegar a un
punto en el que es tan familiar, va a ser más rápido
para ti solo escribirlo lugar de
hacer clic en todas partes. Por lo que es una manera realmente ordenada de
aprender el código de la interfaz de usuario. ¿ No es eso bastante guay? Xcode ha recorrido un largo
camino en el pasado. Solía ser muy quisquilloso usar el
constructor de interfaz visual con Xcode, pero Swift UI realmente ha
cambiado las cosas para mejor. Ahora en esta lección,
aprenderás a usar el elemento de texto y tenía un modificar su aspecto y
comportamiento usando modificadores. Además de eso,
también aprendes que la interfaz de usuario en realidad se
genera a partir del código Swift. No obstante, hay una
multitud de formas en Xcode para construir tu interfaz de usuario visualmente. Y a medida que construyes
tu IU visualmente a través del Canvas anterior o
del panel inspector, como demostramos,
el código rápido en el editor de código
se actualiza automáticamente para
reflejar esos cambios. Por lo que esta es una gran
manera de aprender el código rápido. La próxima vez que nos sentemos juntos, les
presentaré vistas y
contenedores
adicionales que pueden usar para que puedan construir interfaces de
usuario
más complicadas. Está bien, nos vemos ahí.
5. 04: vistas y envases de SwiftUI: Hola y bienvenidos. En esta lección, vas a
aprender a usar una variedad de diferentes
elementos y contenedores de interfaz de usuario. Y luego al
final de la lección, te
mostraré un par de interfaces de
usuario que me
gustaría que trataras de
construirte como práctica. Recuerda,
vas a sacar mucho más de este curso
si te detuviste a lo largo la lección y trataste de
replicar lo que
he hecho en tu
propio proyecto Xcode. Muy bien hablando.
Lleguemos a la parte divertida. De acuerdo, claro, así que has
aprendido sobre el elemento de texto. Ahora quiero mostrarte
el elemento de imagen. Entonces vamos a
seguir adelante y borrar esto. Y por qué no
usamos la biblioteca para buscar el elemento de imagen. Entonces sigamos adelante y arrastremos
y soltemos la imagen ahí. Ahora el problema es que
no tenemos ninguna imagen que mostrar. Pero antes de que te diga
cómo especificar eso, acabo de notar que Es una especie de en el mismo formato que
el elemento de texto ¿verdad? Ahí está la palabra clave imagen aquí, y luego hay un
conjunto de corchetes redondos. Y en medio, vamos a poner
nuestro nombre de imagen. Ahora, este nombre de imagen se asigna a cualquier activo gráfico que hayamos
puesto en nuestra biblioteca de activos. Entonces si abrimos nuestro navegador de
archivos y entramos a nuestra biblioteca de activos, puedes ver que todo está vacío. Aquí no tenemos nada. Entonces sigamos adelante y
pongamos una imagen aquí. Si vas a los recursos de la
lección, vas a ver un
archivo zip llamado Logo assets. Y vamos a seguir adelante
y descomprimirlos. Y luego dentro vas
a encontrar una imagen local. Vas a encontrar
tres archivos en realidad. Y se les nombra de la misma manera excepto con un apt a
x y luego agregan tres x. Y eso es literalmente sólo dos veces más grande
que el primero. Y este es tres veces
más grande que el primero. Y la razón por la que vienen en diferentes tamaños es porque existen dispositivos iOS con diferentes resoluciones de
pantalla. Por lo que al agregar los tres tamaños, la plataforma elegirá el tamaño adecuado para usar para
la resolución de pantalla. Se está exhibiendo en. Entonces todo lo que tienes que
hacer es agarrar los tres y luego arrastrarlo a la biblioteca de
activos así. Va a ser
lo suficientemente inteligente para saber que esos tres están en
el mismo grupo. Y le va a
dar un nombre. Siempre puedes cambiar el nombre de
esto para que puedas hacer clic en él y puedes
nombrarlo lo que quieras. Pero este nombre aquí mismo es a
lo que vas a estar referenciando en el elemento de
imagen. Así que adelante y ponga
entre comillas, ese nombre del activo de imagen, y debería
verlo aparecer aquí. Ah, en realidad la vista previa automática, la actualización, la pausa,
sigue adelante y pulsa Reanudar. Está bien, ahí dentro
vemos nuestra imagen. Ahora por defecto,
muestra la imagen
al tamaño del
activo gráfico que importó. No obstante, si
quería redimensionarlo, escalarlo hacia arriba o hacia abajo, puede agregar un modificador
llamado redimensionable. Cuando golpees eso, se
podrá estirar. Cuando se estira si
querías mantener la relación de aspecto porque
puedes ver aquí todo está estirado y
no se parece a
la imagen original. Se puede agregar otro modificador
llamado relación de aspecto. Y no lo olvides, a
pesar de que estoy escribiendo estos modificadores
a través del código aquí, siempre
puedes agregarlos
a través de este menú. Lo puedes encontrar ahí mismo. Y luego el
modificador de relación de aspecto permite seleccionar diferentes formas en las
que esto debería escalarse. Entonces si digo fit, lo va a escalar para que
quepa dentro de los límites. Pero con mantener la relación de
aspecto. Y si bien estamos agregando
estos modificadores, este sería un buen
punto mencionar que una buena práctica es golpear Enter en tus modificadores aquí para
que se alineen. Debido a que algunos elementos
podrían tener una lista de modificadores y al
ponerlos todos en una nueva línea, automáticamente sangran bajo los
elementos de la interfaz de usuario a los que
pertenecían y se vuelve
muy fácil leer. Muy bien, ahora ya sabes de elementos de texto y elementos de
imagen. ¿ Cómo vamos a
combinar los dos? ¿ Cómo hacemos para tener más de un elemento
para nuestra interfaz de usuario? Aquí es donde entran en juego
los elementos de contenedor. Entonces sigamos adelante en nuestra biblioteca y
busquemos v stack. Esta es la que me
refiero, la pila vertical. Y puedes seguir adelante y
hacer clic y arrastrarlo aquí. Ahora, vas a conseguir algunos errores porque esto
cuenta como un elemento a. Ahora, parece que
Xcode no se ha puesto al día, pero esta no sería una UI válida. Esencialmente, aquí tenemos
dos elementos. Lo que queremos hacer
en cambio es que queremos
tomar nuestra imagen y
voy a cortar ese código y lo voy
a pegar entre este corchete de apertura y cierre de
la pila vertical. Dentro de la pila vertical, puedes poner hasta
10 elementos y los va a apilar
verticalmente uno encima del otro. Entonces aquí también voy a poner. Elemento de texto así. Y se puede ver que
ahora soy capaz de tener dos elementos y se apilan automáticamente uno
encima del otro. Además de la pila
vertical, también
hay una horizontal. Y en lugar de la pila, esa es H stack. Y si cambias
eso a una espalda H, verás que ahora está apilada horizontalmente uno
al lado del otro. Y también hay uno
llamado zed stack, estoy en Canadá, o z
stack si lo prefieres. Y esto coloca las cosas
encima unas de otras con los elementos en la parte superior siendo
los más lejanos en la espalda. Por lo que puedes ver que
nuestro elemento de texto hola se sienta en la parte superior de la imagen. Ahora lo genial es que puedes anidar estos diferentes elementos de
contenedor. Para que yo pueda tener, digamos, quiero que mi imagen, logo sea el
fondo y arriba, quiero tener que textar
elementos lado a lado. Entonces puedo usar
una pila H aquí. Y en lugar de
escribirlo o
arrastrarlo desde la biblioteca, te
voy a mostrar
otra forma en la
que incrustar tus elementos
en las pilas. Si mantienes presionada Comando
y haces clic en el elemento, ya
has visto este menú antes. Puedes incrustar en H stack y solo va a
crear eso para ti. Y esa es probablemente la forma
más fácil de hacerlo. Entonces en esta pila H, voy a añadir hola mundo. Se puede ver aquí
que ahora mi imagen está detrás de esta pila H
con dos elementos de texto. Ahora parece bastante intuitivo
usar estas pilas, ¿verdad? Pero, ¿cómo arreglan los
elementos dentro de este impuesto? Bueno, hay algunas opciones. Entonces si hago clic en
esta pila aquí, en realidad echemos
un vistazo a la pila. Entonces voy a seguir adelante
y hacer clic en eso. Este realmente tiene alineación. Así que ese ciervo
no lo hace
porque simplemente se pone todo
encima el uno del otro. Pero para la pila H
y la pila, hay una alineación. que puedas elegir alinear
todo por sus medios,
alinear todo por
sus líneas de base, o alinear todo por la parte superior. Y también puedes agregar espaciado. Por lo que puedes ver aquí estoy
agregando un espaciado de tres. Se puede ver cómo cambia el código y en realidad
agrega un espaciado allí. Ahora es muy poco para que te des cuenta
que déjame sumar 20. Se puede ver que ahora
hay una brecha. De acuerdo, así que has
aprendido que puedes alinear los elementos
dentro de una pila, y también puedes agregar espaciado
entre elementos en una pila. Pero quiero
mostrarles otra forma de organizar elementos
dentro de una pila. Para hacer eso,
voy a cambiar esta pila en V stack. Entonces vamos a conseguir
algo así. Ahora digamos que quería que este
logotipo estuviera en la parte superior, y quería que mis dos etiquetas de texto
aquí estuvieran en la parte inferior. Una forma en que podría hacerlo es realidad agregando espaciado
en mi pila v, ¿verdad? Entonces digamos que agrego un 100. Se puede ver que
están empujados a pedazos. Si puedo sumar más, 300. Pero este es un valor fijo. Y como saben,
hay una tonelada de diferentes tamaños
y resoluciones de pantalla. Entonces esta no es una buena
manera de acercarla. Déjame deshacerme de
este valor de espaciado. En cambio, lo que podemos usar es
un elemento llamado espaciador. Entonces déjame mostrarte
cómo funciona eso. Entre el elemento de imagen y la pila H que contiene
los dos elementos de texto. Voy a insertar
un elemento espaciador. Y el nombre de este
elemento es espaciador, seguido de dos corchetes
redondeados. Lo que hace este elemento espaciador es ocupar todo el espacio disponible. Simplemente se expande y
empuja todo. Para que veas, aquí
tengo la imagen. Tengo el espaciador
ocupando tanto espacio como pueda. Y luego mi pila H que contiene
los dos elementos ahí. Lo genial del elemento
espaciador, sin embargo, es que juega bien con otros elementos espaciadores
en la misma pila. Entonces si subo aquí arriba por encima del logo y agrego
otro elemento espaciador, lo que termina pasando es que los
dos elementos espaciadores ocupan una
cantidad igual de espacio. Se puede ver arriba y
abajo el logotipo de guerra, hay una
cantidad igual de espacio. Si añado un tercer
elemento espaciador debajo de mi pila H, ¿qué crees que
va a pasar? Bueno, los tres espacios donde
los elementos van a compartir el espacio en blanco disponible. Entonces los primeros elementos espaciadores
aquí, el segundo aquí, y el tercero está ahí, y todo está teniendo una cantidad
igual de espacio. Esta es una gran manera de
espaciar las cosas por igual. Ahora de hecho, podría
hacer lo mismo con mi pila H en lugar de
especificar el espaciado aquí. Y fíjate en esta
ocasión sólo voy a borrar ese espaciado 20 ahí. En lugar de
cambiarlo en el Inspector. Puedo agregar un espaciador ahí. Yo voy a copiar eso. Y se puede ver aquí
ocupa todo el espacio disponible, empujando mis dos etiquetas por un lado. Pero si agrego uno aquí del
lado derecho, lo va a empujar hacia
el medio. Y luego si agrego
uno en el medio, entonces lo va a hacer
todo equidistante. Impresionante. Aprendiste a usar
la imagen y el espacio para los elementos además
del elemento de texto. También aprenderás
a usar los contenedores Stack, HCI Stack y zed
stack. Que la próxima vez que nos
sentemos juntos, estaremos construyendo la interfaz de usuario del juego
duro.
6. 05: construir el juego de cartas de guerra: Hola y bienvenidos. En esta lección,
estaremos construyendo la interfaz de
usuario del juego de cartas de guerra. En realidad, voy a
conseguir que lo construyas tú mismo primero porque
creo que puedes hacerlo. Vamos. Te voy a empezar. Le das un intento
honesto y luego pasaremos por la
solución juntos. Trato. Vamos, tienes
esto, hagámoslo. De acuerdo, entonces vamos a
empezar con un proyecto Xcode, lanzar Xcode, y vamos a crear
un nuevo proyecto Xcode. Vamos a elegir
app bajo iOS. Y puedes nombrar a esto
lo que quieras. Pero voy a llamar a
este reto de guerra porque eso es lo que es y es un reto que
confío en que puedas hacer. Interfaces Swift UI ciclo de vida es la aplicación de UI rápida y el
lenguaje es Deja el resto sin control, y vamos a guardarlo en algún lugar. Entonces lo voy a
guardar en mi escritorio. Muy bien, aquí está nuestro
nuevo proyecto Xcode. Vamos
primero a la biblioteca de activos porque vamos a sumar todos los activos de imagen
que necesitamos para esta app. Si entras a la carpeta
Recursos del curso bajo esta lección específicamente
vas a encontrar un archivo zip con todos los activos
de imagen. Así que adelante y descomprima eso. Y luego arrastremos todos estos activos
a la biblioteca de activos. Ahora debes tener
el dorso de tarjeta, el fondo para toda
la app. Y luego deberías tener
tarjetas de dos a 14 y no, no
te falta el
carrito número uno. El as es carbono-14. Y la razón por la que los
numeré de esta manera es porque
vamos a usar este número al final de
los nombres de las tarjetas aquí para
representar el valor. Y vamos a
comparar este valor para ver qué carta vence a la otra. Y luego vamos a
tener una imagen de botón de trato y una imagen de logotipo. Ahora por si acaso no lo
mencioné antes, tenemos tres
tamaños diferentes para cada imagen porque hay diferentes resoluciones de
pantalla para dispositivos iOS. Por lo que todos los dispositivos más nuevos tienen pantalla súper retina y así están
usando los a3x y no creo que
realmente hagan dispositivos que usen ya el activo de una
imagen. Pero esta app era de hace
mucho tiempo y hemos reconstruido
en muchos momentos diferentes, así que todavía tenemos los tres. Ahora déjame mostrarte la interfaz de usuario
terminada. Y este es el resultado final que vas a
intentar lograrte. Esto es lo que parece. No pongas demasiada
atención al espaciado
siempre y cuando tengas todo generalmente en el lugar correcto. Creo que eso es genial. Otra cosa a mencionar es que se supone
que esto es un botón, pero como aún no hemos pasado
por botones, siéntete libre de usar un elemento de
imagen para eso. Y eso será
perfecto para cuando hagamos la transición
al uso de botones. Y puedo mostrarles cómo cambiar ese elemento de imagen a un botón. Otra cosa que tengo
que mencionarles es el concepto del área segura. Ahora, el área segura
es esta región que empieza por
aquí justo debajo de ellos muesca, y termina justo aquí arriba
Este pequeño manillar. Y en algunos casos, realidad
hay márgenes en el lado izquierdo y
derecho también. Y cualquier cosa dentro de esta
región está en la zona segura. Ahora se garantiza que
no se obstruya esta zona. Cualquier cosa fuera
de la zona segura. Por lo que cualquier cosa en esta esquina
o en esta esquina podría quedar obstruida como se puede ver
por iconos o por el tiempo. Y obviamente hay
este manillar aquí que podría estar
bloqueando las cosas también. Si quieres un fondo de
pantalla completa, como este fondo verde
que tenemos aquí, vas a tener que ignorar el área segura
porque por defecto, al agregar elementos
a la vista, tratará de mantenerse
dentro de la zona segura. Entonces hay un modificador que aún no te
he mostrado. Se llama ignorar área
segura que puedes aplicar a una imagen
que le permitirá estirarse más allá del área segura que llegue a los bordes. Y esa es probablemente
la única otra pieza de información faltante que necesitas. Aparte de eso, has
aprendido sobre pilas, has aprendido sobre elementos de
imagen y texto, todo lo que podrías necesitar para
construir esta interfaz de usuario. Así que adelante, pausa este video
y pruébalo tú mismo. Y luego después,
volveremos juntos y os guiaré
por cómo construir esto. Así que bienvenido de nuevo. ¿ Cómo hiciste pudiste construir esta interfaz de usuario? Enhorabuena,
si eres capaz de
construir esto o algo
que se asemeje a esto. Y si te quedaste atascado
o no
pudiste no preocuparte porque
vamos a pasar por ello ahora. Y muchas veces me parece
que si lo intentas
tú mismo y se atasca y luego más adelante encuentras la solución. Esas son muchas veces las
mejores experiencias de aprendizaje. Muy bien, pasemos
por esto juntos ahora. Ahora antes de sumergirnos y empezar a construir esta interfaz de
usuario, quiero tomarme un
momento para una especie de desglosar qué elementos
puedo ver aquí. Entonces en primer lugar,
puedo ver que
vamos a necesitar un stack zed porque. Tenemos una imagen detrás de
todos estos elementos. Y así como esa pila nos
va a permitir
posicionar elementos uno
encima del otro. A continuación, tenemos una
pila V donde los elementos se apilan
uno encima del otro verticalmente. Por lo que puedes ver una pila V corriendo a través de toda esta
interfaz de usuario de arriba a abajo. Ahora algunos de los elementos de esta pila V
en
realidad estarán contenidos
dentro de una pila H, como estas dos cartas
lado a lado, por ejemplo. Y este elemento aquí
abajo va a ser una pila H de pilas TUV. Por lo que se trata de una pila V que contiene
los dos elementos de textos. Esta es una pila V
que contiene los dos elementos y luego
los encapsula en una pila H. Entonces ese es el
desglose que veo. Y ahora vamos a saltar a nuestra vista de contenido dot swift,
y lo construiremos. Muy bien, Así que aquí
estoy mirando el contenido Vue.js Swift. Lo primero que
voy a hacer es
cambiar este simulador
a iPhone 11. Y vamos a golpear Reanudar. Y en unos segundos, el tiempo podría ser más largo, verá aquí un adelanto. Perfecto. Ahora vamos a cambiar este elemento de texto
predeterminado. Deshazte de eso. Pongamos ahí una pila z, abran un par de soportes
rizados. Ahora, lo que está sentado detrás
de todos esos elementos es una imagen. Y la imagen que tenemos
se llama fondo. Observe que no llega
hasta la cima. Ahora sí se superpone un poco
esa zona segura. Dije que el área segura estaba
debajo de la muesca justo aquí. Entonces sí ves que se desborda, pero realmente no
va todo el camino hasta ahí. Por lo que podemos agregar un modificador
llamado ignora área segura. Cuando haces
eso, sólo va
a cubrir todo. Tan bien. Entonces, ¿qué va a estar
encima de este fondo? Bueno, como dije antes, vamos a tener
una pila vertical que contenga todos
esos elementos. El primero siendo el logo. Y luego vamos a
tener una pila H con dos cartas y luego un elemento de imagen que representa
el botón de reparto. Y después de eso
vamos a tener las pilas
verticales de marcador en
una pila horizontal. Entonces déjame, déjame escribir esto para que
tenga un poco más de sentido. Empecemos con el
logo en la parte superior. Vamos a tener una imagen y nuestro
nombre de activo de imagen es logo. Por lo que puedes verlo solo aparece
al tamaño correcto ahí. Y eso se debe a que nuestro activo de
imagen es de ese tamaño. De acuerdo, ahora pongamos
una pila H aquí. Y aquí dentro
vamos a poner dos elementos de imagen más. Vamos a poner el, pongamos tarjeta también. Y luego tarjeta tres. Por lo que tenemos dos cartas
en una pila H. Y después de eso, vamos a poner
otro elemento de imagen. Y este va a
ser el botón de trato. Y ahora vienen las etiquetas de puntuación. Entonces va a ser una pila H. Pero dentro de la pila en realidad
tenemos dos V's. Gracias. Cada VSAT contiene
dos elementos de texto. Entonces vamos a tener a Jugador y vamos a
tener el puntaje real. Y luego para este, vamos a tener CPU. Y vamos a tener
el puntaje real, la CPU. Por lo que básicamente tenemos dispuestas todos
nuestros elementos. Ahora, vamos a agregarles algo
de espaciado. Entonces para hacer eso,
podemos usar espaciadores. Entonces empecemos agregando
un espaciador justo arriba, justo encima de la pila H de las dos tarjetas debajo de
la imagen del logotipo. Entonces voy a poner un elemento
espaciador ahí mismo. Y lo que aprendiste sobre los elementos
espaciadores, ¿verdad? Ocupa todo
el espacio disponible. No obstante, si tienes múltiples elementos espaciadores
en el mismo contenedor, va a
dividir uniformemente ese espacio
entre los dos espaciadores. Entonces voy a poner otro
espaciador justo debajo de las cartas. Por lo que ahora se puede ver
que hay dos igual cantidad de espacios. Voy a poner
otro espaciador debajo del botón de trato
o imagen por ahora. Y luego voy a poner un espaciador debajo de las etiquetas de puntuación. Entonces debes asegurarte de que no lo pongas en el lugar
equivocado aquí. Queremos ponerlo
debajo de esta pila H. Y si haces clic en
este
corchete final, puedes ver que Xcode ilumina
brevemente los corchetes de inicio para
que
puedas verificar que ahí es donde lo quieres. De acuerdo, y
lo último que hay que hacer es poner un elemento espaciador
por encima del logo de pensamiento. Entonces eso es justo aquí. Ahora desde un
punto de vista vertical, todo está bien espaciado. Para este H apilar
con las dos cartas. ¿ Por qué no ponemos algunos
espacios ahí dentro? Entonces, empecemos poniendo un espaciador entre
las dos cartas. Y luego el espacio ella ante todas las cartas y el
espaciador después de las cartas. Vamos a hacer lo mismo con las etiquetas de texto aquí abajo. En esta pila H. Vamos a poner un espaciador
entre el impuesto de los dos V's. Y luego vamos a
poner un espaciador ante TI. Y el espacio o después de él. Muy bien, y ahora
lo último que hay que hacer es sólo cambiar los colores de
las fuentes de
estos elementos de texto. Y también para cambiar sus pesos
de fuente y tamaños de fuente. Y tal vez añadir un
poco de espacio
entre el marcador y el sello. De acuerdo, Así que vamos a dar click en este elemento de texto y echar
un vistazo a lo que podríamos hacer. Por lo que si buscas en el panel
inspector la fuente, puedes elegir uno de estos tamaños de fuente
predefinidos. Para este,
elijamos titular. Y lo puedes ver. Ahí se pone un poco más audaz. Cambiemos esto a blanco. Vamos a hacer lo
mismo para la etiqueta de la CPU. Vamos a
cambiarlo a titular. Vamos a cambiar
el color a blanco. Entonces para la puntuación real, vamos a cambiar la fuente a, digamos subtitular. Y vamos a cambiar
el color a blanco también. Y para esa etiqueta de marcador, lo
vamos a cambiar a subtitular, y
lo vamos a cambiar a blanco también. Está bien, y si quisiéramos
hacerlo en realidad, creo que en la interfaz de
usuario original lo
tenía como título grande. Entonces voy a
cambiarlo a eso. Entonces voy a
cambiar el 0 de subtitular a título grande. Ahora con el fin de sumar
algo de relleno entre la etiqueta
y la puntuación aquí. Lo que puedes hacer es
elegir la etiqueta. Empecemos con
el jugador aquí. Y vamos a dar click en sólo
este relleno de fondo. Entonces habilite eso. Y entonces puedes cambiar ese
número a, digamos 20. Se puede ver ese aumento. Y eso parece un
poco demasiado. Entonces tal vez nos quedemos con 10. Haremos
lo mismo con la CPU aquí, y haga clic solo en el
relleno inferior, y luego agregaremos 10. Aquí puedes ver el código
correspondiente. Está agregando relleno,
pero está especificando solo para el
borde inferior y en 10 puntos. Y esta es una buena práctica
en cualquier momento que modifique algo, visualmente, agregando un modificador o cambiando algo en
el panel inspector aquí, Es una buena práctica echar un vistazo
a lo que ha cambiado en el lado de código, solo para que puedas recordar con el
tiempo, cuanto más lo veas, más recuerdas eso, oye, si quisiera cambiarlo
a una fuente de estilo titular, solo tendría que
agregar un modificador de fuente de punto y pasar en una opción titular. Lo mismo para el
color de primer plano para este elemento de texto, primer plano de
punto,
color blanco punto. No necesitas
intentar memorizarlo, pero solo ponle atención. Y con el tiempo,
sólo vas a recordar. Y teclearlo terminará siendo más rápido que
tener que
hacer clic visualmente y
configurar las cosas a través del panel inspector o
el lienzo de vista previa. De acuerdo, lo último que
hacer, asegúrate guardar el proyecto
y listo. Entonces en esta lección,
construiste la interfaz de usuario del juego de cartas de guerra, pero para responder a interacción
del
usuario y cambiar
programáticamente las imágenes de las cartas, vamos a tener que aprender
algo de programación rápida. Entonces en las próximas cuatro lecciones, te van a introducir los conceptos básicos de
codificación con Swift. Ahora si esta es la primera
vez que aprendes a codificar, tómalo despacio y no intentes memorizar ninguna
de las palabras clave. Y después de eso, vamos a volver a esta interfaz de
usuario de juego de cartas de guerra y darle vida con código. Está bien, nos vemos ahí.
7. 06: constantes y tipos de datos de datos: Hola y bienvenidos. En esta lección y
en las siguientes tres, vas a estar
aprendiendo los conceptos básicos del lenguaje de programación Swift. Ahora estas son las habilidades que vas a tener que tener
para completar
el juego de cartas de guerra, así
como la build the feature app que
vamos a hacer juntos. Ahora si nunca has
codificado antes, sé que esto podría parecer un
poco intimidante, pero de verdad quiero que
te quedes con esto y realmente pongas
mucha atención. De hecho, abre Xcode en tu propia máquina y escribe
exactamente lo que te estoy mostrando. Esto realmente va
a ayudar a reforzar la estructura del lenguaje
y todas las palabras clave. No hay necesidad de
memorizar nada en absoluto. Te garantizo que al
final de este módulo, estarás escribiendo
tu propio código Swift. Muy bien, vamos a sumergirnos. Quiero empezar por mirar el ciclo de vida de View Update
de una aplicación sencilla y mostrarte dónde el código
Swift juega
un papel en cada parte
del ciclo de vida. Empecemos con
lo que ya aprendiste en las lecciones anteriores
que la interfaz de usuario se genera
a partir del código Swift. Llamaremos a esto tu código de vista. Genera una UI para que
tu usuario la vea. Ahora típicamente con una app, tenemos algún tipo de datos que queremos recuperar y mostrar. Por ejemplo, una app de noticias. Nos gustaría obtener esos datos de
una fuente de datos para luego
recuperarlos en nuestra aplicación y
mostrarlos en nuestra interfaz de usuario. Puedes usar el código Swift para esto. El código rápido puede ir a
buscar los datos para luego procesarlos en un formato
que nuestra app pueda entender. Después usando código Swift, también
podemos vincular estos
datos a nuestro
código de vista para que cuando la interfaz de usuario se
renderiza desde ese código de vista, esos datos se puedan
mostrar al usuario. Y además, cuando el
usuario interactúa con la interfaz de usuario, como tocar un botón, podemos usar el código Swift para capturar ese evento y responder a él. Ahora basado en lo que
el usuario tocó, podríamos usar algún
código Swift para cambiar nuestros datos. Cuando este cambio de datos
ocurre porque hemos vinculado esos datos
a nuestro código de vista. Que los cambios de datos se
detectan automáticamente y la nueva interfaz de usuario se vuelve a representar con
los datos actualizados para que el usuario pueda ver
lo que ha cambiado. Ahora este ciclo es esencialmente todo lo que la aplicación está haciendo una y
otra vez. Y exploraremos esta App,
Ver, Actualizar ciclo de vida
con más detalle en futuras lecciones. Pero por ahora, solo quiero que entiendas
que el código Swift tiene un papel que desempeñar en cada
parte de este ciclo de vida. De las últimas lecciones, ya
has visto el
código para construir UI. Entonces sabes como
se ve ese código de vista. Cambiemos nuestro enfoque
hacia la parte de datos donde
podemos ver qué código Swift se utiliza para
realizar un seguimiento de los datos. Además, ¿cómo se ve eso
incluso en nuestra app? Para probar
algo del código rápido
y encontrar la respuesta
a nuestra pregunta, usemos un patio de juegos Xcode. Un patio de recreo es una forma
ligera probar parte de nuestro código sin comprometernos
con un proyecto de app de pleno derecho que podemos hacer aquí. Piénsalo en el patio de recreo de Xcode
como tu pad de doodle, pero para el código, ahora
solo empieza uno nuevo. Ir a Archivo, dar click en Nuevo, y luego vamos a dar click
en patio de recreo. Vamos a elegir
un patio de juegos en blanco. Y vamos a darle un nombre. Y vamos a guardarlo en algún lugar. Vamos a cerrar
esta pestaña del navegador haciendo clic en este botón
porque no necesitamos eso. Ahora, aquí abajo en la esquina
inferior izquierda, notarás que tenemos un botón llamado
mostró el área de bichos. Adelante y haz clic en eso
para revelar esta bandeja. Esta zona de consola del depurador es donde vamos a
generar una gran cantidad de datos. Así que sólo enciéndalo, asegúrate de ver esta
pequeña área aquí abajo. Y luego este botón, quiero que le den click en este
momento va a estar ejecutando el patio de recreo. Va a correr
todas las líneas de código en el área del editor aquí arriba. Observe, sin embargo,
que también tiene este pequeño botón Run azul
a lo largo de los números de línea. Y esto te permite seleccionar hasta
qué línea quieres
ejecutar el código. Entonces si paso el cursor sobre la línea tres y apreto
el botón justo aquí, va a correr las líneas 123 en
contraposición a este botón de aquí,
que corre todo. Por lo que la primera vez que
corras este patio, podría tardar un tiempo. Se muestra el spinner
hasta por un minuto. Yo quiero que hagas
eso y solo
déjalo correr hasta que diga
listo para continuar. Y eso nos va a configurar para ejecutar algún código en la siguiente parte. Por ahora, solo sigamos
adelante y eliminemos estas líneas de código para que
podamos empezar de nuevo. De acuerdo, ahora que tu configuración, Volvamos a nuestra pregunta
original. ¿ Qué
aspecto tienen los datos y cómo usamos el código Swift para realizar un
seguimiento de ellos? Echemos un vistazo a un par de tipos
diferentes de datos. En primer lugar, empecemos con un tipo de datos común,
un trozo de texto. En Swift, rodeas textos con comillas como esta. Y esto se conoce como una
pieza de datos de cadena. Añadamos una nota
para nosotros
aquí arriba con dos barras inclinadas hacia adelante. Cuando haces eso, se
llama comentario,
y es una forma de dejar unanota o
un trocito
de documentación paraque nos nota o
un trocito
de documentación para recuerdemos a
nosotros mismos o a otras personas que podrían
estar mirando nuestro código, lo que hace ese código. Y cuando Xcode ve estas
dos barras inclinadas hacia adelante, no
va a
ejecutar esta línea. Ahora echemos un vistazo a
otro tipo de datos, enteros. Entonces algo que
se ve así. En Swift, esto se conoce como
int, abreviatura de entero. ¿ Y qué pasa con los números decimales? Bueno, sí, ese
también es un tipo de datos que Swift puede reconocer
y manejar. Cada uno de estos. Se les conoce como doble. Y swift también puede
manejar valores booleanos. Entonces las cosas como verdaderas y falsas. En Swift, esto se conoce como bool. Ahora string, int,
double y bool. Todos estos se llaman
tipos de datos y es como Swift clasifica los datos. Ahora estos no son
todos los tipos de datos que están disponibles,
pero estos son
los, con mucho
los más comunes que usarás, al
menos al principio. Y es un gran punto de
partida para nosotros. Muy bien, ahora echemos un
vistazo a crear y hacer un
seguimiento de los datos. En Swift, hay muchas
formas de hacer un seguimiento de los datos, pero dos de ellas
son formas básicas están usando variables y constantes. Volvamos a nuestro patio de juegos
Xcode y echemos un vistazo a un ejemplo. Empecemos con nuestros datos de cadena
hola aquí. Ahora esta pieza de datos por
sí misma va a ser inútil nosotros
a menos que tengamos una forma de
referenciarlo y rastrearlo. Y podríamos hacer esto
con una variable. Entonces vamos a ver cómo podemos declarar una variable para hacer un seguimiento de
esta hola pieza de datos. Entonces usamos la
palabra clave var y eso es para declarar una nueva variable. Y luego escribimos el
nombre de la variable. Este nombre es lo que
vamos a usar para hacer referencia a esa pieza
de datos y recordarla. Entonces voy a llamar a este MyVar, y luego
lo seguimos con dos puntos. Y luego después de eso ponemos el tipo de datos que esta
variable va a rastrear. Dado que los datos que queremos hacer referencia son una
pieza de datos de cadena, voy a poner string aquí. Y luego a continuación,
solemos en la misma línea que
declaramos la variable, asignamos los datos a la
variable para realizar un seguimiento de. Y lo podemos hacer usando
el operador de asignación, que es sólo un símbolo igual. Y luego del
lado derecho de eso, ponemos los datos que queremos asignar
a esta variable. Voy a tomar eso
y mover eso aquí mismo. Entonces esencialmente lo que esta
línea de código está diciendo, estamos declarando una nueva
variable llamada MyVar. Estamos diciendo que hace
un seguimiento de los datos del tipo de cadena. Y entonces estamos asignando este dato de cadena
hola
a esa variable. Es como si
estuviéramos adjuntando una etiqueta a esta pieza
de datos llamada MyVar. Ahora siempre que quiera
referirme a esa pieza de datos, todo lo que necesito hacer
es referirla por el nombre de la variable. Entonces vamos a intentarlo. Podemos utilizar un
comando especial que
emitirá los datos al área de
la consola de abajo
aquí en el patio de recreo. Y ese comando se acaba de imprimir seguido de dos corchetes
redondeados. Y en medio de esos corchetes
pones la variable o los datos
que quieras
generar . Entonces yo voy a hacer eso. Y luego aquí abajo
voy a detener mi patio de recreo y volver a ejecutar
todo el código que hay en él. Y luego como se puede ver
ahí abajo y dice hola, que el contenido de MyVar, que es exactamente lo que
esperaríamos. Observe que cuando hago
referencia a mi variable, ya no necesito usar la palabra clave
var. Eso fue sólo para
declarar la variable. Y una vez que haya
declarado mi variable, sólo
puedo
referirla por su nombre final. También puedo
reasignarle nuevos datos. Puedo usarlo una
y otra vez. No tengo que reesclarecerlo. Entonces por ejemplo, después declararlo un hola
asignado a ella, puedo dar la vuelta y asignarle
algo más. Asignemos esta pieza de datos de cadena llamada
mundo a MyVar. Y esencialmente lo que
hemos hecho aquí es que
le hemos dicho a esa variable en su lugar
que rastree esta pieza de datos. Entonces, ¿qué esperarías si ahora
ejecuto el código en
el patio de recreo? Solo saldríamos
mundo porque MyVar ya no está rastreando
esa pieza de datos hola. Ahora una cosa que
quiero enfatizar es el tipo
de datos de la variable. Si especifico que myVar
es un tipo de cadena, solo
puedo rastrear
piezas de datos de cadena. Entonces, por ejemplo, si
tenía un entero como 100 y traté de
asignarle eso a MyVar, bueno, obtendré un error
que no está permitido. Lo que necesito hacer en su lugar
es declarar una nueva variable del tipo int para realizar un seguimiento
de esta pieza de datos int. Entonces sigamos adelante y usemos
la palabra clave var y nombrela. Y luego colon y luego el tipo de datos que
quiero que esto rastree. Y ahora eso está completamente bien. Intentemos imprimirlo. Xcode no te va a ayudar a corregir
auto ningún error
ortográfico. Muy bien, Así que
tenemos mundo y 100. Ahora como estamos codificando
más juntos, empezarás a notar diferentes tipos de convenciones de
nomenclatura como lo que ves aquí donde mis nombres de variables comienzan
con una letra minúscula, y entonces cada palabra
subsiguiente en mi nombre de variable comienza
con una letra mayúscula. Entonces eso es una especie de convención
de nomenclatura estándar. De verdad podrías hacer
lo que quisieras. Pero cuando comienzas a codificar
más y a trabajar en equipos, es importante tener. Estándar que todos usan, y éste es uno común. Muy bien, Ahora una cosa
más de la que quiero
hablar antes de pasar
al siguiente tema es el hecho de que hay
cortos en Xcode. Realmente no tienes que
teclear toda la información. Por ejemplo, aquí, estamos
declarando que esta variable, mi int, es un tipo int y le estamos asignando datos
enteros. Pero la cosa es en realidad
podríamos
omitir ese tipo de datos y simplemente asignarlo 102. Cuando hacemos eso, Xcode puede ver que se trata de una
pieza de datos int. Entonces va a asumir que mi int
sólo va a rastrear en tipos. Ahora
sigue aplicándose esa misma regla. Es decir, después de que Xcode infiera que esta variable es n-type porque le has
asignado 100. No puedo ir y asignarle
una cadena. Eso no se va a
permitir porque Xcode lo es, ya
ha detectado que
esto debería ser un n-type. Entonces lo mismo va para aquí arriba. No necesito
especificar el tipo de datos. Si voy a asignarle una pieza de
datos de cadena de inmediato
porque eso le dice a Xcode que esta va a ser una variable de tipo
string. Entonces eso es solo un
poco de taquigrafía para ahorrarte algo de mecanografía. De acuerdo, entonces aprendiste
a declarar una nueva variable, asignarle datos y recordarlos
usando el nombre de la variable. Y también
aprendiste a asignar nuevos datos a esa variable. Hablemos de la otra
forma de hacer un seguimiento de los datos. Constantes. Por lo que las constantes son
igual que las variables excepto que no puedes reasignarle datos una vez que
le hayas asignado la primera
pieza de datos. Entonces sigillata, cómo declarar una constante para hacer un seguimiento
de estos datos de cadena. En lugar de la palabra clave var, se utiliza la palabra clave let. Y entonces el resto es igual
que una variable. Entonces empezamos con
un nombre constante, mi colon, y luego adivinaste que el tipo de datos seguido
por el operador de asignación. Y luego vamos a
mover esa pieza de datos
al lado derecho de ese
operador de asignación así. Ahora intentemos referirnos a
esta constante. Intentemos imprimir
los datos en mi contexto. Como se puede ver,
funciona como se esperaba. Ahora, intentemos hacer
lo que no está permitido. Tratemos de asignarle
algo más. Y como se esperaba, no podemos reasignarle datos
porque es una constante. Ahora las constantes son útiles. Se trata de una herramienta adicional
que podemos utilizar si no esperamos que esa pieza
de datos cambie. Y así no necesitamos hacer
ningún cambio en él nunca. Entonces, ¿cuándo usarías una
constante sobre una variable? Bueno, realmente depende de
lo que intentes hacer. Probablemente te encuentres
usando variables la mayor parte
del tiempo por su versatilidad y
porque los datos cambian, sin embargo, la mejor
práctica es preferir constantes sobre variables
donde hace sentido. De hecho, Xcode es
lo suficientemente inteligente como para saber si
usas una variable y
nunca terminas cambiando
esa variable, te sugerirá que
cambies esa palabra clave var a una palabra clave let y
usas una constante en su lugar. Muy bien,
hagamos un resumen rápido antes de terminar la lección,
aprendiste sobre el ciclo de vida de
View Update
y cómo el código Swift
juega un papel en él. Aprendiste sobre
tipos de datos como string, int, bool, y double. Aprendiste sobre cómo
usar variables y constantes para hacer referencia a datos. Estás haciendo grandes
avances hasta ahora. Y en la siguiente lección, te
enseñaré cómo organizar tus declaraciones de código
en funciones. Está bien, nos vemos ahí.
8. 07: funciones de programación rápida: Hola y bienvenidos. En la lección anterior, aprendiste sobre
las variables y constantes de Swift. Aprenderás a crear
algunos datos y declarar una variable o constante
para realizar un seguimiento de los mismos. Si bien en esta lección
vas a
aprender a organizarte, agrupa tus declaraciones de
código. De modo que ese número uno, todas las sentencias
de código
que has agrupado pueden trabajar
juntas para una tarea común. Y número dos, una vez que tu código
está organizado en grupos, puedes elegir qué
grupo de abrigos cosas ejecutar dependiendo de qué
tarea necesitas hacer. Estos grupos tienen sentencias
de código se conocen como funciones en Swift. Muy bien, ahora echemos un
vistazo al diagrama de
ciclo
de vida de actualización de vista de la lección anterior
y veamos dónde las funciones podrían desempeñar un
papel en este ciclo de vida. Recuerda que cuando el usuario
interactúa con la interfaz de usuario, código
Swift captura ese
evento y reacciona ante él. Bueno aquí podríamos tener un
par de funciones diferentes dependiendo de cómo
interactúe el usuario con nuestra interfaz de usuario. Por ejemplo, el usuario
tocando un botón podría activar la aplicación
para cambiar de pantalla. En ese caso, tal vez ejecutemos la función a para realizar esa tarea. O por otro lado, ¿y si el usuario toca un
artículo para ver más detalle? Entonces en ese caso, ejecutaremos función B para que aparezca
la pantalla de detalles. Ahora repasemos el código que realiza la recuperación de
datos. Por ejemplo, podríamos tener una función C que hace la recuperación
real de los datos, tal vez el código de red. Y agarra los
datos y luego
lo da a la función D como entrada. Y la responsabilidad de esta función podría
ser procesar esos datos y convertirlos en un formato que nuestra
app pueda entender. Por lo que la función D toma esos datos como entrada y salida los datos
formateados para nuestra aplicación. Ahora podría seguir,
pero como pueden ver, las funciones son un componente básico
de la programación rápida. Está en todas partes. Entonces ahora vamos a ver cómo
podemos crear nuestras propias funciones. Muy bien, entonces aquí tengo un nuevo patio de
juegos Xcode y
vamos a echar un vistazo a la sintaxis
de la función. Y por si acaso no he
explicado eso aún, la palabra sintaxis es simplemente una palabra que describe la estructura o
la gramática del lenguaje. Entonces, sintaxis de función para
declarar una nueva función, se empieza con la palabra clave
func FUN, ver. Es una función funky. Y luego lo sigues por
el nombre de la función. Y luego un conjunto de paréntesis
son corchetes redondeados, y luego un conjunto de corchetes
rizados. Dentro del conjunto de corchetes
rizados, pones tus sentencias de código, cualquier cosa que quieras ejecutar
o ejecutar siempre que
llamemos a esta función. Entonces, permítanme sólo poner
algunas declaraciones aquí. Digamos que declaremos dos
constantes como esta, y luego imprimamos un plus b Entonces si ejecuto esto
ahora mismo y ejecuto todas
estas líneas de código, no va a pasar nada. No se ve ninguna salida. Y eso es porque en
realidad no hemos llamado a esta función. Para poder llamar y
ejecutar esta función, sólo
tenemos que
referirla por el nombre de la función. Entonces esa es mi FUN, C, seguido de los paréntesis de
par, y así es como ejecutas todo el código entre aquí. Entonces probemos esto. Voy a dejar de ejecutar y luego volver a ejecutar mi
patio de recreo. Y obtenemos 30 como esperamos. Si quería volver a ejecutar esos
conjuntos de instrucciones, entonces
simplemente puedo llamarlo de nuevo. Y si lo imprimo, ahora ejecuta ese código dos veces. Ahora quiero volver
a ese diagrama de
ciclo de vida de actualización de vista por tan solo un segundo. Porque si te das cuenta de nuevo
en ese área de recuperación de datos, dije que podríamos
tener dos funciones, c y funciones dy, donde C buscaría
los datos y los
pasaría a D como parámetros de entrada. Para que esa función D pueda funcionar con esos datos y
formateó cómo necesitamos. Por lo que una función
poder aceptar datos en ella para trabajar con ella es
una característica muy poderosa. Echemos un vistazo a cómo
declararíamos una función que aceptaría algún
tipo de datos de entrada. De acuerdo, así que voy a
borrar estas dos líneas y voy a modificar
mi función aquí. En lugar de declarar
dos constantes, a y b, voy a especificar que a y b tienen que
pasarse a la función. Entonces la forma en que hacemos eso
es a través del uso de parámetros de función entre
los dos corchetes redondeados. Ahí es donde
especificaríamos todos
los parámetros que queremos que se
pasen a esta función. Se puede pasar en
múltiples parámetros, pero en realidad
sólo empecemos con uno y empecemos con una.Así que primero pondría el
nombre del perímetro, así que me gustaría
que fueran ocho. Y entonces
pondría colon especificado por el tipo de datos que es
este parámetro. Ya que espero que esté en, voy a declarar
este parámetro como un seguido
del tipo de datos int. Y entonces puedo borrar
esta constante desde aquí. Como se puede ver,
esto es casi como una declaración variable o una declaración constante excepto sin la var y
sin la izquierda. Aquí estamos especificando que
cada vez que se llama a esta
función, se necesita pasar
un parámetro int junto con ella. Y va a
ser referenciado por este parámetro nombre a
dentro de esta función. Entonces ahora se puede ver
que en ninguna parte
declaré una variable a o constante a, pero todavía puedo poner un como parte de mi ecuación un plus B porque se está pasando
como parámetro. Entonces echemos un vistazo a cómo sería
llamar a esta función. Ahora, voy a
depender de auto-completar. Entonces voy a escribir en MI DIVERSIÓN y puedes ver en
cuanto
lo haga, detecta mi función aquí. Entonces voy a seguir adelante
y hacer clic en eso. Y se puede ver que ahora, en el proceso de
llamar a esta función, también
tengo que pasar una pieza
entera de datos. Entonces voy a seguir adelante
y pasar en esto, pasando algo diferente
en el pasado y cinco, se
puede ver aquí,
ahí indica que este es el parámetro
que estoy pasando. Sigamos adelante y detengamos y ejecutemos y corremos de nuevo mis
líneas de código. Y esta vez la salida es de 25, porque 5 se estaba
pasando a la función. Plus 20 es 25. Ahora volviendo al diagrama de ciclo de vida View Update nuevamente, función D acepta
entrada como parámetro, pero también devuelve salida. Por lo que esa es otra característica muy
poderosa de las funciones. Poder tomar
alguna entrada, trabajar con esos datos y proporcionar alguna salida de nuevo al
color de la función. Echemos un vistazo a nuestro
patio de recreo y veamos cómo podemos especificar que una función
debiera devolver algunos datos. Por lo que modificar esta función para indicar que
devolverá algunos datos. Subimos aquí justo después del soporte redondeado
para el perímetro, y justo antes del inicio
de los soportes rizados. Aquí, escribimos un guión seguido de un símbolo
mayor que, lo que hace una especie de salida como
una flecha. Y luego especificamos el tipo de
datos de la salida. Entonces lo que voy a hacer
es que voy a emitir la suma de a y B en lugar de imprimirla
a la consola. Entonces voy a borrar esta línea. Y luego voy a dar salida
a un int. Entonces ahí es donde especifico que después de ese guión
mayor que símbolo. Ahora puedes ver que Xcode
lanza algunos errores ahora porque además de especificar
que tu función
devuelve un int,
en que tu función
devuelve un int, realidad
tienes que devolver un int dentro de las sentencias de
código. Entonces como última línea de nuestro código, podemos usar la palabra clave return, lo que significa que estos
son los datos que
vamos a devolver
de la función. Y luego especificamos los datos
que queremos devolver. Entonces voy a devolver un plus b. Y todo es, bueno, ahora ten en cuenta que
cualquiera que sea el tipo de datos que especifiques aquí arriba en la declaración de
función, ese es el tipo de datos
que tienes para regresar si hay un desajuste. Por ejemplo, si especificé que esta función
devuelve un int, pero sigo adelante y
devuelvo una cadena. Al igual que un trozo de texto. Vas a ver a Xcode. Quejarse
de eso también porque eso es, eso es incorrecto. Entonces vamos a devolver un plus b y
vamos a devolver un int. Entonces, ¿por qué no ejecutamos ahora
nuestra función y
vemos qué pasa. No pasa nada. Bueno,
¿qué está pasando? Estoy regresando un plus b Así que esto es lo que está pasando. Llamar a esta función
es devolver esos datos, pero necesito de alguna manera
hacer referencia y rastrear
esos datos, ¿verdad? Y para eso es una
variable. Entonces voy a declarar
una variable aquí arriba, var. Declaremos constante en realidad, ya que no voy
a cambiar esto, que mi suma sea igual al
resultado de esa función. Para que puedas entender
esta tasa de declaración de código, estamos declarando una
constante llamada mi suma. Y entonces estamos llamando a esta función
en la misma línea que devuelve 25 y estamos
asignando 25 a mi suma. Por lo que ahora puedo imprimir mi suma. Y volvamos a comprobar
que obtenemos la salida. Ahí vamos. Ahora
antes de seguir adelante, hay dos cosas muy
importantes que quiero mencionar. Por lo que esta declaración devuelve realmente termina la ejecución
de esa función. Entonces una vez que se ejecuta esta
declaración de retorno, la ejecución regresa fuera
de esa función. Entonces cualquier declaración de código
que usted puso aquí abajo, digamos que yo había devuelto
un b justo ahí, e imprimí un
plus b justo aquí. Esa declaración de impresión no
se va a ejecutar código
C después de la devolución
nunca se ejecutará. Entonces eso solo es importante
tener en cuenta que cuando escribes retorno y ejecuta
esa línea de código, la ejecución se detiene y
sale de esa función. Otra cosa que quería
mencionar es este tipo de devolución. Entonces antes cuando te dije que declarar una función no
tenía un
tipo de devolución como ese. Bueno, en realidad lo hizo. Fue sólo que el tipo de
devolución era nulo. Y vacío no significa nada. Entonces déjame, déjame hacer una demostración básica
en realidad
déjame simplemente declarar otra
función aquí abajo. Simplemente llamaré a esto un
micrófono para ver
entonces te dije que esto era una declaración básica
de una función, pero en realidad eso fue una taquigrafía. En realidad, la declaración completa tiene un tipo de devolución de vacío como ese si no
vas a devolver nada. Pero es solo que cuando no
devuelves nada, entonces en realidad no tienes que
especificar el tipo de retorno de vacío. Entonces, así que sólo
pensé que había mencionado eso. Entonces ya sabes lo que significa esa palabra clave
void. Entonces si ves alguna función que tiene un tipo de vacío de retorno, sabes que eso
básicamente significa que no está
devolviendo nada. Está bien, Así que ahora
reiniciemos un poco. Está empezando a
ponerse un poco desordenado. Entonces vamos a borrar
todo excepto eso, excepto nuestra función aquí mismo. Ahora quiero
mostrarles cómo podemos pasar en múltiples parámetros. Entonces en lugar de
especificar estar aquí, Vamos a poner B en el
listado de parámetros aquí y que
se pase en su lugar. De acuerdo, entonces déjame
borrar esta línea de código para que
obtengamos B de aparecer. Bueno, ¿cómo agregamos otro
parámetro a este? Lo que haces es
simplemente poner coma y luego declarar otro parámetro para tu función. Fácil, ¿verdad? Vamos a nombrar este
sea seguido de colon, y luego el tipo de datos de B, ese va a ser
otro entero. Muy bien, entonces ahora echemos un
vistazo a cómo llamamos a esta función
con dos parámetros. Mi func, lo puedes ver aquí. No, solo especificas, oh, una cosa rápida es cuando
estás llamando a funciones, una forma fácil de rellenar los parámetros en la
lista es presionando tab. Eso sólo te lleva
al siguiente parámetro
que tienes que llenar. Entonces pondré 2 y 3. Ejecutemos todo este código y obtenemos un resultado.
No obtenemos ningún resultado. Recuerda que borré
mi línea de código. Entonces, ¿por qué no simplemente
imprimimos el resultado en lugar de asignarlo a una
variable esta vez. Entonces voy a
seguir adelante y
pasar directamente esa llamada de función
a mi declaración de impresión. Eso va a imprimir
la salida de mi función. Adelante y ejecutemos
ese código y obtenemos 5. Ahora, obviamente puedes tener
más de dos parámetros. Simplemente pon una coma entre cada parámetro en tu función. Y luego otra
cosa que quería mencionar que es bastante
guay con los parámetros, es que se puede especificar un valor
predeterminado para un parámetro. Entonces, por ejemplo, para el parámetro b, podría hacer de esto un dato de entrada
opcional especificando un
valor predeterminado para este parámetro. Si hago eso, eso significa que cuando se llame a esta
función, pasar datos para el parámetro
b va a ser opcional. Echemos un
vistazo a cómo funciona esto. Entonces después de especificar el
tipo de datos para mi parámetro b, puedo poner un signo igual y
luego puedo darle un valor. Digamos que 0 es el valor
predeterminado. Si no se pasa b, entonces B sólo va a ser 0. Ahora, borremos
mi llamada de función, e intentemos
llamarla de nuevo y un
vistazo a lo que nos muestra el menú de
autocompletar. Aquí se puede ver que hay dos formas diferentes de
mi función llame ahora, una es con parámetros a y b Así que paso en ambas
piezas de datos. Y uno simplemente está
pasando en un parámetro a. Si hago eso, v
sólo va a ser 0. Pero si paso en ambos, Digamos que vuelvo a pasar 23, entonces B va a ser
tres en lugar de 0. Entonces esa es una forma de hacer que
tus perímetros sean opcionales. Ahora quiero
hablar de etiquetas de argumento. Como se puede imaginar, cuantos
más parámetros tengamos, más confusas van a
ser
las cosas en cuanto a estas llamadas de
función, sobre todo cuando se trata de nombres de
parámetros como a y B. Bueno, a veces a
y B tiene sentido en el contexto del código
dentro de la función. Pero al color de
la función, a y B. No
significan nada. Por lo que hay una característica especial
llamada etiquetas de argumento. Y déjame mostrarte
cómo es eso. Entonces voy a declarar una
nueva función aquí mismo. Yo también
lo voy a llamar mi func. Y voy a hacerlo
en realidad, ¿sabes qué? Voy a copiar esta función y hacer una
copia de ella y mostrarte cómo,
cómo las etiquetas de argumentos la cambian. Por lo que un argumento etiquetado va
delante de cada parámetro. Por lo que cada parámetro puede tener
su propia etiqueta de argumento, y esencialmente estás poniendo un nombre delante
de ese parámetro. Voy a llamar a
este primer parámetro. Voy a darle
una, una etiqueta de argumento llamada primer número. Y para mi, para el
segundo parámetro, le
voy a dar un argumento etiquetado llamado segundo número. Entonces eso es literalmente todo lo que es. Una etiqueta de argumento
es un nombre delante del nombre del parámetro
separado por un espacio. Echemos un vistazo a cómo esto
afecta a la llamada de función. Si escribo mi func, puedes ver aquí todavía
tengo estos dos primeros, a y B, y eso es desde
la primera función aquí arriba. Pero mira aquí abajo, tengo primer número y primer
número y segundo número. Y esto corresponde a mi
segunda función aquí mismo, porque el segundo número
sigue siendo opcional, ¿verdad? Porque tengo este valor
por defecto allí. Entonces si llamo a ese. Mi llamada de función se convierte en este myfunc primer número
1, segundo número 3. No obstante, internamente
dentro de esa función, sigo haciendo referencia a esos
parámetros usando a y b. Así que etiquetas de argumentos ahí. Una forma de
distinguir el nombre de una llamada a función versus cómo se hace referencia
dentro del código. En tanto que si omite las etiquetas de argumento, como lo hemos hecho aquí arriba, entonces los
nombres de los parámetros se utilizan
tanto para la llamada a la función también para la referencia de esos parámetros dentro
de la función. Por lo que ojalá notes
la diferencia aquí. Un truco genial que puedes hacer con las etiquetas de
argumento es que si no quieres mostrar ningún texto
en tu llamada de función en absoluto, puedes usar un guión bajo
como etiqueta de argumento. Entonces si haces esto, Veamos qué pasa
con tu llamada de función. Entonces mi func, puedes ver aquí estos dos corresponden a
lo que he hecho aquí mismo, usando guiones bajos para
las etiquetas de argumento. Entonces si usas un guión bajo
para etiqueta de argumento, las llamadas a función
se convierten en myfunc. Y luego la primera
pieza de datos, coma, segunda pieza de datos. No hay nombres de parámetros, no
hay etiquetas de argumento en
tu llamada de función en absoluto. Entonces esto hace las cosas realmente sucintas y realmente
ordenadas y ordenadas, pero también hace que
las cosas sean más confusas si no está claro cuáles esos parámetros
que se supone que son cuatro. Por lo que aquí hay mucha
versatilidad. Mi preferencia personal es
simplemente hacerlo de esta primera manera. Y no suelo especificar
ninguna etiqueta de argumento en absoluto. Y simplemente uso los nombres
perimetrales. De acuerdo, lo último que prometí
antes de terminar con funciones es que no
sé si te has dado cuenta, pero aquí hemos declarado dos funciones
diferentes, ambas con el mismo nombre de
función. No podemos hacer eso con
variables, ¿verdad? Si intentas declarar variable
a y luego variable a de nuevo, entonces vas a obtener un
error en el segundo. Y Xcode se va a quejar, se
puede reclar la variable 8. Para funciones. Las cosas son un
poco diferentes. Las funciones tienen lo que se llama
firma de función. Y eso está compuesto por el nombre
de la función, el listado de parámetros, y luego seguido
por el tipo de retorno. Entonces tecleemos myfunc y echemos un vistazo a lo que nos da el menú de
autocompletar. Como puede ver, las cuatro de estas variaciones tienen el mismo
nombre de función llamado myfunc. Pero debido a que los valores de los
parámetros , las etiquetas de
argumento,
son diferentes, Xcode es capaz de discernir y
saber a qué función estamos
tratando de llamar, ¿verdad? Entonces si llamo a este
y no especifico ningún nombre de parámetro
ni ninguna etiqueta de argumento. Sabe que estoy tratando de llamar a este segundo aquí mismo porque esta llamada de método,
esta llamada de función. Es decir, no
coincide con este primero. tanto que si hago mi func y especifico
etiquetas de parámetros a y b, entonces definitivamente sabe
que estoy tratando de llamar a la primera porque esta llamada, este listado de parámetros
aquí coincide aquí. De acuerdo, así que te prometí que fuimos un poco más profundo de lo probablemente necesites saber
ahora mismo mostrándote todas estas opciones y formas que las funciones pueden ser flexibles a
medida que codificamos juntos más, me verás solo usando formas más
básicas de funciones, pero al menos paga ahora
sabes mucho más y estoy seguro de que puedes apreciar lo poderosas que son
estas funciones. De acuerdo, esta lección estuvo
bastante llena de acción. Hagamos una recapitulación antes
de terminar la lección. En primer lugar, aprendiste a declarar unas funciones básicas, y luego
aprenderás a declarar funciones que aceptan
datos de entrada como parámetros. Además,
aprenderás a declarar una función con
múltiples parámetros. Y de nuevo, las funciones
cuando casi son
tan útiles si no pudiera
generar datos, ¿verdad? Aprenderás
a hacer eso usando tipos de
devolución y
la palabra clave return. También aprendiste sobre las etiquetas de
argumentos. Y por último, aprendiste
sobre las firmas de funciones. Estás haciendo grandes avances. Y en la siguiente lección, te
mostraré cómo
organizar tus funciones
en dos estructuras. Entonces te veré ahí.
9. 08: estructuras de programación rápidas: Hola y bienvenidos. Hasta el momento has aprendido
sobre variables y constantes y cómo
se utilizan para realizar un seguimiento de los datos. También has aprendido
acerca de las funciones para organizar y agrupar
tienes declaraciones de código. Si bien en esta lección,
vas a aprender sobre estructuras o
estructuras para abreviar. Y estos son los
bloques básicos para representar tus datos o para representar algo en tu app. Estructuras
reúnen las funciones que variables y constantes, todo lo que has aprendido
hasta ahora en las últimas lecciones, todo en un pequeño paquete ordenado. Muy bien, vamos a
sumergirnos y ver de qué se trata. Ahora hagamos una recapitulación rápida. Primero, tenías abrigos,
cosas como estas. Y luego te mostré cómo usar
funciones para organizarlas
y agruparlas. Ahora con estructuras,
puedes agrupar
tus funciones. También puedes tener
variables y constantes, realizar un
seguimiento de los datos
dentro de tu estructura, pero fuera de cualquier función. Y vamos a
hablar de estos un poco más adelante en esta lección. Ahora echemos un vistazo a nuestro diagrama de
ciclo de vida de actualización de vista de nuevo. Para el código de vista que
representa su IU, podría
crear una estructura para representar su pantalla de inicio y todo el código de vista para su pantalla de inicio
entraría en esa estructura. Si tuvieras una segunda
pantalla en tu app, podrías crear
otra estructura para esa segunda pantalla. Y todo el código de vista para esa segunda primavera
entraría en esa estructura. En este caso, cada estructura representa una
pantalla diferente en tu app. Ahora pasemos a la
parte de recuperación de datos de este diagrama. Podría crear una estructura
y llamarla gestor de datos. Y vas a poner
todo el código y funciones relacionadas con la recuperación y procesamiento de los datos dentro de esa estructura de
gestor de datos. En este caso, la
estructura no representa un screening de su aplicación, sino que representa un componente
crucial de su aplicación. Por lo que como puedes ver,
las estructuras son muy flexibles y ligeras y se
usan en toda tu aplicación. Ahora entremos a un patio de juegos
Xcode y un
vistazo a cómo podemos
declarar nuestra propia estructura. Está bien, así que aquí tengo un
nuevo patio de recreo vacío. Echemos un vistazo a cómo podemos definir nuestras propias estructuras. Primero, comienzas con
la palabra clave struct, seguido de un espacio, y luego el nombre
de tu estructura. Entonces voy a llamar a
éste mi estructura. Y luego pones un
espacio y
abres un conjunto de corchetes rizados. Dentro de los corchetes rizados, pondrías todo el código en tu estructura,
y eso es todo. Hemos declarado nuestra
propia estructura. Ahora antes de seguir
adelante y echar un
vistazo a lo que hay dentro de la estructura, quiero señalar
la convención
de nomenclatura de la estructura. Observe que lo
empecé con una letra mayúscula. Esta es la convención estándar. Esto es diferente a la carcasa de
camello que utilizamos para las variables y constantes
y los nombres de las funciones. Esos comenzaron con
una letra minúscula, y tenía cada palabra subsiguiente comenzando con una letra mayúscula. En tanto que para las estructuras,
comienza con una letra mayúscula y luego cada palabra subsiguiente
tiene una letra mayúscula. De acuerdo, ahora que ya
sabes de nombrar estructuras, vamos adentro y echemos un
vistazo a cómo
organizamos las cosas
dentro de la estructura. Por lo que generalmente en la parte superior
de la estructura, dentro de los corchetes rizados, declararíamos aquí
todas nuestras variables y constantes utilizadas para rastrear datos que están
relacionados con la estructura. Ahora bien, estos tienen un nombre especial, como mencioné antes, y llegaremos a eso
más adelante en esta lección. Por lo que aquí arriba después de declarar
todas las variables y constantes
datos de seguimiento para esta estructura, la siguiente sección que
tienes son todas
las funciones
relacionadas con la estructura. Ahora bien, no hay secciones claramente definidas
en una estructura. Ya sabes, todo el
código realmente sólo va entre los corchetes
rizados. Pero normalmente así es como
organizarías todas
las diferentes piezas de código
dentro de tu estructura. Entonces en la parte superior, variables
y constantes, y luego en la parte inferior, todas las funciones. Entonces como puedes ver,
las estructuras son geniales para
agrupar funciones, las variables y las constantes
están relacionadas por una cosa. Pero las estructuras suelen estar
destinadas a representar algo en su aplicación en el
diagrama de ciclo de vida de View Update que vio antes, vimos ejemplos de una estructura que se utiliza para
representar una pantalla de su así
como para representar un componente crucial de tu app como ese
Network Manager. Entonces, ¿por qué no hacemos
otro ejemplo, y les mostraré una estructura que es un
poco más concreta. Vamos a modelarlo después de algo. Por lo que antes en el diagrama de ciclo de vida View
Update, viste que podríamos
usar estructuras para representar una vista en nuestra aplicación. Entonces vamos con eso. Tengamos una aplicación de chat
hipotética. Y digamos que
esta estructura representa mi vista de chat. Entonces voy a cambiar el nombre de mi
estructura a la vista de chat. Ahora, bajo variables
y constantes, podría tener una variable para hacer un
seguimiento del mensaje, como el mensaje de chat que
estoy escribiendo en el cuadro de chat. Entonces voy a
llamar a este mensaje. Y el tipo de
datos esto sería, probablemente
sería una cadena. Y le voy a asignar
una cadena vacía, nada entre medias,
sólo dos comillas. Entonces eso es lo que se conoce
como una cadena vacía. Ahora bajo funciones,
podría tener grupos de código que realizarían
diferentes tareas en la pantalla. Por ejemplo, tal vez cuando el usuario toca el botón de enviar chat, ejecutaría algún código para enviar el
mensaje de chat al servidor. Por lo que declararía una función. Entonces eso es funk, seguido de, vamos a llamar a esto enviar chat
y dos paréntesis redondeados. Y voy a abrir
un par de corchetes rizados. Y dentro de aquí, pondría el código para enviar un mensaje de chat. Y luego entre
las variables y constantes y las funciones, tendría el código de vista para esta pantalla y como todo
el código para la IU. Por lo que ahora en esta estructura de
vista de chat, tenemos un pequeño paquete ordenado que contiene todo el
código para esa única pantalla. Ahora, antes mencioné
que las variables y constantes que declaras arriba en la parte superior de la estructura, tienen un nombre diferente. Entonces ahora quiero decirles
qué es eso. Esta declaración variable
que tengo aquí arriba mensaje. Esto se conoce como una propiedad
de la estructura de vista de chat. Si tuviera declaraciones variables adicionales
o constantes, esas serían conocidas como
propiedades del chat. ¿ También estructura?
Y aquí abajo, las funciones en realidad también
tienen un nombre diferente. A una función dentro
de una estructura se le conoce como método
de esa estructura. Por lo que esta función de enviar chat es en realidad un método
de la vista de chat. Entonces ahora solo actualicemos aquí
nuestros comentarios para que utilicemos la terminología adecuada en lugar de variables
y constantes aquí arriba. Voy a renombrar esto, bueno no renombrado,
pero solo reescribe mi comentario y llama a
esas propiedades. Y en lugar de funciones, estos se van a llamar métodos, sólo para que quede claro. Ahora, dentro de una estructura, las propiedades y los métodos
en realidad pueden trabajar juntos para cumplir con los deberes
de la vista de chat. Echemos un vistazo a algunas de las formas especiales en que
pueden trabajar juntos. Ahora echemos un vistazo a
esto enviar un método de chat. Por ejemplo, si
tuviéramos que escribir el código aquí para
enviar un mensaje de chat, seguro
sería útil
si pudiéramos acceder
al mensaje real en esta propiedad de
mensaje, ¿verdad? Bueno, en realidad podemos. Entonces si escribí
algo como esto, imprimí y luego dentro de
los paréntesis, pongo el nombre de la propiedad. De hecho, puedo acceder a esos datos. Y la razón de
esto es porque este inmueble se declara en
el alcance de esta estructura. Por lo que el alcance de la
estructura es cualquier
cosa entre estos
dos corchetes rizados, esencialmente los brackets rizados de apertura y cierre
de la estructura. Entonces cualquiera de los métodos que declaro aquí, por ejemplo, si declaro otro, llamemos a éste eliminar chat. Porque estos dos métodos también
están en el mismo alcance. Ya sabes, está dentro del
alcance de la vista de chat. Soy capaz de acceder a
la propiedad. Los inmuebles que
declaras aquí arriba son evaluables a todo
dentro del mismo alcance. Por lo que eso incluye todos
los métodos que aquí abajo se
declaran. Ahora tengo que decir que cada método tiene su
propio alcance local. Por lo que este método de envío de chat
tiene un alcance dentro de aquí. Y este método de borrar chat tiene su propio alcance entre
estos corchetes rizados. Entonces si declaro una variable
dentro de mi método de envío chat, Digamos que el prefijo var es
igual a Chris, digamos. Y entonces digamos que
uso este prefijo y me antepuse a mi mensaje de chat. Entonces todo el mensaje de chat sería Chris dice,
y luego algo. Entonces tal vez imprima prefijo más mensaje para obtener ese
tipo de efecto. Y yo quería hacer lo
mismo dentro de borrar chat. Si trato de acceder a la
variable de prefijo, tipo, imprimir, prefijo más mensaje
aquí abajo dentro del método
delete chat, verás que eso,
Xcode se queja. Nssa no puede encontrar
prefijo en el ámbito porque esta variable no se
declara en el mismo ámbito. Se declara dentro
del alcance de enviar chat. Entonces, ¿cómo arreglaríamos esto? Bueno, una de las formas en que
podríamos hacer eso es convertir esta variable de prefijo en una propiedad que declaramos
en la parte superior de nuestra estructura. Ya sabes, muévelo fuera
del alcance del chat de Sen y ponlo aquí arriba en el alcance de la vista de
chat en su lugar. Entonces ahora que estoy declarando mi prefijo como propiedad
de la vista de chat, puedes ver que
los errores desaparecen. Y puedo acceder a esta propiedad de
prefijo dentro. Ambos envían un chat y
eliminan los métodos de chat. Ahora quiero hablar de
otro tipo de propiedad. En primer lugar, definamos cuáles son
estas propiedades aquí arriba. Estas se denominan propiedades
almacenadas. Y la
razón es que cuando accedes a estas propiedades y las
haces referencia por
su propio nombre, simplemente te devuelve
el valor que está almacenado. Hay otro
tipo de propiedad donde al acceder a
ella, necesita
calcular o calcular el valor antes de
que se lo devuelva. Entonces echemos un
vistazo a cómo se ve este segundo nuevo tipo de
propiedad. Así que permítanme empezar por borrar esta propiedad de prefijo
aquí arriba y eliminar eso. Y luego voy a declarar
este nuevo tipo de bienes. Empieza
igual que una normal. Utilice el espacio VAR y luego el
nombre de la propiedad computada. Voy a llamarlo
mensaje con prefijo, seguido del nombre. En lugar de
asignarle algunos datos, se abre un conjunto
de corchetes rizados. Y aquí puedes poner el código
computacional para calcular el valor que
devolverás cuando se llame a esta
propiedad. Sin embargo, una cosa, porque el valor no se conoce de
inmediato, Xcode no puede inferir
cuál es el tipo de datos. Por lo que realmente tiene que
especificar el tipo de datos después del nombre de la
propiedad calculada. Entonces después de mensaje con prefijo, voy a poner colon y
voy a poner string
porque ese es el tipo de valor que esta
propiedad va a devolver. Esto es diferente de esta propiedad
almacenada aquí arriba mensaje donde realmente puedo usar la taquigrafía y
borrar el tipo de datos. Por lo que es solo
mensaje var es igual a cadena. Y puedo hacer esto porque de
inmediato estoy asignando un
valor a esa propiedad. Por lo que xcode puede mirar
ese valor y puede determinar e inferir cuál debe ser
el tipo de datos para esa
propiedad. Con una propiedad calculada, tengo que
especificar explícitamente el tipo de datos. De acuerdo, así que para mi mensaje de
propiedad computada con prefijo, Echemos un vistazo al código dentro de los corchetes rizados. Aquí, voy a usar
la palabra clave return, igual que con funciones, ¿no? Voy a regresar. Chris dice, así que esto es
un mensaje string plus. Entonces ahora en mi método de envío chat, en lugar de imprimir
prefijo más mensaje, solo
puedo devolver
mensaje con prefijo. Lo mismo para borrar chat. En lugar de prefijo más mensaje, voy a devolver
mensaje con prefijo. Por lo que cada vez que se accede a esta
propiedad, va a ejecutar
el código dentro estos corchetes rizados
y devolver eso como el valor para esa propiedad y necesita calcularla. Por eso se llama
propiedad computada. Ahora con propiedades de computadora, También
hay un atajo. Si solo hay una
línea de código aquí, entonces no necesito
la palabra clave return porque Xcode puede suponer que esta sola línea de
código generará los datos que quiero devolver
para mi computadora propiedad. Por lo que en realidad puedo simplemente
eliminar la palabra clave return. No obstante, si tengo
múltiples líneas de código, entonces definitivamente necesitaría esa palabra clave return
porque Xcode no sabe qué línea de código se supone que sea el valor que se devuelve. Entonces, por ejemplo, dentro de
mi propiedad de computadora, si digo dejar que el prefijo sea igual, dice
Chris, y luego aquí abajo
tengo prefijo más mensaje. No va a saber
qué declaración de código
devuelve el valor. Entonces en realidad tengo que usar la palabra clave
return así. Y eso va a estar bien. Ahora en lo que respecta a
las propiedades computadas, definitivamente
hay más de
lo que podemos hablar, pero esto será suficiente por ahora. En capítulos posteriores
de este curso. Definitivamente volveremos a repasar las propiedades
computadas. Muy bien,
hagamos un breve recapitulación antes de terminar esta lección, aprendiste a declarar
una estructura básica. Aprendiste sobre las propiedades y los métodos en la estructura, aprendiste sobre el alcance y también aprenderás sobre las propiedades
computadas. Ahora sé que la parte difícil es envolver la cabeza
en torno a estos conceptos. A medida que codificamos más juntos, van a ver que estos
conceptos se ponen en práctica. Yo sólo quiero decir una
cosa antes de que terminemos. Tú lo hiciste. Si eres completamente nuevo en codificar estas tres lecciones donde
las mente-flexión. En la siguiente lección, te
voy a mostrar cómo estos conceptos se relacionan con
tu proyecto real de Xcode. Está bien, nos vemos ahí.
10. 09: instancias de programación Swift: Hola y bienvenidos. Por lo que has aprendido que mucho de Swift en las últimas lecciones, empezaste con variables
y constantes y tipos de datos. Después aprendiste
sobre las funciones. Y luego aprendes
sobre estructuras que puedes agrupar
todas esas cosas juntas para representar o
modelar algo en tu app. Ahora esta lección va a ser la pieza final
del rompecabezas. No decir que vas a ser
un maestro veloz ni nada. Pero al final de esta lección, verás cómo todos los
conceptos y el código
encajan y funcionan juntos
dentro de una aplicación rápida de interfaz de usuario. Está bien, con eso dicho,
vamos a sumergirnos en la derecha. Está bien, así que empecemos
con un patio de recreo vacío. ¿ Recuerdas entonces
cuando aprendiste sobre funciones y te
enseñé a declarar una función
usando la palabra clave func seguida del nombre de la función. Digamos que mi función
seguida de un conjunto de paréntesis y luego un
conjunto de corchetes rizados. Y dentro de los corchetes
rizados, tendríamos el código
para la función. Pero esto es solo una declaración de
función que no se ejecuta ningún código,
no pasa nada. No es hasta que llamamos a
la función que el código dentro de esa
función se ejecuta ¿verdad? Entonces llamaría a la función
diciendo mi función, y luego los paréntesis. Si ejecuto mi patio de recreo en este
momento puedes ver que sale Hola
en la consola. Entonces las estructuras son
así también. Cuando declaramos una
estructura usando la palabra clave struct
seguida del nombre de la estructura. Entonces digamos mi estructura, seguida de un conjunto
de corchetes rizados. Y luego ponemos el código
dentro de esta estructura. Déjame mover mi función aquí, y vamos a declarar una
propiedad aquí arriba, var mensaje es igual hola. Y luego imprimamos mi mensaje de propiedad
dentro de mi función. Esto es sólo una declaración
de una estructura. En realidad no hace nada. Piénsalo como un
plano para un edificio. Para que podamos
usar esta estructura, necesitamos darle vida. Tenemos que crear
lo que se llama
instancia de la estructura. puede pensar en ello como convertir este plano para construir
en un edificio real. Entonces, ¿cómo vamos a crear una instancia de esta estructura? Bueno, eso es fácil. Simplemente escribe el nombre de la
estructura seguido de un par de
paréntesis como ese. Ahora por si acaso
todavía estás borroso sobre el concepto de crear una
instancia de una estructura. Déjame darte un par de analogías
diferentes para
ayudarte a tratar de entender
este concepto. A algunas personas les resulta
más fácil cuando digo que declarar una estructura o la declaración
de esta estructura es algo así como un plano para un automóvil o un
plan de arquitectura para una casa. Usando ese plano o usando
ese plan de arquitectura, puedo crear autos y
puedo crear casas, y esos son los objetos
reales. En tanto que el plano o el plan de arquitectura es
más bien como una plantilla. Simplemente describe cómo va a funcionar
esa cosa
una vez que lo des a la vida. Entonces eso es lo que está
pasando aquí mismo. Se trata de una declaración
de una estructura. Describe todas sus
propiedades y funciones. Ya sabes, las cosas
que puede hacer. Y entonces es sólo hasta que lo
demos a la vida
creando una instancia de la misma
que realmente podemos usarla. Entonces ahora que hemos
creado una instancia de la misma, vamos a explorar qué
podemos hacer con ella. Ahora, en primer lugar,
tenemos que hacer un seguimiento de esta instancia porque
se considera una pieza de datos, necesitamos hacer un seguimiento de la misma y tener una forma de referenciarla. Entonces vamos a crear una variable llamada sólo voy a
llamarla a por el bien de la simplicidad. Y voy a asignar esa nueva instancia
a mi variable a. Hey, espera un minuto. Si esta instancia es
una pieza de datos, entonces ¿cuál es el tipo
de datos de esta pieza de datos? ¿ Y qué tipo de datos tiene
esta variable? Bueno, el tipo de datos es el nombre de tu
estructura. Eso es correcto. Por lo que realmente puedo cambiar mi declaración variable
de var a, var un colon, mi estructura. Sí, su estructura
es su propio tipo de datos. Entonces esta instancia
que has creado, el tipo de datos de eso
es mi estructura. Ahora esta pequeña instancia tiene superpoderes porque lo hemos
diseñado de esa manera. Puede contener datos en
su propiedad de mensaje, y puede generar ese mensaje usando el método
myfunction. Entonces, ¿cómo podemos ir para acceder a esas cosas
de esta instancia? Bueno, ahí es donde entra la
notación de puntos. Echemos un vistazo a
qué es la notación de puntos. Entonces hagamos referencia a
la variable a, seguida de un punto o un punto. Y como puedes ver en
el menú autocompletar, puedes elegir mensaje que
está accediendo a la propiedad, o puedes seleccionar mi función, que va a ejecutar
el código en ese método. Por lo que usando la notación de puntos, se
puede acceder a las propiedades y los métodos
de esa instancia. Vamos a probar esto. Entonces, en primer lugar, voy a asignar algo a la
propiedad de esta instancia. Voy a asignar,
digamos hola. Y luego voy a imprimir. A.me, sólo para mostrarles que efectivamente
puedo acceder a esta propiedad
y puedo imprimirla. Siguiente. En lugar de usar
esta declaración de impresión aquí, simplemente
voy a llamar al
método de esa instancia. Voy a llamar a mi función. Y voy a volver a ejecutar
este código. Y todavía nos drogamos
porque el código dentro de este método en realidad simplemente
imprime la propiedad. Ahora estas pequeñas instancias bastante
el héroe de acción ¿no? Puede hacer todas las cosas para las
que lo diseñamos. Ahora bien, debido a que esta declaración de
estructura es como
un plano o un plan de arquitectura, eso significa que podemos crearla tantas instancias como queramos. Entonces sigamos adelante y
creemos una segunda instancia. Esta vez voy a
declarar otra variable, var ser para almacenar otra
instancia de mi estructura. Ahora lo importante
a tener en cuenta es que
se trata de instancias completamente
independientes. Volviendo a la analogía del
plano del automóvil, es como si la fábrica de automóviles hiciera dos autos del
mismo plano. Esos dos autos son tratados
como dos autos diferentes. Lo mismo aquí. Acabo de crear dos
instancias de mi estructura. Por ejemplo, si asigno
un mensaje para ser alto, entonces imprimo el
cordón en el mensaje, o me permito asignar otra cosa para ser.message y
lo imprimo. Verás que para un punto
myfunction llamando a ese método
, imprime alto. Y cuando imprimo b.me,
sale mundo a la consola. Por lo que puede ver que cada
instancia realiza un seguimiento de sus propios valores dentro de
la propiedad de mensaje. Ahora ya sabes que
necesitas crear una instancia de una estructura
para poder utilizarla. Echemos un vistazo a cómo las instancias de estructuras
pueden trabajar juntas. Ahora para usar un ejemplo anterior
de la lección anterior, supongamos que tengo una vista de
chat en mi aplicación, así que he declarado una estructura
para representar esta vista. Agrupa todas
las propiedades, el código de vista y los métodos
relacionados con mi vista de chat. Y supongamos que tenía otra estructura para
agrupar todo el código
de red
o el código de base de datos
para guardar los datos. Declaremos algo
así aquí. Entonces struct, Llamemos a
esto la red, o llamémoslo el gestor de
bases de datos. ¿ De acuerdo? Y supongamos que aquí
tenía un método. Entonces func, llamemos a
esto guardar datos. Y el parámetro de entrada para esto son los datos
que queremos guardar. Entonces digamos que declaro un solo parámetro llamado data
y lo convierto en un tipo de cadena, y devuelve un valor, va a devolver
un valor booleano, verdadero o falso, indicando si esto fue
exitoso o no. Verdadero para un exitoso,
falso para infructuoso. Y en la vida real, no
sería factible devolver realmente un resultado
al instante como este, porque dependiendo las condiciones de la
red
y otros factores, no se quiere esperar
alrededor de los datos a guardar. Por lo que no quieres que se detenga la
ejecución. Pero por el bien de la simplicidad, digamos que podemos
devolver el resultado de inmediato. Entonces cuando escuchas esto, este código guarda los datos y
devuelve un resultado booleano. Entonces en este ejemplo, sólo
voy a volver verdadero. Entonces solo voy a
convertir un valor codificado porque no voy a
implementar este método. Lo principal que quiero
mostrarte es cómo la vista de chat
va a usar el
gestor de base de datos para guardar el mensaje. Por lo que de vuelta en la vista de chat, en este enviar un método de chat, por ejemplo, podría crear una instancia del gestor de
base de datos. Entonces digamos que var d b es
igual a gestor de base de datos, seguido de un conjunto
de paréntesis. Y así, he creado una nueva instancia de ese gestor de
base de datos. Y ahora si quisiera
guardar mi mensaje, llamaría es método de datos
guardados. Por lo que db dot guardó datos y
pasaría en mi propiedad de mensaje
como los datos de entrada. Voy a seguir adelante
y pasar un mensaje. Pero recuerda, cuando llamo a
este método de datos
guardados, devuelve
valor booleano para que yo indique si ese guardado
fue exitoso o no. Por lo que puedo asignar la salida de
ese método a una constante. Voy a llamar que esto
fue éxito, ¿verdad? Por lo que voy a asignar
esa salida booleana a una nueva constante
llamada fue éxito. O tal vez simplemente lo
llamaré exitoso. Y luego aquí abajo, puedo escribir algún código. Consulta el valor
booleano exitoso. Si no tiene éxito. Mostrar alerta al usuario. Ahora en futuras lecciones
vas a aprender
a escribir estas declaraciones en
base a las condiciones. Pero por ahora, este
comentario tendrá que ver. El principal comida para llevar. Para este ejemplo que te estoy
mostrando es el hecho de que dentro del método enviar un chat
de la estructura de vista de chat, está usando otros métodos de
estructuras creando una instancia de la misma. Entonces así es como las instancias
de estructuras pueden trabajar juntas para hacer que
tu aplicación funcione. Y esto es esencialmente
todo lo que tu aplicación es. Se trata de diferentes
instancias de estructuras trabajando juntas para
producir las vistas, para manejar la entrada del usuario
y para ejecutar la lógica. Ahora quiero hablar de niveles de
acceso por un segundo. Supongamos, por ejemplo,
en mi gestor de base de datos, tenía algún tipo de información
que estaba rastreando como una propiedad que solo necesitaba el gestor
de base de datos. No sería relevante
para ninguna otra estructura. A lo mejor es un nombre de servidor
o algo así. Entonces déjame simplemente escribir una nueva propiedad en mi
gestor de base de datos llamada nombre del servidor. Y le asignaré una
cadena llamada servidor uno. Ahora esta propiedad no sería interesante para ninguna
otra estructura, pero como puedes ver en
el método send chat, he declarado esta instancia
del gestor de base de datos. Si escribo db dot
usando notación de puntos, puedo acceder a esa propiedad del nombre del
servidor. Y a veces quizá no
quieras exponer estas cosas. Entonces lo que puedes hacer es especificar un nivel de acceso
frente a esa propiedad. Entonces delante del
nombre del servidor var, esa propiedad, puedo poner la palabra clave privada, Así que ahora se convierte en privado
var nombre del servidor. Y al hacer esto, mantiene esa
propiedad accesible sólo dentro del alcance del gestor
de base de datos. Entonces como pueden ver, todavía
puedo acceder al nombre del
servidor dentro
del método de datos guardados. De acuerdo, está en el mismo alcance, pero en el método
de chat del centro de la vista de chat aquí abajo. Si
vuelvo a utilizar la notación de puntos, por mi instancia, se
puede ver que no puedo acceder a ese
objetivo de propiedad o no puedo verlo. Y además, en realidad se
puede hacer lo mismo
con las funciones. Por lo que puedo poner privado
frente a la palabra clave func. Y ahora se puede ver
que Xcode se queja. No puedo ejecutar este método desde el método de chat del sol
de la vista de chat. Ahora es una buena
práctica estar al tanto de qué propiedades
y métodos necesitan ser accesibles a
otras instancias y otras estructuras y marcar
todo lo demás es privado. Hacer esto es una forma proactiva de
evitar que surjan comportamientos inesperados y errores. Muy bien, y ahora para la pieza
final de la lección, quiero relacionar todo lo
que has aprendido
hasta ahora con una rápida
aplicación de interfaz de usuario dentro de XCode. Entonces sigamos adelante y hagamos eso. Muy bien, así que ahora sigamos
adelante y empecemos un nuevo proyecto de app para iOS. Solo voy a nombrar este proyecto de
prueba y asegurarme que las interfaces Swift UI y ciclo de vida sean lenguajes de
aplicación de UI rápidos Swift, y estamos bien para ir. Entonces solo voy
a guardar esto en el escritorio y
primero vamos a saltar a la
vista de contenido dot swift. Ahora, sólo voy a cambiar
esto a iPhone 12 y
voy a golpear currículum. Pero la parte importante es
lo principal que
quería mostrarte realmente
es el código, ¿no? Echa un vistazo a esta estructura. Sabes que eso significa
que la vista de contenido
es una estructura. Hay algunas palabras clave y bits de código que
vamos a pasar por alto por ahora porque aún no
hemos aprendido eso y ahora no es el momento
adecuado para repasarlo. Entonces voy a pasar por alto
un par de cosas por realmente quiero señalar que conceptos que has aprendido hasta ahora y
mostrarte dónde encajan. Entonces esta es una
declaración de estructura. Déjame colapsar
este código por un segundo. Ahí vas. Por lo que se puede ver que se
trata de una estructura. La vista de contenido es el nombre de la estructura
seguido de la vista de dos puntos. Y vamos a llegar a
esto en tan solo un segundo. Y luego se pueden ver
los corchetes rizados que contienen todo el
código para esa estructura. Está bien, entonces vamos a
expandirlo de nuevo. Y echemos un vistazo a
qué más hemos conseguido. Aquí abajo. Tenemos la palabra clave var. Entonces ese es el inicio
de una propiedad. El nombre de esta
propiedad es cuerpo. De acuerdo, Entonces después de eso tenemos colon y luego
tenemos algo de vista. Y vamos a llegar a esto de
nuevo en tan solo un segundo. Pero se puede ver que aquí hay un conjunto de corchetes
rizados. Entonces eso te dice que esta
es una propiedad computada. Entonces déjame colapsar
el código otra vez. Y se puede ver que
efectivamente esto
parece un tipo de datatype de cuerpo
var propiedad computada, y luego un conjunto de corchetes rizados dentro es el código
que se calcula o calcula para devolver el valor cuando se accede a esta propiedad. Entonces, ¿puedes ver todos
estos conceptos que aprendimos en las
últimas cuatro lecciones? ¿ Están regresando? Ahora quiero hablar de
esta vista y alguna vista. Entonces hablemos de esta visión de colon en la declaración de
la estructura primero. A juzgar por cómo has
usado el colon antes, podrías pensar que este es el tipo de datos para la
estructura, pero no del todo. Eso realmente no tiene
sentido, ¿verdad? Porque recuerde, el nombre
de la estructura en sí es el tipo de datos para
instancias de esa estructura. Entonces, ¿qué es esta vista de colon
después del nombre de la estructura? Bueno, cuando estás
declarando una estructura, los dos puntos después
del nombre de la estructura indican que esta estructura
sigue un protocolo. En este caso, sigue
el protocolo de vista. Entonces, ¿en qué
piensas cuando escuchas la palabra protocolo? Bueno, para mí, lo
pienso como un conjunto de reglas o un conjunto de acciones. Por ejemplo, algo así como
el protocolo de emergencia de incendios
que podría
tener un edificio para qué hacer
cuando ocurre un incendio. O como el código de construcción que un desarrollador tiene que seguir para
construir una casa que sea segura. De igual manera en Swift,
un protocolo es una especificación o un conjunto de reglas que la estructura
tiene que seguir. Esta
parte de vista de dos puntos indica que esta vista de contenido sigue
el protocolo de vista. Terminología informal Swift. vista de contenido se ajusta
al protocolo de vista. Ahora una
cosa importante a mencionar es que escribir colon seguido del protocolo es decir y declarar que se
ajusta al protocolo. Pero lo haces en realidad, es un poco como levantar la
mano al declarar algo. Pero, ¿en realidad sigues
las reglas de ese protocolo? Y así el código dentro de esta
estructura en realidad tiene que
satisfacer las especificaciones
para ese protocolo. En este caso, para que el
protocolo de vista se ajuste a él, tenemos que tener una propiedad de cuerpo
que devuelva alguna vista. Como puede ver aquí, nuestra estructura de vista de contenido efectivamente
satisface esa regla. Entonces por eso se ajusta
al protocolo de vista. Entonces ahora que entiendes
cuáles son los protocolos, puedes ver que el tipo de datos
para esta propiedad del cuerpo es en realidad cualquier valor que
se ajuste al protocolo de vista. Sí, en este caso, el tipo de datos para esta propiedad
no es en realidad tipo de datos, pero en realidad es cualquier tipo de datos que se ajuste a un protocolo
determinado, en este caso, el protocolo de vista. Por lo que dentro de
este código para esta propiedad computada, necesita devolver alguna instancia que se ajuste
al protocolo de vista. Abramos este código
y veamos qué tenemos. Entonces lo que tenemos aquí, bueno, tenemos una sola declaración de código. Y recuerda lo que dije
sobre las propiedades computarizadas. Si es solo una sola declaración de
código, entonces puedes omitir
la palabra clave return, pero voy a especificarla
explícitamente para
que quede claro para ti. Entonces, ¿qué está pasando aquí? Parece que estamos creando una instancia de una estructura de texto. Ahora una forma de
averiguarlo es si entras
al panel de utilidades o al panel de inspector
y entras a la pestaña de ayuda rápida aquí mismo. Y solo pones tu cursor sobre lo que
quieres mirar. Por lo que voy a dar clic
en este texto. Entonces como se puede ver aquí, efecto, el texto es una estructura. Por lo que estamos creando una instancia
de la estructura del texto. No obstante, notarás que crear esta instancia
es diferente a cómo lo hicimos antes porque usamos un
conjunto vacío de paréntesis. Estoy aquí cuando estamos creando una instancia de
esta estructura de texto, estamos pasando
algunos datos de entrada. Entonces sí, en realidad puedes
pasar los datos de entrada como parámetro a la creación de una instancia de una estructura. Estos se llaman inicializadores. Ahora aún no hemos
hablado de eso y lo haremos en próximas lecciones. Pero por ahora, solo entiende que hay una manera
de que pases los datos
de entrada a la creación de una instancia de una estructura. Entonces eso es exactamente lo que está
pasando aquí mismo. Ahora podría estar preguntándose, ¿esta estructura de texto
se ajustó al protocolo de vista? Bueno, debe escribir porque acuerdo a esta propiedad corporal, lo que sea que se devuelva para esta propiedad computada
tiene que ajustarse a esto. Entonces de nuevo, sumémonos
en la ayuda rápida. Entonces voy a
flotar sobre los textos. Voy a bajar. Y de hecho, voy a
abrir la documentación del desarrollador. Ahora si estás usando Xcode 1.112, hubo un error que se
estrelló
al intentar abrir esta ventana. Por lo que solo tienes que actualizar
Xcode de esto se bloquea por ti. De acuerdo, Entonces esta es la
documentación para los textos. Se puede ver que se
trata de una estructura. Y si te desplazas
todo el camino hacia abajo, voy a saltarte todas estas cosas porque solo quiero mostrarte que se ajusta a dos
protocolos en realidad. Pero lo que nos interesa es que sí se ajusta
al protocolo. Está bien, Otra
cosa que quiero
señalar es que esto, recuerda esto desde temprano. Este es un modificador. Y ahora a ti, debe parecer
bastante familiar, ¿verdad? Porque parece que
estamos llamando a un método. Esta es la notación de puntos justo aquí. Estamos creando una instancia
de la estructura del texto. Y luego estamos llamando
al método de relleno
en esa instancia. A ver si lo pongo
en la misma línea. Podría parecer un poco
más familiar para ti. De acuerdo, así que espero que
los puntos estén empezando a conectar. No se pretende juego de palabras. De acuerdo, entonces para relacionar esto de nuevo la lección de
estructuras anteriores donde te mostré
cómo declarar una estructura. Teníamos un par de secciones
diferentes, ¿verdad? Por lo que en la parte superior aquí
declararíamos nuestras propiedades. Y de hecho, esta propiedad corporal se considera un derecho patrimonial. Pero también contiene
nuestro código de vista. Por lo que aquí sería donde va
nuestro código de visión. Y luego aquí abajo
declararíamos los métodos
para esta estructura. De acuerdo, entonces creo
que entiendes que esta estructura
llamada
vista de contenido representa la vista principal o la pantalla principal de esta app. Pero no dijimos
que las estructuras por sí mismas no hacen nada
realmente. Es necesario crear una instancia
de la misma para que funcione. Bueno, ¿dónde estamos creando
una instancia de vista de contenido? Para eso, necesitamos perforar de nuevo hasta el
punto de entrada de la app, que es este de aquí. Por lo que puedes ver esto por sí mismo
también es una estructura y el nombre de esta estructura es el
nombre de tu proyecto y se ajusta a un
protocolo llamado app. Entonces veamos la ayuda
rápida y veamos qué se trata este protocolo. Crear una aplicación mediante la declaración de una estructura que se ajuste
al protocolo de la aplicación, implementar la
propiedad computada
del cuerpo requerido para definir
el contenido de la aplicación. Ahora tenemos otra propiedad computada de
cuerpo. Voy a saltarme algo de esta escena en cosas del grupo
Window. Quiero señalar que aquí es donde estamos creando
una instancia, esa estructura de vista de contenido. Entonces, ¿ves cómo encaja
todo? Además, volvamos a la vista de
contenido y déjame
mostrarte algo más. Entonces para esto, voy a volver a
abrir el lienzo. Y voy a
retomar la vista previa. Mira esta
estructura aquí abajo. Esto es lo que está impulsando la
vista previa que se ve aquí. Esta estructura no
se utiliza realmente como parte de tu app. Es sólo para previsualizar
en el Canvas aquí mismo. Por lo que se ajusta al protocolo de proveedor de
vista previa. Y tiene una propiedad llamada previsualizaciones, palabra clave
estática ignorar. Por ahora, vamos a explicar
eso en una futura lección. Y aquí abajo, puedes
ver que se está
creando una instancia de tu
estructura de vista de contenido y eso es realmente
lo que se muestra aquí. De hecho, puedo
aplicar modificadores a esta instancia y va
a cambiar lo que tenemos aquí. De acuerdo, así que puedo usar la
notación de puntos para llamar a modificadores, que ahora, ya sabes, son solo métodos, ¿verdad? De esa opinión o
de esa instancia. En realidad. En lugar de hacer
eso, ¿por qué no
usamos la forma visual y vemos
cómo cambia el código. Por lo que 10, previsuo este cambio. En realidad voy a cambiar
el esquema a modo oscuro. Por lo que puedes ver que agrega un
modificador a esa instancia. También cambiemos el
dispositivo a iPod touch. puede ver que agrega otro modificador
llamado dispositivo de vista previa. Ahora bien, ¿qué pasa si
creo otra vista previa? Porque puedes hacer clic en
este botón aquí mismo, y va a crear
otra vista previa aquí abajo. Se puede ver qué
pasa con el código. Bueno, creó
otra instancia de vista de contenido y
tiene sus propios modificadores. Ahora esto se
agrupa por un contenedor, un contenedor llamado grupo, que
realmente no hemos cubierto aún, pero en el futuro
solo sabremos que
agrupa vistas. Entonces esta instancia de
vista de contenido es para esta de aquí arriba, y esta instancia es
ésta de aquí abajo. Ver Puedo cambiar este
esquema a luz. Y se puede ver que
cambia eso aquí. Y puedo cambiar este
dispositivo a iPhone 12. Y los cambios que
modificador ahí. Por lo que son
instancias independientes. Yo era mucho para aceptar
y por eso nunca te recomiendo
que memorices nada. Cuanto más práctica obtienes, pronto se
convertirá en segunda naturaleza para ti. Hagamos una
recapitulación rápida, ¿sí? Aprendiste a crear
instancias de tu estructura. Aprendiste a usar la notación de
puntos para acceder a los métodos y las
propiedades de tus instancias. Y también aprendiste
sobre los niveles de acceso. De modo
que se puede controlar qué propiedades y qué métodos se puede acceder
con la notación de puntos. Por último, viste cómo
todos estos conceptos
se relacionan de nuevo con una aplicación de
interfaz de usuario rápida en Xcode. Ahora en las siguientes lecciones, vamos a
volver a nuestro juego de
cartas de guerra y tomar todo este nuevo conocimiento rápido encontrado y dar vida a ese juego de
cartas de guerra. En la siguiente lección, te
mostraré cómo usar el elemento botón para
manejar la interacción del usuario. Está bien, nos vemos ahí.
11. 10: botones de SwiftUI: Hola y bienvenidos. En las lecciones anteriores, aprendiste los conceptos básicos
de la programación Swift. Y te mostré cómo esos conceptos se aplicaban
a tu proyecto Xcode. Ahora, volvamos a
Swift UI y vistas. Específicamente hoy quiero
hablar de la vista de botones. Vamos a sumergirnos justo en. Está bien, entonces
tengo un nuevo Swift ¿proyecto aquí? Pensé que echaríamos
un vistazo a crear algunas instancias de botón
en un proyecto fresco juntos antes de
volver al
juego duro de trabajo para usar allí la
instancia de botón. Entonces sigamos adelante y eliminemos
esta vista de texto aquí mismo. En crear algunas instancias, un botón es una estructura
igual que lo era ese texto. Y necesitamos crear
una instancia de botón. En otras palabras, necesitamos
instanciar un botón y es sólo otra
forma de decirlo. Entonces sigamos adelante
y tecleemos botón, seguido de abrir un corchete redondeado a la
izquierda. Y eso va a sacar a la
luz nuestro menú de autocompletar. Hay un par de métodos de inicializador
diferentes que podemos usar para crear una instancia de botón. Y estos
métodos inicializadores, recuerden, son solo formas diferentes de crear una instancia mientras
pasan algunos datos. Dos de los más
comunes que vas a estar usando es éste de aquí, donde pasas en una cuerda. Y este protocolo de
cadena de tipo de datos solo significa cualquier cosa que se ajuste a ese protocolo de cadena y una pieza de texto lo hace. Este te permitirá simplemente
pasar en un trozo de texto para
usar como etiqueta de botón. Y también
te permitirá pasar un bloque de código para que se ejecute cuando se toque ese
botón. Entonces echemos un vistazo a estos
parámetros con más detalle. Por lo que este primer parámetro para la etiqueta del botón es
bastante sencillo. Aquí solo pasas
en un trozo de texto. Voy a llamar a este
botón, Click Me. Y si actualizamos, nuestra vista previa hará cualquier cosa aún antes de especificar
el segundo parámetro. El tipo de datos para este parámetro de
acción es algo que aún no
has visto. Pero se parece a
una firma de función sin
el nombre de la función, ¿verdad? A esto se le llama cierre. Y en pocas palabras, se puede
pensar en ello como un bloque de código o como una función
sin el nombre de la función, se pasa en un bloque de
código como parámetro. Cuando se toca el botón, se va a ejecutar
ese bloque de código. Nuevamente, a esto se le llama cierre. Entonces echemos un
vistazo a cómo podemos especificar el cierre
como parámetro. Ahora una de las
cosas más fáciles que puedes hacer es resaltar este parámetro
y simplemente pulsar Enter. Y Xcode va a
abrir
automáticamente un cierre para que
escribas tu bloque de código en. Pero no voy a
hacer eso ahora mismo porque quiero pasar
por los pasos
y realmente te lo
descompongo y
mostrarte exactamente lo
que estás especificando. Y luego al final,
te mostraré lo que pasa cuando sí pegues Enter y solo deja que Xcode
abra el cierre por ti. Especifiquemos ese
cierre manualmente por ahora. Muy bien, entonces el tipo
de cierre que esto espera es el
tipo más simple que se puede ver. No acepta parámetros. Estos dos corchetes aquí mismo, estos dos corchetes redondeados. Esa es una lista de parámetros, igual
que tendrías cuando estás
declarando una función. Pero está vacío, así que no
hay parámetros. Y luego a continuación se ve un guión seguido de un símbolo
mayor que. Y sabes que eso
significa tipo de retorno, ¿verdad? Y regresa vacío. Vacío no significa nada. Por lo que no devuelve nada y no
acepta nada. Es muy simplemente
un bloque de código. Muy bien, entonces ahora que ya
sabes el tipo de función entonces está esperando, Vamos a seguir y especificarlo. Entonces voy a borrar eso. Y voy a abrir
un par de corchetes rizados. Y no necesito
devolver nada. No necesito
especificar ningún parámetro. Es muy sencillamente sólo
el bloque de código. Por lo que se puede especificar eso con sólo un conjunto de corchetes
rizados. Y entre esos corchetes
rizados, pones cualquier
declaración de código que quieras. Entonces solo voy a
imprimir hola mundo. Y ese es tu botón
completado. Dirijamos este proyecto
y veamos qué pasa. De acuerdo, Así que hemos estado en el
medio que dice click conmigo. Cuando lo toco,
corre el cierre. Se ejecuta el código en el cierre. Y se puede ver que dentro, allá
abajo en la consola, sí imprime hola mundo cada vez que hago
clic en este botón. De acuerdo, ahora volvamos a nuestro proyecto Xcode
porque esa es solo una forma de
instanciar un botón. Voy a agregar un
comentario aquí y llamar a esta instancia de botón
con cierre. ¿De acuerdo? Y entonces también voy a
poner esto dentro de una pila V. En realidad, te voy a
mostrar una taquigrafía, forma
genial de hacerlo. Voy a meterlo dentro de la pila porque quería
mostrarte un par de otras
formas de crear botones. Entonces vamos a crear un
par de botones juntos. Adelante y comando
haga clic en este botón y simplemente puede
elegir Embebido y v stack. Haz eso. Pone el elemento
en la pila para ti, aunque, no pudo
mover mi comentario ahí. Entonces pongamos eso justo
ahí. Está bien. Entonces tenemos un botón y quiero
mostrarles el mismo botón, pero con una mano corta, Hay algo llamado
el cierre trailing. Déjame mostrarte lo que eso significa. Entonces instancia de botón
con cierre final, voy a copiar y
pegar el botón que
acabamos de declarar y crear
otra copia del mismo. Entonces si en la lista de parámetros, el último parámetro
espera un cierre, hay una taquigrafía. Y cómo funciona es
que sacas ese último parámetro de la lista de parámetros
y simplemente
pones el cierre después de
la llamada al método. Déjame mostrarte a lo que me refiero. Entonces en esta lista de parámetros, ese cierre es ese
último parámetro, ¿verdad? Por lo que este es un candidato primo para un atajo de cierre de trailing. Yo tomo el propio cierre. Entonces voy a
cortar esto de la lista de parámetros. Y simplemente
voy a agregar un espacio después del soporte redondeado final y luego simplemente pegar
el cierre así. Y entonces puedo
seguir adelante y quitar la etiqueta perimetral
o la
etiqueta de argumento de esa lista de
parámetros así. Y estas declaraciones de dos
botones son exactamente lo mismo. Es sólo que están
escritos de manera diferente. Uno está especificando
el cierre dentro de la lista de parámetros
y el otro lo
está especificando usando
un cierre final final. Y es por eso que
quería mostrarte esto manualmente en lugar de solo dejar que Xcode te abra
un cierre. Porque cuando
dejas que Xcode lo haga, va a reconocer
que esos parámetros de cierre, el último, y
lo va a convertir en un
cierre final para ti. Yo soy automáticamente así que
déjame mostrarte eso. Si declaro otro botón,
usemos el mismo. Haga clic en mí, y luego toque ese parámetro de acción,
o haga doble clic
en él o golpeo Enter y dejo que Xcode
abra el cierre. Automáticamente lo cambia
en un cierre final. Entonces pensé que eso
sería realmente confuso para ti si nunca hubieras
visto eso antes. Y así por lo menos ahora
sabes lo que es un
cierre de trailing y por qué, ya
sabes, Xcode
hace esto por ti. De acuerdo, entonces eso es solo
crear un tipo de botón. Ambas formas de crear botones donde solo tienes una
pieza de texto como etiqueta. Pero y si quisieras que
tu botón fuera una imagen o un icono o
algo así, no sólo una simple pieza de texto. Bueno, hay otro método
inicializador para el botón que
podemos usar para eso. Entonces echemos un vistazo a esa instancia de botón
con vista de etiqueta. Entonces sigamos adelante
y tecleemos botón, abran un corchete. Y ahora echemos un vistazo a este otro método inicializador con un parámetro de acción y
etiqueta, crea un botón que
muestra una etiqueta personalizada. Y se puede ver de
la lista de depredadores que el primero me dejó, déjame volver a ese menú de
autocompletar. Echando un vistazo a esta
lista de parámetros ahora se puede ver que este parámetro de cierre de acción
es el primer parámetro, y luego el segundo
parámetro es una etiqueta. Ahora para este parámetro de etiqueta, puedes devolver cualquier vista que quieras representar
tu botón. Entonces sigamos adelante y elijamos
este método de inicialización. Se puede ver para el
cierre de acción aquí mismo, si hago doble clic en él, no se
va a convertir en
un cierre de trailing. Y la razón de
eso es porque
no es el último parámetro
en la lista de parámetros. Por lo que eso no califica para convertirse en un cierre de
trailing. De acuerdo, Entonces cuando se toque de nuevo este
botón, solo
voy a imprimir Hello World
en la consola. Pero para la etiqueta,
notarás que tengo cierta libertad para especificar qué tipo de vista
quiero devolver. Entonces aquí solo está
devolviendo un TextView con una simple pieza de
texto aquí llamada botón. Pero puedo, puedo
devolver una imagen B, por ejemplo, podría devolver
una pila de vistas diferentes. Puedes devolver
lo que quieras. Permítanme retomar aquí la
vista previa para que puedan ver los diferentes
botones que hemos declarado. ¿ De acuerdo? Entonces lo que voy a regresar aquí es tal vez menos retorno
en cada pila. Y voy a devolver
un texto que dice Editar. Y también voy a devolver
una imagen frente a eso. Y para esta imagen, voy a especificar, no
he agregado ninguna imagen
a nuestra biblioteca de activos, pero voy a usar algo
llamado símbolo SF. Ahora aún no hemos pasado
por los símbolos SF. Lo haremos en
una lección futura. No obstante, los símbolos SF son geniales. Porque básicamente son
un conjunto de iconos que viene con Xcode que
solo puedes usar en tus aplicaciones. Y estas son características muy
especiales de estos símbolos SF que
pasaremos en una futura
lección en este curso, hay una app mac gratuita llamada símbolos SF que
puedes descargar donde puede navegar por todos
los diferentes símbolos que están
disponibles para usted de forma gratuita. Entonces por ejemplo, solo
voy a usar este lápiz uno. Cada uno de estos tiene un nombre
que simplemente puedes especificar y
podrás utilizarlo. Por lo que para
la imagen, el inicializador a usar, si desea usar S de símbolos, se llama nombre del sistema. Y luego especificas
el nombre que
viste debajo del icono. Lápiz. Yo sólo voy a poner lápiz ahí mismo y se puede
ver que aparece el icono. Muy bien, Así que ahora
ejecutemos esta aplicación en el simulador y echemos
un vistazo a lo que sucede. De acuerdo, así puedo tocar este, dice Hola Mundial, ese dice Hola mundo, ese dice Hola mundo. Enseñó este también
dice helloworld. Esos son los cierres que especifiqué para
todos los botones. Muy bien, Ahora ya
sabes especificar un botón sencillo con solo
el texto para su etiqueta. Ya sabes especificar un botón el cual puedes usar cualquier
vista como botón. Ahora vamos a volver a nuestro juego de cartas de
guerra y convertir esa imagen de botón de trato
en un botón real. De acuerdo, entonces ahora
tengo el juego de cartas de guerra en el
que estábamos trabajando
todo el camino de regreso, fue menos de cuatro o cinco? Pero aquí es donde llegamos. Y si recuerdas, habíamos usado una imagen
para este botón de trato. Y este es el código de
vista para eso. Y se puede ver que
es sólo una imagen. Ahora, ya sabes cómo
convertir esto en un botón. Entonces quiero que
solo pausas el video ahora mismo y
lo pruebes por tu cuenta, en tu propio proyecto justo
como un poco de ejercicio. Después de que
lo hayas probado por ti mismo. O si te quedas atascado, sigue reproduciendo este video
y lo haremos juntos. Está bien, probémoslo juntos. Entonces voy a crear
un poco de espacio aquí. Y vamos a
declarar un botón. Usando botón. Vamos a abrir corchetes, y vamos a elegir este método de inicializador de
etiquetas de acción. Ahora, dentro de la acción, sólo
vamos a
abrir ese bloque de código, pero realmente no
vamos a hacer nada todavía. Eso haremos en
la siguiente lección. Pero para la etiqueta dentro
de un botón de texto, etiquetar y borrar esa vista. Y simplemente voy a mover
nuestra imagen con el trato sido en la etiqueta para nuestro botón. Y así como eso, realmente no se
puede ver
ningún cambio visual. Pero sin embargo, si
ejecutas esto en el simulador, entonces notarás
que puedes tocarlo. Es un botón natural. Otra forma, si
no quieres lanzar tu simulador es que
puedes pulsar este botón aquí
mismo para la vista previa en vivo y estoy absolutamente empezar. Sí. Entonces puedes seguir adelante y
tengo que golpear Resume en eso. Está bien. Ya puedes ver en el Canvas, porque tengo activado Live
Preview, puedo probar el botón. Esa fue tu primera
introducción al manejo de la interacción
del usuario
en una aplicación rápida de UI. De verdad se están
uniendo las piezas. Hagamos una recapitulación rápida. Aprendiste a
instanciar botones, y esa es solo una forma elegante de decir crear instancias de
botones. Tu aprendiste sobre
los cierres y cómo son solo bloques de código como funciones
sin nombre de función. Y luego aprendiste
sobre los cierres finales, que son sólo una taquigrafía. Y solo para recordarte, un cierre final es
cuando tienes un cierre como parámetro en una llamada a método. Y luego se saca
de esa lista de parámetros y en su lugar se pone al
final de esa llamada al método. En la siguiente lección, te
voy a mostrar un concepto clave de la interfaz de usuario de Swift
que te
va a permitir cambiar datos y que
la interfaz de usuario
detecte automáticamente el cambio y luego
actualice la interfaz de usuario por sí misma. Está bien, nos vemos
en la siguiente lección.
12. 11: propiedades de estado: Hola y bienvenidos. En la última lección,
aprendiste sobre el botón de interfaz rápida de usuario y cómo
manejar la interacción del usuario. Bueno, para cambiar los datos y luego reflejar
ese cambio en la interfaz de usuario, tenemos que aprender sobre las propiedades del
estado y eso se trata esta
lección. Vamos a sumergirnos justo en. Muy bien, así que quería volver
a visitar esa vista, actualizar diagrama del ciclo de vida
por solo un segundo. ¿ Recuerdas cuando mostramos un enlace desde los datos
hasta el código de vista? Bueno, sigamos adelante y hagamos eso con nuestro proyecto de juego de cartas de guerra. Entonces, ¿qué tipo de datos
tenemos en este proyecto? Bueno, si echan un vistazo a
la interfaz de usuario aquí, pueden
ver que necesitamos hacer un
seguimiento de qué carta tiene
el jugador, qué tarjeta tiene la CPU, y luego también las puntuaciones
del jugador y de la CPU. Entonces eso son cuatro piezas de datos. Vamos a crear cuatro propiedades en nuestra estructura de vista de contenido para representar esas cuatro
piezas de datos. Entonces justo debajo del
corchete rizado de apertura de la vista de contenido, voy a
seguir adelante y declarar var CPU L2
jugador primera carta igual. Y sólo imitaré los
autos que tenemos ahí. Entonces vamos a tener tarjeta también. Y en realidad me dejaré
solo, lo cambiaré. Podemos poner algo
más para iniciarlo. Y luego tarjeta CPU es igual, digamos tarjeta nueve. Y entonces representemos
el marcador de jugador. Y esto va
a ser un entero. Empecemos con 0 también. Puntuación de la CPU igual a 0. De acuerdo, entonces ahora tenemos estas cuatro propiedades que representan
el estado del juego. Estas cuatro propiedades
son nuestra fuente de verdad porque representa
cómo debe verse la interfaz de usuario. Ahora, ¿cómo reflejamos estas piezas de datos
en nuestra interfaz de usuario? Bueno, necesitamos hacer referencia a estas propiedades
dentro de nuestro código de vista. Recuerde que estas
propiedades que se declaran en el alcance
de esta estructura significa que está disponible para ser referenciada en cualquiera de los
métodos de la misma estructura, así
como en este bloque de código para nuestra propiedad corporal computada. Entonces si buscamos aquí abajo para esta primera carta
que está justo aquí, y hemos codificado duro una cuerda
ahí dentro, diciendo carta a. En lugar de codificar duro
una cadena allí, Vamos a poner un valor dinámico
especificando nuestra propiedad de la
tarjeta de jugador. Entonces actualicemos nuestra vista previa
automática y solo para asegurarnos de que eso funcione y todo esté bien. Y se puede ver que esa
carta cambia la carta cinco porque eso es lo que es el valor de la propiedad de la carta del jugador. Hagamos lo mismo para la tarjeta CPU en lugar de tarjeta de
codificación dura tres aquí, Vamos a poner la
propiedad de la tarjeta de CPU. Ves ese cambio. Y aquí abajo, para el marcador
en lugar de una cadena de 0, Vamos a poner nuestra propiedad de
marcador de jugador. Ahora vas a
notar un error aquí. Dice que no hay coincidencias exactas
en llamada al inicializador. Y eso es porque para
inicializar una instancia de texto, necesitamos pasar una
pieza de datos de cadena. Pero marcador de jugador, recuerda, Esta es una propiedad int, por lo que contiene datos int. Pero cómo podemos
evitar esto es que
podemos convertir nuestro int en una cuerda. Bueno, al menos la
representación de cadena de un número. Entonces la forma en que hacemos eso
es que podemos crear una nueva instancia de cadena
y simplemente pasar en el, podemos pasar en el entero. Por lo que este
sería marcador de jugador. Y vamos a hacer lo
mismo para la puntuación de CPU. Vamos a crear una nueva
cadena y vamos a pasar en la puntuación de la CPU. Y así, tenemos nuestras cuatro
piezas de datos siendo representadas en el
código de vista y a su vez, la UI. Ahora todo lo que tenemos que hacer es cuando el usuario
toca el botón, podemos actualizar estos datos en las propiedades y hacer que la UI
cambie automáticamente, ¿verdad? Bueno, no tan rápido. Por qué no seguimos adelante
y tratamos de hacer eso y echemos un
vistazo a lo que sucede. Entonces en la última lección, habíamos cambiado esta
imagen de acuerdo en un botón real. Ahora mismo ese
cierre de acción está vacío. Pongamos algún código dentro este cierre de acción
para nuestro botón. Aquí vamos a actualizar las tarjetas y también
vamos a actualizar la puntuación. Ahora si intentas actualizar
la propiedad como aquí, intentemos actualizar la
tarjeta del jugador es igual a la carta 11. Ya verás que no puedes. Xcode se quejará y dirá, no se puede asignar a la propiedad
yo es inmutable. Ahora auto se refiere a
la instancia de una vista de contenido e inmutable significa
que no se puede cambiar. Ves las instancias
son tipos de valor y debido a la forma en que se
asignan en la memoria,
no se pueden cambiar. Ahora, sé que eso no tiene
absolutamente sentido para ti en este momento, pero te prometo
en una lección futura, hablaremos de eso y entonces tendrá
todo
sentido por ahora, solo entender que no
podemos cambiar el valor de nuestra propiedad a menos que
utilicemos un envoltorio de propiedad. Un envoltorio de propiedad es
una palabra clave frente a
nuestra declaración de propiedad
que cambia su comportamiento. Ahora específicamente, estoy
hablando del envoltorio de
propiedad estatal. Entonces sigamos adelante de nuevo a nuestras declaraciones de propiedad
y veamos cómo usó este
envoltorio de propiedades estatales para cambiar los comportamientos de
estas propiedades para que podamos
cambiar los valores. Todo lo que tenemos que hacer es frente a
la palabra clave var de nuestra declaración
patrimonial, vamos a escribir en Estado. Y al agregar esa
palabra clave en estado, eso va a indicar que esa
propiedad de la tarjeta de jugador es en realidad una propiedad estatal
y nos va a permitir actualizar
el valor que contiene. Entonces sigamos adelante y pongamos este
envoltorio de propiedad frente los cuatro de nuestra propiedad para que todos sean propiedades de
estancia. Los inmuebles estatales tienen dos características
especiales. número uno es que se pueden
cambiar los datos en ellos. Ya hablamos de eso. Pero el número dos es que
dentro del código de vista, cualquier referencia a las propiedades
del estado, it, se
les notificará
de los cambios de datos y luego tu UI se actualizará automáticamente
en función de esos nuevos datos. Entonces sigamos
adelante, bajemos al cierre de acción de nuestro botón y tratemos de
actualizar algunas de estas propiedades
estatales. Y veamos cambiar la interfaz de usuario. De acuerdo, entonces aquí estamos. Y como puedes ver ahora se ha ido
el error. Y puedo poner
tarjeta CPU igual a tarjeta 12. Y sigamos adelante y
actualicemos el marcador también. Podría bien sólo a eso. Entonces voy a decir
marcador de jugador más igual a uno. Eso significa
incrementarlo en uno. Puntuación de la CPU más
igual a uno también. Y salvaremos esto. Entonces. Vamos a seguir adelante y hacer un adelanto en vivo, a
ver si podríamos hacer eso. Está bien, así que este
es un adelanto en vivo. Cuando toque este botón, se va a ejecutar
el cierre aquí. ¿ No fue genial? Entonces cuando toqué ese botón, actualizamos los datos en
las propiedades del estado. ¿ Verdad? Y debido a que en nuestro código de vista, hace referencia a esas propiedades
estatales, se les notificó y
se volvió a renderizar la UI para
mostrar los nuevos datos. Ahora el problema es que cada vez que tocamos
el botón, quiero decir, está incrementando la
puntuación,
lo cual es genial, pero las cartas de jugador
no están siendo aleatorizadas. Entonces lo que podemos hacer es usar el método aleatorio
del instructor, generar un número aleatorio. Y luego vamos a
anexar ese número aleatorio al reverso de
la cadena de la tarjeta
para generar una nueva tarjeta. Entonces echemos un vistazo a
cómo funcionaría eso. Generar un número aleatorio
entre dos y 13. Porque si nos fijamos
en la biblioteca de activos, tenemos tarjeta a todo el
camino a la tarjeta 14 en realidad. Por lo que probablemente quisiera
generar dos a 14. Entonces voy a decir Dejar jugador rand es igual al
int dot random. Y este método
nos permite especificar un rango. Se puede especificar un rango con
el extremo inferior del rango, punto, punto, punto y
luego el extremo superior. Y debe ser incluyente, si recuerdo correctamente. Y ya veremos en un segundo. Y declaremos otra. Rand de CPU es igual a int dot-dot-dot aleatorio en
dos, dot-dot-dot y 14. Y entonces lo que vamos
a hacer es en lugar de especificar el número dentro de
la cadena codificada, solo
voy a especificar tarjeta. Y luego voy a agregar
jugador Rand y agregar CPU rand. Ahora bien, tal vez no podamos
hacer esto y como
se esperaba, no podemos. Porque como saben de
antes en esta lección, lo que estamos tratando de hacer
aquí es que estamos tratando anexar un entero a una cadena. Y lo que tenemos que
hacer en su lugar es convertir ese entero en una
cadena primero y obtener la representación
de cadena de ese entero. Y ahí, esto debería
ser dinámico ahora. Entonces echemos un vistazo a esto y veamos si es lo que esperamos. Esto es perfecto. Se aleatorizan las tarjetas. Lo que no es perfecto es
el marcador aquí abajo. Todavía tenemos que
determinar qué bando gana y luego incrementar
el puntaje apropiado. Entonces voy a
comentar estas dos piezas de código porque no queremos
simplemente estar incrementándolo en una cada vez. Ahora antes de
terminar esta lección, realmente
quiero señalar y subrayar lo poderoso que es
este marco. Lo que estamos haciendo aquí
es tocar un botón. Se está ejecutando este
cierre y estamos cambiando el valor en
esta propiedad estatal. Y debido a que la
propiedad estatal está siendo referenciada dentro de
nuestro código de vista aquí, está detectando ese cambio de
datos y luego re-renderizar lo que
vemos en la UI. Y eso sucede automáticamente. Todo lo que estamos haciendo es
cambiar los datos. En el pasado con el kit de UI, este sistema no existía. Lo que tendríamos que hacer
en su lugar es actualizar los datos, igual que estamos haciendo aquí. Pero también tendríamos que actualizar cada elemento de vista manualmente
y decirle qué mostrar. Entonces lo que tendríamos que hacer es obtener una referencia a esta imagen y luego generar una imagen partir de este nombre
de activo desde la biblioteca de activos, para luego establecer ese
activo de imagen en este ImageView. Y tendríamos que hacer eso
para este también. Entonces tendríamos que hacerlo por
el texto aquí y las etiquetas. Entonces todo lo
que teníamos que hacer manualmente. Ahora, todo lo que tenemos que hacer es actualizar los datos
en cualquier pieza de UI atada a esas propiedades
del estado detectarán el cambio
y se actualizarán automáticamente. Ahora por definición, una propiedad
estatal es una pieza de datos de la que depende esta vista de
contenido. No es algo de lo que otros puntos de vista les
importaría o dependería. Y así por esa naturaleza, podemos agregar la
palabra clave privada y simplemente controlar el
nivel de acceso a estas piezas de datos para que solo
sean accesibles dentro del contexto o del alcance de esta estructura
de vista de contenido. Ya que es sólo
esta vista de contenido la que depende de estas propiedades
estatales. Muy bien, estamos casi
en la línea de meta. Solo tenemos que comparar los valores
de la tarjeta y luego actualizar las
propiedades del estado de puntuación apropiadamente. Eso sigue siendo una recapitulación rápida. Ahora, aprendes a hacer
referencia a propiedades
en tu código de vista. Aprendimos sobre el envoltorio de propiedades
estatales. También aprendimos sobre
alguna nueva terminología incluye valores codificados, valores
dinámicos, e inmutables, lo que
significa que no se
puede cambiar. En la siguiente lección,
vamos a repasar los condicionales y cómo comparar valores
usando sentencias if. Está bien, nos vemos ahí.
13. 12: si las declaraciones: Hola y bienvenidos. En esta lección
vamos a hablar un constructo rápido que te
va a permitir escribir código que diga si esto, entonces aquello, ahora esto
es fácil de usar, pero la poderosa sintaxis te
va a permitir expresa lógica a un nivel
completamente nuevo. De acuerdo, con eso dicho, vamos a sumergirnos enseguida. Está bien, así que tengo un parque infantil
totalmente nuevo aquí. Quiero mostrarles cómo funcionan
las declaraciones antes aplicarlo a nuestro proyecto de juego de
cartas de guerra. Todo lo que tengo aquí son un
par de constantes, en realidad, más de una pareja, tengo un montón de constantes
con diferentes valores simples, algunos enteros, cadenas,
y valores booleanos. Y quiero usar
estas constantes demostrar
cómo funcionan las declaraciones
IF. Ahora de nuevo, la sentencia if es muy poderosa porque
permite ejecutar código
basado en algunas condiciones. Entonces voy a usar estas
constantes como mis condiciones. Primero echemos un vistazo a una declaración básica de IF,
declaración. Primero lo
voy a escribir y luego te
explicaré cada una de las partes. Entonces comienzas con la palabra clave
if y luego pones algún tipo de valor o condición que evalúa
a un resultado booleano. Entonces solo voy a poner ie. Y voy a abrir
un par de corchetes rizados. Y dentro de aquí, solo
imprimiré Hola Mundo, ¿verdad? Y eso por sí mismo es la declaración if
más simple. Como puede ver,
comienza con la
palabra clave if y luego seguido un
valor booleano o algún tipo de instrucción de código que se evalúa como
un resultado booleano, seguido de un conjunto
de corchetes rizados. Y dentro de los corchetes
rizados
pones el código que quieres ejecutar. Si la condición es verdadera, en este caso, e es falsa, ¿no? Entonces no va
a ejecutar ese código porque no
evalúa a verdadero. No obstante, si cambio esta E
y estaba probando F en su lugar, entonces este código se ejecutaría
porque se evalúa como verdadero. Ahora se puede poner bastante
loco porque
puedes encadenar estas cosas juntas. Entonces una de las formas en que puedes
encadenarlos juntos es usar end, y eso es un doble ampersand. Entonces permítanme sólo
indicar eso ahí. Y cómo funciona esto
es si escribieras f double ampersand, Digamos g. Entonces, ahora estás probando ambas condiciones y
porque estás usando end, ambas condiciones tienen que ser ciertas para
este código a ejecutar. Entonces en este caso, porque
f y g son a la vez verdaderas,
verdaderas y verdaderas significa verdaderas. ¿De acuerdo? Y otro ejemplo
es que puedes usar o. Por lo que estos son tubos dobles. La llave de pipas,
muchos principiantes, no
están seguros de
cómo presionarla. En mi teclado Mac, esta tecla está justo debajo de
la tecla Eliminar y justo encima de la tecla de retorno, y es
el personaje de la tecla de barra inversa. Entonces tengo que mantener pulsado el turno y tengo que golpear la contrasta
para conseguir esa pipa. Por lo que tubos dobles, podría ser
diferente en tu teclado. Esto es O cuando usas un OR en lugar de un final y te estás encadenando a
condiciones como esa. Estás diciendo que si
cualquiera de las condiciones uno es verdadera o la condición
dos es verdadera, entonces ejecuta este código. Entonces, por ejemplo, f
y g son las dos verdaderas. Entonces eso definitivamente
ejecutará este código. Si hago f y e, Eso es a es falso. Recuerda, este código
seguirá ejecutándose porque al menos una de
las condiciones es verdadera. Ahora de nuevo, esto puede
volverse bastante loco porque
puedo seguir cambiando, puedo seguir haciendo ors, o incluso puedo echar
un final ahí dentro. Entonces hagámoslo. Pero este tipo de cosas
se vuelve confuso ahora porque esto se puede leer de
un par de maneras diferentes. ¿ Son E y G? Y luego, ¿o F? ¿ O es F o E y G?
Estos ven lo que estoy diciendo. Entonces, para, si pongo
corchetes alrededor de estos, esto podría tener más sentido. Si hago esto. Eso es decir si f es
verdad o E y G son verdaderas, entonces ejecuta el código. No obstante, también podría ponerle
corchetes a su alrededor así. Si F o E es verdadero y G es verdadero, entonces ejecute el código. Por lo que puedes usar corchetes, corchetes
redondeados para ayudarte a
diferenciar qué
condiciones debes evaluar primero. De acuerdo, hasta ahora hemos estado
usando sólo los valores booleanos, pero aún hay más. Quiero mostrarte con la
sintaxis para una declaración if antes de pasar a
mirar enteros y cadenas. Entonces junto con la declaración if, también
puedes extender esa declaración if para
probar otra condición, porque esto es solo probar
una condición, ¿verdad? Entonces puedes seguir el corchete rizado
de cierre del primer
bloque de código, ¿verdad? De lo contrario si, y luego
escribes otra condición. Entonces digamos else-if. E, entonces pon eso más, si G, entonces haz eso. Entonces lo que va a pasar aquí es que va a
probar este padecimiento. Si esto se evalúa como falso, entonces va a probar el siguiente y
va a bajar en cascada. Si esto es falso, entonces va a
bajar al siguiente. En cualquier momento mientras está
revisando estas condiciones. Si uno de ellos es cierto, entonces va a
entrar en esa rama. Se va a ejecutar ese bloque de código y se va
a saltar el resto. Por lo que esto permite
probar, en este caso, tres ramas o
caminos diferentes y sólo elegir uno, siendo
el primero cierto. Pero teniendo en cuenta
que comprueba estas ramas desde
estas condiciones, quiero decir, de arriba a abajo. Entonces el primero que
golpea eso es cierto. Esa es la rama que
va a bajar. Y por último, también hay otra característica
de las declaraciones if. Puede haber una especie
de catch all branch. Si ninguna de esas
condiciones anteriores es cierta, entonces puedes tener
un bloque de código else. Por lo que este bloque de código
se ejecuta al final mismo. Si ninguna de las
condiciones fuera cierta y no ejecutó ninguna
de esas ramas. Entonces esto es algo así como tu
captura todos son a prueba de fallas. Y de nuevo, todos estos
son opcionales. Se puede tener un elsif, no se
puede tener más ifs. No se puede tener ninguna otra y
sólo se puede tener otra. Entonces si esta condición no es cierta, entonces sólo va
a bajar aquí. De acuerdo, entonces esta afirmación si
es realmente poderosa. La sintaxis es realmente
simple de entender, pero te da tanta
flexibilidad en qué sentencias de
código se ejecutarán dependiendo de lo que esté
sucediendo dentro de tu aplicación. De acuerdo, así que voy a deshacer esto que podamos ver algo así como una
declaración si de pleno derecho aquí. Y les voy a mostrar
cómo tal vez los enteros o cadenas pueden ser evaluados
como condiciones. Ahora en el ejemplo hasta ahora, acabo de hacer referencia a valores
booleanos,
y eso es simple. Pero al trabajar con
otros tipos de datos como enteros y cadenas, es posible que tenga que usar esos en una declaración real
para evaluar para obtener un resultado
booleano, ¿verdad? Por ejemplo, en lugar de g, que es solo un
valor booleano verdadero, usemos a. Para evaluar
un resultado booleano, tengo que usar un
operador de comparación, ¿no? Entonces puedo usar mayor que si
a es mayor que 0, ¿verdad? Esto puede evaluar
a verdadero o falso. Y aparte de mayores que, aquí hay un par
más que puedes usar. Tan mayor que, menor que, mayor que o igual a, y tienes
menor que o igual a. Y luego hay igualdad. Con igualdad, no usas un solo signo igual porque
eso es para asignación. Como puedes ver aquí arriba, estamos asignando estos
valores en constantes. Para comparar la calidad, se utiliza
un signo doble igual en su lugar. Entonces puedo decir aquí abajo, hace un igual a 0, y por supuesto que no. Por lo que esta afirmación aquí se
va a evaluar a falso. Y debido a que se trata de
un operador final, ambas condiciones
tienen que ser ciertas. Y porque éste ya
es falso, entonces no va a
entrar a esta rama. De todos modos. Nosotros también podemos cambiar estos. Entonces si b es
menor a tres o cuatro, quiero decir, y si c es igual a 10. Entonces esos son algunos ejemplos de operadores de comparación que
evalúan a verdadero o falso. Ahora para las cuerdas, también
puedes hacer eso. Se puede, se puede evaluar d, por ejemplo, es una cadena y
se puede probar si es igual a hola. Entonces eso es una cosa que
puedes hacer con las cuerdas. Todavía se puede utilizar
mayor que o igual a. Por ejemplo, si hubiéramos
dejado h igual a mundo. Y podemos decir si D
es mayor que h. Entonces podemos hacer eso. En este caso, se va
a comparar la H con la W. Y como h
no es mayor que w, porque viene antes de W, entonces esto va a ser falso. Una
cosa más interesante que quiero mostrarles es el uso del signo de
exclamación. Entonces este, básicamente
voltea el valor booleano. Entonces si g era, G es verdad, ¿verdad? Si pongo el signo de
exclamación delante de
él, básicamente va a
voltear el valor booleano. Entonces g es cierto. Tengo el signo de exclamación. Se va a convertir
en falso. Entonces no se va a ejecutar esto. Podrías ponerlo frente
a esto, por ejemplo. Y una docena, no equivale a 0 porque
a es uno, como
se puede ver allá arriba. Pero tener esto delante va a
voltear eso a verdad. Y entonces ahora que lo pienso, también se puede poner a prueba la desigualdad. Entonces no es igual. De acuerdo, entonces puedo probar si a no es igual a
0, lo cual es cierto. Pero entonces porque tengo este signo de
exclamación delante de él, va a voltearlo a falso. Entonces mucha flexibilidad aquí, y esto es sólo
un ejemplo, ¿verdad? Entonces no tiene que
ser así de complicado. Ahora quiero volver
a nuestro juego de cartas de guerra y usar la
declaración if para determinar
qué carta es más grande y luego incrementar ya sea la puntuación del jugador o la
puntuación de la CPU. Está bien, así que aquí tengo
el proyecto de juego de cartas de guerra. Y si echan un
vistazo a esta parte aquí donde estábamos
actualizando la puntuación, simplemente
estamos
incrementando la CPU y puntuación del
jugador con cada uno
un trato del botón. Ahora que has aprendido sobre si las declaraciones en el patio de juegos de
Xcode, estoy seguro que es muy
trivial para que lo implementes para que estés comparando jugador corrió
versus CPU RAM y viendo
qué número es mayor para determinar qué puntaje actualizar. Ahora, porque
etiquetamos
correctamente nuestros activos a ser los más bajos
y ACE siendo los más altos, teniendo un valor de 14. Es muy trivial comparar. Simplemente comparas ese número
final, ¿verdad? Y esencialmente ese
es el número aleatorio. Entonces si crees que puedes hacer esto, pausa el video ahora mismo, y pruébalo por ti mismo. Aprenderás mucho. Te lo prometo, aunque le des una oportunidad
y no lo consigues, la lección se va a
pegar mucho más. Así que adelante y pausa el video, pruébalo, y luego
desparen y mírame hacerlo aquí. Muy bien, Así que bienvenido de nuevo. Vamos a implementar esta declaración
if para ver qué tarjeta es más grande. Entonces
voy a empezar con si. Y voy a probar primero si el número del jugador es
mayor que el número de CPUs. Está bien, voy
a usar mayor que, si ese es el caso, entonces voy a
incrementar la puntuación de jugador. De lo contrario, sólo voy
a aumentar la puntuación de la CPU. Ahora. No me importan los lazos, y por eso no estoy comparando la igualdad entre los
dos números aleatorios. Pero definitivamente podrías hacer eso en tu versión
si así lo deseas. En realidad, hay un problema con la forma en que lo
estoy haciendo aquí. El CPU tiene una ventaja injusta porque en el caso de un empate, la CPU sí consigue la puntuación correcta usando
esta declaración else. Entonces, por lo tanto, como
que sí tengo que probar el otro caso. Entonces voy a probar else-si la CPU rand es
mayor que el jugador alrededor, entonces puntuación de CPU más uno. De lo contrario, si esas dos
condiciones no son ciertas, entonces es empate y
no quiero hacer nada. Está bien, ahora
probemos esto. Entonces voy a volver a tocar la vista previa
en vivo, y sólo lo haremos aquí
mismo en el Canvas. Voy a pegarle trato. Por lo que el 14 definitivamente es
más grande que cinco. Por lo que el jugador obtiene un marcador. Jack es definitivamente,
bueno, eso es un, eso es un 11 es mayor que 3, cuatro es mayor que tres. Por lo que parece estar
funcionando correctamente. Enhorabuena, el juego
de cartas de guerra está completo. Has aprendido a
construir interfaces de usuario, a codificar en Swift, y has completado
tu primera aplicación. Piensa en el primer día de
este reto de 14 días. ¿ Cómo te sentiste entonces? ¿ Estabas nervioso de que
crees que podrías hacer todo esto? Y ahora mira lo
lejos que has llegado. ¿ Cómo te sientes ahora con el desarrollo de
aplicaciones? Ahora he intentado que esto sea lo más fácil
posible de
entender y espero que sean capaces de adquirir algunas nuevas habilidades. Ahora sé que estoy haciendo que
esto suene como el final, pero en realidad es solo el
comienzo de tu viaje. En la siguiente lección, les
diré cuáles son los próximos pasos y a
dónde ir desde aquí.
14. 13: desafío extras: Hola y bienvenidos a la Lección 13. Ahora, en esta lección, va a ser más un reto
práctico y práctico. Quiero que intentes construir
esta app por tu cuenta. Ahora, tienes todas las habilidades que necesitas en base a las lecciones del uno al 12. Y este ejercicio va a ser una gran manera de reforzar
lo que has aprendido y también de identificar cualquier vacío en tus conocimientos en este
punto para que podamos ir a revisarlo y también
ir y descifrar qué es lo que
necesitas para ponerte
al día antes de continuar. De acuerdo, Así que déjame
caminar por esta app. Tienes título, tienes número de créditos, tienes algunas imágenes. Y cuando pulsas este botón, simplemente aleatoriza las imágenes. Si no coinciden, entonces
vas a perder créditos. Pero sin embargo, si consigues
tres coincidentes, lo cual parece que no puedo hacer en
este momento. Ah, ahí vamos. Entonces ganarías créditos. Entonces esto se
parece mucho al juego de cartas de guerra, excepto que ahora hay tres cosas que se
aleatorizan en lugar de dos. Y los activos de imagen están en
la descripción en un enlace. Para que puedas
asegurarte de agarrar esos. Entonces tendrás
todo lo que necesites. Ya sea que pienses que esto es demasiado fácil o si es demasiado
duro, de cualquier manera, te
recomiendo encarecidamente que
lo pruebes porque realmente es
la mejor manera de aprender, aunque te atasques. Cuando miras la solución
y averiguas cómo superar ese obstáculo en el
que estás atascado. Va a ser extra
significativo y realmente
va a ayudar a
comprometerlo a la memoria. Y esta creencia sobre
el aprendizaje práctico se debe a mi propio fracaso al principio cuando
intenté aprender iOS. Entonces esto no es sólo algo que leí
o algo que escuché. Esto es de mi propia
experiencia personal que es, no
hay nada más que pueda reemplazar como la
mejor manera de aprender.
15. 14: ¿qué hay después?: Ya lo has conseguido. ¿ A dónde vas desde aquí? ¿ Qué aprendes a continuación? Bueno, todavía hay un
montón de habilidades que dominar antes de que finalmente puedas construir
cualquier tipo de aplicación que quieras. Pero espero que al menos en hacer el juego de cartas de guerra y
completar este reto, te haya ayudado a romper algunas barreras mentales sobre si puedes o no hacer esto. Porque ahora debes
saber que puedes hacer esto. Y es sólo cuestión de tiempo. Más aprendizajes, más
obstáculos superados, y más práctica antes de que
finalmente alcances tu meta, voy a compartir contigo
las próximas cinco cosas que puedes hacer para progresar
en tu viaje de app. Número uno o más vistas y contenedores a través de hacer
el juego de cartas de guerra, ya
te
enteraste de un puñado de ellos, como texto,
botones de imagen, pilas, pero hay muchas más VM y contenedores de los que puedes
aprender como toggles, pickers, estado, formas de barras, cuadrículas, listas, y la
lista simplemente continúa. Ahora aprender a usar
más vistas y contenedores es como conseguir un camión
cargado de piezas lego. Tus opciones se van
a expandir mucho. Número dos, más tipos de apps. ¿ Por qué? Bueno, piénsalo. Nada nuevo
viene de cero. Siempre te estás basando en
tus experiencias anteriores, lo que has visto, en lo que has
hecho, en lo que has intentado. Entonces si quieres
construir tu propia app, lo mejor que puedes hacer en este punto de tu
viaje es
exponerte a tantos
tipos diferentes de apps como sea posible. Con cada nueva aplicación, vas a aprender
nuevas arquitecturas, nuevos patrones y nuevas
formas de hacer las cosas. Por ejemplo, ¿cómo se navega de una
pantalla a otra? ¿ Cómo se descargan
datos de Internet? ¿ Cómo se guardan
los datos en una base de datos? ¿ Y cómo permite que los usuarios
creen cuentas e inicien sesión? Estos son todo tipo de
apps diferentes a las que debes estar expuesto antes de poder incorporar estos mismos
elementos a tu app. Número tres, más,
Xcode y veloz. Ahora en este reto,
hemos tocado ligeramente los conceptos básicos de
Swift y cómo
navegar por el siguiente código, pero definitivamente hay
más profundidad en ambos. Azure Apps se vuelven más complejas
en tus proyectos,
hazte más grande, vas a encontrar más problemas y
más dólares por resolver. Y vas a
necesitar un dominio más profundo lenguaje
de
programación Swift. Entonces, ¿cómo se aprende
más rápido y Xcode? Bueno, se remonta a
construir más aplicaciones. A medida que construyes cada aplicación, naturalmente
vas a aprender más rápidas y técnicas de Xcode. Número 4, MVVM. Ahora éste es bastante
importante en Swift UI. Este es el
patrón de arquitectura principal y es sinónimo de Model-View-ViewModel en el juego de cartas de
guerra que hiciste. Teníamos la parte de vista y teníamos algunas
propiedades de datos en ella. Pero en una aplicación de interfaz de usuario de Swift más grande, tendrías modelos
que también representen tus datos, y ver modelos que
soporten tus vistas. Este patrón de arquitectura existe en cualquier aplicación Swift UI más grande. Por lo que es bastante
importante saber, hacer algunas búsquedas en Google o
YouTube en MVVM para entenderlo
a nivel conceptual. Y luego la próxima vez que
hagas un tutorial de UI rápido, o intenta detectar el patrón tú mismo o si estás
construyendo tu propio Swift do I apps definitivamente trato poner el patrón
en práctica. Número cinco, más marcos
de Apple. Apple tiene una tonelada de frameworks
en los que puedes aprovechar con tu app. Simplemente agrega el framework
a tu proyecto Xcode, lee la documentación
y estarás agregando nuevas capacidades a tu aplicación
como machine learning, reality
aumentada, etc. Ahora esto va a llevar
un poco más de experiencia porque hay que leer y
entender la documentación. Pero es una buena habilidad comenzar a entrenar porque
cada año
van a haber nuevas herramientas y nuevas plataformas y nuevos
marcos para que aprendáis. Como desarrollador de aplicaciones, el aprendizaje nunca se detiene y tu capacidad para aprender rápidamente y para
probar cosas realmente
determinará tu éxito
a largo plazo. Esas son las cinco áreas que te
recomiendo que
exploraste hacer avances
en tu viaje de app. Yo quiero agradecerles tanto por quedarse a través de este reto
y por aprender conmigo. Espero que hayas tenido una experiencia
impresionante. Y si lo has tenido, por favor compártelo con tus
amigos y familiares. Por favor ayúdame a correr
la voz y cuéntale a todos sobre el
código con Chris. Te agradezco
mucho y gracias por dejarme ser parte
de tu viaje de app. Está bien, nos vemos
en la siguiente lección.
Chris Ching, Co-Founder of CodeWithChris.com
