Apresentando o SuperQuiz

Description

Por Vinícius Souza

Microsoft Technical Evangelist

O SuperQuiz é um jogo de Quiz para Windows 8 para Metro Style, desenvolvido em C#, que utilizou como base o template grid, disponível no Visual Studio 2012 RC.

O propósito deste jogo é servir como um primeiro contato para programadores e designers com o novo modelo de programação, introduzido com o Metro Style no Windows 8. E nada mais legal do que ter o primeiro contato com uma aplicação funcional.

Desenvolvemos o SuperQuiz  em XAML e C# pela facilidade que temos de desenvolver em C#, mas o mesmo jogo poderia ser desenvolvido em HTML5 e JavaScript.

Faça download do projeto acessando o link: http://supermetroquiz.codeplex.com/ abra o projeto e acompanhe o artigo.

Veja abaixo o projeto do SuperQuiz:

Generic Episode Image

Pastas e seus conteúdos

Para facilitar o entendimento do  projeto vou descrever o que você vai encontrar a cada item do projeto.

1. Properties

Abrindo este item você vai encontrar o arquivo AssemblyInfo.cs - neste arquivo, configuramos as opções para configuração do Build (compilação), tais como nome da empresa, versão, descrição, etc.

Este arquivo só está presente em projetos do tipo Windows e não é exclusividade do Metro Style. 

2. References

Na pasta References você vai encontrar todas as referências que o SuperQuiz necessita para ser compilado e executado. Este projeto não faz uso de nenhuma referência específica, mas sim as padrões para todos os projetos C# para o Windows 8 Metro Style.

.NET for Metro Style apps

Windows

3. Assets

Na pasta Assets,  você vai encontrar os recursos utilizados pela aplicação. Para este projeto encontraremos todas as imagens usadas pela aplicação, como as diferentes opções de logo (utilizadas na aplicação), imagens de fundo e até mesmo as (imagens) utilizadas pelo conteúdo da aplicação.

4. Common

O diretório Common possui classes e estilos XAML que simplificam o desenvolvimento da aplicação.

Lá encontramos a definição da classe LayoutAwarePage, que é a (classe) base para todas as páginas do nosso projeto.

O arquivo de estilo StandardStyle.xaml, possui as definições dos estilos utilizada na diagramação visual do projeto.

5. SuperQuiz

Neste diretório encontramos as classes de controle, modelo, utilitários, as views e os arquivos XML de conteúdo. Veja na imagem abaixo:

SuperQuiz namespace

 Generic Episode Image

6. App.xaml

O arquivo é utilizado para definirmos os estilos utilizados pela aplicação (StandardStyle.xaml e QuizStyle.xaml) e o nome da aplicação.

A sua classe, App.xaml.cs especifica o comportamento da aplicação estendendo a classe básica Application. Nesta classe, controlamos o ciclo de vida da aplicação.

7. CategoryPage.xaml

Esta página da nossa aplicação apresenta os quizes de uma categoria. É apresentada quando clicamos sobre o título de uma categoria na página HomePage.xaml.

8. HomePage.xaml

Este arquivo é a página de hub de nosso conteúdo - é a primeira página que o usuário visualiza ao entrar na aplicação.

9. Package.appxmanifest

O arquivo de manifesto, como é conhecido, é utilizado pelo sistema operacional para identificar quais as funcionalidades que sua aplicação está utilizando (definindo as Capabilities e Declarations).

O arquivo de manifesto também é utilizado para definirmos as imagens de logo que a aplicação faz uso, e como sua aplicação é visualizada na store.

Cada um dos aspectos que o arquivo de manifesto configura está disponível por uma aba no editor. Para visualizá-lo, clique duas vezes sobre o arquivo de manifesto.

Package Manifest

 Generic Episode Image

10. QuizPage.xaml

Esta página é apresentada quando clicamos sobre um Quiz na página de Hub (homepage) ou na página de categoria (CategoryPage).

Ela traz uma breve descrição sobre o quiz e utiliza o controle FlipView para navegarmos entre os Quizes de uma categoria.

11. QuizPlayPage.xaml

Página que apresenta a pergunta e as alternativas do Quiz – nela é implementado o contrato de share.

12. SearchResults.xaml

Apresenta o resultado da pesquisa, quando o contrado de busca é utilizado. Esta página possui a mesma estrutura da HomePage, alterando apenas a fonte de dados utilizada para apresentar o resultado.

 

Navegação

Agora que você conhece os componentes do projeto SuperQuiz, vou apresentar a navegação do aplicativo. Conhecer como e quando cada página é apresentada vai ajudá-lo a customizar a aplicação.

Abaixo, apresento as imagens com as principais telas da aplicação. Aqui não estou incluindo o SplashScreen comum para todas as aplicações Metro Style.

Página

Descrição

 Generic Episode Image

HomePage.xaml

 

Apresenta as categorias com alguns quizes que a compõem. Esta é a página de entrada da aplicação.

 Generic Episode Image

CategoryPage.xaml

 

A página é apresentada ao clicar no botão com o nome da categoria na HomePage.

Ela apresenta a imagem da categoria e os quizes que possui.

 Generic Episode Image

QuizPage.xaml

 

Página de apresentação do Quiz - possui a imagem que identifica o Quiz e uma breve descrição de seu conteúdo.

Na AppBar, há o botão para iniciar o Quiz.

