SlideShare uma empresa Scribd logo
1 de 8
Baixar para ler offline
Shazam to Spotify
web demo project
Converting a Shazam history in a Spotify playlist.

Fabio Mora - http://fabio.mora.name
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
Fabio Mora - http://fabio.mora.name
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
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
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
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
Thanks!

Fabio Mora - http://fabio.mora.name

Mais conteúdo relacionado

Mais procurados

KDE Plasma Develop Intro
KDE Plasma Develop IntroKDE Plasma Develop Intro
KDE Plasma Develop Intro
csslayer
 

Mais procurados (11)

"fireap" - fast task runner on consul
"fireap" - fast task runner on consul"fireap" - fast task runner on consul
"fireap" - fast task runner on consul
 
Python in a real life
Python in a real lifePython in a real life
Python in a real life
 
Pharo 8.0 (alpha) and more
Pharo 8.0 (alpha) and morePharo 8.0 (alpha) and more
Pharo 8.0 (alpha) and more
 
Raspberry pi Part 26
Raspberry pi Part 26Raspberry pi Part 26
Raspberry pi Part 26
 
Front Page of Hacker News with GitLab Pages
Front Page of Hacker News with GitLab PagesFront Page of Hacker News with GitLab Pages
Front Page of Hacker News with GitLab Pages
 
Mothra - A FreeBSD send-pr tool for bugzilla system
Mothra - A FreeBSD send-pr tool for bugzilla systemMothra - A FreeBSD send-pr tool for bugzilla system
Mothra - A FreeBSD send-pr tool for bugzilla system
 
Heroku & Sinatra
Heroku & SinatraHeroku & Sinatra
Heroku & Sinatra
 
KDE Plasma Develop Intro
KDE Plasma Develop IntroKDE Plasma Develop Intro
KDE Plasma Develop Intro
 
Type script新鮮貨報你知
Type script新鮮貨報你知Type script新鮮貨報你知
Type script新鮮貨報你知
 
Embedding Chromium into AGL demo platform with WAM
Embedding Chromium into AGL demo platform with WAMEmbedding Chromium into AGL demo platform with WAM
Embedding Chromium into AGL demo platform with WAM
 
Having fun with Raspberry(s) and Apache projects
Having fun with Raspberry(s) and Apache projectsHaving fun with Raspberry(s) and Apache projects
Having fun with Raspberry(s) and Apache projects
 

Semelhante a Shazam to Spotify - spike/demo web project

使用Eclipse快樂的mruby開發
使用Eclipse快樂的mruby開發使用Eclipse快樂的mruby開發
使用Eclipse快樂的mruby開發
yamanekko
 
TriplePlay-WebAppPenTestingTools
TriplePlay-WebAppPenTestingToolsTriplePlay-WebAppPenTestingTools
TriplePlay-WebAppPenTestingTools
Yury Chemerkin
 
Chef on SmartOS
Chef on SmartOSChef on SmartOS
Chef on SmartOS
Eric Saxby
 

Semelhante a Shazam to Spotify - spike/demo web project (20)

Deployment tales
Deployment talesDeployment tales
Deployment tales
 
Deployment tales
Deployment talesDeployment tales
Deployment tales
 
Fuzzing softwares for bugs - OWASP Seasides
Fuzzing softwares for bugs - OWASP SeasidesFuzzing softwares for bugs - OWASP Seasides
Fuzzing softwares for bugs - OWASP Seasides
 
Magento 2 performance profiling and best practices
Magento 2 performance profiling and best practicesMagento 2 performance profiling and best practices
Magento 2 performance profiling and best practices
 
TYPO3 Flow - Web Sockets
TYPO3 Flow - Web SocketsTYPO3 Flow - Web Sockets
TYPO3 Flow - Web Sockets
 
使用Eclipse快樂的mruby開發
使用Eclipse快樂的mruby開發使用Eclipse快樂的mruby開發
使用Eclipse快樂的mruby開發
 
CloudOpen North America 2013: Vagrant & CFEngine
CloudOpen North America 2013: Vagrant & CFEngineCloudOpen North America 2013: Vagrant & CFEngine
CloudOpen North America 2013: Vagrant & CFEngine
 
Bodin - Hullin & Potencier - Magento Performance Profiling and Best Practices
Bodin - Hullin & Potencier - Magento Performance Profiling and Best PracticesBodin - Hullin & Potencier - Magento Performance Profiling and Best Practices
Bodin - Hullin & Potencier - Magento Performance Profiling and Best Practices
 
Panther loves Symfony apps
Panther loves Symfony appsPanther loves Symfony apps
Panther loves Symfony apps
 
SaaS Boilerplate.pptx
SaaS Boilerplate.pptxSaaS Boilerplate.pptx
SaaS Boilerplate.pptx
 
ENIB 2015-2016 - CAI Web - S01E01- La forge JavaScript
ENIB 2015-2016 - CAI Web - S01E01- La forge JavaScriptENIB 2015-2016 - CAI Web - S01E01- La forge JavaScript
ENIB 2015-2016 - CAI Web - S01E01- La forge JavaScript
 
Mitmproxy usage v20141216
Mitmproxy usage v20141216Mitmproxy usage v20141216
Mitmproxy usage v20141216
 
ENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScript
ENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScriptENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScript
ENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScript
 
Using VIM for PHP/Symfony development
Using VIM for PHP/Symfony developmentUsing VIM for PHP/Symfony development
Using VIM for PHP/Symfony development
 
