Shazam to Spotify - spike/demo web project
0 likes5,218 views
This document describes a web application called Shazam to Spotify that converts a user's Shazam music listening history into a Spotify playlist. The application uses AngularJS for the frontend, Silex microframework and Guzzle HTTP client for the backend, and runs on an Ubuntu server with Nginx and PHP-FPM. It utilizes test-driven development, continuous integration with Travis CI, and design patterns like MVC. The application parses a user's uploaded Shazam history file, searches the Spotify API to get metadata for each song, and generates a JSON response to populate the Spotify playlist view.
Shazam to Spotify - spike/demo web project
- 1. Shazam to Spotify web demo project Converting a Shazam history in a Spotify playlist. Fabio Mora - http://fabio.mora.name
- 2. Live at http://shazam2spotify.techeffe.net Source at https://github.com/morafabio/shazam2spotify/ Try it by downloading a sample Shazam history. Fabio Mora - http://fabio.mora.name
- 3. Fabio Mora - http://fabio.mora.name
- 4. Technologies ● Frontend ○ Twitter Bootstrap 3 ○ AngularJS ● Backend ○ PHP5.4 ○ Silex - a web microframework based on Symfony2 ○ Guzzle - a HTTP client for consuming web services ● Server ○ ○ ○ ○ A small cloud VPS Ubuntu 12.04 nginx php-fpm Fabio Mora - http://fabio.mora.name
- 5. Coding notes ● C.R.C. cards ○ I started with those to clarify myself the domain model ● T.D.D. ○ I used Test Driven Development ■ ■ Karma is used for JS unit testing PHPUnit is used for unit and integration tests ● Covered by end to end tests ○ Selenium is used for functional tests ● Continuous Integration ○ Travis CI is used as CI server https://travis-ci.org/morafabio/shazam2spotify Fabio Mora - http://fabio.mora.name
- 6. Coding notes ● Git as version control system ○ And hosted on GitHub https://github.com/morafabio/shazam2spotify/ ● Bash scripting ○ Repetitive tasks and builds are automated https://github.com/morafabio/shazam2spotify/tree/master/scripts ● Dependency managers ○ Composer for PHP ○ Bower for JS ○ NPM for Karma ● Design Patterns ○ Factory, Proxy, Mediator, Decorator (from the GoF) ○ Dependency Injection ○ MVC Fabio Mora - http://fabio.mora.name
- 7. How it works 1. A file is uploaded to the server service via POST ● https://github.com/morafabio/shazam2spotify/blob/master/public/js/app.js#L9-L24 2. The controller handle the request ● https://github.com/morafabio/shazam2spotify/blob/master/public/service/app.php#L20-L41 3. The parser filters the input file ● https://github.com/morafabio/shazam2spotify/blob/master/src/Shazam2Spotify/Shazam/History.php#L27-L39 4. Domain object are generated: playlist and songs ● https://github.com/morafabio/shazam2spotify/tree/master/src/Shazam2Spotify/Common 5. Each song in the playlist is parsed ● https://github.com/morafabio/shazam2spotify/blob/master/src/Shazam2Spotify/Service/Locator.php#L24-L33 6. The Spotify Metadata API is consumed ● https://github.com/morafabio/shazam2spotify/blob/master/src/Shazam2Spotify/Spotify/Metadata.php 7. The response is sent back in JSON ● https://github.com/morafabio/shazam2spotify/blob/master/src/Shazam2Spotify/Common/Playlist.php#L24-L33 8. The view is rendered by the controller ● ● https://github.com/morafabio/shazam2spotify/blob/master/public/js/filters.js https://github.com/morafabio/shazam2spotify/blob/master/public/index.html#L66-L83 Fabio Mora - http://fabio.mora.name
- 8. Thanks! Fabio Mora - http://fabio.mora.name