Sofia2 y Google App Inventor: Enviar información.

cabezera_sofia_appinventor

Por fin ha llegado el momento de aprender y empezar a desarrollar una App que pueda funcionar con Sofia2, que sirva para algo y, lo mejor de todo, que podáis enseñar a vuestros familiares y amigos y quedar como un señor (o señora) diseñador (o diseñadora) de aplicaciones.

Para empezar necesitamos tener hechos algunos deberes:

– Tener una cuenta en gmail para poder acceder al app inventor.

– Estar registrados en Sofia2.

– Fichero .aia de Sofia2_Temperatura (fichero).

– Haber creado una ontología en Sofia2 (ver el artículo anterior).

– Haber creado una API sobre nuestra ontología en Sofia2 (ver artículo anterior).

Una vez tengamos todo esto, será el momento de ponerse manos a la obra.

Lo primero es conectarse al App Inventor y crear una nueva aplicación. Para ello accedemos a la url: e introducimos nuestra cuenta de correo de gmail. Pulsamos arriba a la izquierda sobre la pestaña de “Projects” y seleccionamos la opción “import Project (aia) from my computer”.

Navegamos por nuestro ordenador hasta la ruta en la que tengamos el fichero .aia que hemos descargado. Una vez encontrado, lo seleccionamos y pulsamos en abrir. Tras esto veremos una pantalla similar a esta:

Podéis ver que es una aplicación ya desarrollada y terminada. Como la idea de estos posts es hacer algo accesible a todo el mundo hemos pensado que lo más sencillo es proporcionar una aplicación, explicar los distintos campos que contiene y explicar cómo adaptarla a cada persona. A pesar de que Google App Inventor proporciona cierto nivel de abstracción, hacer una aplicación con esta herramienta no es lo más sencillo del mundo. Por eso, con algo ya creado, podréis cambiar lo que vosotros creáis oportuno y utilizar la aplicación que veremos en este post como base para futuras aplicaciones que queráis conectar a Sofia2 para enviar datos.

Desde la pantalla principal, pulsamos sobre la pestaña que se indica en la siguiente imagen y cambiamos a Inserción, que es la funcionalidad que se va a explicar en este post:

Para hacer más sencilla la explicación de esta parte, vamos a dividir el post en dos: por un lado la parte de la interfaz gráfica con los botones, campos de texto, “date picker”, imágenes, layouts… Y por otro lado tendríamos la parte de los bloques que es donde se define el funcionamiento y las acciones de la aplicación.

Interfaz gráfica:

Interfaz gráfica o vista “designer” es la vista en la que podemos incluir todo aquello que queramos que haya en nuestra pantalla. Los objetos se añaden arrastrándolos desde la columna Palette que está a la izquierda de la pantalla. Los elementos añadidos aparece a la derecha de la pantalla en la columna “Components”. Haciendo clic sobre cada uno de ellos podréis ver sus propiedades en la columna Properties la derecha de la de Components y además se resalta el componente en la pantalla central.

El diseño de la pantalla depende de las necesidades que se tengan. En nuestro caso, necesitamos adecuar los campos a los campos que tiene nuestra Ontología en Sofia2 que son medida, autor y fecha. Es decir que necesitamos dos campos de texto para la medida y el autor y un campo datepicker para poner la fecha. Adem

Los componetes que se han utilizado son:

Layouts: Definen áreas donde van a insertarse otros elementos. En nuestro caso son 5 y se llaman Layout1, Layout2… Hay 3 tipos distintos horizontal (los elementos se van colocando uno al lado del otro), vertical (elementos unos encima y otros debajo) y tabla en la que los elementos se distribuyen como en una tabla.

Campos de texto: Son campos en los que podremos escribir. En nuestro caso como tenemos uno restringido a números (activando el campo Numbers Only). Nuestra ontología (estructura de datos) en Sofia2 tiene 3 campos dos de tipo string por eso tenemos 2 campos de texto.

DatePicker: Es un tipo de componente que sirve para poner fechas de manera sencilla (el típico calendario de Android). Como en nuestra ontología también tenemos que insertar un campo fecha ponemos este elemento, que en la app se llama “Fecha”.

Botones: Todos sabemos lo que es un botón, se aprieta y pasan cosas. Nosotros hemos optado por poner 2 botones uno para volver a la pantalla del menú y otro para enviar. Su funcionamiento lo describiremos en la parte de bloques más adelante.

Imágenes: Los componentes imágenes nos permiten utilizar una imagen de nuestro ordenador dentro de la aplicación. Es importante estar atento a las propiedades height y width para que no se descuadre. Otra opción es meterla dentro de layouts.

Web: La última pestaña de la columna “Palette” se llama “Connectivity” y contiene distintos elementos para conectar la aplicación. En nuestro caso hemos elegido un componente de tipo web para poder conectarnos a Sofia2 a través de internet.

Notificador: Los notificadores sirven para mostrar mensajes temporales dentro de la aplicación. En nuestro caso hemos añadido uno que se llama “Notifier1”. Su funcionamiento lo explicaremos en la siguiente parte del post.

Elementos ocultos: Hay una propiedad para casi cualquier componente del app inventor que se llama visible. Si la desmarcamos en un elemento, este no podrá verse hasta que la volvamos a activar. Esto sirve para, por ejemplo, simular que se ha cargado una imagen en una pantalla cuando esa imagen ya estaba cargada pero oculta. Esa técnica se utiliza en la aplicación con los elementos ok y error que son dos imágenes de un tick verde y una cruz roja que en el momento de abrir la aplicación no se ven.

Esto ha sido una explicación express de la interfaz de nuestra aplicación y de la vista “Designer” del app inventor. Lo ideal sería investigar y profundizar un poco más añadiendo botones, modificando propiedades de los componentes…

Bloques:

La vista de bloques o Blocks, se activa en la parte superior derecha de la pantalla del App Inventor.

En esta vista nos encontraremos con un montón de cosas que a simple vista parecen un infierno. Pero como sois unos afortunados no tenéis que hacer a penas nada para que la aplicación funcione con vuestra ontología de Sofia2 y podáis enviar datos. Lo único que necesitáis es prestar atención y entender lo que a continuación os explicamos.

En la vista de bloques hay dos zonas importantes. La primera es la columna “Blocks”.

En esta columna hay varios campos. Primero están los elementos genéricos y después los elementos que hemos puesto nosotros en nuestra aplicación desde la vista de diseñador. Al hacer click sobre cada uno de ellos se mostrarán todas las propiedades y métodos que se pueden usar sobre ellos.

La segunda zona importante es la parte del “Viewer” que es donde iremos construyendo los distintos bloques para que nuestra aplicación funcione como nosotros queremos. Los bloques se arrastran desde la columna Blocks y pueden encajarse con otros. De cara a hacer este post lo más ligero y sencillo posible hemos dividido los bloques de nuestra aplicación en 5 conjuntos:

Como podéis ver en esta captura modificada hemos dividido todos los bloques en 5 conjuntos distintos:

A continuación pasamos a explicar más detalladamente los distintos bloques o conjuntos de bloques.

Conjunto 1: En este conjunto hemos defiido una serie de variables globales que utilizaremos en la aplicación. Una variable global no es más que un texto o un número que iremos modificando cuando lo necesitemos (para guardar valores por ejemplo) y podremos acceder a ese valor en cualquier momento. La parte más interesante de este conjunto es el último bloque, el que se llama header, que será una de las partes que tendréis que modificar para que vuestra aplicación envíe datos a vuestra ontología.

Conjunto2: Este conjunto contiene la funcionalidad del datepicker (el elemento que sirve para definir la fecha). Básicamente es una funcionalidad que hemos creado para adecuar que las fechas que se generan sean las que nosotros podemos enviar a la ontología de Sofia2 ya que sólo acepta fechas con el formato YYYY-MM-dd-THH:MM_ss.sssZ es decir algo del tipo: 2015-01-01T15:04:00.000Z. Aquí no hay que modificar nada.

Conjunto 3: En este conjunto hemos definido simplemente algunas funciones para cuando se aprieta un botón u otro de nuestra aplicación. Tampoco hay que modificar nada.

Conjunto 4: Este conjunto es el que se encarga de recibir las respuestas desde Sofia2 una vez hemos enviado un mensaje a la plataforma. Simplemente muestra dos mensajes “Inserción correcta” o “Error en la Inserción” dependiendo del código que devuelve Sofia2 (200 significa OK).

Conjunto 5: este último cojunto es el que controla el funcionamiento del botón enviar. Este conjunto junto con el primero son los únicos que hay que modificar para adecuar la aplicación móvil de cada uno a su ontología. La parte importante es esta:

