Inicio Programación Crear la aplicación iOS con Swift

Crear la aplicación iOS con Swift

¿Estás listo para construir tu primera aplicación iOS con Swift? Este es el primer proyecto para crear una aplicación iOS con Swift de mi curso diseñado para principiantes, que le enseñará cómo desarrollar aplicaciones iOS en Swift sin tener conocimientos básicos de programación. Para tener una visión general del curso y descubrir el índice de temas tratados, le recomiendo que lea la introducción en el siguiente enlace.

En este primer proyecto para crear aplicaciones para iOS con Swift, haremos una aplicación que muestre una lista de imágenes. Seleccionando cada una de ellas te permitirá verla a pantalla completa. Algo así como lo hace la aplicación para iPhone Photos. Con este proyecto, también voy a empezar a explicar algunos fundamentos de Swift y el entorno de desarrollo del iOS. Este será el resultado final.

¿Estás listo? Entonces no perdamos más tiempo y comencemos de inmediato con el primer proyecto para crear la aplicación iOS con Swift.

Instalación de Xcode

Probablemente sea su primer proyecto para programar aplicaciones con Swift, así que hay un par de configuraciones que necesita hacer antes de ponerse en marcha. La primera cosa que necesitas es Xcode. Si no estás familiarizado con esta herramienta, debes saber que Xcode es un entorno de desarrollo hecho por Apple. Si no sabes lo que es un entorno de desarrollo (o IDE), necesitas pensar en él como un programa que contiene un conjunto de herramientas que te permiten desarrollar software para una plataforma específica.

En el caso de Xcode, esta herramienta ofrece un conjunto de herramientas que le permiten construir aplicaciones para iOS, macOS, tvOS y watchOS (todos los sistemas operativos de Apple). Xcode es un programa disponible sólo para Mac y puedes descargarlo directamente de la Mac App Store. Es completamente gratis. Ya que es un programa muy carnoso, tomará algún tiempo completar la descarga e instalación.

Cuando todo esté listo, puedes proceder con la guía.

Configuración del proyecto

Después de instalar Xcode, estás listo para hacer tu primera aplicación iOS. Lance Xcode y seleccione el Crear un nuevo Proyecto Xcode elemento. Se le mostrarán una serie de plantillas. Seleccione Single View App y luego haga clic en Next.

En la nueva página que se abre es necesario introducir alguna información sobre la aplicación. En el Nombre del producto: puede escribir Proyecto 1. Normalmente el nombre de su aplicación se introduce en este campo. Siempre puede cambiar esta entrada incluso cuando el proyecto está en marcha. En Nombre de la organización: introduzca su nombre. Identificador de la organización: es un identificador único para distinguir su aplicación. No hay dos aplicaciones que puedan tener el mismo identificador.

Para el propósito de este curso, puede escribir su nombre en este campo también. Sin embargo, tenga en cuenta que cuando publique su primera solicitud, tendrá que introducir un nombre único. Normalmente se escribe el dominio del sitio web de apoyo de la aplicación en orden inverso. En mi caso he introducido com.Digital Desarrollos. Asegúrate de que en el Idioma: campo, Swift está seleccionado. Los últimos tres campos pueden dejarse sin marcar. Por el momento no los usaremos. En un futuro proyecto explicaré para qué sirven.

Cuando haga clic en Next se le preguntará dónde guardar el nuevo proyecto. Para su conveniencia, le recomiendo que cree una carpeta donde poner este y todos los futuros proyectos del curso.

¡Bien! Está listo para iniciar su primera aplicación. Sí, tienes razón. Aún no has escrito una línea de código, pero el proyecto que acabas de crear ya está en marcha. En la parte superior izquierda, junto a las palabras Proyecto 1, selecciona en qué dispositivo quieres ejecutar la aplicación. Puedes seleccionar un iPhone o iPad simulado por Xcode, o seleccionar tu propio dispositivo (que debes conectar a tu Mac a través del cable Lightning). Recomiendo seleccionar un dispositivo simulado (por ejemplo, iPhone 8). Cuando todo esté listo, haga clic en el botón Run (el botón en forma de triángulo en la esquina superior izquierda). El simulador de iPhone se iniciará. Lo que ven ahora mismo es una pantalla en blanco. Todo es normal. Además, aún no has escrito ningún código para decirle a la aplicación qué hacer.

