Monat: März 2023

Starten wir das erste Praxis-Beispiel bzgl. der Fähigkeit von ChatGPT, Code zu generieren. Das Szenario soll eine im Blog eingebettete News-Seite über KI-Themen sein, welche ihren Inhalt über eine Web-API bezieht.

Als Entwickler kennst du sicher das Problem, dass du manchmal einen bestimmten Code benötigst, aber erst aufwendig im Internet darüber recherchieren musst. In solchen Fällen kann ChatGPT eine großartige Ressource sein, um dir bei der Generierung von Beispielcode zu helfen, der an deine spezifischen Anforderungen angepasst werden kann.

Es ist wichtig zu beachten, dass für die Verwendung von ChatGPT zur Code-Generierung allgemeine Programmierkenntnisse erforderlich sind. Du musst wissen, wie du den generierten Code in dein Projekt integrieren und anpassen kannst, um das gewünschte Ergebnis zu erzielen. Möglicherweise musst du im Fehlerfall auch mal selbst Hand anlegen. Dennoch kann ChatGPT ein nützliches Werkzeug für Entwickler sein, die nicht über die erforderlichen Kenntnisse verfügen, um den Code selbst zu schreiben.

Kommen wir nun zum praktischen Teil: Dem Erzeugen einer News-Seite mit Inhalten aus dem KI-Umfeld.

Ein Möglichkeit dafür ist die Verwendung von GDELT, um dynamische Nachrichteninhalte auf einer Website zu generieren. Mit ChatGPT kannst du schnell und einfach Code für die API-Aufrufe generieren und dir in diesem Beispiel auch noch zeigen lassen, wie die Integration in WordPress funktioniert.

GDELT steht für „Global Database of Events, Language, and Tone“ und ist eine Plattform, die Tausende von Nachrichtenquellen auf der ganzen Welt überwacht und analysiert. Die Plattform bietet verschiedene APIs, mit denen Entwickler auf diese Inhalte zugreifen und sie in ihren Anwendungen verwenden können.

Eine dieser APIs ist GDELT Summary, die eine kuratierte Zusammenfassung der wichtigsten Nachrichtenereignisse in Echtzeit bereitstellt. Die Zusammenfassung wird alle 15 Minuten aktualisiert und umfasst eine breite Palette von Themen, darunter Politik, Wirtschaft, Wissenschaft, Technologie und mehr.

Dort kannst du deinen API-Aufruf über eine Oberfläche konfigurieren und testen:

Auf der Ergebnis-Seite kannst du dir dann die zugehörige JSON-Ausgabe ansehen. In der Adressleiste steht dann der String für den API-Aufruf, ggf. musst du die URL-Parameter (wie maxrecords für die Anzahl der Artikel) noch deinen Bedürfnissen anpassen.

Und nun genug Vorgeplänkel – hier der Auszug aus dem Chat:

Wie kann ich in meinem WordPress-Blog dynamischen Content erzeugen? Ich möchte eine WebApi ansteuern, welche mir den Content im JSON-Format zurückgibt

Um dynamischen Content in deinem WordPress-Blog zu generieren, kannst du eine Funktion in deiner functions.php-Datei erstellen, die die Web-API ansteuert und die Daten im JSON-Format abruft. Anschließend kannst du die zurückgegebenen Daten in deinem WordPress-Blog anzeigen lassen.

Hier ist ein Beispiel-Code, der dir zeigen kann, wie du das machen kannst:

function get_api_data() {
  $url = 'https://example.com/api/data.json'; // Ersetze dies mit der URL deiner Web-API

  $response = wp_remote_get( $url );

  if( is_wp_error( $response ) ) {
    return false;
  }

  $data = wp_remote_retrieve_body( $response );

  return json_decode( $data );
}

Die Funktion get_api_data ruft die Web-API auf und gibt die Daten im JSON-Format zurück. Du kannst diese Funktion verwenden, um die Daten in deinem WordPress-Blog anzuzeigen.