Intentaré explicarlo de la manera más sencilla posible. Si recordáis, en el post anterior, hablamos sobre el API Manager. Esta herramienta nos proporcionaba unos métodos para trabajar sobre nuestra Ontología a través de una url. Para configurar el envío de mensajes tenemos que modificar dos cosas:

Cabecera del mensaje:

Para modificar la cabecera de mensaje y que el sistema nos identifique correctamente y nos permita enviar datos a nuestra ontología debemos entrar en Sofia2>API Manager>Mi API Key y copiar ese valor en el bloque rosa que está debajo del bloque rosa en el que pone X-SOFIA2-APIKey (en el conjunto 1 de bloques). En el caso de nuestro ejemplo y con nuestro API Key (Recordad que el API Key no es público si no que es único para cada uno) debería quedar algo así:

El resto de valores no habría que modificarlos.

Cuerpo del mensaje:

En este caso, como queremos enviar, utilizaremos la funcionalidad POST, que deberíamos haber habilitado siguiendo los pasos del anterior post. A esta funcionalidad se accede (en el caso del ejemplo del último post) a través de la URL: http://sofia2.com/sib-api/api/v1/prueba_smartes/ En el caso particular de cada uno esta información la puede obtener entrando en Sofia2 y pulsando en API Manager > Mis suscripciones > Test and Doc de vuestra API. Arriba a la izquierda, en la pantalla que se abrirá, aparece un campo API INFO y ahí podéis ver la URL de acceso para vuestra API. Para enviar datos hay que añadir a la URLl la barra invertida “/” y así estaremos utilizando la funcionalidad POST de nuestra API. Bien, esa URL,” API INFO + /” debemos ponerla en el campo rosa que está a la derecha del bloque verde set web1 url:

Una vez modificada la URL hay que adecuar la variable global “mensaje”, que está justo debajo de Web1 Url. Aquí tenemos que poner la estructura de nuestra Ontología. Para saber qué pinta tiene vuestra Ontología, debéis entrar en Sofia2>Ontologías>Mis Suscripciones> Hacer clic sobre el ojo de la ontología de vuestra API y bajar hasta el campo Instancia JSON:

En el caso del ejemplo la Ontología es:

{“Prueba_Smart”:{ “Autor”:”string”,”Fecha”:{“$date”: “2014-01-30T17:14:00Z”},”Medida”:”string”}}

Así que, para que los campos de texto y fecha que rellenamos sustituyan los campos string y fecha que hay dentro, debemos hacer lo siguiente:

– Dividimos la estructura en cadenas:

o Cadena1: {“Prueba_Smart”:{ “Autor”:”

o Cadena2: “,”Fecha”:{“$date”: ”

o Cadena3: “},”Medida”:”

o Cadena4: “}}

– Ponemos cada cadena en su sitio, la primera en el primer campo rosa, la segunda en el segundo campo rosa… de manera que quede algo como esto:

Esto lo que hace es unir (mediante el bloque “join”) Las cadenas con los valores de los campos de texto autor, medida y la variable global FechaFormato que es donde tenemos almacenada la fecha introducida en el formato que espera recibir Sofia2. Como ya os digo, sólo tenéis que cambiar los campos rosas el resto de campos no habría que modificarlos.

Con esto habríamos terminado de preparar la aplicación para insertar en nuestra ontología. Para probarla podéis hacer dos cosas:

– Pulsar en el App Inventor sobre Connect y luego Emulator y se os abrirá un emulador de Android con vuestra aplicación (puede que tengáis que instalar un programa del app inventor):

– Pulsar sobre Build y luego en Save (apk to my computer) con lo que tendréis el apk que podéis instalar en cualquier dispositivo Android:

Este post no explica las funcionalidades de App Inventor ya que para un tutorial de ese calibre necesitaríamos varios posts y mucho tiempo. Pero lo que si explica o pretende explicar este post es, a groso modo, el funcionamiento de la aplicación. Con lo explicado deberíais poder adecuar la aplicación a vuestra API y vuestra Ontología y enviarle datos. Además, sería bueno que probarais a crear Ontologías con más campos e intentéis extrapolar lo explicado en este post.

En la siguiente publicación de esta serie explicaremos cómo leer los datos de nuestra Ontología a través de la aplicación.

Y, como viene siendo habitual, si tenéis cualquier duda, o no conseguís que os funcionen las cosas, escribid un comentario y os echaremos una mano en cuanto podamos.

Sofia2 y Google App Inventor: Enviar información.

Un comentario en “Sofia2 y Google App Inventor: Enviar 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