JQuery ve PHP ile Kendi Instagram Arama Motorunuzu Nasıl Geliştirebilirsiniz

Google anında arama özelliklerini kullanıma sunduğundan beri, web tasarımında popüler bir trend haline geldi. Michael Hart'ın Google Görseller uygulaması gibi çevrimiçi bazı eğlenceli örnekler var. Teknikleri oldukça basit, orta düzeyde jQuery deneyimine sahip bir web geliştiricisi bile programlama API'lerini ve JSON verilerini alabilir.

Bu ders için açıklamak istiyorum benzer bir anında arama web uygulaması nasıl oluşturabiliriz. Google’dan resim çekmek yerine, birkaç yıl içinde muazzam bir şekilde büyüyen Instagram’ı kullanabiliriz.

Bu sosyal ağ, iOS için mobil bir uygulama olarak başladı. Kullanıcılar fotoğraf çekip arkadaşlarıyla paylaşabilir, yorum bırakabilir ve Flickr gibi 3. taraf ağlara yükleyebilir. Ekip yakın zamanda Facebook tarafından satın alındı ve Android Market için yepyeni bir uygulama yayınladı. Kullanıcı tabanları muazzam bir şekilde büyüdü ve şimdi geliştiriciler tıpkı bu instaearch demo gibi şaşırtıcı mini uygulamalar geliştirebilirler..

Demoyu Gör
Kaynak İndir

API Kimlik Bilgilerini Alma

Herhangi bir proje dosyası oluşturmadan önce, Instagram'ın API sisteminin arkasındaki fikirlere bakmalıyız. Yeni başlayanlar için faydalı talimatlar sunan geliştiricinin portalına erişmek için bir hesaba ihtiyacınız olacak. Instagram veritabanını sorgulamamız için gereken tek şey bir “Müşteri Kimliği”.

Üst araç çubuğunda İstemcileri Yönet bağlantısını ve ardından yeşil düğmeyi tıklayın. “Yeni Bir Müşteri Kaydedin”. Uygulamaya bir ad, kısa bir açıklama ve web sitesi URL’si vermeniz gerekir. URL ve Yönlendirme URI'si bu örnekte aynı değer olabilir, çünkü hiçbir kullanıcının kimliğini doğrulamamız gerekmez. Sadece tüm değerleri doldurun ve yeni uygulama ayrıntılarını oluşturun.

Adında uzun bir karakter dizisi göreceksiniz MÜŞTERİ KİMLİĞİ. Ardından arka uç komut dosyasını oluştururken bu anahtara ihtiyacımız olacak, bu yüzden bu bölüme geri döneceğiz. Şimdilik jQuery anında arama uygulamamızın yapımına başlayabiliriz..

Varsayılan Web Sayfası İçeriği

Gerçek HTML, kullandığımız işlevsellik için çok zayıf. Görüntü verilerinin çoğu dinamik olarak eklendiğinden, sayfa içinde sadece birkaç küçük öğeye ihtiyaç duyarız. Bu kod içinde bulunur. index.html dosya.

    JQuery ile Instagram Fotoğraf Anında Arama Uygulaması         Not: Boşluk veya noktalama işaretine izin verilmez. Aramalar bir (1) anahtar kelimeyle sınırlıdır.

En son jQuery 1.7.2 kitaplığını iki harici .css ve .js kaynağıyla birlikte kullanıyorum. Girdi arama alanının dış form sarmalayıcısı yok, çünkü formu hiç göndermek istemiyoruz ve sayfanın yeniden yüklenmesine neden oluyoruz. Arama alanı içinde birkaç tuş vuruşunu devre dışı bıraktım, böylece kullanıcılar yazarken daha sınırlı kısıtlamalar oluyor..

Tüm fotoğraf verilerini orta bölüm kimliği içine yerleştireceğiz. #fotoğraflar. Temel HTML kodumuzu temiz tutar ve okunması kolaydır. Diğer tüm dahili HTML öğeleri jQuery aracılığıyla eklenecek ve ayrıca her yeni aramadan önce kaldırılacak.

