Mi viaje de reaprendizaje de iOS Parte 1

La idea de este blog es compartir con ustedes lo que he aprendido con el mayor detalle posible y solidificar/responder cualquier pregunta que haya tenido cuando estaba aprendiendo de los tutoriales de "cero a héroe".

En esta publicación, comenzaré con algo EXTREMADAMENTE simple que tal vez le tome a un desarrollador experimentado 5 minutos o menos crear. Pero bueno, todos comenzamos desde algún lugar, ¿por qué no aquí?

Aquí hay una vista previa de lo que haremos aquí:

Al igual que con cualquier tradición de lenguaje de programación, crearemos una aplicación de "hola mundo" que cuando un usuario toque el botón, el texto anterior mostrará el texto de "hola mundo" en diferentes idiomas al azar.

El objetivo de esta aplicación es comprender los conceptos básicos de:

1. UILable, UIButton y UIImageView de UIKit.
2. Declaraciones de matrices y variables Swift.
3. IBOutlets e IBAcciones.

¡Entonces empecemos!

Primero, abra su Xcode y cree una nueva aplicación así:

Aquí está la parte clave: seleccione iOS tap en lugar de Multiplatform tap o, de lo contrario, no puede elegir Storyboard más tarde y debe trabajar con SwiftUI.

Ahora, en Nombre del producto, escriba "Hello World App" o cualquier otro nombre elegante que desee llamarlo. ¡Realmente depende de tu creatividad!

Ahora, ¿qué diablos es un identificador de organización?

un Identificador de organización es un nombre único para su aplicación para que otros puedan encontrar su aplicación en la App Store. Te recomiendo que escribas tu apellido y luego tu nombre aquí para simplificar las cosas para este proyecto.

Entonces, su identificador de paquete (directamente debajo del identificador de organización) se verá así:

doejohn.Hello-World-App

Algunas versiones anteriores de Xcode pueden mostrar com.doejohn.Hello-World-App. Esto se llama un nombre de dominio inverso solo para su información.

Ahora haga clic en Siguiente y guarde su proyecto en el lugar que prefiera y haga clic en Crear y ¡vamos a la parte divertida!

Una vez completado, su Xcode debería verse así:

Así que repasemos brevemente lo que estamos viendo aquí:

• La sección naranja es el lado de su Navegador donde actualmente se muestra su Navegador de proyectos. Aquí ve que tiene su Proyecto Hello World en la parte superior con tres carpetas: Hello World , Hello WorldTest s y Hello WorldUITests . La carpeta Hello World es donde haremos toda nuestra codificación y edición. Hello WorldTest s y Hello WorldUITests se crean automáticamente para nosotros cuando dejamos la casilla de verificación Incluir pruebas cuando creamos nuestro proyecto durante la fase de creación de nombre. Repasaré las dos carpetas en otra publicación, ¡así que estad atentos!
• La Sección Verde es la parte de información general y edición de nuestra aplicación. Debajo del toque General aquí podemos ver que tenemos Nombre para mostrar (el nombre de nuestra aplicación), Identificador de paquete (lo que hemos discutido anteriormente sobre el nombre de dominio inverso), versión (al igual que los juegos, tenemos la versión 1.0, 1.1, 2.x... etc )
• La información de desarrollo de la sección morada es donde me gustaría pasar un poco más de tiempo discutiendo aquí. Vamos de arriba a abajo aquí.
• En la parte superior tenemos iOS 15.2 con iPhone y iPad marcados pero Mac Catalyst. Esto se debe a que cuando creamos nuestro proyecto, seleccionamos "iOS" y no "multiplataforma", por lo que decimos "solo queremos que nuestra aplicación se ejecute en dispositivos iOS". La parte de iOS 15.2 dice "La versión mínima de iOS para ejecutar nuestra aplicación". Puede hacer clic en él y seleccionar otra versión de iOS que le gustaría que sus usuarios usen al menos. Tenga cuidado de verificar si las funcionalidades que desea ejecutar son compatibles con la versión mínima en la que desea que se ejecuten sus usuarios. Para esta aplicación deberías estar bien. La Orientación del dispositivo dice que su aplicación solo se ejecuta en Vertical, Boca abajo, Horizontal a la izquierda o Horizontal a la derecha , como puede imaginar, algunos juegos solo permitirían a los jugadores jugar en cierta orientación. losLa barra de estado es donde puede configurar el estilo de visualización de su barra de estado. Puedes jugar con él y ver cómo te gusta que se vea tu aplicación. Para esta aplicación, simplemente mantendremos todo en la configuración predeterminada para simplificar las cosas.
• La Sección Amarilla es donde están sus inspectores. Entonces, cosas como el nombre de su aplicación, la ruta completa a su archivo, etc., se pueden encontrar en esa sección. Será más útil cuando desarrollemos nuestra aplicación con Storyboard.

