#Xamarin – Let’s build an #Estimote #eBeacon Explorer in ListView mode

Hi!

I’ve already wrote some posts on how to work with Xamarin and Estimote beacons. SO today I’ll share a small Xamarin Forms app which displays all the near Estimote Beacons.

2016 01 20 Xamarin Estimote Explorer

In the video above, we can see how in the iPhone (left) the app detects beacons and at the same time the app created using Xamarin Forms (right) shows the detected beacons. In the same way, when in the Estimote app on the iPhone is activated the virtual beacon, 2 beacons appear in the Estimote Explorer app.

And as always, a couple of details about the app:

  • The app has a 5 min thinking mode of a MVVM implementation, to enable the refresh of the Beacons list in real time. I am not clear why, but when I isolated the View and the ViewModel source code, Visual Studio intellisense has lost the North.

image

  • Using the UUid of the beacons, the app identifies whether they are real or virtual. With this information, the app displays a color and a specific image in the list of beacons.
  • A 5 seconds interval Timer is created to validate if there some idle time with no beacon detected, when this happens it will clean the list of beacons.

image

The code of the app can be downloaded from https://github.com/elbruno/Blog/tree/master/Xamarin%20Estimote%20Explorer

Greetings @ Madrid

-El Bruno

References

Advertisements

#Xamarin – Creando un #Estimote #eBeacon Explorer en modo ListView

Hola!

Ahora que ya hemos visto un par de ejemplos de código sobre como detectar Estimote beacons con Xamarin, hoy es momento de compartir un explorador de Beacons creado para Xamarin Forms.

2016 01 20 Xamarin Estimote Explorer

En el video anterior es posible ver como en el iPhone (izquierda) la app detecta beacons y al mismo tiempo en la app creada con Xamarin (derecha) muestra los beacons. De la misma forma, cuando en la app de Estimote en el iPhone se activa el virtual beacon, en el Estimote Explorer aparecen 2 beacons.

Y como siempre, un par de detalles sobre la app:

  • La app tiene un implementación de 5 min de un modelo MVVM para poder refrescar la lista de Beacons en tiempo real. No tengo claro el porqué, pero al momento de separar View y ViewModel, el intellisense de Visual Studio ha perdido el norte.

image

  • Utilizando el UUid de los beacons, la app identifica si los mismos son reales o virtuales. Con esta informacion, la app muestra un color y u otro en la lista de beacons.
  • Hay un Timer cada 5 segundos, que cuando no se detecta ningun beacon, limpia la lista de beacons.

image

El código de la app se puede descargar desde https://github.com/elbruno/Blog/tree/master/Xamarin%20Estimote%20Explorer

Saludos @ Madrid

-El Bruno

References