Pode ser acessada em três momentos: na HomePage, na CategoryPage ou, ainda, na SearchResults.

 Generic Episode Image

QuizPlayPage.xaml

 

Aqui é apresentada a Pergunta do Quiz e suas alternativas.

Acessamos esta página quando clicamos no botão iniciar.

 

Lógica do aplicativo

A lógica do SuperQuiz está dividida em duas classes do namespace SuperQuiz.Logic - a classe QuizApplication e a QuizPlay.

A classe QuizApplicaiton é responsável por carregar os arquivos XML de categoria e quiz, registrar o comandos de configurações (Settings), Sobre (About), e  popular a estrutura de dados  de busca.

Já a classe QuizPlay é responsável por controlar o game de Quiz propriamente dito.

QuizApplication Class

 Generic Episode Image

O método responsável por ler os arquivos XML e popular o modelo de dados é o InternalLoad. Esse método lista todos os arquivos com a extensão .xml da pasta SuperQuiz\Assets\Categories, populando o dicionário de categorias.

Veja abaixo o código utilizado por popular as categorias:

var appCategoriesFolder = await Windows.ApplicationModel.Package.Current.InstalledLocation.GetFolderAsync(@"SuperQuiz\Assets\Categories");

var quizCategoriesQuery = appCategoriesFolder.CreateFileQueryWithOptions(new QueryOptions(CommonFileQuery.OrderByName, new string[] { ".xml" }));

foreach (var item in await quizCategoriesQuery.GetFilesAsync())
{
   try
   {
      var category = await ObjectPersister.LoadAsync<QuizCategory>(item.Path, ObjectPersisterLocation.Path);
      if (category.Quizzes == null)
      {
         category.Quizzes = new ObservableCollection<Quiz>();
      }
      CategoryDictionary[category.UniqueId] = category;
      QuizCategories.Add(category);
   }
   catch { }
}

 A próxima etapa do código é carregar o arquivos de Quiz - veja o código abaixo:

var appQuizzesFolder = await Windows.ApplicationModel.Package.Current.InstalledLocation.GetFolderAsync(@"SuperQuiz\Assets\Quizzes");

var quizFilesQuery = appQuizzesFolder.CreateFileQueryWithOptions(new QueryOptions(CommonFileQuery.OrderByName, new string[] { ".xml" }));
foreach (var item in await quizFilesQuery.GetFilesAsync())
{
   try
   {
      var quiz = await ObjectPersister.LoadAsync<Quiz>(item.Path, ObjectPersisterLocation.Path);
      foreach (var question in quiz.Questions)
      {
         question.Quiz = quiz;
      }
      QuizDictionary[quiz.UniqueId] = quiz;
      if (CategoryDictionary.ContainsKey(quiz.CategoryUniqueId))
      {
         CategoryDictionary[quiz.CategoryUniqueId].Quizzes.Add(quiz);
      }
   }
   catch { }
}

Quando não existir arquivos xml, o método cria uma estrura de categorias e quizes executando o método QuizDataSource.GenerateSampleQuizzes().

As categorias populadas são posteriormente atribuídas para a propriedade DefaultViewModel, no método LoadState da página. Veja abaixo o código da página HomePage:

protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)
{
   this.DefaultViewModel["Categories"] = QuizApplication.Instance.QuizCategories;
}

Conclusões

Neste artigo foi apresentado o exemplo de um jogo de quiz de uma aplicação Windows 8 Metro Style.

Essa aplicação implementa as principais funcionalidades de um aplicativo, e será uma base para o seu aprendizado.

Navegue no código, familiarize-se com a estrutura do aplicativo e inclua breakpoints para entender seu funcionamento.

The Discussion

  • Miguel Costacosta

    777Não to conseguindo baixar o SuperQuiz. :(

  • Valdir

    Onde está o link para baixar o aplicativo?

  • fenix2002

    Clique no link- http://supermetroquiz.codeplex.com/" target="_blank">http://supermetroquiz.codeplex.com, depois v[a ateh SOURCE CODE e depois DOWNLOAD

  • Miguel Costa

    Obg!!! fenix2002.

  • Gilberto Martini

    Baixem o source code, que está funcional, pois não tem release oficial.
    abs.

  • Adriano Rodrigues

    ola, bom dia!
    sou novo no assunto.
    baixei o source code, como faço para velo? preciso de algum aplicativo?

  • Yuri

    Cara não consigo baixar esse trem... como faz?

  • Elvis Rodrigues

    Muito Show!

  • Julio Lima

    Os fontes não estão disponíveis na guia Source. O que eu faço?

  • Julio Lima

    Para quem não conseguiu fazer download no link indicado, como eu, encontrei o material em outro link. Não sei se este material é oficial, porém estou conseguindo utilizar para não parar meu estudo do curdo do MVA. Não sou responsável por este material. Aqui abriu dando alguns problemas relatando que não era possível se conectar ao controle de versão. Segue o link:

    http://supermetroquiz.codeplex.com/releases/view/93478

  • tecnoged

    Olá!

    Estou usando o Visual Studio Express 2012. Ao baixar o projeto, não consigo abrí-lo por incompatibilidade.

    Alguem pode ajudar-me?

    Obrigado, antecipadamente.

    Sebastião Alves dos Santos

Comments closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums, or Contact Us and let us know.