Este documento fornece um tutorial passo a passo sobre como criar um aplicativo no App Studio, incluindo escolher um modelo, adicionar conteúdo, escolher um estilo e publicar. Explica os diferentes componentes básicos e avançados que podem ser adicionados e fornece exemplos de como personalizar o aplicativo.

1. Tutorial: Como fazer um aplicativo no App Studio

2. Olá! O Hackathon Microsoft Recife foi criado no intuito de proporcionar as pessoas
conhecedoras ou não de programação a possibilidade de criar soluções reais e aprender
programação ou aperfeiçoar a forma de programar.
Este tutorial foi criado pra explicar passo a passo de como criar um aplicativo no
App Studio e além disso, mostrando um exemplo de projeto criado para mostrar
possibilidades e o que se pode fazer com a plataforma.
O importante é utilizar este e demais materiais que podem ser postado pela equipe
organizadora do Hackathon na página do Facebook ou materiais indicados para a
produção das suas ideias. Porém, qualquer dúvida e ajuda pode procurar qualquer uma das
organizadoras ou enviar e-mail para lrs4@cin.ufpe .br (Lhaís Rodrigues).
#GoGoGo Galera
Equipe de Suporte no App Studio

3. Tutorial: Como fazer aplicativos para Windows Phone usando App Studio?
O primeiro passo é acessar o site: http://appstudio.windows.com/
Quando você acessar o site perceberá a quantidade de informações que ele oferece
são materiais excelentes para a produção do aplicativo. Note as partes como: How
to e Sample Apps, na parte How to tem as informações de todos os recursos que
podem ser utilizados no App Studio e a aba Sample Apps são alguns exemplos
aplicativos que foram feitos no App Studio (Estes exemplos podem lhe ajudar com
ideias para o aplicativo).
Após uma lida geral do site e noção, caso precise, de onde encontrar todos os
componentes, clique no botão Start New Project, como mostrado na imagem
abaixo:
Quando você clicar no botão, será direcionado para uma página de login com alguma
conta Microsoft. Faça o login com alguma conta Microsoft ou crie uma e assim, acessará a
plataforma App Studio. Veja o design da plataforma abaixo:

4. O primeiro passo é escolher um template. Como apresentado no dia da abertura do
evento, o AppStudio é tão simples que só são necessários quatros passos para a realização
de um aplicativo:
1. Ter uma ideia
2. Adicionar conteúdos ao aplicativo (Serão informados como logo abaixo)
3. Escolha um estilo
4. Teste o seu aplicativo!
Antes de escolher o seu Template, observe as possibilidades e como elas funcionam. O
Template Empty App é um template vazio, nele você pode configurar as coisas de sua
preferência, os demais templates são de algum tema especifico. Com isso, você pode
possuir ideias de inovação utilizando alguns daqueles templates, como: Criar soluções em
Turismo, Esporte, Entretenimento e etc. Uma observação é que o Template Web Apps só
pode ser utilizado em Windows Phone.
Escolhendo por exemplo o Template Empty, você obterá como a tela mostrada abaixo:
Uma observação: Sempre que selecionado um template, ele mostrará uma visualização de
como ele se comporta.
Perceba coisa como o nome do aplicativo está vazio e que o ícone ao lado está sem
imagem alguma, essas configurações podem ser editadas por você e se possível podem ser
realizadas no momento que você já tiver o nome e logo do seu aplicativo pronto. Outro
ponto a ser discutido é a Main Sections e Basic Sections, que são os componentes e
conteúdos que você utilizará para colocar no seu aplicativo.
Após visualizado de maneira geral a plataforma, clique em Themes e personalize o estilo do
seu aplicativo. Na parte de Custom Style, você pode customizar de acordo com a sua

5. preferência, nos demais são estilos padrões do Windows Phone, personalizado de acordo
com a temática escolhida. Veja um exemplo abaixo de um projeto personalizado:
Perceba que no exemplo acima foi escolhido o Custom Style e personalizado de acordo
com a preferência.
Após selecionado o Estilo, vamos adicionar conteúdo ao nosso aplicativo.
Uma observação: Antes mesmo de iniciar o projeto do seu aplicativo, crie a arquitetura da
funcionalidade dele, de quantas telas serão necessárias, as funções e tudo mais.
Clique na parte Content e observe as opções que você pode adicionar e reconheça as
diferenças perceptíveis nelas.
Na parte Main Sections, são as seções principais do seu aplicativo. Em geral, são as telas
principais de seu aplicativo.
Na parte Basic Section, são os componentes básicos que você pode utilizar para adicionar
ao seu aplicativo.
Na parte Advaced Section são os componentes mais completos que você pode adicionar
como um Menu e uma coleção.
Basic Sections:
Nesta seção, você pode adicionar componentes básicos a seu aplicativo como explicados
abaixo:
 RSS: Uma lista de informações baseadas em RSS feed. Na configuração, você
apenas coloca o Url do Rss;
 HTML: Você pode configurar como uma página de aplicativo comum ou como uma
página web incorporando coding em HTML;

6.  Youtube: Uma lista de vídeos podendo ser em uma tag especifica ou canal do
Youtube;
 Flickr: A lista de imagens da sua conta Flickr;
 Bing: Uma pesquisa baseada no lugar e tag especifico, como um filtro de dados;
 Facebook: Uma página do facebook;
 Instagram: Uma lista de imagens com uma tag especifica.
Advaced Sections:
Os únicos itens essenciais do Advaced é o Menu e a Collection. O menu é como tópicos de
uma página principal que são páginas e coleção é uma coleção de dados que pode ser
dinâmico ou estático.
Observe abaixo o exemplo do projeto utilizando os componentes explicados acima:
Perceba que a medida que você adiciona um item, você pode nomeá-lo e edita-lo.
Abaixo listaremos algumas notificações que você visualizará e tirará algumas dúvidas:
1. O que significa Vincular dados ou Bind to data quando estamos usando Collection?
Conectar uma parte da sua fonte de dados com uma certa área da sua página.
Clicando neste ícone, você estará vinculando os seus dados:
2. Como adicionar uma ação quando utilizamos Collection?
Clicando no ícone você poderá adicionar uma coleção dependendo da
coleção adicionada. Quais são estes tipos de ação?

7. a. Call a Phone: Ligar para um número;
b. E-mail: Enviar um e-mail;
c. Nokia Music: Adicionar uma lista de músicas de acordo com um cantor ou
playlist;
d. Here Maps: Indicar uma localização.
3. No Basic Sections usando o Facebook, adicione no corpo da página apenas o nome,
sem números ou qualquer outro caractere. A página deve ser pública.
Após adicionado todos os seus conteúdos e adicionado o Theme do seu aplicativo,
vamos para a parte das Tiles. Você pode escolher uma das três opções mostradas de
tile e editar de acordo com a logo do seu aplicativo, o mesmo ocorre na parte da Splash
Screen. Um exemplo de um projeto na aba Tile está mostrado abaixo:
Pronto! Você finalizou o seu projeto, agora só basta publicar.
Informações sobre como publicar o seu aplicativo na Windows Store e como testá-lo no
seu device serão publicadas em breve.

8. Mais informações:
Lhaís Rodrigues
(Equipe de Suporte no App Studio do Hackathon Microsoft Recife)
+558196860915 | lrs4@cin.ufpe.br