A Public Debut
In the last few days, I figured out how to deploy Spotify Voice onto the Internet and am happy to announce it is now available for everyone to use: accessible at https://spotify-voice.herokuapp.com.
In this week’s post, I wanted to go over the process of deploying a web app to the Internet.
Let’s get some terminology out of the way first: What is a web app (short for web application)? A web app is a client-server program run in the browser. The client is someone, like yourself, that interacts with the web app on the browser and can send data to the server (the computer(s) running the web app). In the case of Spotify Voice, when you first open it, there is a link asking you to log in and authenticate the app. This authentication step is the only part of my web app that talks with my server. Every other action such as pressing the play/pause or skip buttons, will send and receive data from Spotify’s servers.
Magic Ovens and Deployment?
In the last post, I mentioned the most pressing issue with my app was that only I could use it. To understand why this was the case, let me explain through an anecdote.
Let’s say your friend comes up with this fantastic recipe for banana bread and shares it with you. Now, imagine you have a magic oven that allows you to throw in this recipe and voilà, out comes the same delicious banana bread for you to enjoy. The magic oven combined the necessary ingredients and followed the appropriate directions without you ever having to know or do anything!
We can abstract app deployment using this idea. Spotify Voice is the end product: the banana bread. The ingredients for the web app include files, which contain source code, and code libraries, which contain functions used by the source code. The directions to create Spotify Voice would be to start up the server through the computer’s command line. From this recipe, you could see why it would be it would be difficult to share my app with everyone. You would have to download the “ingredients” from me and know how to follow the execution directions correctly to use the app. This is where the magic oven, Heroku, comes in!
Heroku is a platform that allows apps to be deployed onto their servers. I give Heroku the recipe for Spotify Voice and it “bakes” a runnable program that is executed any time anyone visits https://spotify-voice.herokuapp.com. To you, all of this complexity is hidden behind the scenes and you didn’t have to know or do anything: thanks magic oven… I mean Heroku!
The Downsides of Free
Platforms that host data for free do come with some drawbacks. With Heroku, when you visit Spotify Voice for the first time, you will most likely notice that it takes about 15–20 seconds to load. This is because Heroku needs to wake up the app. When an app is detected as idle for more than 30 minutes, Heroku will put it to sleep to conserve resources on their servers. Sometimes you might get lucky and the site loads almost instantly when you visit it, and that would be because someone else is already using the app, so it does not need to be awakened for the next visitor. Heroku does offer paid subscription tiers that get rid of this sleeping behavior, but I will be sticking to the free tier for now since it gets the job done.
Also, the Spotify Voice URL currently contains “herokuapp”. It is possible to set the domain name to something else such as spotify-voice.com. The only problem is that I don’t pay for a domain name, so for now, I will be keeping the default URL.
Spotify Voice Usage Tips
In the last post, I gave an overview of how Spotify Voice works. Now that the app is accessible to everyone, I want to discuss how you can use the app. When I first wrote this app, my main goal was to build something that worked on my computer. I figured I would start small and add on as I progressed. As a result of this, the app sometimes does not function the way you might think. The good news is that this app is still in development and the user experience should be improved over time. So, let’s get started with tips on how to use the app.
Currently Spotify Voice works best on a desktop or laptop. Accessing the app through a mobile browser exhibits odd behavior with the play/pause button that I will have to look into later.
The app requires you to have Spotify open, whether it be through the Spotify desktop application or the Spotify Web Player, in order to play music. You will also have to click the play/pause button in Spotify at least once so that the app can detect an ‘active session’. What I do is open Spotify and click the play button, then immediately click pause and then I can start using Spotify Voice.
At this point, Spotify Voice should be fully functional. You should be able to play, pause, skip, like, dislike, or add tracks and enjoy an unbiased music listening experience!
It should also be noted that once the spotify_voice playlist (created from clicking the Play New Music Friday button) is empty, i.e. you listened to all the songs for that week, you will have to delete it. If you don’t do this, then when the next week comes around and you click ‘Play New Music Friday’, the spotify_voice playlist will be played because it exists, but it does not contain any more songs!
To Be Developed
I know, the user experience for setup before you can use Spotify Voice is not very intuitive, so this will be one of my bigger focuses in the next post. Also, I have noticed that when there are more than 100 songs in a New Music Friday playlist, only a max of 100 songs will be added to the spotify_voice playlist. This has to do with Spotify limiting the number of songs you can add to a playlist in just one request. Deleting the spotify_voice playlist after listening to all songs for the week is also a big issue that people shouldn’t have to deal with. I should also mention that if you are ever using the app for more than an hour, you will notice that the media control buttons will stop working, so you won’t be able to play/pause, skip, or add tracks. The fix for this is to go back to the https://spotify-voice.herokuapp.com link and login again. This is another issue that I will need to address in the future. In the next post, I will tackle at least one of these issues and the user experience will be improved as a result.
