Creando una aplicación con Ionic Creator
Si necesitas crear una aplicación móvil de forma rápida y sencilla, con Ionic Creator podrás hacerlo sin tener conocimientos de programación
No se puede negar. Las aplicaciones para dispositivos móviles han llegado a nuestras vidas para cambiar la forma con la que interactuamos con nuestro entorno. Únicamente hace falta fijarse en casos de éxito cómo el reciente ‘Pokémon GO’ para darnos cuenta de esta realidad. Por este motivo, cada vez es más necesario disponer de herramientas que nos permitan crear aplicaciones que funcionen sobre las principales plataformas móviles disponibles en el mercado. En esta entrada trabajaremos con Ionic, un Framework que nos ofrece un conjunto de utilidades para desarrollar aplicaciones móviles híbridas.
Introducción a Ionic Framework
Seguramente más de uno de vosotros de forma reciente habréis oído hablar de Ionic. A grandes rasgos, Ionic Framework nos proporciona un conjunto de herramientas para la creación de aplicaciones móviles híbridas bajo los más que conocidos lenguajes HTML, CSS, y JavaScript. El ecosistema de Ionic se caracteriza por una búsqueda constante de la optimización e integración con dispositivos móviles para conseguir el mayor rendimiento y la mejor experiencia de usuario posible.
Junto con el uso de Apache Cordova, podremos llegar a construir app’s con un gran número de funcionalidades, con una integración casi perfecta con el hardware de nuestros dispositivos, y muy importante, podremos desplegar nuestra aplicación bajo cualquier plataforma móvil (iOS, Android, WP…) sin la necesidad de crear una aplicación nativa única para cada uno de los sistemas operativos mencionados.
Primeros pasos: Ionic Creator
Para crear nuestra app bajo Ionic utilizaremos una de las herramientas más interesantes de este sistema. Se trata de Ionic Creator, una utilidad que nos permitirá crear nuestra aplicación sin la necesidad de escribir una sola línea de código. Sí sí, has leído bien, no hace falta escribir código. A cambio, únicamente haremos Drag&Drop sobre los componentes que queramos añadir al layout de nuestra app.
Para empezar a utilizar Ionic Creator accedemos al portal de la herramienta y, en caso de no tener una cuenta, nos registramos para crear una. Una vez dentro, creamos un nuevo proyecto. Para este ejemplo, seleccionaré ‘Tabs’ como template del proyecto, aunque podéis seleccionar el que más os convenga.
Definiendo estilos
En primer lugar, si deseamos darle un toque personalizado a nuestra app nos dirigimos al apartado ‘Theming & SCSS’. Desde este apartado tendremos la opción de definir los estilos básicos que se utilizarán en las páginas. Podemos seleccionar los colores del header y menús, fuentes por defecto e incluso modificar alguno de los estilos propios de Ionic a través de SASS.
Añadiendo componentes
En la parte izquierda de la herramienta, disponemos de todos los componentes que podemos añadir a nuestra app. Cada componente podrá ser añadido haciendo Drag&Drop sobre las páginas que deseemos. Por cada uno de los componentes seleccionados, se nos abrirá un panel en la parte derecha de la pantalla con un seguido de opciones adicionales. Cada una de estas opciones modifica diferentes propiedades de los componentes (tamaño de las imágenes, posición de los elementos…). Recomiendo investigar entre todas las opciones para encontrar aquellas propiedades que más nos interesen modificar.
En caso de haber seleccionado un template con ‘Tabs’, tendremos una entrada adicional llamada ‘Tabs Controller’. Desde esta entrada podremos definir las propiedades de los diferentes ‘Tabs’ (iconos, tipografía, posición de los iconos…), así como las páginas asociadas a cada una de estas pestañas.
¿Y si quiero…?
Como habréis podido observar, los componentes que nos ofrece Ionic Creator son limitadas y seguramente nos falte alguno para realizar todo aquello que tengamos en mente. Aún así, hay que reconocer que en el último año Ionic Creator ha evolucionado añadiendo muchísimas más funcionalidades que las que tenia en su inicio, no cabe duda que en los próximos años Ionic Creator crecerá para disponer de aún más herramientas.
Si queremos indagar un poco más, lo único que necesitamos es descargarnos el código fuente que el propio Creator ha generado a través del apartado ‘Export’, y empezar a trastear con los archivos del proyecto. Partiendo del código que hemos generado con Creator, nos resultará mucho más fácil implementar aquellas funcionalidades extra que deseemos incorporar.
Ejemplo
Dejo un pequeño ejemplo de la aplicación que he realizado para esta entrada. La realización no me ha llevado más de 20 minutos, así que podéis haceros una idea de lo rápido y ágil que resulta crear una aplicación móvil con esta herramienta.
