Jeffrey Cross
Jeffrey Cross

Codebox: Amüsieren Sie sich mit Google Autocomplete

Die automatische Vervollständigung ist eine der vielen interessanten Funktionen von Google. Wenn Sie beispielsweise "Wie mache ich" in das Suchfeld eingeben, zeigt Google eine Top-10-Liste mit Dingen, nach denen Sie denken, dass Sie danach suchen. Diese kollektive "Weisheit der Menschenmassen", die durch die Analyse von Millionen ähnlicher Suchanfragen generiert wird, kann urkomisch, tragisch oder zutiefst auf den menschlichen Zustand hindeuten. Oft sind dies alle auf einmal.

Mit dieser Skizze können Sie den Google-Zeitgeist einer ausgewählten Phrase erkunden. Das funktioniert so. Wenn Sie einen Satz wie "Wie mache ich" eingeben, erstellt die Skizze 26 Variationen, indem Sie am Ende jeden Buchstaben des Alphabets hinzufügen: "Wie mache ich a", "Wie mache ich b", "Wie mache ich c ”und so weiter. Anschließend werden Google für jede Variation abgefragt und die zehn Ergebnisse einer laufenden Liste hinzugefügt. Die 260 Ergebnisse werden dem ureigenen Drama, die Hoffnungen, Träume und Bestrebungen von Millionen zu sehen, als ikonische „Star Wars“ -Rolle dargestellt:

Die Autocomplete-API

Für die automatische Vervollständigung wird eine relativ einfache URL verwendet, die so aussieht.

http://google.com/complete/search?output=toolbar&q=verschlüsselter Suchbegriff

Im Gegensatz zu den meisten von Ihnen besuchten Seiten, die hübsches HTML enthalten, gibt diese XML-Daten zurück, die von Maschinen gelesen werden sollen. Diese als Application Programming Interface (API) bekannte, unglaublich leistungsstarke Technik ermöglicht es Programmen, problemlos über ein Netzwerk zu kommunizieren. Ohne eine API müssen wir zu Google gehen, unseren Ausdruck 26-mal eingeben und dann alle Ergebnisse manuell erfassen. Die API lässt uns dies automatisch tun.

Um die zugrunde liegenden XML-Daten für die Vorschläge „Wie mache ich“ zu bekommen, besuchen Sie einfach diese URL:

http://google.com/complete/search?output=toolbar&q=how+do+i+make

Wenn Sie in Ihrem Webbrowser "Quelle anzeigen" anzeigen, wird XML angezeigt, das ungefähr so ​​aussieht (obwohl ich dieses Beispiel so formatiert habe, dass es lesbarer ist):

...

Wir verwenden die Verarbeitung XMLElement () Bibliothek zum Lesen dieser XML-Daten zum Erstellen des Lauftextes.

Richten Sie die Skizze ein

Lassen Sie uns zuerst die Skizze ausführen. Da wir die controlP5-Bibliothek verwenden, um den Abfragesatz zu erhalten, muss diese Bibliothek installiert und konfiguriert sein. (Wenn Sie dies nicht tun, wird im controlP5-Abschnitt von Codebox: Erstellen einer fraktalen Menagerie die Einrichtung erläutert.) Sie können den Quellcode der Skizze aus dem Feld darunter oder aus der Datei zetigeist.pde entnehmen.

Wenn Sie den Quellcode in Bearbeitung haben, starten Sie die Skizze und geben Sie eine Phrase ein. Nach ein paar Sekunden sollten Sie sehen, dass die Ergebnisse über den Bildschirm wie bei Star Wars laufen. (Wenn Sie keinen Text eingeben, werden in der Skizze einfach die beliebtesten Ergebnisse für alle allgemeinen Abfragen angezeigt.)

Diskussion

Wie funktioniert das Ding? Es gibt einige Schlüsselelemente:

  1. Es holt sich einen Datenstapel aus der Autocomplete-API
  2. Es analysiert das XML mit XMLElement () und speichern Sie die Ergebnisse
  3. Die Ergebnisse werden als Scrolling-Liste angezeigt

Lassen Sie uns also darüber sprechen, wie Sie die Daten aus der API holen. Verarbeitung loadStrings () Mit dieser Funktion können Sie den Text einer beliebigen URL abrufen. Wir müssen also nur die Autocomplete-API mit einer ordnungsgemäß formatierten Abfrage präsentieren. Dazu verwenden wir Java URLEncoder Bibliothek (Denken Sie daran, dass alles, was Sie in Java verwenden können, ein faires Spiel für die Verarbeitung ist), um das zu schreiben kodieren() Funktion, die den eingegebenen Text codiert userQuery Box.

