2. Progress
UI
Finished Wireframes
Created Mockups
Decided on a color schemes
Icon Set is going through revisions
UI Implementation - translate Photoshop mockup to CSS
HTML structure & Django templates
REST API
Manipulate Tags
Manipulate Audio Objects
Details on our wiki[1]
3. Mockup
See our blog post on waveform behavior[2]
5. REST HTTP methods
Resource GET PUT POST DELETE
Replace the entire
Collection URI, such as List the collection's Create a new entry in Delete the entire
collection with another
http://example.com/resources/ members. the collection. collection.
collection.
Replace the addressed Treat the addressed
Retrieve addressed Delete the addressed
Element URI, such as member of the member as a collection
member of the member of the
http://example.com/resources/142/ collection, or if it doesn't and create a new entry
collection. collection.
exist,create it. in it.
6. REST HTTP methods
Resource GET PUT POST DELETE
Replace the entire
Collection URI, such as List the collection's Create a new entry in Delete the entire
collection with another
http://example.com/resources/ members. the collection. collection.
collection.
Replace the addressed Treat the addressed
Retrieve addressed Delete the addressed
Element URI, such as member of the member as a collection
member of the member of the
http://example.com/resources/142/ collection, or if it doesn't and create a new entry
collection. collection.
exist,create it. in it.
7. REST HTTP methods
Resource GET PUT POST DELETE
Replace the entire
Collection URI, such as List the collection's Create a new entry in Delete the entire
collection with another
http://example.com/resources/ members. the collection. collection.
collection.
Replace the addressed Treat the addressed
Retrieve addressed Delete the addressed
Element URI, such as member of the member as a collection
member of the member of the
http://example.com/resources/142/ collection, or if it doesn't and create a new entry
collection. collection.
exist,create it. in it.
8. REST in Concert
Easily modify Django models from the frontend
See our previous presentation on
Backbone.js[3]
9. But what does it all mean?
POST http://localhost:8896/api/1/request/
{"collection":"/api/1/collection/1/", "user":"/api/1/user/2/"}
{ "collection": "/api/1/collection/1/", "id": "1", "resource_uri":
"/api/1/request/1/", "status": "p", "user": "/api/1/user/2/" }
10. But what does it all mean?
GET http://localhost:8896/api/1/request/
[ { "collection": "/api/1/collection/1/", "id": "1", "resource_uri":
"/api/1/request/1/", "status": "p", "user": "/api/1/user/2/" } ]
11. How we do it.
###
# A collection join request. Should be deleted when action is taken.
###
class Request(models.Model):
...
user = models.ForeignKey(User)
collection = models.ForeignKey(Collection)
status = models.CharField(max_length=1, choices=REQUEST_STATUS_CHOICES, default='p')
...
12. How we do it.
###
# A collection join request. Should be deleted when action is taken.
###
class Request(models.Model):
...
user = models.ForeignKey(User)
collection = models.ForeignKey(Collection)
status = models.CharField(max_length=1, choices=REQUEST_STATUS_CHOICES, default='p')
...
tastypie
###
# This is the resource that is used for a collection request.
###
class RequestResource(MyResource):
user = fields.ForeignKey(UserResource, 'user')
collection = fields.ForeignKey(CollectionResource, 'collection', full=True)
status = fields.CharField('status', default='p')
...
13. How we do it.
###
# A collection join request. Should be deleted when action is taken.
###
class Request(models.Model):
...
user = models.ForeignKey(User)
collection = models.ForeignKey(Collection)
status = models.CharField(max_length=1, choices=REQUEST_STATUS_CHOICES, default='p')
...
tastypie
###
# This is the resource that is used for a collection request.
###
class RequestResource(MyResource):
user = fields.ForeignKey(UserResource, 'user')
collection = fields.ForeignKey(CollectionResource, 'collection', full=True)
status = fields.CharField('status', default='p')
...
/**
* A Collection object represents a django Collection object.
* @class
**/
var Collection = ConcertBackboneModel.extend({
...
/**
* When a user wants to join a collection.
**/
requestToJoin: function() {
var reqs = this.get('requests');
reqs.create({
user: com.concertsoundorganizer.page.user.url(),
collection: this.url()
});
}
...
14. How we do it.
###
# A collection join request. Should be deleted when action is taken.
###
class Request(models.Model):
...
user = models.ForeignKey(User)
collection = models.ForeignKey(Collection)
status = models.CharField(max_length=1, choices=REQUEST_STATUS_CHOICES, default='p')
...
tastypie
###
# This is the resource that is used for a collection request.
###
class RequestResource(MyResource):
user = fields.ForeignKey(UserResource, 'user')
collection = fields.ForeignKey(CollectionResource, 'collection', full=True)
status = fields.CharField('status', default='p')
...
/**
* A Collection object represents a django Collection object.
* @class
**/
var Collection = ConcertBackboneModel.extend({
...
/**
* When a user wants to join a collection.
**/
requestToJoin: function() {
var reqs = this.get('requests');
reqs.create({
user: com.concertsoundorganizer.page.user.url(),
POST http://localhost:8896/api/1/request/ collection: this.url()
{"collection":"/api/1/collection/1/", "user":"/api/1/user/2/"} });
}
...
16. Issues
class Tag(models.Model):
segments = models.ManyToManyField('AudioSegment', related_name = "tags")
collection = models.ForeignKey('Collection')
name = models.CharField(max_length = 100)
time = models.DateTimeField(auto_now_add = True)
creator = models.ForeignKey(User)
Old Way
Add URL: /add_segment_to_tag
Delete URL: /delete_segment_from_tag
17. Issues
class Tag(models.Model):
segments = models.ManyToManyField('AudioSegment', related_name = "tags")
collection = models.ForeignKey('Collection')
name = models.CharField(max_length = 100)
time = models.DateTimeField(auto_now_add = True)
creator = models.ForeignKey(User)
New Way
Client send a PUT Request /api/tag/<tag_id>/ Backend UPDATES the tag
(Wants to add an audio segment to a given tag)
object instance
(HOW AND WHAT DID IT UPDATE?)