Twitter: @vbs_br

Facebook: http://aka.ms/facevisouza

Olá pessoal, primeiramente gostaria de parabeniza-los pela participação do Kick Off do AppDay.

O prazo para o cadastro da URL do aplicativo foi estendido! Isso mesmo, agora vocês podem fazer o envio até o dia 31/05 de 2013

Fiquem atentos quanto ao tempo de certificação do aplicativo na Windows Store e no Publisher. Na Windows Store o tempo médio é de 5-7 dias úteis, no Publisher esse tempo é um pouco maior já que além do período da Windows Store temos o tempo do Publisher.

Lembrando que a data para enviar a URL do aplicativo de desenvolvido por vocês para receber o certificado é até o dia 31 de Maio de 2013.

Estamos recebendo algumas dúvidas pelo Twitter e pelo Facebook sobre os pontos abordados no sábado (20/04).

Vou endereçar a maior parte delas no meu Blog para conseguir escalar e ajudá-los o mais rápido possível.

Navegação no artigo:
1) Como pedir ajuda no desenvolvimento de aplicativos para Windows 8?

2) Tokens enviados do DreamSpark para os estudantes.

3) Cadastro da conta na Windows Store.

4) Alteração dos templates

5) Gerar o pacote para a Windows Store.

6) Preenchimento do formulário de submissão.

Conclusão

1) Como pedir ajuda no desenvolvimento de aplicativos para Windows 8?<

Estamos monitorando a HashTag do #AppDay para conseguir compilar artigos como esse, vou postar pelo menos 1 artigo por dia endereçando alguns dos pontos que o pessoal está com dúvida.

Temos também um grupo na Facebook chamado “Apps4Win Windows 8“, onde a comunidade está muito ativa e já temos também muitas perguntas respondidas. Dica, deem uma olhada nas perguntas grande chances que sua dúvida já foi respondida

2) Tokens enviados do DreamSpark para os estudantes.

O Token recebido do DreamSpark, foi enviado somente no dia do kick off do evento e enviamos 1 token por e-mail. Não vai haver mais envio de token.

Caso tenha dado a mensagem de token inválido verifique se o código foi digitado exatamente igual, se copiado do e-mail verifique se não foi nenhum espaço junto.

3) Cadastro da conta na Windows Store.

O processo de cadastro de conta na Windows Store está endereçado no vídeo do Caverna http://channel9.msdn.com/posts/AppDay-Parte-1 - Você na Windows Store.

A principal dúvida que pude identificar é sobre o cartão:

• O cartão utilizado pode ser Nacional e/ou Internacional;
• Caso não consiga realizar a validação do cartão, entre em contato com a operadora do cartão de crédito utilizado (normalmente tem um número de telefone de contato na parte de trás do cartão). Pode ser que o cartão esteja bloqueado para utilização na internet.
• O cartão de crédito é utilizado para conseguir validar que a conta criada está vinculada a uma pessoa e não precisa possuir os mesmos dados da pessoa que está criando a conta. Pode ser utilizado, por exemplo, cartão de crédito de familiares sem problema, você terá que ter acesso a fatura de cartão de crédito para olhar o registro da compra com o valor/código de verificação.
• O valor cobrado é estornado, ou seja, nada será cobrado no processo de verificação.

Caso não queira utilizar o cartão de crédito e ter uma conta sua na Windows Store, você pode utilizar o Publisher http://bit.ly/w8appup.

Ao acessar essa URL você vai poder fazer upload do seu projeto e do arquivo XML gerado com o WACK (Windows Application Certification Kit).

O Publisher não vai realizar qualquer alteração na fonte do seu aplicativo, por isso é fundamental utilizar o WACK e somente submeter se estiver com o status de SUCESSO.

4) Alteração dos templates

Veja o vídeo com a alteração passo-a-passo do templates de catálogo eletrônico para um aplicativo de Cup Cake http://channel9.msdn.com/posts/AppDay-Video-2-Alterando-o-template-para-uma-app-de-CupCake-no-VisualStudio-passo-a-passo

• 4.1) Como alterar os dados apresentados!?

Os templates do AppDay, utilizam os dados existentes no arquivo XML para preencher o conteúdo da APP, estes dados são apresentados somente quando a App está em modo de execução, quando clicamos no play ou pressionamos F5.

Os dados apresentados dentro do VisualStudio estão em uma classe Win8Catalogo.Data.SampleDataSource, alterando os dados que são inseridos na classe altera os dados na visualização, linha 66 em diante do arquivo SampleDataSorce.cs na pasta DataModel.

• 4.2) Alterando a quantidade de itens apresentada na home do aplicativo.

Para alterar a quantidade de itens apresentada na Home acesse o arquivo HomePage.xaml.cs e procure pelo método

protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)

Logo abaixo da assinatura do método temos a seguinte linha:

this.DefaultViewModel["Groups"] = Win8CatalogApplication.Instance.GetTopItens(4); 

Se alterarmos o parâmetro do método GetTopItens para 6, por exemplo, teremos 6 itens apresentados por categoria.

A linha de código abaixo apresento todo o código utilizado para alterar.

this.DefaultViewModel["Groups"] = Win8CatalogApplication.Instance.GetTopItens(6); 

• 4.3) Remover o R$ do templates de Catálogo eletrônico.

Abra o arquivo  Common/StandardStyles.xaml e procure pelo data templates que deseja alterar, veja qual em cada página.

HomePage.xaml: Standard250x250ItemTemplate visualização normal.

A baixo temos o código utilizado na GridView da HomePage, o código em negrito pode ser removido (deletado) sem problema.

<DataTemplate x:Key=”Standard250x250ItemTemplate”>

<Grid HorizontalAlignment=”Left” Width=”263″ Height=”247″>

