HTML API auf Website einbinden

[nikderechte]

Hallo,

ich bin neu hier, weil ich ich eure Hilfe benötige, da ich nicht weiterkomme.

Ich betreibe eine Fanseite zu einem Bundesligisten, wo die Seite aktuell im Aufbau ist.
Gerne möchte ich dort gerne auf zwei getrennten Seiten einmal die Ligatabelle und den Spielplan der Mannschaft (Bundesliga und DFB-Pokal) zeigen.

Um mir die Arbeit deutlich zu erleichtern, würde ich gerne eine API verwenden. Und zwar von https://www.openligadb.de/.

Wie binde ich das auf meine HTML-Seite an? Ich bin überfragt

 

[Tornhoof]

Siehe die Beispiele auf Github, z.b. https://github.com/OpenLigaDB/OpenLigaDB-Samples/tree/master/angularjs

 

[Rossie]

Welcher Techstack wird verwendet?

 

[Scholle1309]

Also in html sowieso nicht

Aber die API ist doch vollumfänglich erklärt?
https://api.openligadb.de/index.html

 

[Raijin]

Es scheitert vermutlich schon an den Basics.

Vereinfacht ausgedrückt kannst du dir zB per JavaScript fetch den Output eines API-Calls (JSON) holen, welchen du anschließend verarbeitest und dir daraus zB eine Tabelle bastelst. Es führen allerdings viele Wege nach Rom und je nach Technologie können sie sich im Detail unterscheiden. Am Ende bleibt es aber effektiv dabei, sich das JSON-Objekt mit den gewünschten Daten zu holen und dieses aufzubereiten.

Für weitergehende Hilfe müsste man wissen womit du deine Webseite gebaut hast, also Frameworks, etc. Ansonsten geht's natürlich auch wie dargestellt mit nacktem JavaScript.

 

[nikderechte]

Danke!

Ich benutze die Forensoftware WoltLab. Ich bin halt wirklich kein Profi in diesem Thema und benötige da echt Hilfe bzw. die fertigen Codes

 

[Rossie]

Ich benutze die Forensoftware WoltLab.

Dann würde ich wie bereits genannt JavaScript bemühen. Das sollte mit einem der gängigen KI Helfer auch ein bemühter Laie hinbekommen. Ein Inline-Script mit dem fetch-Aufruf und etwas Code zur Ausgabe. Bei konkreten Fragen wird Dir hier sicherlich weitergeholfen.

Ein anderer Weg wäre, ein Plugin dafür zu schreiben und die Tabellen serverseitig zu generieren. Das ist aber mehr Aufwand.

 

[nikderechte]

@Rossie vielen Dank. Hier ein Auszug aus dem PHP-Code:

// Beispiel JavaScript-Code, um die openligaDB API zu verwenden
const apiKey = 'DEIN_API_KEY_HIER'; // Ersetze mit deinem eigenen API-Key

// Beispiel-Anfrage an die API für die 2. Bundesliga Tabelle
fetch('https://www.openligadb.de/api/getbltable/bl2', {
headers: {
'X-API-Key': apiKey
}
})

Wo bekomme ich dedn API-Key her? Die KI sagt mir ich muss den Platzhalter "DEIN_AP_KEY_HIER" ersetzen. Aber wo finde ich den Key?

 

[Guru-Meditation]

Um mir die Arbeit deutlich zu erleichtern

Also abhängig sein, nicht gut.

 

[Faust2011]

Die KI sagt mir ich muss den Platzhalter "DEIN_AP_KEY_HIER" ersetzen.

KIs sind halt nicht die Lösung. Man muss schon wissen, was man möchte.

Für einfache Abfragen brauchst Du gar keinen Key, kannst also den HTTP-Header leer lassen.

Ein einfaches HTTP-GET auf "https://api.openligadb.de/getmatchdata/bl1" liefert mir just in dem Moment ein JSON mit den viiiiielen Daten... vermutlich das, was Du suchst

 

[Der Lord]

@nikderechte
Ich denke du brauchst keinen API Key, steht doch direkt auf der Webseite:

Das Abrufen der Daten über den Webservice erfordert keinerlei Authentifizierung. Alle eingegeben Ligen sind für jeden abrufbar.

Erkennt man auch daran, dass man hier ohne weiteres direkt Daten geliefert bekommt:
https://api.openligadb.de/getmatchdata/bl1/2020/1

Du musst nur noch die richtigen Daten abrufen und entsprechend aufarbeiten.

 

[nikderechte]

Ich bin da ein absoluter Neuling drin und kenne mich mit der Thematik ehrlich echt schlecht aus. Bin einfach nur überfordert

 

[Der Lord]

@nikderechte
Macht ja nix, dann liegt's nun an dir die benötigten Techniken (also z.B. HTML + Javascript) in einem dir passenden Tempo zu lernen und bei einzelnen Stolpersteinen hier nachzufragen - da wird dir hier auch gern geholfen. Eine maßgeschneiderte Komplettlösung wirst du hier nur schwerlich serviert bekommen können.

Oder du übergibst die Aufgabe jemanden, der Ahnung von der Materie hat. Beispielsweise als Auftrag auf einer Freelancer-Plattform gegen Bezahlung.

 

[Rossie]

Wo bekomme ich dedn API-Key her? Die KI sagt mir ich muss den Platzhalter "DEIN_AP_KEY_HIER" ersetzen. Aber wo finde ich den Key?

Viele Services funktionieren so, dass man ohne Key nicht an die Daten kommt. Die KI "weiß" das und je nachdem, was man als Input liefert, bekommt man dann eben die wahrscheinliche Lösung. Liefert man die Info, dass kein Key notwendig ist, kann die KI den Code entsprechend ändern. Durchaus faszinierend.

