Desenvolvimento

16 set, 2014

Desenvolva um aplicativo de controle do tempo usando iBeacons e o serviço IBM MobileData

Publicidade

Beacons são pequenos dispositivos eletrônicos que emitem sinais bluetooth de baixa energia (BLE). Esses sinais podem ser capturados por qualquer dispositivo com tecnologia BLE, como smartphones e tablets. Essa nova tecnologia revoluciona as decisões que as empresas tomam sobre a customização de seus produtos e serviços para suprir as necessidades dos clientes.

A imagem é cortesia da Estimote.
A imagem é cortesia da Estimote.

Atualmente, a tecnologia iBeacon está sendo usada em vários locais. Lojas varejistas a usam para fornecer informações contextuais sobre produtos, para fazer ofertas para os clientes com base no local ou capturar padrões de tráfego à medida que os clientes navegam pela loja.

image002

Este artigo mostra como criar um sistema simples de rastreamento de tempo e presença usando o SDK Android da Estimote, uma das empresas que desenvolvem esses dispositivos. Com o aplicativo Estimote é fácil simular um iBeacon Estimote para testar com um dispositivo iOS. Aprenda a criar um serviço MobileData no IBM Bluemix para armazenar os dados do dispositivo Android e a criar um website simples, que recupera os dados do banco de dados e os mostra para o usuário.

O Bluemix é usado neste projeto porque fornece vários serviços pré-desenvolvidos que facilitam o desenvolvimento de aplicativos remotos e da web.

“Ao desenvolver esse aplicativo para você mesmo, verá como é simples criar um aplicativo com a tecnologia iBeacon e integrá-la a serviços do Bluemix.”

O que é necessário para o aplicativo

Execute o aplicativo

Obtenha o código

Etapa 1. Crie um aplicativo Android básico usando o iBeacon Estimote

  • Crie um projeto de aplicativo Android no Eclipse ou qualquer outra plataforma
  • Faça o download do SDK do iBeacon Estimote para Android e copie o arquivo estimote-sdk-preview.jar da pasta Android-SDK/EstimoteSDK/ para a pasta libs no Eclipse
  • No arquivo MainActivity.java, importe os seguintes pacotes para usar o iBeacon:
import com.estimote.sdk.Beacon;
	import com.estimote.sdk.BeaconManager;
	import com.estimote.sdk.BeaconManager.MonitoringListener;
	import com.estimote.sdk.Region;
	import com.estimote.sdk.Utils;
  • Na mesma classe, crie as seguintes variáveis (clique aqui para ver lista de códigos):Observe que a variável ESTIMOTE_PROXIMITY_UUID deve conter o ID específico do beacon a ser usado para essa tarefa. Beacons verdadeiros têm o ID B9407F30-F5F8-466E-AFF9-25556B57FE6D. No entanto, esse número pode ser alterado usando o SDK para Android. Para simular iBeacons em telefones ou tablets Apple, use este aplicativo da Estimote.
  • No método onCreate, todas as variáveis são instanciadas e a escuta de monitoramento é configurada para o beacon. Depois de entrar em uma região, é criado um encadeamento dentro do método setRangingListener, como mostra a listagem de código a seguir.
beaconManager.setRangingListener(new BeaconManager.RangingListener() {......});
  • Como mostra a listagem de código a seguir, esse encadeamento captura as informações do beacon referentes a cada segundo. Aumente ou diminua o tempo usando o métodosetBackgroundPeriod disponível na API do Estimote.
	public void onBeaconsDiscovered(Region region,
				final List<Beacon> beacons) {
			Log.d(TAG, "Ranged beacons: " + beacons);
	
			runOnUiThread(new Runnable() {
				@Override
				public void run() {
					if (beacons.size() > 0) {
						Beacon iBeacon1 = null;
						iBeacon1 = beacons.get(0);
						if(String.valueOf(Utils.
							proximityFromAccuracy(Utils.
							computeAccuracy(iBeacon1))) == "IMMEDIATE"
								&& flagRegion == 0){
							createItem();
							flagRegion++;
					postNotification("Welcome, " + userID);
						}
								
					}
				}
			});
		}