Ahora quiero que hagas clic en ese botón que he resaltado con un cuadrado amarillo. Esto nos permitirá dividir la sección media de nuestro Xcode en dos lados: uno para mostrar el archivo principal y el otro para que muestre nuestro archivo ViewController.

Su pantalla puede verse así al principio, pero puede hacer clic fácilmente en cualquiera de los lados que desea cambiar para mostrar ViewController y hacer clic en ViewController en la sección Navigator, luego cambiará.

Su pantalla debería verse así cuando haya terminado. Ahora repasemos brevemente lo que significan las líneas de código que estamos viendo en ViewController:

En la parte superior, vemos la línea import UIKit que dice "hey, queremos importar este marco/biblioteca para usar en este archivo ViewController". En este caso queremos trabajar con UIKit, por lo que lo importamos aquí. ¡Importaremos más en el futuro, como Firebase de Google, o algunas bibliotecas de animación de interfaz de usuario que desee agregar!

A continuación, tenemos la clase ViewController: UIViewController{} esto dice que tenemos una clase llamada ViewController y hereda de UIViewController. La herencia en la clase significa que nosotros, la subclase (ViewController), queremos poder usar todos los métodos, propiedades y otras características de la superclase (UIViewController).

Dentro de nuestra clase ViewController, tenemos lo siguiente:

Esto se llama una función. Esta función específica dice lo que debería suceder cuando esta vista se carga inicialmente. Por ejemplo, si queremos que una estrella variable siempre sea 0 cuando se cargue esta vista, tendremos var star = 0 aquí.

Ahora quiero que mires la sección media de tu Xcode, en la barra superior debería haber un signo + así:

Haga clic en eso y deberíamos ver una lista de objetos que podemos arrastrar y soltar en nuestro Guión gráfico principal.

Como ves en Xcode tenemos todos estos objetos predefinidos listos para usar para nosotros. Entonces, arrastremos los objetos Etiqueta y Botón a nuestro Tablero principal.

Como puede ver cuando soltamos por primera vez el objeto de etiqueta en nuestro guión gráfico, podemos soltarlo donde queramos, sin importar el tamaño que queramos. Entonces, ampliemos nuestra etiqueta al ancho de las primeras líneas punteadas azules en los lados izquierdo y derecho. Esas líneas son lo que Xcode nos dice que es la "zona segura" para que existan nuestros objetos. Mientras tanto, también cambiemos el texto de Etiqueta a Hola mundo haciendo doble clic en el objeto Etiqueta.

Ahora, antes de eso, quiero que miremos la sección cuadrada amarilla en la imagen de arriba. Esto se llama Inspector de atributos, donde podemos cambiar cosas como el color del texto, la fuente, el tamaño de fuente, etc. para nuestro Objeto seleccionado. Aquí cambiaremos el Tamaño de fuente a 50 y el texto de Etiqueta a Hola mundo como vemos a continuación.

A continuación, haremos lo mismo con el Objeto Botón. Nos ahorraré algo de tiempo y te dejaré que lo hagas (definitivamente no soy flojo aquí )

Como resultado final, deberías tener algo parecido a esto. ¡Ahora estamos (algo) seguros de decir que nuestra parte de la interfaz de usuario está completa! Date una gran palmadita en la espalda

Ahora, aquí está la gran pregunta: ¿cómo sabe nuestra increíble aplicación qué hacer cuando un usuario toca el botón? ¿O qué debería hacer cuando el usuario toca el botón? ¿O qué debe hacer la App cuando detecta que nuestros usuarios están pasando por alguna crisis existencial como la del escritor?

