¿Tienes una idea para una aplicación pero te falta el conocimiento de programación para empezar a construirla? En esta serie de blogs semanales, Cómo liberar a tu desarrollador interno de aplicaciones, te llevaré a ti, el no-programador, paso a paso a través del proceso de creación de aplicaciones para el iPhone, iPod Touch y iPad. Acompáñame cada semana en esta aventura, y experimentarás lo divertido que puede ser convertir tus ideas en realidad! Esta es la segunda parte de la serie. Si acabas de empezar, mira el comienzo de la serie aquí (Este post ha sido actualizado a iOS 8, Xcode 6.3 y Swift 1.2.)

Después de introducir las herramientas que necesitarás para desarrollar aplicaciones en mi anterior post, asumo que has instalado Xcode y estás listo para probar el desarrollo de aplicaciones!Creo que no hay mejor manera de aprender que haciendo, así que vamos a sumergirnos y empezar a crear una aplicación.

Creación de una aplicación prototipo

Siempre que creo una aplicación para mí o para un cliente, siempre creo primero un prototipo de la aplicación. Con Xcode, la herramienta de Apple para crear aplicaciones para iOS, puedes crear aplicaciones prototipo de alta calidad que parecen ser mayormente funcionales mientras escribes poco o nada de código. Esto es una verdadera ventaja para los desarrolladores de aplicaciones en ciernes que aún no conocen un lenguaje de programación. Crear un prototipo es una buena práctica. Te permite poner tu aplicación en las manos de usuarios potenciales y probadores beta y recibir valiosos comentarios de ellos. Es mucho más difícil cambiar una aplicación después de haber pasado muchas horas escribiendo el código asociado a un diseño de interfaz de usuario en particular!

Una de las mejores cosas de las capacidades de Xcode para crear prototipos es que no tiras tu prototipo cuando estás listo para crear la aplicación «real». Puedes mantener el diseño de la interfaz de usuario, la navegación y la funcionalidad básica de la aplicación prototipo, y simplemente añadir código para hacerla completamente funcional. Te llevaré a través de este proceso en las próximas semanas mientras primero construimos un prototipo, y luego lo convertimos en una aplicación real.

Empieza con el final en la mente

Figura 1 – La pantalla principal de la aplicación

Creo que es mejor aprender a crear aplicaciones de iOS haciendo una aplicación que sea divertida e informativa. Con eso en mente, en las próximas semanas construiremos una aplicación llamada iAppsReview que puede ser usada para revisar las aplicaciones en tus dispositivos iOS. Cuando estoy diseñando una aplicación, normalmente empiezo dibujando primero las pantallas principales de la aplicación en papel. Esto me permite resolver el aspecto básico y el flujo de navegación de la aplicación más rápidamente que usando Xcode para exponer mis ideas iniciales. Una vez que estoy satisfecho con el diseño básico de la aplicación, comienzo a construir una pantalla a la vez en Xcode, usando mi diseño de lápiz y papel como guía. Ya he hecho esta parte por ti, así que echemos un vistazo a las pantallas principales de la aplicación para que puedas tener una buena visión general de cómo es la aplicación, así como las principales características que tiene que ofrecer.

La figura 1 muestra la pantalla principal de la aplicación. Como puedes ver, hay cuatro acciones principales que los usuarios pueden realizar con esta aplicación:

  • Escribir una reseña – Escribir una nueva reseña de una aplicación
  • Lea sus críticas – Lea las críticas de las aplicaciones que ya han escrito
  • Leer críticas en línea – Leer críticas en línea que otros han escrito
  • Ajustes y retroalimentación – Cambia los ajustes de la aplicación y proporciona al desarrollador de la aplicación (es decir, a ti) retroalimentación

Fíjate que hay un icono a la izquierda de cada opción. Encuentro que los usuarios aprecian ver una imagen que les ayuda a identificar rápidamente cada acción principal en una aplicación. Esta es una técnica que Apple usa en muchas de sus aplicaciones incorporadas como Ajustes, Fotos, iTunes y la aplicación de Música.

A la derecha de cada opción hay una flecha gris. Esto indica que cuando el usuario pulsa una de las opciones, se le llevará a otra pantalla. Por ejemplo, La Figura 2 muestra la pantalla Write Review , que aparece cuando el usuario pulsa la opción Write a Review .