<Border Background=”#003D3D3D”>

<Image Source=”{Binding ImageUrl, Converter={StaticResource StringToImageConverter}}” Stretch=”UniformToFill” AutomationProperties.Name=”{Binding Nome}”/>

</Border>

<StackPanel VerticalAlignment=”Bottom” Background=”#EA1E2324″ Height=”55″ Margin=”0,0,0,26″>

<TextBlock Text=”{Binding Nome}” Margin=”10,7,10,0″ FontSize=”13.333″ FontFamily=”Segoe UI”/>

<StackPanel Margin=”10,0″ Orientation=”Horizontal”>

<TextBlock FontSize=”10.667″ FontFamily=”Segoe UI” Text=”Rs.” VerticalAlignment=”Bottom” LineStackingStrategy=”BlockLineHeight” Margin=”0,0,0,1″/>

<TextBlock Text=”{Binding Valor}”  TextWrapping=”NoWrap” FontFamily=”Segoe UI” FontSize=”22.667″ VerticalAlignment=”Center” LineStackingStrategy=”BlockLineHeight” LineHeight=”22.667″/>                

</StackPanel>

</StackPanel>

</Grid>

</DataTemplate>

Outro exemplo agora  na página CategoriaPage.Xaml, DateTemplate GroupItemTemplate disponível também no arquivo StandardStyle.xaml.

Removendo a trecho de código em negrito, vocês conseguem remover o valor utilizado.

<DataTemplate x:Key=”GroupItemTemplate”>

<Grid HorizontalAlignment=”Left” Width=”339″ Height=”369″>

<Border Background=”#003D3D3D”>

<Image Source=”{Binding ImageUrl}” Stretch=”UniformToFill” AutomationProperties.Name=”{Binding Title}”/>

</Border>

<Grid VerticalAlignment=”Bottom” Background=”#EA1E2324″ Height=”65″ Margin=”0,0,0,26″>

<StackPanel Orientation=”Vertical” Margin=”10,0,0,5″ HorizontalAlignment=”Left” VerticalAlignment=”Center”>

<TextBlock Text=”{Binding Nome}” FontSize=”18.667″ FontFamily=”Segoe UI” HorizontalAlignment=”Left”/>

<StackPanel Margin=”0″ Orientation=”Horizontal”>

<TextBlock FontSize=”13.333″ FontFamily=”Segoe UI” HorizontalAlignment=”Left” Text=”{Binding SubTitulo}” Margin=”5,0,0,0″/>

</StackPanel>

</StackPanel>

<StackPanel Orientation=”Horizontal” HorizontalAlignment=”Right” Margin=”0,0,10,0″ VerticalAlignment=”Center”>

<TextBlock FontSize=”10.667″ FontFamily=”Segoe UI” Text=”R$ ” VerticalAlignment=”Bottom” LineStackingStrategy=”BlockLineHeight” Margin=”0,0,0,1″/>

<TextBlock Text=”{Binding Valor}” TextWrapping=”NoWrap” FontFamily=”Segoe UI” FontSize=”29.333″ VerticalAlignment=”Center” LineStackingStrategy=”BlockLineHeight” LineHeight=”22.667″/>

</StackPanel>

</Grid>

</Grid>

</DataTemplate>

Ficou faltando a página de Itens a ItemPage.xaml

O código abaixo foi retirado da própria página ItemPage.xaml, nela está o código utilizado para apresentar as informações sobre o produto, para ficar mais fácil veja as linhas 91-108 do código original do template.

Para remover os valores do template, exclua as linhas que estão em negrito abaixo.

<Grid VerticalAlignment=”Bottom” Background=”#EA1E2324″ Height=”65″ Margin=”0,0,0,26″ Grid.Row=”1″>

<StackPanel Orientation=”Vertical” Margin=”10,0,0,5″ HorizontalAlignment=”Left” VerticalAlignment=”Center”>

<TextBlock Text=”{Binding SubTitulo}” FontSize=”20″ FontFamily=”Segoe UI” HorizontalAlignment=”Left”/>

<StackPanel Orientation=”Horizontal” HorizontalAlignment=”Left” Margin=”0,10,10,0″ VerticalAlignment=”Center”>

<TextBlock FontSize=”12″ FontFamily=”Segoe UI” Text=”R$ ” VerticalAlignment=”Bottom” LineStackingStrategy=”BlockLineHeight” Margin=”0,0,3,0″/>

<TextBlock Text=”{Binding Valor}” TextWrapping=”NoWrap” FontFamily=”Segoe UI” FontSize=”30″ LineStackingStrategy=”BlockLineHeight” LineHeight=”22.667″/>

</StackPanel>

</StackPanel>

</Grid>

 4.4) Navegação entre páginas.

A navegação entre página nos aplicativos de Windows 8 o método Navigate da classe  Frame, este método recebe dois parâmetros, como podemos ver abaixo em sua assinatura.

public bool Navigate(Type sourcePageType, object parameter);

• Onde o Type sourcePageType, é o Tipo da classe da página que vamos navegar para. Lembra-se que todas as páginas de nossa aplicação são Classes!
• E object parameter de nosso método é o objeto que vamos passar de uma página para a outra.

Importante: O método Navigate, possui duas assinaturas, e o que isso quer dizer? Quer dizer que temos duas maneiras de navegar entre páginas, basicamente.

A segunda assinatura do método Navigate, não possui o segundo parâmetro. Assim, se for realizar uma navegação sem a necessidade de passar parâmetro o segundo parâmetro do método pode ser omitido.

Para saber qual o tipo da classe de nossa página, deve ser utilizado o operador typeof(<nome da classe>), o <nome da classe> é o nome da classe que vamos navegar.

