1. Enrique Aguilar
Xamarin con Azure Storage
(Table NoSQL) y Blobs

2. Enrique Aguilar
• Xamarin MVP.
• Director de la Facultad de Tecnologías de Información de la
Universidad De La Salle Bajío México.
• Consultor en Implementaciones Móviles en empresas de
Manufactura en Guanajuato y Jalisco en México.
• Profesor Internacional de Posgrado Invitado por la Universidad
Nacional de Ingeniería de Nicaragua en temas de Seguridad de
la Información.
• Speaker sobre Desarrollo Móvil con más 40 conferencias en
México y 20 a nivel Internacional en diferentes lugares de
Colombia, Bolivia, Nicaragua y Venezuela.@enriqueaguilar

3. Agenda
Xamarin iOS con acceso a Azure Storage – Table (NoSQL)
Xamarin iOS con acceso a Azure Storage - Blobs
Xamarin iOS con Acceso a los controles de la cámara, Mapas, Ubicación y
TouchID.
Xamarin Android con acceso a Azure Storage (Table (NoSQL) y Blobs)

4. 1.- Xamarin iOS con acceso
a Azure Storage – Table
(NoSQL)

5. Xamarin.iOS con Acceso a Azure Storage (Tables)
1.- Se habilitará una tabla desde código en Xamarin para crear la estructura a
partir de una clase que defina los elementos de la tabla.
1.1.- Se habilitará el almacenamiento de Azure Storage en el portal.
1.2.- Se creará una aplicación para iOS, su interfaz gráfica y una clase con la estructura que deseamos para
la tabla NoSQL en Azure Storage.
2.- Se instanciará a la clase para tener la estructura, se recibirán datos, mismos
que se depositarán en la tabla (NoSQL) de Azure Storage.
2.1.- Se recibirán los datos en una instancia de la clase que contiene la estructura de la tabla.
2.2.- Se creará la tabla NoSQL en Azure Storage con los elementos de la clase, además se depositará el
contenido definido de ejemplo.

6. Azure Storage
• Ideal para la Administración del Centro de Datos
• Gama de soluciones para cada necesidad.
• La escalabilidad que nunca sobrepasará.
• Flexible a medida que cambian las necesidades.
• Costos más bajos y pago solo por lo que necesita.

7. Preparar el Almacenamiento en Azure
En nuestro portal de Azure
agregamos un nuevo Storage de
tipo Cuenta de almacenamiento

9. Creamos una app para iOS
con un botón y agregamos el
paquete Microsoft Azure
Storage del repositorio
nuget.org
Aceptamos los términos de
la licencia.

10. Creamos la entidad
para la generación de
la tabla
Creamos un método
para crear una alerta

11. Creamos la entidad para la generación de la tabla

12. Creamos la entidad para la generación de la tabla

13. Creamos la entidad para la generación de la tabla

14. Creamos la entidad para la generación de la tabla

15. Creamos la entidad para la generación de la tabla

16. Creamos la entidad para la generación de la tabla

17. Creamos la entidad para la generación de la tabla

18. Demo Xamarin – Azure Storage
(Table NoSQL)
Aplicación con Xamarin para crear una tabla en base a una
entidad, envío de datos a partir de una
CloudStorageAccount, CloudTableClient, CloudTable y
TableOperation.

20. © 2016 Microsoft Corporation. All rights reserved. The text in this document is available under the Creative Commons Attribution 3.0 License, additional terms may apply. All other content contained in this document
(including, without limitation, trademarks, logos, images, etc.) are not included within the Creative Commons license grant. This document does not provide you with any legal rights to any intellectual property in any
Microsoft product. You may copy and use this document for your internal, reference purposes.
This document is provided "as-is." Information and views expressed in this document, including URL and other Internet Web site references, may change without notice. You bear the risk of using it. Some examples are for
illustration only and are fictitious. No real association is intended or inferred. Microsoft makes no warranties, express or implied, with respect to the information provided here.

21. 2.- Xamarin iOS con acceso
a Azure Blobs