[#XAMARIN] Using and detecting #Estimote Virtual #eBeacons

Hello!

In my previous post I wrote on how to add some code into a Xamarin Forms Solution so that it detects an Estimote beacon. In the below animation, I use the Estimote app in iOS to emulate a virtual beacon (left), and the Xamarin Android app show information of the detected beacon (right)

2016 01 18 Beacons detected

However, to understand how the app works it is necessary to highlight a couple of things

Beacons Search

A beacon is identified in 3 parts:

  • UUID (16 bytes)
  • major number (2 bytes)
  • minor number (2 bytes)

Important: Estimote developer pages has a recommended link to read about this topic (link).

All Estimote beacons uses the same UUID: B9407F30-F5F8-466E-AFF9-25556B57FE6D

In the sample app, we’re going to use a different UUID: 8492E75F-4FD6-469D-B132-043FE94921D8

image

This is because I am not using real beacons for this test, I’ll use the emulator of beacons which is available in the Estimote app for iOS. In the case of a virtual beacon:

  • The UUID is always 8492E75F-4FD6-469D-B132-043FE94921D8
  • The values of Major and Minor values are generated randomly to activate the virtual beacon and remain fixed with the same

In the references section there is a link on how to use this feature. With this information we can initialize our app so that it detects beacons (lines 61 and 62)

image

Beacons Detected

If we use the Estimote app to detect beacons, we can see that it shows us in virtual detected beacon. Now we can already test the code of our app to see that information us returns for each detected beacon.

image image

When the app detects one or more beacons, the Ranged() event returns a collection of them. As I mentioned in the previous point, the UUID values, Major and Minor are included for each beacon, as well as an additional property to define the prosimity of the beacon.

image

In coming posts, I will show you how to work with the concept of proximity of the beacon, by now the Proximity property indicates the distance to the beacon with:

image

The app source code can be downloaded from GitHubhttps://github.com/elbruno/Blog/tree/master/Xamarin%20Estimote%20Beacons

Greetings @ Madrid

-El Bruno

References

[#XAMARIN] Emulando y detectando un #Estimote #Beacon

Hola!

En el post anterior mostré como configurar una solución de Xamarin Forms para que detecte un beacon Estimote. En la siguiente imagen, utilizo la app de Estimote para emular un beacon (izq), y en la app de Xamarin en Android muestro la información del beacon detectado (derecha)

2016 01 18 Beacons detected

Ahora bien, para entender como funciona la app es necesario remarcar un par de cosas

Beacons Search

Un beacon se identifica en 3 partes:

  • UUID (16 bytes)
  • major number (2 bytes)
  • minor number (2 bytes)

Importante: Estimote tiene un link recomendable para leer sobre el tema, aquí (link).

Todos los beacons Estimote utlizan el mismo UUID: B9407F30-F5F8-466E-AFF9-25556B57FE6D

En la app de ejemplo, el UUID que utilizamos para la búsqueda es diferente: 8492E75F-4FD6-469D-B132-043FE94921D8

image

Esto es porque no estoy utilizando beacons reales para las pruebas, sino el emulador de beacons que está disponible en la app de Estimote para iOS. En el caso de un virtual beacon:

  • UUID siempre es to 8492E75F-4FD6-469D-B132-043FE94921D8
  • Los valores de Major y Minor values se generan al azar al activar el virtual beacon y se mantienen fijos con el mismo

En la sección de referencias hay un link sobre como utilizar esta feature.

Con esta información ya podemos inicializar nuestra app para que detecte beacons (lineas 61 y 62)

image

Beacons Detected

Si utilizamos la app de Estimote para detectar beacons, veremos que la misma nos muestra in virtual beacon detectado. Ahora ya podemos probar el código de nuestra app para ver que información nos retorna por cada beacon detectado.

image image

Cuando la app detecta uno o más beacons, el evento Ranged() retorna una colección de los mismos. Como comentaba en el punto anterior, los valores de UUID, Major y Minor se incluyen para cada beacon, además de una propiedad para definir la cercania del beacon.

image

En próximos posts mostraré como trabajar con el concepto de proximidad del beacon, por ahora la propiedad Proximity nos indica la distancia al beacon con:

image

El código fuente de la app se puede descargar desde GitHub https://github.com/elbruno/Blog/tree/master/Xamarin%20Estimote%20Beacons

Saludos @ Madrid

-El Bruno

References

[#XAMARIN] First steps with #Estimote Beacons and #VS2015

Hello!

Now that I have a pair of beacons up and running, next step is to create an app to see how you can interact with them. For this sample, I will create an app using Xamarin Forms and I will test the app with Android as target (my iOS build and deploy environment is on Luis hands)

So, our Xamarin Forms Solution has multiple projects, a common project and the custom implementations for Android, iOS and Windows Phone. In each one of the projects you can add external components that will help us work with the beacons. A quick search shows us that we have several available Estimote NuGet packages to work with.

Estimote Components

The first step is to add the Estimote SDK for Android into the Android project. A search of the components will show us this component.

Clipboard01

The application that we will make will be a Xamarin Forms one, so if you also want to implement it in iOS you can add the component for iOS

Clipboard01

There is a common NuGet Package which we must add into the Forms app, and in the Android and iOS, this package is ACR Estimote PlugIn for Xamarin
Let’s go back to the Android project, in this one we must enable permissions to work with BlueTooth

  • BLUETOOTH
  • BLUETOOTH_ADMIN

Clipboard01

And now is time to add a couple of lines of code. In the main app, I’ll add a stack with 3 labels

  • private Label _labelTitle;
  • private Label _labelContent;
  • private Label _labelStatus;

In the app Start(), I’ll init the interaction with the Beacons (line 48). If everything works properly, we can start to suscribe to the events Raged and RegionStatusChanged (lines 59 and 60)

Clipboard03

When the app detects a beacon, we will receive a message with the same information. The beacons work with a concept that the regions are (see external links), a region can be defined with one or more beacons. The primary way of identifying them consists of 3 options

  • With only UUID: it consists of all beacons with a given UUID. For example: a region defined with default Estimote UUID would consist of all Estimote Beacons with unchanged UUID.
  • With UUID and Major: it consists of all beacons using a specific combination of UUID and Major. For example: all Estimote Beacons with default UUID and Major set to 13579.
  • With UUID, Major and Minor: it consists of only a single beacon (Estimote Cloud prevents having two beacons with the same IDs). For example, one with default Estimote UUID, Major set to 13579 and Minor set to 2468.

In the RegionStatusChanged() event, we will capture the change of region. The new region will show us information of the UUID, Major and Minor.

Clipboard05

With these few lines of code we can already test our app. At this time, we can deploy our app on the emulator. But at the same we will see that Visual Studio 2015 emulator does not support BlueTooth emulation.

Clipboard02

So, in the next post I will show how the app on a real device.

Greetings @ Madrid

-El Bruno

References

[#XAMARIN] Primeros pasos con #Estimote Beacons

Hola!

Ahora que ya tengo un par de beacons funcionando, el siguiente paso es crear una app para ver como interactuar con los mismos. Para este ejemplo, crearé una app del tipo Xamarin Forms y haré la prueba compilando la app para Android (mi entorno de build and deploy para iOS lo tiene Luis)

Pues bien, nuestra solución de Xamarin Forms posee varios proyectos, el proyecto comun, y las implementaciones propias para Android, iOS y Windows Phone. En cada uno de los proyectos podremos agregar componentes externos que nos ayudarán a trabajar con los beacons. Una búsqueda rápida nos muestra que tenemos varios paquetes NuGet disponibles para trabajar con Estimote.

Estimote Components

El primer paso será agregar el componente Estimote SDK for Android para el proyecto de Android. Una búsqueda en los componentes nos mostrará este componente.

Clipboard01

La aplicación que haremos será del tipo Forms, con lo que si quieres implementarla en iOS deberás agregar el componente para iOS

Clipboard01

El paquete nuget común que debemos agregar en la app de Forms y en los proyectos de Android e iOS, es ACR Estimote PlugIn for Xamarin

Volviendo al proyecto de Android, en el mismo debemos habilitar permisos para trabajar con BlueTooth

  • BLUETOOTH
  • BLUETOOTH_ADMIN

Clipboard01

Y ahora ya es momento de agregar un par de líneas de código. En la app principal agregaremos un stack con 3 labels

  • private Label _labelTitle;
  • private Label _labelContent;
  • private Label _labelStatus;

En el Start() de la app, inicializaremos la interacción con los Beacons (línea 48). En el caso de que todo funcione correctamente, nos suscribiremos a los eventos Raged y RegionStatusChanged (líneas 59 y 60)

Clipboard03

Cuando la app detecte un beacon, recibiremos un mensaje con la información del mismo. Los beacons trabajan con un concepto que son las regiones (ver enlaces externos), una region puede estar definida con uno o más beacons. La principal forma de identificarlos consiste en 3 opciones

  • With only UUID: it consists of all beacons with a given UUID. For example: a region defined with default Estimote UUID would consist of all Estimote Beacons with unchanged UUID.
  • With UUID and Major: it consists of all beacons using a specific combination of UUID and Major. For example: all Estimote Beacons with default UUID and Major set to 13579.
  • With UUID, Major and Minor: it consists of only a single beacon (Estimote Cloud prevents having two beacons with the same IDs). For example, one with default Estimote UUID, Major set to 13579 and Minor set to 2468.

En el evento RegionStatusChanged() capturaremos el cambio de region. La nueva region nos mostrará información del UUID, Major y Minor.

Clipboard05

Con estas pocas líneas de código ya podemos probar nuestra app. En este momento, podremos desplegar nuestra app en el emulador. Aunque en el mismo veremos que el emulador de Visual Studio 2015 no soporta la emulación de BlueTooth.

Clipboard02

Asi que, en el próximo post mostraré como funciona la app en un device real.

Saludos @ Madrid

-El Bruno

References

[#XAMARIN] Estimote beacons + #StarWars = true

Hi!

I’m going to share a couple of posts on Xamarin and Beacons in the next few days. I’m going to use Estimote for the first posts. So, today I realize that some beacons run out of battery.

So, a normal tech dude will throw them out. Me, on the other side, think to open them to see what’s inside (I know, bye bye warranty). But I was shocked when inside the beacon I found a … Millennium Falcon !!!

image

Greetings @ Madrid

-El Bruno

References

[#XAMARIN] Estimote beacons + #StarWars = true

Hola!

En los próximos días escribiré un par de posts sobre beacons y Xamarin. Los que utilizaré para los primeros ejemplos serán los de Estimote. Hoy cuando revisaba alguno de ellos me he dado cuenta de que no tenían más batería.

Y claro como son descartables, se me ocurrio ver que tenían dentro (además de perder la garantía automáticamente). Lo que más me sorprendió fue que dentro tienen … un Millennium Falcon !!!

image

Saludos @ Madrid

-El Bruno

References