Figura 2 – La pantalla de revisión de escritura

Al escribir una reseña, el usuario pulsa la opción Categoría de aplicación en la parte superior de la pantalla, lo que le lleva a otra pantalla donde puede seleccionar una categoría de aplicación de una lista.

La pantalla principal incluye las estrellas Tap to Rate reconocibles por los usuarios de las aplicaciones y libros de clasificación del iTunes Store y el iBookstore. También hay un lugar para que los usuarios introduzcan el nombre de la aplicación, así como un área de texto más grande para escribir comentarios.

A la derecha de la pantalla hay un botón Add Image , que el usuario puede tocar para seleccionar imágenes de la aplicación que ha tomado en su dispositivo. Después de seleccionar una foto, se muestra una pequeña miniatura de la imagen en el botón.

En la parte inferior de la pantalla hay un botón Post , que los usuarios pueden utilizar para publicar sus reseñas en un sitio web que he creado para este fin. Así que eventualmente, aprenderás a crear una aplicación que pueda comunicarse con un servidor web a través de Internet!

Los usuarios también pueden compartir sus reseñas con otros tocando el botón de acción en el lado derecho de la barra en la parte superior de la pantalla. Cuando tocan este botón, aparece una ventana emergente que les permite compartir sus críticas a través de Twitter, Facebook o correo electrónico. Cuando agreguemos esta funcionalidad a la aplicación, se sorprenderán de lo fácil que es integrarla con los medios sociales utilizando las últimas herramientas de Apple.

En posts posteriores detallaré las otras opciones de la aplicación, pero por ahora, les he dado suficiente información para comenzar a crear la aplicación.

Creando un nuevo proyecto Xcode

Figura 3 – La ventana de bienvenida de Xcode

Para empezar, debes iniciar Xcode en tu Mac haciendo clic en el icono Xcode.app en la carpeta de aplicaciones de tu Mac. Cuando inicies Xcode por primera vez, verás una pantalla de bienvenida como se muestra en Figura 3 . Esta ventana te permite crear un nuevo proyecto de Xcode, o abrir un proyecto que hayas creado previamente.

En Xcode, un proyecto es una colección de archivos, incluyendo imágenes, archivos de códigos, archivos de diseño de la interfaz de usuario, archivos de texto y archivos de configuración. Puedes colocar todos estos archivos en un proyecto, y cuando estés listo para probar tu aplicación, Xcode ejecuta un build, que toma todos estos archivos, los procesa y los combina en un único archivo .app que puede ser ejecutado en un dispositivo iOS o en el Simulador de iPhone o iPad de Xcode.

  1. Haz clic en la opción Crear un nuevo proyecto de Xcode en la ventana Bienvenido a Xcode para crear un nuevo proyecto.
  1. Al hacer esto, aparece la ventana principal de Xcode, y luego la ventana de Nuevo Proyecto que se muestra en Figura 4 .Esta ventana te permite seleccionar una plantilla a partir de la cual crear tu nuevo proyecto. Esto es similar en concepto a la selección de una plantilla cuando se crea una presentación de diapositivas o un documento de procesamiento de textos. La plantilla proporciona a su aplicación algunas características básicas de diseño y navegación.

Figura 4 – La ventana del nuevo proyecto

  1. En el lado izquierdo de la ventana del Nuevo Proyecto hay un panel con secciones etiquetadas iOS y OS X . Estas dos opciones están disponibles porque puedes usar Xcode para crear aplicaciones para dispositivos iOS así como para el Mac.Ya que estamos creando una aplicación para el iPhone, en la sección iOS , selecciona Application , y luego en el lado derecho de la ventana, selecciona la plantilla Single View Application como se muestra en Figura 4 . Esta es la mejor plantilla a elegir cuando se crea un prototipo de aplicación porque no añade muchos archivos innecesarios y el diseño de la interfaz de usuario que hay que eliminar.
  1. Ahora haz clic en el botón Next para navegar al siguiente paso en la ventana New Project ( Figura 5) .Este siguiente paso permite especificar la información del proyecto así como varias opciones de proyecto.

