Archivo de la etiqueta: Ionic

Ionic 2 y Angular 2 – Segunda parte

Si quieres saber de que va esto, lee la primera parte.

La siguiente habilidad o conocimiento que tenía que obtener era saber llamar a una API externa para obtener unos datos.

Antes de crear un servicio, lo cual abordaré en la tercera parte, hay que saber lo más básico de todo: ¿cómo puedo hacer una llamada HTTP a una URL?

Para ello tiraremos de Angular y del módulo http:

import {Http} from '@angular/http';

Como mi idea desde el principio era hacer todo modular y poder abstraerme de las llamadas, lo que hice fue crear un componente que llamé Query y que será el que utilice para realizar las llamadas a la API externa:

import { Injectable } from '@angular/core';
import {Http} from '@angular/http';

@Injectable()
export class Query {

  constructor(private http: Http) {
    this.http = http;
  }

  get(url, mapper) {
    return this.http.get(url).map(data => mapper(data));
  }

  post(url, params, mapper) {
    return this.http.post(url, params).map(data => mapper(data));
  }
}

Dentro de la clase Query he se ven tres métodos:

  • constructor
  • get
  • post

El primero es el constructor de la clase, lo más interesante de él es definir las variables que recibe, las cuales son lo que antes hacíamos antes en ionic 1 al inyectar variables en el constructor del controlador. Por tanto aquí lo que estamos haciendo es definir la variable http que será de tipo Http. Después para poder usarla en el resto de métodos fuera del constructor lo que hacemos es asignarlo a this, que en este caso es la propia instancia de la clase.

Los otros dos métodos son llamadas de tipo GET y POST. Aquí cabe destacar el parámetro mapper, el cual lo voy a usar para formatear los datos que llegan de la API por si quiero hacer una transformación antes de usar los datos en la app.

Con todo esto, la manera de hacer una llamada sería la siguiente:


import { Query } from './query';

export class MiClase {
  constructor(private query: Query) {
    query.get('http://miapi.com/v1/metodo', (e) => e).subscribe(datos => this.datos = datos);
  }
};

Se puede ver en el ejemplo que en vez de usar promesas, ahora Angular usa Observables, que según dicen son mejores que las promesas, por tanto http devuelve un Observable al que hay que subscribirse para poder recoger los datos.

Por hoy ya es suficiente, en la próxima parte crearemos un servicio que haga uso de Query.

Ionic 2 y Angular 2 – Primera parte

Después de un tiempo resistiendome y engañandome a mi mismo de que Ionic con Angular 2 no era lo que yo necesitaba para crear nuevos proyectos. Después de dar mis primeros pasos con React y sobre todo después de asistir a un curso, muy bueno por cierto, de Angular 1.5.X orientado a componentes. Por fin, hace un par de semanas, le di una oportunidad a la nueva versión, reescrita desde cero y con Typescript, de Ionic.

Para probar cómo funcionaba y qué concimientos iba a necesitar para en un futuro no muy lejano implementar una app para algún cliente, vi que necesitaba adquirir unos conceptos básicos que me permitieran desarrollar desde cero una app sencilla con unas pocas pantallas, un par de listas, almacenamiento local y llamadas a una API externa para obtener contenido.

Por todo ello, voy a escribir una serie de artículos en los cuales voy a ir contando qué componentes básicos he usado, cómo he hecho la app y qué pasos he seguido para adquirir todos los conocimientos necesarios para crear una app con Ionic.

En esta primera parte voy a hablar de la estructura de la app, es decir de cómo organizar el proyecto para que luego cuando haya que ir añadiendo funcionalidad no tengas todo desperdigado y tengas que repetir código una y otra vez.

Lo primero que hice, aunque parezca muy básico, fue seguir la página de Get started,  con lo que instale ionic y cordova, y escogí la plantilla de tabs para crear mi app:

npm install -g cordova ionic

ionic start myApp tabs

Una vez hecho esto observé que la estructura directorios había cambiado un poco, para empezar ya no metes el código en www, sino que existe un directorio src en el cual metes todo el código de la app, antes tenías por un lado el los js en www/js y las plantillas en www/templates, ahora como estás orientando tu programación a componentes tienes en src un directorio pages que a su vez contiene un directorio por cada componente y dentro de estos últimos, tres archivos: plantilla, estilos y javascript(typescript):

home.html home.scss home.ts

Seguimos analizando y vemos una carpeta app en la que tenemos los mismo elementos que en una página pero la parte de funcionalidad dividida en componente, modulo y principal:

app.component.ts	app.module.ts		main.ts
app.html		app.scss

Esto se correspondería con el archivo app.js que teníamos antes y donde inyectábamos todos los módulos necesarios para la app, así como la configuración de la app y la definición de las rutas, y alguna que otra directiva.

El archivo app.component.ts, define el componente principal sobre el cual se va construir la app, yo lo he dejado tal y como estaba y no me ha hecho falta modificarlo.

En cambio el archivo app.module.ts, lo he tenido que tocar y mucho ahí es donde tienes que importar todos los componentes que vayas a usar en la app, tanto páginas completas, como partes de estas, así como servicios.

Dentro del NgModule hay 5 apartados:

  • declarations,
  • imports
  • bootstrap
  • entryComponents
  • providers

En declarations van el componente de la app, así como todos los componentes de páginas y tabs, imports y bootstrap no los he tocado. en entryComponents vuelve a estar la páginas y los tabs. Y en providers he añadido los servicios que he ido creando.

main.ts, sinceramente ni había mirado lo que tenía dentro, así que se queda sin modificar.

Con todo esto me di cuenta que la estructura que crea Ionic por defecto no está mal y se puede usar para desarrollar una app medianamente compleja, el único añadido que he hecho ha sido crear a la altura de pages un directorio services que es dónde van a ir todos los servicios de la app.

En la siguiente parte hablaré de cómo hacer llamadas a una API externa para obtener los datos que queremos visualizar en la app.

 

Angular y rendimiento

Últimamente estoy haciendo muchos proyectos utilizando Angular, bien sea usando solo Angular + Bootstrap o Ionic que está basado en él.

Me suele gustar buscar información sobre buenas prácticas y mejorar el rendimiento de las aplicaciones hechas con dicha tecnología y hoy he encontrado un artículo en el cual con una sola línea se mejora de manera notable el rendimiento en producción de una aplicación hecha con Angular.

La línea en cuestión es la siguiente:

$compileProvider.debugInfoEnabled(false);

Concretamente su uso completo sería el siguiente:

myApp.config(['$compileProvider', function ($compileProvider) {
  $compileProvider.debugInfoEnabled(false);
}]);

Lo he probado en dos proyectos que tengo hechos con Angular y en uno con Ionic, y en los de Angular la mejora ha sido bastante buena, las páginas renderizan mucho más rápido. En Ionic he notado que la fluidez de la app al cambiar de vista mejoraba de manera considerable.

La recomendación de todas formas es que lo actives cuando la aplicación esté en producción así que yo la he usado de la siguiente manera:

// Angular

myApp.config(['$compileProvider', function ($compileProvider) {
  if (document.location.host.indexOf('localhost') === -1) {
    $compileProvider.debugInfoEnabled(false);
  }
}]);

// Ionic

myApp.config(['$compileProvider', function ($compileProvider) {
  if (window.cordova) {
    $compileProvider.debugInfoEnabled(false);
  }
}]);

Aquí dejo la referencia al artículo en cuestión y alguno más que da consejos para mejorar el rendimiento de aplicaciones hechas con Angular:

https://medium.com/swlh/improving-angular-performance-with-1-line-of-code-a1fb814a6476#.ov0lfveqz
http://maxmautner.com/post/135816438020/11-huge-ionic-performance-tips
http://julienrenaux.fr/2015/08/24/ultimate-angularjs-and-ionic-performance-cheat-sheet/