¿Cómo consumir un servicio REST desde IONIC2 con ANGULAR2 TYPESCRIPT?

INTRODUCCION

Desde la liberación de ANGULAR 2 por parte del equipo responsable en Google, los creadores de IONIC se propusieron adaptar también su Framework en busca de aprovechar todas las mejoras[1] aplicadas en la nueva versión de angular.

Teniendo en cuenta lo anterior, entonces, se presenta a continuación un ejemplo básico de cómo realizar una petición a través del método GET a un servicio REST y presentarlo en una aplicación básica de ionic2.

REQUISITOS

• Tener instalado ANDROID SDK[2] (Opcional)
• Tener instalado el ambiente de ionic2[3]
• Conocimientos Básicos en TypeScript[4]
• Conocimientos básicos en Ionic2
• Conocimientos básicos en Angular2
• Tener instalado Netbeans (Opcional)
• Tener acceso a un servicio REST cuya información de retorno se encuentre en el tipo de dato JSON[5]

PROCEDIMIENTO

A continuación se presentan los pasos a realizar:

1. Abrir el proyecto instalado de cutePuppyPics ofrecido en el proceso de instalación de Ionic2[6]
2. Abrir el componente ‘tabs.ts’ ubicado en “cutePuppuPics/Site Root/app/pages/tabs/”
3. Eliminar la asignación de las páginas 2 y 3 ya que no se necesitaran, el resultado debe ser similar al siguiente (ver figura 1):

Figura 1.Tabs.ts

4. Abrir la plantilla ‘tabs.html’ ubicado en “cutePuppuPics/Site Root/app/pages/tabs/” y eliminar las etiquetas para presentar las páginas 2 y 3 ya que no se utilizarán, el resultado debe ser similar al siguiente (ver figura2):

Figura 2. Tabs.html

5. Ahora es necesario crear la lógica de conexión a nuestro servicio REST, para esto utilizaremos un servicio al que llamaremos ‘multi.service.ts’ y lo colaremos en la siguiente ruta “cutePuppuPics/Site Root/app/services/”  , dentro de este servicio haremos uso del cliente http[7] de ANGULAR2 para realizar la petición GET y el operador ‘map’ para interpretar los datos retornados del servicio REST. Toda la lógica estará contenida en un método llamado getDatos(), el servicio queda así (ver figura 3):

Figura 3. Multi.service.ts

6. En el punto anterior especificamos de manera explícita la ruta del servicio REST, para este caso es ‘http://localhost:81/bostonscient/public_html/app_dev.php/api/cotizaciones’ cuyo resultado es información en formato JSON (ver figura 4):

Figura 4. Servicio REST

7. Ahora es necesario invocar y utilizar nuestro servicio desde cualquier ubicación de nuestra aplicación, en esta caso iremos al componente de la página principal (página 1) accediendo al archivo ‘page1.ts’ ubicado en  “cutePuppuPics/Site Root/app/pages/page1/”. Una vez ubicados allí lo primero es invocar nuestro servicio para esto se usa .

En el constructor de nuestro componente ejemplificamos un objeto llamado _httpService del tipo ‘MultiService’ para acceder a todas las funcionalidades de nuestro servicio.

Luego generamos un método visible de nuestro componente llamando getURL() el cualse encargara de invocar el método getDatos() de nuestro servicio, los datos retornados de este método los almacenaremos en una atributo de nuestro componente al que llamaremos datosConsultados y será del tipo any[8] para facilitar su posterior uso. El resultado final deber ser (ver figura 5):

Figura 5. Page1.ts

8. Ahora es necesario prepara la plantilla para presentar los datos consultados del servicio REST, para esto se modificará la plantilla page1.html ubicada en “cutePuppuPics/Site Root/app/pages/page1/”, allí presentaremos la información de manera tabulada y ofreceremos un botón que invocara el método getUrl(). Además haciendo uso de *ngIf y *ngFor ser valida que exista información retornada del servicio REST y su respectivo recorrido dado que los datos están en tipo JSON. Algo útil a tener en cuenta es que al invocar el método subscribe  en el objeto Observable retornado de nuestro servicio, se ofrece poder personalizar la funcionalidad de la aplicación cuando existen datos (data) y cuando se puede presentar un error (error) y cuando finaliza la petición GET (). El resultado es (ver figura 6):

Figura 6. Page1.html

9.  Ahora podemos probar como se presentar los datos en la aplicación, para ello es necesario ubicarse en la carpeta del proyecto a través de la consola de comandos (cmd en windows) y ejecutar ionic serve para ejecutar la aplicación, el resultado final se presenta a continuación:

CONCLUSIÓN

Resulta bastante fácil y rápido utilizar TypeScript para generar toda la lógica que utilizara una aplicación hibrida con Ionic2 ya que le evita al programador la necesidad de aprender otro lenguaje de programación, en parte, esto es gracias a que la sintaxis utilizada en TypeScript es muy similar a la empleada en lenguajes de programación populares como JAVA, PHP y C#, adicional a esto gracias a todos los componentes y librerías propias de ANGULAR2 realizar peticiones de información a fuentes externas resulta rápido, confiable y controlable.

[1] Más información aquí: https://angular.io/features.html

[2] Más información aquí: https://developer.android.com/studio/index.html

[3] Más información aquí: http://ionicframework.com/docs/v2/getting-started/installation/

[4] Más información aquí: https://www.typescriptlang.org/index.html

[5]  Más información aquí: http://www.json.org/

[6] Más información aquí: http://ionicframework.com/docs/v2/getting-started/installation/

[7] Más información aquí: https://angular.io/docs/ts/latest/guide/server-communication.html

[8] Más información aquí: https://www.typescriptlang.org/docs/handbook/basic-types.html