App inventor 2 en español
Cómo programar los teléfonos móviles con Android
mediante App inventor 2 - Juan Antonio Villalpando

-- Tutorial de iniciación de App Inventor 2 en español --

Volver al índice del tutorial

____________________________

277.- Pasar imagen a String y viceversa. Base 64 con Web Safe.

_______________
1.- Ejemplo Actualizado. Setiembre 2021.

p177_Extension_File2String_TinyDB_2.aia

com.KIO4_Base64.aix (Updated September 2021)

- Si vas a utilizar esta extensión en versiones de Android igual a 10 o superiores, debes utilizar los bloques que contengan "ASD", el directorio BASE es:

/storage/emulated/0/Android/data/<namepackage>/files

es decir, si en el bloque CreateDirectoryASD escribes: /my_directory, éste se creará en /storage/emulated/0/Android/data/<namepackage>/files/my_directory

- Si vas a utilizar esta extensión en versiones de Android 9 o inferiores, puedes utilizar los bloques que contengan "ASD" como he indicado anteriormente, además puedes utilizar los bloques que no contienen "ASD", es este caso el directorio BASE es:

/mnt/sdcard

es decir, si en el bloque CreateDirectory escribes: /my_directory, éste se creará en /mnt/sdcard/my_directory

- Esta extensión también contiene los bloques GetApi y GetSdkCodeName, con estos bloques puedes comprobar la versión de Android que tiene instalado el dispositivo.

---------------------------------------------------------------------------
---------------------------------------------------------------------------
0. - Tomar foto con la cámara pasar la imagen a string Base 64. Guardarla en TinyDB. Obtener de TinyDB, pasar el string a archivo y visualizarlo en un componente imagen.

Base64_Direct_TinyDB_2.aia

1.- Tomamos una foto con la cámara. Obtenemos el archivo imagen.

2.- Mediante FileToStringDirect, convierte la imagen en string Base64 y guardamos ese string en una TinyDB, el tag será el nombredelarchivo.

3.- Una vez guardado el string en la TinyDB, borramos el archivo imagen de su ubicación:

/storage/emulated/0/Pictures/app_inventor_1844444444.jpg [Android menores que 10] [API <29]

/storage/emulated/0/Android/data/<namepackage>/files/Pictures/app_inventor_1844444444.jpg [Android mayores o igual que 10]

4.- Mediante el bloque StringToFileASDDirect, tomamos el contenido de la TinyDB, es decir el string y lo copiamos en un archivo en ASD, /1844444444.jpg

5.- El archivo estará en /storage/emulated/0/Android/data/<namepackage>/files/1844444444.jpg

6.- Ese archivo lo mostramos en el componente Imagen.

7.- Ese archivo se borra de su ubicación mediante el bloque DeleteFile.

8.- Se comprueba que se ha borrado mediante el bloque FileExists.

- El código debe funcionar con todas las versiones de Android.

- Con la versión 11 puede dar el error

Generates a 908 WRITE_EXTERNAL_STORAGE permission error (denied)

_______________________________________________________________________________

- En el asset hay varios archivos: imagen.png, foto.jpg y despacito.mp3

- Codificamos alguno de ellos a String Base64 mediante el bloque: FileToString.

- Guardamos ese String Base64 en la TinyDB con su correspondiente etiqueta.

- Al pulsa el btn_GetValue, obtenemos desde la TinyDB el String Base64 correspondiente a ese archivo.

- Descodificamos ese String Base64 y lo guardamos en un archivo auxiliar en la SdCard, concretamente: /mnt/sdcard/aux_file

- Observa que no hace falta ponerle extensión al aux_file, vale para archivos de imágenes y sonidos

- Ese archivo auxiliar /mnt/sdcard/aux_file lo ponemos en un componente de imagen o reproductor de sonido, mediante esta direción:

file://mnt/sdcard/aux_file

- Si el archivo está en el asset ponemos fileName: //mifoto.jpg
- Si el archivo está en la sdcard ponemos fileName: /mifoto.jpg

_____________________________________________
- Tutorial en el foro de App Inventor. Community:

https://community.appinventor.mit.edu/t/upload-file-to-server-hosting-by-php-encode-file-to-base-64-extension/7445

_______________
- Diseño.

_______________
- Bloques.

- Si el archivo está en el asset ponemos fileName: //mifoto.jpg
- Si el archivo está en la sdcard ponemos fileName: /mifoto.jpg

---------------------------------------------------------------------------
---------------------------------------------------------------------------
2. - Guardar archivos de imagen grandes en la TinyDB.

p177_Extension_File2String_TinyDB_grandes.aia

- Creamos en nuestro móvil la carpeta /mnt/sdcard/fotos_grandes

- Y en ella ponemos archivos .jpg de gran tamaño, por ejemplo estos:

- Al pulsar el btn_StoreValue, se guardarán todos los archivos en la TinyDB.

- Al pulsar continuamente el btn_GetValue, se irá mostrando las imágenes guardadas en la TinyDB en el componente de imagen.

_______________
- Diseño.

_______________
- Bloques.

---------------------------------------------------------------------------
---------------------------------------------------------------------------
3. - Bajar archivo de imagen de Internet y Guardarlo en la TinyDB.

p177_Extension_File2String_TinyDB_internet.aia

1.- Crea el directorio /auxiliar (en /mnt/sdcard/auxiliar)

2.- Baja de Internet un archivo grande de imagen (5 MB) mediante el componente Web, lo guarda en: auxiliar/mydowloadfile.jpg.

3.- Mdeiante el bloque FilteToString conviert el archivo a String.

4.- Guarda ese String en la TinyDB con la etiqueta : mi_string

----- Recuparación -----------

5.- Obtiene el String de la TinyDB con la etiqueta: mi_string

y lo convierte a archivo mediante el bloque: StringToFile y lo guarad en /auxiliar/mynewfile.jpg

6.- Muestra la imagen mediante: file:///mnt/sdcard/auxiliar/mynewfile.jpg

7.-Borra el directorio /auxiliar

______________________________________________________________

Sitio para bajar imágenes de muestras:

https://sample-videos.com/download-sample-jpg-image.php

Sitio para bajar vídeos de muestras:

https://sample-videos.com/

_______________
- Diseño.

_______________
- Bloques.

---------------------------------------------------------------------------
- Más Ejemplos:

1.- p177i_Extension_File2String.aia

2.- p177i2_Extension_File2String.aia

3.- com.KIO4_File2String.aix

- NOTA: esta extensión codifica y decodifica al información en Web Safe, esto significa lo siguiente: si necesitáramos enviar la información textual mediante internet, algunos carácteres (+/=) serían problemáticos de enviar, así que la codificacion base 64 web safe, cambia esos caracteres a (-_*) para poder ser enviado el texto eficientemente. Además cuando lo recibe, esta extensión vuelve a cambiar esos caracteres (-_*) a (+/=), para que la información pueda ser recompuesta a la llegada.

Puedes ver más información sobre este tema en:

https://stackoverflow.com/questions/24460422/how-to-send-a-message-successfully-using-the-new-gmail-rest-api/24461102#24461102

Para probar las codificaciones String64 podemos consultar esta web:

https://www.base64decode.org/

_______________________________________________________
4.- Tomar una imagen, convertirla a String, enviarla por Internet a un servidor web y PHP. Guardar la imagen como texto en el servidor web. Bajar la imagen como texto y visualizarla en App Inventor. Guardar la imagen en el servidor web como foto.

p327C_subir_archivo_imagen_Base64.aia

com.KIO4_File2String.aix

- Como ves el título de este ejemplo es complicado, en resumen se trata de enviar una imagen convertida a String a un servidor web.

- Se puede enviar una imagen, un archivo de música, de texto,... aquí haremos la prueba con imágenes.

- Este ejemplo se complementa con otro visto en: http://kio4.com/appinventor/327B_subir_archivos_texto_php.htm

_______________
- Diseño.

_______________
- Bloques.

_______________
- Código PHP.

<?php
// Juan A. Villalpando
// kio4.com

$datos=$_POST;
$contenido=$datos['contenido'];

$archivo = 'imagen.txt';
$auxi = fopen($archivo, 'w');
fwrite($auxi, $contenido); 
fclose($auxi);

echo $contenido;

$foto = 'foto.png';
$auxi = fopen($foto, 'w');
$contenido2 = strtr($contenido, '-_,', '+/=');
$contenido2 = base64_decode($contenido2);
fwrite($auxi, $contenido2); 
fclose($auxi);

?>

_______________
- Comentarios.

- Subo la imagen yoeat.png a la aplicación. Cuando estamos emulando con el Companion la imagen se encuentra en nuestra SdCard, concretamente en:

/mnt/sdcard/AppInventor/assets/yoeat.png

- Si instaláramos la aplicación la imagen se encontraría en /android_asset/yoeat.png

- La imagen puede estar en el asset de nuestra aplicación o en cualquier otro directorio de nuestra SdCard, por ejemplo: /mnt/sdcard/misfotos/yoeat.png

- Mediante el bloque File2String, tomamos la imagen /mnt/sdcard/AppInventor/assets/yoeat.png y la convertimos a Base 64 Web Safe, que sería la imagen convertida a texto.

- Cuando se ha realizado esa conversión, se activa el bloque GetString, en la variable string tenemos la imagen convertida a texto.

- Mediante el bloque Web.Url y un código PHP vamos a subir ese texto (string) a un servidor web, a la variable de subiada la llamaremos contenido.

	    $datos=$_POST;
 
        $contenido=$datos['contenido'];
 
        $archivo = 'imagen.txt';
 
        $auxi = fopen($archivo, 'w');
 
        fwrite($auxi, $contenido);
 
        fclose($auxi);

- El código PHP toma el contenido, y lo guarda en el servidor en un archivo llamado imagen.txt

- Ahí está la imagen convertida a texto.

- Además el código hace un echo y vuelve a devolver el imagen.txt al App Inventor.

- El App Inventor toma todo el texto recibido del imagen.txt y lo pone en la variable contenidoDeRespuesta.

- Ese contenidoDeRespuesta se decodifica para poder volver a ser código de imagen.

- Ese código de imagen se guarda como imagen en: /mnt/sdcard/fotokio.png

- Esa foto se carga en el componente Imagen.

-------------------------------------------------------------------

- El código PHP además de guardar el archivo.txt y de enviar el echo, convierte el texto recibido a imagen, concretamente a la imagen: foto.png

- Para hacer esa decodifiación de base64, previamente se han cambiado algunos caracteres:

	  $contenido2 = strtr($contenido, '-_,', '+/=');
      $contenido2 = base64_decode($contenido2);
	  

- Ya que la codificación que realizó el App Inventor con la extensión, modificó esos caracteres para poder ver enviado por web.

- La imagen legible como imagen la podemos ver en:

http://kio4.com/appinventor/php/foto.png

- En este ejemplo los nombres de los archivos siempre son los mismos, se podría hacer otro código PHP para que cada imagen se guardara con un nombre distinto.

- Aquí se ve cómo ha subido el texto del contenido y se ha convertido en imagen.txt, además se observa el archivo foto.png el cual responde como imagen normal, ya que le hemos cambiado los caracteres (-_*) a (+/=)

- Aquí tenemos otro código parecido al anterior, en este caso el código obtiene la extensión del archivo:

<?php
// Juan A. Villalpando
// kio4.com

$datos=$_POST;
$contenido=$datos['contenido'];

$archivo = 'imagen.txt';
$auxi = fopen($archivo, 'w');
fwrite($auxi, $contenido); 
fclose($auxi);

echo $contenido;

$contenido2 = strtr($contenido, '-_,', '+/=');
$contenido2 = base64_decode($contenido2);
// Obtiene mime type
$tipo = finfo_open();
$mime_type = finfo_buffer($tipo, $contenido2, FILEINFO_MIME_TYPE);  // obtiene: image/png
$arr = explode("/", $mime_type, 2);
$extension = $arr[1]; // obtiene: png

// $foto = 'foto.png';
$foto = 'foto.'.$extension;
$auxi = fopen($foto, 'w');

fwrite($auxi, $contenido2); 
fclose($auxi);
?>

- Código similar:

- El archivo de imagen está en el assets (en la aplicación).

<?php
// Juan A. Villalpando
// kio4.com

$datos=$_POST;
$contenido=$datos['contenido'];

$plainText = base64_decode(str_replace(array('-', '_',' ','\n'), array('+', '/','+',' '), $contenido));
$ifp = fopen( "dibujo.jpg", "wb" );
fwrite( $ifp,  $plainText );
fclose( $ifp );

echo "Creo que ha subido";
?>

- Estableciendo el nombre del archivo:

<?php
// Juan A. Villalpando
// kio4.com
// https://kio4.000webhostapp.com/xxxxxxxxx.xxx

$datos=$_POST;
$contenido=$datos['contenido'];
$nombre=$datos['nombre'];

$plainText = base64_decode(str_replace(array('-', '_',' ','\n'), array('+', '/','+',' '), $contenido));
$ifp = fopen( $nombre, "wb" );
fwrite( $ifp,  $plainText );
fclose( $ifp );

echo "Creo que ha subido";
?>

_______________________________________________________
5.- Tomar una imagen, convertirla a String, guardarla en una TinyDB. Obtener la imagen como texto y visualizarla en App Inventor como Imagen.

p327D_tinydb_archivo_imagen_Base64.aia

com.KIO4_File2String.aix

- No podemos guardar una imagen directamente en una TinyDB, podemos guardar un enlace a su imagen, por ejemplo http://kio4.com/imagenes/foto.png

- No podemos guardarlo directamente porque el archivo contiene caracteres no legibles por la TinyDB.

- Mediante este extensión convertiremos una imagen a String y guardaremos este en la TinyDB.

- Podemos recuperar ese String de la TinyDB, decodificarla a imagen, enviarla a un archivo y luego visualizar esa imagen en un componente de Imagen.

_______________
- Diseño.

_______________
- Bloques.

_______________
- Comentarios.

- Mediante el bloque File2String, pasamos el archivo a cadena de caracteres.

- Guardamos ese string en la TinyDB.

- Al pulsar el Botón2 lo recuperamos y presentamos la imagen en un componente de Imagen.

_______________________________________________________
6.- Mediante una extensión de Explorador elegimos un archivo de imagen, convertirla a String, guardarla en una TinyDB. Obtener la imagen como texto y visualizarla en App Inventor como Imagen.

p328F_imagen_tinydb_B64.aia

com.KIO4_File2String.aix

com.KIO4_Explorer.aix

- Utilizamos la extensión vista en: elegimos un archivo de imagen.

- Pulsamos el botón para mostrar el Explorador de archivos, creado mediante la extensión.

- Elegimos una imagen. Ponemos un Tag (Etiqueta) y la guardamos en la TinyDB.

- Si pulsamos el Botón de Obtener la imagen, ésta se mostrará en el componente de Imagen.

_______________
- Diseño.

_______________
- Bloques.

_______________________________________________________
7.- Mediante una extensión de Explorador elegimos un archivo de imagen. La subimos a un servidor web.

p328E_subir_archivo_B64.aia

com.KIO4_File2String.aix

com.KIO4_Explorer.aix

- Utilizamos la extensión vista en: elegimos un archivo de imagen.

- Pulsamos el botón de subir y es imagen subirá a nuestro servidor web mediante el código PHP visto anteriormente.

- La imagen subida la podemos ver en:

http://kio4.com/appinventor/php/foto.png

_______________
- Diseño.

_______________
- Bloques.

_______________________________________________________
- Comentarios.

- Utilizo la extensión: com.KIO4_Explorer.aix

y: com.KIO4_File2String.aix

- Elegimos un archivo.

- Comprobamos si hemos elegido un archivo o un directorio, para eso comprobamos si la ruta elegida termina en "/", en este caso sería un directorio y no lo subimos.

- En caso que sea un archivo lo convertimos a String Base 64 Web Safe.

- Mediante el código PHP visto anteriormente lo subimos a nuestro servidor web.

- Podemos ver la imagen subida pulsando en: http://kio4.com/appinventor/php/foto.png

- Restricciones en este ejemplo:

1.- El archivo de imagen siempre se guarda con el mismo nombre. Puedes modificar el código PHP para que se guarde con el nombre propio del archivo.

2.- Mi directorio en el servidor web tiene restricción HotLink es decir solo puede ver la imagen desde esta página web, si pones ese enlace directamente o en otra página web no verás la imagen, te saldrá un mensaje de Forbidden, prohibido.

_______________________________________________________
8.- Tomar una foto mediante la Cámara. Guardarla en una TinyDB.

p328E_foto_TinyDB.aia

1.- Tomamos una foto con el componente Cámara.
2.- Escribiemos un tag (Etiqueta) y un comentario.
3.- El comentario se guardará en la TinyDB1
4.- Mediante la extensión se convierte la Foto en String Base64 y ese String se guarda en la TinyDB2
5.- Observa Namespace en las Propiedades de la TinyDB1 y la TinyDB2.

- Para ver la foto.

6.- Escribe el tag (Etiqueta) anterior y pulsa el botón para obtener la foto y el comentario.
7.- Se obtendrá el String de TinyDB2 y se convertirá a archivo en /auxiliary_dir/auxiliary_file
8.- Se mostrará file:///mnt/sdcard/auxiliary_dir/auxiliary_file en el componente Imagen2

_______________
- Diseño.

- Observa Namespace en las Propiedades de las TinyDB

_______________
- Bloques.

_______________________________________________________
9.- Elegir la foto de la Galería de imágenes. Guardarla en una TinyDB.

- Este ejemplo es similar al anterior, en este caso elegimos la foto de la Galería de imágenes mediante el componente SelectorDeImágenes (está en la parte de Medios), en inglés: ImagePicker.

p328E2_foto_TinyDB.aia

_______________
- Bloques.

_______________________________________________________
10.- Guardar y recuperar una imagen de la SdCard en CloudDB.

p328E2_imagen_CloudDB.aia

- Tenemos una imagen en la SdCard, en mi caso marcianos.png (399 KB), lo queremos subir a CloudDB acompañado de un texto.

- Convertimos la imagen a String mediante Base64 y subimos ese texto a CloudDB. También subimos un comentario de esa foto.

- Al pulsar el Botón "Get from CloudDB", bajamos ese texto desde CloudDB, lo convertimos a archivo mediante Base64 y guardamos ese archivo en la SdCard con el nombre My_Martians.png, además mostramos el texto en la Etiqueta. Mediante el componente imagen mostramos esa imagen.

- De todos modos, para subir el archivo a CloudDB no es necesario pasarlo a Base 64, sube bien directamente como archivo.

_______________
- Diseño.

_______________
- Bloques.

_______________________________________________________
11.- Grabar voz. Convertir archivo a Base 64. Subir a CloudDB. Bajar String Base 64, convertirlo a archivo de sonido y Reproducirlo.

p328E2_Sonido_Base64_CloudDB.aia

- Grabamos un mensaje de voz mediante el GrabadorDeSonidos. Lo convertimos a Base 64, lo guardamos en un archivo y lo subimos a CloudDB.

- Obtenemos el String de CloudDB, lo pasamos a archivo y Reproducimos ese archivo.

- De todos modos, para subir el archivo a CloudDB no es necesario pasarlo a Base 64, sube bien directamente como archivo.

_______________
- Diseño.

_______________
- Bloques.

_______________________________________________________
12.- Archivo en asset. Lo convertimos en string Base64. Ese string lo copiamos como archivo en ASD. Lo subimos a web PHP. Se muestra página web con la imagen.

p327C_subir_archivo_imagen_Base64_ASD.aia

- Convierte el archivo gato.png que se encuentra en el asset, a string.

- Y muestra ese string en la Etiqueta: lbl_String.

- Convierte ese string a archivo y lo llama: this_is_a_cat.png

- además ese archivo lo guarda en ASD, es decir:

/storage/emulated/0/Android/data/<namepackage>/files/this_is_a_cat.png

- Subimos ese archivo a un servidor web con PHP, en realidad se subre su string Base 64.

- El código PHP convierte ese string a un archivo de nombre: dibujo.png

- Mediante un VisorWeb vemos ese dibujo insertado en una página web.

_______________
- Diseño.

_______________
- Bloques.