TriplePlay-WebAppPenTestingTools
TriplePlay-WebAppPenTestingToolsTriplePlay-WebAppPenTestingTools
TriplePlay-WebAppPenTestingTools
 
Argocd up and running
Argocd up and runningArgocd up and running
Argocd up and running
 
Scalable Django Architecture
Scalable Django ArchitectureScalable Django Architecture
Scalable Django Architecture
 
Running Symfony
Running SymfonyRunning Symfony
Running Symfony
 
Android Platform Debugging and Development
Android Platform Debugging and DevelopmentAndroid Platform Debugging and Development
Android Platform Debugging and Development
 
Chef on SmartOS
Chef on SmartOSChef on SmartOS
Chef on SmartOS
 

Mais de Fabio Mora

2009 - Quotidiana Legalità
2009 - Quotidiana Legalità2009 - Quotidiana Legalità
2009 - Quotidiana Legalità
Fabio Mora
 

Mais de Fabio Mora (20)

Esperimenti Kanban: tra economia e teoria delle code.
Esperimenti Kanban: tra economia e teoria delle code.Esperimenti Kanban: tra economia e teoria delle code.
Esperimenti Kanban: tra economia e teoria delle code.
 
La Unix Way vista da un DevOps
La Unix Way vista da un DevOpsLa Unix Way vista da un DevOps
La Unix Way vista da un DevOps
 
We don't talk about Agile anymore
We don't talk about Agile anymoreWe don't talk about Agile anymore
We don't talk about Agile anymore
 
A quick introduction: Extreme Programming
A quick introduction: Extreme ProgrammingA quick introduction: Extreme Programming
A quick introduction: Extreme Programming
 
Quick Introduction: Extreme Programming
Quick Introduction: Extreme ProgrammingQuick Introduction: Extreme Programming
Quick Introduction: Extreme Programming
 
Progressive Feature Rollout
Progressive Feature RolloutProgressive Feature Rollout
Progressive Feature Rollout
 
It was just Open Source - TEDx Novara
It was just Open Source - TEDx NovaraIt was just Open Source - TEDx Novara
It was just Open Source - TEDx Novara
 
2009 - Quotidiana Legalità
2009 - Quotidiana Legalità2009 - Quotidiana Legalità
2009 - Quotidiana Legalità
 
The Crossword Game
The Crossword GameThe Crossword Game
The Crossword Game
 
Continuous Delivery di una WebApp - by example
Continuous Delivery di una WebApp - by exampleContinuous Delivery di una WebApp - by example
Continuous Delivery di una WebApp - by example
 
L’elefante nella stanza! [con LiquidO™] - Codemotion 2014
L’elefante nella stanza! [con LiquidO™] - Codemotion 2014L’elefante nella stanza! [con LiquidO™] - Codemotion 2014
L’elefante nella stanza! [con LiquidO™] - Codemotion 2014
 
L’elefante nella stanza! [con LiquidO™]
L’elefante nella stanza! [con LiquidO™] L’elefante nella stanza! [con LiquidO™]
L’elefante nella stanza! [con LiquidO™]
 
Tanti "piccoli rilasci" con Symfony2
Tanti "piccoli rilasci" con Symfony2Tanti "piccoli rilasci" con Symfony2
Tanti "piccoli rilasci" con Symfony2
 
LinuxDay 2009 - Quali programmi?
LinuxDay 2009 - Quali programmi?LinuxDay 2009 - Quali programmi?
LinuxDay 2009 - Quali programmi?
 
LinuxDay 2009 - Cos'è Linux?
LinuxDay 2009 - Cos'è Linux?LinuxDay 2009 - Cos'è Linux?
LinuxDay 2009 - Cos'è Linux?
 
Se “Embrace Change” è difficile.
Se “Embrace Change” è difficile.Se “Embrace Change” è difficile.
Se “Embrace Change” è difficile.
 
If "Embrace Change" is Hard (@milano-xpug)
If "Embrace Change" is Hard (@milano-xpug)If "Embrace Change" is Hard (@milano-xpug)
If "Embrace Change" is Hard (@milano-xpug)
 
Perchè Agile? Cambiamenti culturali work in progress.
Perchè Agile? Cambiamenti culturali work in progress.Perchè Agile? Cambiamenti culturali work in progress.
Perchè Agile? Cambiamenti culturali work in progress.
 
cambiare punto di vista
cambiare punto di vistacambiare punto di vista
cambiare punto di vista
 
CoderDojo - Galliate, 20 aprile 2013
CoderDojo - Galliate, 20 aprile 2013CoderDojo - Galliate, 20 aprile 2013
CoderDojo - Galliate, 20 aprile 2013
 

Último

Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
kauryashika82
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
heathfieldcps1
 

Último (20)

Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
 
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
 
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
 
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
 
SECOND SEMESTER TOPIC COVERAGE SY 2023-2024 Trends, Networks, and Critical Th...
SECOND SEMESTER TOPIC COVERAGE SY 2023-2024 Trends, Networks, and Critical Th...SECOND SEMESTER TOPIC COVERAGE SY 2023-2024 Trends, Networks, and Critical Th...
SECOND SEMESTER TOPIC COVERAGE SY 2023-2024 Trends, Networks, and Critical Th...
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
PROCESS RECORDING FORMAT.docx
PROCESS      RECORDING        FORMAT.docxPROCESS      RECORDING        FORMAT.docx
PROCESS RECORDING FORMAT.docx
 
Class 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfClass 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdf
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17
 
Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdf
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
 
Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot Graph
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and Mode
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
 

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