Live Scores In Wix Case Study
Hey developers!
My name is Youssef Hamed, originally from Egypt but raised in Qatar. I am currently completing my MSc at the University of Southampton in Genomic Informatics.
I recently had the opportunity to integrate the Live Score API on Wix and wanted to share my journey, hoping it might assist anyone out there planning to do the same.
Let’s dive right into it: One major hiccup I encountered was displaying the teams list due to the structure of the live score dataset. While attempting to display team names on my repeater, I realized the issue was that I was trying to access something that wasn’t directly available. The team information was nested inside a ‘team’ object, which in turn was within an array item of teams. Similarly, the flag property was nested within a ‘country’ object.
The key is to focus on the code path to align the data access patterns in the code with the actual structure of the data. I made sure the frontend code accessed the team object for the team name and the country object for the flag image. However, the flags are inclusive of live score API premium subscription so try it out!
You will notice in my code below that I have also fetched the stadium names. Good news! It works fine so enjoy that aesthetic.
Here is my frontend:
// Import the getCharacters function from the backend file.
import {getCharacters} from 'backend/footballData.jsw';
// Once the Wix page is fully loaded, execute the following function.
$w.onReady(function () {
// Setup the repeater to populate with team data once it's ready.
$w("#Repeater1").onItemReady(($item, itemData, index) => {
// Set the text of the playerName1(must match the repeater name) element to the team's name.
$item('#playerName1').text = itemData.team.name;
// Set the text of the stadium1 (must match repeater name) element to the team's stadium.
$item("#stadium1").text = itemData.team.stadium;
// Set the source of an image to the team's flag URL (if found).
$item("img").src = `https://livescore-api.com/api-client/teams/listing.json?key=${publicKey}&secret=${privateKey}&country_id=${itemData.country.flag}`;
});
// Define an asynchronous function to populate the repeater with team data.
const populateRepeater = async () => {
// Fetch the raw team data.
const teamsRaw = await getCharacters();
// Map the raw data to a format suitable for the repeater, including converting ID to string.
const teams = teamsRaw.map(team => ({
...team,
_id: team.team.id.toString()
}));
// Populate the repeater with the mapped team data.
$w("#Repeater1").data = teams;
// Log the processed team data to the console for debugging.
console.log(teams);
};
// Call the function to populate the repeater with team data.
populateRepeater();
});Here is my backend:
// Import the necessary modules from Wix libraries. I used “getSecret” and fetch.
import {getSecret} from 'wix-secrets-backend';
import {fetch} from 'wix-fetch';
// Define an asynchronous function to fetch character data.
export const getCharacters = async () => {
// Define the public key directly and retrieve the private key securely. I had it stored in “Secret Manager” in the wix dashboard specifically in the developer tools.
const publicKey = "<your-public-key>";
const privateKey = await getSecret("Sapi");
// Construct the URL with the public and private keys for the API request.
const url = `https://livescore-api.com/api-client/teams/listing.json?key=${publicKey}&secret=${privateKey}&country_id=<country_id>`;
// Fetch the team list from the Live Score API.
const response = await fetch(url);
const teamList = await response.json();
// Log the fetched team list for debugging.
console.log(teamList);
// Return the teams data for frontend use.
return teamList.data.teams;
};With another backend snippet for managing my secret key:
// Import getSecret from Wix's secrets module.
import { getSecret } from 'wix-secrets-backend';
// Define an asynchronous function to log the private API key.
const getApiKey = async () => {
// Retrieve and log the private key securely.
const privateKey = await getSecret("Sapi");
console.log(privateKey);
}A special shoutout to the Live Score API for making this project possible. Their comprehensive and detailed API documentation paved the way for a smooth integration process and Hristo Petev swift response to my emails. Accessing up-to-date sports scores and detailed team information has never been easier. Their dedication to providing developers with a seamless experience and a wealth of data is truly commendable. The Live Score API has been an invaluable tool in my project, offering not just live scores but a detailed look into each team and player, ensuring that my website is as informative and engaging as possible.
Always happy to help:
Youssef Hamed