Sportlink Club Info Viewer

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
  Momenteel beschikt alleen voetbal en basketbal over een logo-API.
  Indien er een API voor andere sporten, zoals Honkbal, beschikbaar komt, kan deze ook worden geïntegreerd.

Installatie

1. Clone de repository: git clone https://github.com/PatrickSt1991/Sportlink.Club.Info.Viewer.git cd Sportlink.Club.Info.Viewer
2. Installeer afhankelijkheden: npm install
3. 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 gebruiken
   • CLIENT_ID = '';Geef het ClientId van jouw club in
   • PROGRAMMA_DAGEN = 7;Aantal dagen vooruit voor aankomende wedstrijden
   • UITSLAG_DAGEN = 7;Aantal dagen in het verleden voor wedstrijdresultaten
   • PREMATCH_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-infoUitslagen informatie
       

       Afhankelijk van ENABLE_SCREEN_SWITCH als deze na 2 rotaties naar /match-results overschakelt

     • /match-resultsProgramma informatie
       

       Afhankelijk van ENABLE_SCREEN_SWITCH als deze na 2 rotaties naar /match-info overschakelt

     • /prematch-infoWedstrijd informatie
       

       Ververst zichzelf automatisch na ingestelde minuten in PREMATCH_REFRESH

4. Start de ontwikkelingsserver: npm run dev
5. 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.

1. 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)

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.

2. Clone de repository: git clone https://github.com/PatrickSt1991/Sportlink.Club.Info.Viewer.Tizen.git



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:

• MatchInfo - Sportlink API
• MatchResults - Sportlink API
• PreMatchInfo - Sportlink API

Screenshots

Wedstrijd informatie impressie

Komende wedstrijden impressie

Uitslagen wedstrijden impressie