--- title: "Tutorial - Dynamischen Inhalt auf einer statischen Webseite hinzufügen, die mit Cecil erstellt wurde" description: "Erfahren Sie hier, wie Sie externe APIs von Ihrer statischen Webseite aus aufrufen" url: https://docs.ovhcloud.com/de/guides/web-cloud/web-hosting/static-website-installation-cecil-api-call lang: de lastUpdated: 2023-01-16 --- # Tutorial - Dynamischen Inhalt auf einer statischen Webseite hinzufügen, die mit Cecil erstellt wurde ## Ziel In dieser Anleitung erfahren Sie, wie Sie das Web-Entwicklungstool [Cecil](https://cecil.app) verwenden, um den Inhalt einer dynamischen Seite wiederzugeben. Dazu wird eine externe API eingebunden, die Informationen auf einer mit **Cecil** erstellten Seite anzeigt. **In diesem Tutorial wird erläutert, wie Sie API-Aufrufe von Ihrer statischen Webseite aus hinzufügen.** :::warning OVHcloud stellt Ihnen Dienstleistungen zur Verfügung, für deren Konfiguration und Verwaltung Sie die alleinige Verantwortung tragen. Es liegt somit bei Ihnen, sicherzustellen, dass diese ordnungsgemäß funktionieren. Wenn Sie Schwierigkeiten haben, den Schritten dieses Tutorials zu folgen, empfehlen wir Ihnen, einen [spezialisierten Dienstleister](https://partner.ovhcloud.com/de/directory/) zu kontaktieren oder Ihre Fragen in der OVHcloud Community zu stellen. Leider können wir Ihnen für administrative Aufgaben keine weitergehende technische Unterstützung anbieten. Weitere Informationen finden Sie am [Ende dieser Anleitung](#go-further). ::: ## Voraussetzungen - Sie verfügen über ein [OVHcloud Webhosting](https://www.ovhcloud.com/de/web-hosting/) mit SSH-Zugang. Über diesen Zugriff können Sie eine oder mehrere Alternativlösungen online installieren, ergänzend zu den Webhosting-Standarddiensten. - Sie sind mit der Befehlszeileneingabe vertraut. - Sie haben die Anwendung **Cecil** auf Ihrem Hosting installiert und konfiguriert (gemäß unseres Tutorials zur [Installation und Konfiguration von Cecil](/de/guides/web-cloud/web-hosting/static-website-installation-cecil.md)). ## In der praktischen Anwendung Als Beispiel wird eine API eines Wetterdatendienstes verwendet, basierend auf einer Stadt, die vom Benutzer eingegeben wird. Die Schritte sind dabei wie folgt: - Erstellen einer neuen Seite in **Cecil** und diese in das Menü der Website einfügen. - Einen Account erstellen und einen Schlüssel für Anfragen an die Wetterdaten-API abrufen. - Die erstellte `.md`-Datei durch Hinzufügen von HTML-Code bearbeiten. - Hinzufügen von `assets` (JavaScript und CSS). - Die Lösung anwenden und testen. ### Eine neue Seite erstellen Loggen Sie sich zunächst via SSH auf Ihrem Webhosting ein. Folgen Sie der Anleitung "[Installation und Konfiguration von Cecil](/de/guides/web-cloud/web-hosting/static-website-installation-cecil.md)", um Ihre **Cecil** Anwendung in einem dedizierten Verzeichnis zu installieren. Erstellen Sie ein neues Verzeichnis wechseln Sie zu diesem: ```bash mkdir myWebSite cd myWebSite ``` ### Verwendung der API von OpenWeather Für dieses Tutorial verwenden wir eine API, die von [OpenWeather](https://openweathermap.org/) bereitgestellt wird. Sie ermöglicht es, die meteorologischen Informationen je nach einer spezifizierten Stadt abzurufen. Erstellen Sie einen Account auf [https://home.openweathermap.org/users/sign_up](https://home.openweathermap.org/users/sign_up) . Sobald Ihr Account validiert wurde (per E-Mail), gehen Sie auf zum Menü "My API keys". Es wurde ein Schlüssel erstellt, den Sie hier kopieren und für die Fortsetzung dieses Tutorials speichern können. ![Open Weather API key](/images/assets/screens/other/browsers/web-pages/static-website-installation-cecil-api-call01.png) ### HTML-Code hinzufügen Erstellen Sie eine neue Seite mit folgendem Befehl: ```bash php cecil.phar new:page weather ``` Bearbeiten Sie anschließend die erstellte Seite: ```bash nano pages/weather.md ``` Ändern Sie den Header der Datei, damit die Seite im Menü erscheint: ``` --- title: "Weather" date: 2022-11-28 published: true menu: main --- ``` Fügen Sie nach dem Header den HTML-Code hinzu, um die gewählte Stadt, die von der API zurückgegebenen Temperaturen und einen Button zur Parameteränderung anzuzeigen: ```html --- title: "Weather" date: 2022-11-28 published: true menu: main ---

