Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Build your first Spotify App

Build your first Spotify App

Alvaro Navarro

January 24, 2022
Tweet

More Decks by Alvaro Navarro

Other Decks in Technology

Transcript

  1. Build your first
    Spotify App
    Le Wagon Tokyo
    01/24/2022
    Alvaro Navarro
    [email protected]

    View full-size slide

  2. Who am I?
    Alvaro Navarro
    Developer Advocate

    View full-size slide

  3. What is
    Spotify for Developers?

    View full-size slide

  4. developer.spotify.com

    View full-size slide

  5. Allow to control playback from your mobile app
    iOS/Android SDKs

    View full-size slide

  6. Widgets
    Embeddable view of a track, artist, album, user,
    playlist, podcast or episode for use within your web
    project

    View full-size slide

  7. A client-side JavaScript library to create a new
    Spotify Connect player on your browser.
    Web Playback SDK

    View full-size slide

  8. Web API
    RESTful APIs
    +70 endpoints to fetch metadata about music, artists,
    albums or tracks
    Allows to interact with user data, playlists and
    playback
    Authentication with OAuth 2.0

    View full-size slide

  9. What can I do with
    Spotify for Developers?

    View full-size slide

  10. iPod.js
    github.com/tvillarete/ipod-classic-js

    View full-size slide

  11. Winampify
    github.com/remigallego/winampify

    View full-size slide

  12. Radionewify
    https://radionewify.com/

    View full-size slide

  13. Setify
    https://setify.co/

    View full-size slide

  14. Artist Explorer
    github.com/fsahin/artist-explorer

    View full-size slide

  15. MagicPlaylist
    https://magicplaylist.co/

    View full-size slide

  16. …we create our own
    recommendation App?

    View full-size slide

  17. Build our first Spotify App
    - What is Spotify API
    - Web API Authorization
    - Make our first API call
    - Build a simple recommendation app
    - Next steps
    Agenda

    View full-size slide

  18. Spotify Web API

    View full-size slide

  19. Spotify Web API

    View full-size slide

  20. Spotify Web API
    - API Reference
    - API Console

    View full-size slide

  21. Spotify Web API
    Fetch Spotify catalog info
    - Search and browse Spotify's catalog of artists, albums, tracks,
    podcasts, etc.
    - Rich metadata available: from album cover images to track
    danceability
    - 30 seconds preview URIs can be retrieve

    View full-size slide

  22. Spotify Web API
    Control Playback
    - See what's playing on your Spotify account and on which device
    - Start or stop playback, queue up tracks or podcast episodes, seek
    within a track or adjust playback volume

    View full-size slide

  23. Spotify Web API
    Manage your Spotify account
    - Create or edit playlists, save tracks and episodes, and upload
    playlist cover art
    - Follow or unfollow artists and other Spotify users

    View full-size slide

  24. Spotify Web API
    Retrieve analytics and recommendations
    - Produce a set or recommendations given a set of seeds
    - Retrieve your recently played tracks, and top tracks in the short and
    long term

    View full-size slide

  25. Web API Authorization

    View full-size slide

  26. Web API Authorization
    Process of granting an application access permissions to Spotify data.

    View full-size slide

  27. Web API Authorization
    Three recommended options
    - Authorization Code Flow
    - Authorization Code Flow with PKCE
    - Client Credentials Flow
    OAuth 2.0 allows you to fetch an access token that you'll need to call the API.

    View full-size slide

  28. Web API Authorization
    When to use each flow?
    - Authorization Code Flow: long-running apps on the server
    - Authorization Code Flow with PKCE: mobile apps or front apps
    - Client Credentials Flow: daemon/cli running on the backend

    View full-size slide

  29. Web API Authorization
    Authorization Code Flow
    Request
    Authorization
    App
    Authorization
    code

    View full-size slide

  30. Web API Authorization
    Coding time!

    View full-size slide

  31. Web API Authorization
    Authorization Code Flow
    Request Access
    Token
    App
    Access Token
    Authorization
    Code

    View full-size slide

  32. Web API Authorization
    Coding time!

    View full-size slide

  33. First API call

    View full-size slide

  34. Web API Authorization
    Authorization Code Flow
    API call
    App
    Data
    Access Token

    View full-size slide

  35. Web API Authorization
    Coding time!

    View full-size slide

  36. Recommendation app

    View full-size slide

  37. Build our first Spotify App
    Idea

    View full-size slide

  38. Web API Authorization
    Coding time!

    View full-size slide

  39. Next steps
    - Code improvements
    - Integrate Web Playback SDK + Player APIs to play music within the browser
    - Improve the seed/input for the recommendation algorithm

    View full-size slide

  40. Thank you!
    @spotifyplatform
    developer.spotify.com

    View full-size slide