Leer datos JSON desde App Inventor


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 e ste 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: ahi  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
¿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.
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  >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 globales
  • googleBookSearchURL – Ahí es donde almacenamos la dirección URL de la API de búsqueda de libros.
  • 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 proyección = Lite, nos encontraremos con un montón de otra información que nosotros no vamos a utilizar en esta aplicaciónl.   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.   En el procedimiento ParseBookResult, dividimos el contenido de la respuesta utilizando la etiqueta inicial y la etiqueta final.   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 y la cámara de los secretos”,
   "autores": [ 
       "JK 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 de procedimiento GotText arriba. En nuestro ejemplo de datos en bruto, el valor es “potter Harry y la cámara de los secretos”. 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 “&” si tenemos este , y queremos mostrarlo y 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.



Análisis de Resultados Múltiples

¿Qué pasa si usted desea analizar múltiples resultados? Bueno, en ese caso se define un maxResults más alto cuando se consulte Ahi  , 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,p ero si encuentrar tres o más para nuestra consulta, vamos a recibir sólo tres. Para fines de demostración, sólo en esta parte solo vamos a analizar los títulos. Tal vez usted ya lo adivinó, necesitaríamos para cada bloque hacer el trabajo. Hemos creado un procedimiento llamado GetAllTitles que tiene tres argumentos – apiResponse, de inicio, y fin. Como puede ver, pasamos a responseContent, inicio y fin como lo hicimos antes para analizar un solo título. GetAllTitles utiliza una para cada bucle y pasar 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.

Por ultimo puede descargar el archivo de código fuente de esta aplicación (iRead2.aia)  y la anterior (iRead.aia  )  desde la página de Descargas del autor .
 


Fuente   aqui   

Ejemplo manejo request con App Inventor


Al igual que usted puede acceder a páginas Web desde el teléfono – por ejemplo, para buscar un precio de las acciones – por lo que puede App Inventor. Esta aplicación permite al usuario introducir un símbolo de cotización, luego mira el precio de la acción en Yahoo! Finance y muestra el precio por teléfono.

En este post  se supone que está familiarizado con los conceptos básicos de la aplicación Inventor – utilizando el Diseñador de componentes para construir una interfaz de usuario y utilizando el Editor de bloques para especificar controladores de eventos. Si usted no está familiarizado con los conceptos básicos, intente pasar a través de algunos de los tutoriales básicos antes de continuar.

En primer lugar ,conéctese al sitio Web App Inventor y empezar un nuevo proyecto. Nombre que StockQuotes, y también le da título a “Cotización de Acciones” de la pantalla.Abra el Editor de bloques y conectarlo al teléfono.

Para configurar los componentes,utilice el diseñador de componentes para crear la interfaz de usuario. Cuando haya terminado, debería parecerse a la siguiente imagen. Instrucciones adicionales están por debajo de la imagen.

Hecho esto ,cree los siguientes componentes arrastrándolos desde la paleta en el Visor.

Tipo de componente Grupo de paletas Lo que usted lo nombra Propósito de componentes
TextBox Interfaz de usuario StockSymbolTextBox Cuando el usuario entra en el símbolo de cotización
Botón Interfaz de usuario GetQuoteButton Para solicitar la cotización de bolsa
Etiqueta Interfaz de usuario ValueLabel Para mostrar la cotización de bolsa
Web Conectividad Web1 Solicitar y recibir la cotización de bolsa

Seguidamente  con las propiedades predeterminadas a excepción de los siguientes cambios:

Componente Acción
StockSymbolTextBox Establezca su propiedad Hint “Introducir un símbolo de cotización”.
GetQuoteButton Establezca su propiedad Text en “Obtener Cotización”.
ValueLabel Desactive su propiedad Text.

El API Finanzas Yahoo!

Muchos de los servicios web ofrecen un interfaz del programador de aplicaciones (API) para los desarrolladores para que sus programas para acceder al servicio. Algunas maneras de descubrir las API son a través de la página web http://programmableweb.com o simplemente haciendo una búsqueda en Internet para el nombre de servicio y el “API”.

La API de Yahoo! Finanzas está documentado en detalles sangrientos en http://www.gummy-stuff.org/Yahoo-data.htm . Los aspectos más destacados son que usted puede conseguir el último precio de la acción con el símbolo “GOOG”, por ejemplo, con la URL http://finance.yahoo.com/d/quotes.csv?f=l1&s=GOOG

.La sección “f = l1” (letra minúscula L, seguido por el número 1) dice nos gustaría que el último precio, y la sección “s = GOOG”, dice nos gustaría información acerca de las acciones cuyo símbolo es “GOOG” . El resultado se devuelve en valores separados por comas (CSV), que usted puede estar familiarizado con las hojas de cálculo. Dado que sólo un valor se devolverá a nuestra consulta, el resultado será un número viejo y simple, como “511.5”, sin ninguna coma. (Las comas se utilizaría si lo solicitamos múltiples piezas de datos de Yahoo!, como el nombre de la empresa y el volumen de comercio diario.)

Añadir comportamientos a los Componentes

Los bloques para hacer la solicitud web se muestran aquí y se detallan a continuación:

Tipo de bloque Cajón Propósito
GetQuoteButton.Click GetQuoteButton Manejar un clic del botón “Get Quote”.
establecer Web1.Url a Web1 Especifique la dirección URL a la solicitud.
unirse Texto Concatenar las partes de la dirección URL.
“” ( http://finance.yahoo.com/d/quotes.csv?f=l1&s =

External Links icon

 )

Texto Especifique la primera parte inmutable de la URL.
StockSymbolTextBox.Text StockSymbolTextBox Obtener el símbolo de la acción en el cuadro de texto.
llamar Web1.Get Web1 Hacer la solicitud Web.

El significado es: Cuando se hace clic en GetQuoteButton:

  1. Construir URL del componente Web concatenando ” http://finance.yahoo.com/d/quotes.csv?f=l1&s =
    External Links icon

     “(que debe copiar y pegar en el bloque de texto) y el símbolo que se introdujo por el usuario (StockSymbolTextBox . Texto).

  2. Solicite la página especificada por el URL. (Esto es como pulsar retorno después de introducir una URL en su navegador web.)

Cuando la respuesta a la solicitud Web llega, el evento Web.GotText se eleva con cuatro parámetros (sólo algunos de los cuales vamos a utilizar en esta aplicación):

  1. url: la URL de la solicitud original (lo cual es útil si las solicitudes se hacen con muchas URLs diferentes).
  2. responseCode: el código de estado HTTP , que indica si la solicitud Web sucedió o cómo falló; por ejemplo, 200 significa que la solicitud se realizó correctamente, 404 que la página no se ha encontrado, etc
  3. responseType: el tipo MIME de la respuesta, como por ejemplo “text / csv” en esta aplicación, “image / jpeg”, etc
  4. responseContent: los datos que se devuelven, como “511.5”.

Aquí hay una imagen y la tabla de los bloques que necesita para crear:

Tipo de bloque Cajón Propósito
Web1.GotText Web1 Especifique qué hacer cuando la respuesta vuelve de la web.
Si, pues, Control Proporcionar un comportamiento diferente dependiendo de si la solicitud se realizó correctamente. Utilice el mutador para agregar una sentencia else.
conseguir responseCode Variables Obtiene el código de respuesta devuelto por la solicitud web, que …
= (Igual) bloque Lógica … Está marcada por la igualdad con …
número (200) Matemáticas … 200, el código para las respuestas de web válidos.
establecer ValueLabel.Text a ValueLabel Mostrar el resultado en la pantalla.
unirse Texto Construir el resultado concatenando …
“” (“Valor actual”) Texto … El texto “Valor actual:” y …
get responseContent Variables Obtiene el valor devuelto por la web.
establecer ValueLabel.Text a ValueLabel Mostrar un mensaje de error.
“” (“Error al obtener Cotización”) Texto El mensaje de error

He aquí una descripción del comportamiento del bloque:

  1. Si el código de respuesta indica que la solicitud Web sucedió (= 200), establece la etiqueta para la concatenación de “valor actual” y los datos devueltos (por ejemplo, 511.5).
  2. De lo contrario, establecer la etiqueta de “Error al obtener cotización de bolsa”.

Si desea trabajar con este ejemplo en App Inventor,pude  descargar el código fuente (External Links icon de su equipo, a continuación, abra la aplicación Inventor, haga clic enProyectos, seleccione Importar proyecto (. aia) de mi computadora … y seleccione el código fuente que acaba de descargar.)