Figura 5 – La ventana de nuevo proyecto, paso 2

  • Nombre del producto – Introduzca iAppsReview como nombre del producto. Xcode también hará que éste sea el nombre de su proyecto.
  • Nombre de la organización – Puedes introducir el nombre de tu organización en esta casilla, o puedes simplemente introducir tu nombre si no estás en una organización.
  • Identificador de la organización – Esta es parte de la información utilizada para identificar de manera única su producto. Para ayudar a que sea único, puedes usar una dirección web en el formato com.tuempresa . Si no tienes un nombre de empresa, puedes usar edu.self .Después de introducir el nombre del producto y el identificador de la empresa, fíjate en que estos dos datos se combinan para crear el Identificador del paquete . El identificador del paquete es la forma que tiene Apple de identificar su aplicación de manera única.
  • Prefijo de clase – Esta opción te permite añadir un prefijo a los archivos que añadas a tu proyecto. Deja esta casilla vacía para este proyecto.
  • Dispositivos – Esta opción permite especificar si se quiere crear una aplicación para el iPhone , iPad o una aplicación Universal que funcione tanto en el iPhone como en el iPad. Para hacer este primer proyecto simple, establece esta opción en iPhone .
  • Usar datos del núcleo – Deje esta opción sin marcar. Esta opción está destinada a las aplicaciones que almacenan datos en el dispositivo del usuario. Definitivamente lo haremos en esta aplicación, pero añadiremos Core Data al proyecto más adelante.
  1. Haz clic en el botón Siguiente . Esto muestra la ventana de Guardar que se muestra en Figura 6 . Deja el botón Create local git repository for this project sin marcar. Esta opción proporciona control de versiones para tu proyecto, pero no lo necesitamos ahora mismo.

Figura 6 – La ventana de Guardar Proyecto

  1. Puedes guardar el nuevo proyecto en cualquier carpeta que desees, pero te recomiendo que selecciones la carpeta Documentos como he hecho en Figura 6 para que sea fácil encontrar tu proyecto más tarde, y todas las capturas de pantalla de mi proyecto coincidan con las tuyas.
  1. Haz clic en el botón Create para crear el nuevo proyecto.

Examinando su nuevo proyecto

Figura 7 – ¡Tu nuevo proyecto!

Cuando Xcode termine de crear su nuevo proyecto, verá una lista de archivos en el panel del Navegador de Proyectos en el lado izquierdo de la ventana de Xcode como se muestra en Figura 7 . Ya que creamos un nuevo proyecto a partir de la plantilla del Proyecto de la Aplicación de Vista Única, sólo hay unos pocos archivos incluidos en el proyecto. Las carpetas en el Navegador del Proyecto se llaman grupos y se usan para organizar los archivos relacionados entre sí. Tenga en cuenta que estas carpetas de grupos no se corresponden con las carpetas reales del disco duro de su Mac! Sólo se utilizan para crear una agrupación lógica de archivos.

Los archivos AppDelegate.swift y ViewController.swift contienen código de programa, pero como no estás haciendo ninguna codificación ahora mismo, ¡no tienes que preocuparte por ello todavía!

Trabajando con Storyboards

Una de las mayores innovaciones de Apple para facilitar la creación de aplicaciones iOS es el storyboard . Con los guiones gráficos, Apple toma una página del libro de jugadas de Pixar. De la misma manera que un storyboard muestra las escenas principales y el flujo de una película, los storyboards en Xcode te permiten ver las escenas principales de tu aplicación, y el flujo de navegación entre ellas. El storyboard en Figura 8 muestra sólo algunas pantallas de la aplicación que vamos a crear. Los rectángulos con forma de iPhone se llaman escenas . Las líneas con flechas que conectan las escenas se conocen como segues y ayudan a visualizar el flujo de navegación de la aplicación.

Figura 8 – Un storyboard de Xcode muestra el diseño básico y el flujo de tu aplicación.

Configurando el Storyboard

Para simplificar este tutorial, vamos a crear una aplicación sólo para iPhone que utiliza la disposición más simple de «muelles y puntales» en lugar de la nueva (y más compleja) disposición automática. Aprenderán los detalles de la Autodisposición más adelante en esta serie, pero quiero mantener este ejemplo lo más simple posible por ahora.

  1. En el Project Navigator, a la izquierda de la ventana de Xcode, selecciona el archivo Main.Storyboard . Esto muestra el storyboard en el área central de la ventana de Xcode.
  1. En el lado derecho de la ventana de Xcode, haga clic en el botón del extremo izquierdo de la barra de herramientas del Inspector para mostrar el Inspector de archivos.

