Build your first Spotify App

Slide 1

Slide 1 text

Build your ﬁrst Spotify App Le Wagon Tokyo 01/24/2022 Alvaro Navarro [email protected]

Slide 2

Slide 2 text

Who am I? Alvaro Navarro Developer Advocate

Slide 3

Slide 3 text

What is Spotify for Developers?

Slide 4

Slide 4 text

developer.spotify.com

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

What can I do with Spotify for Developers?

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Winampify github.com/remigallego/winampify

Slide 12

Slide 12 text

Radionewify https://radionewify.com/

Slide 13

Slide 13 text

Setify https://setify.co/

Slide 14

Slide 14 text

Artist Explorer github.com/fsahin/artist-explorer

Slide 15

Slide 15 text

MagicPlaylist https://magicplaylist.co/

Slide 16

Slide 16 text

What if…

Slide 17

Slide 17 text

…we create our own recommendation App?

Slide 18

Slide 18 text

Build our ﬁrst Spotify App - What is Spotify API - Web API Authorization - Make our ﬁrst API call - Build a simple recommendation app - Next steps Agenda

Slide 19

Slide 19 text

Spotify Web API

Slide 20

Slide 20 text

Spotify Web API

Slide 21

Slide 21 text

Spotify Web API - API Reference - API Console

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Web API Authorization

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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.

Slide 29

Slide 29 text

Web API Authorization When to use each ﬂow? - 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

Slide 30

Slide 30 text

Web API Authorization Authorization Code Flow Request Authorization App Authorization code

Slide 31

Slide 31 text

Web API Authorization Coding time!

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Web API Authorization Coding time!

Slide 34

Slide 34 text

First API call

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Web API Authorization Coding time!

Slide 37

Slide 37 text

Recommendation app

Slide 38

Slide 38 text

Build our ﬁrst Spotify App Idea

Slide 39

Slide 39 text

Web API Authorization Coding time!

Slide 40

Slide 40 text

Next steps

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Thank you! @spotifyplatform developer.spotify.com