Crea una aplicación IOS con Swift: 6 pasos

Crea una aplicación IOS con Swift: 6 pasos

Tabla de contenido:

Anonim

Piénsalo. Después de completar este tutorial, puedes decirles a tus amigos que creaste una aplicación. Sólo digo.

En este tutorial, lo guiaré en el proceso de creación de una aplicación iOS. En el camino, me aseguraré de enseñarle acerca de la teoría y los métodos detrás de algunos de los conceptos involucrados en el desarrollo de aplicaciones que realizamos, en lugar de simplemente decirle que haga algo y esperar que lo comprenda. Primero vamos a empezar con algunos antecedentes:

Swift es el último y mejor lenguaje de programación de Apple. En 1985, cuando Steve Jobs fundó la computadora NeXT después de haber sido expulsado de Apple (según se dice), comenzó a desarrollar algunos marcos para sus computadoras en un lenguaje llamado Objective-C. Objective-C fue creado a principios de la década de 1980 por Brad Cox y Tom Love, pero luego fue licenciado a NeXT. Estos marcos finalmente se transformaron en un subconjunto de Objective-C llamado Cocoa. Cocoa se usó durante mucho tiempo en el desarrollo de aplicaciones Macintosh, pero cuando Apple abrió iOS para aplicaciones de terceros no basadas en la web con iOS 2.0, los desarrolladores usaron Objective-C y Cocoa Touch, una versión orientada al tacto de Cocoa para crear nativos aplicaciones de iOS

Objective-C ha estado en uso hasta iOS 8. Con el lanzamiento de iOS 8, Apple también lanzó su nuevo Swift como probablemente sepas. Sin embargo, Objective-C todavía puede usarse para desarrollar aplicaciones iOS por el momento. De hecho, aún uso principalmente Objective-C, ya que muchas bibliotecas están escritas en él y Objective-C es compatible con dispositivos más antiguos. Swift presenta algunas funciones y funcionalidades nuevas muy interesantes, pero para los fines de este tutorial vamos a tomar una muy inmersión superficial en él. Empecemos.

Suministros:

Paso 1: Descarga Xcode

Xcode es el nombre de Entorno de desarrollo integrado (IDE) de Apple. Xcode puede usarse para desarrollar aplicaciones iOS y Macintosh. Apple proporciona este software de forma gratuita, pero un desarrollador debe pagar $ 100 por año para probar sus aplicaciones en dispositivos físicos, no simuladores, y publicar aplicaciones en la App Store. Además, Apple toma alrededor de un 30% de descuento en todas las ventas de aplicaciones pagadas. Recomiendo leer un poco sobre Xcode antes de descargarlo: Xcode Link

La mejor manera de obtener Xcode es descargarlo desde la tienda de aplicaciones Mac. Aquí hay un enlace. Desafortunadamente, Xcode es un programa bastante grande, ¡así que es mejor que estés preparado para esperar un poco! Puede leer el tutorial para asegurarse de que comprende todo mientras se descarga.

Paso 2: ¡Comencemos!

Haga clic en el icono de Xcode. Aparecerá una ventana, como se muestra en la primera imagen. Seleccione "Crear un nuevo proyecto de Xcode"

Asegúrese de que la aplicación de vista única esté seleccionada en iOS y haga clic en siguiente. (Imagen 2)

Para Nombre del producto ingrese "Aplicación Swift para iPhone" (Imagen 3)

Para Nombre de la Organización simplemente escriba su nombre. No te preocupes por el identificador de paquete. Eso es para enviar o distribuir su aplicación, lo cual no nos preocupará. (Imagen 3)

Desde el menú desplegable de idioma, seleccione "Swift". Como puede ver, Objective-C sigue siendo una opción. (Imagen 3)

Debajo de los dispositivos desplegables seleccione iPhone. (Imagen 4)

Haga clic en Siguiente y elija una ubicación para guardar la carpeta del proyecto. (Imagen 5)

Al hacer todo esto, debe aparecer la pantalla que se muestra en la imagen 6.

En la barra de herramientas superior, en el lado izquierdo, debería ver las palabras "Aplicación Swift para iPhone". Junto a él, debería haber un poco más de texto que diga simplemente "Dispositivo iOS" o un dispositivo real como iPhone 6, iPhone 5, etc. Haga clic en este menú desplegable y seleccione iPhone 6. La selección "Dispositivo iOS" no funcionará para usted (Así es como subes tu aplicación a un dispositivo real para la prueba), pero los simuladores lo harán.

Haga clic en el botón de reproducción en la esquina superior izquierda. Si todo va bien, el simulador de iOS debería aparecer y mostrar ………….. una pantalla en blanco. Con la barra de estado. Tipo de antitáctico. (Imagen 7) Pero no te preocupes, llegaremos allí. Felicidades ¡Has creado tu primera aplicación iOS!

Paso 3: Trabajar en la interfaz de usuario.

En el panel de la izquierda debería ver una lista de archivos. Selecciona el que dice Main.Storyboard. (Imagen 1)

