ionic (1): introducción

Primera entrada de una serie dedicada a ionic

Henri Rousseau

archivado en: JavaScript / 4 Agosto, 2015 / taller:

Aviso preliminar: para seguir esta serie es recomendable tener conocimientos de cordova, angular y sass.

ionic es un framework muy bien documentado que sirve para desarrollar aplicaciones híbridas con js y HTML5 apoyándose en otros frames y librerías como angular, sass o cordova.

Para instalar todo el tinglado que hay por debajo necesitaremos node y el npm, git y alguna consola, como la propia de git si estamos en windows. Además, tendremos que tener instalado cordova, el SDK de Android y el JDK de java... en fin, todo lo que indico en el post de introducción a cordova.

Con node, git, cordova, el SDK y el JDK ya instalados, podemos pasar al ionic, que podemos descargar a la antigua usanza (deprecated) o con el npm

Se puede descargar a la manera antigua, con git o con node:

$ npm install -g ionic

Además, existe un proyecto yeoman de ionic.

Una vez descargado de una manera u otra, podemos iniciar un proyecto escribiendo por consola:

$ ionic start nombreDelProyecto

La maquinaria se pone en marcha y, cuando termina, en el directorio que hemos especificado nos deja la estructura

- hooks: para los hooks de cordova (aunque en este frame se considera deprecated este directorio y se prefiere usar el config.xml y el plugin.xml).

- plugins: para instalar plugins de ionic y cordova

- scss: las css preprocesadas de Sass

- www: el cogollo de nuestra aplicación.

* archivos generales de configuración (bower, package, gulp...).

Bueno, ya los iremos viendo con calma, vamos ahora con el inevitable...

Hola Mundo

Como decía, en el directorio www se encuentra el código de la aplicación propiamente dicha. El archivo index.html que genera de forma automática ionic sigue una estructura reconocible que de momento no necesita mayor explicación: se cargan las css y los js y en el body el código html.

Como vamos a preparar un ejemplo más sencillo que el que viene por defecto, podemos borrar o comentar casi todo lo que se encuentra en el body. Y en este último tag, como es habitual en angular, incluimos el atributo ng-app con el nombre de la aplicación.

Lo único que vamos a dejar es la etiqueta ion-nav-view, que como veremos con más detalle se comporta de manera similar al ui-view.

De esta manera, nos quedará algo así:

<body ng-app="miAppMaravillosa">

<ion-nav-view></ion-nav-view>

</body>

Vamos ahora con el archivo app.js, que también debería resultarnos familiar. En la primera parte del módulo, en la definición de la fase run, hay unas especificaciones para cordova a las que de momento no haremos caso y en la segunda, en el config, la definición de estados del ui-view, que si no conoces puedes consultar en este post, pero que en esencia consiste en asociar un controlador y una vista con un "estado", el cual podemos modificar a voluntad. Así, por ejemplo, si estamos en estado turumbulillos, cargamos el controlador turumbulillos y la vista homónima, que se mostrará en el tag <ion-nav-view>.

En este primer ejemplo, tendremos solo un estado, el principal (main), así que dejamos esa parte de manera similar a esta:

.config(function($stateProvider, $urlRouterProvider) {

$stateProvider

/* Definimos un estado default */

$urlRouterProvider.otherwise("/main");

/* Preparamos el mapa de rutas / estados */

$stateProvider

.state('main', {

url: "/index",

templateUrl: "templates/main.html",

controller: 'main'

});

 

Ahora solo nos falta inyectar el archivo con los controladores...

angular.module('miAplicacionMaravillosa', ['ionic', 'miAplicacionMaravillosa.controllers'])

.run(function($ionicPlatform) {

$ionicPlatform.ready(function() {

...

Preparar un controlador en controllers.js:

angular.module('notas.controllers', [])

.controller('main', function($scope) {

$scope.saludo = "Hola Mundo";

});

y una vista llamada main.html que guardaremos en templates:

<p>{{saludo}}</p>

Ale op, con todo listo, desde el directorio de la aplicación, añadimos por consola la(s) plataforma(s) que queramos:

$ ionic platform add android

y compilamos:

$ ionic build android

Y ya está, cuando termina el proceso, en platforms/ android/ build/ outputs/ apk/ android-debug.apk está nuestra flamante aplicación.

Bueno, un poco apresurada la explicación, pero en próximas entradas irán quedando estas cosas más claras. Por hoy lo dejo aquí, que estoy baldao.

Para evitar los problemas de cross-domain de angular, si queremos ir viendo lo que estamos haciendo en el navegador, necesitamos levantar un server. Podemos usar apache, nginx y similares, pero es más fácil si levantamos uno directamente con ionic:

ionic server

(ojo, lo levanta en localhost:8080, que te puede dar la murga con el skipe)

 

|| Tags: , ,

valoración de los lectores sobre ionic (1): introducción

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración negativa
  • 4 sobre 5 (1 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.