Beispielsweise kannst du in deinem Template-File den folgenden Code verwenden, um den Inhalt der Web-API anzuzeigen:

<?php
  $api_data = get_api_data();

  if( $api_data ) {
    foreach( $api_data as $item ) {
      echo '<h2>' . $item->title . '</h2>';
      echo '<p>' . $item->content . '</p>';
    }
  }
?>

In diesem Beispiel gehen wir davon aus, dass die Web-API eine Liste von Artikeln zurückgibt, wobei jeder Artikel einen Titel und einen Inhalt hat. Die Schleife durchläuft jedes Element in der Liste und gibt den Titel und den Inhalt jedes Artikels aus.

Hinweis: Beim Abrufen von Daten aus externen Quellen ist es wichtig, sicherzustellen, dass die Daten zuverlässig sind und dass keine schädlichen Inhalte enthalten sind. Es ist auch wichtig sicherzustellen, dass du die APIs auf sichere Weise abrufst, beispielsweise durch Verwendung von SSL und Authentifizierung, falls erforderlich.

So sieht der Aufruf aus: 

https://api.gdeltproject.org/api/v2/doc/doc?format=html&timespan=24H&query=Artificial%20Intelligence%20sourcelang:eng&mode=artlist&maxrecords=1&format=json&sort=hybridrel 

und zurückgeliefert wird folgendes JSON: 

{"articles": [ { "url": "https://investorplace.com/2023/02/the-future-of-ai-stocks-7-companies-to-keep-your-eye-on/", "url_mobile": "", "title": "The Future of AI Stocks : 7 Companies to Keep Your Eye On", "seendate": "20230228T161500Z", "socialimage": "https://investorplace.com/wp-content/uploads/2023/02/artificial-intelligence-ai-green-1600.jpg", "domain": "investorplace.com", "language": "English", "sourcecountry": "United States" }] }

Basierend auf dem Beispiel-JSON, das du bereitgestellt hast, kannst du die Daten in deinem WordPress-Blog wie folgt anzeigen:

<?php
  $url = 'https://api.gdeltproject.org/api/v2/doc/doc?format=html&timespan=24H&query=Artificial%20Intelligence%20sourcelang:eng&mode=artlist&maxrecords=1&format=json&sort=hybridrel';

  $response = wp_remote_get( $url );

  if( is_wp_error( $response ) ) {
    echo 'Fehler beim Abrufen der Daten';
  } else {
    $data = json_decode( wp_remote_retrieve_body( $response ) );

    if( $data && !empty( $data->articles ) ) {
      foreach( $data->articles as $article ) {
        echo '<h2>' . $article->title . '</h2>';
        echo '<img src="' . $article->socialimage . '">';
        echo '<p>' . $article->seendate . '</p>';
        echo '<p>' . $article->url . '</p>';
      }
    } else {
      echo 'Keine Artikel gefunden';
    }
  }
?>

In diesem Beispiel wird die wp_remote_get-Funktion verwendet, um die Daten von der angegebenen URL abzurufen. Anschließend wird überprüft, ob ein Fehler aufgetreten ist, und die JSON-Daten werden dekodiert und in einer Schleife durchlaufen, um die Daten anzuzeigen.

In diesem Fall werden der Titel des Artikels, das soziale Bild, das Veröffentlichungsdatum und die URL des Artikels angezeigt. Du kannst die Anzeige jedoch nach Belieben anpassen, um die gewünschten Daten anzuzeigen.

Wie funktioniert der API-Aufruf über die functions.php?

Um den API-Aufruf in deiner WordPress-Seite über die functions.php-Datei zu implementieren, kannst du den folgenden Code verwenden:

function display_api_data() {
    $url = 'https://api.gdeltproject.org/api/v2/doc/doc?format=html&timespan=24H&query=Artificial%20Intelligence%20sourcelang:eng&mode=artlist&maxrecords=1&format=json&sort=hybridrel';

    $response = wp_remote_get( $url );

    if ( is_array( $response ) ) {
        $headers = $response['headers'];
        $body    = json_decode( $response['body'], true );

        if ( ! empty( $body ) && isset( $body['articles'] ) ) {
            $articles = $body['articles'];

            foreach ( $articles as $article ) {
                $title = $article['title'];
                $url   = $article['url'];
                $image = $article['socialimage'];

                echo '<div>';
                echo '<h2>' . $title . '</h2>';
                echo '<img src="' . $image . '" />';
                echo '<p><a href="' . $url . '">Read more</a></p>';
                echo '</div>';
            }
        }
    }
}

Dieser Code ruft die API-URL auf und gibt die JSON-Daten aus. Du kannst den Code anpassen, um den Inhalt deiner Seite zu generieren, indem du die foreach-Schleife entsprechend deiner Anforderungen änderst und den Inhalt der echo-Anweisungen anpasst.

Um den Code auszuführen, kannst du die Funktion display_api_data() in einer WordPress-Seite oder einem Post mit dem Shortcode [api_data] einbetten. Dazu musst du den folgenden Code in deiner functions.php-Datei hinzufügen:

function api_data_shortcode() {
    ob_start();
    display_api_data();
    return ob_get_clean();
}
add_shortcode( 'api_data', 'api_data_shortcode' );

Dieser Code registriert einen Shortcode [api_data], der die Funktion display_api_data() ausführt und den generierten Inhalt auf der Seite ausgibt. Du kannst den Shortcode auf einer beliebigen WordPress-Seite oder einem Post verwenden, indem du den folgenden Code in den Editor eingibst:

[api_data]

Wo finde ich die functions.php Datei?

Die functions.php-Datei befindet sich im Ordner des aktiven WordPress-Themes und enthält Funktionen und Filter, die auf der Website verwendet werden können. Der Pfad zur functions.php-Datei lautet normalerweise:

/wp-content/themes/your-theme/functions.php

Ersetze your-theme durch den Namen deines aktiven WordPress-Themes. Wenn du das Standard-Theme "Twenty Twenty-One" verwendest, lautet der Pfad zur functions.php-Datei:

/wp-content/themes/twentytwentyone/functions.php

Du kannst auf die functions.php-Datei über das Dashboard deiner WordPress-Website zugreifen. Gehe dazu zum Menü "Design" und klicke auf "Theme Editor". Wähle dann das aktive Theme aus der Dropdown-Liste oben rechts aus und wähle die Datei functions.php aus der Liste der Theme-Dateien auf der rechten Seite aus. Du kannst den Code direkt im Editor bearbeiten und speichern. Beachte jedoch, dass ein Fehler im Code deine Website beschädigen oder unbrauchbar machen kann, wenn du die functions.php-Datei bearbeitest. Es wird empfohlen, eine Sicherungskopie der Datei zu erstellen, bevor du Änderungen vornimmst.

In diesem Artikel haben wir gezeigt, wie du mit ChatGPT eine Funktion in der functions.php-Datei von WordPress generieren kannst, die die GDELT-API aufruft und die neuesten Nachrichten abruft. Das Ergebnis kannst du auf der News-Seite sehen.

Wichtig bei der unterstützten Programmierung mit ChatGPT ist, dass du den Programmcode im Dialog von ChatGPT optimieren lassen kannst und auch häufig musst. Auf die Tipps und Tricks im Umgang mit ChatGPT bzgl. der Code-Generierung wird es aber noch einen eigenen Beitrag geben.

Insgesamt kann die Verwendung von ChatGPT die Effizienz deiner Arbeit als Entwickler steigern, indem sie dir dabei hilft, schnell und einfach Beispielcode zu generieren. Ob es um die Integration von APIs oder um andere Anwendungsfälle geht, ChatGPT kann ein nützliches Werkzeug sein, um Zeit zu sparen und deine Entwicklungsarbeit zu beschleunigen.