sábado, 17 de noviembre de 2018

FUSION TABLES CONTROL EN APP INVENTOR 2 (PARTE1)

¿QUÉ ES FUSION TABLES?

Fusion tables es un componente no visible que se comunica con Google Fusion Tables de Google. Fusion Tables te permite guardar, visualizar, editar, borrar y ver tablas de datos en tu aplicación, y por supuesto todos estos datos estarán alojados en internet. Con esto podremos hacer que cualquier usuario que tenga la misma aplicación y una conexión a internet haga modificaciones en la misma tabla o pueda consultar cualquier dato que esta contenga, y lo mejor de todo es que estos datos no solo los vamos a poder ver a modo de texto, también los vamos a poder representar en nuestra aplicación a modo de gráficas o mapas, si estos últimos son coordenadas geográficas.

CREACIÓN DE UNA FUSION TABLES

Lo primero que necesitarás es una cuenta de Gmail, para iniciar sesión. Seguramente ya tengas una, ya que para poder utilizar App Inventor es indispensable.

Abre sesión con tu cuenta de correo en google drive y pulsa en el botón de nuevo, situado a la izquierda de la página.

Una vez pulsado el botón de nuevo, muévete a Más . Si no ves una opción de Google Fusion Tables, como te muestro en la siguiente imagen, selecciona Conectar más aplicaciones y desplázate por la página de los servicios de Google para encontrar el servicio de Fusion Tables o escribe fusion tables en el rectángulo de búsqueda y conectalo a su Google Drive.

Ahora desde google drive pulsamos de nuevo en  “nuevo” para crear una fusion tables,  muévete a más y pulsa en Tablas dinámicas de google, tal como te muestro en la siguiente imagen.

Se nos abrirá una ventana en la que nos dará varias opciones, nosotros pulsaremos en  Create empty table para crear una nueva tabla vacía,

Seguido pulsaremos en NEW TABLE y a nuestra tabla le daremos el nombre de “Alumnos”, ya que en este tutorial crearemos una tabla de alumnos de una clase en la que se nos mostrará, su nombre, edad, lugar de nacimiento, fecha de nacimiento y nota de examen de matemáticas.

Se nos abrirá una nueva página donde podremos ponerle el nombre a nuestra tabla, en este ejemplo solo modificaremos este campo pero vosotros despues podreis variar los demas campos para experimentar.  Una vez terminado pulsaremos en salvar, y nos devolverá automáticamente a la pantalla de edición.

Ahora tendremos que cambiar el nombre de cada columna y crear una nueva, para ello situando el ratón en cada uno de los textos descriptivos de cada columna podremos ver que nos sale una flecha, si pulsamos sobre ella nos desplegara una serie de opcione, pulsa en Change…

Se nos abrirá una nueva pantalla donde editaremos el nombre de la columna y el tipo de dato, para las demás columnas será necesario cambiar el formato.

una vez hecho todos los cambios pulsaremos en el botón Save que nos devolverá a la pantalla inicial. Tendremos que hacer esto para cada una de las columnas además de añadir una nueva que usaremos para las notas, para ello haz clic en Edit> Change columns se abrirá una nueva página donde podremos pulsar en New y después en Column .

Pondremos en nombre Notas, le daremos tipo numérico y de formato decimal, quedará como en la siguiente imagen.

Después salvamos y nos devolverá automáticamente a la pantalla de edición donde podrás observar los cambios en nuestra tabla. Tiene que quedar como en la siguiente imagen.

Ahora necesitamos que nuestra tabla pueda ser vista desde cualquier terminal que tenga nuestra aplicación, y para eso tenemos que hacerla pública, ya que por defecto está configurada como privada. Para ello pulsaremos en Tools > Publish…

Se nos abrirá una ventana nueva en la que se nos dirá que

Esta tabla es privada y no será visible. Cambiar visibilidad. Pulsaremos en Change visibility

Se nos abrirá una nueva ventana en la que nos mostrará quién tiene acceso a la tabla y seguramente que la tengas como privada, pulsaremos en cambiar, esto permitirá que cualquier usuario pueda ver la tabla.

En el siguiente paso marcaremos como público en la Web, y pulsaremos en el botón de guardar.

Bien ya quien descargue nuestra aplicación podrá ver nuestra tabla pero no podrá hacer modificaciones, para hacer modificaciones desde la aplicacion tendra que tener credenciales y quizá esta es la parte más complicada para usuarios que no tienen mucha experiencia en App Inventor 2 y Fusion tables, asi que intentare ser lo más claro posible y explicar bien todo los pasos.

