Tutorial: Como fazer um aplicativo no App Studio

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

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:

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

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;

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?

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.

Mais informações:

Lhaís Rodrigues

(Equipe de Suporte no App Studio do Hackathon Microsoft Recife)

+558196860915 | lrs4@cin.ufpe.br