Mobile Web Appplications Development with HTML5
Lab 1: The Challenge
Aalto University - Fall 2012
Overview of the assignment
Way of Working
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
- 2 Nov : Kick-off
- 30 Nov : Mid-term review
- 17 Dec : Demo day (final review)
- Usability of the application (e.g. touch interactions)
- Application design and code style
- Extra credits for a PhoneGap version or additional achievements
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
Who knows the basic of Web Development ?
Who is proficient with CSS ?
Who has server-side development skills ?
Who knows Ruby and Ruby on Rails ?
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
- Commit code to master
- Create a pull request before merging a big feature
- Create and assign issues
Small sub-teams are responsible for implementing the features
2-3 members for each sub-teamSub-teams are responsible for
- Concepting and designing a new feature
- Creating a new branch
- Implementing the feature
- Creating a pull request
- Merging with master
- Overseeing a particular area of the development
- Status reporting
- Initiating discussions
- Project manager
- A UI designer
- A client architect
- A server architect
- A quality manager
- Create a Github account
- Send the account to me: email@example.com
- Clone: firstname.lastname@example.org:aaltowebapps/ForecaApp.git
- Start coding!
- Study the Foreca API
Try to concept the Foreca Mobile Web App
- How to structure it ?
- What's essential and what's not ?
- How to present it on a small device and a tablet ?
- 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 ?
- What mobile capabilities can improve the experience ?
- Geolocation ?
- Sensors ?
Browsers & Emulators
With debugging support (important)Webkit-based browsers are recommended
- Same engine used in most mobile devices
- Good development tools
- Google Chrome or Apple Safari
- Firefox + Firebug
- Opera Mobile Emulator
- Apple Xcode emulator
- Safari + Remote Web Inspector (for iOS6 onwards)
- Safari ( iWebInspector )
Opera Mobile Emulator + Dragonfly
Remote Debugging on Firefox for Android
Firefox and Fennec
Adobe Edge Inspect $$$
Any editor with support for HTML/CSS/JS
Aptana Studio (Win, Mac, Linux)
TextMate / TextWranger (Mac)
- Install Git with Homebrew (see instructions on GitHub course examples)
- Git OSX Installer
- GitHub for Mac
- Use package manager (sudo apt-get install git-core)
See GitHub instructions https://help.github.com/articles/set-up-git  Steps:
- Install a Git client
- Set up a SSH key
- Set up your info
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