DANDO CREDENCIALES A NUESTRA FUSION TABLES

Lo primero que tenemos que hacer es abrir la página de consola de Apis de Google https://console.developers.google.com/cloud-resource-manager

Intenta abrir esta página con la misma cuenta de correo con la que creaste la tabla.

Una vez en la página pulsaremos en Crear proyecto,

En la siguiente ventana le daremos al proyecto el nombre de alumnos

y anotamos el ID del proyecto, y seguido pulsaremos en CREAR.

Pulsaremos en el menú de navegación situado al lado izquierdo de la página,

pasaremos el ratón por las opciones desplegadas, hasta llegar a APIs y servicios y seguido pulsaremos en Panel de control

Una vez estemos en nuestro panel de control pulsaremos en HABILITAR APIS Y SERVICIOS

Dentro del recuadro de búsqueda escribimos Fusion tables e inmediatamente nos filtra de todos los servicios el que nos ocupa en este tutorial.

Pulsamos sobre el resultado y en la nueva página que se abrirá pulsaremos en el botón de color azul que pone HABILITAR

Ahora nos toca darle las credenciales necesarias para ello pulsaremos en el botón de credenciales que se ha creado en la nueva página.

Pulsamos en el botón de crear credenciales y del desplegable en Ayúdame a elegir

Se nos cargará una página donde deberemos seleccionar las siguientes opciones. Donde nos pregunta ¿Qué API estás utilizando? seleccionaremos de la lista  Fusion Tables API.

Seguido cargará una serie de preguntas en relación con la opción elegida anteriormente.

Donde nos dice que ¿Desde dónde llamarás a la API? seleccionamos del desplegable Servidor web y a la pregunta de ¿A qué tipo de datos accederás? seleccionamos Datos de aplicación, nos cargara la siguiente pregunta ¿Tienes pensado utilizar esta API en App Engine o en Compute Engine? a la que contestaremos No, no estoy usando Engines, y seguido pulsaremos el botón azul ¿Qué credenciales necesito?

Inmediatamente cargara una pagina en la que nos pedirá el nombre de cuenta de servicio, pondremos alumnos y en tipo de clave marcamos P12, seguido pulsamos en Continuar.

Nos descargara a nuestro ordenador un archivo, en mi caso el archivo es alumnos-9f352648ef8f.p12, no tiene que ser el mismo en vuestro caso.

tenemos que tener y guardar en un sitio seguro y localizable nuestro archivo ya que será vital para poder seguir este tutorial y poder utilizar la fusion tables.

También comentar que la tabla que creamos en el principio de este tutorial se encuentra guardada en Google Drive por si queremos en todo momento abrirla o editarla.

Sin más me despido esperando que este tutorial te sea de gran ayuda y si te ha gustado compartelo en tus redes sociales favoritas, si tienes dudas o crees que algo no está bien o simplemente se puede mejorar escribelo en los comentarios.


miércoles, 24 de octubre de 2018

COMPONENTE FILE (ARCHIVO) EN APP INVENTOR 2

¿QUE ES EL COMPONENTE ARCHIVO?

Es un componente no visible que sirve para recuperar o guardar archivos de texto plano en el dispositivo, se puede escribir archivos en el directorio privado de la aplicación, donde no podrá ser accedido por ninguna otra aplicación del dispositivo. Pero si la dirección del archivo comienza con una barra invertida (/), el archivo se guardará en la tarjeta de memoria.

¿UN EJEMPLO SENCILLO?

Bien en nuestro ejemplo crearemos una simple aplicación donde podremos anotar  lo que queramos a modo de notas, podremos guardarlo y más tarde recuperarlo, para si queremos modificarlo,  para ello lo que haremos es crear el layout donde utilizaremos un VerticalScrollArrangement,  en donde introduciremos una Etiqueta y una DisposiciónHorizontal, dentro de esta disposición horizontal pondremos tres botones, uno para cargar el texto, otro para guardarlo, y por último un botón para poder editar texto, en un CampoDeTexto. Por último y no menos importante necesitaremos dos componentes no visibles, un Notificador,  que nos avisara si se ha guardado correctamente nuestro archivo o si se ha cargado sin ningún problema, y un componente File.

Como el objetivo de este tutorial es el de ver el uso del componente File, el diseño vamos a dejarlo en un segundo plano, mostraré las capturas de como me ha quedado a mi y mas abajo podreis descargar el proyecto.