¿Pero por qué ya es posible iniciar el proyecto? Cada nuevo proyecto creado a través de Xcode ya contiene código de apoyo escrito por Apple, que es necesario para iniciar cualquier aplicación. Si no creas tus aplicaciones con Xcode, todo este código tendrás que escribirlo tú mismo a mano. Mucho trabajo, te lo puedo asegurar. Por eso es importante usar un IDE para desarrollar aplicaciones. De esta manera, el desarrollador puede concentrarse en lo que es realmente importante para el funcionamiento de su aplicación. Si lo tienes todo bien configurado, podemos proceder a escribir nuestra primera aplicación iOS en Swift.

SUGERENCIA: para iniciar su aplicación en el simulador o en su dispositivo iOS, puede utilizar la combinación de teclas conveniente cmd + R.

Como se mencionó anteriormente, en esta aplicación que vamos a desarrollar, se le dará la oportunidad de ver fotos. Por esta razón, es necesario importar algunas imágenes dentro del proyecto. Para ello, puede encontrar todos los recursos de estos y futuros proyectos en este enlace. Descargue el paquete completo y luego extraiga el archivo recién descargado. Dentro encontrará una carpeta llamada Proyecto 1 – Recursos, que contiene una carpeta adicional llamada Recursos con un número de imágenes. Arrastre la carpeta Recursos dentro de Xcode y suéltela bajo el archivo Info.plist en la barra lateral derecha.

Se abrirá una ventana preguntando qué quieres hacer con los archivos que estás importando. Asegúrese de que los campos Copiar elementos si es necesario y Crear grupos estén marcados. Haga clic en Finalizar para continuar. Asegurarse de no marcar Crear referencias de carpeta, de lo contrario su proyecto no funcionará.

¡Bien! En este punto estamos listos para tener en nuestras manos el código y empezar a aprender a desarrollar aplicaciones para iOS con Swift. Hasta ahora, has creado tu primer proyecto en Xcode e importado activos al entorno de desarrollo. También has lanzado tu primera aplicación tanto en el simulador como en tu dispositivo iOS.

¿Listo? Continuemos.

Acceder a los activos importados en el proyecto: cómo usar el FileManager

Las imágenes que has subido dentro del proyecto serán incluidas en la aplicación por Xcode cuando se suba a la App Store. En este momento, para tu comodidad, Xcode te muestra todos los recursos externos como imágenes, vídeos u otros tipos de archivos ordenados por carpetas. Detrás de las escenas, estos contenidos se encuentran en carpetas especiales llamadas Paquetes. Para acceder a un recurso específico, necesitamos preguntar al sistema operativo dónde está almacenado. De esta manera podemos utilizarlo dentro de nuestra aplicación.

Antes de que podamos empezar a mostrar las imágenes que hemos importado en el proyecto, tenemos que aprender a acceder a los recursos externos que decidamos importar a la aplicación. Por esta razón, ahora les mostraré cómo hacerlo. El propósito de esta parte de la guía es mostrar una lista de nombres. Cada elemento de la lista corresponderá al nombre del archivo que ha importado anteriormente. Este primer paso es útil para empezar a familiarizarse con el entorno de desarrollo.

El primer paso es abrir el archivo llamado ViewController.swift que se encuentra en la barra lateral izquierda. Para abrirlo, sólo tienes que hacer clic una vez. Como puedes ver, ya hay código dentro de este archivo. No es mucho, pero es suficiente para mostrarte la pantalla en blanco que previamente mostraste cuando iniciaste la aplicación. Deberías ver algo similar a esto:

