1. Initial Presentation
February 25, 2010

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]

4. Representational State Transfer
(REST) API
Interface for manipulating resources over HTTP

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/"} });
}
...

15. Issues
Concert Events
&
Many-To-Many Relationships

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?)

18. Solution
Custom Nested
Resources

19. Solution
/api/tag/<tag_id>

20. Solution
/api/tag/<tag_id>
/api/tag/<tag_id>/audio_segment/<audio_seg_id>

21. Thanks & Questions
Especially to Graylin...