Erstellen Sie eine benutzerdefinierte API, um WordPress mit Ruby on Rails zu verbinden

() translation by (you can also view the original English article)

Final product image — What You'll Be Creating

Es war einmal, dass Webanwendungen Monolithen waren, die alles alleine machten. In diesen Tagen nicht so sehr. Mit der Öffnung der APIs durch Webdienste verwenden Entwickler Anwendungen von Drittanbietern, um Teile der Funktionalität zu verwalten, z. B. die Authentifizierung oder das Versenden von E-Mails an Benutzer.

Während der häufigste Fall ein Fall ist, in dem Sie eine API verwenden, um eine Verbindung zu einem der beliebten Onlinedienste (Google, Twitter usw.) herzustellen, sind manchmal beide Anwendungen, die Sie verbinden möchten, Ihre eigenen.

Das ist mir vor einiger Zeit passiert: Ich hatte einen benutzerdefinierten Einkaufswagen als Ruby on Rails-Anwendung erstellt und war eine Weile glücklich, ihn zusammen mit einer einfachen HTML-Landingpage zu verwenden. Nach einiger Zeit stellte ich jedoch fest, dass ich die Zielseite auf etwas aktualisieren musste, das häufiger aktualisiert wurde, um sie ansprechender zu gestalten. Ich wollte einen Blog, und so war WordPress die natürliche Wahl.

Mit der erstellten WordPress-Site war alles gut, bis auf eine Kleinigkeit: Als Besucher Artikel in den Warenkorb legten und dann zum Einkaufen zurückkamen, vergaßen sie, dass sie Artikel in ihren Warenkorb gelegt hatten! Der Einkaufswagen und die Website mussten zusammenarbeiten. Ich musste den Inhalt des Warenkorbs auf der Hauptwebsite anzeigen.

Dies war ein Ort für einige API-Entwicklungen.

Indem ich die Warenkorb-API der Welt zugänglich mache und sie dann von meinem WordPress-Thema aus aufrufe, kann ich die Daten auf elegante Weise weitergeben, ohne eines der beiden Systeme zu hacken.

In diesem Tutorial werde ich auf der Grundlage der bei diesem Projekt gewonnenen Erkenntnisse beide Enden der API-Kommunikation durchgehen: Zunächst erstellen wir mithilfe des Edelsteins Grape eine API, um einen Teil eines Ruby on Rails-basierten zu verfügbar zu machen Einkaufswagen zu externen Anwendungen. Anschließend verwenden wir die API, um den Inhalt des Warenkorbs abzurufen und auf einer WordPress-Site anzuzeigen. Abhängig von Ihren Anforderungen werden Sie möglicherweise feststellen, dass das Erstellen der API Sie interessiert oder dass Sie sich tatsächlich nur für den Teil zum Aufrufen einer externen API aus WordPress interessieren. In jedem Fall hoffe ich, dass Sie das Tutorial nützlich und interessant finden.

Um den Code in diesem Tutorial auszuführen, müssen Sie Folgendes einrichten:

Ruby on Rails Version 3.2
PHP 5.3
cURL und seine PHP / Apache-Bibliotheken

Während das Tutorial nicht wirklich kompliziert ist, ist ein grundlegendes Verständnis von Ruby und Ruby on Rails sowie von PHP und WordPress erforderlich.

1. Lernen Sie die Beispielanwendung kennen

Da Sie planen, eine Ruby on Rails-Anwendung mit einer WordPress-basierten Website zu verbinden, können Sie davon ausgehen, dass bereits eine Rails-Anwendung - und möglicherweise sogar eine WordPress-Site - in Betrieb ist. Für die Anforderungen des Tutorials habe ich eine vereinfachte, aber funktionale Version des Warenkorbs erstellt, in der Methoden für die erforderlichen grundlegenden Aktionen vorhanden sind.

Sie können den Beispielcode herunterladen oder einfach das Tutorial lesen und auf ein eigenes Rails-Projekt anwenden.

Das Beispielprojekt Ruby on Rails ist einfach und besteht nur aus einem Modell (ShoppingCart) und einem Controller (ShoppingCartController). Im ShoppingCart-Modell finden Sie folgende Methoden:

find_or_create_with(token): Diese statische Methode sucht nach und gibt ein Warenkorbobjekt mit dem angegebenen identifizierenden Token zurück. Wird einer nicht gefunden (oder es wird kein Token ausgegeben), wird ein neuer Warenkorb erstellt und zurückgegeben.
token: Diese Methode gibt ein Token zurück, das das aktuelle Warenkorbobjekt identifiziert.
as_json: Diese Methode gibt den Inhalt des Warenkorbs als JSON-formatierte Zeichenfolge zurück.

