ListenToItLater Final Year Project presentation

Web App project which allows SoundCloud tracks (and YouTube in the future) to be collected in playlists to 'Listen to them later'.
Similar to Instapaper/Pocket but for new free online music.
EDIT:
New URL http://listentoitlater.co

Transcript

1. Listen It Later Gianfranco Palumbo C08793573 DT228-4 BSc in Computer Science 30th April 2012 Single Page Web Streaming Application which Aggregates Content Across Online Audio Distribution Platforms
2. 2 Project Background - More people listen to music online via streaming services and not buying or downloading. ie Spotify and Grooveshark - Many don’t buy digital files or pay for an online subscription for unlimited music.
3. 3 - Many free services are ad supported showing massive banners - or with 30 secs or more like radio ads (Spotify coming soon to Ireland)
4. 4 Project Background (2) Many people come in contact with new music from streaming services like YouTube and SoundCloud. How do they keep a track of what song you like? Listen It Later comes into place helping anyone who wants to keep all their New free online audio tracks from different streaming services.
5. 5 • Primarily for Music Playlist • Single User Experience • Focus on Curation of Playlists Project Overview - Idea from Read It Later and Instapaper but for specific to New Online Music - Bookmarklet for easily adding audio tracks into any playlist
6. 6 Why Desktop Web Browser Platform? • HTML5 • Very performant JavaScript engine • Devices capabilities and compatibilities • Mobile or Tablet? • data plans still expensive • battery life still not good enough - The current web browser technologies have evolved greatly in the last few years. - HTML5, very most popular, by adding new HTML tags, Cascading Style Sheets (CSS3) and cross-platform JavaScript APIs. - Big move forward to standardise browsers to create a better experience for users and enabling web developers to build more interactive and dynamic websites. - Unfortunately when speaking specifically of HTML5 audio and video compatibility between browsers, there is a big divide about codec support and other issues. These will be further discussed in subsequently.
7. 7 The leading social sound platform SoundCloud reaches 10 Million Registered Users (Jan 2012) JUNE 2011 http://soundcloud.com/press/releases/2012/01/23/ten-million June 2011 = 5 million, 2012 = 10 million!
8. 8 Introduction • HTML5 • AJAX (Asynchronous JavaScript) • JavaScript libraries for UI • Python Web Framework (Flask) • Database (MongoDB, NoSQL) • the reasoning is on the next slides - The project utilises modern browser technologies (HTML5 and AJAX) to collect audio and video content from different platforms such as YouTube and SoundCloud into playlists. - Flask a Python Web Framework - MongoDB, a NoSQL database. (next slides)
9. 9 Old Design
10. 10 Old Design jQuery SoundCloud player called Stratus and CSS framework Bootstrap
11. 11 New Design
12. 12 New Design SoundManager2 for audio across all browsers Knockout JS jQuery Sammy etc
13. 13 with JS libraries Technical Architecture Technical Architecture
14. • Online Streaming Platforms APIs • YouTube and SoundCloud • HTML5 vs Flash • Amazon Web Services • NoSQL Database (MongoDB) 14 Technical Architecture - Flash is better for Audio streaming in compatibility across browsers - NoSQL in a traditional Relational model, many tables usually equates to many joins for queries. Denormalising therefore is the opposite of the goal of a modern distributed database. - Adobe Flash Player runs in all major Desktop browsers
15. 15 HTML5 vs Flash HTML5 Audio element compatibility chart Codecs When can I use... Support tables for HTML5, CSS3, etc, http://caniuse.com/#feat=audio
16. 16 HTML5 vs Flash Codecs / Audio file formats Script Junkie | Native Audio with HTML5 http://msdn.microsoft.com/en-us/magazine/hh527168.aspx
17. 17 Why? - Several advantages when using NoSQL and MongoDB - One of the most practical, which were encountered while on work experience, occurs when switching from of Python programming and then returning to SQL, it can become difficult to remember the syntax of even simple queries. - A single command the JSON string that contains all the playlists and recordings within, is returned by traversing the database User and parsing all the fields and dereferencing the embedded documents.
18. 18 Logical Data Model High level Logic Data Model for NoSQL data-store - Object-Document Mapper (ODM) similar to an ORM that connects Python with MongoDB. - The diagram represents various documents (or tables) which themselves contain other documents. - For example: a user will have many playlists.
19. 19 1.{ "_id" : ObjectId( "4f63d24e3e9" ), 2. "username" : "username", 3. "date_logged_in" : Date( 1332112304827 ), 4. "date_registered" : Date( 1331941966716 ), 5. "email" : "email@domain.com", 6. "pw_hash" : "sha1$GYp6QeSf$fb44a91913824", 7. "playlists" : [ 8. { "tags" : [], 9. "default" : false, 10. "title" : "Rock", 11. "recordings" : [ 12. { "$ref" : "recording", 13. "$id" : ObjectId( "4f666c203e8" ) }, 14. { "$ref" : "recording", 15. "$id" : ObjectId( "4f666c203e9" ) } ], 16. }], 17.} MongoDB Data Modelling MongoDB User Document Sample of a MongoDB User Document
20. 20 Software Methodology - Prototyping and iterative development - The fact that a single person developed this project signifies that the software development process has been adapted and simplified - A methodology is very much needed because it provides a structure that imposes on the development of any software project - Why RAD? Flexibility and Adaptability Agile and XP have a focus on groups A disadvantage of RAD does not emphasise on the strategic system needs. The risk is that the system might work well in the short term, but not on the long-term objectives
21. 21 RESTful API design Resource GET read POST create PUT replace DELETE delete /api/user/me /api/user/me/ playlists /api/user/me/ playlists/id /api/ recordings /api/ recordings/id /api/tags get the current user object not implemented as such update current user details (from the settings window) (not yet implemented) not enabled get the current user’s playlists when creating a new playlist, they are all instead sent as PUT request update all the user playlists delete all playlists (not enabled) get a single current user’s playlist not implemented update a single current user playlist, creating one if necessary (not implemented) delete a single playlist (not enabled) get all recordings based on tag, creation date, sorting, etc not implemented not enabled not enabled get a single recording by it’s id create a new recording (not implemented) not implemented not enabled get all the tags, sorted, not implemented not enabled not enabled Representational State Transfer (REST) is an architectural style - or "pattern" - guiding on the architecture of web services. Like "Ajax" itself, "REST" is a broad term and can be broken down into many smaller patterns. REST is centred around two basic principles: - Resources as URLs A resource is something like a "business entity" you wish to expose as part of an API. Almost always, the entity is a noun, e.g. a person, a car, or a football match. Each resource is represented as a unique URL. - Operations as HTTP methods. REST leverages the existing HTTP methods, particularly GET, POST, PUT, and DELETE, identified by the W3C HTTP Specification Why? For future Mobile app implementation
22. 22 Social Login Social login, enables sign-on using existing login information from a social networking service such as Facebook or Twitter to sign into a third party website in order to create a new login account specifically for that website. Designed to simplify logins for end users as well as provide more and more reliable demographic information to web developers, thought such information is not been stored in the application.
23. 23 Testing & Evaluation Web Page Performance Network Utilisation Error handling Versioning
24. 24 Internet Explorer 8 Internet Explorer 9 Google Chrome 16 Google Chrome 17 Mozilla Firefox 10 Mozilla Firefox 11 Audio Reproduction UI loading UI consistent Login and Account creating windows are displayed Scrolling and sections appear visible correctly Yes with Flash** Yes with HTML5 Yes with Flash or HTML5 Yes with Flash or HTML6 Yes with Flash or HTML7 Yes with Flash or HTML8 No* Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Testing & Evaluation Web Page Performance Network Utilisation
25. 25 Usability Questionnaire 9 questions Lazar HCI Design Principles
26. 26 75% 25% Disagree - Neutral - Agree N/A Summary Report 9 questions
27. 27 • Design for good User Experience • Learn how does a NoSQL Database works • Learn how JavaScript Frameworks work • Make it Browser-Compatible (including Internet Explorer) Challenges - Neilsen Heuristics - Usability testing tools - I learned Python
28. 28 Bookmarklet Work done after submission - add audio tracks with one click from other websites (demo)
29. 29 • Add more platforms (ie. YouTube) • Fix bugs • Improve the landing screen • Keep improving general UX Future Work -
30. • David Carroll • Susan Mckeever • Dan Barry 30 Thanks to
31. • Try it at: • http://listenitlater.com • @gianpaj • gianpa (at) gmail (dotcom) • Links to all the other social networks: • http://about.me/gianpaj 31 Listen It Later