de Ayo Isaiah

Construirea unei aplicații de căutare Wikipedia

Construirea unei aplicatii de cautare Wikipedia

Tocmai am terminat Free Code Camp’s Vizualizator Wikipedia aplicație, în care trageți articole unul lângă altul din Wikipedia utilizând API-ul Web MediaWiki.

Poveștile agile ale utilizatorilor au fost:

  • Utilizatorii pot tasta interogări într-o casetă de căutare și pot vizualiza intrările Wikipedia rezultate.
  • Utilizatorii pot vizualiza articole aleatorii din Wikipedia făcând clic pe un buton.

Am finalizat acest proiect destul de repede, pentru că știam exact ce să fac după ce am analizat API-ul MediaWiki, ceea ce a fost probabil datorită experienței mele din Proiect meteo.

Proiecta

Construirea unei aplicatii de cautare Wikipedia

În timp ce gândeam idei de proiectare pentru acest proiect, am decis să caut pagina de pornire Google și pagina de rezultate ale căutării pentru a vedea cum au gestionat lucrurile. Am ajuns să-mi iau cea mai mare parte din inspirația mea de design, după cum veți vedea.

În primul rând, pagina principală are titlul, caseta de căutare și butoanele din centrul paginii. Butonul „Mă simt norocos” vă trimite la o pagină Wikipedia aleatorie care a îndeplinit a doua poveste a utilizatorului.

ad-banner

Când pagina se încarcă, se acordă atenție casetei de căutare, astfel încât utilizatorul să poată începe să-și scrie imediat interogarea, datorită următorului JavaScript:

window.onload = function() { document.getElementById("wiki-search-input").focus();};

Un lucru pe care l-am experimentat puțin este ca pagina de rezultate să apară imediat ce începeți să tastați în caseta de căutare, imitând această funcție în căutarea Google.

Construirea unei aplicatii de cautare Wikipedia

Am putut să reproduc acest lucru în aplicația mea, dar nu eram sigur cum va funcționa pe ecranele tactile, deoarece, în testele mele, pagina nu a răspuns la apăsarea tastelor de pe telefonul meu.

Deci, pentru a evita un comportament neașteptat, am renunțat la această idee și am afișat pagina de rezultate numai când interogarea a fost complet introdusă și butonul „căutare” sau tasta Enter a fost apăsat. Acest lucru a funcționat bine pe toate platformele mobile și desktop pe care le-am testat.

Per ansamblu, designul meu nu este nimic revoluționar, dar atâta timp cât se adaptează corect la toate tipurile de dispozitive, este suficient de bun pentru mine.

Logică

Scufundându-ne în codul care a extras rezultatele de pe Wikipedia, nu a fost atât de greu să folosești API-ul pentru a fi sincer.

Am încercat să abordez această provocare folosind jQuery $ .getJSON metoda de a efectua apelul API așa cum am făcut cu API-ul Open Weather, dar a returnat un mesaj de eroare referitor la partajarea resurselor încrucișate (CORS).

La o investigație ulterioară, am găsit o altă metodă jQuery $ .ajax () pe Stack Overflow care a funcționat. Aparent, a trebuit să specific dataType ca „JSONP” (JSON cu Padding) ca să funcționeze.

function ajax (keyword) {  $.ajax({     url: "https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=" + keyword + "&prop=info&inprop=url&utf8=&format=json",    dataType: "jsonp",   success: function(response) {       console.log(response.query);       if (response.query.searchinfo.totalhits === 0) {         showError(keyword);       }
       else {         showResults(response);       }  },
   error: function () {    alert("Error retrieving search results, please refresh the page");   }  });
}

Am descoperit că adresa URL și titlul fiecărei pagini erau aproape exact la fel. Singura diferență a fost că spațiile din titlu au fost înlocuite cu subliniere în adresa URL.

Deci, „Bibliotecile JavaScript” devine „JavaScript_Libraries” în adresa URL.

Pur și simplu prin apucarea fiecărui titlu, am înlocuit spațiile cu caractere de subliniere folosind un pic de Regex (ceea ce, desigur, încă nu știu prea bine) și l-am atașat la rezultatul căutării corespunzătoare.

var title = callback.query.search[m].title;var url = title.replace(/ /g, "_");
$(".title-" + m).html("<a href=’https://en.wikipedia.org/wiki/" + url + "' target="_blank">" + callback.query.search[m].title + "</a>");

Ultimul lucru pe care l-am făcut a fost să fac o funcție de eroare, astfel încât dacă interogarea unui utilizator nu se potrivește cu niciun rezultat, acesta va afișa pur și simplu câteva sfaturi pe pagină pentru a ajuta utilizatorul să îmbunătățească căutarea.

1611520329 664 Construirea unei aplicatii de cautare Wikipedia

După cum puteți vedea, comunitatea open source Free Code Camp nu are încă un articol Wikipedia (în ciuda faptului că are peste 300.000 de membri). Dacă sunteți un colaborator frecvent al Wikipedia, iată-l cererea de articol restantă pentru ca tu să creezi unul.

Așa că a fost destul de mult pentru acest proiect. Puteți vizualiza rezultatul final pe Codepen.

Ce urmeaza

Am terminat pe jumătate cu proiectul Twitch API în timp ce scriu acest lucru. Majoritatea designului este realizat, trebuie doar să vă dați seama de câteva lucruri cu API-ul.

Pe măsură ce începe un nou semestru la Universitatea mea săptămâna aceasta, lucrurile pot deveni puțin mai lente cu Free Code Camp, dar totuși nu ar trebui să mă oprească să pun câteva ore în fiecare zi.

Dacă doriți să contactați sau să vă conectați cu mine, mă puteți găsi pe Stare de nervozitate sau trimiteți-mi un e-mail.

Mulțumesc pentru lectură.

O versiune a acestui post a fost publicată inițial pe blogul meu personal.