Skip to content
This repository has been archived by the owner on Oct 6, 2021. It is now read-only.

Using dummy data with demo #1

Closed
jmomort opened this issue Aug 21, 2013 · 10 comments
Closed

Using dummy data with demo #1

jmomort opened this issue Aug 21, 2013 · 10 comments

Comments

@jmomort
Copy link

jmomort commented Aug 21, 2013

Arfon referred me to Zooniverse github as the place to get started in understanding the APIs etc. I am trying to work through this example application to understand how things work. Then, I plan to just modify this app to get a barebones demo of something we are interested in doing.

I have done the Spine contacts demo and have briefly glanced through the main models available through the Zooniverse API. However, I am a bit unclear with how these JSONP documents work and how one gets "Subjects". Do you have additional documentation on this? I would like to get the example running on my local machine instead of hitting a remote server to get more Subjects.

@arfon
Copy link

arfon commented Aug 21, 2013

Hi Jonathan

Unfortunately it's not possible to run in an entirely local mode without
having our API layer running also. It's an extremely involved process
getting this running so we ask that you develop against our test api at:
https://dev.zooniverse.org

For now to just try things out I'd suggest pulling Subjects from
https://dev.zooniverse.org/projects/worms/subjects . We should probably set
you up with a development project with some Subjects in to make this better
for you.

Cheers
Arfon

On Wed, Aug 21, 2013 at 6:44 PM, Jonathan Mortensen <
notifications@github.com> wrote:

Arfon referred me to Zooniverse github as the place to get started in
understanding the APIs etc. I am trying to work through this example
application to understand how things work. Then, I plan to just modify this
app to get a barebones demo of something we are interested in doing.

I have done the Spine contacts demo and have briefly glanced through the
main models available through the Zooniverse API. However, I am a bit
unclear with how these JSONP documents work and how one gets "Subjects". Do
you have additional documentation on this? I would like to get the example
running on my local machine instead of hitting a remote server to get more
Subjects.


Reply to this email directly or view it on GitHubhttps://github.com//issues/1
.

@jmomort
Copy link
Author

jmomort commented Aug 22, 2013

Arfon,

Is the demo application designed to use the worms project? I changed the project name and all the urls to the dev site, but I was still unable to get the demo completely working. I noticed the web application was checking for a directory called "offline". So, I downloaded the worm subjects JSON file and added it to this directory. With that added, the web application does seem to process the Subjects, downloading necessary resources, but then chokes after that, making me think these subjects aren't the right ones for the webapp? Unsure. What would you recommend for next steps? I'm still learning spine and the zooniverse APIs, maybe I am missing something obvious.

Thanks,
Jonathan

@arfon
Copy link

arfon commented Aug 22, 2013

Not explicitly but I expected it would. I think we need the assistance of one of the team here. @parrish or @brian-c can you advise?

Cheers
Arfon

@chrissnyder
Copy link

Hey Jonathan,

The app should only attempt to grab the offline subjects if it fails at accessing the API. Are you sure you set it to dev correctly? Could you post a few of the requests the app is attempting?

@brian-c
Copy link
Contributor

brian-c commented Aug 22, 2013

Sorry, the api-example project is hosed, since the cancer_gene_runner project has been destroyed.

The documentation in the front-end library itself is pretty good. Have you read through this?

https://github.com/zooniverse/Zooniverse/blob/no-deps/README.md

@jmomort
Copy link
Author

jmomort commented Aug 22, 2013

@chrissnyder I will take a look through the documentation first, now that I see it.

@brian-c Aha! Documentation! I was looking at the wrong branch :-)

I will get back after I read through all this.

Thanks,
Jonathan

@jmomort
Copy link
Author

jmomort commented Aug 23, 2013

Okay. I followed the tutorial and am still coming up blank. There do appear to be subjects for the planet_four project on the dev server, but the app seems to fail to grab them.

Here are the screenshots of the errors I'm getting from the Google Chrome debugger. (Not concerned about the image failed retrieval, I don't think)

-Network requests-
screen shot 2013-08-22 at 8 40 16 pm

-Javscript console-
screen shot 2013-08-22 at 8 39 44 pm

To me, it seems like there are two things going on that is causing it: Logging-in and the proxying functionality. I cannot exactly tease out what's happening in either of these.

Here is why my code is looking like so far

  1. app/controllers/Classifier.coffee
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
    Subject.next()
    @render()
    User.on 'change', (e, user) =>
      Subject.next()
      #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!


    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

  onClickNext: ->
    #@classification.send()
    console.log 'Sending classification'
    Subject.next()

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

module.exports = Classifier
  1. app/index.coffee
require('lib/setup')

Spine = require('spine')
Api = require 'zooniverse/lib/api'
new Api project: 'planet_four'

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

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

class App extends Spine.Controller
  constructor: ->
    super
     # Getting started - should be removed
    #@html require("views/sample")

module.exports = App
  1. slug.json
{
  "server": {
    "port"  : 9294
  },

  "routes": [
    { ""        : "./public" },
    { "/test"    : "./test/public" }
  ],

  "packages": {
    "appName": {
      "libs"    : ["lib/runtime.js","node_modules/zooniverse/vendor/base64.js"],
      "modules" : [
        "es5-shimify",
        "json2ify",
        "jqueryify",
        "spine",
        "spine/lib/local",
        "spine/lib/route",
        "spine/lib/manager",
        "zooniverse/lib/api",
        "zooniverse/controllers/top-bar",
        "zooniverse/models/user"
      ],
      "paths"  : ["./app"],
      "target" : "./public/application.js",
      "jsAfter": "jade.rethrow = function rethrow(err, filename, lineno){ throw err; } "
    },
    "css": {
      "paths"  : "./css",
      "target" : "./public/application.css"
    },
    "test": {
      "identifier" : "specs",
      "jsAfter"    : "require('lib/setup'); for (var key in specs.modules) specs(key);",
      "paths"      : ["./test/specs"],
      "target"     : "./test/public/specs.js"
    }
  }
}
  1. public/index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <title>App</title>
  <link rel="stylesheet" href="/application.css" type="text/css" charset="utf-8">
</head>
<body>
    <script src="/application.js" type="text/javascript" charset="utf-8"></script>
      <script type="text/javascript" charset="utf-8">
    var jQuery  = require("jqueryify");
    var exports = this;
    jQuery(function(){
      var App = require("index");
      exports.app = new App({el: $("body")});
    });
  </script>
</body>
</html>

Thanks for the assistance! I still have some learning to do.

Jonathan

@jmomort
Copy link
Author

jmomort commented Aug 27, 2013

What I learned:

  1. Coffeescript versions >= 1.6.2 can correctly generate sourcemaps, which make debugging a ton easier. Though, this won't work with Hem. Recent Chrome and Safari builds support sourcemaps in javascript debugging. Using the sourcemaps of spine.js + your own app is really nice.
    It would be cool to have a sourcemap for the single zooniverse-api javascript file. Maybe you can do this if you concat the coffescript files first instead of the resulting javascript files during the "build" task (in the Cakefile)?
  2. (You may have already encountered this) Chrome doesn't seem to like the proxy stuff that is going on, but the app works fine in Safari. Maybe it is my security settings or something.

You can close this :-)

@chrissnyder
Copy link

hem has been pretty unstable for us and I can't recommend using it for a project. There are alternatives though that accomplish much the same thing, plus source maps) such as http://brunch.io/ or https://github.com/brian-c/haw.

Closing!

@brian-c
Copy link
Contributor

brian-c commented Aug 27, 2013

Opened this issue: zooniverse/Zooniverse/issues/17

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants