5pm to 8pm in The Shed Main Room

(See the schedule)

To get the best out of your team, everyone needs to know the basics. In this workshop, we'll be taking you through a Single Page Web Application, hosted on GitHub Pages.

DON'T FORGET TO BRING YOUR OWN LAPTOP (Mac or PC)

Here's a rough guide to what we'll be doing:

Goal: Understanding the basics of a Single Page Web Application.

Prerequisites:

1. Backgrounder
2. GitHub Desktop
3. Firefox Browser - allows CORS for the file:// scheme (Chrome doesn't)

Stuff to look at: We know that you are all at different stages in your understanding of SWPAs. Choose where you are in the list below: we'll group you together with others doing the same stuff.
Observe and make changes to the code to give yourselves an idea of what is going on.
Help each other; when you're ALL stuck, stick your hand up and we'll come along!

1. Forking Urban Wild
2. Hosting on GitHub Pages
   • run your forked project on GitHub pages
3. Running the site locally
   • What is a 'scheme'?
   • What is CORS?
4. JAM (Javascript, APIs, Markup language)
   • What is JAM?
   • Hmm. I'd like to learn some more
   • Wow. This stuff is amazing!
5. Javascript is unsecured
   • Why?
   • More about web application security
6. Anatomy of the WildLogging application
   1. What? You mean I have to read stuff?
   2. Starting the app - index, app
      • index.html - defines all scripts which will be used in the app
      • app.js - top level of the app defines top level module and sub-modules
   3. Modules, app states
      • module definition provides a route to a set of VMC resources
   4. Views (Templates), Controllers
      • Templates (HTML, CSS) provide the view layout
      • Controller provides the access to the data Model, which the view will display
   5. Services
      • Singleton resources which are accessed commonly by controllers, and provide a globally accessible resource
   6. More?
7. Concepts
   1. HTML and CSS
      • What's so great about HTML??. Ho ho! :-D
   2. AngularJS
      • What's so great about AngularJS?
   3. $scope and VM
      • $scope - the glue between view and controller
      • vm is a more structured $scope
   4. Data Binding
      • AngularJS: HTML elements in the view can be bound to variables in the controller and will automatically update when their value changes.
   5. REST and APIs
      • I refer you to... this!
   6. JSON
      • original and best
      • more practical?
      • parsing, formatting help?
   7. Promises
      • AngularJS Promises are supplied by $q
      • or..
   8. Directives
      • AngularJS defines its own directives, and you can too
      • deeper dive?
   9. AngularJS deepdive
8. Fix our code?
   • There are lots of things wrong with WildLogging. Fix 'em and send us a pull request - if we like it, we'll take it, and attribute the fix to you. Good for your portfolio. Win-win.