Building a multi-player quizz with socket.io and apispark
With my dear friend Bruno we spend few hours in the past weeks to build an online multi-player quiz. The goal was to learn how to use new tools and libraries then share our work during the Summer of API hackaton.
Choosing our data-set
We both leave in Nantes for a long time and we do not know the story of our famous people. All of them have a park, a street or an avenue at their name. They sound familiar to use but we do not know their story. We decided to use the open data set containing all the street of our city and mix it with the Wikipedia list of famous people related to Nantes to build a multi-player quiz. Very basically, you log in, you then have a question prompt and three proposition. Is up to each player to respond as fast as possible.
Technical stack
Server stack
When you want to have fun and quickly share your idea Node.js is the only solution and the best cloud provider to host is Clever Cloud. No discussion there.
User interface
We both have skill in angular and did not see any reason to experiment a new library. We just give a try to getmdl.io in order to have a “Material” view. If you try a quiz you will quickly see that design is not one of my skill.
Coordinating clients and server
In a multi-player quiz the coordination between every players is the key. To achieve it we need a fast and reliable communication protocol. In a previous experience we tried to build a video chat with webrtc. Despite a lot of effort we did not manage to make it worked as expected but we really see a big potential in web-socket. We really wanted to show the power of them in our new application. That’s why we decided to use socket.io. It is a very elegant and simple to set-up library. The most tricky part was to specify all the client state we need in order to build the server the right way. Thanks to socket.io we only focus on the quiz logic and the mapping of external api.
Here is the first version of the flow. This picture help use a lot building our app.
After defining the flow we build a state diagram and we were ready to code.
Serving the questions
Our first option was to use directly the wikipedia api to build questions from the first sentence of selected article. It appears quickly that we will need to also link with this question the right answer, the proposal and the words to hide in the wikipedia article - it is not always the same rule, for example for Lamoricière we need to hide Lamoricière but also Moricière. As we really want to go fast and do not want to use all Wikipedia articles we decided to store our questions in a Google sheets and use it in our application throught APISpark
Setting-up a api with data stored in a Google sheet
With APISpark serving a google sheet through a API was very quick. First we had to create a entity store and link it with our google account.
Once you choose the spreadsheet, by default each column name is used as a property for the entity. The first column is used as a primary key.
To expose those data as an api you will need then to deploy and export it. The position in user interface of this option is not obvious.
After that we just open up the api to anybody by changing the settings of the generated webapi.
You see it was very simple to expose the data. You understand know why we did not focus on grabbing automatically data from Wikipedia.
Adding more information with answers
One we got the api and the flow with a nice technical stack building screens and server was a matter of time. We also wanted to give more information when serving an answer like showing to user views of streets named with famous people of our city. For that we need to find the street named with the famous people attach to it GPS coordinate and use street views api. A data-set of street names exits for our city. We tried to load it in a Google spreadsheet and search for street in it with APISParck but currently you can not search with a non exact match in columns values. I pretty sure it will come one day. In order to full-fill our need we add to load the data in a MongoDB instance hosted in MongoLab (we could also have use the Clever Cloud service) and query them to find all the streets names. We used mapquest to get the GPS coordinate from street name and then build the street view uri.
Playing with API was fun
It was very fun to play with all those api. You could enjoy the result at mille-sabords.cleverapps.io and browse the code at https://github.com/bbonnin/quizz-nantes .