Kodekasse: Nyd dig selv med Google Autofuldførelse - 💡 Fix My Ideas

Kodekasse: Nyd dig selv med Google Autofuldførelse

Kodekasse: Nyd dig selv med Google Autofuldførelse


Forfatter: Ethan Holmes, 2019

Autofuldførelse er en Googles mange interessante funktioner. Hvis du for eksempel begynder at skrive "Hvordan laver jeg" i søgefeltet, præsenterer Google en top 10 liste over ting, som den mener, at du måske søger efter. Genereret ved at analysere millioner af lignende søgninger, kan denne kollektive "visdom af folkemængderne" være sjovt, tragisk eller dybt vejledende for den menneskelige tilstand. Ofte er det alle disse på én gang.

På denne skitse kan du udforske Google Zeitgeist af en sætning, du vælger. Det virker som dette. Når du indtaster en sætning som "Hvordan laver jeg" skaber skitsen 26 variationer ved at tilføje hvert bogstav i alfabetet i slutningen: "Hvordan laver jeg a," "Hvordan laver jeg b," "Hvordan laver jeg c "og så videre. Det spørger derefter Google for hver variation og tilføjer de ti resultater til en løbe liste. Befitting det iboende drama for at se millioner af håb, drømme og forhåbninger, de 260 resultater er præsenteret som en ikonisk "Star Wars" -rulle:

Autocomplet API

Autofuldførelse er drevet af en relativt enkel webadresse, der ligner dette.

http://google.com/complete/search?output=toolbar&q=kodet søgeudtryk

I modsætning til de fleste sider, du besøger, som præsenterer smukke HTML, returnerer denne XML-data, som er beregnet til maskiner til læsning. Kendt som Application Programming Interface (API), giver denne utroligt kraftfulde teknik programmer, der nemt kan kommunikere på tværs af et netværk. Uden en API skal vi gå til Google, indtaste vores sætning 26 gange, og derefter samle alle resultaterne for hånden. API'en giver os mulighed for at gøre dette automatisk.

For at få de underliggende XML-data til "Hvordan laver jeg" forslag, er alt, hvad du skal gøre, at besøge denne webadresse:

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

Hvis du "View Source" i din webbrowser, vil du se noget XML, der ser sådan ud (selv om jeg har formateret dette eksempel for at være mere læsbart):

...

Vi bruger Processing s XMLElement () bibliotek for at læse disse XML-data for at oprette rulleteksten.

Opsæt skitse

Først, lad os dog få skitsen kørende. Da vi bruger kontrolP5 biblioteket for at få forespørgsels sætningen, skal du have biblioteket installeret og konfigureret. (Hvis du ikke gør det, vil ControlP5-sektionen i Codebox: Opret en fraktal menagerie fortælle dig, hvordan du konfigurerer det.) Du kan tage skitsens kildekode fra boksen nedenfor eller fra filen zetigeist.pde.

Når du først har fået kildekoden til Behandling, skal du starte skitsen og skrive en sætning. Efter et par sekunder skal du se resultaterne begynde at rulle over skærmen a la Star Wars. (Hvis du ikke indtaster nogen tekst, vil skitsen simpelthen præsentere de mest populære resultater for alle generelle forespørgsler.)

Diskussion

Så hvordan virker denne ting? Der er et par nøgleelementer:

  1. Det griber en batch af data fra Autocomplete API
  2. Det analyserer XML med XMLElement () og gem resultaterne
  3. Det viser resultaterne som en rulleliste

Så lad os tale om, hvordan man får fat i dataene fra API'en. Behandling s loadStrings () funktion giver dig mulighed for at få fat i teksten til en hvilken som helst URL, så alt vi skal gøre er at præsentere API'en Autocomplete med et korrekt formateret forespørgsel. For at gøre dette bruger vi Java's URLEncoder bibliotek (husk, alt hvad du kan bruge i Java er fair game for Processing) for at skrive indkode () funktion, som koder for teksten, der er indtastet i userQuery boks.

