En este nuevo articulo vamos a ver como crear una Splash Screen o pantalla de inicio en App Inventor. Para ello nos ayudaremos una pequeña extensión que podréis descargar de aquíy que nos permitirá mostrar una animación gif en app inventor 2.
Diseñando la SPLASH SCREEN
Vamos a comenzar diseñando la Screen1 que será la pantalla que utilizaremos para la carga de nuestra aplicación y que mostrara una pequeña animación en formato gif. Además de una barra de progreso con un porcentaje y que podrás descargar desde este enlace.
Constara de una serie de disposiciones verticales y horizontales unas dentro de otras, donde colocaremos nuestros distintos componentes.
Tendremos una etiqueta a la que daremos el nombre de «TXTBarra» y que contendrá el texto «|». En su propiedad color de fondo, seleccionaremos el color naranja, este es el color que mas se asemeja al color del Gif. Esta etiqueta nos servirá para crear una barra de carga.
Mas abajo meteremos dos nuevas etiquetas. A la primera le daremos el nombre de «TXTCargando» y su finalidad será la de mostrar el texto cargando.
La segunda tendrá el nombre de «TXTNúmero» y contendrá el valor del porcentaje de carga. Añadiremos un componente no visible reloj, que configuraremos en sus propiedades «IntervaloDelTemporizador» a 200.
Añadiremos al proyecto una extensión para este tutorial que nos permitirá insertar gifs animados. Esta extensión se llama KIO4_AnimatedGif y la podrás descargar de aquí.
Buscando una animación Gif
Vamos a buscar una animación que se adapte a nuestro dispositivo. Para ello nos dirigimos a Google y escribimos en el buscador la palabra «86mQ.gif«.
Pulsaremos en la imagen con el botón derecho del ratón y seleccionaremos la opción «Guardar imagen». Guardaremos la imagen en formato JPG para utilizarlo mas adelante.
Ahora pulsamos sobre la imagen para obtener una vista previa y volvemos al proceso anterior. Al guardar la imagen se guardara en formato gif, que es el que usaremos.
Si quieres utilizar una animación distinta a la que aquí te muestro en la barra de búsqueda introduce «Gif de carga Android». En las opciones selecciona la opción ICON, para que tenga un tamaño aceptable. Ahora sigue el proceso anterior que vimos para el Gif del ejemplo.
Ahora solamente queda subirlo como medio multimedia a App Inventor. Pulsamos en medios y seleccionamos nuestro Gif.
Programando la lógica del Splash Screen
Como siempre nos dirigimos a nuestra pantalla de bloques, y una vez allí, lo que vamos hacer es decir a nuestra aplicación que cuando cargue la pantalla, cargue y comience la animación de nuestro Gif. Para ello utilizaremos el bloque «llamar animatedGif» dentro de la extensión. Dentro de su propiedad «layout» introduciremos la disposición vertical u horizontal en la que queramos que aparezca. en mi caso le pondré «DisposicionHorizontal1» . En su propiedad imagen solo tendremos que introducir una etiqueta de texto con el nombre de nuestra animación en mi caso «86mQ.gif«
Ahora lo que haremos será crear una pequeña barra de carga que se ira incrementando a medida que pase el tiempo, y después añadiremos el texto que visualizara el porcentaje de carga. Para ello lo primero que haremos será crear una variable global a la que le daremos el nombre «Porcentaje». Esta variable contendrá el valor actual de la carga y será inicializada a 0.
Utilizaremos el reloj para que cuando se dispare, si el valor de la variable global es menor de 100 incremente esta en uno. También multiplicaremos por dos el ancho de nuestra etiqueta «TXTBarra». Por último mostraremos el valor de nuestra variable global en la etiqueta «TxtNúmero».
Por último solo tendríamos que añadir el bloque «else» al «if» para que en caso de querer ejecutar una acción después de la carga, como por ejemplo, abrir una segunda pantalla o mostrar una notificación.
Bien con esto terminamos, hemos visto como agregar un componente Extensión a nuestro proyecto y como simular la carga de elementos en nuestra app. Si te a gustado, o tienes alguna duda escríbelo en los comentarios y no olvides suscribirte al blog, recibirás un regalo de bienvenida. Un saludo y hasta la próxima
En este tutorial vamos a mostrar estado de la batería en AppInventor 2. Existe una forma de incorporar JavaScript en tus aplicaciones. La técnica implica el uso del componente WebViewer como procesador JavaScript. En este articulo mostraremos el estado de la batería del dispositivo mediante JavaScript y el componente WebViewer. Utilizaremos un archivo HTML donde insertaremos código JavaScript. Este código no solo nos mostrara el porcentaje actual de la batería. Si no, que nos dirá en tiempo real si se esta cargando o no. Nos vamos a ayudar de dos funciones de App Inventor para comunicar la aplicación con el código JavaScript que se ejecuta dentro del componente WebViewer. A continuación, te muestro como mostrar estado de la batería en AppInventor 2.
DISEÑO DE LA APLICACIÓN
Para el diseño de la aplicación que hará mostrar estado de la batería en AppInventor 2, se ha utilizado una disposición vertical. En esta disposición se ha introducido un lienzo con un grafico. Mas abajo se ha colocado tres disposiciones horizontales. La primera contiene dos etiquetas. TXTBatería, que contendrá el texto, «La batería», y la etiqueta TXTEstadoBatería que mostrara si nuestra batería esta cargando o no. La segunda disposición horizontal contendrá dos etiquetas al igual que la primera. La etiqueta TXTnivel, que contendrá el texto «El nivel de batería es de:». Una segunda etiqueta TXTMuestraNivel que mostrara el nivel actual de la batería. Para la última disposición Horizontal tendremos la etiqueta TXTTiempoBatería que contendrá el texto «Tiempo de batería». Y por último la segunda etiqueta TXTMuestraTBatería que mostrara el tiempo restante de batería.
También utilizaremos varios componentes no visibles como un componente WebView, y tres componentes no visibles Reloj. Configuraremos el reloj 1 y 2 desmarcando la casilla «TemporizadorHabilitado» y configurando el «IntervaloDelTemporizador» en 1500. Para el reloj 3 desmarcaremos TemporizadorSiempreSeDispara y pondremos el tiempo en 1500.
Nuestra aplicación mostrara unos gráficos de batería que estarán almacenados en medios. Además incluiremos el archivo «BateriaAppInventor.html», que contendrá el código JavaScript que comunicara con nuestra aplicación. Todos estos archivos los podréis descargar del siguiente enlace.
Lo primero que haremos para mostrar el estado de la batería en AppInventor 2, es crear 5 variables globales. Estas variables las usaremos tanto para registrar los datos de lafunción contenida en JavaScript, como para guardar los valores.
La primera la llamaremos «ListaDeEstadosDevueltos» y la inicializaremos construyendo una lista vacía. Esta variable guardara los datos recibidos de JavaScript en forma de lista.
La segunda variable la llamaremos «BateriaCargando» y contendrá el valor de la primera posición de la lista creada anteriormente, y que corresponde a un valor booleano true o false. Si es true, la batería estará cargando, si es false, la batería no estará cargando.
El nombre que recibirá la tercera variable es «NivelDeBatería». Esta variable la inicializamos con un campo vacío de texto y contendrá la segunda posición de nuestra lista, que corresponde a un valor numérico de 0.1 a 1 este valor mas adelante lo multiplicaremos por 100 para sacar el nivel de batería actual.
La cuarta variable recibirá el nombre de «TiempoRestante» y contendrá la tercera posición de nuestra lista. Esta variable mostrara el tiempo restante de batería en uso. Tengo que decir que esta función no es compatible con todos los dispositivos a si que puede ser que no te funcione. Si esto último te sucede, te devolverá el valor de «infinity».
Nuestra última variable la llamaremos «GraficoBatería» estará inicializada con un campo de texto vacío y la utilizaremos para mostrar un grafico de batería con el porcentaje actual.
Llamando a nuestra función de JavaScript para Mostrar estado de la batería en AppInventor 2
Lo primero que vamos hacer es ejecutar una función de JavaScript contenido en nuestro HTML llamada «EstadoBateria()». Para ello nos vamos a ayudar de el reloj3, cuando pase un segundo y medio desde que iniciamos la aplicación le decimos que ejecute dicha función. Le estamos dando este tiempo para que cargue el archivo HTML sin problemas y no intente llamar a una función de nuestro documento HTML cuando este todavía no exista o no este cargado. Fíjate que esto solo va a suceder una vez ya que nuestro temporizador esta configurado para no repetirse.
Que sucede cuando ejecutamos la función «EstadoBateria()».
Si abrimos el documento Html en un procesador de texto, veremos que esta función llama a su vez a otra, llamada «updateBatteryStatus(battery)». Esta función hace uso del objeto window.AppInventor.setWebViewString, que devolverá un texto a la app creada, con el valor devuelto en su interior. En este caso devolverá un texto con el resultado de cada una de las llamadas a las funciones de control de batería, separadas por comas.
Ahora que ya sabemos que esta función no devuelve un texto separado por comas, que contiene el estado de la batería en el momento de la llamada a la función, vamos a completar un poco mas el código. Lo primero nos aseguraremos que el valor devuelto no esta vacío. Si este valor no esta vacío activaremos tanto el temporizador 1 como el 2.
Temporizador 1mostrar estado de la batería en AppInventor 2
Vamos a utilizar un temporizador para que cada 1,5 segundos se active. Este temporizador de nuevo hará una llamada a la función JavaScript EstadoBatería() de nuestro documento HTML, y lo hará cada 1,5 segundos provocando un bucle infinito. De esta manera a cada segundo y medio sabremos el estado de la batería. Pero nos falta mostrar esa información en nuestras etiquetas. Lo primero que haremos será crear una lista de la información recibida en la cadena de WebView, con el componente » Lista desde registro CSV». Esta lista la asignaremos a nuestra variable global «ListaDeEstadosDevueltos». Una vez que tengamos construida la lista, bastara con asignar cada elemento de la misma, con la variable correspondiente.
Entonces decimos que para la variable «BateríaCargando», le asignaremos el índice 1 que corresponde al dato que nos dirá si la batería esta cargando. Para la variable «NivelDeBatería» le asignaremos el índice 2, que corresponde con el valor de carga de la batería multiplicado por 100, ya que los valores recibidos, si recuerdas, están entre 0.1 y 1. Y por último asignaremos a nuestra variable global «TiempoRestante» el índice 3, que corresponde al valor de el tiempo que queda de uso de la batería.
Ahora si el contenido de la variable «BateríaCargando» es false pondremos en la etiqueta TXTEstadoBatería el texto No esta cargando. Si de lo contrario el contenido es True, devolveremos a la etiqueta el texto, Se esta cargando.
Ahora falta mostrar el porcentaje de batería en nuestra etiqueta «TXTMuestraNivel». Para ello, si el valor devuelto es mayor de 0, y menor de 10, le asignaremos el texto de 10%. Si el valor es mayor de 10 y menor de 20, le asignaremos a la etiqueta el valor de 20% y a si sucesivamente. De esta manera mostraremos el nivel de batería. Si por el contrario, no es ninguna de las anteriores será 0. Si quisiéramos mostrar el valores como 12% o 14% simplemente asignar e la etiqueta «TXTMuestraNivel» el valor de la variable «NivelDeBatería». Para este ejemplo yo me he decantado por utilizar el primer método, ya que me parecía demasiado sencillo simplemente asignar el valor de la variable.
Por último asignaremos a nuestra etiqueta «TXTMuestraTbatería» el valor de la variable global «TiempoRestante». Esta variable mostrara el tiempo restante de uso de nuestra batería. No todos los dispositivos serán compatibles con esta función. Si el tuyo no lo es recibirás el valor de Infinity.
Temporizador 2 para mostrar estado de la batería en App Inventor 2
Con este temporizador vamos a mostrar un gráfico de la batería en pantalla. Vamos a crear un procedimiento que se encarga de cambiar el grafico de la batería si esta cargando. Cuando deje de cargar. mostrara el grafico de porcentaje actual de la batería. Vamos a hacer lo mismo que hicimos con la etiqueta de texto que mostraba el porcentaje de la batería. Pero esta vez mostraremos un grafico. Si el Nivel de batería es mayor de 0 y menor de 20 pondremos la variable que contendrá el grafico a mostrar, con el grafico de la batería correspondiente, en este caso a 10.
El procedimiento que vamos a crear es muy sencillo, simplemente se encargara de cambiar el grafico de la batería si esta cagando. Si esta cargando y el grafico es de la batería cargando, lo cambiamos al grafico correspondiente con su nivel de batería. Por el contrario, si esta cargando y el grafico es el porcentaje de batería, pondremos el grafico cargando.
Solo falta llamarlo en el temporizador, y asignarle en su entrada «Imagen1» la variable global grafico batería. Y en su su entrada «Imagen2» el grafico «BateriaCargando.png»
Con esto vemos el uso de devoluciones con el bloque «CadenaDeWebView», y como ejecutar una función de JavaScript desde AppInventor. Esto abre grandes posibilidades, ya que podremos crear WebApps con app inventor 2.
Si te a gustado este articulo no dudes en dejarlo en los comentario al igual que tus dudas. Y si quieres apoyar esta pagina no dudes en suscribirte.
Diseño para mostrar graficas de datos en App Inventor
Para este diseño se a utilizado una etiqueta en la parte superior que muestra un titulo de ayuda al usuario, en el que se le pide que ingrese datos numéricos. Mas abajo tenemos un campo de texto que esta configurado para solo admitir números. Debajo del campo de texto tenemos un botón al que se le ha resaltado con el color rojo y que tendrá la función de añadir los valores numéricos a la gráfica. También se ha añadido al diseño un desplegable, que tendrá la función de cambiar la manera de ver la grafica, es decir, podremos cambiar de una grafica de barras, a una grafica en forma circular, los elementos de cadena serán los siguientes «Gráfico de barras, Gráfico circular, Gráfico de líneas, Diagrama de Venn«.
También tendremos dos etiquetas, estas serán útiles a la hora de ingresar los datos a la dirección web que generemos. Las dejaremos ocultas y borraremos el texto que contiene por defecto. Esto último es muy importante ya que de lo contrario no funcionara. Y por último tendremos una imagen que será la encargada de recibir el grafico creado.
Programando nuestra App para mostrar graficas.
Lo primero será crear una variable global a la que llamaremos «ListaNúmeros» y que inicializaremos con una lista vacía. Esta lista contendrá los datos que mostrara nuestra grafica.
Ahora programaremos nuestro botón, cuando pulsemos este, comprobaremos que la caja de texto no este vacía, si no esta vacía añadiremos el número contenido en ella a nuestra lista. Recuerda que la caja de texto tiene que estar configurada para admitir solo números. Una vez que hemos introducido los datos contenidos en nuestra caja de texto, en nuestra lista, borraremos su contenido y también borraremos el contenido de nuestras etiquetas.
Ahora por cada elemento de la lista que hemos creado, ya contenga un solo elemento o dos, añadiremos a nuestra etiqueta números, el texto que ya contenía mas el valor de la posición recorrida en la lista y una coma. Haremos lo mismo para la etiqueta nombres pero esta vez sustituiremos la coma por el símbolo » | «.
Vamos a crear un procedimiento que se encargara de mostrarnos las grafica en nuestra imagen. Este procedimiento le vamos a llamar «Muestra_Grafica» . La mecánica será muy sencilla, por cada opción que tenga seleccionada en el componente desplegable, mostrare un tipo de grafico. Entonces lo único que tengo que hacer, es comprobar si el índice seleccionado es igual a uno. Si es cierto mostrare un grafico de barras.
Esto lo conseguimos poniendo la foto del componente imagen con la siguiente dirección web «https://chart.apis.google.com/chart?cht=bvs&chl=» donde cht=bvs mostrara un grafico de barras. Seguido el contenido de la etiqueta «nombres», menos el último carácter, ya que este es una coma, mas «&chco=FF000000&chxt=y&chbh=a&chs=300×250&chco=A2C180&chtt=» que configurara tanto el tamaño como color etc… Podréis encontrar mas información en el PDF que he dejado para la descarga. El titulo, yo he puesto titulo, vosotros podéis poner lo que queráis. Mas «&chd=t:» que mostrara el nombre a cada dato, estos nombre los sacaremos de nuestra etiqueta nombres, y haremos lo mismo que con la anterior etiqueta, quitaremos el último carácter.
Para todas las siguientes opciones del componente desplegable haremos exactamente lo mismo. Lo único que modificaremos es «cht=bvs«. que para cada opción seleccionada será de la siguiente manera:
Gráfico circular: cht=p
Grafico de líneas: cht=Ic
Diagrama de Venn: cht=v
Una vez ya tengamos creado por completo nuestro procedimiento, lo insertaremos al final de nuestro bloque que detecta el clic del botón.
Ahora lo que haremos es mostrar una grafica distinta dependiendo de la selección del desplegable, si la opción seleccionada, es mostrar un grafico circular, la imagen cambiara para mostrarnos una imagen circular. Esto lo conseguimos llamando a nuestro procedimiento «Muestra_Grafica» cada vez que seleccionemos una opción del desplegable.
Bueno te invito a que experimentes con los tamaños, colores, formas, ayudándote con el PDF que podrás descargar. Ya sabes que si quieres que hablemos de algún tema o si tienes alguna duda, deja un comentario.
En este nuevo articulo vamos a ver como hacer foco en los objetos de la interfaces de App Inventor. Un usuario del canal de Youtube nos pregunto como podía desplazarse, de un lugar de la pantalla a otro, pulsando un botón. Bien, el proceso es sencillo, utilizando una etiqueta y haciendo foco en ella. Si bien es cierto, que no funciona igual para todos los objetos de la interfaces, vamos a ver un ejemplo donde crearemos una aplicación de registro de usuarios. Cada vez que pulsemos al botón de registro este comprobara si falta algún dato, si faltara alguno, hará foco en un objeto de la interfaces de app inventor y desplazara la pantalla.
Ya que el diseño de la App es bastante complejo, y emplearía parte de este articulo, vamos a ver un poco por encima sus características. No obstante, si quieres ver con detalle el diseño de la app, puedes descargar mas adelante el proyecto AIA, o bien, ver el vídeo de Youtube de este articulo que encontraras mas abajo.
Se a empleado un scroll vertical. Con el fin de repartir cada objeto de la interfaces mas aya de los limites de la pantalla. De esta manera se podrá apreciar mejor el efecto de foco en la interfaces de App inventor. Como ya decía al principio del articulo, crearemos una aplicación de registro, en la que utilizaremos una serie de etiquetas, cajas de texto, selectores de fecha y casillas de verificación, que el usuario tendrá que rellenar. Una vez terminado, si el usuario pulsa el botón y falta algún campo por rellenar, desplazaremos el scroll vertical hacia la zona donde este el campo vacío, usando el foco. Ademas usaremos un componente no visible notificación para mandar mensajes al usuario de que es lo que le falta.
PROGRAMANDO LA APP DE FOCO EN LA INTERFACE
Lo primero que realizaremos es crear las variables que usaremos para controlar o saber si algún componente de la interfaces esta vació o, no seleccionado. Para ello crearemos distintos métodos de control, y necesitaremos iniciar una serie de variables de distinta manera. La primera variable la llamaremos «Control_Completado» y sera la encargada de controlar que todos los campos de nuestra interfaces se han rellenado, la iniciamos con un valor falso. Nuestra segunda variable le daremos el nombre de «Texto_Fecha» y contendrá el texto que tengamos en el selector de fecha. Para nuestra tercera variable, crearemos una lista de seis elementos, los cuatro primeros indices contendrá el identificador de cada uno de los cajas de texto. Para los dos indices restantes de nuestra lista, utilizaremos los identificadores de nuestro campo de contraseña. A esta última variable la llamaremos «Lista_de_campos«.
Ahora cuando inicie nuestra aplicación meteremos el valor del texto de nuestro selector de fecha en la variable «Texto_Fecha«. Esto lo hacemos para guardar el valor inicial, es decir, antes de que tengamos alguna modificación, mas tarde lo compararemos si el selector de fecha se modifica.
Algunos componentes de la interfaces de App Inventor responden al comportamiento del usuario, modificando su apariencia, o bien mostrando distintos textos si el usuario pulsa o interactua con ellos. Vamos a programar el comportamiento de nuestros componentes de selector de fecha, casillas de verificación y selector de lista.
Si el usuario pulsa en el selector de fecha App Inventor desplegara inmediatamente un dialogo en forma de calendario para seleccionar una fecha. Después de seleccionar esa fecha, utilizaremos el bloque que maneja el evento «DespuesFechaRecibida» para que esa fecha quede en el texto del botón de selector de fecha.
Para programar las casillas de verificación tendremos que observar cuando a sido pulsada o cuando a cambiado. Ya que no queremos que estén las dos seleccionadas, si la primera de ellas se selecciona y la segunda ya estaba seleccionada, procederemos a desmarcar la segunda, y dejar marcada la primera. Y esto también tendremos que hacerlo a la inversa.
Para el selector de lista sera muy sencillo. Utilizando el bloque «Después de selección», es decir, después de que el usuario haya pulsado y seleccionado un elemento de la lista. Sustituiremos el texto del botón por el texto de la selección.
Ahora que ya tenemos programado el comportamiento de cada uno de nuestros objetos de la interfaces de App Inventor, vamos a proceder a verificar. Cuando el usuario pulsa el botón de registro, no quede ningún elemento por rellenar. Si alguno elemento esta vacío aremos foco en el. Si son varios los elementos, intentaremos que haga foco en el elemento de mas arriba. Algunos componentes no se puede hacer foco directamente, pero si que podemos mostrar una notificación directamente al usuario.
COMPROBAR QUE TODO ESTA RELLENADO PARA HACER FOCO EN LA INTERFACES DE APP INVENTOR
Vamos a ver distintas formas de verificar si se ha rellenado todos los campos. Empezaremos por los campos de texto. Para ello si pulsamos en el botón de registro, recorreremos nuestra lista «Lista_de_campos«. Ayudados por un bucle «for«. Pero solo recorremos los indices en los que tenemos datos de dichos campos, es decir, del indice uno al cuatro. Si el texto del componente es menor de uno, no se a escrito nada. En ese caso haremos foco sobre el campo y mostraremos una notificación al usuario. Como queremos hacer foco al primer campo que no tenga texto, nos ayudaremos del bloque «break» para finalizar el bucle. Si no lo hacemos de esta manera el bucle «for» continuara, y terminara haciendo foco en el último campo de texto. Por último daremos el valor de falso a nuestra variable global «Control_completado«.
Vamos a ver como comprobar los campos de contraseña. haremos lo mismo que con los campos de texto, pero esta vez en nuestro bucle «for» solo recorreremos los indices cinco y seis. Volveremos hacer los mismo, nos ayudaremos del bloque «break» para finalizar el bucle. Si el texto del componente es menor de uno, haremos foco sobre el campo y mostraremos una notificación. Pondremos el valor de nuestra variable global «Control_completado» a falso.
Pero al ser una contraseña también deberemos de comprobar que las dos contraseñas escritas son iguales. Compararemos los textos de cada contraseña, y si no son iguales, mandaremos una notificación al usuario. Ademas colocaremos el valor de nuestra variable global «Control_completado» a falso.
COMPROBAR CAMPOS DE CONTRASEÑA, FECHA, CASILLAS DE VERIFICACIÓN Y LISTA
Es el turno del selector de fecha. Si recuerdas al principio de este tutorial creamos una variable a la que llamamos «Texto_Fecha«. Esta variable guardaba el texto del componente en el preciso instante en el que se inicia la aplicación, pues si eso es, solo tenemos que comparar los textos de el selector de fecha con el guardado en la variable, si son iguales, quiere decir que no se a cambiado nada. Ademas como venimos haciendo colocaremos el valor de nuestra variable global «Control_completado» a falso.
Para el selector de lista solamente tendremos que comprobar que el índice seleccionado es distinto de cero. De lo contrario mostraremos de nuevo la notificación y pondremos nuestra variable global «Control_completado» a falso.
Las casillas de verificación seran igualmente faciles. Simplemente deberemos de comprobar que al menos una de ellas esta seleccionada, de lo contrario mostraremos una notificación, y pondremos nuestra variable global «Control_completado» a falso.
TERMINAR NUESTRA APP DE FOCO EN LA INTERFACES DE APP INVENTOR
Por último si todo es correcto pondremos nuestra variable global «Control_completado» a verdadero y comprobaremos que esto sea cierto. Si la variable «Control_completado» es cierto, mostraremos una notificación como que el registro se ha completado con éxito. Con esto quedara terminada nuestra app de foco en la interfaces de App Inventor
Como siempre si te ha gustado compártelo, si tienes alguna duda házmelo saber. Y si quieres recibir en tu correo electrónico artículos como este, no te olvides suscribirte al blog de inventordeaplicaciones.es donde obtendrás un magnifico regalo.
Bueno hace ya algún tiempo un suscriptor del canal de Youtube me preguntaba como podría hacer para abrir un archivo de texto en App inventor. De esta manera lo que el quería poder crear una app libro. Bien la solución es sencilla, o mejor dicho, soluciones, porque vamos a ver tres soluciones distintas.
Para esta aplicación el diseño va a ser de lo mas sencillo. Tendremos nuestra pantalla principal con tres botones, cada uno de estos botones abrirá una nueva ventana. Cada una de estas ventanas nos ofrecerá un texto para poder leer, pero la diferencia esta en que cada una conseguirá el texto de una manera distinta. En la pantalla pantalla 2, que sera nuestro primer método, abriremos el archivo de texto desde la memoria del teléfono. Nos ayudaremos de un componente no visible archivo y por supuesto cargaremos nuestro archivo de txt en medios. Pondremos una etiqueta dentro de una disposición vertical con scroll.
En la pantalla 3 utilizaremos al igual que en la anterior pantalla un scrooll vertical, una etiqueta y un componente no visible web. De esta manera conseguiremos mostrar el texto desde un archivo alojado en un sitio web. En realidad utilizaremos el archivo desde Google drive, donde tendremos que descargar un complemento.
En la última pantalla utilizaremos el último de nuestros métodos. Al igual que ya hicimos en la anterior pantalla constara de una disposición vertical con scrooll y dos componentes no visibles. un componente web y un componente archivo. De esta manera descargaremos el archivo alojado en Google drive a la memoria del teléfono para visualizarlo.
Programando la Aplicación
Como ya comentaba al principio del articulo, la aplicación contendrá una pantalla principal con varios botones que darán acceso a las demás pantallas para poder crear una app libro. Pues queda claro que el proceso de programación sera sencillo, Al pulsar un botón abriremos la pantalla correspondiente.
Ahora vamos ha programar la segunda pantalla y primer método. Este es el método mas sencillo de todos, simplemente tendremos que leer el archivo dentro de la memoria del teléfono al abrir la pantalla. Después simplemente mostrar el texto leído en la etiqueta TxtLibro.
Bueno ahora que ya tenemos nuestro primer método vamos con el segundo. El resultado en nuestro teléfono sera el mismo pero sera diferente internamente, ya que el archivo sera leído de Internet y no de la memoria interna. Para lograr esto vamos a leer el archivo desde Google drive.
Los archivos de Google drive se pueden compartir con cualquier usuario. Si un usuario quiere descargar el archivo se abrirá una ventana de Google drive con el contenido que se va a descargar. Pero esta forma no nos servirá, necesitamos un enlace de descarga directa. Para esto último vamos a instalar un complemento en Google drive. Vamos al archivo que queremos compartir, pulsamos con el botón derecho del ratón y seguido en Abrir con –> Conectar en más aplicaciones en el cuadro de búsqueda buscaremos el complemento Download link Generator.
Una vez instalado el complemento solo tendremos que volver a pulsar con el botón derecho del ratón en el archivo que queremos que tenga descarga directa. Se abrirá una nueva ventana en el navegador que contendrá el enlace para descarga directa. Simplemente copia este enlace.
Ahora al iniciar nuestra Screen 3 pondremos la url copiada como web a abrir. Seguido la abriremos y cuando nuestro complemento web no visible obtenga texto, solo tendremos que poner en nuestra etiqueta TxtLibro el contenido de dicho texto. Con esto ya tendremos el texto de nuestro libro, pero esta vez desde Internet.
El último método sera una copia del segundo, pero esta vez guardaremos el archivo en la memoria del teléfono. Una vez que obtengamos el texto del componente Web lo guardaremos en la memoria del dispositivo con el componente file. Después solo tendremos que abrir el archivo guardado y mostrarlo en la etiqueta.
Bueno con este articulo hemos visto como poder crear una app libro o consultar textos. Lo mejor es que tenemos un método que nos asegura, en cierta manera, que el texto este alojado en Internet. De esta forma el texto podría modificarse sin tener que actualizar la App, o simplemente que fuera imposible copiarlo para difundirlo fuera de la aplicación.
Bueno me despido con unas merecidas vacaciones de verano, y como siempre si te ha gustado compártelo, si tienes alguna duda házmelo saber. Y si quieres recibir en tu correo electrónico artículos como este, no te olvides suscribirte al blog de inventordeaplicaciones.es, y obtendrás un magnifico regalo.