Exemplo: Na página de HomePage.xaml, ao clicarmos em um item de nosso catálogo acessamos a página de itens a ItemPage.xaml e enviamos para a página o ID do item que recebeu o clique, o código responsável pela navegação segue abaixo.

this.Frame.Navigate(typeof(ItemPage), ((Item)e.ClickedItem).ID);

E vejam logo abaixo, como ficaria essa a mesma navegação se não tivéssemos que passar um parâmetro para a página de itens.

this.Frame.Navigate(typeof(ItemPage));

Como saber o nome da classe de sua página? O nome da classe fica disponível no arquivo com extensão .CS  de  C Sharp ou C#, prefiro a última .

Abra o arquivo .cs que está associado ao arquivo XAML, por exemplo, o arquivo CategoriaPage.xaml.cs

Logo no começo do arquivo vocês vão visualizar a definição da classe, veja o código abaixo.

public sealed partial class CategoriaPage : LayoutAwarePage

A parte em negrito logo a frente da palavra chave class é o nome da nossa classe.

Com isso já é possível navegar para páginas diferentes!

4.5) Alterando a cor da fonte do template.

Podemos alterar a cor da fonte de duas maneiras nos controles, utilizando a propriedade Foreground de um controle ou definindo/alterando um estilo que altera o valor da propriedade Foregorund e depois atribuir o estilo ao controles, caso o mesmo já não esteja em uso pelo controle em questão.

Como exemplo vou utilizar o templat 1, o template de catálogo eletrônico.

No template todos os controles que apresentam texto estão utilizando a cor de fonte branca, que a cor padrão do tema utilizado pelo Windows.

Vamos alterar o controle EmpresaNome que é um TextBlock, veja abaixo.

<TextBlock Name=”EmpresaNome” TextWrapping=”Wrap” Text=”Catálogo Eletrônico Contoso” FontFamily=”Segoe UI” FontSize=”24″ FontWeight=”Bold” />

Vou incluir a propriedade a propriedade Foreground, para alterar a cor da fonte para Azul.

<TextBlock Name=”EmpresaNome” TextWrapping=”Wrap” Text=”Catálogo Eletrônico Contoso” FontFamily=”Segoe UI” FontSize=”24″ FontWeight=”Bold” Foreground=”Blue”/>

As cores que podemos utilizar, pode ser definida utilizando um nome previamente definido como no exemplo acima, ou ainda utilizar um código Hexadecimal para definir o RGB assim como no HTML. Utilizando o código podemos também definir uma propriedade adicional que é o alfa.

Exemplo de definição da cor azul utilizando o código hexadecimal, no código as cores são compostas por 3 bytes cada um definindo uma componente de cor R = Red (vermelho), G = Green (verde) e B = Blue (Azul).

O intervalo para cada componente é de 0 – 255 em decimal ou de 0 – FF em Hexadecimal (base 16)

Foreground=”#0000FF”, este sem o Alfa. Defini somente a componente de cor azul e assim a cor resultante será predominantemente azul.

O código permite uma liberdade maior para definir cores.

O Alfa, que me referi anteriormente é um Byte adicional que é adicionado em frente ao Código RGB, ficando ARGB.

O valor também é de 0 – FF, sendo que quando 0 ficará completamente transparente e FF completamente visível.

Foreground=”#FF0000FF”, exemplo com o alfa em 100% e  Foreground=”#7F0000FF” já com 50% de visibilidade.

A outra maneira de alterarmos a cor da fonte de nosso aplicativo é utilizando classes de estilo, assim como no HTML. As classes de estilo, centralizam essas alterações facilitando uma possível mudança de tamanho de fonte, por exemplo, em todos os controle que utilizam a classe.

Continuando com o controle EmpresaNome, só que agora vamos criar uma classe para ele.

Abra o arquivo Common/StandardStyles.xaml  e crie uma classe chamada Teste, definindo as propriedades que gostaríamos que alterar para nos controles TextBlock que a utilizarem.

<Style x:Key=”Teste“  TargetType=”TextBlock”>

<Setter Property=”Foreground” Value=”Blue”/>

<Setter Property=”FontSize” Value=”24″/>

<Setter Property=”FontFamily” Value=”Segoe UI”/>

<Setter Property=”TextWrapping” Value=”Wrap”/>

<Setter Property=”FontWeight” Value=”Bold”/>

</Style>

Depois de criar nossa classe Teste, vamos utilizá-la no controle NomeEmpresa utilizando a propriedade Style.

<TextBlock Name=”EmpresaNome” Text=”Catálogo Eletrônico Contoso” Style=”Teste” />

4.6) Incluindo mais Categorias

Para incluir categoria no projeto de Catálogo é muito simples, basta que você copie e cole o arquivo XML da categoria dentro da pasta /Catalogo/Data/Categoria. Ficando atento a apenas ao ID utilizado pela Categoria e Pelos Itens, cada Categoria e Item deve possuir um ID único. Valor da Tag <ID> presente tanto na categoria quanto no Item.

Ao iniciar o aplicativo todos os arquivos serão processados e o layout vai apresentar as categorias com os seus respectivos itens.

Uma boa prática é alterar o ID da categoria respeitando o nome do arquivo, exemplo:  Categoria_3.xml e a tag <ID>3</ID> e para o item utilize  <ID>Cat3_1</ID> para o primeiro item <ID>Cat3_2</ID> para o segundo e assim por diante.

OBS.: Caso seja utilizado o mesmo <ID> para objetos diferentes, ao clicar em um item ou categoria será apresentado o objeto que for encontrado primeiro. Ou seja, pode ser apresentado o item que não foi clicado.

4.7) Incluindo Settings no Win8AppBox

O código para incluir opções de settings no templates Win8AppBox, fica no arquivo Common/LayoutAwarePage.cs.

