Tutorial Ionic - Cómo Crear Un App

Tutorial Ionic – Cómo crear una app

¿Que pasa muyayos? Estaba yo el otro día dando una vuelta por finofilipino y encontré un post sobre un trolaso de dos pares de cojones. El menda al parecer había creado una aplicación para iphones que consistía en lanzar el terminal lo más alto posible y el que mas altura consiguiera ganaba. Este tío es cojonudo porque consiguió hacer que la mafia marca de los iphone baneara su aplicación sin tener que recurrir a la pornografía, a la violencia o al malware. Un aplauso para este trolaso.

Ver esta aplicación me hizo pensar y caí en que en el blog no hay ningún post sobre desarrollo de aplicaciones móviles y me decidí a crear una serie de post sobre cómo crear apps. Es innegable que desde hace un par de años TODO lo relacionado con la informática y el usuario medio pasa por las aplicaciones móviles, así que mejor subirse a ese tren ¿que no?

Para crear una app móvil existen muchas herramientas, desde la programación nativa mediante Objective-C o Swift para los terminales de la manzanita o pasar por utilizar las ADK con Java para el robot verde hasta apuntarse a la nueva corriente de Cordova (bonita ciudad, mejor framework) y Phonegap que nos permiten hacer aplicaciones con HTML y mucho Javascript.

Herramientas tenemos así que no hay excusa para no ponerte a trastear, pero en este post quiero hablar sobre Ionic, un framework que lanzó Twitter que nos ayuda a  crear una app fácilmente sin tener unos conocimientos técnicos muy profundos, no, no hay punteros ni referencias ni enmascaramientos de bits así que tranquis…

Lo bueno de este framework, como todos los basados en Cordova/PhoneGap, es que solo se necesita programar la aplicación una vez y después la puedes compilar para cualquier sistema móvil.

Vamos a ir entrando en harina…

Empezando a crear una app con Ionic

Lo primero que vavamos a necesitar es instalar Node.js. Para el que no lo sepa, Node.js es un entorno de programación que nos permite hacer aplicaciones Javascript que se ejecutan desde el servidor, así muy resumidamente.

Cuando te lo hayas descargado de la página oficial e instalado, el siguiente paso es instalar la última versión de Cordova y las CLI (Command-line tools) de Ionic. Para ello ejecuta lo siguiente en la terminal.

npm install -g cordova ionic

Para comprobar que lo has instalado todo correctamente puedes probar a mirar las versiones de node, cordova e ionic desde la terminal.

Ups, tengo que actualizar...

Ups, tengo que actualizar…

¿Ya lo tienes? Ok, pues lo siguiente que tienes que hacer es decidir para que plataforma quieres programar tu aplicación. ¿Te gustan las cupcakes, bigotes y Starbucks? Muy bien, sigue éste link. Si por el contrario te gustan los robots verdes éste es tu link.

Aclaro para el gandul que no ha hecho ni caso que los dos últimos links llevaban a la guía para la instalación de las dependencias necesarias para programar bajo Android o para IOS, sea cual sea el perfil y son totalmente obligatorios seguir e instalar para crear una app, sino, no te va a funcionar e ya.

También sería interesante que te instalaras Gulp con soporte de livereload para poder ver los cambios que haces en la aplicación directamente en el navegador sin tener que estar haciendo un build a tu dispositivo cada dos por tres, Bower para la gestión de dependencias del Frontend y algún que otro preprocesador CSS, como SAAS, que mola.

Comenzando con el proyecto

Para empezar a crear una app móvil, Ionic nos da varias plantillas sobre las que construir como las que podéis ver en la siguiente imagen.

Plantillas para crear una app Ionica

Plantillas para crear una app Ionic

Si quieres una aplicación en blanco porque ya eres un master escribe lo siguiente en la terminal:

ionic start aplicacionChorra blank

Si quieres hacer una aplicación con pestañas escribe lo siguiente:

ionic start aplicacionChorra tabs

Si por último quieres una crear una app con menú lateral escribe lo siguiente:

ionic start aplicacionChorra sidemenu

En cualquier caso, tu ejecuta uno de esos comandos y veras que la terminal se pone a hacer muchas cosas, como descargar desde github el código base de Ionic y el template para tu aplicación entre otras cosas. Además las CLI de Ionic te proponen que configures tu proyecto con un preprocesador CSS, te sugiere que desarrolles con livereolad y que añadas una plataforma (Android o IOS) a parte de recordarte cómo seguir el ciclo de desarrollo construyendo, corriendo y compilando tu aplicación.

Command line tools de Ionic

Command line tools de Ionic

Al entrar en el directorio de la aplicación podrás ver que Ionic te ha creado ya toda la estructura de directorios y ficheros para que solo tengas que ponerte a programar, este sistema de skeletons me recuerda mucho a Yeoman o al Maven de los Javeros…

Ficheros básicos para una aplicación Ionic

Para que quede claro, tu aplicación siempre va a ejecutarse a través del fichero www/index.html y a mediante las diferentes configuraciones javascript y vistas se irá moviendo entre las pantalllas que necesite tu app.

Controlador frontal

Controlador frontal

Este fichero es lo que se llama un controlador frontal, la ejecución de la aplicación SIEMPRE va a empezar desde aquí y si lo abres puedes ver que se encargar de diferentes cosas como la carga de dependencias (Ionic, Cordova, estilos y nuestros javascripts), definir el nombre de la aplicación AngularJs (ng-app=”aplicacionChorra”) y definir las dos directivas necesarias para cargar la barra de navegación (ion-nav-bar) y el contenedor que irá cargando el resto de vistas (ion-nav-view)

Cuando he dicho que este fichero se encarga de cargar las depedencias de Cordova e Ionic, también he comentado que va a cargar nuestros javascripts, y el primer javascript y motor de la aplicación por defecto es el fichero js/app.js

Motor de la app

Motor de la app

Este fichero es el principal y en el tenemos que definir el nombre de la aplicación y las dependencias que va usar nuestra app. Pero así de primeras, las más importantes y necesarias son las del framework de Ionic, los servicios y los controladores que vamos a usar aunque también tendremos que configurar el enrutador y definir las diferentes pantallas que tendrá la aplicación.

Como veo que el tema se alarga, lo voy a ir dejando para separar todo el contenido en varios posts, Ionic y AngularJS tienen mucha chicha… pero os voy a dejar en mi repo de github un ejemplo típico de  una aplicación creada con Ionic para que os lo podáis clonar e ir trasteando entre post y post. Si queréis que siga escribiendo sobre cómo crear una app necesito saber que este tipo de posts, un poquito más técnicos, tienen buena acogida para que pueda seguir trabajando y sacando mas contenido relacionado con el desarrollo de aplicaciones móviles y para ello os propongo que si el post llega a compartirse 50 veces publicaré la segunda parte de esta guía.

Y ahora me voy que me espera Netflix!! Ala a cascala!

Gorka Muñoz Andrés

Me llamo Gorka Muñoz y soy un desarrollador melómano. Combino a la perfección la búsqueda de nuevos grupos con la pasión por la tecnología. Desde chiquitito me ha gustado la programación, ahora que soy mayor estoy metido en el mundo del SEO sin olvidarme del /Dev.

This Post Has 4 Comments

  1. Luis Dieguez

    Hola!!
    Que sistema operativo usas?

    1. Gorka Muñoz Andrés

      Linux, xubuntu 16.04 😉

  2. Luis

    Saludos. Como se conecta una página a la app? Por los controladores y vistas no?

    1. Gorka Muñoz Andrés

      Hola Luis, no te termino de entender.

Deja un comentario

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