Jak zbudować własną wyszukiwarkę Instagram z jQuery i PHP

Odkąd Google wprowadził funkcje wyszukiwania błyskawicznego, stał się popularnym trendem w projektowaniu stron internetowych. Jest kilka fajnych przykładów online, takich jak aplikacja Google Images Michaela Harta. Techniki są dość proste, a nawet programista WWW z umiarkowanym doświadczeniem jQuery może wybrać API programowania i dane JSON.

W tym samouczku chcę to wyjaśnić w jaki sposób możemy zbudować podobną aplikację internetową do szybkiego wyszukiwania. Zamiast ściągać zdjęcia z Google, możemy użyć Instagramu, który ogromnie się rozwinął w ciągu zaledwie kilku lat.

Ta sieć społecznościowa zaczęła się jako aplikacja mobilna na iOS. Użytkownicy mogą robić zdjęcia i dzielić się nimi z przyjaciółmi, zostawiać komentarze i przesyłać do sieci innych firm, takich jak Flickr. Zespół został niedawno przejęty przez Facebooka i opublikował zupełnie nową aplikację dla Android Market. Ich baza użytkowników ogromnie wzrosła, a teraz programiści mogą budować niesamowite mini-aplikacje, tak jak to demo instasearch.

Wyświetl demo
Pobierz źródło

Uzyskiwanie poświadczeń API

Przed utworzeniem jakichkolwiek plików projektu powinniśmy najpierw przyjrzeć się pomysłom systemu API Instagram. Będziesz potrzebował konta, aby uzyskać dostęp do portalu dewelopera, który oferuje przydatne instrukcje dla początkujących. Wszystko, czego potrzebujemy do zapytania do bazy danych Instagram to “Identyfikator klienta”.

Na górnym pasku narzędzi kliknij łącze Zarządzaj klientami, a następnie kliknij zielony przycisk “Zarejestruj nowego klienta”. Musisz podać aplikacji nazwę, krótki opis i adres URL witryny. Adres URL i identyfikator URI przekierowania mogą mieć tę samą wartość tylko w tym przypadku, ponieważ nie musimy uwierzytelniać żadnych użytkowników. Wystarczy wypełnić wszystkie wartości i wygenerować nowe szczegóły aplikacji.

Zobaczysz długi ciąg znaków o nazwie IDENTYFIKATOR KLIENTA. Będziemy potrzebować tego klucza później podczas budowania skryptu zaplecza, więc wrócimy do tej sekcji. Na razie możemy rozpocząć budowę naszej aplikacji do szybkiego wyszukiwania jQuery.

Domyślna zawartość strony internetowej

Rzeczywisty kod HTML jest bardzo niewielki, jeśli chodzi o ilość używanej funkcjonalności. Ponieważ większość danych obrazu jest dołączana dynamicznie, potrzebujemy tylko kilku mniejszych elementów wewnątrz strony. Ten kod znajduje się wewnątrz index.html plik.

    Aplikacja Instagram Photo Instant Search z jQuery         Uwaga: niedozwolone są spacje ani znaki interpunkcyjne. Wyszukiwania są ograniczone do jednego (1) słowa kluczowego.

Używam najnowszej biblioteki jQuery 1.7.2 wraz z dwoma zewnętrznymi zasobami .css i .js. Pole wyszukiwania wejściowego nie ma opakowania zewnętrznego, ponieważ nie chcemy nigdy przesyłać formularza i powodować przeładowania strony. Wyłączyłem kilka naciśnięć klawiszy wewnątrz pola wyszukiwania, dzięki czemu ograniczono ograniczenia podczas pisania przez użytkowników.

Zapełnimy wszystkie dane zdjęcia w środkowym identyfikatorze sekcji #zdjęcia. Dzięki temu nasz podstawowy HTML jest czysty i czytelny. Wszystkie inne wewnętrzne elementy HTML zostaną dodane przez jQuery, a także usunięte przed każdym nowym wyszukiwaniem.