LA LÓGICA DE NUESTRO EJEMPLO

Lo primero que vamos a necesitar es una variable global que contendrá un cuadro de texto vacío, a la que daremos el nombre de Texto.

Ahora lo que necesitamos es pasar lo que escribamos en nuestro campo de texto a nuestra etiqueta, indiferentemente si ya teníamos algo escrito o no, usando nuestro botón  BTNponertxt, para ello necesitamos hacer que cuando el usuario pulse el botón, ponga la etiqueta TextNota con el resultado de unir el texto que contenga TextNota (si lo tuviera), con el de la caja de texto. Tiene que quedar de la siguiente manera.

Bien, el siguiente paso podría ser guardar el texto en un archivo dentro de nuestro dispositivo, para asegurarnos de que la próxima vez que abramos la aplicación podamos recuperarlo. para ello necesitamos que al pulsar nuestro botón BTNGuardar la variable global Texto obtenga el texto de nuestra etiqueta TextNota, y seguido guardar la variable en un fichero con el nombre de txtNota.txt. quedará de la siguiente manera.

Vamo a necesitar saber si se a guardado correctamente, para ello necesitamos el bloque cuando Archivo1.AfterFileSaved que nos indicará si el contenido de un archivo a sido escrito, y si es cierto llamaremos al nuestro componente notificador, que mostrará un cuadro de diálogo mostrando un mensaje, que será el resultado de unir dos textos. En primer lugar será tomar el nombreDeArchivo y lo uniremos con un bloque de texto vacío que en su interior pondremos el texto “Se guardó con éxito.” en el título pondremos el texto “Aviso” y en textoEnBotón “Aceptar”. Tiene que quedar de la siguiente manera.

Bien ya hemos creado un texto, con ayuda de un botón lo guardamos y ahora solo nos falta cargar el texto guardado. Para ello cuando pulsemos nuestro botón BTNCargar.Clic llamaremos a nuestro componente llamar Archivo.LeerDesde y en nombreDeArchivo pondremos un bloque de texto con el nombre del archivo con el que se guardó. Quedará de la siguiente manera

Igual que cuando guardamos nuestro archivo, mostramos un cuadro de diálogo para decirle al usuario que todo estaba correcto, ahora haremos lo propio utilizando el bloque cuando Archivo1.ObtuvoTexto que llamara si es cierto al bloque llamar Notificador1.MostrarDiálogoMensaje, en donde el mensaje pondremos el texto “Se cargó con éxito” en título el texto “Aviso” y en el textoEnBotón “Aceptar”. Por último pondremos el texto de nuestra etiqueta TextNota con el valor de nuestra variable local texto, quedando de la siguiente manera.

Bien, si ahora ejecutamos la aplicación con nuestro método favorito, podremos escribir en la caja de texto, pulsando el botón de añadir texto copiarlo a nuestra etiqueta, guardar el texto y volverlo a cargar pulsando en los respectivos botones.

Aquí tienes el enlace del proyecto de ejemplo en formato AIA para App Inventor.

Ejemplo App Inventor

Bueno, sin mas me despido esperando que este post te sea de utilidad, tanto si estás empezando como si estas atascado en algún proyecto.

No olvides dejar algún comentario y no dejes de compartirlo.

Un saludo.


domingo, 7 de octubre de 2018

CAMBIO DE PANTALLA Y PASO DE DATOS CON TINYDB

Hola bienvenidos una vez más a inventordeaplicaciones.es, en esta nueva serie de post vamos a ver cómo manejar los datos en App Inventor 2.

A medida que nuestras aplicaciones crezcan en tamaño nos será de gran utilidad saber guardar datos, tanto para guardarlos de manera local en un dispositivo, como en la nube, para ello App Inventor ofrece distintas herramientas y nosotros veremos cómo se manejan en una serie de tutoriales que contendrá ejemplos prácticos, que una vez realizados obtendrás los conocimientos suficientes para crear aplicaciones que manejan todo tipo de datos. Empezaremos por los más sencillos, y terminando por los más avanzados. Bueno sin mas empecemos.

CAMBIO DE PANTALLA Y RECUPERACIÓN DE DATOS

En este primer ejemplo crearemos una aplicación con dos pantallas, en la primera, se nos pedirá que ingresemos nuestro nombre y edad, y pulsando un botón, abriremos la segunda pantalla, en la que recuperaremos los datos de la primera para construir una frase de bienvenida, para conseguir esto, necesitaremos guardar el valor de nuestras variables para más tarde utilizarlas, para ello utilizaremos el componente TinyDB.

