Spotify + Vaadin = truthy

For the last workday of the year, I decided to spend my @Vaadin #CF on something a bit different: @Spotify + @Vaadin 

Spotify recently announced the Spotify Apps API, and I conveniently gained access today. This being the last workday of the year, I decided to spend some CF time (the Vaadineer version of Googles 20% time) checking if it’s possible to use Vaadin to make Spotify Apps.

The environment provided is basically Chromium, and you can grant your app remote XHR access to specific sites - in short, it lookes pretty promising! And indeed, I was able to run a Vaadin application quite easily.

However, before you get your hopes up, I found this notice in the documentataion:

In order for Spotify to be able to verify the security aspects of the submitted applications, the JavaScript code must not be minified or obfuscated.

Uh-oh. Vaadin is using GWT, and GWT javascript is indeed quite obfuscated. I guess you could compile using pretty or detailed modes, but I’m not sure that would be sufficient. I guess I’ll have to contact Spotify and ask…

Anyway, if you still want to give it a shot, here’s the basic procedure.

Spotifyifying a Vaadin application

First get a version of Spotify that supports Apps (then apply for Apps developer status, so you get the devel tools in Spotify).

Then make a Spotify folder (~/Spotify on Mac, My Documents/Spotify on Win) and a folder for you app under that (e.g ~Spotify/vaadin/).

Now choose a Vaadin Application you want to spotifyify. Any test application will do for now. Browse to it (make sure it works) and copy the content of the page into ~Spotify/vaadin/index.html. 

Next, create a manifest.json in the same folder with the following content:

{
	"BundleType": "Application",
	"AppIcon": {
		"18x18": "vaadin.png"
	},
	"AppName": {
		"en": "Vaadin"
	},
	"SupportedLanguages": [
		"en"
	],
	"RequiredPermissions": [
		"http://192.168.11.18:8080"
	]
}

Replace stuff to your liking - especially make sure the RequiredPermissons points to your application. Mine is running at http://192.168.11.18:8080.

Now copy the whole VAADIN folder from your Vaadin application to e.g ~Spotify/vaadin/VAADIN/ - yes, we can actually install the widgetset and themes locally, and only make UIDL requests to the server. Neat.

In order for the application to know where the server is located, we’ll need to edit index.html just a little bit: look for the part that says appUri:’…’ and make it point to your server. Mine looks like this:

appUri:‘http://192.168.11.18:8080/’

That is basically it! Fire up Spotify, and search for spotify:app:vaadin where the last part is the name of your app (vaadin in my case).

Now what?

The main problem with this is that it’s quite unclear if apps like this would be allowed into Spotify. I’m guessing the answer is a firm 'no’ unless you compile pretty/detailed, and perhaps not even then. This is something Spotify needs to comment on - I’ll get back to you if I find out the answer! :-) Until then, this will remain an interesting experiment.

Ignoring the possible problems with app submission, the obvious next steps would be:

• Actual API integration. Vaadin add-on + GWT library. 
• Customized  theme based on the css themes Spotify provide.

Anyway, have a nice new years eve, and let me know if you have some thoughts on this topic!