Trilha DevOps How we figured out we had a SRE team at Xamarin.

1. 11
XAMARIN.FORMS + AZURE: UM ESTUDO
DE CASO
Oberdan Ferreira

2. 22
XAMARIN.FORMS + AZURE: UM ESTUDO
DE CASO
Oberdan Ferreira

3. SOBRE MIM | Oberdan Ferreira
Principal Engineer @ArcTouch
@oberdanferreira
oberdan.bitencourt@gmail.com

4. • INTRODUÇÃO
• AUTENTICAÇÃO COM AZURE ACTIVE DIRECTORY
• INTEGRAÇÃO COM AZURE STORAGE
• BLOB
• QUEUE
• AZURE NOTIFICATIONS HUB (PUSH NOTIFICATIONS)
• COMUNICAÇÃO EM TEMPO REAL COM SIGNALR
AGENDA

5. • Grey Global Group
• Uma agência global de marketing e propaganda
• Utiliza serviços Microsoft (AD, API Apps, DocumentDb,
etc.)
• Bancos de dados mantém dados legados
• A Grey emprega mais de 1500 funcionários.
INTRODUÇÃO | ESTUDO DE CASO - GREY

6. • Como surgiu a ideia do app?
• Necessidade de conectar seus funcionários com colegas de
trabalho
• Atualizar funcionários com notícias sobre a empresa
• Alertá-los sobre eventos que estão para ocorrer
INTRODUÇÃO | ESTUDO DE CASO - GREY

7. • Backend Microsoft
• Active Directory
• API Apps no Azure
INTRODUÇÃO | ESTUDO DE CASO - GREY
=

8. AUTENTICAÇÃO COM AD

9. • Possibilita login no app por qualquer funcionário da empresa com
baixo esforço.
• Autenticação gerenciada pela Microsoft
• Autenticação Cross Platform (Android, iOS)
• Refresh de OAuth token é automático
• Compartilhar token p/ chamadas a API
AUTENTICAÇÃO | ADAL - PRÓS

10. • Autenticação gerenciada pela Microsoft - pouca customização.
• Cliente não entende que não dá pra trocar o layout da webview.
• Trocar Profile da PCL para usar as versões mais atuais
• v. 3.13.19 - PCL7 (sem Windows 8.1 ou 10)
• Exige configuração no lado do servidor para autorizar o token via Azure
Portal.
• Na época o AD era gerenciado via manage.windowsazure.com
• APIs hospedadas em portal.azure.com
AUTENTICAÇÃO | ADAL - CONTRAS

11. AUTENTICAÇÃO | ADAL - Criar App no AD

12. AUTENTICAÇÃO | ADAL

13. AZURE STORAGE | Integração com Xamarin

14. private async Task<AuthenticationResult> Authenticate(string authority, string resource, string
clientId, string returnUri)
{
var authContext = new AuthenticationContext(authority);
var authResult = await authContext
.AcquireTokenAsync(
resource, //https://login.microsoftonline.com/common
clientId, //valor registrado no Azure
uri, //valor registrado no Azure
PlatformAuthenticator.PlatformParameters);
//Pego via DependencyService.
//Android: new PlatformParameters((Activity)Forms.Context)
//iOS: new PlatformParameters(UIApplication
.SharedApplication
.KeyWindow
.RootViewController);
return authResult;
// contém informações básicas do usuário logado e OAuth token
}

15. AZURE STORAGE | Integração com Xamarin

16. AZURE STORAGE

17. AZURE STORAGE | Overview
• Permite hospedagem de arquivos (imagens, documentos, etc),
mensagens, tabelas
• Arquivos somente podem ser acessados por meio de um Shared Access
Token
• Mensagens podem ser enfileiradas com confiabilidade
• Redundância de dados nos servidores espalhados pelo mundo
• Consistência dos dados (garantir que sempre a última versão será
utilizada)

18. AZURE STORAGE | BLOB - Utilização no App
• Utilizado para salvar fotos de perfil dos funcionários
• Imagens enviadas para um Blob Storage
• Blob é lido por um job controlado pelo cliente
• Imagem é atualizada no banco de dados do cliente (inacessível por
nós)
• API de pessoas retornava a foto de perfil apontando para o Azure