Wyciąganie z API

Najpierw chciałbym zacząć od stworzenia naszego dynamicznego skryptu PHP, a następnie przejść do jQuery. Mój nowy plik ma nazwę instasearch.php który będzie zawierał wszystkie ważne haki zaplecza w API.

 Pierwsza linia oznacza, że nasze dane zwrotne są sformatowane jako JSON zamiast zwykłego tekstu lub HTML. Jest to konieczne, aby funkcje JavaScript poprawnie odczytywały dane. Następnie mam kilka ustawień zmiennych zawierających identyfikator klienta aplikacji, wartość wyszukiwania użytkownika i ostateczny adres URL interfejsu API. Upewnij się, że aktualizujesz $ klient wartość ciągu zgodna z własną aplikacją.
 Aby uzyskać dostęp do danych URL, musimy przeanalizować zawartość pliku lub użyć funkcji cURL. Funkcja niestandardowa get_curl () to tylko niewielki fragment kodu, który sprawdza w stosunku do bieżącej konfiguracji PHP.
 Jeśli nie masz aktywowanego cURL, spróbuje aktywować funkcję i pobrać dane za pośrednictwem własnej biblioteki funkcji. W przeciwnym razie możemy po prostu użyć file_get_contents (), który jest wolniejszy, ale nadal działa równie dobrze. Następnie możemy faktycznie pobrać te dane do zmiennej, takiej jak ta:
 $ response = get_curl ($ api); 
 Organizowanie i zwracanie danych
 Moglibyśmy po prostu zwrócić tę oryginalną odpowiedź JSON z Instagramu z wszystkimi załadowanymi informacjami. Ale jest tak wiele dodatkowych danych i bardzo denerwujące jest przechodzenie przez wszystko. Wolę organizować odpowiedzi Ajax i wyciągać dokładnie te dane, których potrzebujemy.
 Najpierw możemy ustawić pustą tablicę dla wszystkich obrazów. Następnie w środku dla każdego() pętla wyciągniemy obiekty danych JSON jeden po drugim. Potrzebujemy tylko trzech (3) konkretnych wartości, którymi są $ src(pełny rozmiar obrazu URL), $ kciuk(adres URL obrazu miniaturki) i $ url(unikalne zdjęcie permalink).
 $ images = array (); if ($ response) foreach (kod_json ($ response) -> dane jako $ item) $ src = $ item-> images-> standard_resolution-> url; $ thumb = $ item-> images-> thumbnail-> url; $ url = $ item-> link; $ images [] = array ("src" => htmlspecialchars ($ src), "thumb" => htmlspecialchars ($ thumb), "url" => htmlspecialchars ($ url));  
 Ci, którzy nie znają pętli PHP, mogą zgubić się w tym procesie. Nie skupiaj się tak bardzo na tych fragmentach kodu, jeśli nie rozumiesz składni. Nasz zbiór zdjęć będzie zawierał najwyżej 16-20 unikalnych wpisów zdjęć pobranych z ostatniej daty publikacji. Następnie możemy wygenerować cały ten kod na stronie jako odpowiedź Ajax jQuery.
 print_r (str_replace ('/', '/', json_encode ($ images))); umierać(); 
 Ale teraz, gdy spojrzeliśmy za kulisy, możemy przejść do skryptów frontendowych. Stworzyłem plik ajax.js który zawiera kilka procedur obsługi zdarzeń związanych z polem wyszukiwania. Jeśli do tej pory śledzisz, podekscytuj się, że jesteśmy już blisko ukończenia!
 jQuery Key Events
 Przy pierwszym otwarciu dokumentu gotowy() Zdarzenie ustawiam kilka zmiennych. Pierwsze dwa zachowują się jak selektory bezpośredniego celu dla pola wyszukiwania i kontenera zdjęć. Używam również timera JavaScript, aby wstrzymać zapytanie do 900 milisekund po zakończeniu wpisywania przez użytkownika.
 $ (document) .ready (function () var sfield = $ ("# s"); var container = $ ("# photos"); var timer; 
 Pracujemy tylko z dwoma głównymi blokami funkcyjnymi. Podstawowy program obsługi jest wywoływany przez zdarzenie .keydown (), gdy jest ono skupione na polu wyszukiwania. Najpierw sprawdzamy, czy kod klucza pasuje do któregokolwiek z naszych zabronionych kluczy, a jeśli tak, zaneguj zdarzenie kluczowe. W przeciwnym razie wyczyść domyślny timer i poczekaj 900ms przed wywołaniem instaSearch ().
 / ** * glosariusz keycode * 32 = SPACE * 188 = COMMA * 189 = DASH * 190 = OKRES * 191 = BACKSLASH * 13 = ENTER * 219 = LEFT BRACKET * 220 = FORWARD SLASH * 221 = PRAWY BRACKET * / $ (sfield ) .keydown (funkcja (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 (function () instaSearch ();, 900);); 
 Za każdym razem, gdy aktualizujesz wartość, automatycznie pobierze nowe wyniki wyszukiwania. Istnieje również wiele innych kluczowych kodów, które moglibyśmy zablokować przed uruchomieniem funkcji Ajax - ale jest ich zbyt wiele, aby można je było znaleźć w tym samouczku.
 Funkcja Ajax instaSearch ()
 W mojej nowej funkcji niestandardowej najpierw dodajemy “Ładuję” klasa w polu wyszukiwania. Ta klasa zaktualizuje ikonę kamery dla nowego ładowania obrazu GIF. Chcemy również opróżnić wszelkie możliwe dane pozostałe w sekcji zdjęć. Zmienna zapytania jest pobierana dynamicznie z bieżącej wartości wprowadzonej w polu wyszukiwania.
 funkcja instaSearch () $ (sfield) .addClass ("ładowanie"); $ (kontener) .empty (); var q = $ (sfield) .val (); $ .ajax (typ: 'POST', url: 'instasearch.php', dane: "q =" + q, sukces: funkcja (dane) $ (sfield) .removeClass ("ładowanie"); $ .each (dane, funkcja (i, element) var ncode = ' 
'; $ (container) .append (ncode); ); , błąd: funkcja (xhr, typ, wyjątek) $ (sfield) .removeClass ("ładowanie"); $ (container) .html („Błąd:” + typ); );  
 Jeśli znasz funkcję .ajax (), wszystkie te parametry powinny wyglądać znajomo. Przekazuję parametr wyszukiwania użytkownika “q” jako dane POST. Po sukcesie i porażce usuwamy “Ładuję” klasy i dołącz dowolną odpowiedź z powrotem do #zdjęcia obwoluta.
 W ramach funkcji sukcesu przechodzimy przez końcową odpowiedź JSON, aby wyciągnąć poszczególne elementy div. Możemy wykonać tę pętlę za pomocą funkcji $ .each () i skierować naszą tablicę danych odpowiedzi. W przeciwnym razie metoda niepowodzenia wyśle bezpośrednio komunikat o błędzie odpowiedzi z interfejsu API Instagram. I to jest naprawdę wszystko!
  
 Wyświetl demo
 Pobierz źródło
 
Końcowe przemyślenia
 Zespół Instagram wykonał wspaniałą pracę skalując tak ogromną aplikację. Interfejs API może być czasami powolny, ale dane odpowiedzi są zawsze odpowiednio sformatowane i bardzo łatwe w obsłudze. Mam nadzieję, że ten samouczek może wykazać, że w aplikacjach innych firm działa dużo energii.
 Niestety bieżące zapytania wyszukiwania na Instagramie nie pozwalają na więcej niż 1 tag na raz. To ogranicza nasze demo, ale z pewnością nie usuwa jego uroku. Powinieneś sprawdzić powyższy przykład na żywo i pobrać kopię mojego kodu źródłowego, aby się bawić. Dodatkowo daj nam znać swoje przemyślenia w obszarze dyskusji poniżej.