Überblick
Informationen zum allgemeinen Ansatz in Bezug auf die Architektur dieser Beispiel-App, insbesondere Authentifizierung und AJAX-Implementierungen, finden Sie im Beispiele, die HTTPRequest verwenden.
App-Architektur
Die allgemeine Anwendungslogik für diese App sieht wie folgt aus:
- Sammeln Sie Benutzerdaten, die für den Zugriff auf das Konto erforderlich sind
- Führen Sie beim Klicken auf die Schaltfläche einen AJAX-Aufruf aus, um alle Spielerinformationen abzurufen
- Führen Sie bei erfolgreichem AJAX-Aufruf Folgendes aus:
- JSON-Antwortdaten in HTML-Seite einfügen
- Erstellen Sie dynamisch HTML, das Spielerinformationen in einer geordneten Liste anzeigt, und fügen Sie diese in die HTML-Seite ein
Beispiel-App
Quellcode
Finden Sie den gesamten mit diesem Beispiel verknüpften Code in dieses GitHub-Repository.
Beispiel-App
Sehen Sie sich die Pen Display Player von Brightcove Learning Services (@rcrooks1969) auf CodePen an.
CodePen verwenden
Hier sind einige Tipps zur effektiven Verwendung des obigen CodePen:
- Schalten Sie die aktuelle Anzeige des Players um, indem Sie auf klicken Ergebnis Taste.
- Drücke den HTML/CSS/JS Tasten, um EINEN der Codetypen anzuzeigen.
- Klicken Auf CodePen bearbeiten in der oberen rechten Ecke, um diesen CodePen Ihrem eigenen Konto zuzuordnen.
- Suchen Sie den gesamten Code, der mit diesem Beispiel verknüpft ist, in diesem GitHub-Repository.
Proxy-Code
Um Ihre eigene Version der Beispiel-App auf dieser Seite zu erstellen, müssen Sie Ihren eigenen Proxy erstellen und hosten. (Die von Brightcove Learning Services verwendeten Proxys akzeptieren nur Anfragen von Brightcove-Domains.) Ein Beispielproxy, der dem von uns verwendeten sehr ähnlich ist, aber ohne die Prüfungen, die Anfragen von Nicht-BrightCove-Domänen blockieren, kann in diesem GitHub-Repository gefunden werden. Dort finden Sie auch grundlegende Anweisungen zur Verwendung und eine ausführlichere Anleitung zum Erstellen von Apps rund um den Proxy unter Verwenden der REST-APIs.