En esta actividad veremos, finalmente, cómo conectar nuestro aplicativo NativeScrit. Nuestro aplicativo, actualmente, está corriendo en un emulador Android, por lo que tenemos que tener una precaución con la configuración de acceso a Internet de nuestro dispositivo Android, en este caso, emulado. Suele haber problemas con la conectividad a Internet, es decir, ustedes podrán ver en este icono, por ejemplo, de conexión WiFi, que quizás ya les dice, les avisa que no están conectados. Para eso, lo que debemos hacer es hacer clic en este icono de propiedades de configuración, y acceder a la solapa "Settings" y la subsolapa "Proxy". Por defecto, les va a venir configurado que usen el Android Studio HTTP+ proxy, las configuraciones del "proxy" de HTTP. El "proxy" es la funcionalidad que configura cómo accedemos a Internet. Si tienen problemas con el acceso a Internet, lo recomendable es poner "configuración manual de proxy" y aquÃ, en "nombre de host", ponen cuatro ochos separados por puntos: 8.8.8.8, que es la IP de los servidores Web de DNS, públicos, gratuitos, de Google. De esta manera, luego de apagar el emulador y volverlo a encender con el Manager ABB, tendrÃan que dejar de tener los problemas de conectividad. Habiendo hecho este paso previo, vamos a nuestra aplicación NativeScript. Vamos a ir al "noticias.service.ts", que habÃamos hecho anteriormente, y vamos a reemplazar el código por este código que tenemos aquÃ, ahora. En vez de tener un "array" de "strings" de noticias que manejábamos acá, internamente, en nuestra aplicativo NativeScript, pasaremos a tener una variable "string" "api", donde tenemos la dirección base o el "endpoint", que se le llama, base de nuestro "api", que es la que nos dio, previamente, "ngrok". Luego, vamos a cambiar el código del "agregar", el "favs" y el "buscar". Recuerden que lo que vamos a hacer nosotros, actualmente, es con el "buscar" y dejamos el "agregar" y el "favs" implementado ya aquÃ, en este "noticias.service.ts", igual que hicimos en el Node.js, para que ustedes puedan practicar. Vamos a centrarnos en el "buscar", que es el que vamos a usar. El "buscar" va a recibir un "string" de búsqueda, que es lo que agregamos en nuestro emulador aquÃ, en nuestro "textbox". Y vamos a llamar al "api" con el "end point" de base: "/get"; "?", para indicar que a partir de ahà empieza la "query string"; nombre variable igual valor, "q" igual "s", "q" de "query" o "consulta", en inglés; "+ s", "s" de "string" de búsqueda que nos ingresaron en el "textbox". Esto lo estamos haciendo con la función "getJSON", que importamos oportunamente de "tns-core-modules/http". FÃjense que no es el HTTP de Npm, por defecto de HTML5, porque aquà no se va a usar, internamente, la misma tecnologÃa de consultas HTTP que se usan en la Web; cuando ustedes usan, por ejemplo, Angular o TypeScript, para lo que es el JavaScript de HTML. En ese caso, se usan los "XMLHttpRequest" y otras funcionalidades para acceder a HTTP, que son provistas por los navegadores, por los "browsers". En este caso, tenemos que usar el que nos provee el Core de Telerik Nat, NativeScript, porque ya solo, el Core de NativeScript, nos adaptará, nos usará la conectividad HTTP correspondiente, tanto en Android como en iOS. Nos abstrae de esa complejidad. Nosotros, simplemente, llamamos al "getJSON". Esto, lo que nos retorna, es una promesa, un "promise", como vemos aquÃ, que dice que retorna un "promise"; donde nosotros, cuando lleguemos al "buscar", cuando consumamos el "buscar", podremos usar el método "then" de toda promesa de JavaScript, para actuar ante condiciones favorables o desfavorables, de éxito o de error. Vamos a ir al "search.component.ts" y vamos a reemplazar el código del "buscarAhora", por el siguiente código. En donde vamos a recibir el código a "buscar", vamos a "loguear" lo que recibimos cuando entra al "buscarAhora". Luego, llamaremos al "buscar" de "noticias.service.ts ", que acabamos de realizar; pasándole, obviamente, el texto que nos están solicitando. Y nos retorna una promesa, asà que, sobre la promesa, llamamos al método "then". Y ahà tenemos dos "callbacks": uno es cuando nos llega el resultado, el retorno favorable, que lo vamos a mostrar por consola, y lo vamos a asignar a "this.resultados", que es la variable que ya tenÃamos desde antes, que está siendo observada desde el "front-end", desde el HTML; luego, en el caso de error, también lo logueamos, y vamos a usar el "toast", que vamos a importar. Algo que haremos será quitar este "agregar", que estábamos llamando. Antes, tenÃamos un "array" que estaba vacÃo y por eso lo inicializabamos, entonces, lo quitamos. Ahora, eso no nos molesta, porque tenemos un "array" que ya está inicializado en nuestro API, lo estamos consultando directamente por HTTP. Ahà agregamos el "toast", guardamos ambos archivos. Esto va a estar compilando y ahora vamos a visualizar. Aquà tenemos nuestra aplicación de Node.js corriendo. Aquà tenemos "ngrok", que la expone a la a la Web, y aquà nos va a ir logueando todas las solicitudes que hagamos que, en este caso, vamos a ir viendo que arriba van a aparecer las solicitudes nuevas que hacemos desde el aplicativo NativeScript, y aquà vamos a ir viendo todo lo que sale por consola. Vamos al "Search", vamos a ingresar "Fut". Bajemos esto asà vemos bien los resultados. Ahà hizo la solicitud, y ahà llegó la respuesta. Vamos a hacerlo de nuevo. Ahà hizo la solicitud, ahà llegó la respuesta. Vamos a poner "Barce". Ahà llegó la respuesta. Como ven, aquà está logueando el texto que buscamos, cuando entro al "buscarAhora". Luego, los resultados, cuando no llegan. Y luego, nuevamente, las nuevas consultas. Si nos detenemos un poco más en el "search.component.ts", vimos que estamos mostrando un "toast" cuando hay algún error. Entonces, vamos a provocar a propósito un error, para ver cómo funciona ese "toast". Para eso, vamos al API, y hagamos que, en vez de "get", sea "getx", asà nos tira un error de no encontrado. Vamos a tener que abrir, en nuestra consola... Como levantamos el aplicativo de Node.js, no tiene un "watch", como sà tiene NativeScript, asà que, lo vamos a cerrar con "ctrl+c", y lo volvemos a levantar. Y ahora, como modificamos el servidor, y a "ngrok" eso no le molestó, directamente, vamos a nuestro aplicativo NativeScript, que no tuvimos que hacerle ningún cambio, el cambio lo hicimos en el API, y vamos a hacer una consulta. "ngrok" nos tira 404, porque lo que estamos haciendo es un "get" de "/get". Eso, obviamente, no existe. Y esto nos tira un error y nosotros estamos sufriendo un error que aquÃ, en el "toast", nos es informado con el texto "Error en la búsqueda". Este cambio lo podemos deshacer. Recuerden cerrar y volver a levantar el servicio, para que eso les quede correcto. Y ahà está funcionando, nuevamente, de manera correcta. De esta manera, vimos cómo, finalmente, armar todo un "stack" básico en la capa del API, pero que ya les permite tener una integración total y poder simular un "back-end" tan complejo como ustedes quieran. Para, luego, finalmente, integrarlo al "back-end" real. Nos vemos en la próxima actividad.
