Game Store Codelab

Learn how to build a webapp with Dart and Polymer.

Introduction

The goal of this codelab is to develop a game store application. Users will be able to manage games in the store.
Don't worry, HTML templates are provided ;)

Try the live demo.

Important: Polymer.dart is in beta, and its API is subject to change. This code lab uses Polymer.dart version 0.12.0.

Prerequisites

Before you begin this codelab, you should have the last Dart Editor Setup ready.

Useful links

• A Tour of the Dart Language
• Dart API Reference
• Polymer.dart
• Polymer.dart examples

Templates

The Template HTML page is composed of three main template blocks

• GAME_TEMPLATE displays the content of a game
• GAMES_TEMPLATE displays a toolbar and the game list:
  • The toolbar allows to search, filter, sort games and switch between the templates below
  • GAMES_TEMPLATE_DETAILED displays the game list reusing the GAME_TEMPLATE
  • GAMES_TEMPLATE_COMPACT displays the game list with a compact template
• GAME_EDIT_TEMPLATE displays a form to edit a game

See the Live preview and the HTML source

User stories

This codelab is divided into the following sections:

1. Show the content of a game
2. Show the list of all games (detailed template)
3. Filter and sort the game list
4. Show the list of all games (compact template)
5. Edit the content of an existing game
6. Add a new game
7. Delete a game
8. Single-page application

Feedback

At the end, if you've got a few minutes, would you mind filling out an anonymous feedback form on the course so we can improve it in future?

Credits

• +Guillaume Girou, Dart Evangelist @Sfeir
• +Nicolas François, Dart Evangelist @Sfeir

Thanks to +DartlangFr team.
Thanks to +Thierry Lau. We took as example his AngularJS project AngularMovie.