Sofia2 y Google App Inventor: Pedir, recibir y mostrar información.

En el post anterior explicamos cómo enviar información a la plataforma. En este aprenderemos a pedirla y recibirla. Los requisitos iniciales son los mismos que los del post anterior.

La idea sigue siendo basarse en la aplicación ya desarrollada para poder explicar de manera sencilla el funcionamiento y la conexión entre Sofia2 y las aplicaciones desarrolladas con App Inventor.

Para acceder a la funcionalidad, una vez abierto el proyecto o importado el fichero de la aplicación sobre la que vamos a trabajar pulsamos en el botón de pantallas y seleccionamos “Screen1

Esta pantalla está formada por una imagen, varios layouts, dos botones, un elemento tipo web (para conectarnos a internet) y un notificador. El funcionamiento se basa en que al pulsar el botón “Consultar”, se envía una petición a Sofia2, la contestación contendrá varios elementos que se “traducen” y se muestran en el layout de nombre “Datos”. Los elementos visibles son similares a los explicados en el anterior post así que en esta ocasión nos centraremos sobre todo en explicar la parte de bloques.

Los bloques de esta pantalla tienen esta pinta:

Como veis hemos separado los bloques en grupos:

Conjunto 1: Son los bloques de variables globales que se utilizan para guardar datos. En este caso hay varias variables especiales e importantes:

Cabecera: Similar a la cabecera explicada en el post anterior, se pone el API Key de cada uno para la identificación en el sistema.

Url: La URL del API al que vamos a acceder, en el caso de este ejemplo es: http://sofia2.com/sib-api/api/v1/prueba_smartes?

Query: query sql para la petición de los datos a la base de datos en nuestro caso es: $filter= select * from Prueba_Smart; Para saber qué consulta debemos hacer podemos entrar en Sofia2>Herramientas>Consola BDTR y BDH> hacer doble clic sobre nuestra ontología y presionar sobre consulta. El contenido del área “Query” es lo que pondremos en este campo de manera que quede como esta pieza (quitando la parte de limit 3):

BBDD: corresponde a la base de datos, en nuestro caso de momento será BDTR.

Type: el tipo de consulta que vamos a realizar, en este caso SQLLIKE

Conjunto2: este conjunto son las funcionalidades de botones y cambios entre pantallas.

Conjunto 3: En este conjunto se hace la llamada al servicio de Sofia2 a través del componente web WebFetch1. Se incluye la cabecera y los datos de la URL que hemos definido en las variables globales.

Conjunto 4 este conjunto es el núcleo de la funcionalidad, recibe la información y la traduce para poder mostrarla de una manera clara por pantalla. En nuestro caso las modificaciones a realizar para adaptarlo a nuestra aplicación y a nuestro API son las siguientes:

Para saber la pinta que van a tener las respuestas de Sofia podemos acceder a Sofia2 > API Manager > Mis Suscripciones > Test and Doc sobre nuestro API. Una vez dentro pulsamos sobre la funcionalidad GET y se desplegará una pantalla como está:

Rellenamos los campos de la parte baja de la pantalla de manera que quede algo así (recordad adaptar el nombre que va después de “from” con el nombre de vuestra ontología y el API Key con el valor de Sofia2 > API Manager > Mi API Key).

Pulsamos en submit y en la pestaña de “Response text” nos aparecerá algo de este estilo:

{

“data”: “[ { “_id” : { “$oid” : “54f459b3e4b05707e804104a”} , “contextData” : { “session_key” : “7e96ab9a-383c-43f9-90f0-6bc468b073cf” , “user” : “SmartCampus”
, “kp” : “KP_SIB_API” , “kp_instancia” : “SmartCampus” , “timestamp” : { “$date” : “2015-03-02T12:38:11.145Z”}} , “Prueba_Smart
: {
“Autor” : “Prueba1
,
“Fecha” : { “$date” : “2014-01-30T17:14:00.000Z”}
,
“Medida” : “22.2}}
, { “_id” : { “$oid” : “54f45d05e4b05707e8041050”} , “contextData” : { “session_key” : “7e96ab9a-383c-43f9-90f0-6bc468b073cf” , “user” : “SmartCampus” , “kp” : “KP_SIB_API” , “kp_instancia” : “SmartCampus” , “timestamp” : { “$date”
: “2015-03-02T12:52:21.125Z”}} , “Prueba_Smart” : { “Autor” : “Prueba1” , “Fecha” : { “$date” : “2014-01-30T17:14:00.000Z”} , “Medida” : “22.4”}} , { “_id” : { “$oid” : “54f6d839e4b0ccca6024d611”} , “contextData” : { “session_key”
: “71fd1a83-a52d-4fde-9a78-3b4464f419c7” , “user” : “SmartCampus” , “kp” : “KP_SIB_API” , “kp_instancia” : “SmartCampus” , “timestamp” : { “$date” : “2015-03-04T10:02:33.437Z”}} , “Prueba_Smart” : { “Autor” : “Guille” , “Fecha”
: { “$date” : “2015-03-02T00:00:00.000Z”} , “Medida” : “2”}
}]”,

“error”: null,

“errorCode”: null,

“ok”: true

}

Se puede observar que aparece el nombre de nuestra ontología, en este caso “Prueba_Smart” y, a partir de ese punto, aparecen las medidas que hemos ido introduciendo y que están almacenadas en la base de datos. En este mensaje nos basaremos para decir a la aplicación cómo traducirlo.

Lo primero es decir dónde empieza el mensaje y dónde acaba. En este caso empieza con “Prueba_Smart” y termina con “}} estos valores son los que pondremos en el bloque “when WebFetch .gotFile” que es el bloque que se activa cuando recibimos datos de la aplicación. Ahí especificamos qué parte del mensaje queremos traducir:

La siguiente parte es saber dónde empiezan nuestros datos y dónde terminan. Nosotros queremos recuperar:

Medida: se encuentra entre “Medida” : “ y

Autor: se encuentra entre “Autor” : “ y ” ,

Fecha: se encuentra entre “Fecha” : { “$date” : “ y T

En vuestro caso, si habéis llamado de manera distinta a los campos pues tendréis que ver entre que cadenas de texto se encuentra lo que os interesa recuperar. Estos datos los introducimos en el bloque “Todas_Las_Medidas” de manera que quede algo como esto:

El flujo de la aplicación es: Pulsar botón à Se llama al bloque “GetMedidas” para enviar la petición a Sofia2 à Al recibir respuesta se llama al bloque “when WebFetch .gotFile” àSe comprueba si el código es 200 (todo ok) à Se pasa el mensaje al bloque “Todas_Las_Medidas” (su respuesta será lo que se pintará en el layout “Datos”) à Se llama al bloque ParserMedidas la información de dónde empieza y dónde se encuentran los datos que queremos obtener à El bloque Parser Medidas obtiene los datos y los devuelve (estos datos devueltos son los que se pintarán en el layout “Datos”).

Con esto habríamos terminado de configurar nuestra aplicación para que funcione con Sofia2 y pueda tanto enviar como leer datos. Para probarla podéis utilizar los métodos que definimos al final del post anterio. Profundizando un poco en los bloques y con la lectura de algún tutorial de App Inventor Básico se puede entender y modificar esta aplicación para que sirva de base para cualquier necesidad de lectura y escritura en Sofia2 a través de una app móvil.

Este es el último post de la serie. Esperamos que haya sido un viaje divertido y fructuoso y que todos hayáis conseguido hacer vuestras propias aplicaciones que funcionen a través de Sofia2. Ya sabéis ante cualquier duda o sugerencia no dudéis en escribir un comentario y os intentaremos contestar ASAP.

Seguid atentos al blog ya que seguramente se publiquen más temas relacionados sobre aplicaciones móviles y Sofia2.

Sofia2 y Google App Inventor: Pedir, recibir y mostrar información.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s