Ich bin da ein absoluter Neuling drin und kenne mich mit der Thematik ehrlich echt schlecht aus. Bin einfach nur überfordert

Das ist am Anfang normal. Man muss viel lesen, ausprobieren und heutzutage kann man sich auch mit einem digitalen Helfer auseinander setzen, was wie geschehen Fallstricke bietet.

 

[nikderechte]

Danke euch. Ich versuche mich da bisschen reinzufuchsen und hier nachzufragen.

Folgender Code stammt jetzt von der KI. Was muss hier angepasst werden?
Funktionieren tut er nämlich nicht.

<div id="bundesliga-table"></div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const API_URL = "https://www.openligadb.de/api/getbltable/bl2/2023";
            const tableContainer = document.getElementById("bundesliga-table");

            fetch(API_URL)
                .then(response => response.json())
                .then(data => {
                    let tableHTML = '<table border="1">';
                    tableHTML += `
                        <tr>
                            <th>Position</th>
                            <th>Team</th>
                            <th>Games</th>
                            <th>Points</th>
                        </tr>`;
                    
                    data.forEach(team => {
                        const isHannover = team.TeamName === "Hannover 96";
                        tableHTML += `
                            <tr style="background-color: ${isHannover ? '#FFFF00' : '#FFFFFF'}">
                                <td>${team.Position}</td>
                                <td>${team.TeamName}</td>
                                <td>${team.Matches}</td>
                                <td>${team.Points}</td>
                            </tr>`;
                    });

                    tableHTML += '</table>';
                    tableContainer.innerHTML = tableHTML;
                })
                .catch(error => {
                    console.error('Error fetching data:', error);
                    tableContainer.innerHTML = '<p>Fehler beim Laden der Daten.</p>';
                });
        });
    </script>

 

[floq0r]

@nikderechte
Ich glaube du hast nicht verstanden was man dir vermitteln wollte.

 

[Der Lord]

Folgender Code stammt jetzt von der KI.

Versuch's lieber mit eigenem Code. Ja, ist anfangs nicht einfach, aber ohne Zeit zu investieren wird das nix. Wenn du eine Webseite betreiben und auf Quellcode-Ebene Erweiterungen einpflegen möchtest, musst du dich nun mal mit dem Thema auseinandersetzen. Die Arbeit kann dir (noch?) keine KI komplett abnehmen.

Ich bringe mal einen der unbeliebten Autovergleiche: ich käme auch nicht auf die Idee an meinem Auto rumzuschrauben, ohne auch nur die geringste Ahnung davon zu haben und mich dann einfach durch eine "dumme" KI anleiten zu lassen. "Dumm" weil: es ist keine echte Intelligenz vorhanden, die Texte werden stumpf Buchstabe für Buchstabe nach Wahrscheinlichkeiten erzeugt, abhängig vom eingegebenen Prompt.

Zurück zum Thema: wenn das ein ernsthaftes Hobbyprojekt von dir ist, schnappe dir ein paar Lehrbücher oder Youtube-Kurse zum Thema und versuch dich da langsam einzuarbeiten. Hier blind Codeschnippsel reinzukopieren, die du nicht im Ansatz verstehst, führt zu nix.

 

[cx01]

Auf der Seite von OpenLigaDB ist ein Link auf https://www.bundesliga-widgets.de, vermutlich vom selben Entwickler. Da gibt es eine fertige Bundesligatabelle und eine Liste kommender Spiele.

 

[Raijin]

Mir war langweilig...

https://jsfiddle.net/5124tfrw/

Das ist natürlich nur eine rudimentäre Demonstration, mit der ich vermitteln möchte wie es grundsätzlich funktionieren kann. Wichtig ist aber, dass du es nachvollziehst und nicht einfach nur Copy&Paste machst. Wenn du nicht verstehst was da passiert, kannst du es auch nicht an deine Bedürfnisse anpassen und bist immer auf fremde Hilfe angewiesen. Das gilt ebenso wie Hilfe von KIs. Schön, dass ChatGPT und Co fertigen und mit Glück auch funktionierenden Code ausspucken, aber auch da gilt: Lesen, verstehen, lernen.

Wie heißt es so schön?

Gib einem Mann einen Fisch und du ernährst ihn einen Tag.
Lehre ihn das Fischen und du ernährst ihn ein ganzes Leben.

Nimm die Vorlage und versuche beispielsweise mal ganz simpel den kurzen Vereinsnamen durch den Vollständigen zu ersetzen. Wenn das klappt, fügst du zB Siege/Unentschieden/Niederlagen, Tore und Tordifferenz in neuen Spalten hinzu, analog zu den bereits gegebenen Spalten.

Für den Matchplan adaptierst du das Skript mit der entsprechenden API-Funktion, guckst in die Doku wie der Output aussieht bzw. welche Informationen bzw. Felder enthalten sind. Leg am besten mal los und sieh zu wie weit du kommst. Wenn's nicht sofort so klappt wie du es dir vorstellst, kannst du dich mit einem konkreten Problem natürlich gerne hier melden. Wir unterstützen jederzeit gerne, aber umsetzen solltest du das alleine, weil du sonst nichts dabei lernst.

 

[Rossie]

Funktionieren tut er nämlich nicht.

Er funktioniert weitgehend. Das größte Problem ist die URL. Damit sendet der Server einen benötigten Header nicht mit und der Browser blockt die Antwort.

Verwende "https://api.openligadb.de/getbltable/bl2/2023" und es wird eine Tabelle angezeigt.