App-Website Communication for Ionic/vue.js App

Question

Currently I am designing a cross-platform mobile app using Ionic and vue.js.

That app enables users to create a game, add players and play rounds. When the game is played, a score for each player will be kept.

Now I want to enable the functionality to show this score via a web-application, so it can be shown on a projector when people play it or something similar. For this, I am planning to put up a simple web-application.

If the app administrator requests it (game is played in person, only one app running per game), the app should show a link to the website (+ some custom id) where the current score is rendered. If the score changes, the rendered score on the website should change as well.

How should this best be implemented? I thought about using a webhook on the web-app that the app can send the score to, but maybe a persistent connecting between app and website is better for the continuous updating? Or is there a way to do this without hosting this otherwise useless website?

Answer 1

You need a Database to store your players and their score and you need to provide some APIs for the following cases:

• Register User
• Score Submission
• Leaderboard
• Get User Detail & Score

You can implement those APIs easily by using Python Flask and submit the scores after each round. Then you can present any kind of queries on every platform. But you need DB and API for addressing your requirement.

Update

DB Model

Only one table is required for the start.

User
String unique_id
String nick_name
int score

Register User

You can have a simple registration API like this :

URL: http://api.your-game.com/register Request Payload

{
"user_id": "unique-device_id",
"nick_name": "it could be anything and doesn't need to be unique"
}

For having a unique device id in Ionic : Read More You can also generate some UUID.

Response Payload

{
"user_id": "unique-device_id",
"status": "User registered successfully"
}

Score Submission

URL: http://api.your-game.com/submit Payload

{
"user_id": "unique-device_id",
"score": 100
}

Response

{
"user_id": "unique-device_id",
"status": "score submitted successfully !"
}

Get User Score

URL: http://api.your-game.com/user/score

Request Payload

{
"user_id": "unique-device_id"
}

Response

{
"user_id": "unique-device_id",
"score":200,
"nick_name": "MaFi",
"status": "success"
}