A continuación, haremos un tour por Xcode, veremos cómo se crea una app desde cero y probaremos el resultado en el simulador de iOS.
Empezamos abriendo Xcode y seleccionando el tipo de proyecto que vamos a crear. En nuestro caso, será una aplicación para iOS de una sola vista. Esto es simplemente la plantilla inicial, posteriormente podemos ir añadiendo más vistas si es necesario. Seleccionamos un nombre para el proyecto, en un alarde de originalidad lo vamos a llamar MiApp. En esta ocasión vamos a decirle que sea solo para iPhone, aunque podría ser también para iPad o universal, es decir, para ambos dispositivos. Una vez seleccionados los valores iniciales, Xcode genera el proyecto y ya podemos empezar a programar. Hagamos un tour por las diferentes partes del IDE antes de empezar.
En la parte superior se encuentra la barra de herramientas con información sobre qué está haciendo Xcode en estos momentos, botones para modificar la vista que tenemos en pantalla y otros con los que ejecutar el programa que estamos construyendo. En la parte de la izquierda se encuentra el explorador, donde podemos ver y gestionar los diferentes archivos que componen nuestra app. También desde ese panel podemos acceder a otros tipos de exploradores para, por ejemplo, buscar texto en cualquier parte de la app o navegar entre los posibles errores que Xcode haya detectado en nuestro código. En la parte central está el editor, que es la vista que utilizamos para escribir código, editar la interfaz u otras muchas cosas según el tipo de archivo que tengamos seleccionado en el explorador. Por ejemplo, si seleccionamos el proyecto en sí, podemos modificar las características del mismo como el nombre, el dispositivo o la orientación en la que funcionará. A la derecha tenemos el inspector, el cual cambiará completamente según qué tengamos seleccionado tanto en el editor como en el explorador, pero que básicamente nos permite editar las propiedades de ese objeto seleccionado. Finalmente, en la parte inferior derecha, tenemos la librería donde encontramos, entre otras cosas, los componentes que podemos usar en nuestras vistas. Aquí hay diferentes tipos de view controllers, botones, campos de texto, etc.
Una de las partes importantes de una aplicación iOS es el storyboard, que es un archivo en el cual, a través de Xcode, definiremos el interfaz de las diferentes pantallas de nuestra aplicación. Siempre se crea uno por defecto con cada aplicación llamado main storyboard. En él es donde definimos el interfaz de nuestras pantallas, así como el flujo que habría entre ellas. Desde la biblioteca podemos arrastrar cualquier componente. Por ejemplo, en este caso vamos a empezar con un view controller. Como hemos dicho esto sería una de las pantallas de nuestra aplicación. Luego podemos arrastrar una vista que viene a ser un contenedor dentro del propio view controller. Como vemos podemos posicionarla en cualquier parte del view controller accediendo a sus propiedades en el inspector podemos, por ejemplo, cambiarle el color. A continuación, vamos a ponerle un label, que no es más que una etiqueta en la que podemos poner cualquier texto. La pondremos dentro de la vista, a la izquierda podemos ver la jerarquía de elementos que estamos creando: vista del view controller, vista, label... Por último, añadiremos un botón.
Algo a tener en cuenta es que en storyboard, por defecto, los view controllers tienen un formato cuadrado. Esto no parece tener mucho sentido ya que no existe ningún dispositivo iOS con ese formato de pantalla. Esto es así porque Apple no quiere restringir el interfaz que estamos creando a ningún dispositivo concreto. Para conseguirlo nos proporciona una herramienta denominada Auto Layout. Para usar Auto Layout deberemos añadir constraints, limitación o restricción en inglés. Por ejemplo: queremos que nuestra vista esté pegada a los márgenes de nuestro view controller y que tenga una altura de 150 puntos. Para lograrlo, tendremos que seleccionar la vista y darle al botón pin que aparece en la esquina inferior derecha del storyboard. Ahí seleccionamos los constrains que queremos aplicarle. En nuestro caso el superior, izquierdo, derecho y la altura. Posteriormente vamos a hacer que el label permanezca siempre centrado dentro de la vista para lo cual lo seleccionamos y aplicamos los constraints correspondientes esta vez con el botón align. En este caso, añadimos constraints para alinear el label tanto en horizontal como en vertical. También añadiré constraints al botón, esta vez usando un atajo. En cualquier momento podemos previsualizar cómo está funcionando Auto Layout sin necesidad de ejecutar la aplicación. Para ello dividimos la pantalla mostrando la vista denominada asistente y le decimos que muestre el preview. Podemos añadir diferentes previsualizaciones para los distintos dispositivos. Al hacerlo vemos que en todos ellos se mantienen los constraints que hemos creado en Auto Layout.
La otra pata sobre la que se sostienen nuestras aplicaciones es, por supuesto, el código. A continuación veremos el editor de Xcode y las herramientas que nos proporciona para hacer más fácil el desarrollo en la plataforma. Para entrar en el editor de código, simplemente deberemos seleccionar uno de los archivos fuente del explorador. Por ejemplo, en este caso, el archivo ViewController.swift contiene el código correspondiente a la vista que acabamos de crear. Como estamos utilizando un componente estándar de Apple, ya viene con algo de código preescrito que nos ayudará a empezar. Vemos que, a medida que vamos escribiendo, Xcode nos va dando sugerencia. Esto nos ayudará a programar más rápido y con menos errores. Vamos a guardar en una variable la fecha del momento en el que se entra en esta pantalla.
Para crear tu propia app sin tener que programar ni tener conocimientos, únete al equipo de Apps Rentables
El paso que nos quedaría finalmente sería enlazar el interfaz que hemos creado con el código necesario para que éste funcione. Para esto Xcode nos proporciona unas herramientas muy visuales. Primero vamos a hacer que el botón nos lleve a otra pantalla, para eso no necesitamos escribir nada de código. Primero creamos la otra pantalla y le damos un color de fondo para distinguirla. A continuación creamos el componente de navegación que nos permitirá movernos de una pantalla a otra y volver atrás mostrando el botón en la parte superior. Finalmente enlazamos el botón con la segunda pantalla arrastrando mientras mantenemos apretada la tecla control y le decimos el tipo de transición que queremos. Lo último que haremos será conseguir que el label muestre la fecha, para ello necesitamos enlazar el label con el código. Xcode nos permite mostrar las dos pantallas una al lado de la otra, entonces pinchamos el label y arrastramos con control apretado hacia el código. Eso nos creará una propiedad en nuestro código con la cual podemos modificar el label. Le diremos que simplemente muestre la fecha.
Finalmente vamos a probar nuestra aplicación. Le diremos a Xcode que compile nuestro código comprobando por el camino si tiene algún error y que ejecute la aplicación en el simulador de iOS. Para compilar y ejecutar la aplicación tendremos primero que seleccionar en qué tipo de simulador queremos probarla o si lo queremos hacer en un dispositivo físico que tengamos conectado por USB. Después, dándole a este botón, haremos que se compile y ejecute la aplicación. Xcode se toma su tiempo, sobre todo en proyectos grandes, y al acabar podemos probar nuestra app en el simulador y comprobar que todo funciona como debería.
Gana dinero desarrollando Apps Móviles
No hay comentarios:
Publicar un comentario