Windows Phone 7.5 - Push Notification

Fala galera, tudo na paz? Faz tempo que não posto nada, nem no meu site Luciano Lima nem aqui no 100loop, mas agora que certas turbulências passaram, vou me dedicar mais aos artigos, principalmente sobre Windows Phone 7.

Irei disponibilizar uma série de posts sobre Windows Phone 7.5, não haverá uma ordem, pois, no que diz respeito à instalação e montagem de ambiente, já existem vários outros artigos sobre tal tema. No link abaixo, vocês irão encontrar um ótimo post sobre os primeiros passos com o Windows Phone, vale a pena ler antes de proceguir!

Alexandre Tadashi – http://www.linhadecodigo.com.br/artigo/3168/introducao-ao-windows-phone-7.aspx

Bem, mãos a obra!

O que é Push Notification?

Push Notification nada mais é do que formas de trabalhar com serviços de maneira inteligente e eficiente e ao mesmo tempo reduzindo o consumo de bateria (nada mau heim!). Além disso, os Push Notifications dão ao usuário final vantagens como poder verificar as novidades sobre seu aplicativo sem que precise estar o utilizando, gerando enorme diferencial e utilizando todo o potencial presente na plataforma Windows Phone.

E como isso funciona?

Entendendo o Push Notification

Vamos analisar a Imagem 01 para entendermos melhor como é o funcionamento de um Push Notification.

Imagem 01 – Esquema do Push Notification

Veja mos um Passo a Passo:
1º – a Aplicação Cliente faz uma requisição ao Push Service;
2º – o Push Service faz o pedido de uma URI ao MPNS (Microsoft Push Notification Service);
3º – o MPNS devolve a URI para o Push Service;
4º – o Push Service devolve a URI para a Aplicação;
5º – a Aplicação faz o envio da URI para um Cloud Service;
6º – o Cloud de posse da URI (identificação) verifica se existe informação a ser enviada, caso exista, ele faz um pacote e o envia para o MPNS;
7º – o MPNS de posse desse pacote, faz a distribuição para os Celulares (Aplicação Cliente).

Parece meio confusão não? Então, para um melhor entendimento, vamos criar um exemplo, simples, mas que fará com que vocês entendam melhor esse processo. Vamos lá?

Criando a aplicação para o Windows Phone.

Abra o Visual Studio e crie um projeto do tipo Windows Phone Application, conforme a Figura 02.

Figura 02 – Criando o projeto no Visual Studio 2010

Ao criar o projeto, o Visual Studio irá solicitar qual OS você deseja utilizar, selecione o OS 7.1 conforme a Figura 03

Figura 03 – Windows Phone OS

Apóso carregamento do projeto, adicione um botão e um textbox, conforme a Listagem 01

Listagem 01 – Textbox e Button

<Button Content="Criar Canal" Height="72" HorizontalAlignment="Left" Name="btnCriarCanal" VerticalAlignment="Top" Width="250" Click="btnCriarCanal_Click" Margin="100,129,0,0" />
  <TextBox x:Name="txtURI" Height="72" Margin="0,51,0,484"/>

Feito isso temos nosso projeto, você verá uma tela conforme a Figura 04

Figura 04 – Projeto Windows Phone com Textbox e Button adicionados.

Vá para o code behind (F7), vamos começar a implementar nossos métodos e eventos.

Primeiro, vamos criar um método para atualizar nosso Textbox com a URI que será gerada ao clicarmos no botão. Adicione o código conforme a Listagem 02.

Listagem 02 – Evento de atualização do Textbox

private void OnAtualizaCanal(Uri uri)
{
	Dispatcher.BeginInvoke(() =>
				{
					txtURI.Text = uri.ToString();
				});

	Debug.WriteLine( "URI: " + uri );
}

Agora, um método para configurar nosso Canal, insira o código da Listagem 03.
Listagem 03 – Configuração do Canal

private void ConfigurarCanal()
{
	const string nomeCanal = "NossoCanal";

	var httpChannel = HttpNotificationChannel.Find( nomeCanal );

	if ( httpChannel != null )
	{
		if ( httpChannel.ChannelUri == null )
		{
			httpChannel.UnbindToShellToast();
			httpChannel.Close();
			ConfigurarCanal();
			return;
		}

		OnAtualizaCanal( httpChannel.ChannelUri );

		BindToShell( httpChannel );
	}
	else
	{
		httpChannel = new HttpNotificationChannel( nomeCanal );
		httpChannel.ChannelUriUpdated += ChannelUriUpdated;
		httpChannel.ShellToastNotificationReceived += ShellToastNotificationReceived;
		httpChannel.Open();
		BindToShell( httpChannel );
	}
}

Vamos entender o que o código da Listagem 03 faz.

Primeiro criamos o nome de nosso canal. Depois realizamos uma busca para verificar se o canal já existe, caso já exista um canal e sua uri seja nula, nós realizamos um Unbind no ShellToast, fechamos o canal e retornamos.

Caso contrário, nós iremos criar um canal. Observer que ao criamos o canal, dois eventos devem ser preparados:

ChannelUriUpdated recebe um NotificationChannelUriEventArgs e ShellToastNotificationReceived irá receber um NotificationEventArgs.

Se a aplicação estiver rodando, ShellToastNotificationReceived irá receber a uri e atualizá-la no Textbox. Mas para que isso ocorra, devemos implementar o código da Listagem 04.

Listagem 04 – ShellToastNotificationReceived