19. AZURE STORAGE | QUEUE - Utilização no App
• Queue utilizada para atualizar preferências do app para cada funcionário
• Mensagem enviada em formato JSON
• Queue é lida por um Azure Job controlado pelo cliente
• Job atualiza o backend do cliente
• Problema: demora cerca de 4 minutos para a informação ser processada
(provavelmente por configuração/performance do lado do cliente)

20. DEMO
CRIANDO STORAGE ACCOUNT

21. AZURE STORAGE | Integração com Xamarin

22. • Últimas versões rodam no .NET Standard (e instalam uma porrada de
dependências)
• Falha ao instalar
System.Runtime.InteropServices.RuntimeInformation.4.0.0
• Dica: Instale o
System.Runtime.InteropServices.RuntimeInformation4.3.0 antes!
AZURE STORAGE | Integração com Xamarin

23. PCL COM XAMARIN.FORMS .RUNTIMEINFORMATION

24. PCL COM XAMARIN.FORMS
+ WINDOWSAZURE.STORAGE
V8.1.1

25. SHOW ME THE CODE
BLOB

26. const string STORAGE_IMAGE_BLOB = "tdc-blob";
const string STORAGE_CONNECTION_STRING =
“DefaultEndpointsProtocol=https;AccountName=tdc;AccountKey……”;
private CloudBlobContainer GetContainer()
{
// configura a conta
var account = CloudStorageAccount.Parse(STORAGE_CONNECTION_STRING);
// cria um blob client
var client = account.CreateCloudBlobClient();
// pega o contêiner criado no Azure
var container = client.GetContainerReference(STORAGE_IMAGE_BLOB);
return container;
}

27. public async Task<string> UploadImageAsync(Stream image)
{
var container = GetContainer();
// tenta criar contêiner se ele não existir
await container.CreateIfNotExistsAsync();
var name = $"{Guid.NewGuid().ToString("D")}.jpg";
// cria uma referência de Blob para salvar o arquivo
var imageBlob = container.GetBlockBlobReference(name);
// faz o upload assíncrono do stream
await imageBlob.UploadFromStreamAsync(image);
// retorna o novo nome do arquivo para
// fazer o download no futuro
return name;
}

28. public async Task<byte[]> GetImageAsync(string name)
{
// pega o contêiner
var container = GetContainer();
// pega referência pra imagem pelo nomo do arquivo
var blob = container.GetBlobReference(name);
if (await blob.ExistsAsync())
{
// se existir, pega os atributos
await blob.FetchAttributesAsync();
byte[] blobBytes = new byte[blob.Properties.Length];
// faz download do byte array
await blob.DownloadToByteArrayAsync(blobBytes, 0);
return blobBytes;
}
return null;
}

29. SHOW ME THE CODE
QUEUE

30. public async Task AddMessageAsync(string message)
{
try
{
var cloudQueue = GetCloudQueue();
// cria fila caso não exista
await cloudQueue.CreateIfNotExistsAsync();
// envia mensagem pra fila
await cloudQueue.AddMessageAsync(
new CloudQueueMessage(message));
}
catch (Exception ex)
{
System.Diagnostics.Debug.WriteLine(ex);
}
}