Hace mucho tiempo atrás, crear la interfaz de usuario (UI) con solo código era la norma, pero ahora Apple ha hecho que sea muy fácil diseñar ambos y programa tu aplicación directamente desde Xcode. Los archivos del guión gráfico comprenden la interfaz de usuario de su aplicación. Usted agrega elementos de la interfaz de usuario en cosas llamadas UIViews que administran estos elementos de la interfaz de usuario. A continuación, puede conectar elementos de la interfaz de usuario al código Swift real para que sean interactivos. Si bien la mayoría de los desarrolladores de aplicaciones se preocupan por las características de la aplicación antes de diseñar una IU que funcione, por el bien de aprender, lo haremos al revés. Primero vamos a configurar la interfaz de usuario.

En la esquina inferior derecha de la pantalla debería ver un cuadro de texto. Por encima de esto habrá un montón de elementos de la interfaz de usuario llamados objetos. Introduzca la consulta de búsqueda "etiqueta", y pulse Intro. Debería ver el objeto UILabel emergente. UILabels se utilizan para mostrar texto. (Imagen 2)

Arrastre la etiqueta desde el cuadro de búsqueda hasta la esquina superior izquierda del cuadro blanco que se muestra en la pantalla. (Imagen 3)

Tire del límite derecho de la etiqueta utilizando los pequeños puntos blancos que rodean la etiqueta en el lado derecho de la pantalla. (Imagen 4)

Ahora busca "Botón" de la misma manera que lo etiquetaste. Arrastre el primer resultado que dice "Botón" justo debajo de la etiqueta. No hay necesidad de estirar los límites del botón. (Imágenes 5 + 6)

Por último, para este paso, mira la imagen 7. Mira dónde está la nota y haz clic en ella. Si no puede verlo, lea esto: en la barra de herramientas superior, cerca de la esquina derecha, debería ver algo que se parece a las líneas de texto seleccionadas. Junto a él hay un botón con dos círculos superpuestos. Haga clic en los círculos superpuestos.

Al hacer esto, aparecerá otra ventana al lado del guión gráfico. Al hacer clic en ese botón, aparece el editor asistente. El editor asistente se usa para abrir dos archivos a la vez, y si es útil, especialmente al conectar elementos de la interfaz de usuario al código. Su editor asistente tendrá un fondo blanco, pero cambié el mío a un esquema de color más fresco solo por el gusto de hacerlo.

El archivo abierto en el editor asistente se llama controlador de vista. Los controladores de vista son archivos que, bueno, controlan las vistas en su aplicación. Cada vista es una ventana separada en la aplicación. Por ejemplo, en la aplicación Mensajes, la pantalla inicial con todos sus chats es una vista, luego, cuando hace clic en un nombre, lo lleva a otra vista donde se muestran todos los mensajes con esa persona.

Paso 4: ¡Conéctalo!

Haga clic con el botón izquierdo del mouse y arrastre o controle el clic y arrastre en la etiqueta a la ubicación que se muestra en la imagen 1. Asegúrese de que la línea azul esté en el lugar correcto antes de soltar. ¿Lo es? Si es así, entonces déjalo ir.

Ahora debería aparecer un cuadro de diálogo. Escriba "etiqueta" donde dice nombre, y haga clic en conectar. (Imagen 2)

Lo que hiciste aquí fue crear un IBOutlet. Esto le dice al compilador que desea poder acceder a este elemento de la interfaz de usuario, y lo hará referencia como "etiqueta". Luego, utiliza el término "etiqueta" para referirse a él más adelante cuando esté escribiendo el programa.

Haga la misma rutina de hacer clic y arrastrar con el botón, excepto que esta vez observe la posición diferente para arrastrarlo como se muestra en la imagen 3. La posición no lo hace De Verdad importa mucho, pero se ve mejor si lo haces de esta manera. Suelte y aparecerá otro cuadro de diálogo.

Antes de agregar un nombre, en la lista desplegable Conexión, seleccione la acción. Mientras que los puntos de venta le permiten acceder al elemento de la interfaz de usuario (cambiar su color de texto, texto, fondo, etc.), las acciones son la forma en que interactúa con elementos interactivos como los botones en el código. Esencialmente, proporcionan un puente interactivo desde la interfaz de usuario al programa. Dentro de las acciones puedes decirle al compilador que realmente quieres hacer algo. Por ejemplo, cuando se toca un botón, puede indicar al compilador que cambie el color de fondo a azul, pero cuando se toca un botón diferente, cámbielo a rojo. Para el nombre ingrese buttonPulse, y haga clic en conectar. (Imágenes 4 + 5)

Observe cómo escribí en mayúscula la primera letra de la cadena buttonPress, y la segunda palabra está en mayúscula. Esto se llama camel case.La funda Camel se usa porque el espacio en blanco (el carácter del espacio) no está permitido en muchos aspectos de la programación. Camel Case es una forma de diferenciar fácilmente entre varias palabras cuando no puedes usar espacios. La primera letra siempre no está en mayúscula, y las palabras subsiguientes están en mayúscula. Por ejemplo, thisIsCamelCase. No confundas esto con las clases. Las clases siempre Escriba con mayúscula la primera letra y cualquier letra subsiguiente. Por ejemplo, ViewController es un nombre de clase, al igual que UILabel e IBOutlet.

