Desarrollo de iOS: para principiantes

1. Introducción - ¡Hola!: Hola. Mi nombre se mide mucho. Tengo 18 años y llevo haciendo APS más de tres años. Estoy súper emocionado de estar presentándote al maravilloso mundo del desarrollo up. Al final de esta clase, habrás hecho una impresionante aplicación de juego de cartas de guerra que podrás instalar en tu propio teléfono y presumir ante tus amigos y familiares. Esta clase está destinada a ser para principiantes. Entonces, no te sientas intimidado si nunca has escrito ningún código. Porque te garantizo que al final de esta clase estarás escribiendo tu propio código en el lenguaje de programación rápida. En el camino, vamos a aprender muchas cosas realmente geniales. Apenas algunas de las cosas que vamos a aprender Nuestro cómo crear una interfaz de usuario personalizada usando imágenes personalizadas tenía un layout out nuestra aplicación usando auto layout para que se vea muy bien en todos los dispositivos. También vamos a aprender los fundamentos del lenguaje de programación rápida que incluyen cosas como variables,tipos de datos, tipos de datos, si sentencias interpolación de cadenas, mecanización y generación de números aleatorios. Y luego vamos a aprender a conectar nuestra interfaz de usuario a nuestro código y cómo responder a la interacción del usuario. Entonces si estás listo para empezar a hacer tu propia app que puedas compartir con el mundo, empecemos. 2. Qué es una aplicación: antes de saltar y empezar a hacer nuestra app. Creo que es una muy buena idea repasar lo que es una app. Cada app está conformada por tres componentes principales. El 1er 1 es la pantalla o interfaz de usuario. Esto incluye cosas como botones, interruptores, imágenes, barras de búsqueda y realmente cualquier cosa que el usuario vea como desarrolladores de aplicaciones. Lo primero que hacemos es crear la interfaz de usuario de nuestra app. Entonces si piensas en el caso de Snapchat, esto incluye el chat, pero en el botón de la cámara, el botón de descubrir y todas las celdas con nuestros amigos así como una barra de búsqueda en la parte superior. Esta es la interfaz de usuario de Snapchat. La segunda parte de nuestra app es el código que puedes pensar en el código como instrucciones que le damos a la app. Entonces, por ejemplo, si tenemos un botón de reproducción en nuestra aplicación, necesitamos escribir código para decirle al acto qué hacer cuando el usuario hace clic en el botón de reproducción. Entonces tal vez queremos iniciar un video cuando el usuario haga clic en el botón. Una aplicación sería realmente aburrida y no funcional si no fuera por el código, solo sería una pantalla estática que no hacía absolutamente nada. Entonces en el caso de Snapchat, cuando un usuario hace clic en uno de sus amigos, el código los lleva a la página siguiente, donde pueden ver todos sus mensajes de texto y chatear con sus amigos. Por último, la tercera parte de nuestra app son los datos. Entonces en el caso de Snapchat, esto incluye a todos tus amigos, tu snap score y cualquier mensaje de texto anterior que hayas tenido con cualquiera. Entonces cuando haces clic en uno de tus amigos, no sólo el código te mueve a la siguiente pantalla, sino que también entra en una base de datos y recupera todos los datos necesarios y los envía de vuelta a la interfaz de usuario para que lo veas. 3. Qué es Xcode: nuestra app haciendo viaje comienza con código X. Excluir es un software libre fabricado por Apple. Y aquí es donde vamos a crear la interfaz de usuario para arriba y escribir nuestro código. El frío que estaremos aprendiendo a escribir es en un lenguaje de programación veloz. Si nunca has escrito una línea de código, no te preocupes, porque al final de esta clase aprenderás a hacerlo. Hay algunas cosas que debes saber antes de instalar X coat. En primer lugar, el código X sólo se puede instalar en un Mac. Entonces si tienes una computadora con Windows, hay formas de evadirlo, como instalar una máquina virtual. Pero no voy a cubrir los de esta clase. A continuación, quieres asegurarte de que estás en Mac OS Catalina o superior para comprobar en qué versión de Mac OS tienes. Quieres subirte al logo de manzana aquí arriba y dar click sobre este Mac. Ahora, bajo la pestaña de resumen, puedes ver la versión de Mac OS en la que estás. Entonces, ¿quieres estar en Mac OS Catalina o superior? Lo último que debes saber es que el código X es una aplicación bastante grande Así que vas a necesitar unos 10 gigabytes de espacio libre en tu computadora para poder instalarlo. Para comprobar cuánto espacio libre tienes en tu Mac. Quieres subir a la manzana hace igual que lo hicimos antes y dar click sobre esto, Mac. Y ahora quieres ir a la pestaña de almacenamiento y aquí mismo vas a ver cuánto gigabytes de historia disponible tienes. Por lo que tengo 13. ¿ Quieres asegurarte de tener al menos 10 con el fin de instalar código X? De acuerdo, Si estás listo para instalar el código X, sólo tienes que seguir adelante. Entonces lo primero que queremos hacer es que queremos abrir la tienda Mac App para que puedas subir aquí y la búsqueda de focos, o puedes hacer clic en comando en Barra Espacial en tu teclado, y ahora vamos a buscar la tienda APP, y una vez que tengas abierta la tienda Mac App, quieres subir aquí y buscar código X, y aquí está, y el tuyo probablemente va a decir instalar aquí. Por lo que solo tienes que hacer click en eso y esto podría tardar en cualquier lugar entre 20 minutos y una hora dependiendo de tu conexión a Internet. Por lo que quieres asegurarte de que tienes una fuerte conexión a Internet cuando estás instalando código X. Si encuentras algún problema, quieres asegurarte de que comprobaste todas las cosas de las que hablamos anteriormente. 4. Inicio de nuestro proyecto: Ahora que tienes el código X instalado, puedes seguir adelante y abrirlo desde aquí. Serás saludado por esta pantalla de bienvenida, y puedes ver que tenemos tres opciones para elegir. Pero queremos dar click en crear un nuevo proyecto de Código X. Si no ves esta pantalla de bienvenida, puedes subir a archivo nuevo y luego dar clic en Project, y esto estará haciendo exactamente lo mismo. Ahora llegamos a elegir para qué plataforma queremos desarrollar. Por lo que tenemos IOS nos miren, TV, nosotros y esposas de MCA. Pero ahora nos vamos a desarrollar para Iowa. Desde aquí tenemos un montón de plantillas diferentes que podemos elegir, como un detalle maestro arriba o un tabulado. Pero vamos a empezar con una aplicación de una sola vista, y lo bueno de una sola vista hacia arriba es que en realidad se puede llegar a cualquiera de estas plantillas usando esto. Y normalmente cuando sí quiero crear algo así como un punto tabulador por ejemplo, comenzaría con una sola vista arriba ya que permite la mayor personalización. Ahora podemos ir y dar click siguiente. Ahora tenemos que ingresar algunos detalles sobre su app, empezando por el nombre del producto. Entonces voy a seguir adelante y escribir juego de cartas de guerra aquí y ahora tenemos al equipo. Por lo que los años van a decir ninguno por defecto. Y si lo hace, está bien. En realidad puedes simplemente dejarlo como ninguno. Cuando llegue el momento de presentar tu hasta lo absoluto, vas a tener que crear un equipo. A continuación, tenemos el nombre de la organización. Entonces si tienes una organización, puedes teclear eso aquí. De lo contrario, solo puedes escribir tu nombre y tu apellido Abajo aquí tenemos el paquete identificar aire, y este es un I. D. Eso es único para cada aplicación. Por lo que ningún Tuapse en la tienda APP puede tener el mismo paquete identificar. Y así la idea del paquete está conformada por el nombre del producto así como por la organización. Identificar. Entonces, para conseguir un paquete único, yo d. Puedes entrar y escribir tu nombre, tu apellido aquí dentro, y eso debería funcionar a continuación. Tenemos el lenguaje y quieres asegurarte de que esto sea un C tan veloz y no objetivo aquí abajo, tenemos la interfaz de usuario y también quieres asegurarte de que esto sea un guión gráfico y no Swifty. ¿ Por qué? En realidad creo que es tan veloz. Usted es por defecto. Por lo que quieres asegurarte de que cambies esto y aquí abajo, quieres asegurarte de que dejes sin marcar las tres casillas de verificación, y luego podemos seguir adelante y dar click siguiente. Y ahora tienes que guardar tu aplicación para que puedas elegir dónde quieres guardarla. Yo sólo voy a salvar el mío en mi escritorio. Y desde aquí, solo puedes hacer click en crear y eso es todo. Creamos nuestro nuevo proyecto de exclusión. No te intimides si el código X te parece realmente confuso porque voy a repasar todo lo que necesitas saber sobre el código X En la siguiente lección. 5. Tour de Xcode: en esta lección. Te voy a llevar de gira alrededor del código X, y te voy a estar mostrando todas las diferentes partes asociadas al código X. Entonces empecemos con el lado izquierdo por aquí. A esto se le llama el área de navegación, y se puede ver que aquí tenemos diferentes pestañas, pero la más importante de lejos es el encargado del proyecto. Esta primera vez por aquí, eso parece un pequeño archivo. Aquí es donde podemos ver todos los archivos asociados a su aplicación. Y voy a estar hablando un poco de cada archivo aquí. Entonces vamos a empezar con un controlador de vista punto Swift. Este es el archivo donde vamos a escribir todo el código con para nuestra aplicación. Por lo que se puede ver que cuando hice clic en este archivo, esta sección media realmente cambió. A esta sección media se le llama el editor, y aquí es donde va a suceder la mayoría de nuestro trabajo. Aquí es donde se lleva a cabo toda la magia. Siguiente después del controlador de vista que rápido. Tenemos algo llamado el storyboard de punto principal y se puede ver cuando hice clic en él, el área del editor también cambió. Y ahora tenemos un pequeño iPhone 10 aquí en esto es donde realmente podemos diseñar y crear la interfaz de usuario para la aplicación. Ahora, después del storyboard de punto principal, tenemos la carpeta de activos. Aquí es donde podemos almacenar cualquier activo relacionado con nuestra aplicación, como cualquier imagen o música. Y puedes ver aquí tenemos el ícono de la APP, y aquí es donde realmente podemos almacenar el ícono para la aplicación. A continuación, tenemos el storyboard de punto de la pantalla de lanzamiento, y esto es muy similar al storyboard de puntos principal. Pero la única diferencia es que esta es una pantalla que se muestra cuando abrimos por primera vez nuestra aplicación. Entonces si piensas en alguna app, generalmente tienen el logotipo de la empresa mostrado en cuanto abres la aplicación. Y esta es tu usualmente donde puedes diseñar eso. Y por último, tenemos la lista info dot p, y esto solo muestra más información relacionada con nuestra aplicación. Ahora, quiero hablar un poco de este dolor de utilidad aquí a la derecha. Entonces si tienes tu proyecto abierto, puedes ir y seguir conmigo. Voy a seguir adelante y abrir el storyboard de puntos principales aquí para traer a nuestro constructor de interfaces . Y voy a dar click en este pequeño botón más en la parte superior, ¿ verdad? A esto se le llama Biblioteca de Objetos, y voy a entrar en mucho más detalle sobre esto más adelante. Pero por ahora, podemos seguir adelante y arrastrar una etiqueta a nuestra pantalla. Ahora puedes ver las utilidades que el dolor aquí cambia, y lo que es esta sección es que nos muestra más detalles sobre cualquier cosa que actualmente hayamos seleccionado. Para que veas que tenemos la etiqueta seleccionada. Entonces nos va a mostrar mucha información sobre nuestra etiqueta para que puedas ver aquí arriba tenemos el texto de la etiqueta, así que voy a seguir adelante y teclear hola, mundo y click enter y puedes ver la etiqueta realmente cambia para decir, hola, mundo. También tenemos algunas cosas más tradicionales como el color, y podemos ir y ponerlo a leer, por ejemplo, o rosa. Y también tenemos la fuente para que pueda ir y aumenté el fondo. Remolca lo que quieras, y podemos salir y centrarnos en la pantalla para que veas que tenemos un montón de información relativa a nuestra etiqueta. También tenemos mucho más top y todos estos muestran un tipo diferente de información sobre la etiqueta. Pero la pestaña más común es el toque de propiedades aquí, que muestra el tipo de propiedades más básico sobre el material de etiqueta que verías en algo como Microsoft Word. Al igual que la alineación de la fuente, número de líneas, el color resalta las sombras. Y esto se aplica a todo, no sólo a las etiquetas. Por lo que puedes ver si hago click en la pantalla real aquí , nos muestra información de nuestra pantalla. Ahora, quiero que cambies tu atención a la parte superior de la pantalla. A esto se le llama barra de herramientas Código X, y si le echas un vistazo a la izquierda, tenemos el botón de correr y el botón de parada. Esto nos permite ejecutar nuestra aplicación en un dispositivo. Y si echan un vistazo a la derecha aquí, podemos si eligen a qué dispositivo queremos ejecutar nuestra app. Para que veas que tengo mi iPhone personal conectado para poder ejecutar nuestra aplicación en mi dispositivo personal. Ahora, no vas a poder hacer esto ahora mismo, pero vamos a entrar en cómo puedes hacerlo más adelante, pero a partir de ahora, puedes elegir entre cualquiera de estos simuladores para ejecutar la aplicación. Entonces voy a seguir adelante y elegir el iPhone 11. Pero puedes elegir el simulador que quieras. Y ahora podemos seguir adelante y hacer clic en el botón de correr y ahí está nuestro simulador y ahí está nuestra aplicación dice Hola Mundo. Entonces si lo sigues a lo largo, acabas de construir tu primera aplicación. Felicitaciones continuando con la barra de herramientas en la parte superior. Si echamos un vistazo al medio, esta es la barra de estado X Code, y esto nos muestra el estado de lo que está pasando en este momento para que puedas ver el estado actual está terminado de ejecutar juego de cartas de guerra en el iPhone 11 y al lado derecho. Ahora tenemos este primer botón llamado Object Library, y ya lo mencioné antes, pero lo que es es es que nos permite elegir entre todos estos diferentes componentes tú I que podemos usar en nuestro guión gráfico para que veas que tenemos cosas como etiquetas, botones, controles de segmento, campos de texto, interruptores deslizantes, vistas de progreso y un montón más de cosas que podemos usar en nuestro controlador de vista. Ahora, no voy a hablar de este botón por ahora, pero aquí a la derecha, en realidad podemos escondernos y mostrar diferentes partes del código X. Por lo que este botón nos permite ocultar y mostrar el panel de navegación. Este botón nos permite escondernos y mostrar el dolor de utilidades. Y por último, este botón nos permite escondernos. Mostrar el área de depuración, que es la última parte del código X de la que aún no hemos hablado para el área de depuración es donde vamos a ver cualquier error asociado a nuestro código. Aquí también podemos imprimir cosas al cónsul dentro de nuestro código. 6. Autolayout: antes de saltar y empezar a diseñar la interfaz de usuario para nuestro juego de cartas de guerra. Quiero hablarles de un concepto muy importante llamado auto layout. Entonces aquí tengo un nuevo proyecto abierto, y voy a diseñar la interfaz de usuario para una pantalla de inicio de sesión para una aplicación imaginaria . Ahora, para esta parte, solo puedes prestar atención. No tienes que hacer esto por tu cuenta, así que voy a empezar agarrando una etiqueta, y la voy a colocar en la pantalla, y voy a cambiar el nombre de esta etiqueta para decir nombre de usuario, y voy a seguir adelante y agarrar un texto y un campo de texto es un componente tú I que permite a los usuarios escribir en él. Entonces cuando le hagas click, el teclado aparece y voy a seguir adelante y agarrar otra etiqueta. Este puede decir contraseña y vamos a centrarlo y otro campo de texto. Y este es el campo de texto de contraseña. Y por último, podemos seguir adelante y agarrar un botón, y este va a ser el botón de inicio de sesión. Esto es en lo que va a hacer clic el usuario. Una vez terminaron de escribir el nombre de usuario y la contraseña. Está bien, así está la pantalla de inicio de sesión para la aplicación, y se puede ver en el iPhone 10. No se ve tan mal, pero sigamos adelante y lo cambiemos a un iPad, por ejemplo. puedes ver ahora esto se ve realmente raro, así que sigamos adelante y hablemos de por qué está sucediendo esto. El motivo por el que esto está sucediendo es porque cuando colocamos un elemento you en la pantalla, realidad estamos definiendo una posición X e Y fija fuera de ese elemento. Entonces cuando colocamos una etiqueta en la pantalla, estamos diciendo que queremos que esta etiqueta sea, por ejemplo, 200 píxeles de la parte superior de la pantalla y 100 píxeles del lado izquierdo de la pantalla. Ahora bien, esto puede verse bien en el dispositivo en el que lo estamos diseñando, pero cuando cambiamos a un tamaño de pantalla diferente, nuestra posición fija X e Y permanece igual, por lo que en realidad termina luciendo realmente funky. Auto layout es un sistema donde, en lugar de especificar posiciones X e Y duras de ustedes elementos, podemos especificar un conjunto de reglas que dictan dónde los elementos son relativos a la pantalla. o relativo a otros elementos tú. Entonces, por ejemplo, si tuviéramos dos botones que queremos colocar en la pantalla, podríamos decir que el Botón uno está centrado horizontalmente con respecto al grito también, un centrado, verticalmente relativo a la pantalla. Y entonces podríamos decir que el botón a también está centrado horizontalmente en relación con la pantalla. Y están 20 píxeles por debajo, pero en uno, así que puedes ver que al hacer esto no especificamos ninguna posición X e Y dura para nada . En cambio, acabamos de especificar un conjunto de reglas, y a través de este conjunto de reglas ¿eres tú? De hecho me quedaré bien en cualquier dispositivo. Ahora estas reglas que especificamos para tu para ti, I elementos se llaman restricciones y restricciones son una parte enorme del desarrollo de IOS. 7. Construir la UI parte 1: Ahora que entendemos la teoría detrás del diseño automático, podemos llegar a diseñar la interfaz de usuario para nuestro juego de cartas de guerra. En primer lugar, necesitarás Donald los activos para nuestro juego. Incluí un punto carpeta Zip debajo de los proyectos y el recurso es tab para esta clase. Por lo que si estás viendo esta clase en algún lugar que no sea tu computadora, necesitarás abrir cosas de habilidad en tu computadora para descargar los activos. Una vez que tengas tu carpeta de activos descargada, puedes seguir adelante y descomprimirla ahora, en tu ex podría proyectar. Se quiere hacer clic en los activos que xsi Assets carpeta y bebió todo en la carpeta que acabas de descargar en los activos que superan los activos. Ahora podemos volver al storyboard de puntos principales. Si ya lo has hecho así puedes seguir adelante y eliminar la etiqueta hola mundo. El primero que queremos hacer es agregar un fondo a nuestra app para que podamos subir aquí a la biblioteca de objetos y debilitar la búsqueda de una vista de imagen. Una vista de imagen es au elemento que nos permite una imagen súbita dentro de ella. Entonces si venimos aquí a la derecha. Estos son los atributos dolor, y tenemos unos atributos llamados imagen. Por lo que si hace clic en este pequeño botón desplegable, podemos elegir entre cualquiera de las imágenes de nuestra carpeta Activos. Apple también nos da un montón de imágenes por defecto, pero lo que queremos es la imagen de fondo para que podamos ir y hacer doble clic en eso. Ahora puedes ver nuestra vista de imagen sigue siendo realmente pequeña, por lo que necesitamos agregar algunas restricciones para que estire toda la pantalla. Entonces aquí abajo en la parte inferior, derecha, confinamos los botones de restricción, y solo hay dos botones con los que vamos a estar trabajando en este proyecto. El 1er 1 es el alineamiento, pero en esto se ve como dos pequeños rectángulos uno encima del otro. Este nos permite alinear horizontalmente nuestra imagen en el contenedor o alinear verticalmente la imagen en el contenedor. El 2do 1 es el botón de restricciones. Este tiene, como un pequeño cuadrado en el medio, con dos líneas en el borde, y esto nos permite sumar restricciones o reglas, como antes mencioné del dedo del pie los cuatro lados de nuestra imagen. Muy bien, lo primero que queremos hacer es desmarcar este botón que dice, Restringido a márgenes. Entonces si piensas en Microsoft Word, por ej., los márgenes son un borde delgado alrededor del papel. Y en el caso de X Code, esto es exactamente lo mismo. Por lo que los márgenes son solo un borde alrededor de la pantalla, y son útiles para evitar que cosas importantes, como campos de texto o etiquetas toquen justo en el borde de la pantalla. Pero para el caso del fondo, en realidad sí queremos que vaya todo el camino de borde a borde, por lo que no queremos limitarlo dentro de los márgenes. Lo siguiente que queremos hacer es subir aquí a la parte superior y hacer click en esta flecha desplegable hacia abajo , y ahora llegamos a elegir a qué queremos constreñir la parte superior de esta imagen en relación para que podamos limitarla relativa a la vista o relativa a el área segura. Entonces si piensas en la vista, esta es toda la pantalla de borde a borde. Donde tiene el área segura está en Lee, las partes de la pantalla que están completamente despejadas. Entonces si piensas en el iPhone 10 o superior. Por ejemplos, el área segura no incluye el área justo encima de la muesca. Por lo que esta zona aquí mismo no forma parte de la zona segura. Tampoco es esta zona aquí abajo donde existe este deslizador de botón de inicio antes de la imagen. Queremos limitarlo relativo a la vista y no al área segura. Ahora puedes ver aquí esta alineación se ilumina en rojo, y esto significa que tenemos habilitada la restricción superior. Y ahora quieres cambiar este valor de 1 92 a 0. Eso significa que queremos que esta imagen sea cero píxeles en relación con la parte superior de la pantalla, que es una vista. A continuación, queremos hacer lo mismo para los cuatro sitios. Entonces vamos a dar click en vista y luego establecer este 20 Y es importante que primero selecciones la vista y luego cambies este número 20 No quieres hacerlo al revés. Y ahora, una vez que tengamos los cuatro lados habilitados, podemos hacer click en agregar cuatro restricciones y puedes ver nuestra imagen ahora cubre toda la pantalla . Quiero señalar que si hace clic en el botón de restricciones. De nuevo, notarás que ninguna de las restricciones está iluminada en rojo, por lo que podrías pensar que ninguna de ellas está habilitada, lo cual es raro, porque acabamos de agregar todo pulgar. Si bien este menú de restricciones es puramente para agregar nuevas restricciones, pero no nos muestra qué restricciones ya tenemos. Entonces para ver qué restricciones ya tenemos en un elemento U, puedes hacer click en él y subir aquí a este pequeño botón de regla en esto se llama el tamaño Inspector. Y aquí mismo tenemos ah, tab llamado restricciones y podrás ver todas las restricciones que hemos habilitado en ¿Eres elemento? Entonces tenemos todas las restricciones horizontales y las restricciones verticales ahora dicen que estropeaste una de las restricciones. Bueno, ¿a qué se dedica? Entonces digamos que estropeé esta restricción superior. Puedo dar click en él y luego hacer clic en el botón eliminar. Y ahora esa restricción se ha ido para que pueda volver aquí y sólo Riyadh ella y arreglar cualquier error que cometí anteriormente. Y se puede ver que la restricción está de vuelta. Abre aquí mismo. Es posible que hayas notado que si estás usando un dispositivo que no sea el iPhone 11 diga el iPhone ocho más, por ej., el fondo no se ve del todo bien. Entonces la forma en que podemos arreglar esto es llegando a los atributos, dolor y bajando al modo contenido y cambiándolo de ajuste de aspecto a aspecto Phil, y ahora se ve mucho mejor. 8. Construir la UI parte 2: en esta lección. Vamos a terminar de construir la interfaz de usuario para nuestro juego de cartas de guerra. Por lo que vamos a empezar colocando el logotipo en la pantalla para que podamos llegar a la biblioteca de objetos y buscar vista de imagen. Ahora, por aquí en la sección de atributos, podemos cambiar la imagen a la imagen del logotipo. Y ahora en realidad tenemos que sumar algunas restricciones. Entonces el 1er 1 es queremos alinear horizontalmente la imagen en el contenedor, y ahora se puede ver que el código X se está quejando. Entonces si haces click en esta pequeña flecha roja por aquí, podemos decir que dice necesidad de restricciones para por qué posición? Por lo que agregamos una restricción para la exposición, pero aún nos falta una para la posición Y. Ahora, una vez que agregue un solo limitado a un elemento U código X quiere que complete todas las restricciones para que sepa exactamente dónde posicionar este elemento de precisión. Entonces en este momento no sabe posicionarlo sobre el por qué acceder. Entonces tenemos que decirle qué hacer. Podemos bajar aquí al botón de restricciones, y vamos a seguir adelante y hacer clic en área segura y vamos a poner esto en 60 y ahora puede agregar una restricción. Y ahora ex code es feliz porque sabe exactamente dónde colocar esta imagen. Ahora, lo siguiente que queremos hacer es agregar las imágenes de la tarjeta a la pantalla. Entonces vamos a subir aquí y vamos a buscar una vista horizontal de pila. Ahora digamos, tenemos múltiples ustedes elementos que queremos apilar uno encima del otro o al lado del otro . Podríamos agregar restricciones, dedo todos esos elementos individualmente, o una solución mucho más fácil sería usar una vista de stock. Entonces, ¿qué es una vista de pila? Una vista de pila es una forma de apilar múltiples elementos juntos. Y entonces podemos tratar toda la vista de stock de un solo elemento. Y ahora mismo se puede ver que la vista de pila es invisible, por lo que en realidad es un poco difícil verlo moverse. Pero si echan un vistazo a la izquierda aquí, en realidad podemos ver todos los elementos que conforman nuestra pantalla. Y si alguna vez has usado photoshop, puedes pensar en esto como todas las capas que conforman nuestra pantalla. Las capas todo el camino en la parte superior son la parte posterior más artículos, por lo que se puede ver que el área segura está todo el camino en la parte posterior. Y luego viene nuestro fondo y luego nuestro logo y luego nuestra vista de pila, Lo que sea en la parte inferior es el frente. La mayoría de los elementos en la pantalla. Ahora, lo siguiente que queremos hacer es que realmente queremos llenar nuestra vista de stock horizontal con imágenes para que podamos llegar a la biblioteca de objetos y buscar una imagen. Y ahora podríamos colocarlo en la vista de stock, o una alternativa es subir aquí y podemos colocarlo justo debajo de la vista de stock de esta manera. Por lo que puedes ver eso cuando lo pongo justo debajo de él. Esta línea azul, en realidad en densa sobre esto nos está mostrando que estamos colocando la imagen en la vista de stock. Si esta línea azul está en la misma posición que una pila para ti, eso significa que en realidad la estamos colocando justo debajo de la pila. Tú y no dentro de la pila a ti. Entonces quieres asegurarte de que esta línea azul esté sangrada hacia adentro Y ahora tenemos una sola imagen en la vista de pila y podemos subir aquí a los atributos de imagen y cambiarla cualquiera de estas tarjetas. Entonces no importa qué tarjeta sea por ahora, así que seguiré adelante y seleccionaré tarjeta 10. Y ahora queremos subir y queremos obtener otra imagen, y queremos sangrar de nuevo dentro de la vista de pila. Y de nuevo, vamos a seguir adelante y elegir una tarjeta aleatoria. Ahora, si hacemos click en la vista de acciones por aquí, se puede ver el stock. Tiene un montón de atributos que podemos cambiar, y uno de ellos es el espaciado. Entonces este es el espacio entre todos los elementos dentro de la pila para ti. Y ahora mismo las cartas están justo al lado de la otra, y eso no se ve muy bien. Entonces podemos ir en una justicia, espaciando, espaciando, Diga a algo así como 30 y se puede ver que las cartas se ven mucho mejor ahora. Ahora tenemos que agregar restricciones a la vista de pila. Entonces si hacemos clic en él y bajamos aquí, quiero alinearlo horizontalmente en el contenedor y verticalmente en el contenedor. y podemos sumar a restricciones y ahí están nuestras imágenes ahora. Lo siguiente que queremos hacer es agregar un botón a la pantalla para que podamos subir aquí y buscar botón y podemos seguir adelante y colocar aquí abajo. Y si llegamos al inspector de atributos, tenemos un atributo de imagen y podemos seguir adelante y ponerlo en el botón de trato. Y ahora puedes ver nuestro botón es el botón de trato. Pero también tenemos este botón gravado justo al lado. Entonces si subimos aquí, en realidad podemos seguir adelante y borrar este texto para no decir nada. Ahora tenemos que añadir en realidad algunas restricciones arrancó la mantequilla. Entonces vamos a empezar alineando horizontalmente en el contenedor, y ahora tenemos que añadir algunas restricciones verticales. Entonces si llegamos a las impares nuevas restricciones, podemos dar click en este menú desplegable y se puede ver que ya lo tiene seleccionado a la vista de pila , y eso es lo que queremos. Queremos una restricción lo relativa a la vista de pila, y 50 puntos parece a la derecha para que podamos seguir adelante y hacer clic en Añadir una restricción. Ahora todo lo que nos queda por hacer es agregar las etiquetas de texto en la parte inferior de la pantalla que muestran cómo Maney apunta tanto el jugador como la CPU tienen, que podamos subir a la biblioteca de objetos y buscar una vista de stock. Y esta vez vamos a usar una vista de pila vertical, y podemos seguir adelante y jugar comenzó justo aquí y dentro de la vista de stock queremos colocar a etiquetas para que podamos venir aquí y sangrar en la vista de stock, y esta etiqueta es va a decir Jugador. Y ahora la segunda etiqueta que queremos agregar esto va a mantener el número de puntos, el sombrero de jugador para que podamos llegar al texto de la etiqueta y podamos cambiar eso a cero. Y ahí está nuestro stock. Pocos con el texto del jugador y el marcador justo debajo de él. Ahora podemos seguir adelante y dar click en la vista de acciones, y tenemos que sumar algunas restricciones. Entonces, vamos a hacer click en el botón de restricciones, y la primera restricción que queremos hacer es para el lado izquierdo. Por lo que es importante que haga clic en este menú desplegable y seleccione área segura y queremos limitarla 20 pixeles parece que está bien. Y ahora para el fondo, vamos a hacer clic en esto, y también vamos a asegurarnos de que esté seleccionado a área segura y vamos a poner eso 20 píxeles. Y ahora podemos seguir adelante y dar click en agregar a Restricciones. Ahora, voy a dar clic en este texto de jugador, y quiero cambiar el color a un color blanco, y eso es todo el camino en la parte inferior de aquí. También quiero cambiar el tamaño de fuente a 25 y voy a hacer lo mismo por esta etiqueta. Y ahora lo último que hay que hacer es hacer clic en el stock pocos y cambiar la alineación al centro. Y eso permite que esta la etiqueta inferior esté centrada justo en el medio. Y ahora queremos hacer exactamente lo mismo, pero para la CPU. Entonces vamos a seguir adelante y buscar una vista de pila, y queremos seguir adelante y colocarla justo debajo de este pentagrama, tú y tú quieres asegurarte de que no esté sangrada en palabras. Eso significaría que estamos colocando esta pila, Pocos dentro de la otra pila pocos. En cambio, queríamos estar en el mismo nivel. Así que así. Y ahora vamos a subir y buscar una etiqueta en su lugar que dentro de la vista de pila. Y ahora vamos a buscar otra etiqueta y colocarla dentro de la pila para ti. Y esta primera etiqueta va a decir CPU en la segunda etiqueta, yo iba a decir cero No, podemos entrar y tomar la vista de stock y podemos dar click en el botón de restricciones y se puede ver eso por defecto. Es restricción relativa a este botón de aquí, pero queremos cambiar eso a la zona segura. Y del lado derecho, ya está configurado para zona segura. Por lo que quieres poner esto en 20 y queremos ponerlo en 20 y podemos dar click en agregar a restricciones. Y ahora queremos dar click en este texto de la CPU, y queremos cambiar el color toe blanco y la fuente a 25. Y me acabo de dar cuenta de que hice un tipografía aquí, así que voy a seguir adelante y eliminar esta contralga y voy a cambiar el color toe blanco y la fuente de texto a 25. Y finalmente voy a dar click en la vista de acciones y dar click en centro. Otra cosa que quiero mencionar es que en realidad se puede cambiar el nombre de estos ustedes elementos. Entonces si hago clic en esta vista de acciones y luego vuelvo a hacer clic en ella solo una vez, voy a seguir adelante y renombrarlo stock de jugador, y voy a dar clic en el stock de la CPU y hacer clic en él una vez, y seguiré adelante y quedaré Renombrarlo para ver si te apilas, y esto solo nos permite estar un poco más organizados. 9. Swift Parte 1: variables: en esta lección, vamos a aprender los fundamentos del lenguaje de programación rápida. Si alguna vez has programado antes, entonces esta lección te será súper fácil. Pero si no lo has hecho, no te preocupes, porque vamos a empezar desde el principio absoluto. Y ojalá, al final de esta clase comprenderás los fundamentos de la programación rápida. Además, te recomiendo encarecidamente que en realidad codifices junto conmigo en tu propia computadora y teclees lo que realmente estoy escribiendo. Y no tienes que memorizar ninguno del código que escribimos. El mejor modo de aprender a programar es simplemente seguir practicando y aplicando las cosas que aprendimos . Pero memorizar no es necesario en absoluto. Entonces quiero que sigas adelante y abras código X y vamos a dar click en empezar con un patio de recreo. Alternativamente, se puede subir al archivo. Se puede conseguir el archivo nuevo y patio de recreo, y un patio de juegos es una luz. Un patio de recreo es un archivo ligero y veloz que nos permite jugar con algún código sin empezar realmente un proyecto completo . Entonces es exactamente lo que suena. Un patio de juegos. Asegúrate de tener un dedo del pie fijo. Iowa y en blanco y luego puedes seguir adelante y dar click siguiente. Y ahora puedes guardarlo donde quieras. Simplemente lo voy a guardar en mi escritorio. Esta de aquí es la zona donde vamos a escribir todo nuestro código, y esto se llama el dolor de vista previa por aquí. Pero no nos vamos a preocupar demasiado por esto. En cambio, vamos a subir aquí y hacer clic en este dedo del pie del botón medio Abre nuestro cónsul y la consola es donde vamos a dar salida al código. Entonces, empecemos por hablar de esta primera línea aquí arriba. Te importo niño, voy a explicar brevemente esto, Pero si no lo entiendes, no te preocupes, porque no es importante del pie lo que vamos a aprender hoy. Entonces, como programadores, no necesitamos construir todo desde cero. En cambio, queremos usar tanto código preexistente que otros hayan escrito tanto como sea posible. Por lo que yo niño es una biblioteca de código que Apple ha escrito. Y al importar u i kid, estamos diciendo que queremos tener acceso al código que Apple ha escrito en nuestro programa . Si eso no tiene mucho sentido, tienes razón. ahora, no te preocupes por esto en absoluto. Ahora, antes de que explique esta línea de código aquí mismo, quiero hablarles de comentarios. Entonces voy a seguir adelante y hacer algo de espacio aquí un na minha tipo dos barras delanteras. Y este es mi pequeño comentario. Ahora bien, se puede pensar en esto como una pequeña nota que nos escribimos a nosotros mismos o a otras personas para explicar el código que estaban escribiendo. Y así los comentarios son cruciales si estás trabajando en equipo porque necesitas explicarle a otras personas qué es lo que realmente hace tu escritura. Y así este es un comentario de una sola línea, y todo lo que venga después de estas dos barras inclinadas hacia adelante es completamente ignorado por el código Ex. Ahora bien, ¿y si queremos escribir un comentario que tome múltiples líneas? Bueno, podemos teclear una slash hacia adelante y luego podemos poner un asterisco. Y ahora solo tenemos que hacer clic en entrar, y se puede ver Swift realmente nos da esta área donde podemos escribir un comentario de múltiples líneas y todo dentro de este Ford slash un asterisco en esta slash hacia adelante un asterisco en realidad no se va a ejecutar. Por lo que nada de esto será tratado como código en su lugar, esto es sólo una pequeña nota que podemos escribirnos. Ahora hablemos de esta línea de código aquí mismo. Var s TR es igual a Hola patio de recreo Cuando estamos programando, hay una gran cantidad de datos que necesitamos para hacer un seguimiento. Entonces una variable es solo una forma de hacer un seguimiento de una sola pieza de datos y aquí mismo estaban creando o declarando una variable. Entonces la primera parte de esta variable es var, y simplemente es decirle a swift que estamos haciendo una variable. Siguiente es str on Este es el nombre real fuera de esa variable y finalmente ponemos un signo igual y luego ponemos la pieza de datos que queremos almacenar en nuestra variable. En este caso, es str no este es un proceso de realmente hacer o declarar una variable. Pero una vez que realmente hayamos creado la variable, podemos cambiar los datos que sostiene simplemente como este s t r es igual a hello skill share y se puede ver que estoy usando la misma variable. Pero ahora le estoy poniendo una pieza de datos diferente y noto que no usé la palabra clave var hasta ahora solo se usa cuando creamos por primera vez la variable. Pero aquí en realidad no estoy creando la variable. En cambio, solo estoy cambiando los datos que contiene la variable. Por lo que aquí sostiene Hola, patio de juegos. Y ahora se mantiene la misma variable exacta. Hola, Habilidad. Comparte aquí y vamos a escribir print y vamos a poner el nombre de nuestra variable entre dos corchetes. Suficiente. Seguimos adelante y ejecutamos nuestro código. Por lo que con sólo llevar nuestras bocas al lado izquierdo al llevarla a la última línea y hacer clic en este botón de correr, se puede ver al Cónsul Príncipe. Hola, área de juegos. Ahora puede que te estés preguntando, ¿Por qué dice hola? juegos y no hola cuota de habilidad. Bueno, eso es porque en este punto en el tiempo, donde estamos imprimiendo son variables la variable todavía dice Hola, patio de recreo. Es en Lee Online ocho que en realidad cambiamos la variable para decir hola cuota de habilidad. Entonces si seguimos adelante y escribimos print y el nombre de nuestra variable otra vez y traemos nuestro ratón aquí abajo y hacemos clic en correr, puedes ver ahora dice hola scale share. Entonces ahora ojalá estés empezando a entender cómo se comportan las variables Ahora hay otro tipo de variable que se llama constante y se crea una constante con la palabra clave let en lugar de la palabra clave var. Por lo que ahora podemos escribir el nombre de nuestra constante. Entonces deja que mi color de pelo sea igual a negro y esto está declarando una constante muy similar a una variable. Pero la única diferencia es que una constante nunca cambia. Entonces puedes ver aquí con str pudimos reasignar el valor de str simplemente poniendo el nombre y luego poniendo un signo igual y poniendo un nuevo valor. Pero si seguimos adelante y decimos que mi color de pelo es igual a verde y ahora tratamos de ejecutarlo, puede ver X Code nos va a dar un error y el error dice que no se puede asignar a valorar mi color de pelo es una constante let. Entonces diciendo al poner la palabra clave, digamos que este valor nunca puede cambiar. Ahora, ¿por qué querríamos hacer esto? Utilizamos constante cuando sabemos que los datos dentro de la constante nunca, nunca cambiarán . Y al poner let garantizamos que en cualquier momento que tratemos de utilizar esta variable, los datos dentro de ella serán los mismos, lo que tipo de garantías que esta variable nunca cambiará por accidente ni cambiará en ningún lugar de nuestro código. Por lo que deberías. On Lee es una constante cuando sabes que los datos que guarda nunca cambiarán. Al igual que mi color de pelo probablemente no va a cambiar a menos que haga dieta pero más seguro algo como edad. Probablemente quieras usar un lejano y no dejar porque la edad es un tipo de datos que probablemente cambiará a la hora de nombrar tus variables. Hay algunas reglas que hay que seguir. En primer lugar, su variable no puede comenzar con un número. En cambio, la primera letra de la variable haas para ser una letra. Y después de la letra, puedes poner tantos números dentro del nombre de la variable como quieras el próximo año. Variable solo puede estar compuesta de letras y números y subrayado nada más, incluidos los espacios, por lo que no puede tener espacios en sus nombres de variables. Por último, la última regla es que las letras mayúsculas son distintas de las minúsculas, por lo que esta variable no es la misma que esta variable. Estas son variables completamente separadas, por lo que hay que tener cuidado con eso. Existen dos convenciones principales de nomenclatura que la gente usa a la hora de nombrar sus variables. El 1er 1 se llama Camel Case, y ahí es cuando se pone en mayúscula la primera letra de cada palabra excepto la primera palabra . La segunda convención de nomenclatura se llama Snake Case, y ahí es cuando se agrega un guión bajo después de cada palabra, y todas las letras de la variable son minúsculas. Por lo que no importa cuál de estas utilices. Puedes elegir lo que quieras, siempre y cuando te mantengas consistente con él. 10. Swift Parte 2: tipos de datos: De acuerdo, ahora, voy a seguir adelante y borrar estas dos líneas de código, y también voy a hacer borrar esta línea de código. El programa Dolor no se estrella. Y también voy a comentar las declaraciones impresas para que nuestro cónsul no se inunde con diferentes declaraciones impresas. Ahora bien, puede que hayas notado que el tipo de datos Onley que hemos estado almacenando en nuestra variable ha sido texto, y este texto en realidad se llama cadena. Entonces eso te podría parecer extraño al principio. Pero la razón por la que se llama cadena es porque es una cadena de caracteres y notarás que todas las cadenas tienen que estar entre comillas. Ahora, en realidad hay un montón de tipos de datos diferentes que debilitan la tienda en nuestras variables. Pero hay cuatro principales de los que vamos a hablar hoy. Y ya cubrimos una de esas, que es la cuerda. El siguiente es el interject. Entonces esto incluye todos los números enteros, incluyendo todos los números enteros negativos y cero para que podamos seguir adelante y hacer una variable llamada mi edad y pondremos esto en 10. No te preocupes, en realidad no tengo 10 años, así que lo genial de los enteros, a diferencia de las cadenas, es que en realidad podemos hacer operaciones sobre ellos. Entonces podemos decir que mi edad es igual a mi edad más una. Y lo que esto está haciendo es que está fijando mi edad para ser mi edad, que es de 10 más uno. Entonces ahora mi edad va a ser 11 después de esto. Entonces si sigo adelante e imprimo mi edad y ejecuto nuestro código, se pueden ver 11 aparecen en la consola. No obstante, si trato de hacer esto con una cuerda, digamos, creo una variable llamada mi oveja y voy a poner eso en 10 como una cuerda, así que te darás cuenta. Pongo comillas alrededor del número 10 y ahora trato de decir, mi oveja es igual a mi oveja más una y trato de imprimir mi oveja y corro nuestro código. puede ver que nos da un error en. El motivo es que en realidad no podemos agregar números al texto, por lo que X Code no está tratando esto como un número. En cambio, lo está tratando como texto, y así no puedes agregar un número a una palabra, por ejemplo, así que en realidad hay una diferencia entre 10 como entero y 10 como un stream y voy a seguir adelante y eliminar todo esto. El siguiente tipo de datos se llama Double y esto es todos los números decimales. Para que pueda hacer de una variable mi doble esperanza. Olvidé la palabra clave lejana y puedo establecer esto en 0.865 y este ahora es un tipo de datos doble y puedo seguir adelante e imprimir mi doble y ahí está nuestro doble. Por último, el último tipo de datos es el lingote y un booleano es o verdadero o falso Así que puedo guardar nuestro es verde y puedo poner eso en verdadero. Y ahora si imprimo es verde, puedes verlo imprime verdadero Y también puedo cambiar de verde a falso y un booleano puede Onley ser verdadero o falso? Ahora si salgo en impresión, puede ver es verde es falso Ahora lo siguiente de lo que quiero hablar es que no se puede hacer que una variable tenga dos tipos de datos diferentes. Entonces, ¿qué quiero decir con esto? Entonces creamos una variable llamada mi edad aquí y lo dijimos a 10 y 10 es un entero Eso significa que mi edad siempre puede en Lee ser un interject. Entonces si tratamos de reasignar mi edad a una cadena, por ejemplo realmente vamos a obtener un mensaje de aire y dice que no se puede asignar valor de tipo string a type end. Pero si sigo adelante y lo hago 563 ya que 563 es un entero, puedes ver que en realidad no vamos a llorar. Entonces si trato de establecer es verde, que es de tipo Boolean a un número o un entero, también vamos a obtener un mensaje de error por lo que no se puede asignar valor de tipo entero a tipo Boolean. Ahora, puede que te estés preguntando, en qué momento especificamos que es verde es un Booleano Bueno, cuando creamos primero es verde lo asignamos a verdadero y verdadero es un booleano Así que indirectamente especificamos que es verde va a ser un Booleano y nunca puedes ser otra cosa que un booleano 11. Swift Parte 3: si las declaraciones: en esta lección, vamos a aprender todo sobre sus declaraciones. Entonces voy a seguir adelante y crear un nuevo archivo de patio infantil y voy a dar clic siguiente y guardarlo en mi escritorio. Voy a empezar borrando esta línea de código, y también voy a seguir adelante y abrir la consola. Ahora voy a crear una variable llamada número de Fish. Voy a poner eso en 10. Ahora, lo que puedo hacer es escribir una declaración if usando la palabra clave if y luego puedo poner una condición aquí. Entonces la condición que voy a poner es si número de peces es mayor a 10 y ahora puedo abrir un soporte rizado y puedo poner otro soporte rizado cerrado para abrir este pequeño espacio aquí. Ahora, puedo escribir cualquier código que quiera dentro de este dentro de estos dos corchetes, así que voy a empezar escribiendo print. Eso es mucho pescado. Ahora, lo que va a pasar es que vamos a pasar por nuestro código y vamos a revisar esta primera condición así que va a comprobar si el número de peces es mayor a 10. Y si lo es, va a ejecutar todo el código dentro de estos dos corchetes. Pero si no lo es, va a saltarse por completo esta afirmación if. Entonces si sigo adelante y corro aquí, puede ver nada realmente se imprime a nuestro cónsul a menos que porque el número de peces no es mayor a 10 en realidad se establece en 10. Pero si voy adelante y lo pongo a 11 y ahora corro nuestro código, se puede ver que es mucho pescado se imprime al cónsul Ahora. Otra cosa que puedo hacer es agregar más condiciones para que en realidad pueda escribir otra cosa. Si el número de peces es mayor a cinco y aquí puedo imprimir. Esa es una cantidad decente de pescado. Y ahora, si pongo número de peces a seis, se va a saltear la primera condición porque seis no es mayor a 10. No obstante, va a pasar a la siguiente condición, y ésta va a pasar. Entonces si sigo adelante y corro nuestro código, se puede ver que es una cantidad decente de pescado se imprime. Ahora Ver, hago esta variable 50 y 50 es mayor que 10 y es mayor que cinco Así que vamos a ver qué pasa. Entonces eso es mucho pescado que se imprime. El motivo de esto es que se inicia comprobando la primera condición, y esta condición es verdadera, lo que ejecutará el código dentro de los corchetes en. Entonces terminará la sentencia if, por lo que solo una condición dentro de la sentencia S puede ejecutarse alguna vez. Ahora, otra cosa que puedes agregar a tu declaración no es más bloque. Y entonces lo que esto hace es si ninguna de las condiciones especificadas es cierta. Corre lo que sea que esté dentro del bloque else. Por lo que aquí podemos imprimir. Eso no es mucho pescado. Y ahora si pongo esto a la primera condición es falsa, la segunda condición es falsa, y así va al bloque else. Entonces si lo ejecuto, se puede ver que no es mucho pez se imprime dedo del pie nuestro consejo. Ahora en realidad puedes agregar mucho más declaraciones si, por lo que puedes agregar tantas otras declaraciones como quieras. Para que yo pueda hacer otra cosa. Si número de peces es igual a cuatro y aquí puedo imprimir tenemos cuatro peces, y si le digo esto a cuatro. Se puede ver que tenemos cuatro peces se imprimen, por lo que la primera condición es falsa. El segundo estado es falso, y yo sólo voy a seguir interesado. Está más claro, pero la tercera condición en realidad es cierta. Ahora, tal vez se estén preguntando, ¿por qué usé para igualar signos aquí y no uno? Bueno, un signo igual en realidad es decir que queremos que el número de peces sea igual a cuatro. Pero aquí no estamos diciendo que queramos número de peces igual a cuatro. En cambio, queremos comprobar si el número de peces es igual a cuatro. Y por eso solíamos igualar signos. Entonces un signo igual es establecer realmente el valor, y para igualar los signos de disparo es comprobar el valor ahora algunas otras cosas con las que se puede hacer. Si las declaraciones lo es, puede agregar mayor que o igual a, o podría hacer menos que o igual a. Y por último, en realidad se puede hacer igual a poniendo un signo de exclamación y luego es igual. Entonces veamos qué va a pasar ahora. Entonces, ¿el número de peces es mayor o igual a 10? No, no lo es. Es el número de peces menor o igual a cinco. Sí, lo es. Entonces si salimos y lo ejecutamos, se puede ver que es una cantidad decente de pescado realmente se va a correr. Y eso es todo lo que tienes que saber. Si las declaraciones por ahora. Ahora, tengo un pequeño reto para ti. Quiero que abras un nuevo proyecto de patio infantil y variable creativa llamada Animal, y puedes empezar por ponerle esto fuera al perro o lo que quieras. Y ahora quiero que escribas un comunicado s los cheques si el animal es o un perro, un gato o una vaca, y si es un perro, quiero que le imprimas corteza al cónsul. Si es un gato, puedes imprimirme, y si es una vaca, puedes imprimir, moverte. 12. Conexión UI al código: ahora estoy de vuelta en nuestro archivo de juego de cartas de guerra, y en este momento estoy en el archivo de storyboard de puntos principales. Entonces en esta lección, realidad iban a estar conectando nuestros elementos tú I a nuestro código para que realmente podamos manipularlo con nuestro código. Entonces lo que vamos a hacer es dentro de nuestro storyboard de puntos principales. Vamos a subir a estas líneas aquí en la parte superior, ¿ verdad? Y vamos a dar click en asistente en esto va a sacar a nuestro asistente de editor. Por lo que este archivo de código en realidad pertenece a este controlador de vista o a esta pantalla. Entonces voy a empezar por hacer algo de espacio bajo este controlador de vista de clase. Tú veo controlador, y vamos a empezar conectando nuestras tarjetas a nuestro código. Entonces la forma en que puedes hacer esto es que puedes o bien abrir este panel por aquí desde la izquierda haciendo clic en este botón, y puedes usar esta pila por aquí para navegar fácilmente por el diferente elemento tú I . O en su lugar puedes simplemente hacer clic en ellos desde el propio controlador de vista. Entonces voy a empezar con esta tarjeta de la izquierda. Quieres mantener pulsado el botón de control de tu teclado y arrastrar la tarjeta hacia dentro tu abrigo. Por lo que sólo voy a colocarlo bajo este controlador de vista de clase Colon nuevo I view controller. Y una vez que sueltes, puedes ver que te va a pedir que nombre la variable. Entonces voy a llamar a esta tarjeta de capa, y ahora voy a dar clic en Conectar. Y ahora tenemos una variable cuatro nuestra tarjeta. Y ahora voy a arrastrar la tarjeta derecha por encima sosteniendo el control y arrastrándolo justo debajo de ella. Y voy a llamar a esta tarjeta de CPU y voy a dar clic en entrar. Ahora, lo siguiente que queremos conectar es nuestro texto puntual real. Y así necesitamos conectar este código de tour para que realmente podamos aumentar el número de puntos para cada jugador a través de nuestro código. Entonces voy a empezar. En realidad, voy a abrir este panel por aquí porque es un poco difícil arrastrarlo desde el controlador de vista y alguien para empezar con cero justo aquí debajo de la pila de jugadores. Voy a controlar arrastrarlo y voy a llamar a este texto de puntos de capa, y voy a hacer clic en Entrar y finalmente, vamos a tomar el texto de puntos de CPU, y lo voy a llamar texto de puntos de CPU. Y ahora tenemos todas nuestras variables. Tenemos la variable de la tarjeta de jugador la variable de la tarjeta de la CPU el jugador puntos de la variable de texto en la CPU, puntos de impuesto a pagar. Pero solo hay una última cosa que tenemos que conectarnos a nuestro código, y ese es en realidad el botón de trato. Entonces no queremos que esto sea una variable porque no queremos realmente cambiar nada sobre el botón de trato. En cambio, queremos conectarlo como una función. Entonces voy a seguir adelante y hacer algo de espacio aquí abajo bajo el bloque de código Funk anular, y voy a controlar arrastrar el botón de trato justo aquí abajo. Y ahora quiero hacer que necesites cambiarte este tipo a ti, yo Pero eso y también vamos a seguir adelante y quedarnos renombrarlo para trato prensado. Y ahora tenemos este bloque de código aquí que se ejecuta cada vez. En realidad se presiona el botón de trato. Y así ahora voy a seguir adelante y dar clic en nuestro impuesto de controlador de vista solo para ver todo nuestro código mucho más fácilmente. Entonces esta es una función y todo el código dentro de la función se va a ejecutar cada vez que se presiona nuestro botón de trato. Otra cosa que quiero señalar. Así que digamos cuando estás conectando uno de los elementos de la U I, cometiste un error de mecanografía. Entonces digamos que llamé a esta multitud jugador en lugar de tarjeta de jugador y un clic conectar. Bueno, ahora tenemos un error tipográfico y necesitamos arreglarlo. Por lo que podrías pensar que puedes venir aquí y cambiarle el nombre para guardar la carta del jugador. Pero eso en realidad no funcionará, porque si haces clic derecho en la carta por aquí, puedes ver que sigue conectada a la multitud de jugadores, así que va a tratar de encontrar una variable que en realidad no existe. Bueno, entonces, ¿cómo arreglas esto? Por lo que podría eliminar toda la variable y luego hacer clic derecho en la tarjeta y eliminar la conexión. Entonces, bajo puntos de venta referenciando, puedes simplemente hacer clic en esa X por aquí y ahora esta tarjeta no está conectada a nada, y ahora realmente podemos arrastrarla de nuevo y nombrarla correctamente. Y también se puede ver que cuando paso por encima de estos círculos aquí en realidad esbozan qué están conectados. Por lo que la tarjeta de jugador está conectada a la carta por aquí a la izquierda. Este está conectado a la tarjeta de la derecha, y estos tipos están conectados al texto. 13. Agrega el código parte 1: en esta lección, vamos a estar codificando nuestro juego de cartas de guerra para darle alguna funcionalidad. Por lo que al final de esta lección, vamos a tener una aplicación totalmente funcional donde podemos hacer clic en el botón de trato y se eligen cartas aleatorias para el jugador y la CPU y cualquier jugador que tenga la carta más alta. Entonces en este caso, era una CPU. Se les va a otorgar un punto. Así que saltando a nuestro proyecto de código X en este momento, estoy dentro del archivo swift de punto del controlador de vista, y quiero llamar su atención sobre esta función prensada de acuerdo así que dentro de aquí, voy a seguir adelante y escribir print tap. Ahora, si sigo adelante y ejecuto nuestro programa, puedes ver que se abre nuestra app. Y cada vez que presionaba un trato, botón top se imprime al cónsul. Entonces si sigo adelante y lo presiono cinco veces más, puede ver que tap se imprime cinco veces más al cabildo. Muy bien, entonces sabemos que todo el código dentro de aquí se ejecuta cada vez que se presiona el botón de trato . El primero que queremos hacer por nuestro juego es que las imágenes de las cartas cambien cada vez que presionamos el botón de trato, así que veamos cómo haríamos eso manualmente. Entonces entrando en nuestro storyboard de punto principal, si queremos cambiar la imagen de las cartas, hacíamos clic en la tarjeta y luego en los atributos dolor. Llegaríamos a esta imagen un tributo, y a partir de aquí podemos establecer cualquier imagen que queramos para esta imagen atributos, y cambia en función de lo que las imágenes seleccionan. Esto es genial y todo, pero queremos poder hacerlo automáticamente a través de nuestro código. Entonces veamos cómo haríamos eso. Tenemos nuestra variable de tarjeta de jugador aquí arriba. Entonces si seguimos adelante y escribimos carta de jugador y si escribimos un punto después, en realidad obtenemos acceso a todos los atributos disponibles para esta tarjeta. Y uno de esos atributos es el atributo de imagen, y éste es exactamente los mismos atributos que vimos anteriormente en nuestro guión gráfico. Entonces lo que podemos hacer es realmente establecer el atributo de imagen de las cartas de jugador a cualquier imagen que queramos, y para ello, vamos a seguir adelante y escribirte. Yo imagino y te darás cuenta. X Code es auto sugiriendo código para nosotros. Y si seguimos adelante y presionamos enter, podemos ir con códigos ex. Sugerencia de auto. Ahora, si abrimos un corchete y tecleamos y queremos seguir adelante e ir con esta sugerencia nombrada , por lo que si hacemos clic de nuevo en entrar, en realidad podemos especificar el nombre de la imagen que queremos establecer para este jugador card dot atributo de imagen. Entonces si seguimos adelante y abrimos algunas comillas, realidad podemos escribir el nombre de la imagen que queremos establecer la imagen de la tarjeta de jugador, también. Entonces si entramos en nuestra carpeta Activos, estas son todas las imágenes que tenemos disponibles, y aquí mismo podemos ver todos los nombres de cada una de estas imágenes. Por lo tanto, cambiemos nuestra imagen de tarjeta de jugador a carta a, por instancia, en el controlador View. En realidad podemos simplemente escribir carta para aquí, y ahora la imagen de la tarjeta del jugador se establecerá dedo del pie te imagino que se llama carta a cada vez presionamos el botón de trato, y podemos hacer exactamente lo mismo para la tarjeta de la CPU. Entonces si accedemos a los atributos de imagen podemos configurarlo a, ¿ Eres tú? Me imagino Eso se llama, digamos, por instancia, tarjeta cinco. Y ahora si seguimos adelante y volvemos a ejecutar nuestro programa haciendo clic en esta flecha aquí arriba, podemos ver que cuando hacemos clic en el botón de repartir, las tarjetas cambian a dos y cinco exactamente lo que especificamos aquí. Pero si lo presionamos de nuevo, se puede ver que no pasa nada porque ya están fijados en dos y cinco y estamos tratando de volver a ponerlos en dos y cinco. Y así no va a pasar nada. Entonces lo que tenemos que hacer es conseguir una tarjeta aleatoria cada vez. Presionamos un trato, pero podemos seguir adelante y eliminar esta declaración de la parte superior de impresión, y podemos crear una variable llamada número de tarjeta de jugador. Y queremos que este sea un número aleatorio cada vez que presionamos el botón de trato para que podamos configurarlo para terminar punto aleatorio y se puede ver que es auto sugiriendo esto en el método de rango de rango. Entonces si solo hacemos clic en ingresar código X, ¿se auto llenará eso para nosotros ahora aquí? El código X nos está dando algún código de marcador de posición en esto es donde vamos a introducir el rango para nuestro número aleatorio. Entonces para ello debilitar tipo el número más pequeño del rango, que es seguido de tres periodos y luego el mayor número en el rango de rango, que es 14. Ahora, si te preguntas por qué son rangos 2 a 14 podemos dar click en la carpeta Activos y puedes ver los números de tarjeta más pequeños también. Y el número de tarjeta más grande es 14. Entonces ahora cada vez que presionamos un botón de acuerdo, esta variable de número de tarjeta de jugador va a ser un número aleatorio entre dos y 14. Y ahora necesitamos hacer exactamente lo mismo para la CPU. Por lo que el número de tarjeta de CPU es igual al punto final aleatorio y podemos especificar el rango. Ahora podemos seguir adelante e imprimir nuestro número de tarjeta de jugador, y podemos imprimir nuestro número de tarjeta de CPU. Y ahora, si ejecutamos nuestro programa y presionamos el botón de trato, pueden ver que nos imprimen dos números a nuestro cónsul. Si seguimos adelante y lo presionamos un par de veces más, se puede ver cada vez. Estos números son completamente aleatorios, pero las cartas aún no están cambiando, y eso se debe a que realmente no hemos usado estos números aleatorios. Entonces lo que tenemos que hacer es reemplazar estos números por aquí con estos números aleatorios que acabamos de crear para que podamos hacer algo llamado interpolación de cadenas. Entonces, en cualquier momento que queremos poner una variable dentro de una cadena, en realidad podemos poner una barras invertidas y luego abrir dos corchetes y se puede ver que se vuelve blanca ahora y aquí podemos poner cualquier variable que queramos para que podamos seguir adelante y teclear número de tarjeta de jugador. Ahora. Lo que está pasando aquí es que la imagen de la carta del jugador se está configurando en una imagen que se llama Card, seguida del número de la tarjeta del jugador, que es un número aleatorio que estamos generando cada vez. Entonces ahora podemos hacer lo mismo para la CPU para que podamos escribir una barras invertidas, y luego podemos abrir un par de corchetes y escribir número de tarjeta CPU. Y ahora sólo voy a eliminar estas declaraciones de impresiones. Y ahora, si corro el programa, puedes ver que cada vez que presiono el botón de trato tanto el jugador como el CPE obtienes una carta aleatoria 14. Agrega el código parte 2 2: ahora, lo siguiente que tenemos que hacer es comprobar si el jugador uno o el de la CPU. Y dependiendo de quién, necesitamos aumentar las etiquetas de puntos aquí abajo. Entonces esto parece un trabajo para la declaración if. Ahora, antes de que podamos escribir algún código aquí abajo, en realidad tenemos que crear algunas variables que mantengan la puntuación para cada jugador. Por lo que aquí arriba podemos crear una variable llamada var Puntuación de jugador y debilitar ponerla a cero. Y ahora necesitamos otra variable llamada puntuación de CPU. Y también podemos poner este 20 ahora dentro de nuestra función prensada de trato. Podemos escribir una declaración if que comprueba qué jugador uno. Y para ello, podemos escribir si el número de la tarjeta del jugador es mayor que el número de la tarjeta de la CPU y podemos seguir adelante y abrir un par de corchetes rizados. Ahora, cualquier código dentro de aquí se ejecutará si aparece el número de tarjeta del jugador, que estamos generando, es mayor que el número de tarjeta de CPU que se estaban generando aquí arriba. Entonces eso significa que el código que corre aquí sólo se ejecutará si gana el jugador. Entonces solo voy a escribir un comentario que diga jugador gana en esto solo va a ser Esto solo va a ser un comentario marcador de posición por ahora y ahora puedo escribir una declaración else if the check si el número de la tarjeta del jugador es menor que el número de la tarjeta de la CPU. Y dentro de estos corchetes rizados, el código que se ejecute aquí será si gana la CPU. Y finalmente podemos poner un IST. Declaración L en esta declaración l significa que el jugador que el jugador no ganó, ni que la CPU, lo que significa que tanto el jugador como la CPU obtuvieron la misma tarjeta exacta. Y así aquí dentro va a ser un empate. Ahora, pensemos, ¿Qué queremos hacer cuando gane el jugador? Entonces lo primero que tenemos que hacer es aumentar esta variable llamada puntuación de jugador para que podamos escribir jugadores. Score equivale a anotar jugadores más uno, y esto va a aumentar uno a que los jugadores anoten cada vez que gane el jugador . Pero esto en realidad no cambiará la etiqueta aquí abajo porque esta variable de puntuación de jugador no está conectada a la etiqueta en absoluto. Entonces lo que tenemos que hacer es ir al texto de puntos jugador y tenemos toe access la propiedad de texto de este jugador puntos etiqueta de texto. Entonces para ello, podemos escribir un punto, y ahora obtenemos acceso toe todas las propiedades para este jugador apunta etiqueta de texto en la propiedad que queremos es una propiedad de texto, y queremos establecer esto a la puntuación del jugador. Ahora, si sigo adelante y presiono comando ser y lo que esto va a hacer es que va a tener código X, compilar nuestro código y mostrarnos cualquier error que pudiéramos tener. Entonces voy a seguir adelante y presionar comando be y se puede ver que tenemos un error y dice que no se puede asignar valor de tipo end a type string. Entonces lo que esto está diciendo es que nuestro jugador apunta texto de stock tecnológico es una cadena, pero nuestra puntuación de jugadores es un entero, y eso es porque lo inicializamos con un cero, que es un interject. Por lo que no podemos establecer un entero para que sea una cadena. Entonces lo que tenemos que hacer es cambiar a este jugador, anotar variable en una cuerda, y para ello podemos escribir string y luego abrir un corchete rizado y poner un corchete rizado después de que los jugadores marquen y esto en realidad está cambiando. Nuestros jugadores marcan para ser una cuerda. Ahora, si sigo adelante y presiono comando ser de nuevo, puede ver que el error se ha ido. Ahora y ahora tenemos que hacer exactamente lo mismo si gana la CPU así que vamos a hacer puntuación de CPU igual puntuación de CPU más uno y luego puntos de CPU, texto punto texto igual cadena puntuación de CPU. Y ahora si sigo adelante y corro nuestro código, puedes ver cada vez que presiono el botón de trato nuestro código comprueba quién es el ganador, y dependiendo de quién sea, aumenta la etiqueta de puntuación para que veas que el Rey es más grande que el Jack. Entonces la CPU consiguió un punto y todo. Aquí tenemos un empate, y eso en realidad es gracioso porque no codificamos nada para el sorteo. Por lo que la declaración del otro solo se corrió porque el jugador no ganó y ni el engañarte y luego el Jack es más grande que los cuatro y así sucesivamente. Muy bien, ahora pensemos lo que queremos hacer. Si es un empate, ¿y qué? Yo quiero hacer es quiero aumentar tanto la puntuación de los jugadores como la puntuación de la CPU por uno para poder seguir adelante y escribir. puntuación de jugador es igual a puntuación de jugador más uno y la puntuación de CPU es igual a puntuación de CPU más uno y luego puntos de jugador. Texto es igual a puntuación de jugadores de cuerda y puntos de CPU. sexo es igual a Oh, me olvidé el texto de punto aquí, y así que en realidad no podemos cambiar la etiqueta para que sea una cadena. En cambio, tenemos que cambiar el atributo fiscal de la etiqueta. Entonces eso es un error que cometí y el texto de punto es igual a string C. Pugh score. Y ahora acabamos de manejar lo que sucederá si, en el caso de un empate, por lo que tanto el marcador de jugadores se incrementará en uno y la escuela de CPU se incrementará uno. Y aquí abajo solo estamos cambiando las etiquetas de texto para que coincidan con lo que dicen estas variables, y eso es todo. Acabamos de terminar nuestra primera parada, el juego de cartas de guerra, así que lo voy a ejecutar por última vez aquí y podemos revisar el producto final y ahí está 15. Instalación en tu dispositivo: en esta lección final. Simplemente te voy a explicar cómo ejecutarías nuestro juego de cartas de guerra o cualquier otro arriba que hagas en tu propio dispositivo personal. Por lo que lo primero que quieres hacer es conectar tu dispositivo a tu Mac físicamente con un cable real. Y después de que hagas eso, se te pedirá en tu teléfono que introduzcas tu contraseña. Por lo que quieres seguir adelante y escribir tu contraseña. Y si es la primera vez que conectas tu teléfono a tu computadora, va a preguntar si quieres confiar en una computadora, así que vas a querer hacer clic en Sí, para eso. Después, vas a subir aquí a la pestaña de dispositivos y vas a ver tu dispositivo justo aquí en la parte superior. Sé que es no hay dispositivos porque mis dispositivos personales no están conectados. Pero cuando lo sea, vas a ver tu teléfono aquí mismo, y vas a querer seleccionarlo y luego solo tienes que hacer clic en el botón Ejecutar y debería construir en tu dispositivo. Además, solo vas a poder usar tu op en tu dispositivo durante siete días, y si quieres poder usarlo para siempre. Vas a necesitar actualizar a una cuenta de desarrollador de apple, que cuesta $100 al año. Y no te recomiendo que hagas eso hasta que estés listo para subir tu app a la tienda APP. 16. Palabras finales: Oye, antes de que te vayas, quería felicitarte por completar esta clase. Esperemos que por ahora, tengas un buen entendimiento sobre lo que se necesita para maquillarlo. Por supuesto, todavía hay mucho por aprender, pero ojalá este fuera un gran comienzo. Tu viaje. Además, les pido que por favor dejen una reseña para esta clase para que me ayude a construir credibilidad sobre la cuota de habilidad y para que esta clase llegue a más gente. Si hay algún comentario que quieras darme sobre cualquier cosa que no te guste de esta clase, por favor avísame en la sección de discusión para que pueda actualizar el material de la clase. Está bien, eso es todo por ahora. Ten un buen día y buena suerte en tu viaje. 17. Proyecto de clase: Por lo que el proyecto para esta clase es hacer una app similar a ésta donde haya una etiqueta de texto en el medio y dos botones justo debajo de ella. Entonces cuando hago clic en el botón hola, puedes verlo dice hola mundo y la imagen aquí arriba realmente cambia. Y cuando hago click adiós, dice adiós mundo. Entonces por supuesto puedes conseguirnos creativos como quieras. Con esto, puedes usar un fondo personalizado imágenes personalizadas para la imagen aquí arriba que dice hola y adiós. Y ni siquiera tienes que usar el texto hola mundo y adiós mundo. Puedes usar el texto que quieras para que te pongas tan creativo como quieras con este proyecto . A continuación, quería enseñarles a importar sus propias imágenes para su proyecto final. Entonces voy a seguir adelante y buscar una foto de un caliente y voy a escribir la palabra PNG después para que la imagen sea transparente y voy a ir a las imágenes y podemos usar este caliente aquí mismo. Entonces lo voy a guardar en mi computadora y ahora un código X. Voy a dar click en la carpeta Activos y voy a dar click derecho aquí y dar click en Conjunto de imágenes. Y ahora, por aquí, a la derecha, junto a escalas. Queremos cambiarlo de habilidades individuales a escala única. Y esto nos permitirá poner sólo una imagen en lugar de tres imágenes diferentes con tres tamaños diferentes. Entonces ahora puedo seguir adelante y arrastrar mi corazón, y ahí está. Ahí está nuestra imagen importada al código X. También, renombrar tu imagen haciendo clic aquí una vez, y ahora puedes renombrarla para que yo pueda nombrarla. Caliente en esto es el nombre que vas a usar cuando intentes recuperar tu imagen desde dentro de tu código. También quiero mencionar que si tu imagen es demasiado grande para tu pantalla, realidad puedes agregar con y restricciones de altura para que pueda seguir adelante y seleccionar con y establecer eso en 200. Y para la altura, puedo ajustarlo a 200 y ahora puedo hacer click en agregar a restricciones. Y no te preocupes, la relación de aspecto de tu imagen se mantendrá igual. Y eso es siempre y cuando tengas, um, um, ajuste de aspecto seleccionado bajo modo de contenido. Cuando todo haya terminado de hacer su aplicación, puede ejecutarla en cualquier simulador que desee, y luego puede venir a aparecer al archivo, y luego puede hacer clic en guardar pantalla, y esto tomará una captura de pantalla de su imagen y guardará a su escritorio. Y probablemente deberías tomar una foto tanto de la pantalla hola como de la pantalla de despedida. Y ahora puedes subir estos a la sección de proyectos bajo esta clase para que puedas lucir tu creatividad y app haciendo que las habilidades se pongan al pie de todos los demás.