Weather

Roubaix
°C
Change city
``` Erzeugen Sie die HTML-Seite mit folgendem Befehl: ```bash php cecil.phar build ``` Überprüfen Sie das Ergebnis in Ihrem Browser und klicken Sie auf den Link "Weather", der im Hauptmenü hinzugefügt wurde: ![Test new page](/images/assets/screens/other/browsers/web-pages/static-website-installation-cecil-api-call02.png) ### JavaScript-Code hinzufügen Es ist nicht möglich, einen ` {% endblock %} ``` Wenn eine oder mehrere Dateien in `assets` geändert wurden, muss der Cache mit folgendem Befehl erneuert werden: ```bash php cecil.phar cache:clear:assets ``` Wenn die Änderungen in Ihrem Browser nicht angezeigt werden, leeren Sie den Cache. Sie können auch die auf Ihrem Webhosting erzeugten Dateien löschen: ```bash php cecil.phar clear ``` Regenerieren Sie anschließend die Seite mit folgendem Befehl: ```bash php cecil.phar build ``` #### JavaScript-Datei hinzufügen JavaScript-Dateien, wie etwa CSS-Dateien, sind im Verzeichnis `assets` zu platzieren. Sie können sie in verschiedenen Verzeichnissen organisieren. Erstellen Sie die zuvor erwähnte Datei `script.js` im Wurzelverzeichnis `assets`: ```bash nano assets/script.js ``` Ersetzen Sie den Wert der Variable `apiKey` mit Ihrem zuvor auf [OpenWeather](https://openweathermap.org/) erhaltenen Schlüssel. ```javascript let apiKey = '123456789'; // Ersetzen Sie diesen Wert let city = 'Roubaix'; // Geben Sie hier die Stadt an, die auf der Wetterseite angezeigt wird getTemperature(city); // Aufrufende Funktion mit dem Parameter "city" // Ereignis zum Klick auf "Change City" let button = document.querySelector('#modify'); button.addEventListener('click', () => { city = prompt('Choose a city'); getTemperature(city); }); // API-Funktion unter Verwendung eines Objekts "XMLHttpRequest" für eine asynchrone Anfrage function getTemperature(city) { let url = 'https://api.openweathermap.org/data/2.5/weather?q=' + city + '&appid=' + apiKey + '&units=metric'; let xhrQuery = new XMLHttpRequest(); xhrQuery.open('GET', url); xhrQuery.responseType = 'json'; xhrQuery.send(); xhrQuery.onload = function() { if (xhrQuery.readyState === XMLHttpRequest.DONE) { if (xhrQuery.status === 200) { let city = xhrQuery.response.name; let temperature = xhrQuery.response.main.temp; document.querySelector('#city').textContent = city; document.querySelector('#temperatureValue').textContent = temperature; } else { alert('A problem has occurred, please try later.'); } } }; } ``` ### Tests Rufen Sie Ihre Website nun in einem Webbrowser auf. ![Web page with JavaScript running](/images/assets/screens/other/browsers/web-pages/static-website-installation-cecil-api-call06.png) Klicken Sie auf "Change City" und geben Sie den Namen einer Stadt ein: ![Select a new city](/images/assets/screens/other/browsers/web-pages/static-website-installation-cecil-api-call07.png) ![Updated](/images/assets/screens/other/browsers/web-pages/static-website-installation-cecil-api-call08.png) ### Fazit Dynamische Daten, die über APIs externer Quellen bezogen wurden, können wie oben beschrieben in statische Webseiten integriert werden. Erstellen und pflegen Sie eine Website, indem Sie den Inhalt dieser Seiten manuell ändern oder neue erstellen. Gleichzeitig bereichern sie ihre Inhalte mithilfe externer Websites. ## Weiterführende Informationen [](#) - Weitere APIs für Ihre Website: - [Numbers API](https://numbersapi.com/#42) - [NASA](https://api.nasa.gov/) - [News API](https://newsapi.org/) - [Polygon.io](https://polygon.io/) - [Liste öffentlicher APIs](https://github.com/public-api-lists/public-api-lists) - [Cecil Befehlsreferenz](https://cecil.app/documentation/commands/) Kontaktieren Sie für spezialisierte Dienstleistungen (SEO, Web-Entwicklung etc.) die [OVHcloud Partner](https://partner.ovhcloud.com/de/directory/). Wenn Sie Hilfe bei der Nutzung und Konfiguration Ihrer OVHcloud Lösungen benötigen, beachten Sie unsere [Support-Angebote](https://www.ovhcloud.com/de/support-levels/). Treten Sie unserer [User Community](https://community.ovhcloud.com/) bei.