Ionic Framework – Primera aplicación

Hace tiempo que había visto información sobre Ionic Framework por la web pero no le había dado mucha importancia debido sobre todo a que estaba mas o menos contento con Jquery Mobile y  no me apetecía cambiar sin más ni más.

También he de decir que estos dos últimos años he probado varios framew0rks pero ninguno se ajustaba a mis necesidades tanto como para cambiar.

Pero eso ha cambiado porque al ponerme serio y empezar a leer algunos artículos sobre Ionic Framework, hice algunas pruebas y quedé tan sorpendido que por fin he decidido cambiar de framework.

Antes de nada hay que decir que antes de empezar deberíamos tener algunos conocimientos sobre, html, css, javascript y angularjs.

Aunque es posible utilizar las librerías de Ionic Framework descargándolas y añadiéndolas a nuestro html, os voy a explicar la que para mi es la mejor forma. Estoy convencido que cuando lo probéis, estarés de acuerdo conmigo en esta forma de trabajar con Ionic y Phonegap.

Antes de instalar Ionic Framework, debemos tener instalado Nodejs. Como no tiene ningún secreto, simplemente lo descargáis y lo instaláis.

Tengo que decir que si queréis sacarle el máximo partido lo ideal es que tengáis instaladas las herramientas de desarrollo de vuestras plataformas favoritas como pueden para Android e IOS. Sobra decir que para compilar apps para IOS hace falta un Mac.

Asumimos que ya hemos instalado Nodejs. Desde la consola de comandos introducimos:

npm install -g ionic

También deberíamos instalar Cordova de la siguiente forma:

npm install -g cordova</pre>
<pre>

Bueno, ahora vamos a crear un nuevo proyecto Ionic y para ello, desde la consola de comandos nos posicionamos en el directorio sobre el que vamos a crear nuestro proyecto Ionic.

Creamos un directorio para incluir dentro este nuevo proyecto. Yo le he llamado: «primerionic», pero le podéis poner el nombre qué mas os inquiete. Recordad que es una prueba y haremos muchas más y mucho más interesantes.

Ejecutamos el siguiente comando :

</pre>
<pre>ionic start primerionic blank

En el comando anterior distinguimos «black» al final. Esto lo hacemos para que nos cree una app que herede de la plantilla básica «blank», que es la más sencilla. También disponemos de estas otras dos plantillas:  «tabs» y «sidemenu».

Si revisamos el directorio «primerionic», vemos que se han añadido un montón de directorios y ficheros:

A nosotros lo que más nos interesa es el contenido del directorio «www» porque es donde vamos a realizar los cambios y modificaciones, pero esto lo haremos en otro tutorial. Aunque como prueba, podemos cambiar el texto dentro del <h1 class=»title»> para que veamos el cambio.

Ahora vamos a ver cómo queda la app antes de compilarla y para ello nos posicionamos en el directorio de nuestra app y ejecutamos el comando:

ionic serve

Esto abrirá nuestra app en nuestro navegador web y podremos ver cómo queda:

Interesante, ¿verdad? Pues es todavía más interesante porque podemos hacer cambios en el documento y cuando guardamos, nuestra app también se actualiza en el navegador.

Podéis hacer la prueba de cambiar algo en el código, guardar el documento y ver que inmediatamente se actualiza en el navegador.

Bueno, creo que lo vamos a dejar aquí aunque hay más cosas interesantes de debemos saber de este framework pero vamos a ir poco a poco.

oscar

Programador WordPress freelance