Aplicativos móveis
Introdução às ferramentas de desenvolvimento para Windows Phone
Joshua Partlow
Assim como muitos de vocês, no ano passado fui tomado por uma onda de anúncios pós-apocalípticos no estilo “Exterminador” que diziam o que o Droid faz. Cantarolei os comerciais do T-Mobile My Touch. Li artigos sobre quantos aplicativos a Apple vendeu para o iPhone.
Ao contrário de muitos de vocês, também passei o ano passado contando para meus amigos e familiares que, sim, eu de fato trabalho com um telefone celular, mas, não, nenhum desses são o telefone com o qual trabalho.
Portanto, é justo dizer que fiquei muito entusiasmado quando Steve Ballmer e Joe Belfiore anunciaram o Windows Phone 7 no Mobile World Congress (MWC) em Barcelona, Espanha. Eram 6h00. Horário de Redmond, 15 de fevereiro de 2010, mas eu estava em uma sala de conferências da Microsoft com algumas centenas de colegas de trabalho, alguns ainda de pijama, aguardando ansiosamente para assistir ao live feed do Belfiore demonstrando a nossa nova visão do telefone (microsoft.com/presspass/press/2010/feb10/02-15mwc10pr.mspx). Provavelmente verei muitos outros produtos serem lançados nos próximos anos, mas tenho certeza de que este continuará sendo um dos destaques. Certamente foi o momento mais incrível que tive na Microsoft até então.
Na tentativa de fazer com que você se sinta igualmente maravilhado com o potencial de desenvolvimento de aplicativos Windows Mobile, ao longo deste artigo vou lhe apresentar à plataforma de aplicativos para Windows Phone 7. Especificamente, vou falar sobre os componentes básicos da plataforma de aplicativos, apresentar uma visão geral das ferramentas de desenvolvimento para Windows Phone e orientá-lo na criação de um aplicativo para Windows Phone que acessa um serviço Web.
Uma pausa ao passado
Com o Windows Phone 7, a Microsoft confirmou que houve uma mudança no cenário da tecnologia móvel. Há uma nova expectativa de que, além de permitir que você leia emails e documentos, um telefone também deve ser parte integrante da sua vida. Possibilitando que você faça coisas como ouvir música, compartilhar fotos e vídeos e manter contato com amigos. Aparentemente, os usuários empresariais também gostam do Facebook, e os adolescentes se divertem navegando na Web. Não é nada tão surpreendente, eu sei, mas isso de fato representa uma evolução do papel que o telefone deve ter em nossas vidas.
Como consumidor em potencial, espero que você tenha assistido à demonstração de Belfiore e saído correndo para comprar seu telefone. Mas o mais importante, como desenvolvedor, espero que você fique curioso a respeito da história dos aplicativos. Afinal de contas, criar um novo SO é somente parte da competição no concorrido mercado de celulares. Se a nossa premissa de que os usuários desejam um telefone que lhes permita fundir suas vidas profissionais e pessoais de formas novas e interessantes, vai ser uma combinação do SO e de um ecossistema de aplicativos incríveis que tornará isso possível.
Não gastarei tempo descrevendo o telefone porque tenho certeza de que você vai encontrar detalhamentos no seu blog favorito, mas vou falar sobre o que imagino são as duas maiores questões para você como desenvolvedor: qual é a plataforma de aplicativos da Microsoft para o Windows Phone 7 e como começar a desenvolver aplicativos?
Um novo mundo para desenvolvedores
Bem, se o MWC deu início à revelação do Windows Phone 7, a Game Developers Conference (GDC) e o MIX10 completaram a história. Na GDC e no MIX, a Microsoft anunciou que a plataforma de aplicativos Windows Phone 7 é baseada no Silverlight e no XNA Framework. Se você já desenvolveu aplicativos para Windows Mobile, sabe que isso representa uma divergência fundamental em relação a versões anteriores do SO.
Então por que mudar as coisas? Bem, a minha opinião é que a força da Microsoft está em seu amplo conjunto de produtos e que ela só tem mais sucesso quando vincula esses produtos. Antes do Windows Phone 7, a história do desenvolvimento móvel pode ter aproveitado alguns ativos da Microsoft, mas nem chega perto do que você verá a partir de agora.
O XNA Framework foi concebido para permitir que os desenvolvedores criassem jogos 2D e 3D complexos e avançados que poderiam abranger os universos de área de trabalho, console e celular. Ele foi desenvolvido com base em um amplo conjunto de hardware, que abrange desde os recursos gráficos do console Xbox até os recursos de sensor e toque do Zune HD. Além disso, ele também foi projetado tendo em mente o cenário de jogos em rede.
O Silverlight é a plataforma de desktop da Microsoft para aplicativos de produtividade e mídia com base na Web. Aqui está uma plataforma que, quando combinada ao Expression Blend, permite a criação de interfaces de usuário interessantes que podem funcionar bem seja de modo independente ou vinculadas a serviços Web.
Tanto o XNA Framework quanto o Silverlight são fortes plataformas por seus próprios méritos. Porém, quando combinadas no telefone, elas criam um patamar totalmente novo, possibilitando o desenvolvimento de aplicativos com belas interfaces de usuário e elementos gráficos impressionantes que podem facilmente aproveitar os recursos de um dispositivo móvel.
Conforme as minhas experiências com aplicativos Silverlight e XNA no início do ciclo de desenvolvimento do Windows Phone 7, rapidamente fui convencido de que essa era uma boa direção. Eu era novato nas duas plataformas e também em código gerenciado, e fiquei impressionado com a rapidez com que pude desenvolver aplicativos com um visual incrível.
Outro recurso notável da nova plataforma de aplicativos é a padronização do hardware e o acesso programático a ele. Especificamente, outro anúncio que foi feito no MIX era de que o Windows Phone daria suporte a um conjunto principal de hardware que os desenvolvedores poderiam acessar de modo consistente e confiável. Por que isso é importante? Historicamente, tem sido difícil desenvolver aplicativos que executem em vários telefones porque acaba sendo necessário criar versões do aplicativo específicas para cada dispositivo. Alguns telefones não executariam o aplicativo sem antes fazer um retrabalho considerável ou nem mesmo funcionariam porque não davam suporte a recursos necessários para o aplicativo.
Com o Windows Phone 7, não haverá dúvida se o telefone no qual o seu aplicativo está executando terá suporte para serviços de localização – todos terão. Não haverá dúvida se o telefone terá um acelerômetro e se você pode acessá-lo — todos terão, e o acesso será consistente. Não haverá dúvida se o seu telefone será habilitado por toque — todos serão, e, repito, o acesso será consistente. A lista continua, mas espero que tenha dado uma ideia.
Com a plataforma de aplicativos Windows Phone 7, você poderá desenvolver um único aplicativo e saber que o que você testar no seu telefone funcionará em todos eles. Ainda haverá diferenciação de hardware no Windows Phone, mas também haverá uma base principal de hardware que os seus aplicativos poderão usar.
Para obter mais detalhes sobre o hardware do Windows Phone e a arquitetura da plataforma de aplicativos, consulte as visões gerais correspondentes no MSDN, em msdn.microsoft.com/library/ff402531(v=VS.92) e msdn.microsoft.com/library/ff637514(v=VS.92).
Introdução
OK, agora que falamos brevemente sobre a plataforma de aplicativos, vamos conversar sobre como desenvolver nela. No momento em versão beta, as ferramentas de desenvolvimento para Windows Phone estão disponíveis para download no Portal do Desenvolvedor do Windows Phone (developer.windowsphone.com). Se você não tiver o Visual Studio, as ferramentas de desenvolvimento vêm com o Visual Studio 2010 Express para Windows Phone. Se você tiver o Visual Studio 2010, as ferramentas se integrarão diretamente a ele. Seja como for, você terá tudo o que precisa para desenvolver para o Windows Phone 7.
As ferramentas de desenvolvimento incluem um emulador do Windows Phone e o Microsoft Expression Blend para Windows Phone. Embora não seja final, a versão beta é um bom indicativo do que você terá no lançamento. É possível que você precise fazer algumas modificações no código entre as versões beta e final das ferramentas, mas essas alterações devem ser menores ou, pelo menos, bem documentadas.
Instalei a versão beta das ferramentas usando o Visual Studio 2010 Express para Windows Phone e a utilizarei para o meu exemplo. Se você quiser um tutorial um pouco mais simples para começar, consulte o Guia de Introdução ao Windows Phone no MSDN, em msdn.microsoft.com/library/ff402529(v=VS.92).
Então, o que vamos criar? Em vez de criar um aplicativo geral do tipo “hello world” ou “make that flashlight”, que dever você está muito curioso para ver, pensei em compartilhar uma parte de um projetinho divertido no qual estou trabalhando.
No MIX, participei de uma sessão sobre um projeto do Windows Azure: O Microsoft codinome “Dallas” (microsoft.com/windowsazure/dallas). Basicamente o Dallas é um mercado para desenvolvedores interessados em obter dados para seus aplicativos de serviços Web que procuram vendê-los. Atualmente no segundo CTP (Community Technology Preview), você pode usar o portal online e inúmeras fontes de dados gratuitas fornecidas como avaliação para experimentar o que o serviço tem a oferecer. Embora a lista atual de provedores não seja enorme, ainda há muita coisa para experimentar. Pessoalmente achei interessantes os dados de imagem fornecidos pela NASA sobre missões a Marte e pensei que seria bacana criar um aplicativo para Windows Phone que pudesse mostrar imagens de exploração do planeta.
Como aviso, o código incluído aqui e disponível para download é um exemplo funcional, mas se você quiser executá-lo terá de se registrar para o Dallas CTP a fim de obter uma chave de conta e uma ID de usuário, que deixei em branco no meu código (microsoft.com/windowsazure/developers/dallas).
Criando seu projeto
A primeira etapa da criação do visualizador de imagens de exploração de Marte é criar um projeto de aplicativo para o Windows Phone. Ao inicializar a versão Express do Visual Studio 2010 para Windows Phone, é exibida uma página inicial padrão do Visual Studio. Nela, você pode selecionar Novo Projeto, que permite escolher uma opção entre os inúmeros modelos de projeto. Se você só instalou as ferramentas de desenvolvimento para Windows Phone, a lista ficará restrita ao Silverlight para Windows Phone e ao XNA Game Studio 4.0.
Selecionei um aplicativo para Windows Phone entre os modelos do Silverlight e nomeei meu projeto como MarsImageViewer. Nele, o Visual Studio faz sua mágica e gera um projeto para você.
Se você trabalhou já com o Windows Presentation Foundation (WPF) ou o Silverlight antes, provavelmente não ficará surpreso com o que verá. Você perceberá que existe uma superfície de design com uma linda capa de telefone, uma caixa de ferramentas com alguns controles básicos e vários arquivos XAML com os respectivos arquivos code-behind C# associados (veja a Figura 1). Se você deseja saber mais sobre as diferenças exatas entre Silverlight e XNA no Windows e Silverlight e XNA no Windows Phone, consulte a visão geral sobre a estrutura do Windows Phone no MSDN, em msdn.microsoft.com/library/ff402528(v=VS.92).
Figura 1 Seu projeto inicial para Windows Phone no Visual Studio
Compreendendo o XAML
Assim como no Silverlight, o modelo de aplicativo do Windows Phone fornece dois arquivos, App.xaml e MainPage.xaml, que são a base do seu aplicativo. Não falarei com detalhes sobre esses arquivos porque basicamente eles funcionam da mesma maneira que seus equivalentes no Silverlight, mas gostaria de apontar duas diferenças-chave antes de passar para a criação do aplicativo.
O primeiro ponto de interesse está no arquivo padrão App.xaml. Você perceberá que, embora a maior parte do código gerado automaticamente seja idêntica à que você veria em um projeto do Silverlight para desktop, existe uma seção adicional que contém um objeto PhoneApplicationService:
<shell:PhoneApplicationService
Launching="Application_Launching" Closing="Application_Closing"
Activated="Application_Activated" Deactivated="Application_Deactivated"/>
Na versão beta das ferramentas de desenvolvimento para Windows Phone, há um novo modelo de execução que determina o comportamento dos aplicativos; esta seção de marcação, combinada ao code-behind em App.xaml.cs, é um dos lugares onde aparece esse modelo. Para entender melhor o comportamento dos aplicativos para Windows Phone e deste objeto, consulte o tópico Modelo de execução para Windows Phone no MSDN, em msdn.microsoft.com/library/ff769557(VS.92).
O segundo ponto de interesse está no arquivo MainPage.xaml e, na verdade, onde começarei a criar o aplicativo. Se você olhar com atenção, grande parte do arquivo é semelhante ao Silverlight, mas há uma seção XAML comentada referente a uma barra de aplicativo. A barra de aplicativo é um controle de sistema que você usa para expor botões e itens de menu. Ela não só evita o problema de você ter de criar a sua própria barra, mas também confere consistência ao telefone, uma vez que se parece e se comporta exatamente como a que é usada nos aplicativos principais do telefone. Apesar de eu modificar essa marcação de modelo para criar minha barra de aplicativo, também é possível criar uma para uma página usando C# (para obter detalhes, consulte msdn.microsoft.com/library/ff431786(VS.92)).
Roubaram a minha barra de aplicativo
A primeira etapa da criação da barra de aplicativo é encontrar os ícones que você deseja usar. Você pode criar os seus próprios ícones ou usar alguns dos que acompanham as ferramentas de desenvolvimento. Por padrão, os ícones incluídos estão em C:\Arquivos de Programas (x86)\Microsoft SDKs\Windows Phone\v7.0\Icons\ (no Windows de 64 bits) e em C:\Arquivos de Programas\Microsoft SDKs\Windows Phone\v7.0\Icons\ (no Windows de 32 bits). Vale a pena conferir esses ícones porque eles combinam com a aparência do telefone.
Depois de escolher as imagens desejadas, crie uma pasta Imagens no seu projeto e adicione os ícones a ela. Em seguida, defina as propriedades de cada ícone: Ação de Compilação deve ser “Conteúdo” e Copiar para Diretório de Saída deve ser “Copiar sempre”, como ilustrado na Figura 2.
Figura 2 Adicionando recursos de imagem ao projeto
A próxima etapa é remover comentários da marcação da barra de aplicativo e modificá-la para o aplicativo. Nesse caso, isso implica criar dois botões e os manipuladores de evento associados. Especificamente, criei um botão para recuperar a próxima foto e outro para recuperar a foto anterior. Também adicionei eventos de clique ao XAML e autorizei o Visual Studio a gerar os manipuladores de evento. Agora o XAML da barra de aplicativos se parece com o código da Figura 3.
Figura 3 Configurando a barra de aplicativo
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar
IsVisible="True" IsMenuEnabled="False">
<shell:ApplicationBarIconButton
x:Name="appbar_BackButton"
IconUri="/Images/appbar.back.rest.png"
Text="Back"
Click="appbar_BackButton_Click">
</shell:ApplicationBarIconButton>
<shell:ApplicationBarIconButton
x:Name="appbar_ForwardButton"
IconUri="/Images/appbar.next.rest.png"
Text="Next"
Click="appbar_ForwardButton_Click">
</shell:ApplicationBarIconButton>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
Antes de passar para o code-behind, também especifiquei um título de aplicativo e um nome de página e adicionei um controle de imagem à grade raiz de MainPage.xaml, como mostra a Figura 4. Isso deve deixar a superfície de design parecida com a Figura 5, onde você perceberá uma barra de aplicativo em branco com quatro círculos.
Figura 4 MainPage.xaml
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="24,24,0,12">
<TextBlock x:Name="ApplicationTitle"
Text="MarsImageViewer"
Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle"
Text="Images"
Margin="-3,-8,0,0"
Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentGrid" Grid.Row="1">
<Image Height="300"
HorizontalAlignment="Left"
Margin="36,104,0,0"
Name="MarsImage"
Stretch="Fill"
VerticalAlignment="Top"
Width="400" />
</Grid>
Figura 5 A superfície de design configurada
Com a interface do aplicativo definida, é hora de obter algumas imagens de exploração de Marte. O portal Dallas foi criado para ser amigável e permite experimentar consultas. Ele também informa a URL do serviço Web apropriado, mostra como adicionar parâmetros e fornece as informações de cabeçalho adequadas para suas consultas.
No portal, descobri que o serviço Web da NASA permite consultar informações de imagem com base em parâmetros ou recuperar uma imagem JPEG específica através da ID da imagem. Para este programa, isso significa que são necessárias duas operações. A primeira é consultar informações de imagem, o que inclui a respectiva ID. A segunda é analisar o XML retornado das IDs de imagem, que poderão ser usados para recuperar uma imagem específica.
Chamando Houston ... Quer dizer, Dallas
Vamos começar. No arquivo MainPage.xaml.cs padrão, adicionei usando declarações para três namespaces:
using System.Xml.Linq;
using System.IO;
using System.Windows.Media.Imaging;
Em seguida, adicionei uma referência à DLL System.Xml.Linq; para isso, cliquei com o botão direito do mouse em Referências, no Gerenciador de Soluções, selecionei Adicionar Referência e System.Xml.Linq e, por último, cliquei em OK. System.Xml.Linq dá acesso a classes que ajudam a carregar o XML de fluxos e a consultar esse XML através de LINQ. Não se preocupe caso você não esteja familiarizado com LINQ; este exemplo usa uma quantidade mínima de LINQ to XML, e você sempre poderá consultar o MSDN para obter mais informações.
Também criei duas variáveis particulares para a página. Um IEnumerable de objetos XElement chamou entradas para armazenar o resultado de uma consulta LINQ to XML, e um índice de inteiro para rastrear a imagem em que estou. Em seguida, modifiquei o construtor MainPage para inicializar o índice para 0 e chamar uma função getImageIDs:
private IEnumerable<XElement> entries;
private int index;
// Constructor
public MainPage() {
InitializeComponent();
index = 0;
getImageIDs();
}
A função getImageIDs visa iniciar a recuperação de informações da imagem do serviço Web. A função usa a URL do serviço Web e um WebClient para iniciar uma solicitação assíncrona por informações da imagem:
private void getImageIDs() {
Uri serviceUri = new Uri("https://api.sqlazureservices.com/NasaService.svc/MER/
Images?missionId=1&$format=raw");
WebClient recDownloader = new WebClient();
recDownloader.Headers["$accountKey"] = "<Your account key>";
recDownloader.Headers["$uniqueUserID"] = "<Your user ID>";
recDownloader.OpenReadCompleted +=
new OpenReadCompletedEventHandler(recDownloader_OpenReadCompleted);
recDownloader.OpenReadAsync(serviceUri);
}
Você perceberá que, para simplificar, codifiquei o parâmetro missionId como 1, que, neste caso, representa a missão Opportunity. O ideal é que este e outros parâmetros fossem definidos dinamicamente pelo usuário.
Com qualquer solicitação assíncrona, é preciso um identificador. Esse identificador é chamado quando a solicitação de dados é concluída. Ele usa o fluxo retornado, junto com um LINQ to XML básico, para acessar todas as marcas “entry” no XML retornado; “entry” é a marca de abertura de cada registro de imagem:
private void recDownloader_OpenReadCompleted(
object sender, OpenReadCompletedEventArgs e) {
if (e.Error == null) {
Stream responseStream = e.Result;
XNamespace ns = "http://www.w3.org/2005/Atom";
XElement marsStuff = XElement.Load(responseStream);
entries = marsStuff.Elements(ns + "entry");
string imageID =
(string)entries.ElementAt<XElement>(index).Element(
ns + "title").Value;
getImage(imageID);
}
}
A coleção resultante é armazenada no IEnumerable de objetos (entries) XElement, que declarei anteriormente. Com um pouco mais de LINQ to XML para terminar, o identificador então recupera o valor da marca de título referente ao primeiro XElement nas entradas. O valor da marca de título neste esquema XML corresponde à ID da imagem, que é então passada para uma função getImage.
A função getImage é parecida com a função getImageIDs. A única diferença é a URL do serviço Web que é utilizada. Esta função recupera de modo assíncrono um fluxo para a imagem identificada pelo parâmetro ID. Seu identificador usa esse fluxo para definir a fonte do controle de imagem que defini em MainPage.xaml (veja a Figura 6).
Figura 6 Recuperando a imagem
private void getImage(string ID) {
Uri serviceUri = new Uri(
"https://api.sqlazureservices.com/NasaService.svc/MER/Images/" +
ID + "?$format=raw");
WebClient imgDownloader = new WebClient();
imgDownloader.Headers["$accountKey"] = "<Your account key>";
imgDownloader.Headers["$uniqueUserID"] = "<Your user ID>";
imgDownloader.OpenReadCompleted +=
new OpenReadCompletedEventHandler(imgDownloader_OpenReadCompleted);
imgDownloader.OpenReadAsync(serviceUri);
}
private void imgDownloader_OpenReadCompleted(
object sender, OpenReadCompletedEventArgs e) {
if (e.Error == null) {
Stream imageStream = e.Result;
BitmapImage imgsrc = new BitmapImage();
imgsrc.SetSource(imageStream);
MarsImage.Source = imgsrc;
}
}
Abotoando botões
Nesta fase, o restante do aplicativo é muito simples, pois só falta implementar os manipuladores de evento gerados automaticamente para os botões da barra de aplicativo. Esses são os botões que serão utilizados para avançar e voltar pelas imagens de exploração de Marte. Como você pode ver, basicamente eu apenas reutilizei a função getImage e adicionei um pouco de lógica para lidar com a alteração do índice do registro atual na coleção de entradas. Este é o identificador do botão Voltar:
private void appbar_BackButton_Click(
object sender, EventArgs e) {
if (index > 0) {
index--;
XNamespace ns = "http://www.w3.org/2005/Atom";
string imageID = (string)entries.ElementAt<
XElement>(index).Element(ns + "title").Value;
getImage(imageID);
}
}
O identificador do botão Avançar é muito parecido, exceto pela indexação:
The forward button handler is pretty much the same, except for its indexing:
if ((index + 1) < entries.Count<XElement>()) {
index++;
...
Agora você pode executar o programa usando o emulador do Windows. Selecione o emulador do Windows Phone 7 no menu do dispositivo de destino, na barra de ferramentas Padrão. Pressione F5 e o programa será compilado e implantado no emulador (veja a Figura 7).
Figura 7 Executando o aplicativo no emulador
Pronto para o lançamento
Este exemplo foi relativamente simples, mas espero que tenha dado uma noção aproximada de como são as ferramentas de desenvolvimento e como é fácil disponibilizar um aplicativo no Windows Phone. Existem muitas possibilidades com o Windows Phone 7, e você deve separar um tempo para explorá-las mais.
O que você viu aqui é somente um pequeno vislumbre do que a plataforma de aplicativos tem a oferecer. Como prova disso, considere o aplicativo simples que projetei. Com mais um botão e cerca de 12 linhas de código, você pode usar a classe MediaLibrary no namespace Microsoft.Xna.Framework.Media para salvar uma dada foto na biblioteca de mídia (consulte msdn.microsoft.com/library/ff769549(v=VS.92)).
Sim, isso mesmo — você pode usar APIs do XNA de dentro dos seus aplicativos para Windows Phone baseados no Silverlight. Infelizmente, as discussões sobre a intercalação de APIs do Silverlight e do XNA em aplicativos, e vários outros tópicos, terão de ficar para uma próxima ocasião. Por isso, fique atento a alguns artigos mais detalhados e direcionados e consulte a documentação e os exemplos no MSDN, em msdn.microsoft.com/library/ff402535(v=VS.92).
Joshua Partlow é escritor técnico de programação da equipe do Windows Phone 7. Ele trabalha documentando o processo de criação do telefone, o desenvolvimento de drivers de dispositivo e o desenvolvimento de aplicativos para OEMs que criam Windows Phones.
*Agradecemos ao seguinte especialista técnico pela revisão deste artigo:*Equipe do Windows Phone 7