App Inventor y JSON

App Inventor tiene un componente llamado Web que le da la funcionalidad de enviar y recuperar datos de un servidor o de un sitio web a través de solicitudes GET y POST de modo que este componente puede decodificar tanto datos formateados en los formatos JSON y HTML . 

Vamos a mostrar como funciona una aplicación llamada iRead que le pedirá al usuario que escriba el nombre completo o parcial de libros y consulte la base de datos de libros utilizando el API de Google Book API recuperando la información sobre el libro más relevante. 

Para ello vamos a analizar el título y el autor del libro, obtener la URL de la imagen de la portada del libro, y, finalmente, la dirección URL del libro que puede ser lanzado a través de un navegador. 

En MIT App Inventor , lo primero es construir su interfaz de usuario (UI) en la ventana del diseñador.

Como se puede ver, se renombran nombres predeterminados de los componentes que App Inventor proporciona. Si usted está teniendo dificultades para el diseño de la interfaz de usuario, descargue el archivo de origen (iRead.aia) desde la pagina de Descargas y eche un vistazo. Lo que importa es que usted tenga todos los componentes esenciales como se muestra en la interfaz de usuario de pantalla anterior.

¿Ha tratado de ejecutar una solicitud de consulta sobre el Books API de google todavía? Haga clic en el enlace de abajo para ver la respuesta del API: https://www.googleapis.com/books/v1/volumes?q=Harry&maxResults=1&projection=lite

Esto le dara una respuesta que es similar a esta:

Nuestra preocupación no es la información sobre el libro actual (Con el tiempo puede que no obtenga la misma información sobre el libro usando la misma consulta), nuestras preocupaciones son las fichas que vamos a necesitar para identificar y analizar los datos específicos. Eche un vistazo a las fichas como “title”: que termina con una coma y una nueva línea, “autores”: que termina con], etc 

Ahora vamos a empezar a definir las acciones e interacciones en el editor de bloques.

Hemos definido tres variables locales:

• googleBookSearchURL: Ahí es donde almacenamos la dirección URL de la API de búsqueda de libros (https://www.googleapis.com/books/v1/volumes) 
• TempData: Vamos a usarlo para guardar los datos temporales. 
• bookURL: Ahí es donde vamos a analizar y almacenar la dirección URL (token “InfoLink”) de la información sobre el libro devuelto por la API. 

Cuando un usuario introduce un nombre de libro y pulsa el botón Buscar, llamamos procedimiento GetBookInfo donde simplemente construimos nuestra URL con el texto introducido por el usuario y codificada para su uso como una URL, y, finalmente, alimentamos a la propiedad Url del componente Web. Queremos conseguir una sola información sobre el libro (API puede devolver muchos); así que utilizamos maxResults = 1. Si no usamos la projection = Lite, nos encontraremos con un montón de otra información que nosotros no vamos a utilizar en esta aplicación. Al final llamamos Web.get para ejecutar nuestra consulta. 

¿Cómo sabemos cuando el servidor devuelve una respuesta a nuestra consulta? Bueno, usamos bloque GotText del componente Web para esto. Siempre que nuestra aplicación reciba algo, el bloque GotText se activará automáticamente para nosotros para validar y procesar los datos. Vamos a analizar la respuesta JSON de la API que recibimos. 

Sólo podemos proceder si responseCode es 200 lo que significa nuestra consulta no falló en el camino. Tenemos otro procedimiento llamado ParseBookResult que realmente analiza la respuesta. Vamos a echar un vistazo a él: 

En el procedimiento ParseBookResult, dividimos el contenido de la respuesta utilizando la etiqueta start y la etiqueta end. Por ejemplo, para analizar el título del libro, tenemos que saber el principio y los códigos de finalización de un título. Si usted ha notado en la consulta, devuelve:

"title": "Harry Potter and the chamber of secrets",

"authors": [

"J. K. Rowling"

],Por lo que sabemos, comienza con “title”: y termina con una coma seguida de una nueva línea. Es por eso que hemos utilizado esas etiquetas cuando llamamos ParseBookResult desde el procedimiento GotText. En nuestro ejemplo de datos en bruto, el valor es “Harry potter and the chamber of secrets”. Entonces desciframos el valor JSON llamando JsonTextDecode de Web. Y finalmente descifrar los caracteres HTML llamando HtmlTextDecode. Llamamos HtmlTextDecode para reemplazar caracteres HTML ilegibles con caracteres legibles. Por ejemplo el signo “&” queremos mostrarlo en lugar de &.

Cuando pulsa a un usuario en el botón Leer, simplemente lanza el navegador con la URL del libro.

Para el lanzamiento de un navegador, utilizamos el componente ActivityStarter . Establecemos primero la acción,establecemos la URL que recuperamos y despues llamamos a la startActivity de componente ActivityStarter para iniciar el navegador con la URL especificada. 

Si nuestro bookURL no contiene una dirección URL válida, simplemente informa a los usuarios. 

Múltiples Resultados

¿Qué pasa si usted desea analizar múltiples resultados? Bueno, en ese caso se define un maxResults mayores cuando se consulta como esto:

Como se puede ver en la imagen anterior, definimos maxResults al valor tres lo que significa que queremos tres resultados. Si el API de Google no puede encontrar tres ocurrencias para nuestra consulta de libros, en ese caso no estaríamos recibiendo tres resultados obviamente,pero si encuentra tres o más para nuestra consulta, vamos a recibir sólo tres. 

Para fines de demostración, en esta parte solo vamos a analizar los títulos. Tal vez usted ya lo adivinó, necesitaríamos for each block para hacer el trabajo.

Hemos creado un procedimiento llamado GetAllTitles que tiene tres argumentos – apiResponse, start y end. Llamamos a este procedimiento con datos como estos:

Como puede ver, pasamos a responseContent, start y end como lo hicimos antes para analizar un solo título. GetAllTitles utiliza un bucle for each y pasa todos los títulos y lo mismo para el análisis, exactamente como lo hicimos antes. Antes no teníamos un bucle, ya que tenía sólo un título para analizar y ahora tenemos un bucle porque tenemos muchos a analizar. Tenga en cuenta que el procedimiento GetAllTitles almacena el resultado después de analizar cada título a una variable global llamada allTitles y lo devuelve. 

Se utilizó un componente Label denominado OtherTitlesLabel para mostrar el resultado devuelto por el procedimiento GetAllTitles. Finalmente la aplicación tiene este aspecto:

Usted puede descargar iRead2 desde el siguiente enlace.

Fuentes: 

• soloelectronicos.com
• imagnity.com