De acuerdo. Sigamos avanzando. Al hacer clic en conectar debe insertar el siguiente código en su programa:

@IBAction func buttonPress (remitente: AnyObject) {

}

Paso 5: ¡Comienza la codificación!

Dentro de esas llaves es donde pondrás tu código. Cada vez que se hace clic en el botón, se ejecuta el código dentro de esas llaves.

Presione la tecla de retorno unas cuantas veces después de la primera llave en la acción de IBA para darle algo de espacio. Luego, escribe o copia y pega el siguiente código:

self.label.text = "¡Swift es increíble!"

Si lo escribiste, es posible que hayas notado que, a medida que avanzabas, apareció una ventana debajo del texto con algunas sugerencias. Esto se llama autocompletar y ahorra mucho tiempo en la programación. Presione el cuadrado en la parte superior izquierda junto al botón de reproducción para detener la compilación actual de la aplicación (la que está en blanco) que teníamos en ejecución. Luego, pulsa play para reconstruir y ejecutar tu nueva aplicación. Una vez que aparezca el simulador de iOS y se cargue, intente tocar el botón. El texto debe cambiar de "etiqueta" aburrida a "¡Swift es impresionante!". ¡Ahí tienes! Ahora repasemos lo que realmente está haciendo el código.

Las cosas llamadas objetos son la base de la mayoría de los lenguajes de programación informática. Por lo tanto, estos lenguajes se denominan lenguajes de programación orientados a objetos. C #, C ++. Swift, Objective-C y Python son lenguajes orientados a objetos, junto con cientos de otros. Los objetos tienen cosas llamadas propiedades. Una propiedad es esencialmente una variable que almacena un poco de información. Por ejemplo, la propiedad de texto de su etiqueta almacena algo de texto. El objeto de etiqueta tiene muchas otras propiedades, como backgroundColor y frame. Puedes ver algunos de ellos escribiendo self.label. y luego usar las teclas de flecha para desplazarse por la lista de autocompletar. Se accede a las propiedades usando notación de puntos. El objeto self contiene la etiqueta de propiedad, que contiene muchas otras sub-propiedades, que a su vez tienen algunas sub-sub-propiedades y así sucesivamente. Por ejemplo, la propiedad de marco del objeto de etiqueta controla el tamaño de la etiqueta. Puede obtener o establecer el alto de la etiqueta escribiendo self.label.frame.size.height. Obviamente es así que tan tan tan Mucho más complejo que esto, pero eso es un resumen básico.

Cuando escribes: self.label.text = "Swift is Awesome!" está actualizando la propiedad de texto a una cadena. La secuencia "" es una abreviatura para hacer un objeto de cadena, que luego establece como la propiedad de texto de su etiqueta. Puedes poner cualquier texto que quieras dentro de las comillas.

Otra cosa importante en el archivo del controlador de vista es esto:

anular func viewDidLoad () {

super.viewDidLoad ()

// Realice cualquier configuración adicional después de cargar la vista, normalmente desde una plumilla.

}

Dentro de estas llaves puede agregar código que se ejecuta tan pronto como se cargue la vista, por lo tanto viewDidLoad. Bueno, creo que es suficiente por ahora.

Paso 6: ¡Lo has hecho!

Ahí tienes. Tu primera aplicación iOS. ¡Ahora adelante y presume de ello!

Desde aquí, te animo a que juegues en Xcode y sientas el lugar. Intente actualizar el texto de la etiqueta en viewDidLoad y vea qué sucede. Vea si puede averiguar cómo cambiar el color del texto mediante programación.

¡Gracias por leer! Realmente espero que hayas disfrutado este instructivo y hayas aprendido algo en el proceso. Por favor, por favor, por favor y comentar para mostrar su apoyo. Si tiene alguna pregunta, publíquela en los comentarios y haré todo lo posible para responderla. Para ver algunos de los proyectos en los que he estado trabajando, puede visitar Mi sitio web. Ah, y por cierto, sólo tengo 15 años. ¿Cuál es tu excusa?

A pesar de que este tutorial estaba en Swift, te sugiero que aprendas primero Objective-C si quieres entrar en programación. De hecho, debe conocer Objective-C si va a realizar el desarrollo de iOS. Swift sigue siendo un lenguaje nuevo, por lo que la mayoría de los repositorios agradables en GitHub y otros lugares no están escritos en Swift. Swift también solo apunta a iOS 8, lo que excluye a una parte significativa de los dispositivos iOS de descargar o ejecutar su aplicación. Aunque en realidad programamos algunas cosas, ni siquiera rozamos la superficie del desarrollo de la aplicación iOS. Si bien no es necesariamente eso Complicado hay tantas cosas Muchas y muchas cosas.

Para más información, Youtube tiene algunos programadores increíblemente talentosos que publican excelentes tutoriales de forma gratuita, por lo que puede que valga la pena echar un vistazo a algunos de ellos. Otro gran recurso es www.raywenderlich.com, que también tiene algunos tutoriales increíbles disponibles para principiantes y programadores avanzados.