Some terminology
================

The basic idea of a project is for the back end (Ouroboros) to send **subjects** to **users**, who will create one or more **annotations**, which are bundled into a **classification** and returned to the back end.

Getting set up
==============

The library is available in a private GitHub repo, zooniverse/Zooniverse. There are a couple branches; this document describes the **no-deps** branch, which is pretty similar to master, but has minimal dependencies and a couple more generic models.

We've been building apps in CoffeeScript, using Spine (spine/spine) as an MVC library and Hem (spine/hem) as a dev server/builder.

Let's use Spine.app to generate an initial framework for the app:

```
npm install --global spine.app
spine new Demo-Zoo
cd Demo-Zoo
npm install
```

Run `hem server --port 8080` and open **http://localhost:8080/** to make sure everything is running okay.

Now let's install the Zooniverse library:

```
npm install --save zooniverse
```

Edit **public/index.html** and remove the weird little "start" script that's there. Let's also **move the other script tags into the body** element so we don't have to wait for it to load every time we do something.

Add the top bar
===============

Now open up **app/index.coffee**. First we'll create a new API. We'll piggyback on the **planet_four** project for now. If there's a project set up on the back end, use its name here instead.

```
Api = require 'zooniverse/lib/api'
new Api project: 'planet_four'
```

Now we'll add the top bar first so we can log in.

```
TopBar = require 'zooniverse/controllers/top-bar'
topBar = new TopBar
topBar.el.appendTo document.body
```

We'll also have to tell Hem about the modules we're using by adding them to the "dependencies" array in **slug.json** and restarting the server. Add `zooniverse/lib/api` and `zooniverse/controllers/top-bar` now.

We also need to tell Hem about the base-64 library, which isn't an NPM module. Add `node_modules/zooniverse/vendor/base64.js` to the "libs" array in **slug.json**

Let's add the CSS, too. In **css/index.styl**, add:

```
@import "../node_modules/zooniverse/src/css/top-bar"
@import "../node_modules/zooniverse/src/css/dialog"
```

We should check to see if a user is already logged in when the page loads. Back in **app/index.coffee**:

```
User = require 'zooniverse/models/user'
User.fetch()
```

Don't forget to add `zooniverse/models/user` to your **slug.json**. Hem is fun.

Create the classification interface
===================================

We'll base this on Spine's `Controller` class. Check out the Spine docs if you're not familiar.

```
Spine = require 'spine'
Subject = require 'zooniverse/models/subject'
$ = require 'jqueryify'
Classification = require 'zooniverse/models/classification'

class Classifier extends Spine.Controller
  events:
    'change input[name="quality"]': 'onChangeAnnotate'
    'click button[name="next"]': 'onClickNext'

  constructor: ->
    super
```

When the user changes, we'll load a new subject. This is to keep users from seeing the same subject more than once. We can also check to see if the user has completed the tutorial.

```
    User.on 'change', (e, user) =>
      if user?.project.tutorial_done
        if @classification.subject.metadata.tutorial
          # A user is logged in and they've already finished the tutorial.
          Subject.next()
      else
        # Load the tutorial subject and start the tutorial!
```

When a new subject is selected, create a new classification to go with it and update the view in the classifier.

```
    Subject.on 'select', =>
      @classification = new Classification subject: Subject.current
      @render()

  render: ->
    @el.html """
      <img src='#{Subject.current.location.standard}' style="max-width: 200px;" />
      <label><input type="radio" name="quality" value="awesome" />Awesome</label>
      <label><input type="radio" name="quality" value="lame" />Lame</label>
      <button name="next">Next</button>
    """

  onChangeAnnotate: (e) ->
    value = $(e.target).val()

    # Update the classification when the user works the controls:
    @classification.removeAnnotation @classification.annotations[0]
    @classification.annotate quality: value
```

Usually we have an intermittent step directing people to Talk, but we'll skip that for this example.

```
  onClickNext: ->
    @classification.send()
    Subject.next()

classifier = new Classifier
classifier.el.appendTo document.body
```

Developing the library
======================

```
hub clone -p zooniverse/Zooniverse -b no-deps
cd Zooniverse
npm install
cake serve
mocha-phantomjs http://localhost:8000/test/runner.html
```

i18n
====

Each new language adds about 1.4kb gzipped. So we need to be careful about how many languages we add.