Como almacenar imágenes en una tinyDB | App Inventor

Como almacenar imágenes en una tinyDB | App Inventor

Hace 1 mes

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

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

Hace 18 dias

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


Como almacenar imágenes en una tinyDB | App Inventor

Hace 1 mes

Guardar imágenes dentro una tinyDB en app inventor usando una extensión para convertir imágenes a BASE64.


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

Hace 1 mes

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.


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

Hace 1 mes

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