22. Xamarin.iOS con Acceso a Azure Storage (Blobs)
1.- Se creará un contenedor de blobs en Azure Storage.
1.1.- Se habilitará el contenedor de Blobs en Azure Storage vía el portal.
2.- Se realizará una aplicación que capture una fotografía vía la cámara de iOS, la
cual se enviará al contenedor de blobs en Azure Storage.
2.1.- Se solicitará autorización al usuario para el uso de la cámara.
2.2.- Se definirá una zona en la interfaz para mostrar la salida de la cámara.
2.3.- Se capturará la salida de la cámara en una ImageView.

23. Azure Storage
(Blob)
Los BLOB (Binary Large
Objects, objetos binarios
grandes) son elementos
utilizados en las bases de
datos para almacenar
datos de gran tamaño,
como imágenes, videos,
documentos, etc.

24. Creamos el contenedor de Blobs
Podemos subir archivos al contenedor creado.

25. Podemos utilizar el Microsoft Azure Storage Explorer para ver los archivos en el
contenedor.

26. 1.- Liberamos espacio en la parte
superior, ya que ahí se mostrará la
salida de la cámara.
2.- Agregamos un botón que permitirá
capturar la imagen de la cámara en iOS.
3.- Agregamos un Image View donde se
mostrará la imagen capturada.
4.- Agregamos el botón de Respaldar en
Azure Storage.
Creamos una app para iOS que tenga lo siguiente:

27. Código Xamarin.iOS – Azure Storage Blob
string archivoLocal;
AVCaptureDevice dispositivodeCaptura;
AVCaptureSession sesiondeCaptura;
AVCaptureDeviceInput entradaDispositivo;
AVCaptureStillImageOutput salidaImagen;
AVCaptureVideoPreviewLayer preview;
string ruta;
byte[] arregloJpg;
async Task autorizacionCamara()
{
var estatus = AVCaptureDevice.GetAuthorizationStatus(AVMediaType.Video);
if (estatus != AVAuthorizationStatus.Authorized)
{
await AVCaptureDevice.RequestAccessForMediaTypeAsync(AVMediaType.Video);
}
}
using System;
using UIKit;
using System.Drawing;
using System.Threading.Tasks;
using AVFoundation;
using Foundation;
using System.IO;
using Microsoft.WindowsAzure.Storage;
using Microsoft.WindowsAzure.Storage.Blob;

28. Código Xamarin.iOS – Azure Storage Blob
string archivoLocal;
AVCaptureDevice dispositivodeCaptura;
AVCaptureSession sesiondeCaptura;
AVCaptureDeviceInput entradaDispositivo;
AVCaptureStillImageOutput salidaImagen;
AVCaptureVideoPreviewLayer preview;
string ruta;
byte[] arregloJpg;
async Task autorizacionCamara()
{
var estatus = AVCaptureDevice.GetAuthorizationStatus(AVMediaType.Video);
if (estatus != AVAuthorizationStatus.Authorized)
{
await AVCaptureDevice.RequestAccessForMediaTypeAsync(AVMediaType.Video);
}
}
using System;
using UIKit;
using System.Drawing;
using System.Threading.Tasks;
using AVFoundation;
using Foundation;
using System.IO;
using Microsoft.WindowsAzure.Storage;
using Microsoft.WindowsAzure.Storage.Blob;

29. Código Xamarin.iOS – Azure Storage Blob
string archivoLocal;
AVCaptureDevice dispositivodeCaptura;
AVCaptureSession sesiondeCaptura;
AVCaptureDeviceInput entradaDispositivo;
AVCaptureStillImageOutput salidaImagen;
AVCaptureVideoPreviewLayer preview;
string ruta;
byte[] arregloJpg;
async Task autorizacionCamara()
{
var estatus = AVCaptureDevice.GetAuthorizationStatus(AVMediaType.Video);
if (estatus != AVAuthorizationStatus.Authorized)
{
await AVCaptureDevice.RequestAccessForMediaTypeAsync(AVMediaType.Video);
}
}
using System;
using UIKit;
using System.Drawing;
using System.Threading.Tasks;
using AVFoundation;
using Foundation;
using System.IO;
using Microsoft.WindowsAzure.Storage;
using Microsoft.WindowsAzure.Storage.Blob;

