Primeros pasos con iOS

Creación de una aplicación de vista única predeterminada

Para desarrollar una aplicación para iOS, debe comenzar con una aplicación llamada Xcode. Hay otras herramientas alternativas que puede usar, pero Xcode es la herramienta oficial de Apple. Tenga en cuenta, sin embargo, que solo se ejecuta en macOS. La última versión oficial es Xcode 8.3.3 con Xcode 9 (actualmente en versión beta) que se lanzará a finales de este año.

  1. Inicie su Mac e instale Xcode de App Store si aún no está instalado.

(Si prefiere no usar la App Store o tiene problemas, también puede descargar Xcode del sitio web de desarrolladores de Apple, pero asegúrese de seleccionar la última versión y no una versión beta. )

Icono de código X

  1. Abra Xcode. Se abrirá la siguiente ventana:

Pantalla de inicio de Xcode

La ventana le presenta las siguientes opciones:

  • Primeros pasos con un área de juegos: Esto se introdujo con el lenguaje Swift y Xcode 6. Es un área interactiva que se puede usar para escribir pequeños fragmentos de código para verificar los cambios en el tiempo de ejecución. Es una excelente manera para que los estudiantes de Swift conozcan las nuevas funciones de Swift.
  • Crear un nuevo proyecto Xcode: Elija esta opción, que crea un nuevo proyecto con la configuración predeterminada.
  • Retirar un proyecto existente: Esto se usa para retirar un proyecto de una ubicación de repositorio, por ejemplo, retirar un proyecto de SVN.
  1. Seleccione la segunda opción Crear un nuevo proyecto de Xcode y Xcode le pedirá que realice una configuración inicial del proyecto:

Seleccionar plantilla

Este asistente se utiliza para seleccionar su plantilla de proyecto. Hay 5 opciones:

  • iOS: se utiliza para crear aplicaciones, bibliotecas y marcos de iOS
  • watchOS: se utiliza para crear aplicaciones, bibliotecas y marcos de watchOS
  • tvOS: se usa para crear aplicaciones, bibliotecas y marcos de tvOS
  • macOS: se utiliza para crear aplicaciones, bibliotecas, marcos, paquetes, AppleScripts, etc. de macOS.
  • Multiplataforma: Se utiliza para crear aplicaciones multiplataforma, plantillas y contenido de compras dentro de la aplicación

Puede ver que hay muchas plantillas diferentes para su aplicación. Estas plantillas son útiles para impulsar su desarrollo; están prediseñados con algunas configuraciones básicas de proyectos, como interfaces de interfaz de usuario y archivos de clase.

Aquí, usaremos la primera opción, iOS.

  1. Aplicación Maestro-Detalle:

    This template contains a combined master and detail interface: the master contains objects which are related to the detail interface. Selecting objects in the master will change the details interface. You can see this kind UI in the Settings, Notes and Contacts applications on the iPad.

  2. Aplicación basada en páginas:

    This template is used to create the page-based application. Pages are different views held by one container.

  3. Aplicación de vista única:

    This is a normal application development template. This is good for beginners to learn application flow.

  4. Aplicación con pestañas:

    This template creates tabs at the bottom part of an application. Each tab has a different UI and a different navigation flow. You can see this template used in apps like Clock, iTunes Store, iBooks and App Store.

  5. Juego:

    This is a starting point for game development. You can go further with game technologies like SceneKit, SpriteKit, OpenGL ES and Metal.

  6. En este ejemplo, comenzaremos con Aplicación de vista única

Crear proyecto