Com o objetivo de enviar as informações de proximidade para o banco de dados, o aplicativo verifica a posição do beacon em relação à posição do dispositivo e verifica o valor deflagRegion. Usando essas informações, o aplicativo garante que a mensagem seja enviada apenas uma vez cada vez que o dispositivo entrar na região do beacon.

O método createItem instancia um novo objeto e o envia para o banco de dados. O objeto armazena a identificação do usuário. O método postNotification é usado para enviar uma notificação em Android e se encontra no arquivo MainActivity.java.

Já que você está trabalhando com beacons, certifique-se de que o seu aplicativo tenha permissões do Bluetooth no dispositivo. Inclua as permissões a seguir no arquivo AndroidManifest.xml:

<uses-sdk
	    android:minSdkVersion="18"
	    android:targetSdkVersion="19" />
	
	<uses-permission android:name= "android.permission.BLUETOOTH"/>
	<uses-permission android:name= "android.permission.BLUETOOTH_ADMIN"/>
	<uses-permission android:name= "android.permission.GET_TASKS"/>

Inclua o serviço para trabalhar com o Estimote:

<service android:name="com.estimote.sdk.service.BeaconService"
	         android:exported="false"/>

Agora que o MainActivity.java está pronto, é hora de desenvolver o layout do aplicativo. Para ver um exemplo de layout, examine o conteúdo do diretório res/layout. Neste projeto de amostra, o layout inclui:

  • activity_login.xml— A janela de login, controlada por LoginActivity.java, que obtém o nome do usuário.
  • access_control_activity.xml— Controlado pelo MainActivity.java, no qual as interações com o beacon ocorrem.

Para criar uma janela de depuração para verificar todos os recursos fornecidos pelo SDK do Estimote, é possível verificar o arquivo activity_main.xml.

image003 (1)

A imagem a seguir mostra um exemplo de interface para a atividade principal. Ele aguarda os sinais do beacon e mostra as mensagens em forma de notificação.

image004 (1)

Etapa 2. Conecte-se ao serviço MobileData

Para conectar o aplicativo Android e o serviço MobileData, siga as instruções no artigo do developerWorks “Build an Android app using the MobileData cloud service“.

Para incluir no seu projeto os pacotes da figura a seguir, inclua-os na pasta libs do Eclipse.

image005 (1)

As classes DBActivity.java e Item.java têm todos os métodos necessários para se conectar ao serviço MobileData. Para usar essas classes, declare os seguintes objetos no arquivo MainActivity.java.

public class MainActivity extends Activity {
		private String userID = "Your Name";
		List<Item> itemList;
		DBActivity dbApp;
		...
	}

Crie o método createItem(), como mostra a listagem de código a seguir. Esse método é chamado quando a proximidade do beacon é IMMEDIATE.

Clique aqui para ver lista de códigos

Por fim, inclua as linhas a seguir no arquivo AndroidManifest.xml.

<uses-permission android:name="android.permission.INTERNET" />
   		<uses-permission android:name="android.permission.WAKE_LOCK" />
    		<uses-permission android:name="android.permission.GET_ACCOUNTS" />
    		<uses-permission android:name="android.permission.USE_CREDENTIALS" />
    		<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

A próxima etapa é criar um aplicativo móvel no Bluemix para usar o serviço MobileData:

  • No catálogo do Bluemix, clique em Mobile Cloud > Create Application
  • Escolha o nome do aplicativo e um nome de host para o aplicativo e clique em Create. Para prosseguir, aguarde o início do aplicativo
  • Clique no novo aplicativo para abrir a página Overview

image006 (1)

  • Agora que você tem o ID do aplicativo, vá para o projeto Eclipse e abra a pasta de ativos. Crie um novo aplicativo chamado accesscontrol.properties. Nesse arquivo, inclua o código a seguir:
applicationID=<INSERT_APPLICATION_ID_HERE>
 applicationSecret=<INSERT_APPLICATION_SECRET_HERE>
 applicationRoute=<YOUR_ROUTE>

Agora é possível acessar os dados facilmente por meio do console de serviços da web MobileData no seu projeto no Bluemix.

image007 (1)

Etapa 3. Recupere os dados a partir do banco de dados e transfira-os para um website simples

O seu aplicativo Android já está conectado ao serviço MobileData. Agora é possível conectar o serviço com seu aplicativo da web. Será necessário o SDK do Node.js. Você usará os módulos ibmbluemix e ibmdata.

Antes de ser possível usar o serviço MobileData, é necessário inicializar o componente do SDK principal ibmbluemix e transmitir o applicationId, applicationSecret eapplicationRoute.

 var ibmbluemix = require('ibmbluemix');
  var config = {
    applicationId:"<ApplicationID>",
    applicationSecret:"<ApplicationSecret>"
    applicationRoute:"<ApplicationRoute>"
  };
  ibmbluemix.initialize(config);

Agora é possível usar o serviço MobileData em seu aplicativo Node.js.

var ibmdata = require('ibmdata'),
  app.use(function(req, res, next) {
    req.data = ibmdata.initializeService(req);
    next();
  });

Após o serviço ser inicializado, é possível incluir um GET no lado do servidor, como no código a seguir, para recuperar os dados do banco de dados.

 //Create resource URIs for the mbaas Context Route
  appContext.get('/items', function(req, res) {

    // Retrieve a Query instance of type "Item" and issue
    // a find() action on it to retrieve all the items
    var query = req.data.Query.ofType("Item");
    query.find().done(function(items) {
      res.send(items);
      },function(err){
        res.status(500);
        res.send(err);
    });
  });

Agora é possível acessar a classe de item usando a URL localhost:3000/${appHostName}/v1/apps/${applicationId}/items ou ${appRoute}/${appHostName}/v1/apps/${applicationId}/items.

No lado do cliente, é necessário incluir um GET para recuperar os dados da URL acima, como na função a seguir.

 //Retrieve data from the urlItems
  //urlItems : '${appHostName}/v1/apps/${applicationId}/items'
  var getData = function(urlItems){
    $.get(urlItems, function(items){
      console.log(items);
    });
  }

É possível executar nosso código de amostra AccessControl usando seu aplicativo criado no Bluemix (AccessControl é um aplicativo da web que solicita dados da nuvem e os exibe no navegador).

  • Faça o download da nossa amostra com o comando a seguir:
git clone https://hub.jazz.net/git/yuka/AccessControl2

O diretório AndroidEclipseProject é o aplicativo Android para esse projeto.

  • Modifique o arquivo public/appConfig.json com seu ID do aplicativo, segredo do aplicativo e rota do aplicativo correspondentes (a rota do aplicativo é a URL do aplicativo completa que você customizou ao criar seu aplicativo no Bluemix).
   {
        "applicationId": "<INSERT_APPLICATION_ID_HERE>",
        "applicationSecret": "<INSERT_APPLICATION_SECRET_HERE>",
        "applicationRoute": "<INSERT_APPLICATION_ROUTE_HERE>"
      }
  • Do diretório do aplicativo, instale os módulos de nós dependentes: npm install --production.
  • Do mesmo diretório, execute node app.
  • O aplicativo de amostra pode ser acessado usando essa URL local: http://localhost:3000/.
  • Para implementar no Bluemix, faça o download e instale o Cloud Foundry CLI (consulteinstalando a ferramenta CF).
  • Do diretório do aplicativo de amostra, execute cf push ${yourAppName} para implementar o aplicativo.
  • Agora o aplicativo de amostra pode ser testado usando sua URL do Bluemix.

image009

Conclusão

Este artigo mostra como é simples criar um aplicativo Android usando o SDK Estimote iBeacon. Com apenas alguns cliques, conecte este aplicativo a um serviço IBM MobileData.

***

Com colaboração de Pargles Dall OglioYuka Kyushima