QUE ES EL COMPONENTE TinyDB

TinyDB es un componente no visible que puede almacenar datos.

Las aplicaciones creadas con App Inventor se inicializan cada vez que se ejecutan, es decir, si inicializamos una variable con algún valor y salimos de la aplicación, el valor de esa variable se borrara, y no estará la próxima vez que se ejecutemos la aplicación.

TinyDB es por así decirlo un  almacén de datos persistente para la aplicación, de esta manera los datos estarán disponibles cada vez que se abra la aplicación.

Un ejemplo puede ser un juego que guarda las puntuaciones más altas cada vez que se juega.

Los datos se almacenan en etiquetas. Para almacenar datos, se debe de especificar la etiqueta que corresponde a ese dato dándole así una identificación, por ejemplo, continuando con el ejemplo del juego, la puntuación podría ser “2548” puntos, que la guardaremos en TinyDB con una etiqueta llamada “Puntuación”, de esta manera cada vez que queramos acceder a ese dato solo tendremos que referirnos al nombre con que se guardó, en este caso “Puntuación”.

Solamente existe una base de datos para la aplicación. Aunque se utilicen distintos componentes TinyDB en una aplicación, todas ellas serán el mismo almacén. A si en el ejemplo que veremos más adelante, cada pantalla tendrá un componente TinyDB, pero todo lo que guardemos estará ubicado en el mismo almacén. Se deben utilizar distintas etiquetas  para guardar diferentes datos, y no usar diferentes almacenes. TinyDB es única para cada aplicación, es decir no la podremos utilizar para pasar datos a otras aplicaciones instaladas en el mismo dispositivo, pero si la podremos utilizar para pasar datos entre las distintas pantallas de la misma aplicación.

CREANDO EL DISEÑO DE NUESTRAS PANTALLAS

Para nuestro ejemplo necesitamos dos pantallas, en la primera pantalla se le preguntará al usuario su nombre y edad, para ello utilizaremos dos etiquetas, dos cajas de campo de texto, un botón que te servirá para guardar los datos introducidos y cargar la segunda pantalla, y un componente no visible TinyDB.  La segunda pantalla mostrará un mensaje de bienvenida utilizando el nombre que anteriormente introdujo el usuario, más abajo mostrará si el usuario es mayor de edad o no lo es, para ello utilizaremos los datos de edad que introdujo, para esta segunda pantalla sólo utilizaremos dos etiquetas, en la primera pondremos el texto  “¡BIENVENIDO”, y en la segunda etiqueta la dejaremos vacía, más adelante la rellenaremos usando nuestro programa. Nos tiene que quedar de la siguiente manera.

Como el propósito de este post es ver la utilización del componente TinyDB no nos centraremos mucho en el diseño, mas adelante podras descargar el archivo del proyecto para que veas como yo he estructurado el diseño de los componentes.

CREANDO LA LÓGICA DEL PROGRAMA

Bien lo que necesitamos es que cuando el usuario introduzca en los campos de texto el nombre, edad y pulsemos el botón, guarde la información y cargue otra pantalla, pero antes tenemos que asegurarnos de que el los campos de texto no están vacíos, además de una buena práctica en programación, nuestra aplicación no sería muy funcional, a esto añadiremos un mensaje al usuario avisando que tiene que rellenar toda la información.

Lo primero inicializamos las variables globales, la primera la llamarás nombre y a la segunda edad, ambas contendrán un bloque de texto vacío.

Seguido arrastramos el bloque Cuando BTNGC.Clic al visor e introduciremos dentro un bloque condicional SI. Este bloque lo utilizaremos para para comprobar si las cajas de texto están vacías, para ellos introduciremos dentro el bloque de lógica ”O” y dentro del mismo en el primer hueco colocaremos un bloque de texto está vacío que devolverá cierto si la longitud del texto es 0, y a este le uniremos CTNombre.texto. Para el segundo hueco del bloque introduciremos la misma combinación de bloques, cambiando el bloque CTNombre.texto por el de CTEdad.texto.

Volviendo al bloque SI a continuación del entonces colocaremos el bloque Llamar notificador1.Mostrar Alerta de nuestro componente no visible notificador, al que en su hueco aviso pondremos el siguiente texto, “POR FAVOR RELLENE TODOS LOS CAMPOS”.  Tiene que quedar de la siguiente manera.

De esta manera si el usuario pulsa el botón y falta rellenar algún campo o los dos, mostraremos el aviso, y la aplicación no cambiará de pantalla.