30. public void ConfiguracionCamara()
{
sesiondeCaptura = new AVCaptureSession();
preview = new AVCaptureVideoPreviewLayer(sesiondeCaptura)
{
Frame = new RectangleF(40, 50, 300, 350)
};
View.Layer.AddSublayer(preview);
dispositivodeCaptura = AVCaptureDevice.DefaultDeviceWithMediaType(AVMediaType.Video);
entradaDispositivo = AVCaptureDeviceInput.FromDevice(dispositivodeCaptura);
sesiondeCaptura.AddInput(entradaDispositivo);
salidaImagen = new AVCaptureStillImageOutput()
{
OutputSettings = new NSDictionary()
};
sesiondeCaptura.AddOutput(salidaImagen);
sesiondeCaptura.StartRunning();
}
Código Xamarin.iOS – Azure Storage Blob

31. public void ConfiguracionCamara()
{
sesiondeCaptura = new AVCaptureSession();
preview = new AVCaptureVideoPreviewLayer(sesiondeCaptura)
{
Frame = new RectangleF(40, 50, 300, 350)
};
View.Layer.AddSublayer(preview);
dispositivodeCaptura = AVCaptureDevice.DefaultDeviceWithMediaType(AVMediaType.Video);
entradaDispositivo = AVCaptureDeviceInput.FromDevice(dispositivodeCaptura);
sesiondeCaptura.AddInput(entradaDispositivo);
salidaImagen = new AVCaptureStillImageOutput()
{
OutputSettings = new NSDictionary()
};
sesiondeCaptura.AddOutput(salidaImagen);
sesiondeCaptura.StartRunning();
}
Código Xamarin.iOS – Azure Storage Blob

32. public void ConfiguracionCamara()
{
sesiondeCaptura = new AVCaptureSession();
preview = new AVCaptureVideoPreviewLayer(sesiondeCaptura)
{
Frame = new RectangleF(40, 50, 300, 350)
};
View.Layer.AddSublayer(preview);
dispositivodeCaptura = AVCaptureDevice.DefaultDeviceWithMediaType(AVMediaType.Video);
entradaDispositivo = AVCaptureDeviceInput.FromDevice(dispositivodeCaptura);
sesiondeCaptura.AddInput(entradaDispositivo);
salidaImagen = new AVCaptureStillImageOutput()
{
OutputSettings = new NSDictionary()
};
sesiondeCaptura.AddOutput(salidaImagen);
sesiondeCaptura.StartRunning();
}
Código Xamarin.iOS – Azure Storage Blob

33. Código Xamarin.iOS – Azure Storage Blob
btnCapturar.TouchUpInside += async delegate
{
var salidadevideo = salidaImagen.ConnectionFromMediaType(AVMediaType.Video);
var bufferdevideo = await salidaImagen.CaptureStillImageTaskAsync(salidadevideo);
var datosImagen = AVCaptureStillImageOutput.JpegStillToNSData(bufferdevideo);
arregloJpg = datosImagen.ToArray();
string rutacarpeta = Environment.GetFolderPath
(Environment.SpecialFolder.Personal);
string resultado = "Foto";
archivoLocal = resultado + ".jpg";
ruta = Path.Combine(rutacarpeta, archivoLocal);
File.WriteAllBytes(ruta, arregloJpg);
Imagen.Image = UIImage.FromFile(ruta);
};

34. Código Xamarin.iOS – Azure Storage Blob
btnCapturar.TouchUpInside += async delegate
{
var salidadevideo = salidaImagen.ConnectionFromMediaType(AVMediaType.Video);
var bufferdevideo = await salidaImagen.CaptureStillImageTaskAsync(salidadevideo);
var datosImagen = AVCaptureStillImageOutput.JpegStillToNSData(bufferdevideo);
arregloJpg = datosImagen.ToArray();
string rutacarpeta = Environment.GetFolderPath
(Environment.SpecialFolder.Personal);
string resultado = "Foto";
archivoLocal = resultado + ".jpg";
ruta = Path.Combine(rutacarpeta, archivoLocal);
File.WriteAllBytes(ruta, arregloJpg);
Imagen.Image = UIImage.FromFile(ruta);
};