Se abrirem esse arquivo, na lina 109 vai ter um método chamado AppBox_CommandsRequested, esse método é executado quando o usuário clica sobre o item Settings (configurações) da CharmBar.

void AppBox_CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)

Cada opção apresentada no settings é um objeto do tipo SettingsCommand, você pode ter quantas opções forem necessárias. Mas por melhores práticas não é bom abusar desse recurso.

//Criando o objeto SettingsCommand com a função que será executada.

SettingsCommand aboutCommand = new SettingsCommand(“aboutSettings”, “Sobre”, handler);

O código acima inclui a opção de sobre, já presente no código.

Para adicionar a opção de políticas de privacidade, por exemplo, deve ser incluído a seguinte linha logo abaixo.

SettingsCommand privacyCommand = new SettingsCommand(“privacySettings”, “Política de privacidade”, handler);

Com essa linha criamos um objeto do tipo SettingsCommand, agora temos que incluir a opção no settings.

args.Request.ApplicationCommands.Add(privacyCommand);

Após as alterações seu código ficará assim:

void AppBox_CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)

{

//definindo a função que será executada

UICommandInvokedHandler handler = newUICommandInvokedHandler(onSettingsCommand);

//Criando o objeto SettingsCommand com a função que será executada.

SettingsCommand aboutCommand = newSettingsCommand(“aboutSettings”, “Sobre”, handler);

//Criando o objeto SettingsCommand com a função que será executada.

SettingsCommand privacyCommand = newSettingsCommand(“privacyCommand”, “Política de Privacidade”, handler);

//Incluindo o objeto na lista de comandos da aplicação.

args.Request.ApplicationCommands.Add(aboutCommand);

args.Request.ApplicationCommands.Add(privacyCommand);

}

Se executar o aplicativo nesse momento, já vai ser possível visualizar o item de “Política de privacidade”

O próximo passo, é alterar a função que chama a página a ser apresentada, para tanto vamos atualizar o código do método onSettingsCommand. Que está logo abaixo do método anterior.

Nesse método temos esse trecho de código que é executado quando o id aboutSettings é enviado. Nós definimos esse valor no momento de criar o objeto do tipo SettingsCommand.

if (command.Id.ToString() == “aboutSettings”)

{

controle = newAboutControl();

title = “Sobre”;

}

Temos agora que incluir mais uma if, com o ID que acabamos de criar. Reparem que a classe PrivacyControl, não existe em nosso projeto.

if (command.Id.ToString() == “privacyCommand”)

{

controle = new PrivacyControl();

title = “Política de privacidade”;

}

Para funcionar temos que duplicar o controle AboutControl.xaml  e AboutControl.xaml.cs, para tanto selecionem os dois arquivos no Solution Explorer do Visual Studio, copiem e colem (CTRL + C e depois CTRL + V).

Você vai ter dois novos arquivos no seu projeto Copy of AboutControl.xaml e Copy of AboutControl.xaml.cs.

Renomeiem os arquivos para PrivacyControl.xaml e PrivacyControl.xaml.cs.

Em seguida abra o arquivo PrivacyControl.xaml.cs e altere tudo que tiver AboutControl para PrivacyControl.

Depois abra o outro arquivo PrivacyControl.xaml, na segunda linha do arquivo você vai verifica a seguinte linha

x:Class=”Win8AppBox.AboutControl

Altere essa linha para

x:Class=”Win8AppBox.PrivacyControl

E agora já tem o controle de privacidade funcional, agora deve alterar o conteúdo do arquivo uma vez que traz o mesmo conteúdo do AboutControl. Coloque um <TextBlock> igual a que temos nas página do templates e inclua o texto de política e privacidade.

Com isso concluímos nossa alteração

5) Gerar o pacote para a Windows Store.

Depois de realizar todas as alterações necessárias, temos que empacotar o nosso aplicativo para fazer upload para a Windows Store.

O processo para gerar o pacote, está em detalhes no vídeo 2 do AppDay http://channel9.msdn.com/posts/AppDay-Parte-2.

Algumas dicas:

1) Não deixem de alterar o tipo de execução por  padrão o Visual Studio utiliza o modo de Debug, e a Windows Store não permite que aplicativos sejam certificados no modo de debug.

2) Execute o Windows App Certification Kit (WACK) quando gerarem o  pacote de upload, o WACK faz parte da validação que é realizada na Windows Store, ou seja, se tiverem algum problema nesse ponto é possível corrigir e não perder tempo na submissão. Durante a execução deixem que o programa faça o teste sem ter interferência, o processo leva entre 6 – 10 minutos.

Imagens que devem ser informadas no Arquivo de Manifesto. Acesse a ferramenta Gerador de Imagens para gerar as imagens.

http://bit.ly/w8img

3) Quem estiver fazendo uso do Publisher, veja esse vídeo que faço os procedimentos para fazer o WACK e submeter o aplicativo http://channel9.msdn.com/posts/Realizando-o-WACK-e-submetendo-o-aplicativo-pelo-Publisher

6) Preenchimento do formulário de submissão.

O formulário é super importante é nesse ponto que temos que prestar atenção nos detalhes.

6.1) Detalhes da venda

• Deixe o valor, como gratuito/free. Lembra-se que essa é a sua primeira aplicação e o intuito aqui é aprender, depois que estiver familiarizado com o desenvolvimento de aplicativos para Windows 8 é a hora de começar a pensar na estratégia de comercialização.
• Escolha o Brasil como  mercado que vai ficar disponível o seu aplicativo.
• Escolha uma categoria/sub categoria que esteja de acordo com o conteúdo do seu aplicativo.

6.2) Recursos avançados (Advanced Features)

Nesse ponto não altere nada e clique em salvar.

Essa página é utilizada para realizar o In App Purchase uma forma de realizar monetização no aplicativo, e não estamos fazendo isso agora.