Bueno, la última pregunta probablemente esté más allá del alcance de este tutorial, pero bueno, podemos abordar las dos primeras sin problema.

Xcode nos hizo un favor y lo hizo súper simple: Control + clic en Obecjt y arrástrelo al archivo ViewController así:

Tenga mucho cuidado de NO arrastrarlo al método viewDidLoad().

Aparecerá un cuadro de diálogo como el que vemos en la sección cuadrada amarilla, y Xcode le pedirá un nombre para esta etiqueta, llamémoslo helloWorldText . Esta convención de nomenclatura se llama Camel Casing.

¡Ahora que tenemos nuestra etiqueta conectada a nuestro código! ¡Podemos decirle programáticamente que haga nuestra oferta! ¡Muwahahaha!

Tenga en cuenta que puede ver el círculo relleno junto a la línea de código IBOutlet allí. Significa que este objeto está conectado a algo en el guión gráfico.

Ahora para el Botón haremos lo mismo pero un poco diferente; queremos que nuestro botón sea una Acción, algo con lo que podamos interactuar y no solo para mostrar. Entonces, haremos lo siguiente

Asegúrese de que, en Conexión, esté seleccionada Acción. Podemos nombrarlo HelloWorldAction aquí. En la sección Evento es donde definimos qué sucede cuando el usuario hace algo aquí. Aquí hemos seleccionado Touch Up Inside, lo que significa que el usuario toca (toca y suelta) el botón.

¡Ahora podemos decir qué debe hacer nuestra aplicación cuando el usuario la toca mediante programación! ¡Horra!

Muy bien, pasemos a las partes jugosas de nuestra aplicación. Agreguemos dos líneas de código debajo de nuestra UILabel:

var holaTextNumber = 0

var helloTextArray = ["hola mundo", "¡Hej Verden!", "¡Hola Wereld!", "¡Ciao mondo!", "¡Hei Verden!", "¡你好世界!"]

Vamos a discutir un poco acerca de lo que son estas dos variables.

helloTextArray es la matriz que queremos usar para elegir nuestro "Hola mundo" en el idioma diferente aquí. Aquí tenemos una matriz de cadenas de 6 cadenas (las cadenas son solo un tipo con "" en él). Como muchos otros idiomas, la matriz comienza con 0, no con 1. ¡Así que tenga cuidado cuando recorra Swift Arrays!

Entonces helloTextArray[0] será “hola mundo”, helloTextArray[3] es “Ciao mondo”, y helloTextArray[5] es “你好世界! ”

Aquí hay un enlace a la documentación de Swift de Apple sobre Array. Puedes leer más en profundidad al respecto aquí:

Como hemos visto anteriormente, para obtener un elemento de hellTextArray, debemos decirle qué número queremos (así que primero decimos helloTextArray[0], segundo helloTextArray[1], tercero helloTextArray[2]… etc.) pero no podemos simplemente escribir cada uno manualmente ni debemos esperar que nuestros usuarios ingresen un número por nosotros (siempre espere lo mínimo del usuario. Un principio que he aprendido). Entonces, ¿qué hacemos?

Aquí viene holaTextNumber. helloTextNumber es la variable Integer (Int) que queremos usar como marcador de posición para qué elemento de nuestra matriz queremos mostrar. Tendremos un método que genera un entero aleatorio entre 0 y 5 y usaremos helloTextNumber para guardar ese número por nosotros. Entonces podemos mostrar un elemento de nuestro helloTextArray al azar. Si está un poco confundido acerca de esta parte, no se preocupe, se aclarará en la siguiente parte.

Aquí está el código que quiero que agregues:

Repasemos lo que hace dentro de nuestro bloque de código hellowWorldAction.

Aquí hemos establecido nuestro helloTextNumber en Int.random(in:0…5). Lo que significa esta línea de código es que queremos que nuestro helloTextNumber sea un entero generado aleatoriamente de 0 a 5 inclusive (es decir, 5 incluidos).

Aquí hay algo que quiero repasar un poco más también. Hablemos de la siguiente línea.

holaTextoMundo.text = holaMatrizTexto[holaNúmeroTexto]

En Swift, esta notación de puntos sigue la regla de

Quién.Qué = Valor

que se descompone en:

“Quién necesita ser cambiado”

"punto"

"Qué necesita ser cambiado"

"igual"

“a qué debería cambiarse”.

Así que con nuestro código, estamos diciendo que:

Queremos que el texto (qué) de helloWorldText (quién) se cambie por el elemento helloTextNumber de helloTextArray.

Entonces, cuando ejecutemos esta línea de código, cambiaremos helloWorldText para mostrar cualquier elemento en helloWorldTextArray que el método Int.random() de número generado aleatoriamente generó para nuestro helloWorldTextNumber.

Ahora, cuando ejecutamos nuestro simulador (commnad + r, o el botón ▶️ en la barra superior de Xcode), cuando hacemos clic en nuestro botón, ¡nuestro texto debería cambiar cada vez que presionamos el botón!

¡Hurra! ¡Hemos terminado la parte de codificación de nuestra aplicación!

Una última cosa. Nuestro fondo es un poco feo Nos gustaría agregar algún tipo de imagen de fondo para que no se vea tan simple. Entonces, busque una imagen que realmente le guste agregar como fondo para su aplicación. Para mí, usaré la imagen de la tierra (ya que es hola mundo, ¿no?).

Ahora hagamos clic en 'Assests' en la carpeta Hello World, y debería ver algo como lo siguiente. Arrastra la imagen que has elegido y suéltala en la columna con "AccentColor" y "Appicon". Aquí es donde nuestra imagen residirá y será llamada a ser utilizada.

Ahora regresemos a 'Principal' y suelte un objeto Imagen de la biblioteca de objetos (si olvidó cómo hacerlo, desplácese hacia arriba para ver dónde hablamos sobre los objetos Etiqueta y Botón). Quiero que amplíes el objeto Imagen tanto que cubra toda la pantalla de tu teléfono. Ahora quiero que hagas clic en ese objeto Imagen y vayas a los Inspectores (el panel de la derecha), y busques esto:

En Vista de imagen, quiero que haga clic en el menú desplegable Imagen y seleccione la imagen de fondo que colocó anteriormente en Activos. Aquí es donde podemos definir qué objeto de imagen debe mostrarse sin tener que codificar nada en él. ¡Pulcro! ¡Cuanto menos código, mejor!

Ahora su pantalla podría verse así:

Espera un momento... ¿qué está pasando aquí? ¿Qué pasó con nuestra etiqueta y botón que hemos trabajado tan duro para hacer?

Lo que sucedió aquí es simplemente un problema de capa. Imagina que tenemos un plato, una manzana y una naranja. Lo que hicimos fue mostrar Apple y Orange primero, luego colocamos el plato encima de los dos, por lo tanto, solo vemos el final (la imagen de fondo), y no nuestra manzana (etiqueta) ni naranja (botón). Lo que queremos es poner nuestro plato primero, luego nuestra manzana y naranja encima.

¿Entonces cómo hacemos eso? ¿Simplemente tenemos que eliminar todo nuestro proyecto y rehacer todo?

Bueno, si quieres hacer eso para solidificar lo que has aprendido aquí, ¡entonces eres más que bienvenido a hacerlo! PERO Apple nos dio una forma mucho más simple de hacerlo.

En el lado izquierdo de la captura de pantalla anterior, vemos 'Ver escena del controlador'. Debajo tenemos 'View Controller' y debajo tenemos nuestra 'View'. Esta es la superposición de nuestra Vista actual con nuestros Objetos en ella (Etiqueta, Botón e Imagen) junto con el 'Área segura' predeterminada, las líneas de puntos azules que vemos cuando arrastramos nuestros Objetos.

Ahora simplemente arrastre el objeto de imagen desde la parte inferior a la derecha debajo de 'Área segura' de esta manera:

¡Y voilá! ¡Vemos nuestra Etiqueta y Botón! Y cuando ejecutamos esta aplicación en nuestro simulador, ¡deberíamos ver que todo funciona según lo previsto!

Espero que esto te haya ayudado a tener un buen comienzo en tu viaje de aprendizaje de iOS. Por favor, deja un comentario y aplaude si te ha resultado útil

Pero seguiré escribiendo más tutoriales en el futuro pase lo que pase muy mal si no te agrado

Paz ✌