Recently I’ve been playing Minecraft together with a couple of colleagues and we decided to build a system which, among other things, provides us with statistics of our world.
My task is to build the web interface, so I decided to make this my first project using the Meteor platform, since it has been on my list of stuff I want to learn for a while now.
The statistics data I need to render does not come from a local database but from an external API, so I had to figure out how to publish a Meteor record set with the external API as its source. This blog post describes how I got this to work, using a simple demo application and the iTunes API as the external API.
The Meteor app will have the server poll the iTunes api every 10 minutes and publish the results as a record set, which will then automatically update on all connected clients.
The example Meteor app created for this blog post can be found over here.
Step 1 - Create the Meteor app
Make sure you have Meteor installed and run the following commands from the folder in which you want to create the demo app.
1 2 3 4 5 6 7
This will create a new Meteor app, remove the
insecure packages for security, and add the following packages:
http: required to communicate with the iTunes api
twbs:bootstrap: Bootstrap to add some style to our app
percolate:synced-cron: required to poll the iTunes api
Step 2 - Define a songs collection
Defining a collection with Meteor is done with just one line of code. The collections.js file is in its own folder, which will make sure the collection is defined on both the client and the server. This collection will store the iTunes api data and is published as a record set to the Meteor clients.
Step 3 - Server scripts
In the application.js file a job which fetches the top songs from the iTunes api every 10 minutes is defined. The
Meteor.startup function is used to schedule the job.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
The top songs collection must be published to the clients, so they are able to subscribe to its updates.
1 2 3
Fetching the data from the iTunes api and storing the results inside the topsongs collection is done with the
updateTopSongs function. It is defined with
Meteor.methods, so it is possible to call this method from the client as well (for instance, in case you would like to trigger an update every time a new client subscribes to the top songs collection).
This function is also called by the job which is scheduled to fetch the data from the iTunes api.
The actual data from iTunes is not directly stored inside the topsongs collection, but it is parsed and only some parts (id, title, image, link and preview) are stored. A sort field is added to maintain the order of the top songs since this is not specified by the data returned by the iTunes api.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
Step 4 - Client scripts
In the application.js file the client subscribed to the top songs collection.
1 2 3 4 5 6 7
topsongs helper function is defined to be used by all templates. It returns the entire top songs collection, sorted by the
1 2 3 4
Step 5 - Template
For this simple app we use only a single html file, containing two templates. The
topsongs template renders a list for each record from the top songs collection. The
topsong template renders a single record.
The result is a sorted list which contains the song title, a link to the song on iTunes, an image and an audio control to play the preview.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
Step 6 - Run the app
Run the app locally with the
meteor command and open it at http://localhost:3000