Figura 9 – Seleccione el Inspector de Archivos

  1. Desmarque la casilla de verificación Use Auto Layout . Esto muestra un diálogo de advertencia Usar clases de tamaño requiere Autodiseño ( Figura 10 ). Selecciona la opción Disable Size Classes , que no necesitamos cuando creamos una maqueta sólo para iPhone-only.

Figura 10 – Seleccionar Deshabilitar clases de tamaño .

Al seleccionar esta opción se muestra un rectángulo en forma de iPhone en la superficie de diseño del storyboard ( Figura 11 ).

Figura 11 – El rectángulo en forma de iPhone es una escena.

  1. En última instancia, la escena que se añadió automáticamente al guión gráfico cuando se creó el proyecto no se ajusta a nuestras necesidades, así que tenemos que eliminarla. Para ello, primero haz clic en el área rectangular de la parte superior de la escena, conocida como el muelle de la escena, como se muestra en Figura 12 . Esto cambia el color del borde de la escena a azul. Luego, presiona el botón delete para borrar la escena del storyboard, dejando un área de diseño en blanco.

Figura 12 – Haz clic en el acoplamiento de la escena en la parte superior de la escena.

Ahora estás listo para volver al guión gráfico, pero antes de hacerlo, hablemos de los controladores de navegación.

Añadir un controlador de navegación

En las aplicaciones iOS, un controlador de navegación gestiona la navegación entre las diferentes escenas. Presenta una barra de navegación en la parte superior de la escena ( Figura 13 ) que puede contener un título, un botón de retroceso, así como otros botones opcionales.

Figura 13 – La barra de navegación en la parte superior de la escena

El primer objeto que normalmente se añade a un guión gráfico es un controlador de navegación porque controla todas las demás escenas. Aprenderás más sobre los controladores de navegación más adelante en este blog, pero por ahora, sigue estos pasos para agregar un controlador de navegación al guión gráfico:

  1. En el Project Navigator, selecciona el archivo Main.storyboard , que muestra el storyboard en el centro de la ventana de Xcode.
  1. A continuación, vaya a la Biblioteca de objetos de Xcode situada en la esquina inferior derecha de la ventana de Xcode ( Figura 14 ). Si no está visible, ve al menú de Xcode y selecciona View> Utilities> Show Object Library .

Figura 14 – La Biblioteca de Objetos está en la esquina inferior derecha de la ventana de Xcode.

  1. A continuación, arrastre un controlador de navegación desde la Biblioteca de Objetos y suéltelo en el storyboard como se muestra en Figura 15.

Figura 15 – Añadir un controlador de navegación al storyboard

Puede que te haya sorprendido ver que se añadieron dos escenas cuando arrastraste el controlador de navegación al storyboard. El controlador de la vista raíz de la derecha contiene una vista de tabla que puede contener una lista de elementos.

En versiones anteriores de Xcode, al añadir una escena a un guión gráfico vacío, automáticamente se establecía esa escena como el punto de entrada principal del guión gráfico. A partir de Xcode 6, es necesario establecer manualmente el punto de entrada. Hagámoslo ahora.

  1. Si estás usando Xcode 6.1.x, añade un punto de entrada al storyboard haciendo clic en el muelle del Controlador de Navegación, que selecciona su controlador de vista asociado. A continuación, ve al Inspector de Atributos y en la sección Controlador de vista , selecciona la casilla de verificación Es el controlador de vista inicial .

Si está usando Xcode 6.2 o más reciente, desplácese hasta la parte superior de la Biblioteca de objetos, ubicada en la esquina inferior derecha de la ventana de Xcode. Arrastra un Punto de entrada del Storyboard y suéltalo en el Controlador de navegación. Esto añade una flecha en el lado izquierdo del controlador de navegación ( Figura 16 ).

Figura 16 – El punto de entrada se añade a la escena

Entendiendo las vistas de la tabla

Las vistas de tabla se utilizan para mostrar listas de datos y se encuentran en la mayoría de las aplicaciones incorporadas de Apple como Settings ( Figura 17 ), iTunes, Photos, y Mail. Cada división de una vista de tabla es una sección . Por ejemplo, la vista de tabla en Figura 17 tiene tres secciones.

Figura 17 – Vista de la tabla de la aplicación de configuración