De este pedazo de código me gustaría que llamarais la atención sobre algunos aspectos importantes:

  • El primer comando dentro del archivo es importar UIKit. Es fundamental porque permite importar (para su uso en el proyecto) todas las herramientas básicas relacionadas con la interfaz gráfica hechas por Apple (UIKit es una librería o framework).
  • Continuando con la lectura del archivo se encuentra la clase de línea ViewController: UIViewController. Queriendo simplificar el concepto, en esta línea de código está creando una nueva pantalla llamada ViewController que tiene como base un UIViewController. Un UIViewController es el principal elemento sugerido por Apple para crear una nueva pantalla. A menudo verás elementos que empiezan con UI. Todos ellos forman parte de UIKit que, como se mencionó en el punto anterior, es una colección (la jerga técnica es biblioteca) de elementos de interfaz gráfica.
  • Procediendo a la lectura del código puedes encontrarte con la función de anulación viewDidLoad(). Esta línea se utiliza para definir una función (o método), que es un bloque de código que se ejecuta dentro de su pantalla. No todas las funciones comienzan con override. Esta palabra clave se utiliza para cambiar el comportamiento de una función que ya ha sido definida por otra persona. En este caso vamos a modificar el comportamiento de la función viewDidLoad(), que es una función definida por Apple. Se llama automáticamente cuando la pantalla se ha cargado y está lista para ser mostrada.
  • Desplazándose hacia abajo de la página se puede ver que se redefine otra función: anular la función didReceiveMemoryWarning(). Este método es llamado por el sistema operativo cuando el smartphone tiene pocos recursos. En esta función, Apple pide al desarrollador que libere los recursos que ya no son necesarios de la RAM, para aligerar la ejecución de la aplicación.
  • Se puede observar como cada función propone corchetes rizados { }. Dentro de ellos hay que escribir el código relacionado con una determinada función. El propósito principal es delimitar una función.
  • Finalmente, me gustaría señalar dos cosas más. La función viewDidLoad() contiene la línea de código super.viewDidLoad() y un comentario. Los comentarios son fácilmente reconocibles porque están coloreados en verde y comienzan con //. ¿Pero qué significa super.viewDidLoad()? La palabra clave super se utiliza en los métodos que se redefinen mediante override para decirle al sistema operativo que antes de ejecutar el código que escribimos, debe ejecutarse el código que se definió originalmente en la función.

Aún no has escrito una línea de código, pero ya he tenido que explicarte algunas cosas. Pero no te preocupes, no son conceptos complejos y pronto se te harán familiares también, ya que te los encontrarás a menudo durante el desarrollo de la aplicación.

De acuerdo, ¡comencemos a escribir el código! FileManager. Si recuerdas correctamente, la función viewDidLoad es lo primero que se ejecuta cuando se carga la vista. Así que vamos a escribir nuestro código aquí. De esta manera nos aseguraremos de que nuestro bloque de código se ejecute mientras usamos la aplicación. Justo después de la línea super.viewDidLoad() escribe lo siguiente:

