Hogyan készítsünk saját Instagram keresőmotort a jQuery és a PHP segítségével

Amióta a Google azonnali keresési szolgáltatásokat hozott létre, népszerű tendenciává vált a webdesignban. Vannak olyan szórakoztató példák, mint például Michael Hart Google Képek alkalmazás. A technikák meglehetősen egyszerűek, ahol még egy mérsékelt jQuery tapasztalattal rendelkező webfejlesztő is felveszi a programozási API-kat és a JSON adatokat.

Ehhez a bemutatóhoz meg szeretném magyarázni hogyan készíthetünk hasonló instant keresési webalkalmazást. Ahelyett, hogy képeket húznánk a Google-ról, használhatunk Instagramot, amely néhány év alatt rendkívül megnőtt.

Ez a szociális hálózat mobilalkalmazásként indult el az iOS számára. A felhasználók fotókat készíthetnek, és megoszthatják őket barátaikkal, megjegyzéseket hagyhatnak, és feltölthetnek a harmadik félhálózatokba, például a Flickr-be. A csapat nemrég megvásárolta a Facebookot, és egy teljesen új alkalmazást tett közzé az Android Market számára. A felhasználói bázisuk óriási mértékben nőtt, és most a fejlesztők csodálatos mini-alkalmazásokat építhetnek, mint ez az instasearch demo.

Demó megtekintése
Letöltés forrása

API hitelesítő adatok megszerzése

A projektfájlok létrehozása előtt először meg kell vizsgálnunk az Instagram API-rendszerének ötleteit. Szüksége lesz egy fiókra a fejlesztői portál eléréséhez, amely hasznos útmutatást nyújt a kezdőknek. Minden, ami az Instagram-adatbázis lekérdezéséhez szükséges, a “Ügyfélazonosító”.

A felső eszköztáron kattintson az Ügyfelek kezelése hivatkozásra, majd kattintson a zöld gombra “Új ügyfél regisztrálása”. Meg kell adnia az alkalmazásnak egy nevet, rövid leírást és a webhely URL-jét. Az URL-cím és az átirányítási URI ebben az esetben ugyanolyan értékű lehet, mert nem szükséges semmilyen felhasználó hitelesítése. Csak töltse ki az összes értéket, és hozza létre az új alkalmazás részleteit.

Egy hosszú karakterlánc jelenik meg ÜGYFÉLAZONOSÍTÓ. Ezt a kulcsot később szükségünk lesz a backend szkript építésekor, így visszatérünk erre a részre. Most már megkezdhetjük a jQuery instant keresési alkalmazásunk építését.

Alapértelmezett webtartalom

A tényleges HTML nagyon vékony a használt funkciókhoz. Mivel a képadatok többsége dinamikusan csatolva van, csak néhány kisebb elemre van szükség az oldalon. Ez a kód található index.html fájl.

    Instagram Photo Azonnali keresés App a jQuery-vel         Megjegyzés: Nincs szóköz vagy szóköz írás. A keresések egy (1) kulcsszóra korlátozódnak.

A legújabb jQuery 1.7.2 könyvtárat két külső .css és .js erőforrással együtt használom. A bemeneti keresési mezőnek nincs külső formázója, mert nem akarjuk, hogy valaha is küldje el az űrlapot, és az oldal újratöltését okozza. Néhány billentyűleütést letiltottam a keresési mezőben úgy, hogy korlátozottabb korlátozások vannak a felhasználók gépelés közben.

Az összes fotóadatot a középső azonosítón belül feltöltjük #photos. Tartsa az alapvető HTML-t tisztanak és könnyen olvashatónak. Az összes többi belső HTML elemet hozzáadja a jQuery segítségével, és az új keresés előtt is eltávolítja azokat.

Húzás az API-ból