Cada elemento de una sección se conoce como una fila , y una vista de tabla puede contener un número ilimitado de filas. Cada fila tiene una columna de ancho y puede contener una imagen, un texto y un icono accesorio, como el indicador de revelación (la flecha gris) que se muestra a la derecha de las filas en Figura 17 . Varias de las escenas de la aplicación que estás creando contienen vistas de tablas, así que es bueno familiarizarse con ellas.

Configurando la vista de la tabla

Lo último que haremos en el post de esta semana es configurar la vista de la tabla en el controlador de la vista raíz.

  1. En el controlador de la vista raíz , haga clic en el área gris etiquetada Contenido del prototipo de la vista de tabla como se muestra en Figura 18.

Figura 18 – Seleccione la vista de la tabla.

  1. A continuación, ve al Inspector de Atributos de Xcode contenido en el panel de Utilidades en el lado derecho de la ventana de Xcode como se muestra en Figura 19 . Si el panel no es visible, ve al menú de Xcode y selecciona View> Utilities> Show Utilities . Luego, para mostrar el Inspector de Atributos, selecciona el tercer botón de la derecha en la barra de herramientas del Inspector.Siempre que seleccione un objeto en la superficie de diseño, el tipo de objeto se muestra en el encabezado de la sección superior. Siempre debe revisar este encabezado para asegurarse de que tiene el objeto correcto seleccionado. En este ejemplo, debe ver Vista de tabla mostrada en la parte superior del Inspector de atributos como se muestra en Figura 19.

Figura 19 – El Inspector de Atributos

  1. Cuando estés seguro de tener seleccionada la vista de tabla, cambia el atributo Contenido de Prototipos Dinámicos a Células Estáticas . Cuando se hace esto, el aspecto de la vista de tabla cambia como se muestra en Figura 19 . Las celdas que se configuran en tiempo de diseño se utilizan para producir filas en la vista de tabla en tiempo de ejecución (cuando la aplicación se ejecuta en el simulador o en un dispositivo iOS). Hemos seleccionado la opción Static Cells porque en lugar de llenar las celdas con contenido dinámico, se añadirá contenido estático en tiempo de diseño;
  1. A continuación, haga doble clic en el título de la barra de navegación azul etiquetada Root View Controller en la parte superior de esta escena para ponerla en modo de edición como se muestra en Figura 20;

Figura 20 – Editar el título del Controlador de la Vista Raíz

  1. Cambie el título de la barra de navegación escribiendo iAppsReview como se muestra en Figura 21 , y luego presione enter .

Figura 21 – Cambiar el título a iAppsReview .

Ejecutando la aplicación en el simulador

Vamos a ejecutar la aplicación en el simulador para comprobar nuestro progreso hasta ahora.

  1. Primero, asegúrate de que el ajuste Scheme en la barra de herramientas en la parte superior de la ventana de Xcode esté configurado en una de las opciones del iPhone como se muestra en Figura 22.

Figura 22 – Poner el esquema en una de las opciones del iPhone.

  1. Para ejecutar la aplicación en el Simulador del iPhone, haz clic en el botón Ejecutar en la esquina superior izquierda de la ventana de Xcode ( Figura 23 ).

Figura 23 – Haga clic en el botón Run

  1. Después de varios segundos deberías ver la aplicación mostrada en el Simulador del iPhone como se muestra en Figura 24. Si esta es la primera vez que ejecutas una aplicación en el Simulador, ¡probablemente te sientes muy emocionado de verla en funcionamiento!

Figura 24 – ¡El prototipo de aplicación que funciona en el Simulador del iPhone!

  1. Si la ventana de Xcode está visible, haz clic en ella para volver a Xcode, de lo contrario, pulsa Command+Tab para volver a Xcode, y luego pulsa el botón Stop para detener la aplicación en el Simulador.

Conclusión

¡Has logrado bastante en este puesto! Hasta ahora has aprendido a crear un nuevo proyecto, a añadir nuevos archivos al proyecto, a crear y configurar un storyboard y a añadir un controlador de navegación y de vista de tabla a un storyboard.

En mi próximo post configuraremos la escena principal de la aplicación y la vista de tabla para que se vea igual a la escena mostrada en Figura 1 , e incluso añadiremos la siguiente escena al storyboard que permite al usuario escribir una nueva revisión de la aplicación.

<>

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *