Usualmente muchos de nuestros usuarios requieren que las aplicaciones que ellos usan puedan ser administrables, es decir, puedan cambiar su contraseña, nombre de usuario, etc. Pero sobre todo existe la necesidad de que cada usuario pueda usar su propia foto de perfil y para eso necesitamos poder subir y almacenar esas fotos en un servidor de almacenamiento.
En este articulo vamos a ver la forma de como hacer todo ese procedimiento de almacenar las imágenes y que obtengamos una URL de la imagen para así poder hacer referencia de ella en diferentes ocasiones.
Bueno, hoy usaremos una herramienta de Azure que nos ayudará con este propósito, esta herramienta es una Cuenta de almacenamiento que nos permitirá almacenar nuestras imágenes rápida y fácil.
Para empezar con este tutorial será necesario tener una cuenta de Azure, si aún no tienes una puedes obtener una cuenta gratuita.
Configurando el servidor
Lo primero que haremos será crear un nuevo servicio en nuestro portal de Azure, para eso vamos a la opción Crear un recurso y luego a Cuenta de almacenamiento
En esta sección lo que vamos hacer es elegir nuestra suscripción, grupo de recurso que vamos a usar; si tú no tienes un grupo de recurso puedes crear uno; también es importante elegir la ubicación de nuestro servicio.
Una vez creada nuestra cuenta de almacenamiento vamos a la sección Contenedores y ahí vamos a agregar un nuevo contenedor, le damos un nombre apropiado en nuestro caso xamarin-blob (guarden este nombre que nos servirá más adelante)
Finalmente, regresamos al resumen de nuestra cuenta de almacenamiento y nos dirigimos a la opción Llaves de acceso aquí vamos a obtener nuestra cadena de conexión la cual usaremos más adelante en nuestro proyecto.
Escribamos código
Crearemos un nuevo proyecto móvil multiplataforma en Visual Studio
Lo primero que haremos será agregar un par de paquetes nuget a nuestro proyecto. El primero será WindowsAzure.Storage hacemos clic derecho en nuestra solución y luego en Administrar paquetes nuget para la solución. Buscamos el nombre de nuetro paquete ya mencionado y seleccionamos solo el proyecto principal.
Hacemos lo mismo para el siguiente paquete llamado Xam.Plugin.Media
Ahora cambiaremos la estructura de nuestro proyecto y crearemos algunas clases necesarias para que finalmente nuestro proyecto quede de la siguiente manera:
Iniciemos por la carpeta Services. Creamos una clase llamada BlobServices.cs y agregamos el método Upload
Ahora encapsularemos esta clase para que sea dependiente de una interface, para eso vamos a seleccionar el nombre de la clase y hacer clic derecho, luego Acciones rápidas y refactorización, a continuación, clic en Extraer en una interface y finalmente seleccionar el método que queremos encapsular.
A continuación, iremos a la carpeta ViewModels y en la clase MainViewModel.cs agregaremos los siguientes métodos:
PickPicture: Este método nos permitirá elegir una foto de nuestra galería para poder subirla.
TakePicture: Este método nos permitirá tomar una foto con la cámara del dispositivo para poder suburla.
Upload: Este método nos permitirá subir la foto que hemos tomado o elegido de la galería.
private async Task Upload()
{
IsBusy = true;
ResponseUrl = await blobServices.Upload(Path);
IsBusy = false;
}
Ahora vamos a ir a la carpeta Views y escribiremos la vista que nos mostrará la aplicación. Básicamente son 3 botones, un panel para mostrar la foto y una etiqueta para mostrar al final la URL que retorna la cuenta de almacenamiento en Azure.
Ajustes finales
En ambas plataformas necesitamos que el usuario otorgue permisos a nuestra aplicación para poder acceder a la galería o para poder hacer uso de la cámara.
Android
En Android crearemos una sub carpeta en la carpeta Resources llamada xml, dentro de esta carpeta crearemos un archivo llamado file_paths.xml y escribiremos lo siguiente:
<paths xmlns:android="http://schemas.android.com/apk/res/android">
<external-files-path name="my_images" path="Pictures" />
<external-files-path name="my_movies" path="Movies" />
</paths>
Paso siguiente será agregar la siguiente línea de código en la clase MainActivity.cs dentro del método OnCreate
CrossCurrentActivity.Current.Init(this, savedInstanceState);
iOS
En iOS lo único que haremos será agregar el siguiente código a nuestro archivo Info.plist
<key>NSCameraUsageDescription</key>
<string>This app needs access to the camera to take photos.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>This app needs access to photos.</string>
<key>NSMicrophoneUsageDescription</key>
<string>This app needs access to microphone.</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>This app needs access to the photo gallery.</string>
Finalmente, obtendremos lo siguiente:
Conclusión
En este tutorial vimos una manera fácil y sencilla de subir y almacenar imágenes desde una aplicación hecha con Xamarin Forms, se los servicios de Cuentas de Almacenamiento de Azure y se logró con el resultado esperado. Recuerden que el proyecto completo está en mi cuenta de GitHub, lo pueden descargar modificar, pero sobre todo aprender de él. Nos leemos pronto 😊