35. Código Xamarin.iOS – Azure Storage Blob
btnRespaldar.TouchUpInside += async delegate
{
try
{
CloudStorageAccount cuentaAlmacenamiento = CloudStorageAccount.Parse
("DefaultEndpointsProtocol=https;AccountName=enriqueaguilar;AccountKey=UJ+
q1zwfv7lkb2d/cm8r9ycoc5ZgkNEbuypQYgM001p9E9CWChPtIBfW1A==");
CloudBlobClient clienteBlob = cuentaAlmacenamiento.CreateCloudBlobClient();
CloudBlobContainer contenedor = clienteBlob.GetContainerReference("imagenes");
CloudBlockBlob recursoblob = contenedor.GetBlockBlobReference(archivoLocal);
await recursoblob.UploadFromFileAsync(ruta);
MessageBox("Guardado en", "Azure Storage - Blob");
}
catch (StorageException ex)
{
MessageBox("Error: ", ex.Message);
}
};

36. Código Xamarin.iOS – Azure Storage Blob
btnRespaldar.TouchUpInside += async delegate
{
try
{
CloudStorageAccount cuentaAlmacenamiento = CloudStorageAccount.Parse
("DefaultEndpointsProtocol=https;AccountName=enriqueaguilar;AccountKey=UJ+
q1zwfv7lkb2d/cm8r9ycoc5ZgkNEbuypQYgM001p9E9CWChPtIBfW1A==");
CloudBlobClient clienteBlob = cuentaAlmacenamiento.CreateCloudBlobClient();
CloudBlobContainer contenedor = clienteBlob.GetContainerReference("imagenes");
CloudBlockBlob recursoblob = contenedor.GetBlockBlobReference(archivoLocal);
await recursoblob.UploadFromFileAsync(ruta);
MessageBox("Guardado en", "Azure Storage - Blob");
}
catch (StorageException ex)
{
MessageBox("Error: ", ex.Message);
}
};

37. Código Xamarin.iOS – Azure Storage Blob
btnRespaldar.TouchUpInside += async delegate
{
try
{
CloudStorageAccount cuentaAlmacenamiento = CloudStorageAccount.Parse
("DefaultEndpointsProtocol=https;AccountName=enriqueaguilar;AccountKey=UJ+
q1zwfv7lkb2d/cm8r9ycoc5ZgkNEbuypQYgM001p9E9CWChPtIBfW1A==");
CloudBlobClient clienteBlob = cuentaAlmacenamiento.CreateCloudBlobClient();
CloudBlobContainer contenedor = clienteBlob.GetContainerReference("imagenes");
CloudBlockBlob recursoblob = contenedor.GetBlockBlobReference(archivoLocal);
await recursoblob.UploadFromFileAsync(ruta);
MessageBox("Guardado en", "Azure Storage - Blob");
}
catch (StorageException ex)
{
MessageBox("Error: ", ex.Message);
}
};

38. Demo Xamarin – Azure Storage
(Blob)
Aplicación con Xamarin que toma una fotografía y la envía a
un contenedor de Blobs en Azure Storage. a partir de una
CloudStorageAccount, CloudBlobClient, CloudBlobContainer
y GetBlockBlobReference.

40. © 2016 Microsoft Corporation. All rights reserved. The text in this document is available under the Creative Commons Attribution 3.0 License, additional terms may apply. All other content contained in this document
(including, without limitation, trademarks, logos, images, etc.) are not included within the Creative Commons license grant. This document does not provide you with any legal rights to any intellectual property in any
Microsoft product. You may copy and use this document for your internal, reference purposes.
This document is provided "as-is." Information and views expressed in this document, including URL and other Internet Web site references, may change without notice. You bear the risk of using it. Some examples are for
illustration only and are fictitious. No real association is intended or inferred. Microsoft makes no warranties, express or implied, with respect to the information provided here.

41. 3.- Xamarin iOS
(Controles de la Cámara y
Ubicación en el Mapa)

42. Xamarin.iOS (Control de la cámara, ubicación en el Mapa
y respaldo en Azure Storage Blobs y Tables (NoSQL)
1.- Se generará el código para manipular la imagen de la cámara agregando 3
controles para manipular la imagen.
1.- Se agregarán 3 controles de tipo slider, los cuales manipularán el brillo y la combinación de
temperatura y tinta de la imagen, de la salida de la cámara, previo a tomar la fotografía.
2.- Se agregará el código para inicializar los slider, y agregar sus manejadores de eventos.
3.- Se agregará el método para cambiar las propiedades de temperatura y tinta en los 3 colores base (azul,
rojo y verde).
4.- Se agregará la codificación para ajustar el brillo de la salida de la cámara.
2.- Se generará el código para obtener la ubicación del dispositivo, agregarlo en un
Mapa, y extraer la información de la ubicación.
2.1.- Se obtendrá la ubicación del dispositivo mediante un pluggin de nuget.org y se mostrará en un Mapa.
2.2.- Se obtendrá el País, la ciudad, además de las coordenadas del lugar.

43. Xamarin.iOS (Control de la cámara, ubicación en el Mapa
y respaldo en Azure Storage Blobs y Tables (NoSQL)
3.- Se enviarán los datos de la ubicación del Mapa a una tabla NoSQL de Azure
Storage, las coordenadas, el País, la Ciudad y el nombre de la fotografía, además
de que la fotografía editada se subirá a la zona de Blobs de Azure Storage.
3.1.- Los datos del Mapa se enviarán a una tabla NoSQL en Azure Storage.
3.2.- La fotografía manipulada se enviará al contenedor de blobs en Azure Storage.
4.- Se agregará la restricción para el acceso a la aplicación mediante al TouchID del
iPhone.
4.1.- Se agregará el código para solicitar autorización mediante el TouchID.

44. 1.- Liberamos espacio en la parte superior,
ya que ahí se mostrará la salida de la
cámara.
2.- Agregamos 3 sliders que permitirán
manipular la imagen de la cámara en iOS.
3.- Agregamos un control de tipo Mapa.
4.- Agregamos el botón de Capturar y
Respaldar en Azure Storage.
5.- Agregamos un Image View donde se
mostrará la imagen capturada.
Creamos una app para iOS que tenga la siguiente
estructura:

45. Agregamos las librerías de
AzureStorage, CoreLocation,
MapKit, Plugin.Geolocator y
LocalAuthentication.
Agregamos las variables de
latitud y longitud, además del
CLLocationManager.

46. Codificación para el uso del Mapa

47. Codificación para el uso del Mapa

48. Codificación para el uso del Mapa

49. Codificación para el uso del Mapa

50. Codificación para el uso del controles de la cámara

51. Codificación para el uso del controles de la cámara

52. Codificación para el uso del controles de la cámara

53. Codificación para el uso del controles de la cámara

54. Codificación para el uso del controles de la cámara

55. Codificación para el uso del controles de la cámara

56. Codificación para el uso del controles de la cámara

57. Codificación para el uso del controles de la cámara

58. Codificación para el uso del TouchID

59. Codificación para el uso del TouchID

60. Codificación para el uso del TouchID

61. Prueba del TouchID con el Simulador

62. Demo Xamarin – Azure Storage
(Controles de la Cámara, Mapas,
Ubicación, TouchID, Blob y Table
NoSQL)
Aplicación con Xamarin que edita la salida de la cámara,
obtiene la ubicación, se agrega a un Mapa, accede a la
aplicación vía el TouchID, y la envía a un contenedor de Blobs
y una tabla NoSQL en Azure Storage.

65. © 2016 Microsoft Corporation. All rights reserved. The text in this document is available under the Creative Commons Attribution 3.0 License, additional terms may apply. All other content contained in this document
(including, without limitation, trademarks, logos, images, etc.) are not included within the Creative Commons license grant. This document does not provide you with any legal rights to any intellectual property in any
Microsoft product. You may copy and use this document for your internal, reference purposes.
This document is provided "as-is." Information and views expressed in this document, including URL and other Internet Web site references, may change without notice. You bear the risk of using it. Some examples are for
illustration only and are fictitious. No real association is intended or inferred. Microsoft makes no warranties, express or implied, with respect to the information provided here.

66. 4.- Xamarin Android con
acceso a Azure Storage
(Blobs y Tables NoSQL)

67. Xamarin.Android con Acceso a Azure Storage Blobs y
Tables NoSQL
1.- Se realizará una aplicación para Android que contenga un Mapa y un objeto de
tipo Image View.
1.- La aplicación se conectará al Azure Storage en el contenedor de Blobs y a la tabla, descargando la
información.
2.- Se generará el código para mostrar la imagen tomada por iOS pero descargada
por Android en un ImageView, además los datos de la ubicación despositados en
la tabla, permitirán realizar la ubicación con Google Maps de donde se tomó la
fotografía.
1.- La imagen descargada de Azure Storage Blob se depositará en una ruta de la aplicación y se mostrará
en el Image View.
2.- Los datos recibidos de Azure Storage Table NoSQL permitirán ubicar en el Mapa el lugar donde se tomó
la fotografía.

68. Xamarin.Android
Ingresamos a la cuenta de Developer
de Google para obtener una Clave de
API para Google Maps para poder
tener acceso a los Mapas.

69. Agregamos la clave de la API en el AndroidManifest.xml

70. Agregamos la clave de la API en el AndroidManifest.xml

71. 1.- Agregamos un Mapa en la zona superior.
2.- Agregamos el botón que descargará la
imagen, las coordenadas y que colocará la
imagen en un Image View y las coordenadas las
enviará al Mapa de Google.
3.- Agregamos un ImageView en la parte central
inferior.
Creamos una Interfaz Gráfica para Android
que tenga la siguiente estructura:

76. Agregamos los
componentes de
Google Play
Services y
Geolocator Plugin

77. Xamarin.Android con Acceso a Azure Storage Blobs y
Tables NoSQL

78. Xamarin.Android con Acceso a Azure Storage Blobs y
Tables NoSQL

79. Xamarin.Android con Acceso a Azure Storage Blobs y
Tables NoSQL

80. Xamarin.Android con Acceso a Azure Storage Blobs y
Tables NoSQL

81. Xamarin.Android con Acceso a Azure Storage Blobs y
Tables NoSQL

82. Xamarin.Android con Acceso a Azure Storage Blobs y
Tables NoSQL

83. Xamarin.Android con Acceso a Azure Storage Blobs y
Tables NoSQL

84. Xamarin.Android con Acceso a Azure Storage Blobs y
Tables NoSQL

85. Xamarin.Android con Acceso a Azure Storage Blobs y
Tables NoSQL

86. Xamarin.Android con Acceso a Azure Storage Blobs y
Tables NoSQL

87. Xamarin.Android con Acceso a Azure Storage Blobs y
Tables NoSQL

88. Xamarin.Android con Acceso a Azure Storage Blobs y
Tables NoSQL

89. Xamarin.Android con Acceso a Azure Storage Blobs y
Tables NoSQL

90. Xamarin.Android con Acceso a Azure Storage Blobs y
Tables NoSQL

91. Xamarin.Android con Acceso a Azure Storage Blobs y
Tables NoSQL

92. Xamarin.Android con Acceso a Azure Storage Blobs y
Tables NoSQL

93. Demo Xamarin – Azure Storage
(Android con acceso a Blob y
Table NoSQL)
Aplicación con Xamarin para Android que descarga una
imagen y la coloca en un ImageView, y descarga la altitud y
longitud de una Tabla NoSQL y lo coloca como coordenadas
en una Mapa de Google.

96. © 2016 Microsoft Corporation. All rights reserved. The text in this document is available under the Creative Commons Attribution 3.0 License, additional terms may apply. All other content contained in this document
(including, without limitation, trademarks, logos, images, etc.) are not included within the Creative Commons license grant. This document does not provide you with any legal rights to any intellectual property in any
Microsoft product. You may copy and use this document for your internal, reference purposes.
This document is provided "as-is." Information and views expressed in this document, including URL and other Internet Web site references, may change without notice. You bear the risk of using it. Some examples are for
illustration only and are fictitious. No real association is intended or inferred. Microsoft makes no warranties, express or implied, with respect to the information provided here.