Build your first Spotify App

Transcript

1. Build your first Spotify App Le Wagon Tokyo 01/24/2022 Alvaro Navarro alvaron@spotify.com
2. Who am I? Alvaro Navarro Developer Advocate
3. What is Spotify for Developers?
4. developer.spotify.com
5. Allow to control playback from your mobile app iOS/Android SDKs
6. Widgets Embeddable view of a track, artist, album, user, playlist, podcast or episode for use within your web project
7. A client-side JavaScript library to create a new Spotify Connect player on your browser. Web Playback SDK
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
9. What can I do with Spotify for Developers?
10. iPod.js github.com/tvillarete/ipod-classic-js
11. Winampify github.com/remigallego/winampify
12. Radionewify https://radionewify.com/
13. Setify https://setify.co/
14. Artist Explorer github.com/fsahin/artist-explorer
15. MagicPlaylist https://magicplaylist.co/
16. What if…
17. …we create our own recommendation App?
18. 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
19. Spotify Web API
20. Spotify Web API
21. Spotify Web API - API Reference - API Console
22. 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
23. 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
24. 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
25. 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
26. Web API Authorization
27. Web API Authorization Process of granting an application access permissions to Spotify data.
28. 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.
29. 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
30. Web API Authorization Authorization Code Flow Request Authorization App Authorization code
31. Web API Authorization Coding time!
32. Web API Authorization Authorization Code Flow Request Access Token App Access Token Authorization Code
33. Web API Authorization Coding time!
34. First API call
35. Web API Authorization Authorization Code Flow API call App Data Access Token
36. Web API Authorization Coding time!
37. Recommendation app
38. Build our first Spotify App Idea
39. Web API Authorization Coding time!
40. Next steps
41. Next steps - Code improvements - Integrate Web Playback SDK + Player APIs to play music within the browser - Improve the seed/input for the recommendation algorithm
42. Thank you! @spotifyplatform developer.spotify.com