Der Controller ShoppingCartController enthält eine Aktion zum Hinzufügen von Artikeln zu einem Warenkorb. Die Aktion add akzeptiert zwei Parameter: token und (Produkt-) id:

http://<SERVER_PATH>/shopping_cart/add/<id>?token=<token>

Wir werden später darauf zurückkommen, aber jetzt können wir uns an die Arbeit machen und die API für den Warenkorb erstellen.

2. Installieren Sie Grape und erstellen Sie eine API

Nachdem das Rails-Projekt eingerichtet wurde, ist es an der Zeit, mit der Erstellung der API zu beginnen.

Um unsere API zu erstellen, verwenden wir ein Tool namens Grape. Grape ist ein Mikro-Framework, das für die Implementierung einfacher, REST-ähnlicher APIs in Situationen entwickelt wurde, in denen, wie die Entwickler sagen, "die hohe Hubkraft großer Frameworks wie Rails nicht erforderlich ist".

Das Grape-Framework kann einzeln verwendet werden, befindet sich aber auch gut neben Rails und bietet eine einfache Möglichkeit, APIs für den Zugriff auf eine Teilmenge (oder warum nicht alle) der Funktionen Ihrer Rails-Anwendung zu erstellen. Genau das werden wir in diesem Tutorial tun.

Schritt 1: Grape installieren

Fügen Sie Ihrem Gemfile die folgende Zeile hinzu, um den Gemfile zu Ihrem Rails-Projekt hinzuzufügen:

1	gem 'grape'

Aktualisieren Sie dann Ihre Edelsteine, indem Sie (in der Befehlszeile) anrufen:

1	bundle install

Das war's. Der Edelstein wurde installiert und wir können ihn verwenden.

Schritt 2: Konfigurieren Sie die Grape-Pfade

Um mit dem Schreiben der API zu beginnen, müssen Sie zunächst eine Ruby-Quelldatei erstellen, die die API-Funktionalität enthält. Dies ist ein leichtes Framework, sodass wir die gesamte API in nur einer Datei schreiben können. Platzieren Sie diese Datei in Ihrer Rails-Anwendung in einem Verzeichnis namens api direkt unter dem Hauptverzeichnis der app.

Im Beispielprojekt finden Sie den API-Code in app/api/cart_external.rb.

Fügen Sie der Konfigurationsdatei application.rb die folgenden Zeilen hinzu, um sicherzustellen, dass die Dateien in app/api enthalten sind:

1	config.paths.add "app/api", glob: "*/.rb"
2	config.autoload_paths += Dir["#{Rails.root}/app/api/*"]

Schritt 3: Erstellen Sie das API-Modul

In der API-Quelldatei definieren wir nun ein Modul, das unsere API-Klasse enthält:

module CartExternal

  class API < Grape::API
    version 'v1', :using => :path
    format :json

    helpers do
    end

    resource :cart do
    end
  end

end

Dies ist die einfachste Version des Inhalts einer einfachen Grape-API. Zu diesem Zeitpunkt macht es noch nichts, aber werfen wir einen Blick auf die Konfigurationselemente am Anfang des Codes innerhalb der Klasse.

Zunächst gibt die Zeilen version 'v1', :using => : path an, dass dies die Version v1 der API ist und dass die Version, auf die der API-Benutzer zugreifen möchte, in der URL definiert werden sollte, z. B. http://localhost:3000/v1/. Weitere Optionen für dieses Konfigurationsfeld sind :header, :accept_version_header und :param, wobei jede eine andere Methode zum Übergeben der Versionsinformationen definiert. Weitere Informationen zur Verwendung der einzelnen Grape finden Sie in der Dokumentation zu Grape.
format :json weist Grape an, ausgehende Antworten als JSON-formatierte Zeichenfolgen zu codieren (:txt und :xml können ebenfalls verwendet werden).

Schritt 4: Mounten Sie die API

Bevor wir der API als letzten Einrichtungsschritt Funktionen hinzufügen, deklarieren Sie die API-Klasse für Ihre Rails-Anwendung, damit diese weiß, dass sie für Personen und Dienste bereitgestellt werden soll, die sie anfordern.

Fügen Sie dazu die folgende Zeile zu config/routes.rb hinzu:

1	mount CartExternal::API => '/'

2. Lassen Sie die API etwas tun

Kehren wir nun zu der oben definierten CartExternal::API-Klasse zurück.

Schritt 1: Definieren Sie eine Ressource

