Como almacenar imágenes en una tinyDB | App Inventor

Como almacenar imágenes en una tinyDB | App Inventor

Hace 1 año

Ejemplo del funcionamiento de la app Vamos a guardar una imagen dentro de una tinyDB y al iniciar la aplicación se recupere la imagen almacenada y la vamos a mostrar en el componente Image. Primero creamos un nuevo proyecto en app inventor, en mi caso lo llame SaveImageTiny. Vamos a necesitar importar una extensión para convertir imágenes a Base64, hice una publicación de como hacer la extensión ahi la puedes descargar: Crear una extension para convertir imágenes a base64 y viceversa.

Ahora creamos la interfaz de la aplicación con los siguientes componentes:

  • ImagePicker
    • Name: BtnSelectImage
    • Width: Fill Parent
    • Text: Seleccionar Imagen
  • Label
    • Text: Imagen almacenada
  • Image
    • Width: Fill Parent
    • ScalePictureToFit: true
  • TinyDB
  • Base64: La extensión que mencionaba anteriormente.

Interfaz de la app

En la programación de los bloques primero vamos hacer un procedimiento que lo vamos a llamar SetImageOfTinyDB para recuperar la imagen de la tinyDB.

Procedure set image of tiny db

Usamos el método Base64ToImage del componente Base64 para convertir el texto almacenado en el tag image de la tinyDB a una dirección de una imagen temporal para mostrarla en el componente Image.

En el evento AfterPicking del componente ImagePicker que se ejecuta después de que se á seleccionado una imagen hacemos lo siguiente:

Bloque guardar imagen en la tiny db

Guardamos el valor devuelto por el método ImageToBase64 del componente Base64 en la tinyDB con el tag image, lo que necesita este método es la dirección de la imagen seleccionada que la extraemos de la variable Selection del componente ImagePicker y también llamamos al procedimiento creado anteriormente.

Screen initialize Por ultimo en el evento Initialize del Screen llamamos al procedimiento SetImageOfTinyDB para que cuando inicie el screen cargue la imagen que tenemos guardada en la tinyDB.

Bueno eso seria todo te comparto los enlaces de los archivos:

Espero que te haya sido de ayuda. No olvides si ha sido util para ti seria de mucha ayuda si compartes este material con tus amigos.

Otras publicaciones

Git + Google Drive - respaldar repositorios con Google Drive Sync

Hace 6 meses

Respaldar un repositorio Git dentro de Google Drive automáticamente al hacer un push.


Crear, actualizar y eliminar registros con imágenes en una TinyDB | App Inventor

Hace 11 meses

Como crear una aplicación con app inventor para crear, actualizar y eliminar registros de una TinyDB con imágenes usando una ListView.


Como crear una extensión para convertir imágenes en Base64 y viceversa | App Inventor

Hace 1 año

Extensión de app inventor para convertir la información de una imagen a base64 para poder manipularla como texto y también poder convertir una cadena en Base64 a una imagen.


Como crear una extensión para cambiar el formato de un número a formato numérico y viceversa | App Inventor

Hace 6 meses

La intención de la extensión es poder convertir, un numero que esta en formato numérico "12345.67" a formato de moneda "$12,345.67" y que el símbolo de la moneda se pueda especificar "€, $, ƒ". Es algo muy sencillo pero en app inventor a veces es necesario hacer esta conversión en varios screens y hay que estar copiando procesos, lo cual es muy tedioso por eso usando la extensión se puede ahorrar trabajo.


Configuración del servicio de Mailgun para envió y recepción de correos

Hace 1 año

Configuración del servicio mailgun para poder enviar correos y recibir correos de una cuenta personalizada como por ejemplo: nombre@dominio.com