Meu primeiro app de windows phone

Já venho lendo sobre desenvolvimento em Windows phone a algum tempo e nunca tinha dado o primeiro passo e começar desenvolver meu primeiro app. Eu gastei mais ou menos umas 6 horas, foi muito mais fácil e legal do que eu imaginava.

Foi assim que comecei, com uma ideia para trabalhar e com o plano de resolver um problema por vez e publicar o app a cada nova funcionalidade pronta, caso contrário eu sabia que corria chance de nunca plubicar nada. Até aquele dia eu nunca tinha realmente feito nada para Windows phone e para quealquer dispositivoque não fosse um PC, não tinha o development toolkit instalado, estava começando realmente do zero.

Tudo começou quando minha cunhada, que é nutricionista, me pediu uma força com uma planilha excel para calcular a porcentagem de gordura corporal dos pacientes dela, como ela já tinha um Lumia eu resolvi fazer uma calculadora, muito melhor começar com algo que agrega valor do que um ‘hello world’ qualquer, pode não ser o app mais fancy do mundo mas resolve um problema.

Eu comecei com um requisito simples: calcular a porcentagem de gordura para homens e mulheres de usando medições obtidas de um adipometro, outra ideia era seguir estritamente os guidelines de design do windows phone, que eu acho elegante e simples.

O primeiro passo era pegar o sdk do windows phone, que vem com o visual studio express e para publicar o app custa cerva de R$ 46,00 até 99 apps.

Outras ferramentas interessantes que acabei usando foram:
· Windows phone power tools – da acesso direto ao file system do seu app, é muito útil também para simular upgrades quando o modelo do app mudar.
· Windows Phone Toolkit – disponibiliza varios novos componentes para usar no seu app além de adicionar aquelas transições durate a navegaçào entre páginas
· Obelisk – uma biblioteca ajuda a guardar o último estado da sua aplicação no IsolatedStorage

Siga o guidelines de design

Eu passei pelo menos 70% do tempo só mexendo com design ou com o layout, mesmo que o app seja só uma calculadora!

Agumas das páginas que eu encontrei e achei bem legal Vision and process, que da um overview completo dos conceitos de design para windows phone e windows store apps.

Umas das coisas percebi é que o alinhamento e o design em grid, se seu app estiver alinhado em em 12 px ou multiplos dele com certeza vai parecer bem melhor. Outro post bem interessante é esse aqui que mostra bem toda essa questão de alinhamento.

Desenvolvendo o app

Eu conheco C# mas não tinha a nenhum conhecimento sobre XAML, a primeira coisa que eu fiz foi começar a arrastar os controle para a MainPage, logo a coisa começou a ficar bem bagunçada, principamente, mesmo assim acabei conseguindo alinhar tudo de uma maneira que me agradasse.

Um tempo depois eu descobri que usar Grid e StackPanel simplifica e muito alinhar os controles.

Eu ainda não me acostumei a usar o desginer ou o blend, no fim das contas eu me acostumei a escrever xaml na mão, no fim parece mais simples mas eu ainda tenho investido um tempo em usar o blend.

É realmente importante conhecer o ciclo de vida de um app no windows phone, quando um app é encerrado pelo windows phone de maneira automática para livrar memória (tombstoned) ou quando o ele é fechado, apertando o botão de voltar a partir da mainpage eu espero que o app volte ao mesmo estado quando re-iniciar.

Para recuperar o estado do app eu descobri uma biblioteca chamada Obelisk, o Obelisk faz todo o trabalho de searilizar o estado do app quando ele é encerrado ou tomstoned, e de-serealizar o último estado do app quando ele é re-ativado ou aberto

Depois de montar a UI foi hora de definir meu Model e descobrir como “colar”, ou seja fazer o bind do modelo na UI. O primeiro foi facil: eu tinha um a pessoa com uma idade, e suas medidas e porcentagem de gordura.

Inicialmente eu queria criar classes sem depender de nenhuma infraestrutura (POCO), eu até consegui mas depois que ao app começa a crescer você descobre que não é tão simples assim manter seu model sem dependencias, atualmente meu model implementa a interface InotifyPropertyChanged, que faz com que os controles seja corretamente atualizados na UI.

model

Toda a informação sobre binding pode ser econtrada aqui: Data binding for Windows Phone 8

Algumas coisas que você descobre só quando colocar a mão na massa:

Radio buttons e Enums

Fazer o biding de um enum em radio button não é tão trivial quando parece, eu queria ter um radio buttons para escolher entre masculino e feminino.

Olhando um pouco no stackoverflow vc logo descobre que tem que usar um converter junto com o binding. Em cada radio você passa um parametro que representa o enum value daquele radio para o converter junto com o valor real (neste caso eu tinha dois radios masculino e feminino), o converter (EnumToBoolean) então compara o parametro com o valor e retorna true ou false.

Bem simples não é? Sim um vez que você se depara com o problema :)

Não use sliders para escolher valor com precisão

São bonitos mas simplesmente não da para usar, ao invés disso use text box. Sliders devem ser usados para escolher valores relativos ou sem representação numérica.

Transições

Durante o ciclo compilar e rodar o app eu notei que o app simplemente aparecia na tela do telefone sem aquelas transições caracteristicas do windows phone, pesquisando aqui e ali descobri que o windows phone toolkit tinha implementado. Basta copiar e colar os tags XAML para NavigationIn e NavigationOut a coisa simplesmente funciona. Preste atencão que o RootFrame no App.xaml.cs deve ser atualizado para TransitionFrame e não PhoneApplicationPage.

App resources (aka ícones)

Logo na publicação do app descobri que era necessário ícones para o app ser publicado, uma preocupação que me veio a cabeça: a imagem que eu vou usar não poderia ser proprietaria, eu não poderia procurar um icone bonitinho na internet e usar pois estaria infrigindo direitos de uso.

Procure imagens que estejam licensiadas sob Creative Commons, existe um site de busca chamado search.creativecommons.org

Publicando o app

O site dev.windows.com tem toda a informação passo a passo para publicar o app mas algumas coisas são realmente importantes quando você acha que esta quase pronto para publicar o app mas descobre que não: ícones e screenshots! Tenha eles em mãos, os meus eu sempre faço diretamente do emulador, descomentando a seguinte linha no App.xaml.cs:

// Display the current frame rate counters.
// Application.Current.Host.Settings.EnableFrameRateCounter = true;

E uso a feature de screenshot do emulador que pode ser acessada a partir do botão “>>” no cando direito da janela. Uma dica importante é usar o emulador WXGA, os screenshots ja saem na resolução requerida pela loja. Eu perdi muito tempo no início por não saber nem da resolução nem da feature de screeshot.

O processo de submit também obriga você a escrever uma descrição do App, que é uma tarefa bem simples caso você esteja shippando em apenas um idioma mas ja começa a ficar um pouco entediante quando você shippa em 3, como é o meu caso: Inglês internacional, en-us e pt-br.

Meu app mostra medidas e peso, depois que eu adicionei os sistema de medida as tarefas de descever o app e fazer os screenshots fica bem mais chata e tediosa, globalização (real, não aqueala que a gente encontra pela internet) vai ser o tema do meu próximo post!

#1 Fabio on 8.06.2014 at 11:25 AM

Rodrigo, isso vai te ajudar com o design: www.microsoft.com/.../details.aspx