ionic (2): un api estelar

Empezamos con una aplicación para trabajar contra una api-rest

Henri Rousseau

archivado en: JavaScript / 5 agosto, 2015 / taller:

En cierta manera, Ionic es como un engranaje para combinar angular, cordova y una especie de librería de componentes y estilos css del tipo bootstrap. Para terminar de hacernos una idea de este cócktel, vamos a preparar una aplicación muy útil para la vida cotidiana que, de paso, nos permitirá profundizar un poco más en los estados: un buscador de personajes, especies, planetas y vehículos espaciales de La Guerra de las Galaxias tirando del api-rest SWAPI.

Vista principal

Vamos primero con la vista principal, que servirá de marco para contener las distintas subvistas. La idea resulta familiar si se ha trabajado con algún frame php o wordpress: el header y el footer no cambian y en el centro se van enchufando las templates parciales.

stw_00

Pero antes que nada escogeremos un color dominante. Como ocurre en bootstrap, cuenta con una pequeña paleta que viene bien para cosas rápidas y estandarizadas, como los mensajes y similares. Se puede tunear con Sass, pero como este no es un ejercicio de estilo, nos vale con escoger uno cualquiera, como el bar-positive.

Para el header y el footer vamos a usar dos clases de css predefinidas (bar-header y bar-footer) que no tienen más misterio.

Por último, en el footer vamos a utilizar los botones de ionic, los más sencillos, a los que añadiremos unos iconos, que funcionan de manera similar a cualquier otro tipo de iconos por tipografía (clases en las <i>), pero que se pueden aplicar directamente en el tag button.

De esta manera, incluyendo la inicialización de la aplicación, que podemos llamar starWars, nos quedaría un código html similar a este:

<body ng-app="starWars">

<ion-header-bar align-title="center" class="bar-positive">

<h1 class="title">Star War's Search</h1>

</ion-header-bar>

<!-- Aquí irá el contenido dinámico -->

<div class="bar bar-footer bar-positive">

<div class="buttons">

<button class="button button-calm ion-ios-ionic-outline"> planets</button>

<button class="button button-calm ion-person"> people</button>

<button class="button button-calm ion-social-octocat"> species</button>

<button class="button button-calm ion-android-bicycle"> starships</button>

</div>

</div>

</body>

Ahora tocaría el <head>, que podemos dejar prácticamente igual que el que viene por defecto, primero cargando las css y luego el mondongo js (angular, ionic, cordova, app.js, los controladores y los servicios).

<head>

<meta charset="utf-8">

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Buscador formidable</title>

<link href="lib/ionic/css/ionic.css" rel="stylesheet">

<link href="css/st yle.css" rel="stylesheet">

<!-- ionic/angularjs js -->

<script src="lib/ionic/js/ionic.bundle.js"></script>

<script src="cordova.js"></script>

<!-- your app's js -->

<script src="js/app.js"></script>

<script src="js/controllers.js"></script>

<script src="js/services.js"></script>

</head>

Vale, pues para terminar esta entrada, que no el ejercicio, solo nos falta definir un par de archivos js.

Primero, el módulo principal en app.js, en el que inyectamos ionic, los controladores y los servicios (y dejamos el run, que ya veremos más adelante, tal cual viene por defecto):

angular.module('starWars', ['ionic', 'starWars.controllers', 'starWars.services'])

.run(function($ionicPlatform) {

$ionicPlatform.ready(function() {

if (window.cordova && window.cordova.plugins &&

window.cordova.plugins.Keyboard) {

cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

cordova.plugins.Keyboard.disableScroll(true);

}

});

});

Luego dejamos en el archivo controllers.js la definición del módulo del que iremos colgando los controladores (este tipo de estructura no es el más interesante, pero de momento nos vale).

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

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

});

Y lo mismo con los servicios, donde pondremos las llamadas al api-rest.

angular.module('starWars.services', []);

Bueno, pues con todo el tinglado ya listo, en la próxima entrada de esta serie empezaremos a hacer cosas interesantes. De momento lo dejo aquí... ah sí, no hay que olvidar que se puede ir viendo en todo momento lo que se está haciendo levantando un server con ionic desde la consola:

ionic server

|| Tags: , ,

Este artículo aún no ha sido valorado.

¿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.