6.3) Faixa etária e certificados   (Age rating and rating certificates)

É importante que escolhemos a faixa etária de acordo com o conteúdo de nosso aplicativo, na maioria dos casos iremos utilizar  a opção “12+ Igual ou maior de 12 anos de idade” (12+ Suitable for ages 12 na older)

Em seguida clique em Salvar, já que não temos certificados para fazer upload.

6.4) Criptografia (Cryptography)

Como o nosso aplicativo não utiliza criptografia, responde a pergunta “Essa aplicação possui, suporta, ou utiliza criptografia?” (Does this app call, support, contain, or use cryptography or encryption?) com NÃO.

Em seguida clique sobre a caixa de verificação “Eu confirmo que este aplicativo será largamente distribuído…. ” e depois Salve.

6.5) Pacotes (Packages)

Faça upload do arquivo .appxupload gerado e testado pelo WACK (Windows Application Certification Kit), espere que o processo de upload termine antes de sair da página.

6.6) Descrição (Description)

1) Campo Descrição

Esse é um dos pontos mais importantes do formulário, é aqui que você vai fazer o papel de vendedor do seu aplicativo. O importante nesse passo é colocar na descrição  informações que sejam de valor para o usuário  que vai fazer download do aplicativo, sendo fiel as funcionalidades e conteúdo.

2) Campo Funcionalidades da app (App Features)

Inclua o seguinte texto: “Implementa Search, LiveTile e Share na página de itens.”

3) Telas do Aplicaitvo (ScreenShots)

Um bom aplicativo possui belas imagens “imagens falam mais que mil palavras”, no mundo de desenvolvimento de aplicativos essa máxima ganha ainda mais valor.

Coloque pelo menos duas imagens do aplicativo, não coloque todas as telas caso contrário o usuário não terá surpresas ao executar o aplicativo.

Coloque uma descrição sucinta em cada imagem do aplicativo.

4) Campo Hardware Recomendado

Pode deixar esse campo em branco, já que não precisamos de um hardware específico para rodar o aplicativo.

5)  Campo Palavra Chave (Keywords)

Inclua palavras que serão utilizadas na busca do seu aplicativo, pensando no tema que estão utilizando. Inclua pelo menos uma palavra.

6) Campo Direito de Cópia (Copyright)

Pode incluir algo como: “Todos direitos reservados à <seu nome>”

7) Termos de licença adicionais (Addtional License terms)

Pode deixar esse campo em branco.

8 ) Imagens promocionais

A loja pode colocar o seu aplicativo em Highlight (Destaque) de alguma categoria para isso é necessário incluir essas imagens.

Para esse primeiro aplicativo pode ficar sem imagens, nesse setor.

9) Informação de contato ( Support Contact Info)

Nesse campo de preferência inclua o endereço de sua página Web, se não tiver um blog por exemplo pode colocar o seu endereço de e-mail.

10) Política de privacidade (Privacy Policy)

Esse campo pode ficar em branco, pois não utilizamos internet em nosso aplicativo. Se o aplicativo de vocês utilizarem internet é OBRIGATÓRIO que seja informado uma URL com o texto da política de privacidade, além de informar no arquivo de manifesto que está utilizando a internet.

11) Notas para o testador (Notes to testes)

Pode salvar sem incluir nota para os testadores.

Esse campo é geralmente utilizado quando o aplicativo requer um usuário/senha para ser testado ou possui uma navegação fora do usual, o que não é o nosso caso.

Depois de salvar esse passo e todos os passos estiver com um Check de verificado, envie o aplicativo para certificação.

Se não tiver incluído o código de verificação, o processo não vai ser realizado.

Conclusão

O AppDay está só começando temos muito o que fazer e estamos de prontidão para ajuda-los, sejam resilientes! Vários obstáculos vão surgir no meio do caminho, vejam os artigos que tanto eu quanto o caverna estamos divulgando e nos sigam no Twitter e no Facebook para receber atualização sobre novos artigos e conteúdos relevantes.

Vejam também o artigo do Caverna: http://fernandomartin.azurewebsites.net/?p=7831

Abraço,

Vinícius

Nesse artigo vou ajudá-los a entender melhor o código dos templates do AppDay, apresentando algumas das novas funcionalidades do Windows 8 e o código

Os templates são um facilitador para o desenvolvimento de seu aplicativo principalmente em se tratando de layout, mas como tirar maior proveito dos templates do AppDay ou qualquer outro template que você possa vir a utilizar?

A dica aqui é ir fundo nas funcionalidades do templates, não ficando limitado em alterar apenas a fonte de dados do template, mas adicionando mais desafios aos poucos.

O template é um acelerador, para que você consiga trabalhar em um aplicativo para o Windows 8 funcional e aprender as principais mudanças que a plataforma Windows está entregando. Como a nova linguagem visual, o WinRT (Windows RunTime) e a Windows Store.

Veja o vídeo que traz os passos de alterar o templates de Catálogo Eletrônico para um aplicativo de Cup Cackes, http://channel9.msdn.com/posts/AppDay-Parte-3.

Os templates que estou me referindo estão disponíveis no Codeplex! O portal de código open source da Microsoft.

http://win8appdaytemplate1.codeplex.com/ - Catálogo Eletrônico

http://win8appdaytemplate2.codeplex.com/ - Dicas de viagens

http://win8appdaytemplate3.codeplex.com/ - Ferrari

http://win8appdaytemplate4.codeplex.com/ - Indiana Jones

http://win8appdaytemplate5.codeplex.com/ - Xbox Live

Basicamente os dois templates tem a mesma estrutura, mudando mais o layout e o finalidade de cada um deles. Não se prendam ao tema do template, e sim qual linguagem visual mais se adequa a forma que deseja expressar a sua ideia.