_______________
- Código PHP.

<?php
// Juan A. Villalpando
// kio4.com

$datos=$_POST;
$contenido=$datos['contenido'];

$plainText = base64_decode(str_replace(array('-', '_',' ','\n'), array('+', '/','+',' '), $contenido));
$ifp = fopen( "dibujo.png", "wb" );
fwrite( $ifp,  $plainText );
fclose( $ifp );

echo "Creo que ha subido";
?>

_______________________________________________________
13.- Mediante PICK elegimos un archivo. Pasamos de uri a path. Lo convertimos en string Base64. Ese string lo copiamos como archivo en ASD. Lo subimos a web PHP. Se muestra página web con la imagen.

p327C_subir_archivo_imagen_Base64_ASD_PICK.aia

- Mediante ActivityStarter y PICK, elegimos un archivo de imagen en nuestro móvil.

ActivityStarter1.Acción = android.intent.action.PICK

ActivityStarter1.TipoDeDato = image/*

- Obtenemos la dirección de esa imagen en formato Uri, esto cambia de una versión a otra y de un móvil a otro.

content://com.mi.android.globalFileexplorer.myprovider/external_files/gato.png

- Mediante el bloque UriToPath, convertimos ese content a dirección de archivo:

/storage/emulated/0/gato.png

- Mediante el bloque FileToString convertimos ese archivo a string.

- Debemos quitar la base de dirección, es decir /storage/emulated/0

- Ahora convertimos ese string a archivo y lo guardamos en el ASD, con el nombre /this_is_an_image.png

- Lo mostramos en la Image2

- Subimos el string, string_2, a la web y mediante PHP lo convertimos a archivo con el nombre: dibujo.png

- Observamos ese archivo en una página web.

_______________
- Diseño.

_______________
- Bloques.

_______________
- Código PHP.

- El mismo que el anterior.

<?php
// Juan A. Villalpando
// kio4.com

$datos=$_POST;
$contenido=$datos['contenido'];

$plainText = base64_decode(str_replace(array('-', '_',' ','\n'), array('+', '/','+',' '), $contenido));
$ifp = fopen( "dibujo.png", "wb" );
fwrite( $ifp,  $plainText );
fclose( $ifp );

echo "Creo que ha subido";
?>

_______________________________________________________
14.- Mediante PICK elegimos un archivo. Pasamos de uri a path. Lo convertimos en string Base64. Ese string lo copiamos como archivo en ASD. Lo subimos a web PHP. Se muestra página web con la imagen.

p327C_subir_archivo_imagen_Base64_ASD_PICK_CopyASD.aia

- Similar al anterior, pero mejorado.

- Mediante PICK y ActivityStarter se elige un archivo de imagen.

- Se muestra en Image1. Se obtiene su content://

- Se obtiene su dirección mediante el bloque UriToPath.

- Se copia en el ASD mediante el bloque CopyToASD, con el nombre image_in_ASD.png

- Al pulsar el Botón "File to String"

- Se muestra en Image2. Se obtiene su string Base 64.

- Al pulsar el Botón "Upload string - PHP"

- Se sube a web.

- El Botón "Image in Webpage" muestra la imagen en una página web de mi servidor.

_______________
- Bloques.

_______________________________________________________
15.- Bajamos un archivo de vídeo de 10 MB al ASD, lo convertimos a string Base 64 y luego a archivo.

p327_extensionbase64_bajarvideo.aia

- En esta página podemos encontrar varios archivos de muestra de vídeo:

https://filesamples.com/formats/mp4

- Vamos a bajar el archivo sample_960x400_ocean_with_audio.mp4

- Lo haremos de la siguiente manera:

- Bajamos el archivo al ASD.

- Obtemos su dirección en el ASD.

- Visualizamos en el VideoPlayer el vídeo bajado.

- Convertimos el archivo de vídeo a string Base 64.

- Observamos sus 100 primeros caracteres.

- Convertimos el string a archivo, lo llamamos sample_mirror.mp4 y lo guardamos en el ASD.

- Visualizamos en el VideoPlayer el vídeo sample_mirror.mp4.

_______________
- Diseño.

_______________
- Bloques.

___________________________