In der API-Klasse finden Sie zwei Elemente, die ich noch nicht erwähnt habe: helpers und resource.

helpers ist ein Makro, das zusammen mit einem Block (oder einem Modul) verwendet werden kann, um Hilfsmethoden einzuführen, die dann in den API-Aktionen verwendet werden können. Diese Methoden können beispielsweise Helfer sein, die zum Überprüfen von API-Parametern benötigt werden, oder Methoden zum Kontaktieren der übergeordneten Rails-Anwendung.
resource definiert eine logische Sammlung von API-Methoden. Sie können so viele hinzufügen, wie Sie möchten, aber in unserem Fall werden wir mit nur einem gut zurechtkommen, den wir als :cart bezeichnen werden. Diese Ressource enthält alle API-Methoden, die sich auf den Warenkorb beziehen. Mit diesen Definitionen werden alle Aufrufe von http://<APPLICATION_PATH>/v1/cart an unsere Ressource und die darin definierten Aktionen weitergeleitet.

Schritt 2: Erstellen Sie Ihre erste API-Aktion

Um zu sehen, wie dies funktioniert, erstellen wir zunächst einen API-Aufruf zum Abrufen der Artikel in einem Warenkorb, der durch den Parameter Token gekennzeichnet ist.

Fügen Sie im resources-Block den folgenden Code hinzu:

desc 'Return items in cart.'
params do
  optional :token, type: String, default: nil
end
get '/items' do
  token = params[:token]
  
  cart = ShoppingCart.find_or_create_with token

  response = {
    status: 200,
    token: cart.token,
    cart: cart.as_json
  }

  response.as_json
end

Jetzt haben wir eine Aktion erstellt, die auf GET-Anforderungen reagiert, die an den Pfad /items gesendet werden.

Die Aktion verwendet einen optionalen Zeichenfolgenparameter, token, der im params-Block deklariert ist. Das Deklarieren von Parametern ist zwar nicht obligatorisch, es empfiehlt sich jedoch, da Ihr Code besser lesbar ist und Sie Zeit sparen, da Grape den größten Teil der Parameterüberprüfung für Sie erledigt. Für erforderliche Parameter können Sie ein ähnliches Konstrukt verwenden und optional durch require ersetzen. Erforderliche Parameter dürfen keinen Standardwert haben.

Unsere Aktion sucht in einem Warenkorb, der dem Token entspricht, oder erstellt einen neuen, wenn kein Token übergeben wird. Anschließend wird eine JSON-codierte Antwort zurückgegeben, die aus einem Status, dem tatsächlichen Warenkorb-Token und dem Inhalt des Warenkorbs besteht.

Schritt 3: Testen Sie die API-Aktion

Wenn Sie Ihre Rails-Anwendung lokal ausführen, können Sie jetzt Ihren Server starten und Ihren Browser auf http://localhost:3000/v1/cart/items verweisen, um die Antwort anzuzeigen, die ungefähr so aussehen sollte:

1	{"status":200,"token":"XBrf2nCkTYfQJoU8d4A1nw","cart":{"item_count":0,"items":[]}}

Da wir in unserem Anruf kein Token übergeben haben, wurde ein neuer Warenkorb erstellt und ein zufällig generierter, eindeutiger Token-Wert zugewiesen. Deshalb ist der Wagen auch noch leer.

Wenn Sie möchten, können Sie zum Testen die Aktion Hinzufügen in ShoppingCartController verwenden, um einen Artikel in den Warenkorb zu legen:

http://localhost:3000/shopping_cart/add/1?token=TOKEN_FROM_PREVIOUS_CALL

Wenn Sie nach dem Hinzufügen des Produkts die API erneut aufrufen, werden Sie feststellen, dass sich jetzt ein Artikel im Warenkorb befindet:

{"status":200,"token":"XBrf2nCkTYfQJoU8d4A1nw","cart":{"item_count":1,"items":[{"cart_id":2,"created_at":"2014-05-20T16:44:24Z","id":4,"product_id":1,"product_name":"Test Product","product_price":"10.0","updated_at":"2014-05-20T16:44:24Z"}]}}

Fügen Sie so viele Elemente hinzu, wie Sie möchten. Bevor Sie weitere Funktionen hinzufügen, schließen Sie das Setup ab und lassen WordPress mit der API sprechen.

3. Rufen Sie die API von WordPress aus auf

Wir haben die API jetzt getestet, indem wir sie über einen Webbrowser aufgerufen haben. Als nächstes ist es an der Zeit, WordPress mit ihr zu kommunizieren.

Der folgende WordPress-Code kann entweder in einem WordPress-Plugin oder in der functions.php eines WordPress-Themas enthalten sein, abhängig von Ihrem Projekt und dem Kontext, in dem die API-Kommunikation benötigt wird. In meiner eigenen Warenkorbintegration habe ich mich der Einfachheit halber dazu entschlossen, den Code in ein untergeordnetes Thema einzufügen.

Unabhängig davon, für welchen Weg Sie sich entscheiden, der Code ist derselbe.

Schritt 1: Erstellen Sie eine Funktion zum Aufrufen der API

Öffnen Sie Ihre Datei functions.php (oder eine geeignete Plugin-PHP-Datei) und fügen Sie die folgende PHP-Funktion ein. Es handelt sich um eine Hilfsfunktion, die die API-Kommunikation kapselt, sodass Sie sie in Zukunft an einem Ort ausführen können, wenn Sie die API-Signatur oder andere generische Elemente in den Aufrufen ändern müssen.

Hier sind die Knochen dessen, was in dieser Funktion sein muss:

function api_get_as_json( $action, $params ) {

    $api_endpoint = "http://localhost:3000/v1/cart";

    if ( null == $params ) {
        $params = array();
    }

    // Create URL with params
    $url = $api_endpoint . $action . '?' . http_build_query($params);

    // Use curl to make the query
    $ch = curl_init();

    curl_setopt_array(
        $ch, array( 
            CURLOPT_URL => $url,
            CURLOPT_RETURNTRANSFER => true
        )
    );

    $output = curl_exec($ch);

    // Decode output into an array
    $json_data = json_decode( $output, true );

    curl_close( $ch );

    return $json_data;
}

Die Funktion nimmt den Pfad zur API-Aktion und die erforderlichen Parameter auf, kombiniert sie zu einer URL und verwendet dann cURL, um eine Anforderung an die API zu senden.

Nach Erhalt der Antwort analysiert die Funktion sie mit json_decode, einer Funktion, die Teil der Standard-PHP-Bibliotheken ist, in ein Array.

Schritt 2: Rufen Sie die API auf und rendern Sie die Antwort

Nachdem wir die Funktionalität zum Aufrufen der API erstellt haben, können Sie damit den Inhalt des Warenkorbs über unsere API-Methode /cart/items abfragen und dann die Antwort ausdrucken:

function show_shopping_cart() {
    $cart_data = api_get_as_json('/items', null);
?>    
    <div class="shopping-cart">
        <h3>Shopping Cart</h3>
        <ul>
        <?php if (isset($cart_data["cart"]["items"]) 
                    && $cart_data["cart"]["items"].length > 0) : ?>

            <?php foreach ($cart_data["cart"]["items"] as $item) : ?>  
                <li>
                    <?php echo $item["product_name"]; ?> 
                    $<?php echo $item["product_price"]; ?>
                </li>
            <?php endforeach; ?>

        <?php else : ?>

            Your shopping cart is empty.

        <?php endif; ?>
        </ul>
    </div>
    
    <div style="margin-top: 20px;">
        <pre style="font-size: 8pt;"><?php print_r($cart_data); ?></pre>
    </div>
<?php
}

Die Funktion führt einen API-Aufruf von /items durch und druckt die Antwort mit einigen grundlegenden HTML-Formatierungen aus. Am Ende der Funktion habe ich einen einfachen print_r-Block eingefügt, um den Inhalt der JSON-Antwort für Debugging-Zwecke zu rendern.

Dies ist besonders am Anfang nützlich, wenn der Warenkorb noch leer ist und wir sicherstellen möchten, dass keine Kommunikationsfehler vorliegen, die verhindern, dass der Code seinen Inhalt anzeigt.

Schritt 3: Verbinden Sie die Funktion mit WordPress

Nachdem wir nun die Funktionen zum Tätigen des Anrufs und zum Drucken der Antwort haben, müssen wir sie nur noch von WordPress aufrufen lassen.

Der einfachste Weg, dies zu tun, besteht darin, direkt zu den Vorlagendateien des Themas zu gehen und show_shopping_cart genau dort aufzurufen, wo Sie den Warenkorb anzeigen möchten. Wenn das Thema Ihr eigenes ist und Sie sicher sind, dass dies alles ist, was Sie brauchen, ist es möglicherweise eine praktikable Option.

Am anderen Ende des Spektrums befindet sich der flexibelste und benutzerfreundlichste Ansatz, den Anruf in ein WordPress-Widget einzubetten. Auf diese Weise können Sie den Einkaufswagen verschieben und in einem beliebigen Seitenleistenbereich Ihrer WordPress-Site platzieren. Es ist gar nicht so schwer, also lass uns weitermachen und das tun.

Wir benötigen lediglich eine WP_Widget-Unterklasse mit einem Konstruktor und Code zum Rendern des Warenkorbinhalts im Funktions-widget. Die beiden anderen Funktionen, form und options können vorerst leer gelassen werden (wenn Sie dem Widget eine Anpassung hinzufügen möchten, wird dies der richtige Ort sein).

class ShoppingCartWidget extends WP_Widget {

    public function __construct() {
        parent::__construct(
            'shopping_cart_widget',
            __( 'Shopping Cart Widget', 'shopping_cart' ),
            array( 'description' => __( 'A widget for displaying a shopping cart.', 'shopping_cart' ) )
        );
    }

    /**
     * Outputs the content of the widget
     */
    public function widget( $args, $instance ) {
        echo $args['before_widget'];

        show_shopping_cart();

        echo $args['after_widget'];
    }

    /**
     * Outputs the options form.
     */
    public function form( $instance ) {
        // The widget takes no options
    }

    /**
     * Processing widget options on save
     */
    public function update( $new_instance, $old_instance ) {
        // The widget takes no options
    }
    
}

function register_shopping_cart_widget() {
    register_widget( 'ShoppingCartWidget' );
}
add_action('widgets_init', 'register_shopping_cart_widget');

Gehen Sie jetzt zu Ihrem WordPress-Administrator und ziehen Sie das Widget Shopping Cart Widget in eine Ihrer Seitenleisten:

Besuchen Sie jetzt die WordPress-Site, um den Code in Aktion zu sehen. Sie sollten so etwas sehen:

Ihr Warenkorb ist noch leer, aber wie Sie in der Ausgabe print_r unter dem Warenkorb sehen können, funktioniert die Kommunikation und der WordPress-Blog empfängt Daten von unserer Rails-Anwendung.

Schauen wir uns nun mit den Grundlagen an, wie wir die Kommunikation ein bisschen sicherer machen können.

4. Sichern Sie die Verbindung mit einem API-Schlüssel

Wir haben jetzt eine API für eine Ruby on Rails-Anwendung erstellt und diese von einer WordPress-Site aus aufgerufen. Es fehlt jedoch noch etwas Wichtiges: Sichern der API, damit nicht jeder im Internet nach Belieben anrufen kann. Ich bin sicher, Sie können sich alle möglichen schlechten Dinge vorstellen, die passieren würden, wenn Sie die Tür für alle offen lassen würden, oder?

Eine einfache Möglichkeit, eine API zu sichern, besteht darin, für jede Anwendung, die Sie zum Aufrufen Ihrer API zulassen, einen geheimen Schlüssel zu generieren. Auf diese Weise muss eine Anwendung bei jeder Anforderung an die API ihren API-Schlüssel senden, damit der Server sie überprüfen kann. Anrufer ohne gültigen API-Schlüssel dürfen keine Anfragen stellen. Für zusätzliche Sicherheit enthalten die meisten Dienste zusätzlich zum API-Schlüssel auch ein API-Geheimnis.

Lassen Sie uns nun wieder an die Arbeit gehen und den API-Schlüssel zuerst zu unserem Ruby-Code und dann auf der WordPress-Seite hinzufügen.

Schritt 1: Fügen Sie eine Methode zum Überprüfen des API-Schlüssels hinzu

Fügen Sie zunächst eine Methode zum Überprüfen des API-Schlüssels hinzu. Dieser geht in den helpers-Block Ihrer API-Klasse:

1	def is_valid_api_key?(key)
2	key == 'API_KEY'
3	end

Dies ist eine einfache Version mit nur einem API-Schlüssel. Abhängig von Ihrer Anwendung müssen Sie sie möglicherweise erweitern. Wenn Sie beispielsweise mehrere Anwendungen haben, die die API aufrufen, müssen Sie für jede Anwendung einen eindeutigen API-Schlüssel definieren und in der Datenbank speichern. Möglicherweise möchten Sie auch eine Administrationsseite zum Erstellen neuer API-Schlüssel erstellen.

Zumindest müssen Sie API_KEY durch einen echten, generierten Schlüssel ersetzen, der nicht leicht zu erraten ist. In diesem Beispiel ist es jedoch nur wichtig, dass Sie über einen API-Schlüssel und eine Methode verfügen, mit der überprüft werden kann, ob der übergebene Schlüssel mit dem im System gespeicherten übereinstimmt.

Schritt 2: Verwenden Sie die Hilfsmethode, um einen API-Schlüssel zu überprüfen

Mit der vorhandenen Hilfsmethode können wir die Prüfung zu unserem einzigen API-Aufruf hinzufügen, indem wir den darin enthaltenen Code mit dem folgenden if...else-Konstrukt umgeben:

if is_valid_api_key? params[:key]
  token = params[:token]

  cart = ShoppingCart.find_or_create_with token

  response = {
    status: 200,
    token: cart.token,
    cart: cart.as_json
  }

  response.as_json
else
  error!('401 Unauthorized', 401)
end

Beachten Sie den else-Block, in dem wir mit dem Grape-Methodenfehler einen error! auslösen.

Starten Sie nun den Rails-Server neu und laden Sie Ihre WordPress-Homepage neu. Sie sehen Folgendes:

Dies liegt daran, dass wir den API-Schlüssel noch nicht zu unserem WordPress-Code hinzugefügt haben und die Rails-API die von ihr gestellten Anforderungen nicht mehr akzeptiert. Wenn Sie möchten, können Sie an dieser Stelle eine ordnungsgemäße Fehlerbehandlung hinzufügen und eine nette Fehlermeldung anzeigen.

Fahren wir dann fort und lassen den API-Aufruf wieder funktionieren.

Schritt 3: Einstellungsfeld für API-Schlüssel hinzufügen

Im Moment können Sie den API-Schlüssel in Ihrer Funktion api_get_as_json einfach hart codieren. Da das Hinzufügen neuer Optionen zur Seite Allgemeine WordPress-Einstellungen jedoch sehr einfach ist, lassen Sie uns dies über ein Einstellungsfeld tun.

Und während wir es hinzufügen, können wir auch eine Option zum Definieren der URL für die API hinzufügen.

Auf diese Weise können Sie den WordPress-Code später, wenn Sie ihn auf einem tatsächlichen Live-Server bereitstellen, konfigurieren, ohne den Code berühren zu müssen - was immer hilfreich ist.

$cart_api_settings_field = new CartApiSetting();

class CartApiSetting {
    function CartApiSetting() {
        add_filter( 'admin_init', array( $this , 'register_fields' ) );
    }

    function register_fields() {
        register_setting( 'general', 'cart_api_key', 'esc_attr' );

        add_settings_field( 'cart_api_key', 
             '<label for="cart_api_key">' . __( 'Shopping Cart API key' , ‘shopping_cart’ ).'</label>' , 
              array( $this, 'fields_html' ) , 'general' );
    }

    function fields_html() {
        $value = get_option( 'cart_api_key', '' );
        echo '<input type="text" id="cart_api_key" name="cart_api_key" value="' . $value . '" />';
    }
}

Hier ist die Definition des Einstellungsfelds für die API-Endpunkt-URL unter Verwendung desselben Konstrukts:

$cart_api_endpoint_settings_field = new CartApiEndpointSetting();

class CartApiEndpointSetting {
    function CartApiEndpointSetting() {
        add_filter( 'admin_init', array( $this, 'register_fields' ) );
    }

    function register_fields() {
        register_setting( 'general', 'cart_api_endpoint', 'esc_attr' );

        add_settings_field( 'cart_api_endpoint', 
             '<label for="cart_api_endpoint">' . __( 'Shopping Cart API URL' , ‘shopping_cart’ ).'</label>' , 
              array( $this, 'fields_html' ) , 'general' );
    }

    function fields_html() {
        $value = get_option( 'cart_api_endpoint', '' );
        echo '<input type="text" id="cart_api_endpoint" name="cart_api_endpoint" value="' . $value . '" />';
    }
}

Besuchen Sie das Menü Allgemeine Einstellungen von WordPress, um die richtigen Werte für diese Einstellungen festzulegen, und stellen Sie sicher, dass der API-Schlüssel mit dem Wert übereinstimmt, den Sie in Ihrem Rails-Dienst festgelegt haben.

Schritt 4: API-Schlüssel mit API-Anforderungen übergeben

Nachdem der API-Schlüssel und die URL in den WordPress-Optionen gespeichert sind, aktualisieren wir nun die Funktion, mit der der API-Aufruf ausgeführt wird.

Die Änderungen werden am Anfang der Funktion folgendermaßen vorgenommen:

function api_get_as_json($action, $params) {

    if ( null == $params ) {
        $params = array();
    }

    $api_key = get_option( "cart_api_key" );
    $api_endpoint = get_option( "cart_api_endpoint" );

    if ( ! isset( $api_key ) || ! isset( $api_endpoint ) ) {
        return false;
    }

    $params["key"] = $api_key;
    
}

Wenn Sie sich den neuen Code oben ansehen, werden Sie feststellen, dass die Einstellungen $api_key und $api_endpoint aus den WordPress-Optionen gelesen werden. $api_endpoint wurde bereits verwendet, um die aufzurufende URL zu erstellen. Für $api_key müssen wir jedoch eine Zeile (14) hinzufügen, um den Wert in die an die API gesendeten Parameter aufzunehmen.

Aktualisieren Sie Ihre WordPress-Homepage und der Inhalt des Warenkorbs wird erneut angezeigt, diesmal mit einem API-Schlüssel gesichert. Alles sieht gut aus - genau wie zuvor, als Sie den API-Schlüssel benötigt haben - und Sie haben die Rails-Anwendung mit Ihrer WordPress-Site verbunden.

5. Fügen Sie eine gemeinsame Sitzung hinzu

Der WordPress-Code, den wir bisher geschrieben haben, führt API-Aufrufe durch und sichert sie mit einem API-Schlüssel, jedoch auf völlig zustandslose Weise. Für einfache, zustandslose Aktionen wie das Posten von Updates auf einem Message Board oder auf Ihrer eigenen Twitter-ähnlichen Microblogging-Plattform sind einmalige Anrufe wie diese alles, was Sie benötigen. Für unser Warenkorbbeispiel reicht dies jedoch nicht aus.

Wie Sie beim Testen des Codes feststellen, haben wir unseren Token nirgendwo verwendet, obwohl unser Rails-Server einen Warenkorb mit einem Token identifiziert. Daher erstellt der Server jedes Mal, wenn ein Aufruf des cart/list erfolgt, einen neuen, leeren Warenkorb.

Nicht sehr gut. Damit eine Warenkorbverbindung von Nutzen ist, müssen Sie in der Lage sein, Artikel zu Ihrem Warenkorb hinzuzufügen und dort eine Weile zu belassen, selbst wenn Sie von einer Seite zur anderen wechseln.

Mit einem Wort, Sie brauchen eine Sitzung.

Es gibt mehrere Möglichkeiten, wie Sie eine Sitzung erstellen können. Lassen Sie uns jedoch die einfachste verwenden: Verwenden Sie das von der Rails-Anwendung an uns übergebene Token und speichern Sie es in einem Client-Cookie. Da Ihre WordPress-Site die Schnittstelle ist, die der Benutzer (und sein Webbrowser) sieht und mit der er kommuniziert, müssen wir auch das Cookie setzen.

Schritt 1: Setzen Sie ein Cookie

Cookies können nur in der Kopfzeile gesetzt werden, bevor Inhalte gerendert wurden. Daher müssen wir den Code neu anordnen und den Aufruf /cart/items im Ausführungsablauf verschieben. Dazu erstellen wir eine neue PHP-Funktion, get_shopping_cart, und rufen sie gleich zu Beginn der Ausführung der WordPress-Site auf.

Dies kann mit WordPress-Action-Hooks erfolgen. Eine vollständige Liste der Hooks finden Sie im WordPress-Codex. In diesem Fall macht die Aktion init das, was wir brauchen. Lassen Sie uns also unsere Anfrage an diese binden.

add_action( "init", "get_shopping_cart" );

Die Funktion get_shopping_cart selbst sieht folgendermaßen aus:

function get_shopping_cart() {

    $cart_data = api_get_as_json( '/items', null );
    $token = $cart_data['token'];

    // Expire cookie in 30 minutes    
    setcookie( 'bread_cart', $token, time() + 60 * 30 );
    set_saved_cart_data( $cart_data );
    
}

Zunächst ruft die Funktion unsere API-Aktion /items auf. Dann haben wir etwas Neues: In Zeile 3 extrahieren wir das von der API zurückgegebene Warenkorb-Token und speichern es einige Zeilen später in einem Cookie. Der Cookie läuft in 30 Minuten ab, da ich davon ausgehe, dass jemand, der in einem Online-Shop einkauft, den Shop zu diesem Zeitpunkt vergessen hat...

In Zeile 7 bemerken Sie möglicherweise einen weiteren neuen Funktionsaufruf: set_saved_cart_data. Wir werden gleich darauf zurückkommen. Lassen Sie uns zunächst die API-Aufrufe auch das Token verwenden.

Schritt 2: Verwenden Sie das Token aus dem Cookie

Erstellen wir zunächst eine Hilfsfunktion, um das Token aus dem Cookie abzurufen:

function api_shopping_cart_token() {

    $token = null;

    if ( isset( $_COOKIE[‘shopping_cart_token’] ) ) {
        $token = $_COOKIE['shopping_cart_token'];
    }    

    return $token;
}

Fügen Sie dann mit dieser Funktion die folgende Zeile zu api_get_as_json hinzu, direkt nach der Zeile, in der wir den API-Schlüsselparameter festgelegt haben:

1	$params['token'] = api_shopping_cart_token();

Mit diesem Zusatz sucht die Methode api_get_as_json bei jedem Aufruf der API das Warenkorb-Token aus dem Cookie und fügt es den Anforderungsparametern hinzu. Wenn kein Cookie gefunden wird, erhält die API ein leeres Token und behandelt den Anruf als neuen Besucher, wodurch ein neuer, leerer Warenkorb erstellt wird.

Schritt 3: Optimieren Sie die Ausführung durch Speichern einiger Daten

Und jetzt zurück zu set_saved_cart_data.

Wie wir im obigen Code sehen, erhält get_shopping_cart den vollständigen Inhalt des Warenkorbs - genau die Daten, die wir in show_shopping_cart abfragen. Dies bedeutet, dass wir die API zweimal in einem WordPress-Seiten-Rendering aufrufen, wenn ein Aufruf ausreichen sollte. Das Speichern der Antwort für die Dauer der HTTP-Anforderung ist eine einfache Optimierung, mit der wir die Anzahl der API-Aufrufe halbieren können.

In PHP sind globale Variablen spezifisch für eine HTTP-Anforderung und werden nur von dieser verarbeitet. Daher können wir eine sicher zum Speichern der Daten von get_shopping_cart bis zu dem Punkt verwenden, an dem sie zum tatsächlichen Rendern des Warenkorbinhalts verwendet werden.

Zu diesem Zweck habe ich ein einfaches Funktionspaar erstellt, set_saved_cart_data und get_saved_cart_data, das die globale Variable $g_shopping_cart_data umschließt, um den Code lesbar und leicht zu pflegen zu halten:

global $g_shopping_cart_data;

function set_saved_cart_data( $cart_data ) {

    global $g_shopping_cart_data;
    $g_shopping_cart_data = $cart_data;
    
}

function get_saved_cart_data() {

    global $g_shopping_cart_data;
    return $g_shopping_cart_data;
    
}

Wenn die Warenkorbdaten in einer globalen Variablen gespeichert sind, müssen Sie lediglich die erste Zeile in show_shopping_cart in Folgendes ändern:

1	$cart_data = get_saved_cart_data();

Nachdem diese Änderung vorgenommen wurde, hat der Warenkorb jetzt eine Sitzung und der Benutzer kann Artikel zum Warenkorb hinzufügen und zwischen den Seiten wechseln, während immer noch derselbe Warenkorb angezeigt wird.

Schritt 4: Testen Sie, indem Sie einige Artikel zum Warenkorb hinzufügen

Um die Funktionalität zu testen, erstellen wir einen Link zur Controller-Aktion shopping_cart/add und drucken ihn am Ende von show_shopping_cart aus. Beachten Sie, dass der Controller, um unsere Sitzung zu teilen, auch das Warenkorb-Token als Parameter benötigt:

$product_id = 1;

$token_params = http_build_query(array('token' => api_shopping_cart_token()));
$url = "http://localhost:3000/shopping_cart/add/" . $product_id . "?" . $token_params;

echo '<p><a href="' . $url . '">Add test item to cart</a></p>';

Klicken Sie auf den Link Testartikel zum Warenkorb hinzufügen, um einen Artikel hinzuzufügen. Kehren Sie dann zu Ihrer WordPress-Site zurück und jetzt können Sie einen Artikel aus dem Warenkorb im WordPress-Blog sehen!

Einige abschließende Worte

Das war's: Sie haben jetzt erfolgreich einen Ruby on Rails-basierten Warenkorb mit Ihrem WordPress-Blog oder Ihrer Website verbunden.

Entfernen Sie das print_r-Debugging, gestalten Sie die Ausgabe mit etwas CSS und erstellen Sie einige echte "In den Warenkorb"-Links (sowie eine "Auschecken"-Schaltfläche, die den Benutzer zurück zur eigentlichen Warenkorbanwendung führt), und Sie haben einen voll funktionsfähigen Einkauf Wagenintegration.

Noch wichtiger ist jedoch, dass Sie die Methode zum Erstellen und Zurücksprechen einer API verwenden können, um zwei eigene Anwendungen zu verknüpfen. Sie können alles sein, also erstellen Sie jetzt einige APIs!