El asistente le ayuda a definir las propiedades del proyecto:

  • Nombre del producto: El nombre del proyecto/aplicación
  • Nombre de la organización: El nombre de la organización en la que participa
  • Identificador de la organización: El identificador único de la organización que se utiliza en el identificador del paquete. Se recomienda seguir la notación inversa del servicio de nombres de dominio.
  • Identificador de paquete: Este campo es muy importante. Se basa en el nombre de su proyecto y el identificador de la organización, elija sabiamente. El identificador del paquete se usará en el futuro para instalar la aplicación en un dispositivo y cargar la aplicación en iTunes Connect (que es el lugar donde cargamos las aplicaciones para publicarlas en la App Store). Es una clave única para identificar su aplicación.
  • Idioma: El lenguaje de programación que le gustaría usar. Aquí puede cambiar Objective-C a Swift si no está seleccionado.
  • Dispositivos: Dispositivos compatibles con su aplicación que se pueden cambiar más tarde. Muestra iPhone, iPad y Universal. Las aplicaciones universales son compatibles con dispositivos iPhone y iPad, y se recomienda seleccionar esta opción cuando no sea necesario ejecutar la aplicación en un solo tipo de dispositivo.
  • Usar Core Data: Si desea usar Core Data Model en su proyecto, márquelo como seleccionado y se creará un archivo para .xcdatamodel. También puede agregar este archivo más adelante si no lo sabe de antemano.
  • Incluir pruebas unitarias: Esto configura el objetivo de la prueba unitaria y crea clases para las pruebas unitarias
  • Incluir prueba de IU: Esto configura el objetivo de la prueba de IU y crea clases para las pruebas de IU

Haga clic en Siguiente y le pedirá una ubicación en la que desea crear el directorio del proyecto. Haga clic en Crear y verá la interfaz de usuario de Xcode con una configuración de proyecto ya definida. Puede ver algunas clases y archivos de guiones gráficos.

Esta es una plantilla básica para una aplicación de vista única.

En la parte superior izquierda de la ventana, verifique que se haya seleccionado un simulador (por ejemplo, “iPhone 6” como se muestra aquí) y luego presione el botón triangular EJECUTAR.

ingrese la descripción de la imagen aquí

  1. Se abrirá una nueva aplicación: Simulador (esto puede llevar algo de tiempo la primera vez que lo ejecute y es posible que deba intentarlo dos veces si ve un error la primera vez). Esta aplicación nos proporciona simulación de dispositivos para las aplicaciones creadas. ¡Casi parece un dispositivo real! Contiene algunas aplicaciones como un dispositivo real. Puede simular orientaciones, ubicación, gesto de agitación, advertencias de memoria, barra de estado de llamada entrante, toque con el dedo, bloqueo, reinicio, inicio, etc.

Verá una aplicación completamente blanca porque aún no hemos realizado ningún cambio en la plantilla.

Así que empieza el tuyo. es una carrera larga y hay muchas nuevas oportunidades esperándote!

Si no está seguro de adónde ir a continuación, pruebe el tutorial ‘Jump Right In’ de Apple. Ya ha realizado los primeros pasos, por lo que tiene un buen comienzo.

Hola Mundo

Después de configurar Xcode, no es difícil poner en marcha su primer iOS. En el siguiente ejemplo vamos a:

  • Comenzar un nuevo proyecto
  • Añadir una etiqueta
  • Imprimiendo mensaje a consola.
  • Ejecutar en el simulador

Comenzando un nuevo proyecto

Cuando aparezca la pantalla de bienvenida de Xcode, seleccione Crear un nuevo proyecto de Xcode. Alternativamente, puede hacer Archivo> Nuevo> Proyecto… desde el menú Xcode si ya lo tiene abierto.

ingrese la descripción de la imagen aquí

Elija una Aplicación de vista única y haga clic en Siguiente.

ingrese la descripción de la imagen aquí

Escriba “HelloWorld” para el Nombre del producto (o lo que realmente desee) y en Idioma, asegúrese de que Swift esté seleccionado.

  • Universal significa que su aplicación se ejecutará tanto en el iPhone como en el iPad.
  • Usar datos básicos se refiere al almacenamiento persistente de datos, que no es necesario en nuestra aplicación Hello World.
  • No haremos Pruebas de unidad o Pruebas de interfaz de usuario en este ejemplo, pero no está de más acostumbrarse a agregarlas.