Ficarei focado no código,  apresentando um exemplo visual de uma funcionalidade do Windows 8 que o template implementa e onde você vai encontrar a sua implementação no código. Sem mais milongas vamos por a mão na massa!
1) Contrato de Search (ou simplesmente busca);
  O contrato de Search é importante por dois motivos:

1) Possibilita que o usuário encontre a informação que deseja.

Aplicativos com muito texto ou com muita granularidade na informação, pode trazer um certo grau de complexidade para o usuário encontrar o que deseja.

2) Entrega mais relevância ao aplicativo, dando ao desenvolvedor mais exposição no Windows.

Sempre que o usuário realizar uma busca no Windows 8 (WinKey + Q), uma lista será apresentada para o usuário com os aplicativos que possuem a o contrato de serach implementado e com isso o usuário pode executar o aplicativo a partir da busca, como apresentado na figura ao lado.

Para implementar o Contrato de Search no seu aplicativo, antes mesmo de escrever qualquer código temos que alterar o arquivo de manifesto (Package.appxmanifest) em nosso projeto. Ao abrir o arquivo de manifesto no Visual Studio, você verá 4 abas (Application UI, Capabilities, Declarations e Packaging) a opção que vamos alterar é a Declarations (declarações).

As declarações é a maneira de informar o Windows qual ou quais funcionalidade que o seu aplicativo utiliza.

Na aba Declarations teremos uma combo com todas a declarações disponíveis, escolha a opção Search e clique em Add (adicionar).

O próximo passo é alterar o arquivo App.xml.cs incluindo um novo método de ativação, que será executado quando o usuário clicar sobre o ícone da sua aplicação (caso ela não seja a aplicação ativa).  Abra o arquivo App.xml.cs do template e procure pelo método abaixo.

OnSearchActivated(Windows.ApplicationModel.Activation.SearchActivatedEventArgs args)

O método faz basicamente o mesmo procedimento do método OnLaunch (executado quando o usuário clica sobre o Tile do seu aplicativo), incluindo uma funcionalidade a mais que é a de executar o filtro antes de redirecionar o usuário para a página inicial, que para esse caso será a página ResultadoBusca.xml.

2) Contrato de Share Source;

Essa é uma funcionalidade do Windows 8 que mais gosto, pois possibilita uma maneira padronizada de comunicação entre os aplicativos que o usuário possui. Para tanto, é necessário que o aplicativo que deseja receber dados de outros aplicativos implemente outro contrato, o Share Target e o aplicativo que quer compartilhar implemente o contrato Share Source.

Nesse item vamos cobrir o Share Source que é o contrato implementado pelo template, esse contrato é um pouco diferente dos demais, uma vez que não é necessário adicionar no arquivo de manifesto a intenção de fazer o compartilhamento de dados.

Informamos o Windows que aplicação realiza compartilhamento de informação através da classe DataTransferManager, no template utilizo a classe DataTransferManager no detalhamento de um item arquivo ItemPage.xaml.cs.

A utilização da classe se dá no método OnNavigatedTo, este método é executado sempre que a página for aberta. Nesse método recupero uma instância da classe DataTransferManager através do método estático GetForCurrentView, depois que consigo a instância do objeto registro dois handlers (métodos que serão executados quando o evento ocorrer) DataRequested e TargetApplicationChosen.

protected override void OnNavigatedTo(NavigationEventArgs e)         {            

base.OnNavigatedTo(e);

// Register the current page as a share source.            

this.dataTransferManager = DataTransferManager.GetForCurrentView();            

this.dataTransferManager.DataRequested += new TypedEventHandler<DataTransferManager, DataRequestedEventArgs>(this.OnDataRequested);  

this.dataTransferManager.TargetApplicationChosen += dataTransferManager_TargetApplicationChosen;        

}

O evento DataRequested é executado quando ativamos o share do Windows (pelo charms, ou pela tecla de atalho WinKey+H), e o evento TargetApplicationChosen é executado em um segundo momento do share, quando o usuário seleciona a aplicação desejada para receber os dados que serão compartilhados. O Windows lista todas as aplicações que implementam o contrato de Share Target e que dão suporte para o tipo de dado compartilhado.

private void OnDataRequested(DataTransferManager sender, DataRequestedEventArgs e)

O método OnDataRequested recebe dois parâmetros sender e e, vamos utilizar o parâmetro e do tipo DataQuestEventArgs.

No template utilizo um método separado chamado GetShareContent para preencher os dados, mas também poderia fazer tudo dentro do próprio método OnDataRequested.

Verifiquem o conteúdo do método GetShareContent, com atenção ao seguinte código.

requestData.SetUri(new Uri(_baseUri, item.ImageUrl));

requestData.Properties.Title = string.Format(“{0} – {1}”, Win8CatalogApplication.Instance.Empresa.Nome, item.Nome);

 requestData.Properties.Description = item.Descricao;

 requestData.SetText(item.Descricao);

requestData.Properties.Thumbnail = imageStreamRef;

requestData.SetBitmap(imageStreamRef);

O objeto requestData é do tipo DataPackage e recebeu uma instância da propriedade DataRequestedEventArgs.Request.Data, as aplicações apresentadas pelo Windows estão diretamente vinculadas ao tipo de dados que preenchemos.

3) Live Tile;

Ter acesso ao conteúdo ou ao status do aplicativo sem ter que executar o aplicativo essa é a grande vantagem do Live Tile,

Acima temos um exemplo de uma App com a funcionalidade de Live Tile implementada, a primeira imagem apresenta o Tile do aplicativo quando desligamos o Live Tile e a segunda com o Live Tile habilitado.

Essa aplicação em questão é um Hub de fotos, a implementação do Live Tile apresenta algumas das fotos do aplicativo.

