Bien venidos al segundo post de Ionic Framework. En este artículo estaremos hablando sobre la instalación de dicho framework así como también todas sus dependencias necesarias y a su vez veremos una serie de comandos para poder crear diferentes aplicaciones con distintos templates que nos provee este framework.
Instalación de Ionic Framework
Como ya hemos hablado en el post anterior Ionic trabaja con AngularJs, Apache Cordoba, GulpJs, NodeJs, Git y Bower, por lo que estaremos realizando la instalación de dichos componentes para poder comenzar con nuestra primer aplicación. Antes de comenzar a instalar los componentes es necesario ejecutar todas las instalaciones como administrador del equipo, de lo contrario no podremos realizarlo.
Primero que nada debemos instalar NodeJS ya que este cuenta con un manejador de paquetes llamado npm el cual nos sera necesario para instalar muchas de nuestras dependencias. Para instalar NodeJS debemos de dirigirnos la sitio oficial y descargar su instalador.
Para poder corroborar que la instalación fue satisfactoria y ademas para saber que versión instalamos de NodeJS y de npm se pueden correr los comandos node -v y npm -v.
[andres@localhost ~]$ node -v v6.10.2 [andres@localhost ~]$ npm -v 3.10.10
A continuación debemos instalar Git el cual es necesario para tener un control de versionado de nuestro proyecto y ademas es utilizado para descargar las librerías que necesita Ionic para ser ejecutado. Esto lo pueden descargar e instalar desde su sitio oficial y al igual que para NodeJS se puede corroborar si la instalación fue realizada correctamente ejecutando desde una terminal el comando git –version, el cual nos dará que version hemos instalado en nuestro computador.
[andres@localhost ~]$ git --version git version 2.9.3
Luego a traves del manejador de paquetes npm debemos instalar Bower, el cual lo utilizaremos para administrar las dependencias de las librerías de nuestra aplicación. Bower esta construido sobre NodeJS así que podemos instalarlo desde el manejador de paquetes npm como mencionamos antes. Lo que debemos hacer es abrir una terminal y ejecutar el comando npm install bower -g
La variable -g nos permite instalar Bower de forma global para así de esta manera podremos acceder a el desde cualquier directorio de nuestro ordenador. Al igual que en el resto de los casos se puede verificar si la instalación fue correctamente ejecutada corriendo el comando bower -v desde una terminal.
[andres@localhost ~]$ bower -v 1.8.0
Lo siguiente a instalar el Gulp, este es un sistema de construcción desarrollado sobre NodeJS el cual automatiza un gran numero de tareas monótonas y repetitivas, minimiza archivos, optimiza imágenes, como otras cosas. En Ionic se utiliza principalmente para convertir el código SSCA en código CSS.
Para instalarlo de forma global debemos abrir una terminal y ejecutar el siguiente comando: npm install gulp -g
Luego para corroborara que todo se haya instalado correctamente se puede correr el comando gulp -v, de esta manera nos dirá que versión hemos instalado en nuestro ordenador.
[andres@localhost ~]$ gulp -v [20:14:23] CLI version 3.9.1
Por último para completar el setup de Ionic instalaremos el Ionic CLI que es un complemento del Cordova CLI al que añade una serie de características adicionales. Para instalar Apache Cordova debemos hacerlo a través del manejador de paquetes npm, lo que debemos hacer es abrir una terminar y correr el comando npm install -g cordova
Al igual que en los casos de Bower y Gulp se instala con al variable -g para así hacerlo de forma global y poder acceder a el desde cualquier directorio. Una vez lo instalemos podemos verificar que todo haya salido correctamente corriendo el comando cordova -v.
[andres@localhost ~]$ cordova -v 7.0.1
Luego de tener todo esto instalado procedemos a incorporar Ionic Framework, para realizar esto debemos abrir una terminal e ingresar como administrador para luego correr el comando npm install -g ionic. Una vez este instalado corroboramos como en casos anteriores que versión tenemos, esto lo podemos ver ejecutando el comando ionic -v.
[andres@localhost ~]$ ionic -v 3.4.0
Templates de Ionic Framework
En los siguientes pasos comenzaremos con la creación de nuestro primer proyecto, pero primero que nada vamos a hablar sobre los distintos templates con los que contamos ya que es fundamental para saber con cual nos conviene empezar.
Template tabs
Este nos brinda una serie de tres tabs en donde se muestra información la cual puede ser modificado según nosotros necesitemos. Este template es el que viene por defecto si es que no se especifica ningún otro, mas adelante veremos de como hacerlo.
Template sidemenu
Dicho template nos crea un menú lateral para que nosotros luego lo modifiquemos a nuestra necesidad.
Template blank
El template blank nos crea un proyecto en blanco, para que nosotros comencemos a crear nuestra aplicación desde cero.
Template tutorial
Este template nos crea un menú lateral con una serie de items para listar, consta aclarar que este template lo veo muy parecido a el de sidemenu.
Tempalte super
Este template es el mas completo que trae Ionic, en donde tenemos una serie de imágenes para ver, así como también un registro de usuario y un login del mismo. A su vez contamos con un perfil de usuario y también un listado de nuestros contactos entre otras funcionalidades.
Para crear un proyecto con cualquiera de estos templates basta con ejecutar el comando ionic start «nombre de tu proyecto» <<nombre del template, ej: sidemenu>>
Creación de nuestro primer proyecto
Vamos a comenzar con la creación de nuestro proyecto en donde utilizaremos el template tabs que es el que viene por defecto. Primero que nada deberemos de crear una carpeta en donde almacenaremos nuestros distintos proyectos, en mi caso la cree dentro de la carpeta Documentos con el nombre «ionicProjects». Una vez realizado esto debemos acceder a una terminal de nuestro sistema operativo y situarnos en dicha carpeta recién creada, una vez hecho esto debemos correr el siguiente comando:
ionic start tabsProject tabs
Una vez creado nuestro proyecto el cual le colocamos como nombre tabsProject, debemos situarnos en la carpeta que nos creo con dicho nombre corriendo el comando cd tabsProject. Luego de hacer esto debemos ejecutar nuestro servidor para poder ver nuestra aplicación corriendo en nuestro navegador que tengamos por defecto, es recomendable que se utilice Google Chrome ya que tiene un apartado para desarrolladores que nos será de utilizada. Para correr esto debemos ejecutar desde la terminal y situados en nuestra carpeta «tabsProject»el siguiente comando:
ionic serve
Luego de ejecutar esta acción se nos abrirá una pestaña nueva en el navegador con nuestra aplicación corriendo, para poder utilizar las funciones de desarrollador de Google Chrome y ejecutar nuestra app en base a un dispositivo móvil debemos de ir al menú de Chrome luego dirigirnos a la pestaña de «Más herramientas» y luego hacer click en la opción «Herramientas del desarrollador», de esta forma se nos abrirá una solapa en la parte inferior del navegador en donde tendremos la opción de ver nuestra aplicación sobre un móvil. Para hacer esto consta solamente con clickear en el botón que tiene como dibujo un celular o sino ejecutar la combinación de teclas Ctrl + Shif + m
Una vez estemos ahí se podrá ver en la parte inferior que contamos con 3 tabs con los nombres «Home», «About» y «Contact» en los cuales podremos clickear y nos dirigirá a otra pantalla. Para poder modificar estos nombres o si es necesaria para agregar o eliminar alguno debemos editar el archivo tabs.html que se encuentra dentro de nuestro directorio tabsProject, la ruta especifica de este archivo es la siguiente:
ionicProjects/tabsProject/src/pages/tabs/tabs.html
Es este archivo veremos una serie de etiquetas que nos provee ionic en donde funcionan como tabs de nuestro proyecto, lo que nosotros vemos actualmente es lo siguiente:
<ion-tabs> <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab> <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab> <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab> </ion-tabs>
Si nosotros queremos podemos modificar el nombre de todos estos tabs colocándolos por ejemplo en español y con valores que nosotros queramos, lo que debemos hacer es modificar el valor de la propiedad tabTitle de la siguiente manera.
<ion-tabs> <ion-tab [root]="tab1Root" tabTitle="Inicio" tabIcon="home"></ion-tab> <ion-tab [root]="tab2Root" tabTitle="Nosotros" tabIcon="information-circle"></ion-tab> <ion-tab [root]="tab3Root" tabTitle="Contacto" tabIcon="contacts"></ion-tab> </ion-tabs>
Conclusión
Ionic tiene como gran ventaja que ya nos trae plantillas predefinidas que nos ahorrara mucho tiempo de investigación y de creación al momento de programar. Este framework tiene como gran virtud lo fácil que es de instalar y la creación de nuestros proyectos, ya que con 2 simples comandos tenemos nuestra aplicación corriendo.
Si te ha gustado este post sigue atento nuestra serie de ‘Manual de Ionic Framework – Parte 3‘ que publicaremos pronto.
