Overzicht
De Sportlink Club Info Viewer is een Vue.js applicatie die gebruikers voorziet van real-time informatie over aankomende wedstrijden in de komende week, wedstrijdresultaten van de afgelopen week en informatie voor de wedstrijd zoals kleedkamer- en veldinformatie. Gebouwd met Vue 3 en Vite, haalt de app wedstrijdgegevens op van een externe (Sportlink) API en toont deze in een gebruiksvriendelijke interface.
Kenmerken
- Real-time Gegevens Ophalen:
Automatisch ophalen van wedstrijdschema's voor de komende 7 dagen, resultaten van de afgelopen 7 dagen, en informatie over wedstrijden die binnen 3 uur beginnen. - Responsief Ontwerp:
Het ontwerp past zich dynamisch aan verschillende schermformaten aan voor optimale weergave op desktops, tablets en mobiele apparaten. - Gebruikersmeldingen:
Geeft laadberichten en foutmeldingen weer om gebruikers te informeren over de voortgang van gegevensophalingen. - Scrollende Wedstrijdinformatie:
Wedstrijdinformatie wordt automatisch gescrold voor een eenvoudige en overzichtelijke weergave. - Fallbacks voor Teamlogo's:
Standaard clublogo's worden weergegeven wanneer specifieke teamlogo's niet beschikbaar zijn.
Ondersteunde Sporten:- KNVB (Voetbal) - Actief
- NBB (Basketbal) - Actief
- Atletiekunie - Geen API beschikbaar
- Honkbal - Geen API beschikbaar
- Softbal - Geen API beschikbaar
- Korfbal - Geen API beschikbaar
- Volleybal - Geen API beschikbaar
- Zwemmen - Geen API beschikbaar
Indien er een API voor andere sporten, zoals Honkbal, beschikbaar komt, kan deze ook worden geïntegreerd.
Installatie
- Clone de repository:
git clone https://github.com/PatrickSt1991/Sportlink.Club.Info.Viewer.git
cd Sportlink.Club.Info.Viewer
- Installeer afhankelijkheden:
npm install
- Pas src/config.js aan:
BASE_URL = './';
Laat default als je het in de Tizen App wilt uitvoeren, anders kan je elke willekeurige folder gaan gebruikenCLIENT_ID = '';
Geef het ClientId van jouw club inPROGRAMMA_DAGEN = 7;
Aantal dagen vooruit voor aankomende wedstrijdenUITSLAG_DAGEN = 7;
Aantal dagen in het verleden voor wedstrijdresultatenPREMATCH_REFRESH = 15;
Aantal minuten tussen verversen van /prematch-info (Wedstrijd informatie)ENABLE_SCREEN_SWITCH = true;
Mag /match-info na twee rotaties de weergave overgeven aan /match-results en visa versa./li>HOMESCREEN = '/match-info';
De weergave die per default moet starten, keuze uit;/match-info
Uitslagen informatieAfhankelijk van ENABLE_SCREEN_SWITCH als deze na 2 rotaties naar /match-results overschakelt
/match-results
Programma informatieAfhankelijk van ENABLE_SCREEN_SWITCH als deze na 2 rotaties naar /match-info overschakelt
/prematch-info
Wedstrijd informatieVerverst zichzelf automatisch na ingestelde minuten in PREMATCH_REFRESH
- Start de ontwikkelingsserver:
npm run dev
- Open de applicatie
Navigeer naar http://localhost:5173 in je browser. of de gespecificeerde poort in je prompt.
Tizen App (Oude Samsung Smart TV)
Oudere Samsung Smart TVs ondersteunen niet altijd vue v3, omdat tegen te gaan kan je de build van Sportlink Club Info Viewer verwerken in een Tizen App.
Deze App wordt geinstalleerd op de Smart TV en heeft modules geinclude die ervoor zorgen dat de nieuwe codes toch werken op een oude Tizen OS.
- Installeer Tizen Studio:
Er zijn meerdere opties om dit te doen;
- Tizen Studio 5.6 with IDE installer / Tizen Studio 5.6 with CLI
- Visual Studio 2022 - Visual Studio Tools for Tizen
- Visual Studio Code - Tizen Extension
Ik gebruik zelf Tizen Studio 5.6 with IDE installer
- Installeer vanuit Package Manager
- 8.0 Tizen - Compleet (Main SDK)
- Tizen SDK tools - Compleet (Main SDK)
- Extras - TV Extensions-8.0 (Extension SDK)
- Extras - Samsung Certificate Extension (Extension SDK)
- Extras - TV Extensions Tools (Extension SDK)
-
Clone de repository:
git clone https://github.com/PatrickSt1991/Sportlink.Club.Info.Viewer.Tizen.git
Maak in Certificate Manager een Samsung Certificaat aan
Hiervoor heb je een gratis samsung account nodig,
tijdens het aanmaken moet je ID's opgeven, handig is om ook direct het Id van je emmulator toe te voegen.
Mijn certificaat bevat de twee TV's van mijn oude club en mijn emmulator.
Open de folder in Tizen Studio / Visual Studio / VS Code.
Vervang de index.html en assets folder door je eigen gebuilde index.html en assets folder.
Run of Debug je applicatie vanuit je IDE om de app op je Smart TV te krijgen.
Gebruik
Na het openen van de app toont wordt de weergave geladen die je hebt ingevoerd in de config.js
Op het scherm kun je de komende wedstrijden, afgelopen wedstrijden en wedstrijd informatie bekijken
Als er geen wedstrijden zijn of als er een fout optreedt, worden passende berichten weergegeven.
API Referentie
De applicatie haalt wedstrijdgegevens op van de volgende eindpunten:
Screenshots
Wedstrijd informatie impressie
Komende wedstrijden impressie
Uitslagen wedstrijden impressie