API’den Çekme

Önce dinamik PHP betiğimizi oluşturarak başlamak, sonra da jQuery'e geçmek istiyorum. Yeni dosyamın adı instasearch.php tüm önemli arka uç kancalarını API içine alacak.

 İlk satır, dönüş verilerimizin düz metin veya HTML yerine JSON olarak biçimlendirildiğini gösterir. Bu, JavaScript işlevlerinin verileri doğru bir şekilde okuması için gereklidir. Daha sonra, uygulama müşteri kimliğini, kullanıcı arama değerini ve son API URL'sini içeren birkaç değişken kurulumum var. Güncellediğinizden emin olun. $ istemci kendi uygulamanızla eşleşecek dize değeri.
 Bu URL verilerine erişmek için dosya içeriğini ayrıştırmamız veya cURL işlevlerini kullanmamız gerekir. Özel fonksiyon get_curl () PHP'nin mevcut konfigürasyonunu kontrol eden küçük bir kod parçasıdır..
 CURL'yi etkinleştirmediyseniz, bu özelliği etkinleştirmeye ve verileri kendi işlev kitaplıkları aracılığıyla çekmeye çalışır. Aksi takdirde, daha yavaş olma eğiliminde olan ancak hala aynı şekilde çalışan, file_get_contents () yöntemini kullanabiliriz. Öyleyse aslında bu verileri şöyle bir değişkene çekebiliriz:
 $ response = get_curl ($ api); 
 Verileri Düzenleme ve İade Etme
 Bu orijinal JSON yanıtını, tüm bilgiler yüklü halde Instagram'dan iade edebiliriz. Ama çok fazladan fazla veri var ve her şey arasında dolaşmak çok can sıkıcı. Ajax yanıtlarını düzenlemeyi ve tam olarak hangi verilere ihtiyacımız olduğunu çıkarmayı tercih ediyorum.
 Önce tüm resimler için boş bir dizi ayarlayabiliriz. Sonra bir içinde her biri için() döngü JSON veri nesnelerini tek tek çıkartacağız. Biz sadece üç (3) spesifik değere ihtiyacımız var. $ src(tam boyutlu resim URL'si), $ başparmak(küçük resim URL’si) ve $ url(benzersiz fotoğraf kalıcı).
 $ images = array (); if ($ response) foreach (json_decode ($ response) -> $ item olarak veri) $ 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));  
 PHP döngülerine yabancı olanlar bu süreçte kaybolabilir. Sözdizimini anlamadıysanız, bu kod parçacıklarına çok fazla odaklanmayın. Resim dizimiz, en son yayın tarihinden itibaren en çok 16-20 benzersiz fotoğraf girişi içerecektir. Sonra tüm bu kodu sayfaya bir jQuery Ajax yanıtı olarak gönderebiliriz..
 print_r (str_replace ('\\ /', '/', json_encode ($ resimler))); ölmek(); 
 Ama şimdi öndeki senaryolara atlayabildiğimiz sahnelerin arkasına baktık. Bir dosya oluşturdum ajax.js hangi arama alanına bağlı birkaç olay işleyicileri içerir. Eğer şimdiye kadar hala takip ediyorsanız, heyecanlanacaksınız, tamamlamaya çok yakınız.!
 jQuery Anahtar Olayları
 Belgeyi ilk açarken hazır() olay Birkaç değişken ayarlıyorum. İlk ikisi, arama alanı ve fotoğraf kabı için doğrudan hedef seçiciler gibi davranır. Ayrıca, kullanıcının yazmayı bitirmesinden sonra 900 milisaniyeye kadar arama sorgusunu duraklatmak için bir JavaScript zamanlayıcı kullanıyorum.
 $ (document) .ready (function () var sfield = $ ("# s"); var container = $ ("# photos"); var zamanlayıcı; 
 Çalıştığımız iki ana fonksiyon bloğu var. Birincil işleyici, arama alanına odaklandığında bir .keydown () olayı tarafından tetiklenir. Öncelikle, anahtar kodun yasak anahtarlarımızdan biriyle eşleşip eşleşmediğini kontrol ederiz ve öyleyse tuş etkinliğini reddederiz. Aksi takdirde, varsayılan zamanlayıcıyı temizleyin ve aramadan önce 900ms bekleyin. instaSearch ().
 / ** * anahtar kod sözlüğü * 32 = UZAY * 188 = COMMA * 189 = DASH * 190 = DÖNEM * 191 = GERİ DÖNÜŞ * 13 = ENTER * 219 = SOL BRAKET * 220 = İLERİ YIKAMA * 221 = DOĞRU BRAKET * / $ (sfield ) .keydown (function (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);; 
 Değeri her güncellediğinizde otomatik olarak yeni arama sonuçları alır. Ayrıca, Ajax işlevini tetiklemesini engelleyebileceğimiz başka anahtar kodlar da var - bu kılavuzda listelenmek için çok fazla.
 Ajax instaSearch () İşlevi
 Yeni özel işlevimin içine ilk önce “Yükleniyor” Arama alanına sınıf. Bu sınıf, yeni bir yükleme gif resmi için kamera simgesini güncelleyecektir. Fotoğraflar bölümünde kalan olası verileri de boşaltmak istiyoruz. Sorgu değişkeni, arama alanına girilen geçerli değerden dinamik olarak çekilir..
 işlevi instaSearch () $ (sfield) .addClass ("loading"); $ (Konteyner) .empty (); var q = $ (sfield) .val (); $ .ajax (type: 'POST', url: 'instasearch.php', veri: "q =" + q, başarı: function (data) $ (sfield) .removeClass ("loading"); $ .each (veri, fonksiyon (i, item) var ncode = ' 
'; $ (Konteyner) .Append (nCode); ); , error: function (xhr, type, istisna) $ (sfield) .removeClass ("loading"); $ (container) .html ("Hata:" + türü); );  
 .Ajax () işlevini biliyorsanız, bu parametrelerin hepsinin tanıdık gelmesi gerekir. Kullanıcı arama parametresini geçiyorum “q” POST verileri olarak. Başarı ve başarısızlıktan sonra “Yükleniyor” sınıf ve herhangi bir yanıtı tekrar #fotoğraflar sargı.
 Başarı fonksiyonunda, bireysel div elemanlarını çıkarmak için son JSON yanıtını kullanıyoruz. Bu döngüyü $ .each () işleviyle gerçekleştirebilir ve yanıt veri dizimizi hedefleyebiliriz. Aksi takdirde, başarısızlık yöntemi doğrudan Instagram API'sinden gelen herhangi bir hata mesajı çıkarır. Ve gerçekten hepsi bu kadar var!
  
 Demoyu Gör
 Kaynak İndir
 
Son düşünceler
 Instagram ekibi, bu kadar muazzam bir uygulamayı ölçeklendiren harika bir iş çıkardı. API zaman zaman yavaş olabilir, ancak yanıt verileri her zaman uygun şekilde biçimlendirilmiş ve çalışması çok kolaydır. Umarım bu eğitici, 3. parti uygulamalarda çalışan çok fazla güç olduğunu gösterebilir..
 Maalesef mevcut Instagram arama sorguları bir seferde 1'den fazla etikete izin vermiyor. Bu, demomuzu sınırlandırıyor, ancak kesinlikle çekiciliğini ortadan kaldırmıyor. Yukarıdaki canlı örneğe göz atmalı ve oynamak için kaynak kodumun bir kopyasını indirmelisiniz. Ek olarak, aşağıdaki tartışma sonrası alandaki düşüncelerinizi bize bildirin..