Una vez comprobado que el usuario a cumplimentado la información, vamos a pulsar en la rueda dentada del bloque if, y le vamos a añadir el bloque si no, dónde pondremos las variables anteriormente inicializadas con el valor de las cajas de texto, utilizaremos dos bloques poner global donde uniremos los contenidos de la caja de texto. Quedará de la siguiente manera.

Ahora colocaremos justo debajo un bloque Llamar TinyDB. guardar valor , y en el hueco correspondiente a etiqueta pondremos el texto “NOMBRE” este será el nombre con el que guardaremos nuestro dato contenido en la caja de texto, para más tarde recuperarlo. Ahora en el hueco correspondiente aValorAGuardar pondremos el dato a guardar que será nuestra variable global nombre. Seguido colocaremos otro bloque Llamar TinyDB. guardar valor pero esta vez en etiqueta pondremos “EDAD” y en ValorAGuardar pondremos la variable global edad.

Quedará de la siguiente manera.

Solo nos falta una última cosa ahora que tenemos los datos guardados, y es abrir nuestra segunda pantalla, para ello colocaremos un bloque Abrir otra pantalla nombre de la pantalla, al que le uniremos el nombre de nuestra segunda pantalla, en este caso Screen2. Todo quedará de la siguiente manera.

Ahora sin salir de la pantalla de bloques seleccionaremos nuestra segunda pantalla, en esta segunda pantalla recuperaremos los datos guardados en la primera pantalla, y construiremos una frase con ellos.

lo primero que vamos a hacer es crear dos variables globales iguales a las de la primera pantalla y le daremos el mismo nombre.

Ahora utilizaremos el bloque cuando Screen2 inicialize para una vez iniciada esta pantalla, poder recuperar los datos sin que el usuario tenga que hacer nada. Ahora daremos valor a nuestras variables globales utilizando para ello los bloques llamar TinyDB.ObtenerValor que en su hueco etiqueta utilizaremos el nombre de la etiqueta con el de la guardamos respetando las mayúsculas y minúsculas, si no la hacemos dará error. Para el campo Valor SiEtiquetaNoExiste podemos poner ERROR, una vez unido todos los bloques nos tiene que quedar de la siguiente manera.

una vez recuperado nuestros datos utilizaremos estos para crear nuestro mensaje, para ello nos ayudaremos del bloque poner etiqueta1.texto al que añadiremos un bloque de texto unir. Necesitaremos añadir el texto que ya tenía la etiqueta1, los valores guardados en la pantalla Screen1,  para ello utilizaremos el bloque etiqueta1.Texto, más un espacio, utilizando el bloque de texto entrecomillado vacío, más el valor que se ha guardado en la variable nombre, y por último añadiremos un bloque de texto con el símbolo cerrado de exclamación.

Una vez unidos todos los bloques nos tiene que quedar de la siguiente manera.

Ahora vamos a comprobar que el dato guardados en la variable edad sea menor de 18, si esto fuera cierto mostraremos el siguiente mensaje “Lo sentimos eres menor de edad” en caso contrario mostraremos este otro “Genial eres mayor de edad”.

Para hacer esta comprobación utilizaremos el bloque condicional SI, utilizaremos también los datos contenido en nuestra variable edad, para ello utilizaremos el bloque tomar global edad, un bloque matemático de comparación menor que < y el bloque matemático vacío que en su interior pondremos 18. Por último, pulsando la rueda dentada superior izquierda del bloque  SI, le añadiremos el bloque SI NO. Dónde en caso contrario a lo anterior pondremos el texto “genial eres mayor de edad” para ello utilizaremos el bloque poner etiquetas2.como y un bloque de texto que contengan en  el interior el texto antes mencionados. Unidos quedarán de la siguiente manera.

Solamente nos queda ejecutar nuestra aplicación con nuestro método favorito, pero antes nos aseguramos de estar en la Screen1 de lo contrario nuestra aplicación comenzará a ejecutarse desde Screen2, y no obtendremos los resultados deseados.

bueno creo haber explicado bastante bien los bloques TinyDB, siéntete libre de hacer cualquier tipo de comentario o duda que quieras resolver, y si te ha gustado compártelo.

DESCARGA  EL PROYECTO DE EJEMPLO

Compartir archivos y texto con Sharing

En alguna ocasión, tendrás que crear una aplicación en app inventor en la que quieras mandar fotos y videos a otras aplicaciones instaladas ...