ingrese la descripción de la imagen aquí

Elija una carpeta existente o cree una nueva donde guardará sus proyectos de Xcode. Este será el valor predeterminado en el futuro. Creamos uno aquí llamado “Proyectos Xcode”. Luego haga clic en Crear. Puede seleccionar Control de fuente si lo desea (se usa al sincronizar con sitios como GitHub), pero no lo necesitaremos en este ejemplo.

ingrese la descripción de la imagen aquí

Agregando una etiqueta

Esta es la estructura de archivos de un proyecto Xcode.

Seleccione Main.storyboard en el Navegador de proyectos.

ingrese la descripción de la imagen aquí

Escriba “etiqueta” en el campo de búsqueda de la Biblioteca de objetos en la parte inferior derecha de Xcode. A continuación, arrastre UILabel al controlador de vista del guión gráfico. Colóquelo generalmente en la región de la esquina superior izquierda.

ingrese la descripción de la imagen aquí

Asegúrese de que la etiqueta esté seleccionada en el guión gráfico y luego, en el Inspector de atributos, cambie el texto a “¡Hola, mundo!” Luego tendrá que cambiar el tamaño y la posición de la etiqueta en el guión gráfico, ya que ahora la longitud del texto es más larga.

ingrese la descripción de la imagen aquí

Alternativamente, haga doble clic en la etiqueta en el guión gráfico para editarlo para que sea “¡Hola, mundo!”. En cualquier caso, el guión gráfico debería verse así:

ingrese la descripción de la imagen aquí

Agregar código

Seleccione ViewController.swift en el Navegador de proyectos.

ingrese la descripción de la imagen aquí

Agrega print("Creé con éxito mi primera aplicación de iOS.") al método viewDidLoad(). Debería verse algo como esto.

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // print to the console when app is run
        print("Successfully created my first iOS application.")
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

Ejecutar la aplicación en el simulador

ingrese la descripción de la imagen aquí

Presione el botón Ejecutar para compilar y ejecutar la aplicación. En este ejemplo, el dispositivo simulador actual (denominado “esquema”) está predeterminado en el iPhone 6s Plus. Las versiones más nuevas de Xcode tendrán esquemas más nuevos de forma predeterminada. También puede elegir otros esquemas haciendo clic en el nombre. Nos quedaremos con el valor predeterminado.

El simulador tardará un tiempo en iniciarse en la primera ejecución. Una vez en ejecución, debería verse así:

ingrese la descripción de la imagen aquí

En el menú del simulador, puede elegir Ventana > Escala para reducirla o presionar ⌘cmd + 1/2/3/4/5 para una escala del 100 %/75 %/50 %/33 %/25 %. respectivamente..

El área de depuración de Xcode (en la parte inferior) también debería haber impreso “Creado con éxito mi primera aplicación de iOS”. a la consola “Creé con éxito mi primera aplicación para iOS”. El mensaje es la cadena que imprimió mediante programación en la parte Agregar código.

ingrese la descripción de la imagen aquí

pasando

A continuación, debe aprender acerca de las restricciones de diseño automático. Estos le ayudan a colocar sus controles en el guión gráfico para que se vean bien en cualquier tamaño y orientación del dispositivo.

Interfaz Xcode

En Xcode, tiene tres áreas separadas de trabajo: Navegadores (en rojo), área de depuración (en verde) y Utilidades (en azul). Ventanas principales de Xcode

La ventana del espacio de trabajo siempre incluye el área del editor. Cuando selecciona un archivo en su proyecto, su contenido aparece en el área del editor, donde Xcode abre el archivo en un editor apropiado. Por ejemplo, en la imagen de arriba, el área del editor MainViewController.swift, un archivo de código Swift que se selecciona en el área del Navegador a la izquierda de la ventana del área de trabajo.

Área del Navegador

área del navegador