O Windows suporta vários tipos de Live Tiles tile template catalog , utilize aquele que melhor se adequar as suas necessidades.

No template é utilizada um Namespace chamado EnableLiveTile para criar os Live Tiles, utilize nos seus projetos

Este é o código utilizado pelo template para incluir o Live Tile

EnableLiveTile.CreateLiveTile.ShowliveTile(true, Win8CatalogApplication.Instance.Empresa.Nome);

4) App Bar;

A App Bar é um recurso utilizado acessar recursos/ou funcionalidades que são comuns durante todo o aplicativo, existe um documento bem completo explicando exatamente quando e como utilizar esse recurso, vale a pena dar uma conferida.

http://msdn.microsoft.com/pt-br/library/windows/apps/xaml/hh781231.aspx

No template utilizei a app bar para ajudar o usuário voltar para a home sempre que desejar, a App Bar pode ser utilizada no Topo da página como na figura ao lado ou na parte Inferior da página.

A App Bar é um componente visual e por isso é definido no XAML, abra o arquivo HomePage.xaml para verificar como utilizar.

<Page.TopAppBar>

<AppBar x:Name="TopApp" Padding="10,0,10,0" MinHeight="110" Background="#D1000000" BorderBrush="#D1000000">

           <Grid Height="100" Margin="40,0">

                 <StackPanel Margin="0" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left">

                     <Button x:Name="btnHome" HorizontalAlignment="Right" BorderBrush="{x:Null}" BorderThickness="0" FontWeight="Normal" VerticalAlignment="Stretch" Padding="0" Style="{StaticResource TopAppbarBtnStyle}" Click="btnHome_Click" >

                         <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Height="92" Margin="0" Width="92">

                             <Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/AppBarBtn/HomeappbarBtn.png" Width="92" Margin="0" Height="92"/>

                         </Grid>

                     </Button>

                 </StackPanel>

             </Grid>

       </AppBar>

</Page.TopAppBar>

5) Settings;

Para padronizar o local onde o usuário vai encontrar as configurações de um aplicativo, o Windows utiliza o Contrato de Settings.

Podemos definir as opções que teremos nas configurações de nosso aplicativo a qualquer momento, no template fiz uso do evento OnWindowCreated, na classe App (App.xaml.cs) que é executado sempre que uma nova janela for criada.

Neste método faço o registro do Handlers do evento que será executado quando o usuário clicar no ícone de settings da Charm Bar.

SettingsPane.GetForCurrentView().CommandsRequested += App_CommandsRequested;

No método App_CommandsRequested, vamos adicionar as opções que serão apresentadas para o usuário.

void App_CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)

Incluímos as opções utilizando a classe SettingsCommand, ao instanciar um objeto dessa classe devemos definir 3 (três) parâmetros ID, Texto e um handler que será executado quando o usuário clicar sobre a opção desejada. No template é utilizado o mesmo handler para todas as opções, e utilizamos o ID para identificar a opção que foi acionada.

UICommandInvokedHandler handler = new UICommandInvokedHandler(onSettingsCommand);

SettingsCommand aboutCommand = new SettingsCommand(“AU”, “Sobre”, handler);

args.Request.ApplicationCommands.Add(aboutCommand);

6) Snapped View.

O Snapped View permite que tenhamos dois aplicativos sendo executados ao mesmo tempo, com um espaço reduzido o aplicativo deve se adequar ao novo espaço não prejudicando a experiência do usuário.

Algumas páginas podem não ter uma representação no Snapped view, mas deve ser informado alguma informação para o usuário. Em alguns casos como em jogos, por exemplo, ao colocar no Snapped view é apresentado o placar com e o jogo é pausado.

No template utilizamos o controle VisualStateManager, este controle identifica o tipo de visualização que a aplicação está sujeita e executa alguns StoryBoard, trocando as propriedades de alguns controles.

Como exemplo de aplicação, vamos abrir o arquivo HomePage.xaml e procurar por VisualStateManager.

No template utilizamos o VisualStateManager para deixar a grid invisível e a lista de itens visível, alterando a propriedade da Visibility. No trecho de código a seguir, temos um exemplo de ambos os casos.

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>

</ObjectAnimationUsingKeyFrames>

Onde você pode evoluir?

1) Acessar uma fonte de dados externa.

A aplicação é de certa forma estática, uma vez que os dados por ela consumidos estão todos armazenados na aplicação, da maneira que foi desenvolvido o template você pode utilizar de um webservice (REST ) para realizar consultas, e por sua vez utilizar um backoffice para atualizar as informações apresentadas para os usuários.
O Windows Azure possui um serviço chamado Mobile Services, este serviço fornece uma infraestrutura com banco de dados e serviços REST que podem ser executados para fazer operações de CRUD.

OBS: Para consumir dados de fontes externas, é necessário incluir no arquivo de manifesto a utilização de internet, que por sua vez demanda a publicação da sua política de privacidade.
2) Utilização de notificação.

Ao deixar a aplicação com conteúdo dinâmico, talvez seja importante implementar a o serviço notificação, dessa forma o usuário vai receber notificações quando haver conteúdo novo disponível.

3) Incluir o pinning na aplicação.

O pinning de conteúdo permite que o usuário crie um acesso rápido direto para o conteúdo que deseja, assim ele consegue acessar o conteúdo diretamente pela Start Screen. Está é uma funcionalidade muito interessante e recomendada para ser implementada.

Conclusões

Existem várias maneiras de alterar o template e estender a sua funcionalidade, tenha uma experiência ponto-a-ponto com o template criando a sua App e submetendo-a  para a Windows Store e crie uma segunda versão, depois uma terceira e assim por diante.

Implementado aos poucos novas funcionalidades a cada nova versão, faça uso também do TFS – Team Foudation Service http://tfs.visualstudio.com/ gerenciando versões e bugs que seu aplicativo venha a apresentar.