Először a dinamikus PHP szkript létrehozásával szeretném kezdeni, majd lépni a jQuery-be. Az új fájl neve instasearch.php amely tartalmazza az összes fontos backend-horgot az API-ba.

 Az első sor azt jelzi, hogy visszatérési adataink JSON-ként vannak formázva egyszerű szöveg vagy HTML helyett. Ez szükséges ahhoz, hogy a JavaScript funkciók jól olvassák az adatokat. Utána van néhány változó beállítása, amelyek az alkalmazás kliensazonosítóját, a felhasználói keresési értéket és a végső API-URL-t tartalmazzák. Győződjön meg róla, hogy frissíti a $ ügyfél karakterlánc érték, hogy megfeleljen a saját alkalmazásának.
 Az URL-adatok eléréséhez elemezni kell a fájl tartalmát, vagy használnia kell a CURL funkciókat. Az egyéni funkció get_curl () csak egy kis kód, amely az aktuális PHP konfigurációval ellenőrzi.
 Ha nincs aktiválva a CURL, akkor megpróbálja aktiválni a funkciót és húzza az adatokat saját funkciós könyvtárukon keresztül. Ellenkező esetben egyszerűen használhatjuk a file_get_contents () -t, amely lassabb, de még mindig jól működik. Ezután ténylegesen egy ilyen változóba tudjuk vetni ezeket az adatokat:
 $ response = get_curl ($ api); 
 Adatok rendezése és visszaküldése
 Ezzel az eredeti JSON-válasznak csak vissza tudtuk küldeni Instagram-tól az összes feltöltött információval. De annyi extra adat van, és nagyon bosszantó, hogy mindent áthidalunk. Inkább az Ajax válaszokat szervezem, és pontosan ki akarom húzni, hogy melyik adat szükséges.
 Először egy üres tömböt állíthatunk be az összes képre. Aztán belül a az egyes() hurok, ha a JSON adatobjektumokat egyenként húzzuk ki. Csak három (3) specifikus értékre van szükségünk $ src(teljes méretű kép URL), $ hüvelykujj(miniatűrkép URL), és $ url(egyedülálló fotópéldány).
 $ images = tömb (); ha ($ answer) foreach (json_decode ($ response) -> adat mint $ item) $ src = $ item-> images-> standard_resolution-> url; $ thumb = $ item-> képek-> bélyegkép-> url; $ url = $ item-> link; $ images [] = tömb ("src" => htmlspecialchars ($ src), "thumb" => htmlspecialchars ($ thumb), "url" => htmlspecialchars ($ url));  
 Azok, akik ismeretlenek a PHP hurokkal, elveszhetnek a folyamatban. Ne fókuszáljon annyira a kódrészletekre, ha nem érti a szintaxist. Képeink legfeljebb 16-20 egyedi bejegyzést tartalmaznak a legutóbbi közzététel időpontjától. Ezután a kódot az oldalra jQuery Ajax válaszként továbbíthatjuk.
 print_r (str_replace ('', '/', json_encode ($ images))); meghal(); 
 De most, hogy megnézzük a színfalak mögött, átugorhatunk a frontend scriptbe. Létrehoztam egy fájlt ajax.js amely egy pár eseménykezelőt tartalmaz, amelyek a keresési mezőhöz vannak kötve. Ha még mindig követed, addig izgatottan közel vagyunk a befejezéshez!
 jQuery kulcsfontosságú események
 A dokumentum első megnyitásakor kész() esemény pár pár változót állítok be. Az első kettő közvetlen célszelektorként működik a keresőmező és a fotótartály számára. JavaScript-időzítőt is használok a keresési lekérdezés szüneteltetésére 900 milliszekundumig, miután a felhasználó befejezte a gépelés befejezését.
 $ (dokumentum). már (funkció () var sfield = $ ("# s"); var container = $ ("# photos"); var időzítő; 
 Csak két fő funkcióblokk dolgozunk együtt. Az elsődleges kezelőt egy .keydown () esemény indítja, amikor a keresőmezőre fókuszál. Először ellenőrizzük, hogy a kulcskód megegyezik-e a tiltott kulcsok valamelyikével, és ha igen, akkor töröljük a kulcs eseményt. Ellenkező esetben törölje az alapértelmezett időzítőt, és várjon 900 ms-ot a hívás előtt instaSearch ().
 / ** * keycode szószedet * 32 = SPACE * 188 = COMMA * 189 = DASH * 190 = PERIOD * 191 = BACKSLASH * 13 = ENTER * 219 = LEFT BRACKET * 220 = FORWARD SLASH * 221 = JOBB BRACKET * / $ (sfield ) .keydown (funkció (e) if (e.keyCode == '32' || e.keyCode == '188' || e.keyCode == '189' || e.keyCode == '13' | | e.keyCode == '190' || e.keyCode == '219' || e.keyCode == '221' || e.keyCode == '191' || e.keyCode == '220') e.preventDefault (); else clearTimeout (timer); timer = setTimeout (funkció () instaSearch ();, 900);); 
 Minden alkalommal, amikor frissíti az értéket, automatikusan új keresési eredményeket fog elérni. Számos más kulcskód is elzárkózhatott volna az Ajax funkció beindításában - de túl sok a listában való megjelenítéshez.
 Az Ajax instaSearch () függvény
 Az új egyéni funkciómban először a “Betöltés” osztályba a keresési mezőbe. Ez az osztály frissíti a kamera ikonját egy új betöltési gif képhez. Azt is szeretnénk kiüríteni az összes lehetséges adatot, ami a fotószakaszon belül maradt. A lekérdezési változó dinamikusan húzódik a keresési mezőbe megadott aktuális értékből.
 function instaSearch () $ (sfield) .addClass ("betöltés"); $ (Konténer) .empty (); var q = $ (sfield) .val (); $ .ajax (típus: 'POST', url: 'instasearch.php', adatok: "q =" + q, siker: funkció (adat) $ (sfield) .removeClass ("betöltés"); $ .each (adat, függvény (i, elem) var ncode = ' 
„ $ (Konténer) .append (ncode); ); , hiba: funkció (xhr, típus, kivétel) $ (sfield) .removeClass ("betöltés"); $ (konténer) .html ("Hiba:" + típus); );  
 Ha ismeri a .ajax () függvényt, akkor ezeknek a paramétereknek ismerősnek kell lenniük. Elhaladok a felhasználói keresési paraméternek “q” mint a POST adatok. A siker és a kudarc után eltávolítjuk a “Betöltés” osztályba, és minden válaszot vissza kell adni a #photos csomagolás.
 A sikerfüggvényen belül véglegesítjük a végső JSON választ, hogy kivesszük az egyes div elemeket. Ezt a hurkot a $ .each () függvénnyel tudjuk elérni és a válaszadat-tömböt célozni. Ellenkező esetben a hibaelhárítási módszer közvetlenül az Instagram API-ból küld minden válasz hibaüzenetet. És ez tényleg minden van rá!
  
 Demó megtekintése
 Letöltés forrása
 
Végső gondolatok
 Az Instagram-csapat csodálatos munkát végzett egy ilyen hatalmas alkalmazásban. Az API időnként lassú lehet, de a válaszadatok mindig megfelelően formázottak és nagyon könnyen kezelhetők. Remélem, hogy ez a bemutató megmutatja, hogy a harmadik féltől származó alkalmazásoktól sok hatalom működik.
 Sajnos az aktuális Instagram-keresési lekérdezések egyidejűleg nem engedélyeznek egynél több címkét. Ez korlátozza a demóinkat, de biztosan nem távolítja el a varázsát. Nézze meg a fenti élő példát, és töltse le a forráskód másolatát, hogy játsszon. Továbbá, tudassa velünk a gondolatait az alábbiakban ismertetett utólagos beszélgetési területen.