Xcode 14 Tutorial - Step by Step for Beginners (2022)

si quieres aprender a usar xcode para crear aplicaciones, estás en el lugar correcto. Mi nombre es Chris y nuestro equipo ha enseñado a miles de estudiantes cómo usar xcode, cómo codificar y cómo publicar aplicaciones . Ahora tengo que decírtelo. este tutorial adicional va a ser un poco diferente a los otros que has visto, en lugar de solo darte un tutorial, te mostraré cómo usar xcode en el contexto de la creación de una aplicación para que al final de este tutorial vas a tener conocimientos prácticos que puedes poner en uso de inmediato, lo suficientemente bien hablando, vamos a sumergirnos si no tienes xcode instalado, abre la Mac App Store, escribe xcode y haz clic en esto e instálalo ahora. Diré que es un tamaño de archivo bastante grande, necesitará incluso más espacio que este solo para instalarlo y, en segundo lugar, ignoraría estas malas calificaciones xcode es el software oficial que Apple nos da para crear aplicaciones iOS e incluso los profesionales de iOS que desarrollan aplicaciones día a día son usando xcode para hacerlo, también mencionaría que si recién está comenzando, evite las versiones beta de xcode porque contienen errores y su Apple todavía cambia las cosas y estas cosas solo le agregan obstáculos si está tratando de aprender cómo construir aplicaciones así que apéguese a los lanzamientos en la App Store, estos son los lanzamientos públicos oficiales, está bien, una vez que xcode esté instalado, adelante, ejecútelo y comencemos su nuevo proyecto, de acuerdo, se inicia xcode y verá este cuadro de diálogo de bienvenida si no lo hace. mira esto, no temas, solo ve a archivar nuevo y elige proyecto y qué vamos a hacer aquí, probablemente no tengas estos porque estos son proyectos recientes, si este es tu primer proyecto, vas a presionar crear nuevo proyecto xcode aquí mismo y le dará algunas opciones, así que aquí observe que puede desarrollar para diferentes plataformas Creo que cuando instale xcode le preguntará si desea instalar cosas como TV OS y ver OS si es necesario no estamos desarrollando para esas plataformas no necesita instalar esas cosas de forma predeterminada, tendrá IOS y Mac OS y aquí puede crear una aplicación multiplataforma que significa una aplicación que puede ejecutarse en, digamos, iPad, iPhone, conoce diferentes plataformas de Apple, lo que nosotros vamos a hacer aquí para el propósito de este tutorial es guiarlo a través de la creación de una aplicación de iOS en otras palabras para iPhone, así que vamos a ir a la pestaña de iOS aquí y vamos a elegir la aplicación aquí, así que haga clic en siguiente y déjame guiarte a través de algunas de estas propiedades del proyecto, así que primero que nada le vas a dar un nombre a tu proyecto, eh, voy a darle a esto, llamémoslo demostración del tutorial de xcode y para el equipo si no eres parte del programa de desarrollo de Apple, entonces probablemente no tenga nada que poner aquí, puede tener un equipo personal si tiene una cuenta de Apple, pero no tiene que preocuparse demasiado por el identificador de la organización que se combina con el nombre de su producto para crear un paquete único identificador ahora esto va a ser único para cada aplicación que g ets se publica en la App Store, por lo que generalmente es como com Dot y luego podría ser su nombre o el nombre de su empresa o su sitio web, lo que sea, seguido de un punto seguido del nombre de su proyecto de producción o nombre del producto, así que aquí mismo ponga com punto su nombre o su sitio web o empresa, eh, y luego la interfaz es básicamente qué tipo de tecnología de interfaz de usuario desea usar para crear su aplicación de manera predeterminada, debería decir Swift UI, esta es la dirección en la que Apple se está moviendo en todas las cosas más recientes lo que se anunció es con respecto al guión gráfico de la interfaz de usuario de Swift, es una especie de marco de interfaz de usuario más antiguo que, a partir de esta grabación, todavía se usa mucho, pero la interfaz de usuario de Swift es quizás aproximadamente a partir de esta grabación, tal vez tres años, pero es el futuro como lo ve Apple. Le recomendaría que aprenda la interfaz de usuario de Swift, especialmente como principiante, porque es mucho más fácil de aprender. Siempre puede volver atrás y aprender el kit de interfaz de usuario y el idioma de los guiones gráficos. Definitivamente, elija Swift o ni siquiera tengo la opción, está bien si elige El guión gráfico tiene la opción de seleccionar Objective C, que supongo que podría llamarse el lenguaje de programación original utilizado desde entonces, Apple introdujo el lenguaje de programación Swift, que es la opción recomendada para aprender en estos días, así que definitivamente seleccionaría Swift si usted están usando Swift UI o guiones gráficos y luego desmarcaría cualquiera de estas opciones si tiene alguno de estos marcados porque no necesitamos estas cosas en este momento, solo complicará las cosas y a medida que crezca como desarrollador de aplicaciones aprenderá más sobre estas opciones, así que sigamos adelante y presionemos siguiente y creemos nuestro nuevo proyecto. Le preguntará dónde guardarlo. También puede dejarlo sin marcar porque, de nuevo, no es algo que cubriremos en este tutorial. es la primera vez que crea una aplicación, le recomendaría que creara un lugar dedicado para todas sus aplicaciones para mí. Solo voy a guardar esto en mi escritorio, presione crear y le dará una palabra y déjeme simplemente expanda esta ventana y luego revisaremos todos nuestros archivos nuevos porque vamos a hacer este tutorial en el contexto de la creación de una aplicación después de que le dé unos momentos para que su xcode cargue el nuevo proyecto vas a ver un iPhone gigante en tu pantalla aquí ahora antes de sumergirnos en este proyecto y decirte lo que todo esto significa es un poco abrumador a primera vista podemos dividir esta interfaz en seis partes distintas a tu izquierda lado derecho aquí este es su Navegador aquí es donde verá los diferentes archivos de su proyecto esta parte justo aquí donde edita el código se llama editor y es donde va a escribir su código este es el lienzo donde puede obtener una vista previa del código que ha escrito, así es lo que se genera a partir de lo que escribe en el editor y luego, a la derecha del lienzo, tenemos el área del inspector, observe que hay un par de pestañas aquí en el inspector. y también observe que tenemos un par de f pestañas aquí arriba uh para The Navigators también porque puede navegar entre diferentes cosas en su proyecto ahora el área del inspector es para ver los detalles en su editor más de cerca profundizaremos en cada una de estas secciones pero ahora vamos a darle una descripción general en la parte superior tiene su barra de herramientas y aquí es donde puede ver el estado de lo que le está sucediendo a su proyecto, ya sea que lo esté creando para que se ejecute donde lo está ejecutando porque puede seleccionar ejecutarlo en diferentes dispositivos y cosas como que aquí abajo esto está oculto, pero puede mostrarlo para mostrar el área de depuración y aquí es donde solucionará algunos de los errores o el código que está ocurriendo con su proyecto, pero puede ocultarlo por ahora, así que hay un poco botón allí para eso, para crear más espacio para usted, también puede ocultar estos diferentes paneles, por ejemplo, este botón aquí oculta todos sus inspectores, este botón aquí oculta sus Navegadores, por lo que ahora solo tiene Tenga su editor y lienzo donde pasará la mayor parte de su tiempo y si está acostumbrado a solo escribir código y no mirar realmente su vista previa, incluso puede desactivarlo tocando este botón y luego diciendo mostrar solo editor y obtendrá una pantalla llena de código, por lo que esas son las seis áreas principales en las que pasará su tiempo. Este es el editor de código. Podemos hacer clic en este botón y elegir el lienzo para recuperarlo y luego podemos tocar . este botón para recuperar los inspectores, lo que nos permite sumergirnos en elementos dentro de nuestro editor. Podemos tocar este botón para recuperar nuestros navegadores y este botón aquí abajo para abrir nuestra área de depuración. Ahora que conoce las áreas principales de xcode, profundicemos. en los archivos de su proyecto para que podamos explicar de qué se compone un proyecto de xcode, así que primero hagamos la pregunta: ¿ qué es un proyecto de xcode? Creamos un nuevo proyecto aquí y nos preguntaron dónde guardarlo, así que busquemos esa ubicación en el disco. y echa un vistazo a los archivos que he cr comido, primero que nada hay una carpeta con todos los archivos de su proyecto dentro y observe cómo estos se asignan a lo que ve aquí en el navegador de archivos y luego también está esta extensión xcode proj, este es su archivo de proyecto que vincula todos estos archivos juntos en un solo paquete y, por lo tanto, cuando envía a alguien un proyecto xcode, no solo envía este archivo, sino que también necesita todos los archivos en esta carpeta juntos , por lo que generalmente lo comprimiré, pero de todos modos estos son sus archivos que representan su nuevo proyecto xcode y luego puede verlos a través de aquí su navegador de archivos si no ve estos archivos, es posible que esté en una pestaña diferente, así que asegúrese de estar en esta primera pestaña del navegador de archivos, revisemos estos archivos para que pueda entender en qué consiste su proyecto, así que si hace clic en este primer nodo raíz aquí arriba, de hecho, puede contraerlo, puede ver que esto encapsula todos sus archivos, lo cual es representativo de esto aquí, así que si hace clic en eso, el área del editor va a cambiar e y estos son todos los detalles de configuración para su proyecto aquí es donde puede calcular cosas como números de versión y orientaciones y cosas así hay mucho que puede hacer aquí pero no vamos a profundizar en eso por ahora usted no necesita saber nada de eso, solo sepa si necesita configurar algo con su proyecto o habilitar una cierta capacidad, digamos compras en la aplicación o algo así, aquí es donde iría a continuación, tenemos esa carpeta que alberga todos nuestros archivos Bien, vimos que en el sistema de fuentes, si expande que tenemos este archivo, este será el nombre de su producto y este es el punto de entrada para su aplicación, este es el código que se ejecuta primero , así que quiero que se dé cuenta aquí. es que vamos a pasar por alto gran parte de este código si desea profundizar más y comprender lo que significan estas cosas. Definitivamente lo insto a que consulte nuestro desafío para principiantes de la aplicación donde tenemos 10 lecciones para pasar juntos y está en YouTube y lo haré explicar en detalle lo que todos los thes Las cosas son por ahora. Quiero que se dé cuenta de que esta vista de contenido de aquí lo que está haciendo es crear una vista de contenido completamente nueva y, si mira, tenemos un archivo de vista de contenido aquí arriba, así que hagamos clic en eso y este es básicamente su contenido. vista, puede ver una representación visual aquí y aquí mismo verá que está declarado como vista de contenido y este es el código que genera toda esta interfaz de usuario y todos estos elementos que ve aquí, así que si volvemos a esto archivo de punto de entrada qué está haciendo está creando una nueva vista de contenido, así que esencialmente está creando una nueva pantalla y esa pantalla es Vista de contenido y esa pantalla está dictada por este código aquí mismo, así es como se ve la pantalla, así que espero que tenga una idea ahora del flujo de la aplicación, tiene el punto de entrada, está creando una pantalla nueva y esa pantalla se llama vista de contenido y eso es lo que tiene aquí y este es este código que representa la interfaz de usuario de la vista de contenido, ahora no lo está. limitado a uno Como sabe, siempre puede hacer clic con el botón derecho y elegir un nuevo archivo y podrá agregar una nueva vista y no vamos a tocar eso hoy. Definitivamente, consulte la serie de aplicaciones para principiantes como mencioné en orden . para obtener más información sobre la creación de pantallas múltiples y cosas por el estilo y cómo vincularlas y navegar entre ellas por ahora pasemos a los otros archivos en nuestro proyecto tenemos estos recursos aquí aquí vas a almacenar los recursos para tu aplicación, entonces, ¿qué quiero decir con recursos? Me refiero a cosas como el ícono de su aplicación, simplemente puede arrastrar y soltar una imagen aquí, los colores para su aplicación, así que aquí tiene un color de acento predeterminado para su aplicación, pero puede tenga tres o cuatro colores que reutilice en toda su aplicación, así que aquí es donde declararía esos colores y luego también podría hacer clic en que podría decir esto es lo que sabe, como el color del botón o algo así, tal vez escuchó un poco más descripción cinco que yo , pero básicamente definiría tal vez un color para todos sus botones y luego elegiría un color para el modo claro o cualquier modo y puede definir un color para el modo oscuro, por lo que si el usuario está usando el modo oscuro, elegirá automáticamente este color para sus botones y cuando está escribiendo código aquí, puede hacer referencia a ese color con este nombre aquí mismo para que también pueda crear imágenes como un nuevo conjunto de imágenes, así que cuando hagamos eso, digamos que tenemos una imagen que queremos usar en nuestra aplicación, así que voy a nombrar esta planta de imagen así, tenga en cuenta que para la planta tengo una X2 X y 3X ahora estos son diferentes tamaños para mi imagen porque hay diferentes resoluciones de pantalla para iPhone , así que esencialmente vas a tiene el mismo activo de imagen pero en tres tamaños diferentes, uno que es el doble del tamaño y otro que es el triple del tamaño, arrastrará las tres versiones aquí y cuando la aplicación se ejecute, elegirá el tamaño de imagen apropiado para usar en función de la resolución del dispositivo del usuario a Muy bien, intentémoslo. De hecho, tengo una imagen que preparé para que la veamos y es solo esta planta aquí, así que la arrastraré hasta aquí, creará automáticamente ese nombre de recurso para mí. y va a tratar esto como 1X ahora si tuviera las versiones 2X y 3X, lo arrastraría aquí también y lo nombraría de la misma manera, pero se llamaría esencialmente sería algo como esto, así que déjame solo duplique este archivo y muestre cómo iría el nombre del archivo, sería como en 2X y luego, si lo arrastro aquí, podría ponerlo en 2x ahora, obviamente, solo lo dupliqué, por lo que en realidad ambos tienen el mismo tamaño, pero eso es cómo nombraría sus tres tamaños diferentes y el otro estaría en 3x y lo arrastra allí mismo, así que si tuviera que usar esta imagen dentro de mi aplicación, la haría referencia por esto, así que vamos a intentarlo en solo un momento en el que nos ponemos a hablar del área del editor, pero por ahora terminemos hablando del resto de los archivos en nuestro proyecto tenemos esta última carpeta llamada contenido de vista previa y aquí tenemos otra biblioteca de recursos y aquí es donde puede definir sus activos para obtener una vista previa específicamente esto es para cuando está creando su aplicación y está viendo estas vistas previas quizás usted no puede visualizar completamente cómo se verá su interfaz de usuario a menos que tenga algunas imágenes de muestra, así que ahí es donde colocaría sus activos de prueba o muestra o demostración, ahí es donde los coloca en los activos de vista previa, todo ahora que está familiarizado. con todos los archivos en su proyecto y navegando a través de ellos usando el Navegador de archivos, pasemos al editor y al área del lienzo, como probablemente ya pueda adivinar, el área del editor, incluido el lienzo aquí, cambia según lo que seleccione para que pueda editar su archivo seleccionado si selecciono este archivo de proyecto me permitirá editar los detalles de configuración del proyecto si selecciono digamos la Biblioteca de recursos me permitirá editar esas cosas y cuando seleccione esto es un archivo de código puro, es solo código, pero cuando tengo una vista, me da un código más un tipo de diseño de editor de vista previa de lienzo aquí, por lo que en realidad hay muchas cosas geniales de productividad con el editor aquí , como poder saltar a diferentes partes de el código si tiene un archivo de código realmente largo, puede ajustar el tamaño de este y aquí arriba a lo largo de esta barra puede ver que tenemos varias pestañas para que pueda cambiar archivos fácilmente, también tiene estas flechas aquí que se pierden fácilmente que permiten puede saltar hacia atrás y hacia adelante como un navegador como Chrome o Safari o algo así, también tiene la capacidad de abrir archivos uno al lado del otro, por lo que esta ventana puede mostrar un archivo de código mientras que este muestra otro y porque a veces si desea comparar o tal vez ver dos archivos a la vez, puede reorganizar estas ventanas, incluso puede tener cuatro, según el espacio de su pantalla, pero podemos profundizar en esos consejos y trucos al final de este tutorial, por ahora quiero mostrar usted cómo puede escribir código en el Editor de código para crear su interfaz de usuario que puede obtener una vista previa aquí, así que quiero llamar su atención sobre este bloque de código aquí mismo, estas pocas líneas de código representan lo que ve aquí, así que dividámoslo un poco hacia abajo verás esta pila v aquí que significa pila vertical y básicamente te permite poner varias cosas una encima de la otra si miras la pila vertical déjame colapsar un poco este código para que puedas ver escribes v stack y luego tienes un corchete de apertura y un corchete de cierre y lo que sea que coloques entre esos dos corchetes son los elementos que estás apilando uno encima del otro, así que si miras la vista previa aquí tienes un pequeña imagen de un globo terráqueo y aquí tienes esta etiqueta de hola mundo, esas dos cosas están una encima de la otra, así que déjame abrir el contenido de la pila en V y verás que tenemos un elemento de imagen que es este globo terráqueo aquí y tenemos el texto hola mundo que es esta etiqueta aquí y debido a que ambas cosas están dentro de la pila v, están apiladas una encima de la otra y, además, la imagen está encima del texto para que pueda ver cómo escribir este código es muy intuitivo para ser capaz de imaginar cómo se vería esta interfaz de usuario, así que ahora profundicemos un poco más en el elemento de la imagen, tiene una imagen y esta parte dentro de los corchetes especifica qué imagen mostrar ahora Globe es un ícono que viene preinstalado de hecho puede cambiar este globo a otro ícono preinstalado estos íconos se llaman símbolos SF y vienen con iOS estos son los símbolos estándar que los usuarios de iOS están acostumbrados a ver en iPads y iPhones y puede descargar esta aplicación beta de símbolos SF y lo sé en Al comienzo de este video, les dije que no descargaran ninguna versión beta, pero no hay un lanzamiento público de esto, todavía está en versión beta, déjenme lanzarlo porque lo tengo aquí y les mostraré cómo se ve, así que esto es solo una manera fácil de tomar diferentes íconos para utilícelo en su aplicación para que no tenga que descargar nada ni agregar ninguna imagen, así que, por ejemplo, escojamos este , cuyo nombre es una variable de punto de garabato, así que seguiré adelante y copiaré el nombre y luego voy a reemplazar eso aquí con globo y vamos, está haciendo algo y luego verás que se actualiza aquí en la vista previa y verás que es exactamente el símbolo que tenemos ahora, ¿qué son estos? déjame solo abre esto un poco para que podamos verlos en una línea ahora escala de imagen grande modifica el elemento de la imagen, por lo que indica a qué escala debemos mostrar la imagen, este es otro modificador, cambia el color del elemento de la imagen, por lo que, por ejemplo, puedo cambio en lugar del color de acento, puedo cambiar el verde, pero antes de hacerlo, ¿ dónde ha escuchado el color de acento antes de que esté dentro de nuestra biblioteca de recursos ? podemos cambiar el color de acento o usted c simplemente debería poner verde allí o tal vez rojo y cambiarlo a rojo a continuación, tenemos un elemento de texto que es esencialmente solo una etiqueta que realmente no puede hacer nada con él, pero muestra texto, así que tenemos hola mundo o podemos cambiar eso texto la cita dentro aquí es el texto que se muestra , así que es realmente tan simple como eso, además, si desea modificar este elemento de texto, tal vez quiera ponerlo en negrita, agreguemos un modificador de negrita al texto y ahora puede ver que está en negrita así que estos dos elementos están contenidos dentro de la pila en V. Puedo colapsar la pila en V así y luego puedes ver qué es esto. Este es un modificador para la pila en V. Este relleno agregará relleno a lo largo de los cuatro lados de la V. apilarse si elimino este modificador, puede ver visualmente cualquier cosa porque el relleno es algo invisible aquí, pero si se llena si tenemos una línea de texto que va desde la izquierda hasta la derecha si no tengo el relleno modificador tocaría los dos bordes de la pantalla si agrego ed el modificador de relleno en ese entonces obtendríamos el margen izquierdo y derecho ahora echemos un vistazo al uso de la imagen que habíamos agregado al catálogo de activos aquí este este activo monstera deliciosa Ni siquiera sé si estoy pronunciando eso correctamente, así que me disculpo si me equivoco, es un poco ciosa y luego para la imagen tenemos el nombre del sistema, pero eso no es lo que usamos para nuestra propia imagen agregada, eso es lo que usamos para los símbolos SF que les acabo de mostrar, así que estamos vamos a deshacernos de todo eso y entre los dos corchetes aquí solo vamos a poner dos comillas y luego vamos a poner el nombre del activo que agregamos, así que volviendo aquí, solo echando un vistazo en ese nombre, todo en minúsculas con un guión entre la derecha, así es exactamente como tenemos que deletrearlo aquí , de acuerdo, para que aparezca allí y, si quisiéramos, digamos, darle esquinas redondeadas, podemos usar otro modificador llamado Radio de esquina y podría será un poco difícil para ti recordar todos estos diferentes meses modificadores, pero con el tiempo, a medida que los use, los conocerá y simplemente recordará y le mostraré cómo puede agregar estos modificadores sin realmente recordarlos cuando veamos la pestaña del inspector . Entonces, lo que hago aquí, agregué este modificador para el elemento de imagen y puse 20. Supongo que ese es el grado de redondeo que quiero y luego, además, podría decir, oye, este texto está demasiado cerca de la imagen, quizás agregue otro. modificador a este texto y agregaría relleno y puede ver que va a agregar relleno en los cuatro lados, así que si nos movemos un poco más abajo en este archivo de código, verá que dice vistas previas de vista de contenido aquí este es el pequeño fragmento de código que está generando lo que ve en la vista previa, puede ver aquí , está creando una nueva vista de contenido, que es lo que es, lo bueno de la vista previa es que podemos poner esto en diferentes estados. puede ver esta interfaz de usuario que hemos construido en , digamos, un modo oscuro o un iPad o un factor de forma más pequeño o tal vez orientación horizontal, todas esas cosas que puede hacer agregando modificadores en la vista previa aquí, pero también hay una manera más fácil de hacerlo, tenemos botones aquí ahora donde puede puede simplemente hacer clic y hacer esas cosas, por lo que si hace clic en variantes, por ejemplo, puede cambiar el esquema de color o puede ver la versión en modo oscuro y la versión en modo claro, tal vez le gustaría ver las diferencias de orientación y cómo sería su interfaz de usuario afectado y cómo se vería en esas orientaciones que podrías hacer que puedes escribir como tipos de diferentes tamaños y hay muchas cosas diferentes que puedes hacer aquí, está bien, volvamos a nuestra vista inicial aquí, así que espero que eso te dé una descripción general del editor de código y la vista previa y cómo la edición del código aquí afecta lo que ve en la vista previa ahora , como dije, hay muchas más complejidades con el editor de código para facilitar la escritura del código, así como con la vista previa pero nosotros voy a guárdelos para la sección de consejos y trucos al final de este video por ahora pasemos a explorar el lado derecho de la pantalla el panel de inspección el panel de inspección hasta el final en el lado derecho también tiene diferentes pestañas que le brindan varios información y configuración para lo que sea que seleccione dentro del editor o archivos, así que déjeme darle una demostración, por ejemplo, estábamos hablando de v-stack si coloco mi cursor en v-stack , verá que el panel de inspección cambió y Ingresé a este panel aquí para obtener ayuda rápida. Este me brinda un resumen sobre lo que hace v-stack, um y un código de muestra sobre cómo usarlo y, además, puedo hacer clic en este enlace para abrir la documentación del desarrollador que da dame más información sobre el v-stack y cómo usarlo y todo ese tipo de cosas, así que eso es muy, muy útil si selecciono, digamos, la imagen nuevamente, esto cambia al componente de imagen y cómo usarlo y todo sobre eso super útil si selecciono en un archivo, por ejemplo, digamos que selecciono la biblioteca de activos y selecciono, digamos, el color de acento y luego selecciono esto si cambiamos a una pestaña diferente, por lo que esta última pestaña aquí en el panel del inspector se llama el inspector de atributos. Puedo configurar diferentes atributos sobre lo que he seleccionado en el editor aquí, así que para este color de acento podría seleccionar en qué dispositivos quiero que esté disponible, aparece en claro oscuro o cualquiera y luego puedo elegir el color real, por ejemplo, para las imágenes por ejemplo, puedo seleccionar una imagen y puede ver que hay todos estos atributos diferentes que puedo configurar en este inspector de atributos si selecciono un archivo, por ejemplo, puedo ir al inspector de identidad y tipo que me brinda información sobre el archivo en sí como como dónde está ubicado y es parte de este proyecto como aquí ahora, aquí es donde se vuelve realmente interesante si voy al inspector de atributos y resalto un componente aquí, puede ver que puedo configurar diferentes no hay cosas para ese componente de imagen, ya sabes cómo estábamos escribiendo el código aquí mismo para el radio de la esquina, bueno, no estoy limitado a solo escribir código, en realidad puedo modificar cosas aquí, por ejemplo , puedes ver aquí que tengo un radio de esquina de 20 y esto es porque está leyendo el código que he escrito, así que puedo verlo aquí si quisiera cambiar esto a, digamos, 10. Puedo modificar el número aquí o puedo cambiar el atributo a 10 allí mismo y lo verás. reflejado en la vista previa y también en el código, y si no estoy seguro de qué modificadores están disponibles para mí para el componente de imagen, puedo bajar aquí, puedo echar un vistazo a los diferentes modificadores disponibles, puedo escribir uno para filtrar, por ejemplo, si quiero hacer esta imagen más pequeña, podría agregar un modificador de tamaño variable, en realidad, es posible que no necesite hacer eso aquí porque solo puedo modificar el tamaño, por ejemplo, si digo cambiar el ancho para dejarme escribir esto fuera 200 y um 300 o algo así, entonces puedo ch Ange que justo ahora notará que simplemente lo recortó, en realidad no cambió el tamaño de la imagen si quisiera cambiar el tamaño de la imagen, necesitaría agregar un modificador aquí llamado redimensionable así y luego Verá que ahora en realidad cambia el tamaño de la imagen en lugar de simplemente recortarla. Además, ¿sabe cómo en el elemento de texto aquí habíamos agregado el relleno correcto, así que aquí está este modificador de relleno si me deshago de este relleno? Veré que vuelve a estar demasiado cerca de la imagen, pero lo que puedo hacer es simplemente agregar el relleno superior para poder seleccionar esa parte superior y , además, puedo dejarlo en el valor predeterminado o puedo cambiar la cantidad de relleno que Quiero y luego puede verlo reflejado aquí en el código, por lo que usar este inspector para agregar y editar modificadores para su elemento también es una muy buena manera de aprender cuál sería la representación del código para eso y si continúa creando aplicaciones y trabajando dentro. xcode llega a ser un punto donde es más rápido para ti simplemente escribirlo en lugar de ir aquí al inspector de atributos para configurar las cosas porque notarás que mientras escribo cosas hay algo llamado autocompletar correctamente escribiendo eso, solo tuve que escribir punto Cor y luego ingrese y luego 10. y simplemente escribir eso es mucho más rápido que hacer clic aquí y luego venir aquí y seleccionar cosas, por lo que llegará un momento, si sigue así, en el que solo recordará estos modificadores y puede simplemente escribir todo en el código y quiero señalar algo más también con este elemento de texto, puede ver diferentes tipos de atributos que puede configurar en comparación con el elemento de imagen, por lo que para el texto, obviamente, puede configurar la fuente, el peso, la alineación y los límites de línea y cosas así con la imagen obtienes cosas diferentes, así que eso es lo importante que debes saber sobre el panel de inspección, pasemos a esta franja en la parte superior llamada barra de herramientas, ahora hay algunas cosas notables sobre la barra de herramientas, sabe cómo dije que si resalta un componente aquí y va al inspector de atributos, puede configurar diferentes propiedades para él, ¿y si no sabe qué componentes están disponibles para usted en Swift UI para construir su interfaz de usuario con bueno, ahí es donde la biblioteca es útil si hace clic en este pequeño ícono más en su barra de herramientas de xcode que abre la biblioteca y hay algunas pestañas diferentes aquí, pero revisaremos la primera pestaña porque eso muestra todo el diferentes vistas y componentes que puede agregar a su interfaz de usuario y lo mejor es que puede hacer doble clic en esto o puede arrastrarlo y literalmente soltarlo en su editor de código y luego puede ver cuál sería el código resultante, así que esto es cómo se ve un botón que puede ver aquí es verde y es verde porque en nuestra Biblioteca de activos cambiamos el color de acento para que sea verde predeterminado, así que en realidad no me gusta eso, así que ¿por qué no seguimos adelante y simplemente cambiamos? el en el azul predeterminado, por ejemplo , volveremos a la vista de contenido, verá que el botón es azul, además, este texto dentro del botón aquí puede cambiarlo para decir que sabe, tóqueme y luego dentro aquí acción Verá, este es un corchete de apertura. Este es un corchete de cierre entre estos dos corchetes. Pondría el código que desea ejecutar cuando el usuario toque el botón . Abramos la biblioteca nuevamente, por ejemplo, si sabe lo que está buscando. para que pueda filtrar, puede agregar un conmutador si no sabe lo que está buscando, no sabe qué es esto, siempre puede mirar esta documentación en el lado derecho nuevamente, simplemente arrástrelo y suéltelo y pongamos eso en una nueva línea y puede ver que está su interruptor de palanca ahora la biblioteca no solo tiene vistas que puede agregar, también tiene una colección de modificadores, vea eso es lo que es la segunda pestaña para que también responda la pregunta ¿Qué pasa si no sabes qué modificaciones puedes hacer a esos elementos ? de nuevo, puede intentar arrastrar y soltar estas cosas diferentes, ver sus efectos de desenfoque, acentuar los colores, el brillo, las formas de los clips, como todo tipo de cosas que puede explorar, aquí hay una que acabamos de usar . no puede recordar cómo escribir algo en el lenguaje de programación Swift, puede buscarlo aquí, así que digamos una declaración if, esto le permite especificar diferentes ramas de código como si esto es cierto, luego haga esto si no es cierto como si es falso, luego haga eso, eso es lo que es una declaración if y luego puede simplemente arrastrar esto y soltarlo aquí y puede ver cómo se ve ese Código Swift, por lo que esta es una excelente manera de aprender también porque puede ver lo que el code representation of a button is you can see what a code representation of a toggle is and you can don't forget you can put your cursor on that and then you can configure that toggle or button over here in the attributes inspecto r now returning to the library for a second we also have let's get rid of this uh you also have easy access to all of the images you've added to your resource libraries you also have all of the custom colors that you have specified in your resource library in this last one surprise are the symbols so you don't even need that SF symbols app although that does give you an easier way to browse because all the icons are broken up into categories but this is another way here's the one we use for scribble variable so the library is very very useful also in the xcode toolbar are the buttons here to hide and show the file Navigator and the inspector panels respectively another thing I'll draw your attention to is this status right here this tells you what xcode is doing behind the scenes sometimes when you just launched xcode and you're booting up your project or you're starting a new project you'll see you're going to be waiting you're going to see a progress indicator and it's going to tell you what's happening behind the scenes also you'll notice that there's your product name right here and that might seem a little redundant because nothing happens but it's because sometimes for larger projects you have what's called an xcode workspace and you might have multiple xcode projects inside a single workspace but more importantly for you right now is probably this area right here so this indicates what project you're looking at and this indicates what simulator you want to use now before we get into simulators let me first mention about this preview right here so this preview is a great way to take a look at what your code looks like visually you can even interact with this see I can tap on this I can toggle the switch right like that now a preview is great for seeing how this single view or screen looks like however if you want to go through the flow of your multi-screened app you'd want to launch your app either on your phone on your actual device or on an iOS simulator whi ch is what you are selecting up here so a simulator is just exactly what it sounds it's going to be a representation of your app on a virtual device that appears on your screen so let's let's show you an example of this now just a note before we do this after I show you the iOS simulator I will show you how to run it on an actual device okay so let's go ahead and select iPhone 14 pro and look at this play button right here right we are going to tap on this button which will build the project and it's going to you can see the status part is is doing stuff xcode's performing all of these operations behind the scenes and it's getting ready to launch your app inside a virtual simulator which it'll take some time if this is the first time you're launching the iOS simulator give it some time it's going to bring it up on the screen but you'll notice there's a stop Button as well so if you want to cancel the operation just go ahead and hit stop all right so my iOS simulator has launched here i t is I can tap on this and drag it around I can interact with it if I had multiple screens I could navigate and use my app there are different things you can do here such as rotate the orientation or change the orientation I mean you can also take a screenshot you can even take a video actually in one of these menu options up here you can hit the home to go back to the home screen and you know this this is really a simulator you can have different contacts you can have different apps in here but this is primarily to test your app under different conditions if you dive into the menu you can simulate a lot of different scenarios that would happen with a real device so you can check out all the menu options here but what I want to um right here so we can simulate a fall you can play around with face ID you can yeah there's a lot of different things you can do in here you can even put in a custom location so you can simulate as if the user were at whatever location that you would want if y ou're building let's say a Maps app or something like that under the debug menu you can simulate if the device is low on memory you know there's a lot you can do here and that's why the simulator is so helpful however there is a limit with what you can do on the simulator it is not perfect the best thing would be to actually test it on a real device but before we do that one more thing I want to mention about the simulator is that you can have multiple simulators open at the same time so you can hit stop you can pick a different one like let's say iPad or iPad Air and you can launch that and you can have two cylinders up and running at the same time another thing you can do with the simulator is you can reset it so you can either restart the device or you can completely erase content and settings which would be kind of simulate a brand new phone type of feeling okay so if you want to run your app on an actual device what would you do well you would need an iPhone cable and you would ne ed to plug your device into your computer or your laptop so I'm going to plug mine in what you're going to see on your phone if it recognizes your phone at all is you're going to see a menu that says do you trust this computer if this is the first time you've plugged in your phone it's going to say that and you're going to say trust you're going to enter in your passcode and here you can see that it's preparing my phone for development and then what you should see is your device here now for me I haven't updated my iOS version on my phone yet so it's telling me that I I'm on 15.6.1 and because this is the new xcode 14 it's running things on iOS 16. it can't put this app on my device until I update to iOS 16 on my device however if in theory we didn't have this problem my phone would show up right here on the list and I'd be able to select it like that just like that and I would be able to hit this button to run and it would actually launch the phone just like you saw it launched in the simulator except it would launch it on my phone and I would get to interact with it so that's a really cool way to build something and very easily put it on your device and go around and show people now the ability to do this to put your app on your own device is for testing only so in about 14 days I forget if it's 7 or 14 days it will start to expire and it's going to warn you about that and that that point in time you either plug it in again and reinstall the app on your device again to get another 14 days or if you want a more permanent solution you need to sign up for the Apple developer program which is a paid program you can Google it which would then give you the ability to install your app on your devices for the long term as well as to publish it onto the App Store as many apps that you want alright so now you have a real sense of building your app you know how to preview your screen using previews you know how to test your app on the iOS simulator you know how to test your app on a real device so how do you actually submit your app into the App Store and get it approved so that it can be used by millions of people let's talk a little bit more about that Apple developer program I just mentioned so if we pull up the Apple page on the Apple developer program it's about a hundred dollars USD to enroll per year and that allows you to submit unlimited apps into the App Store it allows you to invite beta testers to your app and they can you can make it available for them to install here it says you can put it on the App Store and distribute your apps you can get analytics about your sales about like Impressions on your app store listing conversions on the you know clicking the download button and things like that and you get a couple of credits to connect with apple experts to troubleshoot your issue so once you enroll in this apple developer program you have access to What's called the App Store connect and as it sounds it's basically your dashboard for all th ings that have to do with the App Store now these are some of the apps that they're not currently all on the App Store however I want to show you an example of how you would list your app and then how you would use xcode to deploy your app into the App Store and deploy is just a fancy word of saying sending or installing so let's take this for example I'm going to click into this existing app store listing if you were to create a brand new app you'd click this plus button to create a new app store listing and in here you would configure all things about your app such as the screenshots app information pricing availability you can manage ratings and reviews you can configure in-app purchases and subscriptions and promotions and things like that and this is where you'd also put your app store description now once you've configured all of this app store listing information what you'd want to do is it depends what platforms you have but for iOS come into here and you would specify a new re lease so we are at 1.0.3 and here you can talk about what's changed in this version you can add screenshots for this specific version write the description all of this metadata is associated with that version and then when it comes down to here build this is where you are going to specify your xcode project so how do you send your xcode project from xcode to App Store connect specifically linking it to this app store listing so you might think that oh I need to zip up all my files here you know all these project files that I told you about and then upload it here but no it's actually easier than that so you go into xcode and what you want to do once you've tested your project it's ready to launch into the App Store you go into product right here and you choose archive what's gonna I'm not going to do it right now well actually okay let's do it right now so I'm going to hit archive and it's gonna yeah it's not ready it's not ready for archiving right now but you're basically preparing t hat package for distribution in the app store that's what archiving does so if I were to successfully archive this project then it would pop open this window this organizer window and I would see my app here and if II don't even have it here because we didn't set this project up um and we didn't connect it to the team that is associated with this app store connect account otherwise my app listing would automatically appear here but anyhow let's pretend that this is the app under archives right here I would see the archive that I just made right and I would also give it a specific version number right so you can put it right here version two version 1.0.5 or whatever it may be and then you would go product archive and then it would appear in this organizer window and you'd be able to select it and then you would be able to hit a button it would run some a couple of checks to make sure it's ready for the App Store and then it would send that archive here and it will know to send it to th e app to the specific version and then it will show up here and then once you have that build right here put in any information that you would want the App Store reviewer to know as they review your app for App Store certification and then you just hit the release button you can also specify when to release it you can manually release it after it gets approved or you can automatically release the app after the reviewer approves it and that's pretty much how you publish an app onto the App Store now this is the end goal of all of us developers right but before you even get there in the process of building your app you're going to run into obstacles and roadblocks and there's going to be code that doesn't work the way that you intended it to work how do you troubleshoot these issues and how do you resolve them let's take a quick look at debugging using the tools in xcode which is just the fancy way of saying fixing your bugs and resolving your issues okay so we're back inside xcode you'l l notice that when we launched this project in an iOS simulator that this tray this debug area popped up now I mentioned you can tap on this button to open this area but it popped open automatically because there there was diagnostic information to display furthermore there are two panels here and that is controlled by these two buttons so this one hides the right one this one hides the left one or shows it and this trash can icon clears this sort of log right here so in order to debug your code oftentimes it's just a process of trying to figure out where the problem is happening and then walking through step by step as the code is being executed and looking at if everything is as you expect so once you can identify where things are going wrong then you can see what the issue is and fix it so here are some methods to display information and then also to walk through the code line by line let's start by removing this toggle element and we'll use the button right now so let's say when th e button is tapped on we are going to print something out into the uh the console window here so let's go ahead and launch the simulator again in an uh on an iPhone 14. so this is a subsequent launch so it should be a lot faster all right so when I tap on a button you can see that each time I tap on it it runs the code inside here and it prints it out right furthermore we can set What's called the break point inside xcode so you see these line numbers if I tap on line 14 I add this blue marker here when the code is running if it gets to that line where I have this blue marker it's going to pause the execution and then I can go peek at different things to see what's happening so let's try that out I've set a break point on this and if I tap on this now it reaches here and it highlights this line in green because that's where the execution it's about to execute that line of code it hasn't yet because it sees I've set a break point it stops there and then at this point I can peek at diffe rent things I can examine different variables or components or whatever the case may be furthermore once the execution has paused on one of my breakpoints I can start stepping through the code line by line and that is controlled by these buttons here so this button here is just continue the program execution which is basically like continue executing from this breakpoint so then it's going to run this line and keep going or this one right here which is step over which is then going to continue to the next line of code like that you see what just happened it executed this line and then it moved to the next line and it stopped again so this way you can control the flow and you can slowly diagnose what is going on now as a beginner sometimes you're going to accidentally set a breakpoint and you're not going to know how to turn it off so here's how you get a breakpoint away you can either tap on it to disable it or you can completely drag it off the line and get rid of it you can tap it of f you tap it on you drag it off furthermore if you have multiple break points let's say here and here you can go over to the Navigator there's a breakpoint navigator it'll tell you exactly where you've set break points in your project it even shows you which ones are disabled okay so I think that's a really good starter primer to debugging an xcode there's obviously a lot more that you can do once your code gets more complex but it's a little hard to demonstrate those things with this simple project again check out the beginner app series that we have here on the code with Chris YouTube channel and it will talk about all of those things what I want to show you next are some cool tips and tricks to make using xcode a lot more fun and efficient for you let's start off with the basic thing which is comments Now comments are basically little notes that you can leave yourself without affecting the code so it is just documentation or comments for yourself to understand what's going on for ex ample up here on top of the file you'll see these two forward slashes that indicates uh the start of a comment and anything after that for that entire line will not be treated as code so this is just information right this is not code that actually gets run so for example as I'm writing this code and I want to remind myself what these things are I can write two forward slashes and I can write vertical stack layout and that is just treated as documentation it's not code that will be run I can write it here image for the plant I can write down here label for whatever now this is not the best use of a comment because this is just describing what this element is anyone who is fluent in Reading Swift Code can immediately see this and that makes your comment irrelevant like they're just going to understand what this is oh I know that's an image I know that's a label I know that's a vertical stack the best use of comments is actually to describe your logic in your head so if you have multiple people working on the same project or you're going to pass off this project to someone else it's very helpful to describe why you're doing the things you are so it's literally like uh you know a note that says you know I'm doing this because of this or whatever and like watch out for this so when someone reads your code they can read these comments and get the context for why you're doing what you're doing the other cool thing you can do with comments is you can comment out lines of code for example you want to test something you don't want to print hello just put two forward slashes in front of it and when you put two forward slashes like that the it's not going to execute that line of code and you can very easily just uncomment it if you want to comment out multiple lines of code you can also use forward slash star and star forward slash and anything in between those two markers will be treated as a comment as you can see here can see here on the preview it's going to disappear okay so that's commenting and documentation the other thing I want to show you is navigating around in the editor area because that's where you're going to be spending a lot of time so this breadcrumb area at least that's what I call it I don't know if that's the official name but you can see it's sort of like a breadcrumb where there's your root node folder there's your file and this is within the current file so if this file gets really long and there's a lot of code you can tap on something to jump right to that section now that you know how to use comments you can actually also put different sections yourself using comments for example this is this is the format you would use you type mark followed by colon and a line and you can say this is uh for previews you can see this is bolded because this is a special syntax right here and you can also see a line going across which gives you some visual separation and when you tap on this now you can see that that note is right there and there' s a line here so that helps you sort of uh section your file and group group your long code file into more legible chunks now the other thing is that when you start adding views you're going to have more files and sometimes you'll be working in this area then you're going to jump to another file and work in this area and then you just want to go back so instead of tapping on this file and going back here you can very easily use the back and forward arrows they work just like a web browser back and forward so this is very handy there are even shortcut keys to do this as well so you can find them in here and navigate go forward and backward this is your your keys right here another thing is that sometimes and you saw me use this earlier sometimes when let's say your code gets really long and you want to collapse this element because all of this code right here is inside this v-stack so you can collapse it and there's also shortcut keys for this this one I usually use right here code fold ing fold and unfold this I usually just use shortcut keys so for me it's command option and then left or right and that will collapse it so you can do that now I'm going to talk about searching through your project first of all if you press command F you're going to bring up this little search menu here and you're going to be able to look for something inside this current file right there but if you want to search throughout your entire project you can also do that press command shift and F and that you're going to be looking through your entire project okay it's going to tell you all the lines here and this is useful in some cases as well tapping on any of these lines will bring you to exactly that file in that section all right now I want to talk about bringing up documentation because that is oftentimes very helpful when you're starting to learn so you can either place your cursor on the component and then you can come here into the quick help right here and you can look at the quic k help documentation here if that's not enough you can also open developer documentation and open that up right here however there's an easier way if you hold down option and you see that when I hover over image my cursor turns into a question mark and I tap on that it's going to bring that up right there so hold down option or alt it may be on your keyboard and it turns your cursor into question mark so that's really helpful so I hope that was helpful if you ever need a reminder simply use the timestamps and chapters below the video and if you want to keep growing your app development skills I recommend that you try our beginner app challenge next it's going to help grow your app skills and give you more practice inside xcode I'll see you there