Mobile Web Appplications Development with HTML5

Lab 6: Learning Device APIs

Claudio Riva

Aalto University - Fall 2012

The results of last challenge
  • Maciej and Matias (time tracking)
  • Raul and Niklas (time tracking)
  • Simo and Alvaro (time tracking)
  • Jeremy and Rowshan (design + some code)
  • Laura and Nam (design)
  • Learn Device APIs the Hard Way

    Overview of the challenge (10min)

    Group exercise (1:30)

    Feedback at 11:45 (15min)

    The Challenge
      Build a webapp that uses location, canvas and accelerometers
      Try to complete the 7 tasks
      Commit the code to your GitHub repo
      Win the challenge
    Drawing App
    • 5 use cases
      1. App detects the user location and prints the coordinates on the canvas
      2. User draws on the canvas by moving the phone
      3. User takes a snapshot of the canvas and save locally
      4. User posts a snapshot of the canvas to own server or online service (e.g. Flickr)
      5. App adds a background photo taken from Instagram based on user's location
    • Delivered through a web server or just as a set of files
    1. Design of the app (paper)
    2. Detect location of the user
    3. Print the lat/lng on the canvas
    4. Draw on the canvas using the accelerometers
    5. Save locally and/or post a snapshot of the canvas to the server
    6. Fetch a recent photo from Instagram based on the user's location
    7. Set the photo as a background in the canvas (will taint the canvas)
    Draw Text on canvas
    ctx.fillText(text, x, y [, maxWidth ] )
    Instagram Cheat Sheet
    Publish to GitHub

    Publish the design and code to your GitHub repo

    Last commit is by next Monday.