Das getSuggestions () Funktion nutzt unsere kodieren() Funktion, um die Seite abzurufen und die XML-Ergebnisse zu analysieren. Die Funktion verwendet die XMLElement () Einwände gegen die Ergebnisse. Wie die meisten XML-Bibliotheken verwendet diese eine "Familienstammbaum" -artige Syntax, um den Zugriff auf die verschiedenen Datenelemente zu ermöglichen. Wie in der nächsten Abbildung gezeigt, sind die Vorschlagsdaten das erste untergeordnete Element () unter den Kindern des Wurzelelements ().

Da der eigentliche Text eine Hilfe im Attribut ist, verwenden wir die getStringAttribute () Funktion zum Abrufen der gewünschten Daten.

[Anmerkung: Diese Syntax unterscheidet sich von der offiziellen Dokumentation, aber in diesem Beitrag im Community-Forum von Processing wird XMLElement-Problem: Die Funktion getInt / getString 'ist nicht vorhanden' liefert die Details.] Sobald wir den Text des Vorschlags ergriffen haben, möchten wir werde es an die anhängen SuggestionList Anordnungsliste.

Schließlich lohnt es sich ein wenig zu erklären, wie wir das eigentlich nennen getSuggestions () Funktion. Wie Sie sehen werden, wird es tatsächlich in der zeichnen() Methode, die etwas ungewöhnlich ist. Anfangs versuchte ich, alle 26 Abfragevarianten auf einmal zu verschlucken, indem ich eine Reihe schneller Treffer gegen Autocomplete machte. Ich bin schnell auf die APIs gestoßen BewertungslimitDies ist die maximale Anzahl von Malen pro Sekunde, die Sie zu einem bestimmten Zeitpunkt verwenden können. Außerdem gab es zu Beginn der Skizze eine lange Pause, die mir nicht gefiel.

Stattdessen fügte ich einen Timer hinzu timeBetweenFetches so dass die API nur alle 5 Sekunden aufgerufen wurde. Da der Text relativ langsam scrollt, konnten die Ergebnisse im Laufe der Zeit zwischengespeichert werden, was zu einem glatteren Gesamtbild führt, ohne die Anforderungen von Google zu verletzen. Jedes Mal, wenn wir auf die API zugreifen, wird ein Zähler aufgestellt, der uns sagt, welcher Buchstabe des Alphabets der Basisabfrage hinzugefügt werden soll. Sobald wir die Ergebnisse erhalten haben, setzen wir den Timer zurück. Es gibt auch ein bisschen Logik darin, um zu testen, ob der Benutzer einen neuen Abfragebegriff eingegeben hat und die Taste gedrückt hat findButton.

Das andere Stück der zeichnen() Methode behandelt den Bildlauftext. Dazu verwenden wir eine Variable namens y die y-Koordinate der ersten Zeichenfolge in SuggestionList. Wir durchlaufen dann jedes Element in der Liste und schreiben den Text in Bezug auf die Variable auf dem Bildschirm y, die bei jedem Durchlauf dekrementiert wird zeichnen(). Das gibt uns den schönen, scrollenden Effekt. (Wir zentrieren den Text auch auf der X-Achse, was mit einer einfachen Formel geschieht.)

Der Star Wars-Effekt lässt sich leicht erreichen, indem Sie die integrierte 3D-Grafikbibliothek von Processing verwenden, um die Ebene der X-Achse um einige Grad zu drehen. Dies war ein ordentlicher Hack, den ich auf Luis Gonzalez 'Star Wars-Skizze auf openprocesing.org gesehen habe. Ich empfehle diese Seite als Quelle für Inspiration und Ideen.

Weitere Informationen: Hier finden Sie alle Spalten von Andrews Codebox.

In der Schuppenhalle:


Erste Schritte mit Processing Lernen Sie die Computerprogrammierung auf einfache Weise mit Processing, einer einfachen Sprache, mit der Sie Code zum Erstellen von Zeichnungen, Animationen und interaktiven Grafiken verwenden können. Programmierkurse beginnen normalerweise mit der Theorie, aber in diesem Buch können Sie direkt in kreative und unterhaltsame Projekte einsteigen. Es ist ideal für alle, die grundlegende Programmierung erlernen möchten, und ist eine einfache Einführung in die Grafik für Personen mit Programmierkenntnissen.

Aktie

Leave A Comment