{"id":1,"date":"2016-05-26T06:58:28","date_gmt":"2016-05-26T11:58:28","guid":{"rendered":"http:\/\/apdi.co\/wp\/?p=1"},"modified":"2021-12-06T11:58:14","modified_gmt":"2021-12-06T16:58:14","slug":"como-consumir-un-servicio-rest-desde-ionic2-con-angular2-typescript","status":"publish","type":"post","link":"https:\/\/www.apdi.co\/blog\/como-consumir-un-servicio-rest-desde-ionic2-con-angular2-typescript\/","title":{"rendered":"\u00bfC\u00f3mo consumir  un servicio REST desde IONIC2 con ANGULAR2 TYPESCRIPT?"},"content":{"rendered":"<p><strong>INTRODUCCION<\/strong><\/p>\n<p>Desde la liberaci\u00f3n de ANGULAR 2 por parte del equipo responsable en Google, los creadores de IONIC se propusieron adaptar tambi\u00e9n su Framework en busca de aprovechar todas las mejoras[1] aplicadas en la nueva versi\u00f3n de angular.<\/p>\n<p>Teniendo en cuenta lo anterior, entonces, se presenta a continuaci\u00f3n un ejemplo b\u00e1sico de c\u00f3mo realizar una petici\u00f3n a trav\u00e9s del m\u00e9todo GET a un servicio REST y presentarlo en una aplicaci\u00f3n b\u00e1sica de ionic2.<\/p>\n<p><strong>REQUISITOS<\/strong><\/p>\n<ul>\n<li>Tener instalado ANDROID SDK[2] (Opcional)<\/li>\n<li>Tener instalado el ambiente de ionic2[3]<\/li>\n<li>Conocimientos B\u00e1sicos en TypeScript[4]<\/li>\n<li>Conocimientos b\u00e1sicos en Ionic2<\/li>\n<li>Conocimientos b\u00e1sicos en Angular2<\/li>\n<li>Tener instalado Netbeans (Opcional)<\/li>\n<li>Tener acceso a un servicio REST cuya informaci\u00f3n de retorno se encuentre en el tipo de dato JSON[5]<\/li>\n<\/ul>\n<p><strong>PROCEDIMIENTO<\/strong><\/p>\n<p>A continuaci\u00f3n se presentan los pasos a realizar:<\/p>\n<ol>\n<li>Abrir el proyecto instalado de cutePuppyPics ofrecido en el proceso de instalaci\u00f3n de Ionic2[6]<\/li>\n<li>Abrir el componente \u2018tabs.ts\u2019 ubicado en \u201ccutePuppuPics\/Site Root\/app\/pages\/tabs\/\u201d<\/li>\n<li>Eliminar la asignaci\u00f3n de las p\u00e1ginas 2 y 3 ya que no se necesitaran, el resultado debe ser similar al siguiente (ver figura 1):<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/www.aplicacionesdinamicas.com\/blog\/wp-content\/uploads\/2016\/05\/figura1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-186\" src=\"http:\/\/www.aplicacionesdinamicas.com\/blog\/wp-content\/uploads\/2016\/05\/figura1-300x143.png\" alt=\"figura1\" width=\"300\" height=\"143\" \/><\/a><\/p>\n<p style=\"text-align: center;\">Figura 1.Tabs.ts<\/p>\n<ol start=\"4\">\n<li>Abrir la plantilla \u2018tabs.html\u2019 ubicado en \u201ccutePuppuPics\/Site Root\/app\/pages\/tabs\/\u201d y eliminar las etiquetas para presentar las p\u00e1ginas 2 y 3 ya que no se utilizar\u00e1n, el resultado debe ser similar al siguiente (ver figura2):<\/li>\n<\/ol>\n<p style=\"text-align: center;\"><a href=\"http:\/\/www.aplicacionesdinamicas.com\/blog\/wp-content\/uploads\/2016\/05\/figura2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-187\" src=\"http:\/\/www.aplicacionesdinamicas.com\/blog\/wp-content\/uploads\/2016\/05\/figura2-300x24.png\" alt=\"figura2\" width=\"300\" height=\"24\" \/><\/a><\/p>\n<p style=\"text-align: center;\">Figura 2. Tabs.html<\/p>\n<ol start=\"5\">\n<li>Ahora es necesario crear la l\u00f3gica de conexi\u00f3n a nuestro servicio REST, para esto utilizaremos un servicio al que llamaremos \u2018multi.service.ts\u2019 y lo colaremos en la siguiente ruta \u201ccutePuppuPics\/Site Root\/app\/services\/\u201d\u00a0 , dentro de este servicio haremos uso del cliente http[7] de ANGULAR2 para realizar la petici\u00f3n GET y el operador \u2018map\u2019 para interpretar los datos retornados del servicio REST. Toda la l\u00f3gica estar\u00e1 contenida en un m\u00e9todo llamado <em>getDatos()<\/em>, el servicio queda as\u00ed (ver figura 3):<\/li>\n<\/ol>\n<p style=\"text-align: center;\"><a href=\"http:\/\/www.aplicacionesdinamicas.com\/blog\/wp-content\/uploads\/2016\/05\/fiura3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-197\" src=\"http:\/\/www.aplicacionesdinamicas.com\/blog\/wp-content\/uploads\/2016\/05\/fiura3-300x79.png\" alt=\"fiura3\" width=\"300\" height=\"79\" \/><\/a><\/p>\n<p style=\"text-align: center;\">Figura 3. Multi.service.ts<\/p>\n<ol start=\"6\">\n<li>En el punto anterior especificamos de manera expl\u00edcita la ruta del servicio REST, para este caso es \u2018http:\/\/localhost:81\/bostonscient\/public_html\/app_dev.php\/api\/cotizaciones\u2019 cuyo resultado es informaci\u00f3n en formato JSON (ver figura 4):<\/li>\n<\/ol>\n<p style=\"text-align: center;\"><a href=\"http:\/\/www.aplicacionesdinamicas.com\/blog\/wp-content\/uploads\/2016\/05\/figurta4.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-192\" src=\"http:\/\/www.aplicacionesdinamicas.com\/blog\/wp-content\/uploads\/2016\/05\/figurta4-300x25.png\" alt=\"figurta4\" width=\"300\" height=\"25\" \/><\/a><\/p>\n<p style=\"text-align: center;\">Figura 4. Servicio REST<\/p>\n<ol start=\"7\">\n<li>Ahora es necesario invocar y utilizar nuestro servicio desde cualquier ubicaci\u00f3n de nuestra aplicaci\u00f3n, en esta caso iremos al componente de la p\u00e1gina principal (p\u00e1gina 1) accediendo al archivo \u2018page1.ts\u2019 ubicado en\u00a0 \u201ccutePuppuPics\/Site Root\/app\/pages\/page1\/\u201d. Una vez ubicados all\u00ed lo primero es invocar nuestro servicio para esto se usa .<a href=\"http:\/\/www.aplicacionesdinamicas.com\/blog\/wp-content\/uploads\/2016\/05\/code.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-185\" src=\"http:\/\/www.aplicacionesdinamicas.com\/blog\/wp-content\/uploads\/2016\/05\/code-300x12.png\" alt=\"code\" width=\"300\" height=\"12\" \/><\/a><\/li>\n<\/ol>\n<p>En el constructor de nuestro componente ejemplificamos un objeto llamado _httpService del tipo \u2018MultiService\u2019 para acceder a todas las funcionalidades de nuestro servicio.<\/p>\n<p>Luego generamos un m\u00e9todo visible de nuestro componente llamando <em>getURL() <\/em>el cualse encargara de invocar el m\u00e9todo <em>getDatos()<\/em> de nuestro servicio, los datos retornados de este m\u00e9todo los almacenaremos en una atributo de nuestro componente al que llamaremos <em>datosConsultados<\/em> y ser\u00e1 del tipo <strong>any<strong>[8]<\/strong><\/strong> para facilitar su posterior uso. El resultado final deber ser (ver figura 5):<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/www.aplicacionesdinamicas.com\/blog\/wp-content\/uploads\/2016\/05\/figura5.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-188\" src=\"http:\/\/www.aplicacionesdinamicas.com\/blog\/wp-content\/uploads\/2016\/05\/figura5-300x150.png\" alt=\"figura5\" width=\"300\" height=\"150\" \/><\/a><\/p>\n<p style=\"text-align: center;\">Figura 5. Page1.ts<\/p>\n<ol start=\"8\">\n<li>Ahora es necesario prepara la plantilla para presentar los datos consultados del servicio REST, para esto se modificar\u00e1 la plantilla page1.html ubicada en \u201ccutePuppuPics\/Site Root\/app\/pages\/page1\/\u201d, all\u00ed presentaremos la informaci\u00f3n de manera tabulada y ofreceremos un bot\u00f3n que invocara el m\u00e9todo <em>getUrl()<\/em>. Adem\u00e1s haciendo uso de *ngIf y *ngFor ser valida que exista informaci\u00f3n retornada del servicio REST y su respectivo recorrido dado que los datos est\u00e1n en tipo JSON. Algo \u00fatil a tener en cuenta es que al invocar el m\u00e9todo <em>subscribe <\/em>\u00a0en el objeto <em>Observable<\/em> retornado de nuestro servicio, se ofrece poder personalizar la funcionalidad de la aplicaci\u00f3n cuando existen datos (data) y cuando se puede presentar un error (error) y cuando finaliza la petici\u00f3n GET (). El resultado es (ver figura 6):<\/li>\n<\/ol>\n<p style=\"text-align: center;\"><a href=\"http:\/\/www.aplicacionesdinamicas.com\/blog\/wp-content\/uploads\/2016\/05\/figura6.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-189\" src=\"http:\/\/www.aplicacionesdinamicas.com\/blog\/wp-content\/uploads\/2016\/05\/figura6-300x189.png\" alt=\"figura6\" width=\"300\" height=\"189\" \/><\/a><\/p>\n<p style=\"text-align: center;\">Figura 6. Page1.html<\/p>\n<ol start=\"9\">\n<li>\u00a0Ahora podemos probar como se presentar los datos en la aplicaci\u00f3n, para ello es necesario ubicarse en la carpeta del proyecto a trav\u00e9s de la consola de comandos (cmd en windows) y ejecutar <em>ionic serve<\/em> para ejecutar la aplicaci\u00f3n, el resultado final se presenta a continuaci\u00f3n:<\/li>\n<\/ol>\n<p><a href=\"http:\/\/www.aplicacionesdinamicas.com\/blog\/wp-content\/uploads\/2016\/05\/figura7.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-190 aligncenter\" src=\"http:\/\/www.aplicacionesdinamicas.com\/blog\/wp-content\/uploads\/2016\/05\/figura7-300x144.png\" alt=\"figura7\" width=\"300\" height=\"144\" \/><\/a> <a href=\"http:\/\/www.aplicacionesdinamicas.com\/blog\/wp-content\/uploads\/2016\/05\/figura8.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-191 aligncenter\" src=\"http:\/\/www.aplicacionesdinamicas.com\/blog\/wp-content\/uploads\/2016\/05\/figura8-300x152.png\" alt=\"figura8\" width=\"300\" height=\"152\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><strong>CONCLUSI\u00d3N<\/strong><\/p>\n<p>Resulta bastante f\u00e1cil y r\u00e1pido utilizar TypeScript para generar toda la l\u00f3gica que utilizara una aplicaci\u00f3n hibrida con Ionic2 ya que le evita al programador la necesidad de aprender otro lenguaje de programaci\u00f3n, en parte, esto es gracias a que la sintaxis utilizada en TypeScript es muy similar a la empleada en lenguajes de programaci\u00f3n populares como JAVA, PHP y C#, adicional a esto gracias a todos los componentes y librer\u00edas propias de ANGULAR2 realizar peticiones de informaci\u00f3n a fuentes externas resulta r\u00e1pido, confiable y controlable.<\/p>\n<p>&nbsp;<\/p>\n<p>[1] M\u00e1s informaci\u00f3n aqu\u00ed: <a href=\"https:\/\/angular.io\/features.html\">https:\/\/angular.io\/features.html<\/a><\/p>\n<p>[2] M\u00e1s informaci\u00f3n aqu\u00ed: <a href=\"https:\/\/developer.android.com\/studio\/index.html\">https:\/\/developer.android.com\/studio\/index.html<\/a><\/p>\n<p>[3] M\u00e1s informaci\u00f3n aqu\u00ed: <a href=\"http:\/\/ionicframework.com\/docs\/v2\/getting-started\/installation\/\">http:\/\/ionicframework.com\/docs\/v2\/getting-started\/installation\/<\/a><\/p>\n<p>[4] M\u00e1s informaci\u00f3n aqu\u00ed: <a href=\"https:\/\/www.typescriptlang.org\/index.html\">https:\/\/www.typescriptlang.org\/index.html<\/a><\/p>\n<p>[5] \u00a0M\u00e1s informaci\u00f3n aqu\u00ed: <a href=\"http:\/\/www.json.org\/\">http:\/\/www.json.org\/<\/a><\/p>\n<p>[6] M\u00e1s informaci\u00f3n aqu\u00ed: <a href=\"http:\/\/ionicframework.com\/docs\/v2\/getting-started\/installation\/\">http:\/\/ionicframework.com\/docs\/v2\/getting-started\/installation\/<\/a><\/p>\n<p>[7] M\u00e1s informaci\u00f3n aqu\u00ed: <a href=\"https:\/\/angular.io\/docs\/ts\/latest\/guide\/server-communication.html\">https:\/\/angular.io\/docs\/ts\/latest\/guide\/server-communication.html<\/a><\/p>\n<p>[8] M\u00e1s informaci\u00f3n aqu\u00ed: <a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/basic-types.html\">https:\/\/www.typescriptlang.org\/docs\/handbook\/basic-types.html<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>INTRODUCCION Desde la liberaci\u00f3n de ANGULAR 2 por parte del equipo responsable en Google, los creadores de IONIC se propusieron adaptar tambi\u00e9n su Framework en busca de aprovechar todas las mejoras[1] aplicadas en la nueva versi\u00f3n de angular. Teniendo en cuenta lo anterior, entonces, se presenta a continuaci\u00f3n un ejemplo b\u00e1sico de c\u00f3mo realizar una petici\u00f3n a trav\u00e9s del m\u00e9todo GET a un servicio REST y presentarlo en una aplicaci\u00f3n b\u00e1sica de ionic2. REQUISITOS Tener instalado ANDROID SDK[2] (Opcional) Tener instalado el ambiente de ionic2[3] Conocimientos B\u00e1sicos en TypeScript[4] Conocimientos b\u00e1sicos en Ionic2 Conocimientos b\u00e1sicos en Angular2 Tener instalado Netbeans (Opcional) Tener acceso a un servicio REST cuya informaci\u00f3n de retorno se encuentre en el tipo de dato JSON[5] PROCEDIMIENTO A continuaci\u00f3n se presentan los pasos a realizar: Abrir el proyecto instalado de cutePuppyPics ofrecido en el proceso de instalaci\u00f3n de Ionic2[6] Abrir el componente \u2018tabs.ts\u2019 ubicado en \u201ccutePuppuPics\/Site Root\/app\/pages\/tabs\/\u201d Eliminar la asignaci\u00f3n de las p\u00e1ginas 2 y 3 ya que no se necesitaran, el resultado debe ser similar al siguiente (ver figura 1): &nbsp; &nbsp; Figura 1.Tabs.ts Abrir la plantilla \u2018tabs.html\u2019 ubicado en \u201ccutePuppuPics\/Site Root\/app\/pages\/tabs\/\u201d y eliminar las etiquetas para presentar las p\u00e1ginas 2 y 3 ya que no se utilizar\u00e1n, el resultado debe ser similar al siguiente (ver figura2): Figura 2. Tabs.html Ahora es necesario crear la l\u00f3gica de conexi\u00f3n a nuestro servicio REST, para esto utilizaremos un servicio al que llamaremos \u2018multi.service.ts\u2019 y lo colaremos en la siguiente ruta \u201ccutePuppuPics\/Site Root\/app\/services\/\u201d\u00a0 , dentro de este servicio haremos uso del cliente http[7] de ANGULAR2 para realizar la petici\u00f3n GET y el operador \u2018map\u2019 para interpretar los datos retornados del servicio REST. Toda la l\u00f3gica estar\u00e1 contenida en un m\u00e9todo llamado getDatos(), el servicio queda as\u00ed (ver figura 3): Figura 3. Multi.service.ts En el punto anterior especificamos de manera expl\u00edcita la ruta del servicio REST, para este caso es \u2018http:\/\/localhost:81\/bostonscient\/public_html\/app_dev.php\/api\/cotizaciones\u2019 cuyo resultado es informaci\u00f3n en formato JSON (ver figura 4): Figura 4. Servicio REST Ahora es necesario invocar y utilizar nuestro servicio desde cualquier ubicaci\u00f3n de nuestra aplicaci\u00f3n, en esta caso iremos al componente de la p\u00e1gina principal (p\u00e1gina 1) accediendo al archivo \u2018page1.ts\u2019 ubicado en\u00a0 \u201ccutePuppuPics\/Site Root\/app\/pages\/page1\/\u201d. Una vez ubicados all\u00ed lo primero es invocar nuestro servicio para esto se usa . En el constructor de nuestro componente ejemplificamos un objeto llamado _httpService del tipo \u2018MultiService\u2019 para acceder a todas las funcionalidades de nuestro servicio. Luego generamos un m\u00e9todo visible de nuestro componente llamando getURL() el cualse encargara de invocar el m\u00e9todo getDatos() de nuestro servicio, los datos retornados de este m\u00e9todo los almacenaremos en una atributo de nuestro componente al que llamaremos datosConsultados y ser\u00e1 del tipo any[8] para facilitar su posterior uso. El resultado final deber ser (ver figura 5): Figura 5. Page1.ts Ahora es necesario prepara la plantilla para presentar los datos consultados del servicio REST, para esto se modificar\u00e1 la plantilla page1.html ubicada en \u201ccutePuppuPics\/Site Root\/app\/pages\/page1\/\u201d, all\u00ed presentaremos la informaci\u00f3n de manera tabulada y ofreceremos un bot\u00f3n que invocara el m\u00e9todo getUrl(). Adem\u00e1s haciendo [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":853,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,5],"tags":[],"class_list":["post-1","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5","category-java-script"],"_links":{"self":[{"href":"https:\/\/www.apdi.co\/blog\/wp-json\/wp\/v2\/posts\/1","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.apdi.co\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.apdi.co\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.apdi.co\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.apdi.co\/blog\/wp-json\/wp\/v2\/comments?post=1"}],"version-history":[{"count":2,"href":"https:\/\/www.apdi.co\/blog\/wp-json\/wp\/v2\/posts\/1\/revisions"}],"predecessor-version":[{"id":854,"href":"https:\/\/www.apdi.co\/blog\/wp-json\/wp\/v2\/posts\/1\/revisions\/854"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.apdi.co\/blog\/wp-json\/wp\/v2\/media\/853"}],"wp:attachment":[{"href":"https:\/\/www.apdi.co\/blog\/wp-json\/wp\/v2\/media?parent=1"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.apdi.co\/blog\/wp-json\/wp\/v2\/categories?post=1"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.apdi.co\/blog\/wp-json\/wp\/v2\/tags?post=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}