La ventana del navegador contiene las siguientes ocho opciones:

  • Navegador de proyectos. Agregue, elimine, agrupe y administre archivos en su proyecto, o elija un archivo para ver o editar su contenido en el área del editor.
  • Navegador de símbolos. Explore los símbolos en su proyecto como una lista o jerarquía. Los botones a la izquierda de la barra de filtro le permiten limitar los símbolos mostrados a una combinación de solo clases y protocolos, solo símbolos en su proyecto o solo contenedores.
  • Buscar navegador Use opciones de búsqueda y filtros para encontrar rápidamente cualquier cadena dentro de su proyecto.
  • Navegador de problemas. Vea problemas como diagnósticos, advertencias y errores encontrados al abrir, analizar y compilar su proyecto.
  • Navegador de pruebas. Cree, gestione, ejecute y revise pruebas unitarias.
  • Navegador de depuración. Examine los subprocesos en ejecución y la información de pila asociada en un momento o punto específico durante la ejecución del programa.
  • Navegador de puntos de interrupción. Ajuste los puntos de interrupción especificando características como las condiciones de activación.
  • Navegador de informes. Vea el historial de sus tareas de compilación, ejecución, depuración, integración continua y control de código fuente.

Los Editores

La mayor parte del trabajo de desarrollo en Xcode ocurre en el área del editor, el área principal que siempre está visible dentro de la ventana del espacio de trabajo. Los editores que usa con más frecuencia son:

  • Editor fuente. Escribe y edita el código fuente. editor fuente
  • Interface Builder. Crea y edita gráficamente archivos de interfaz de usuario. creador de interfaz
  • Editor de proyectos. Vea y edite cómo deben compilarse sus aplicaciones, por ejemplo, especificando opciones de compilación, arquitecturas de destino y derechos de aplicación. editor de proyectos

Configure el área del editor para una tarea determinada con los botones de configuración del editor en el lado derecho de la barra de herramientas: ingrese la descripción de la imagen aquí

  • Editor estándar. Rellena el área del editor con el contenido del archivo seleccionado.
  • Editor asistente. Presenta un panel de edición independiente con contenido relacionado lógicamente con el contenido del panel de edición estándar. También puede cambiar el contenido.
  • Editor de versiones. Muestra las diferencias entre el archivo seleccionado en un panel y otra versión de ese mismo archivo en un segundo panel. Este editor funciona solo cuando su proyecto está bajo control de código fuente.

Recursos y Elementos en Área de Utilidades

El área de utilidades en el extremo derecho de la ventana del área de trabajo le brinda acceso rápido a estos recursos: Inspectores, para ver y modificar las características del archivo abierto en un editor Bibliotecas de recursos listos para usar en su proyecto

El panel superior del área de utilidades muestra los inspectores. El panel inferior le da acceso a las bibliotecas.

Área de utilidades


El primer panel (resaltado en rojo) es la barra del inspector, utilícela para elegir el inspector que mejor se adapte a su tarea actual. Siempre hay dos inspectores visibles en la barra de inspectores (hay inspectores adicionales disponibles en algunos editores):

  • Inspector de archivos. Ver y administrar los metadatos del archivo seleccionado. Por lo general, localizará guiones gráficos y otros archivos multimedia y cambiará la configuración de los archivos de la interfaz de usuario.
  • Ayuda rápida. Ver detalles sobre un símbolo, un elemento de la interfaz o una configuración de compilación en el archivo. Por ejemplo, la Ayuda rápida muestra una descripción concisa de un método, dónde y cómo se declara el método, su alcance, los parámetros que toma y la disponibilidad de su plataforma y arquitectura.

Use la Barra de biblioteca (la segunda resaltada en rojo) para acceder a bibliotecas de recursos listas para usar para su proyecto:

  • Plantillas de archivo. Plantillas para tipos comunes de archivos y construcciones de código.
  • Fragmentos de código. Piezas breves de código fuente para usar en su software, como declaraciones de clases, flujos de control, declaraciones de bloques y plantillas para las tecnologías de Apple más utilizadas.
  • Objetos. Elementos para la interfaz de usuario de su aplicación.
  • Medios. Archivos que contienen gráficos, íconos, archivos de sonido y similares.