Det getSuggestions () funktion bruger vores indkode () funktion for at hente siden og analysere XML-resultaterne. Funktionen bruger XMLElement () protestere mod at arbejde med resultaterne. Ligesom de fleste XML-biblioteker bruger denne et "familietræ" som syntaks for at give dig adgang til de forskellige dataelementer. Som vist i næste figur er forslagsdata det første barnelement () under af rodelementets børn ().

Da den faktiske tekst er hjælp i attributten, bruger vi getStringAttribute () funktion til at trække de data, vi ønsker.

[Bemærk: at denne syntaks er forskellig fra den officielle dokumentation, men dette indlæg på Processing's community forum, XMLElement problem: funktion getInt / getString 'eksisterer ikke' giver detaljerne.] Når vi har taget teksten til forslaget, vi Jeg tilføjer det til suggestionList ArrayList.

Endelig er det værd at forklare lidt om, hvordan vi faktisk kalder getSuggestions () fungere. Som du vil se, hedder det faktisk i tegne() metode, hvilket er lidt usædvanligt. Oprindeligt forsøgte jeg at opsuge alle 26 forespørgselsvarianter på én gang ved at lave en række hurtige hits mod Autocomplete. Jeg ramte hurtigt API'erne sats grænse, hvilket er det maksimale antal gange pr. sekund, som du kan bruge det til enhver tid. Derudover var der en lang pause i starten af ​​skitsen, som jeg ikke kunne lide.

Så i stedet tilføjede jeg en timer kaldet timeBetweenFetches så API'en blev kun kaldt hvert 5. sekund. Da teksten ruller temmelig langsomt, tillod det, at resultaterne buffede op over tid, hvilket resulterede i et glattere overordnet udseende uden at krænke Googles krav. Hver gang vi rammer API'en, forskyder vi en tæller, der fortæller os hvilket bogstav i alfabetet, der skal tilføjes til basisforespørgslen. Når vi har fået resultaterne, nulstiller vi timeren. Der er også en smule logik derinde for at teste om brugeren har indtastet en ny forespørgselsperiode og trykket på findButton.

Det andet stykke af tegne() Metoden håndterer rullende tekst. For at gøre dette bruger vi en variabel, der hedder y at holde y-koordinaten for den første streng i suggestionList. Vi løber derefter gennem hvert element i listen, og skriver teksten på skærmen med henvisning til variablen y, som er dekrementeret på hver gennemgang tegne(). Dette giver os den fine, rullende effekt. (Vi centrerer også teksten på x-aksen, som er lavet med en simpel formel.)

Endelig er Star Wars-effekten let opnået ved at bruge Processing's indbyggede 3D Graphics Library til at rotere X-aksens plan med nogle få grader. Dette var et pænt hack, som jeg så på Luis Gonzalez 'Star Wars-skitse på openprocesing.org. Jeg anbefaler stærkt denne side som en kilde til inspiration og ideer.

Mere: Se alle Andrew's Codebox-kolonner her.

I Maker Shed:


Kom godt i gang med behandling Lær computerprogrammering på nem måde med Processing, et simpelt sprog, der giver dig mulighed for at bruge kode til at tegne tegninger, animationer og interaktiv grafik. Programmeringskurser starter normalt med teori, men i denne bog kan du springe lige ind i kreative og sjove projekter. Det er ideelt for alle, der ønsker at lære grundlæggende programmering, og tjener som en simpel introduktion til grafik til personer med nogle programmeringsevner.



Du Kan Være Interesseret

Anvendt kinetisk kunst: Alan Rorie interview

Anvendt kinetisk kunst: Alan Rorie interview


Den pige! KAL: Variationer

Den pige! KAL: Variationer


KUNSTEN AF THEO KAMECKE

KUNSTEN AF THEO KAMECKE


CRAFT: Mors Dag Gave Guide

CRAFT: Mors Dag Gave Guide






Seneste Indlæg