void ShellToastNotificationReceived( object sender, NotificationEventArgs e )
{
	Dispatcher.BeginInvoke( () =>
	{
		txtURI.Text = "Mensagem Recebida: ";

		if ( e.Collection != null )
		{
			var collection = (Dictionary)e.Collection;

			foreach ( string elementName in collection.Keys )
			{
				txtURI.Text += string.Format( "Key: {0}, Value:{1}\r\n", elementName, collection[elementName] );
			}
		}
	} );
}

Crie mais dois métodos conforme a Listagem 05, eles serão responsáveis por realizar um bind em nosso canal e disparar um evento assim que a uri for atualizada.

Listagem 05

private static void BindToShell( HttpNotificationChannel httpChannel )
{
	httpChannel.BindToShellTile();
}

void ChannelUriUpdated( object sender, NotificationChannelUriEventArgs e )
{
	OnAtualizaCanal( e.ChannelUri );
}

Para completarmos essa primeira parte, falta adicionar o evento ao clique do botão. Para isso volte para a página MainPage.xaml e dê um duplo clique no botão, será criado um evento para o mesmo, insira o código no evento que acabou de ser criado. Seu código deverá se parecer com o da Listagem 06

Listagem 06 – Clique do botão

private void btnCriarCanal_Click( object sender, System.Windows.RoutedEventArgs e )
{
	ConfigurarCanal();
}

Pronto? Ainda não, precisamos criar agora uma imagem no tamanho 173 x 173 pixels que será nosso Tile de Notificação. Para adiantar, vocês podem utilizar a imagem abaixo.

Vá no Solution Explorer, crie uma pasta chamada Images, adicione esta imagem na pasta. Clique na imagem, precione F4, irá abrir a tela de Propriedades, no campo Build Actions, selecione “Content” e no campo Copy to Output Directory, selecione “Copy if newer”.

Bem, inicialmente, temos nossa aplicação, porém, precisamos testá-la, para isso iremos adicionar mais um projeto em nossa solução. Para ficar fácil nosso teste, crie um projeto do tipo Windows Form, ele será nosso Cloud Service.

Dê o nome de CloudServiceSimulator e adicione 6 Labels, 4 Textbox e 1 Button, seu projeto deverá ser parecer com o da Figura 05

Figura 05 – Aplicativo para envio da requisição

Dê um duplo clique no botão Enviar e adicione o código da Listagem 07.

Listagem 06 – Clique do botão

try
{
	string subscriptionUri = txtUrl.Text;
	var sendNotificationRequest = (HttpWebRequest)WebRequest.Create( subscriptionUri );
	sendNotificationRequest.Method = "POST";

	var tileMessage = new StringBuilder();

	tileMessage.Append("<?xml version=\"1.0\" encoding=\"utf-8\"?>");
	tileMessage.Append("");
	tileMessage.Append(" ");
	tileMessage.Append("  " + txtImagem.Text + "");
	tileMessage.Append("  " + txtTitulo.Text + "");
	tileMessage.Append(" " + txtTexto.Text + "");
	tileMessage.Append(" ");

	byte[] notificationMessage = Encoding.Default.GetBytes( tileMessage.ToString() );

	sendNotificationRequest.ContentLength = notificationMessage.Length;
	sendNotificationRequest.ContentType = "text/xml";
	sendNotificationRequest.Headers.Add( "X-WindowsPhone-Target", "token" );
	sendNotificationRequest.Headers.Add( "X-NotificationClass", "1" );

	using ( Stream requestStream = sendNotificationRequest.GetRequestStream() )
	{
		requestStream.Write( notificationMessage, 0, notificationMessage.Length );
	}

	var response = (HttpWebResponse)sendNotificationRequest.GetResponse();
	string notificationStatus = response.Headers["X-NotificationStatus"];
	string deviceConnectionStatus = response.Headers["X-DeviceConnectionStatus"];
	lblStatus.Text = string.Format("{0} : {1}", notificationStatus, deviceConnectionStatus);
}
catch ( Exception ex )
{
	lblStatus.Text = ex.Message;
}

Atentem para a variável tileMessage, ela foi criada no modelo de formatação para Tile.

Precisamos agora rodar nossos dois projetos, para isso volte ao Solution Explorer, clique com o botão direito na Solution, vá em Properties e marque a opção Multiple statup projects, defina os dois projetos como Start no Action.

Clique em F5, antes de enviar a requisição você precisa clicar no botão Criar Canal da aplicação do Windows Phone, ele irá gerar uma Url, copie e cole-a no primeiro Textbox do aplicativo CloudServiceSimulator.

Figura 06 – Url gerada

Figura 07 – CloudServiceSimulator

Volte ao simulador do Windows Phone, clique na seta para sair do aplicativo, feito isso, vá para o menu onde o aplicativo foi instalado, clique com o botão esquerdo e segure por 2 segundos. Marque a opção “Pin to start” conforme a figura 08

Figura 08 – Adicionando o App na tela inicial

Seu simulador deverá ficar como na figura 09

Figura 09 – App na tela inicial

Basta você clicar no botão “Enviar” do CloudServiceSimulator para que sua requisição seja enviada para o simulador do telefone. Isso fará com que sua imagem mude e ele escreva no tile. algo como na Figura 10

Ufa…terminamos!

Bem, acho que isso encerra nosso post sobre Push Notification. Como vocês puderam perceber é uma funcionalidade muito legal e simples de ser implementada. Agora use sua imaginação e crie seus aplicativos com PushNotification!

Espero que tenham gostado e entendido.

Caso tenham dúvidas ou sugestões sobre Windows Phone, basta enviar um email para lima@lucianolima.com.br.

Até o próximo post!