Para usar una biblioteca, arrástrela directamente al área apropiada. Por ejemplo, para usar un fragmento de código, arrástrelo desde la biblioteca al editor de código fuente; para crear un archivo de origen a partir de una plantilla de archivo, arrastre su plantilla al navegador de proyectos.

Para restringir los elementos que se muestran en una biblioteca seleccionada, escriba el texto relevante en el campo de texto en la barra de filtros (el panel inferior). Por ejemplo, escriba “botón” en el campo de texto para mostrar todos los botones en la biblioteca Objetos.

Administre tareas con la barra de herramientas del espacio de trabajo

La barra de herramientas en la parte superior de la ventana del área de trabajo brinda acceso rápido a los comandos que se usan con frecuencia. El botón Ejecutar crea y ejecuta sus productos. El botón Detener finaliza su código en ejecución. El menú Esquema le permite configurar los productos que desea crear y ejecutar. El visor de actividad muestra el progreso de las tareas que se están ejecutando actualmente al mostrar mensajes de estado, el progreso de la compilación y otra información sobre su proyecto.

Los botones de configuración del editor (el primer grupo de tres botones) le permiten configurar el área del editor, y los botones de configuración del espacio de trabajo (el segundo grupo de tres botones) ocultan o muestran el navegador opcional, depurar y áreas de servicios públicos.

imagen

El menú Ver incluye comandos para ocultar o mostrar la barra de herramientas.

ocultar

Crea tu primer programa en Swift 3

Aquí estoy presentando cómo crear el primer programa básico en lenguaje Swift 3. Primero, debe tener algún conocimiento básico del lenguaje de programación o no tenerlo, luego estar listo para aprenderlo desde el principio.

Requisitos para los desarrollos:

  1. MAC OS: versión 10.11.6 o posterior para el nuevo Xcode 8.2
  2. Xcode - Versión 8.2 Documento de Apple para la introducción de Xcode.

Xcode 8.2 tiene nuevas funciones de idioma Swift 3 con nuevas API compatibles con iOS 10.

Crea tu primer programa

Primero vaya a Aplicación y abra su Xcode 8.2.

Xocde abierto

Después de eso verás la pantalla

Crear nuevo proyecto

Luego elija Crear nuevo proyecto y luego verá la siguiente pantalla

Elegir proyecto Esta también es una parte muy importante dentro de Xcode para seleccionar nuestro tipo de proyecto. Necesitamos elegir nuestro proyecto de acuerdo con los tipos de sistema operativo. Hay cinco tipos de opciones disponibles en la parte superior:

  1. iOS

  2. relojOS

  3. macOS

  4. multiplataforma

Ahora estamos eligiendo la plataforma iOS para el desarrollo y creando un proyecto muy básico. con la opción de aplicación de vista única:

ingrese la descripción de la imagen aquí

Luego, debemos proporcionar el nombre del producto, que representará el nombre de su paquete y el nombre de la aplicación.

Nombre de la aplicación que puede cambiar más tarde según sus requisitos. Luego debemos hacer clic en “Crear” y luego su pantalla se verá como esta a continuación:

Clase creada

Dentro de esta clase, puede ver que el nombre del archivo es ViewController.swift y dentro de la clase, el nombre también es ViewController, que es herencia de la superclase UIViewController y finalmente estamos creando nuestra primera variable cuyo nombre es myString del tipo ‘Cuerda’. Agregue lo siguiente en ‘super.viewDidLoad()’

let myString = "Hello, World!"

Vamos a imprimir el contenido de esta variable. Primero, seleccione su tipo de simulador en la parte superior izquierda de la pantalla y luego haga clic en el botón “Ejecutar”.

salida

Después de eso, su salida se mostrará en la terminal que se encuentra en la parte inferior derecha. Felicitaciones, este es su primer programa Hello World dentro de Xcode.