Mobile Web Appplications Development with HTML5


Lab 1: The Challenge


Claudio Riva

Aalto University - Fall 2012

The Challenge

Overview of the assignment

Way of Working

Teams

Devevelopment Environment

Course Examples

Congratulations!
You have been hired!
The Challenge

Build a Mobile Web App

  • Using some of the HTML5 API (e.g. canvas, local storage, websockets)
  • Using some of the mobile device features (e.g. GPS, camera, sensors)
  • Make it working on selected mobile devices
  • Using some client/server communication (e.g. REST, websockets)

Build it as a team

  • Work in sub-teams
  • One delivery
Schedule
  • 2 Nov : Kick-off
  • 30 Nov : Mid-term review
  • 17 Dec : Demo day (final review)
Evaluation Criteria
  • Functionality
  • Usability of the application (e.g. touch interactions)
  • Application design and code style
  • Extra credits for a PhoneGap version or additional achievements
Meet the customer
   

World provider for digital weather services

Our customer already has a website

Our customer already has mobile app for several platforms

 

Now they want a cool mobile web app based on HTML5

The Android App
Your current skills

Who knows the basic of Web Development ?

Who is proficient with Javascript ?

Who is proficient with CSS ?

Who has server-side development skills ?

Who knows Ruby and Ruby on Rails ?

Way of Working

All code, documentation and discussions on GitHub at: https://github.com/aaltowebapps/ForecaApp

  • Keep everyone informed
  • Branch often, merge asap, commit often
  • Comment on the pull requests
  • Don't be shy in the discussions
Everyone has the right (and obligation) to:
  • Commit code to master
  • Create a pull request before merging a big feature
  • Create and assign issues
The sub-teams

Small sub-teams are responsible for implementing the features

2-3 members for each sub-team

Sub-teams are responsible for
  • Concepting and designing a new feature
  • Creating a new branch
  • Implementing the feature
  • Creating a pull request
  • Merging with master
Some special roles
Key contact points for
  • Overseeing a particular area of the development
  • Status reporting
  • Initiating discussions
Roles:
  • Project manager
  • A UI designer
  • A client architect
  • A server architect
  • A quality manager
The Foreca API
Homework 1
  1. Create a Github account
  2. Send the account to me: clody69@gmail.com
  3. Clone: git@github.com:aaltowebapps/ForecaApp.git
  4. Start coding!
Homework 2
  1. Study the Foreca API
  2. Try to concept the Foreca Mobile Web App
    • Content
      • How to structure it ?
      • What's essential and what's not ?
      • How to present it on a small device and a tablet ?
    • Interaction
      • How will the user interact with the content ? For doing what ?
      • What about the navigation ?
      • How will it differ between a handheld device, tablet and PC ?
    • Mobility
      • What mobile capabilities can improve the experience ?
      • Geolocation ?
      • Sensors ?

Development Tools

Browsers & Emulators

HTML/CSS/JS/Ruby Editor

Git Client

Ruby

Browsers on PC

With debugging support (important)

Webkit-based browsers are recommended
  • Same engine used in most mobile devices
  • Good development tools
  • Google Chrome or Apple Safari
Alternatives:
Emulators and Remote Debugging
Code Editor

Any editor with support for HTML/CSS/JS

Aptana Studio (Win, Mac, Linux)

TextMate / TextWranger (Mac)

Notepad++ (Windows)

Git
Configuring Git for GitHub
Ruby

Ruby version 1.8.7 or later is required for course examples that have a server component

Bundler is also required

Check the instructions at the course examples git

/

#