Veamos juntos lo que hacen estas líneas de código que acabamos de escribir:

  • La palabra let es usada en Swift para definir una constante. En nuestro caso, creamos una constante llamada gestor de archivos y le asignamos el valor devuelto por FileManager.default, que no es más que un tipo de datos que nos funciona con el sistema de archivos. Lo necesitaremos para acceder a los datos que hemos cargado antes.
  • En la siguiente línea declaramos una segunda constante llamada path. Se le ha asignado la ruta donde se encuentran nuestros datos.
  • La línea de código let elements = try! fm.contentsOfDirectory(atPath: path) declara una tercera constante llamada elementos a la que hemos asignado el nombre de los archivos que están contenidos en la carpeta situada en la ruta indicada en la constante path. Como podéis ver en estas pocas líneas de código, Apple se utiliza para dar nombres auto-explicativos a sus funciones. Casi parece un texto escrito en inglés. El contenido de los elementos constantes se llama matriz. Una matriz es un conjunto de datos (o colección). En nuestro caso tenemos un conjunto de nombres de todos los archivos que hemos cargado en nuestra aplicación y más.
  • Si sigues leyendo puedes leer la línea de elemento en elementos {. Esta línea de código declara un bucle. Los bucles son bloques de código que se ejecutan varias veces. En nuestro caso, el bucle se ejecuta por cada elemento presente en el sistema de archivos de nuestra aplicación. Fíjate que el bucle se abre con un paréntesis rizado y se cierra con otro paréntesis rizado. Todo lo que está entre estos paréntesis es ejecutado por el bucle. Pero, ¿qué hace en detalle la línea de código ****para elemento en elementos*? Básicamente podemos traducir este trozo de código como, «tratar los elementos como un conjunto de cadenas, luego extraer, secuencialmente, cada una de estas cadenas, asignarla al elemento y ejecutar el bloque de código*». Este proceso se ejecuta n veces, siendo n el número de elementos que están presentes dentro de los elementos.
  • Si element.hasPrefix(«imagen-«) { esta es la primera línea de código del bucle. Dentro de la variable del elemento está el primer nombre de archivo contenido en el sistema de archivos de la aplicación. Lo que queremos hacer es mostrar una lista de nombres correspondientes a las imágenes que hemos cargado. Como puede haber otros tipos de archivos en el sistema de archivos también, necesitamos filtrar los elementos contenidos en la constante del elemento. Seguramente habrás notado que las imágenes que he cargado en la aplicación comienzan todas de la misma manera: imágenes-. Esto no es un accidente. Gracias a este recurso podemos filtrar fácilmente los archivos. El método hasPrefix se encarga de comprobar si la cadena contenida en el elemento comienza con una determinada cadena que tenemos que pasar. En nuestro caso pasamos al método la imagen de la cadena… Si la cadena contenida en el elemento comienza con image -, entonces el método devuelve true. En caso contrario, el resultado será falso. La palabra if al principio de la línea de código se llama condicional: si lo que se escribe después de la palabra if es verdadero, entonces se ejecuta el siguiente bloque de código, de lo contrario se salta todo el bloque. De nuevo, el bloque de código relacionado con el condicional si se encierra entre corchetes.
  • Finalmente, //esta es una imagen para subir es un comentario. Actualmente no hemos escrito ningún código dentro del bloque del condicional. Lo haremos en un rato.

Así que lo primero que hacemos es ir a buscar el nombre de las imágenes subidas y guardarlas en una constante. Para hacer esto necesitamos el FileManager y la ruta dentro de la cual se encuentran los archivos. Luego pasamos por todos los nombres de los archivos y usamos un bloque condicional para comprobar si el nombre del archivo comienza con la cadena imagen-. Si esta condición es verdadera, entonces se puede ejecutar otro bloque de código, de lo contrario procedemos con el bucle.

Más en detalle:

  • Para definir una constante utilizamos la palabra let. Las constantes son piezas de código que sabemos que nunca cambiarán con el tiempo.
  • Los textos en Swift se representan usando el tipo de datos String.
  • Las colecciones se llaman arrays y a menudo contienen sólo un tipo de datos. Para representar una matriz de cadenas, se utiliza el formato [String]. Una constante que ha sido declarada de esta manera sólo puede contener una matriz que tenga cadenas como elementos dentro de ella. Si intentas insertar un número en una matriz que ha sido declarada como cadena, obtienes un mensaje de error inmediatamente.
  • Para poder hacer un bucle sobre un conjunto de datos (array) puedes usar para unElement en setOfElements. Swift se encargará de poner cada elemento de setOfElements en la variable unElement, para que puedas usar los datos dentro del bloque de bucle.

Si has estado prestando atención, habrás notado que hay una pequeña cosa más que no he explicado. Es un concepto un poco complicado, al menos al principio. Así que intentaré hacerlo lo más simple posible. Habrá tiempo para repasar esto con más detalle. Bundle.main.resourcePath!. Esto no fue un error. Si lo eliminas, el código que escribiste no funcionará. Para Swift, los signos de exclamación son importantes. Este lenguaje de programación tiene tres formas diferentes de trabajar con los datos:

  • Una variable o constante contiene un dato. Por ejemplo, data:String es una variable que contiene un dato de tipo string.
  • Una variable o constante puede contener un dato, pero no estamos seguros. En este caso estamos hablando de un tipo opcional y puede ser representado como un dato: String?. No se puede usar este dato directamente pero hay que preguntarle a Swift primero si la variable contiene un dato o no.
  • Una variable o constante puede contener un dato, pero estamos 100% seguros de que el dato existe. En este caso, para acceder a los datos sin preguntar a Swift si existe, podemos acceder implícitamente a los datos usando el signo de exclamación: datos: ¡String! Soy muy consciente de que lo que he explicado puede haberle confundido un poco. Yo también lo estaba, pero al usar variables y constantes opcionales a menudo, pronto entenderá cómo manejarlas mejor. Aplicando este concepto a nuestro caso, Bundle.main.resourcePath puede o no devolver un camino (¿entonces los datos de retorno son String?). Pero sabemos que esta ruta existe al 100%, así que accedemos a ella directamente usando el signo de exclamación.

ADVERTENCIA: el signo de exclamación es llamado por muchos el operador crash. Esto es porque no es muy seguro usarlo. De hecho, si usamos un signo de exclamación en una variable que no contiene un elemento de datos (cuando una constante o variable no contiene un elemento de datos, entonces es nula. Si se usa nil para definir una variable nula), la aplicación se bloqueará. Más tarde explicaré cómo manejar mejor los opcionales.

El siguiente paso es crear un nuevo array e insertar en él sólo los nombres de los archivos que empiezan por imagen-. De esta manera podemos referirnos directamente a nuestras imágenes cuando las necesitemos. Las tres constantes que creamos (file manager, path y elements) viven dentro del método viewDidLoad() y serán destruidas tan pronto como el método termine. Lo que queremos es vincular nuestros datos al ViewController, de modo que exista mientras la pantalla vinculada al ViewController sea visible. Para ello, en Swift podemos utilizar propiedades (o propiedades). Podemos declarar tantas propiedades como queramos y leer y escribir en ellas en cualquier momento, al menos mientras exista la pantalla.

Para crear una propiedad, hay que declararla en el exterior de cada método. Hasta ahora sólo hemos declarado constantes. Pero la matriz que necesitamos debe cambiar con el tiempo, así que tendremos que definirla como una variable. También tendremos que decirle a Swift exactamente qué tipo de datos queremos poner dentro de la variable. Necesitamos una matriz de cadenas en la que insertaremos el nombre de las imágenes que hemos subido. Añade esta línea de código antes del método viewDidLoad():

var images = [String]()

La palabra clave var se utiliza para definir una variable. Ahora es interesante entender lo que hace [String](). [String] significa que la variable debe ser de tipo string array. Los corchetes redondos significan que ahora crea una matriz de cadenas vacía.

La variable imágenes será creada tan pronto como la pantalla ViewController aparezca en la pantalla y existirá mientras esa pantalla exista. Por ahora la matriz está vacía, pero pronto la llenaremos. Reemplaza el comentario //esta es una imagen para cargar con:

images.append(element)

El método append puede ser usado en todas las variables de tipo array y se usa para añadir un elemento a un array.

Si lanza su aplicación ahora, notará que no hace nada más que lo que hacía antes (seguirá mostrando una pantalla en blanco). Esto se debe a que aún no hemos añadido ningún elemento GUI. Pero si quieres verificar que el array se llena correctamente, agrega este pedazo de código antes de cerrar el método viewDidLoad(): imágenes en la consola de depuración de Xcode. Ahora, cuando vayas a ejecutar la aplicación, la ventana inferior de Xcode debería decir lo siguiente:

¿Pudiste imprimir el contenido de la matriz en la consola de Xcode? ¡Perfecto! Ahora podemos empezar a diseñar nuestro GUI. Pero creo que para esta primera parte de la guía, esto está bien. He explicado muchos conceptos y no quiero sobrecargarte. Continuaremos con este proyecto en la segunda parte de la guía. Por ahora, reflexionen sobre lo que han hecho en esta primera parte e intenten poner en práctica lo que han aprendido.

María Gutierrez Pérezhttps://digitaldesarrollos.com/
María es una veterana periodista de tecnología de negocios. Su trabajo ha aparecido en multitud de periódicos online y revistas del sector tecnológico.

Dejar respuesta

Please enter your comment!
Please enter your name here

Más Populares

Como cambiar permisos de archivos en linux

Cómo cambiar los permisos delos permisos de los directorios en Linux Para cambiar los permisos de los directorios en Linux, utilice lo siguiente chmod +rwx nombredelarchivo...

Activar wifi linux terminal

En este tutorial, vamos a aprender a conectarnos a la red Wi-Fi desde la línea de comandos en el servidor y el escritorio de...

Cómo instalar el VN ROM en el Galaxy Note 3 SM-N900 con temas de estilo S5

Esta guía te ayuda a descargar e instalar VN ROM en Galaxy Note 3 smartphone Android con procesador Exynos. Esta es una ROM personalizada...

Modificar la fecha de creación del archivo en Windows y Mac

Cuando escribimos un documento o editamos una imagen en el ordenador, la fecha de creación, así como la fecha de la última modificación, son...

Comentarios Recientes