Sejam perseverantes  e pacientes, às vezes ao primeiro contato as desafios parecem ser mais complicado do que realmente o são e você vera que a medida que for estudando e se aprofundando os conceitos vão se encaixando e os desafios clareando cada vez mais.

Abraço,

Vinícius.

http://channel9.msdn.com/posts/Webcast-A-Microsoft-mudou-e-est-mais-aberta

Abraço,

Vinícius.

A Microsoft, vai ajudá-lo! Como? Com esses templates disponíveis para HTML5/JS e XAML/C#.

Windows 8 App Design Reference Template: Basic Game
Windows 8 App Design Reference Template: Blocks
Windows 8 App Design Reference Template: Cook Book

A palestra foi muito legal, o público super interativo, espero outras oportunidades como esta.

Muitos pediram a minha apresentação, por isso ó link no meu Skydrive: https://skydrive.live.com/#!/view.aspx?cid=B8097FFEA1152756&resid=B8097FFEA1152756%211037&app=PowerPoint

Aproveitem e lembram-se:

Tudo que é grande hoje, teve um início simples….

Comece com um kit como que eu utilizei e depois vá além

Para quem perdeu ou quer ver as palestras do evento novamente! Seguem os vídeos.
General Session

Palestrante: Danilo Bordini e Fábio Gaspar

Convidados: Ivan Rosolen e Danilo Francisco Peres

http://channel9.msdn.com/Events/Windows-Camp/Windows-Dev-Camps-Brasil/lancWin8General

Trilha de Desenvolvimento

 Trilha de Design para Desenvolvedores

Trilha de Infraestrutura

 
h

Mais uma super novidade para vocês.

Conseguimos uma parceria com 3 MIC’s dos 12 existentes no Brasil, para funcionar como Publisher de Aplicativos para a Windows Store do Windows 8, são eles:

• MIC Fortaleza – mic@atlantico.com.br
• MIC Pernambuco – app@micpernambuco.com.br
• MIC Porto Alegre – apps.w8@pucrs.br

Se você não estiver familiarizado com esse termo fique tranquilo, que vou dar uma breve explicação sobre o termo.

Um Publisher, funciona como um facilitador para a submissão de apps na Windows Store.

Como vocês sabem para subir um aplicativo para a Windows Store e ficar disponível no Windows 8 é preciso ter uma conta de desenvolvedor. A conta de desenvolvedor custa R$ 80,00 para pessoa física e R$ 160,00 para pessoa jurídica.

O valor é pago utilizando um cartão de crédito, nacional mesmo! O que já é um MEGA facilitador… Mas mesmo assim, estudantes que pode não ter um cartão não vão ficar de fora do mercado de aplicativos do Windows 8. Pois podem utilizar os Publisher para publicar sem possuir a conta de desenvolvedor.

Mas como funciona o processo!? O processo é muito simples e está descrito abaixo, não tem mais desculpa para publicar a sua App.

OBS: Para utilizar o Publisher temos que enviar a solução do Visual Studio inteira (código fonte). Por que, ao fazer o pacote temos que fornecer a conta de desenvolvedor para vincular a app com o nome reservado. O aplicativo enviado deve estar de acordo com a Microsoft Public License (Ms-PL) veja aqui o licenciamento http://win8appbox.codeplex.com/license

1) Terminar a sua App

2) Envie um e-mail para um dos endereços acima, mencionando o interesse de publicar a sua aplicação.

3) O MIC vai retornar um e-mail com um formulário e o procedimento para submeter a sua App.

4) Preencha os campos com aquele cuidado… e faça upload do arquivo compactado da sua aplicação para o Skydrive (evitando possíveis problemas de retorno de e-mail, devido o tamanho do arquivo).

5) Responda o e-mail para o MIC com o formulário preenchido e o Link de acesso para o arquivo que fez upload no Skydrive (atenção a permissão de acesso ao arquivo no Skydrive).

6) O MIC vai submeter a sua App através da conta de desenvolvedor da Windows Store deles, e enviar o retorno do processo para vocês.
De sucesso (com o link da sua App)  
Ou de erro (com o feedback da Windows Store)

E pronto, sua App vai estar na Windows Strore!

Abraço,

Vinícius.

Seguem os links com os slides que utilizamos para apresentar os Webcasts.

http://www.slideshare.net/vbsbr/webcasts-calltoaction

http://www.slideshare.net/fabiohara/apps4win-prepara-seu-ambiente-para-o-windows-8

http://www.slideshare.net/vbsbr/desenvolvendo-a-sua-app-parte-1

http://www.slideshare.net/vbsbr/desenvolvendo-a-sua-app-parte-2

http://www.slideshare.net/vbsbr/desenvolvendo-a-sua-app-parte-3

Abraço,

Vinícius.

Teremos dois Webcasts um sempre às 12:00 e um segundo abordando o mesmo conteúdo às 22:00, a priori tentamos manter os Webcasts as terças e quintas, mas devido a feriados e agenda dos componentes fizemos algumas customizações.

O conteúdo do Webcast vai ficar disponível na mesma URL do webcast após o horário da disponibilização.

Para facilitar, peço que façam seus comentários neste artigo.

Abraço.

Vinícius.

Essa semana foi disponibilizado um kit de treinamento do Azure Mobile Service, com PPT’s comentados e código fonte de demonstração no GitHub.

https://github.com/WindowsAzure-TrainingKit-BR

O kit conta com script para demo e laboratório, em arquivos HTML. Agora ficou ainda mais fácil criar aplicativos Windows 8 conectado na Nuvem.

O responsável por esse Kit é Nick Harris, evangelista técnico da Microsoft.

Abraço,

Vinícius.