31. public async Task<string> GetLastMessageAsync()
{
try
{
var cloudQueue = GetCloudQueue();
await cloudQueue.CreateIfNotExistsAsync();
// lê mensagem da fila
CloudQueueMessage queue = await
cloudQueue.GetMessageAsync();
// remove mensagem lida
await cloudQueue.DeleteMessageAsync(queue);
// retorna como string
return queue.AsString;
}
catch (Exception ex) { … }

32. NOTIFICATION HUBS

33. • Push Notifications utilizados para alertar usuários sobre
novas notícias, alertar sobre eventos
• Backend integra com Azure e disparava os push notifications
NOTIFICATION HUBS | Utilização no app

34. • Possibilita enviar Push Notifications para várias plataformas
(iOS, Android, Windows, Kindle e Baidu)
• SDK em .NET, Node.JS, Java e PHP
• Push Notifications direcionados com tags
• Grátis até 1 milhão de Push Notifications enviados
AZURE | Notification Hubs

35. • Gerar um Certificate Signing Request File na sua máquina
• Ir até developer.apple.com
• Criar certificado de Push Notification com base no CSR criado na sua máquina
• Baixar o .cer e instalar na sua máquina
• Abrir o Keychain Access no macOS e exportar o certificado em formato .p12
• Criar um Provisioning Profile em developer.apple.com usando o .p12
• Incluir os devices registrados no Provisioning Profile (você não pode distribuir o app para
qualquer device)
• Gerar, baixar e instalar o Provisioning Profile
NOTIFICATION HUBS | IOS

36. NOTIFICATION HUBS | Android

37. NOTIFICATION HUBS | Criando NotificationHub

38. NOTIFICATION HUBS | Integração com Xamarin

39. NOTIFICATION HUBS | Integração com Xamarin

40. IOS

41. public override bool FinishedLaunching(UIApplication app, NSDictionary
options)
{
// Gerencia notificações recebidas com app fechado ao
// abrir
ProcessNotification(options);
// Registra para receber notificações
// Popup vai aparecer para o usuário
UIApplication.SharedApplication.RegisterForRemoteNotificationTypes(
UIRemoteNotificationType.Alert |
UIRemoteNotificationType.Badge |
UIRemoteNotificationType.Sound);
...
}

42. public override void RegisteredForRemoteNotifications(UIApplication app, NSData deviceToken)
{
// Cria conexão com Azure Notification Hub
// Pegar parâmetros no Azure Portal
var cs = SBConnectionString.CreateListenAccess(
new NSUrl("sb://seuservicebus-ns.servicebus.windows.net/"),
"SUA-KEY");
// Registrar device no azure
var hub = new SBNotificationHub(cs, "seu-hub-name");
hub.RegisterNativeAsync(deviceToken, null, err =>
{
if (err != null)
Console.WriteLine("Erro: " + err.Description);
else
Console.WriteLine($”Sucesson Token: {deviceToken}“);
});
}

43. public override void ReceivedRemoteNotification(UIApplication app, NSDictionary
userInfo)
{
// Processa a notificação recebida com o app aberto
// Iterar sobre o userInfo e processar a informação recebida
// ex.: navegar para uma página
ProcessNotification(userInfo);
}

44. ANDROID

45. No AssemblyInfo.cs do projeto Droid adicionar:
// Permissão que notifica o app que o device terminou de ligar
[assembly: UsesPermission(Android.Manifest.Permission.ReceiveBootCompleted)]

46. Criar um BroadcastReceiver:
[assembly: Permission(Name = "@PACKAGE_NAME@.permission.C2D_MESSAGE")]
[assembly: UsesPermission(Name = "@PACKAGE_NAME@.permission.C2D_MESSAGE")]
[assembly: UsesPermission(Name = "com.google.android.c2dm.permission.RECEIVE")]
[assembly: UsesPermission(Name = "android.permission.INTERNET")]
[assembly: UsesPermission(Name = "android.permission.WAKE_LOCK")]
namespace XamarinFormsAzure.Droid
{
[BroadcastReceiver(Permission = Gcm.Constants.PERMISSION_GCM_INTENTS)]
[IntentFilter(new[] { Intent.ActionBootCompleted } )] // Permite gerenciar push com app fechado
[IntentFilter(new[] { Gcm.Constants.INTENT_FROM_GCM_MESSAGE }, Categories = new[] { "@PACKAGE_NAME@" } )]
[IntentFilter(new[] { Gcm.Constants.INTENT_FROM_GCM_REGISTRATION_CALLBACK }, Categories = new[] {
"@PACKAGE_NAME@" } )]
[IntentFilter(new[] { Gcm.Constants.INTENT_FROM_GCM_LIBRARY_RETRY }, Categories = new[] { "@PACKAGE_NAME@" } )]
[IntentFilter(new[] { "com.google.firebase.INSTANCE_ID_EVENT" }, Categories = new[] { "@PACKAGE_NAME@" } )]
public class GcmBroadcastReceiver : GcmBroadcastReceiverBase<GcmService>
{
// Não precisa de nada aqui :)
}
}

47. Criar um Serviço que integre com o Notification Hub:
[Service]
public class GcmService : GcmServiceBase
{
private static NotificationHub hub;
public static void Initialize(Context context)
{
hub = new NotificationHub(PushNotificationConstants.HUB_NAME,
PushNotificationConstants.HUB_CONNECTION_STRING, context);
}
public static void Register(Context Context)
{
GcmClient.Register(Context, new[] { PushNotificationConstants.SENDER_ID } );
}
public GcmService() : base(new[] { PushNotificationConstants.SENDER_ID } )
{
}
// continua

48. …continuação
protected override void OnRegistered(Context context, string registrationId)
{
if (hub != null)
{
string[] tags = null; //pode especificar tags aqui
hub.Register(registrationId, tags);
}
}
protected override void OnUnRegistered(Context context, string registrationId)
{
if (hub != null)
{
hub.Unregister();
}
}

49. …continuação
protected override void OnMessage(Context context, Intent intent)
{
if (intent != null || intent.Extras != null)
{
foreach (var key in intent.Extras.KeySet())
{
// loga informações recebidas
Debug.WriteLine($"Key: {key} Value: {intent.Extras.Get(key)} ");
}
string message = intent.Extras.GetString("message");
if (!string.IsNullOrWhiteSpace(message))
{
CreateNotification("TDC 2017 - Notificação", message, intent.Extras);
return;
}
}
}

50. SIGNALR

51. http://signalr.net/
“ASP.NET SignalR is a new library for ASP.NET
developers that makes it incredibly simple to add real-time
web functionality to your applications. What is "real-time
web" functionality? It's the ability to have your server-side
code push content to the connected clients as it happens,
in real-time.”

52. • Serviço criado para hospedar um algoritmo de matchmaking que
armazena informações de Geolocalização, timestamp e informações
do usuário
• match = 2 usuários estarem no mesmo range de localização e no
mesmo range de tempo (10s de tolerância)
• Ao identificar um match o serviço SignalR envia informações trocadas
dos usuários
• ex: User1 e User2 são um match
• User 1 recebe informações de User2
• User2 recebe informações de User1
SIGNALR | REAL TIME COMMUNICATION

53. • Criar projeto asp.NET
• SignalR funciona em JS também, portanto você pode testar
usando sua própria View asp.Net MVC por exemplo
• Instalar dependência Microsoft.AspNet.SignalR
• Adicionar Startup.cs (boilerplate)
SIGNALR | Criando Serviço

54. public class Startup
{
public void Configuration(IAppBuilder app)
{
try
{
app.MapSignalR();
}
catch (Exception ex)
{
app.Run(async ctx => await ctx.Response.WriteAsync(ex.ToString()));
}
}
}
SIGNALR | Criando Serviço

55. public class MobileHub : Microsoft.AspNet.SignalR.Hub
{
//Qualquer método público pode ser chamado
public void ExchangeInformation(string deviceId, string message, string token)
{
//armazena informação recebida
StoredData.TryAdd(guid, new MobileInformation(Context.ConnectionId, deviceId, message, token));
//lógica de match
//. . .
Clients.Caller.OnInformationReceived(info.DeviceId, info.Message);
// Envia informação atual para os outros devices
Clients.Client(info.ConnectionId).OnInformationReceived(deviceId, message);
}
}
SIGNALR | Adicionando Hub

56. SIGNALR | Integração com Xamarin

57. public class SignalRClient
{
private const string URL = “https://url_do_seu_serviço_signalR”;
private const string HUB_NAME = "MobileHub";
private readonly HubConnection connection;
private readonly IHubProxy chatHubProxy;
public SignalRClient()
{
this.connection = new HubConnection(URL);
this.chatHubProxy = this.connection.CreateHubProxy(HUB_NAME);
this.chatHubProxy.On<string, string>(
“OnInformationReceived",
(deviceId, message) => {
// gerenciar informação recebida
} );
}
// continua
SIGNALR | Integração com Xamarin

58. //cria métodos para iniciar e parar o serviço pra serem gerenciados a parte
public Task Start()
{
Debug.WriteLine("Iniciando SignalR client");
return this.connection.Start();
}
public void Stop()
{
Debug.WriteLine("Parando SignalR client");
this.connection.Stop();
}
SIGNALR | Integração com Xamarin

59. public void SendMessage(string deviceId, string message, string token)
{
if (this.connection.State == ConnectionState.Connected)
{
// string tem que ser o nome do método declarado no
// serviço SignalR
this.chatHubProxy.Invoke("ExchangeInformation", deviceId, message, token);
}
}
SIGNALR | Integração com Xamarin

60. DEMO DO SAMPLE APP

62. XAMARIN + AZURE
VALE A PENA?

63. https://github.com/oberdanf/XamarinFormsAzure
https://github.com/oberdanf/XamarinFormsAzureServer

64. OBRIGADO.
Big Brains Wanted
Join our team! Go to arctouch.com/careers/