Building a Mobile Application using a Web Framework

In this assignment you are going to use a web framework to build a single page application (SPA).

All of your applications resources will be included the first time a user visits your website and navigation will be handled by JavaScript though your frameworks routing module.

Your application should be responsive and smooth with a modern look and feel.

Design for a Phone First!

Since we are working with web technologies you will hear the term responsive a lot.

Responsive means that your website will adapt whether it is run on a phone, tablet, or desktop.

DO NOT focus on this when building your assignments, design for a phone, that is what Salehen and I will be using to mark your assignments.

Testing Your App

Make sure your app works on a iPhone 5 / Nexus 5 "ish" device. i.e. buttons are clickable and the viewport is sized so that when you look at it on a phone you can read the text etc...

Application Domains and Ideas

  • Quiz / Survey App
  • Interactive Lesson (code, design, etc...)
  • Data Viz App (selectable data sets / views / filters)
  • Modelling Application (character builder, wizard, etc)
  • ??? (please ask Salehen or myself)

Design

  • Modern look and feel
  • Modern UX afforances
  • Proper navigation flow
  • Proper feedback
  • Correct use of icons and typography
  • Correct use of animations
  • Performs well (smooth transitions, scrolling, animations etc...)
  • The user should not get stuck, or be unaware of what's happening at any point in your application!

Technical

  • Use a web framework (Angular, React, Ember, Backbone, etc...)
  • Use a routing module provided by or added to your framework
  • Single Page App (all resources delivered in one request)
  • Multiple views + navigation (i.e. home, view1, view2, settings, ...)
  • Navbar / toolbar / menu
  • User input + feedback
  • Animations (button feedback or transitions)
  • Some logic algorithm (i.e. parsing / calculating results, filtering data)

Where are those cool examples you emailed us?

Directives and Animations Routes and Params Data Sharing and HammerTime

What does my app have to be able to run on?

Your app should be live on a gh-pages branch of a github repo. Salehen and myself will be using Google Chrome for Android (same as iOS) on a Nexus 5 and One Plus One.

How do I support a mobile layout and properly size my CSS pixels?

Read This and then test on a phone or use Chrome developer tools (see below).

How can I test my app?

You can use Google Chrome's developer tools to emulate mobile devices and even network speeds. Click the little phone icon in the top left to start emulation.

Do I have to support touch gestures?

That's up to you and your app design.

How much content should I have?

Keep it fairly small and focus on showing off some clean application logic (i.e. handling user input and displaying results through a controller and view template) and ABSOLUTELY FOCUS on design and ux. Your app should look and run REALLY WELL.

Do I have to worry about my app running on other browsers? Tablets? Desktop?

No.

What do you mean single page app?

Using a web framework and a routing module your app should never leave the original index.html. Read up on this.

Do I have to compress, gzip, uglify etc...

Only if you are running a pre-processor on less, sass, jsx, etc... You app should run live on gh-pages, i.e. only js, css, html are supported.

How should I keep everything organized?

Follow the file structure your framework prescribes, or use the following basic structure: 

   app/
     index.html
     js/
       controller1.js
       ...
     css/
       main.css
       ...
     img/
       ...
     bower_components (or libs) /
       ...

Breakdown

  • Presentation / Design Rationale: 3%
  • Milestone: 1%
  • Performance + Usability: 3%
  • Code + Requirements: 3%

General Expectations

  • Scoped and focused topic
  • Well reasoned and presented in terms of design and technical decisions
  • Completed, running app with no design or technical flaws

Group Size Expectations

  • 1 Person 75%
  • 2 People 100%
  • 3 People 125%

Suggested Milestones

  • Week 1: Find a partner(s) and idea for app
  • Week 2: Setup framework, models and views
  • Week 3: Add application logic
  • Week 4: Finalize application