Bagaimana Membina Enjin Carian Instagram Sendiri Anda Dengan jQuery dan PHP

Sejak Google melancarkan ciri carian segera, ia telah menjadi trend popular dalam reka bentuk web. Terdapat beberapa contoh menyeronokkan dalam talian seperti aplikasi Google Images Michael Hart. Teknik-teknik ini semuanya agak mudah di mana bahkan pemaju web dengan pengalaman jQuery sederhana boleh memilih API pemrograman dan data JSON.

Untuk tutorial ini saya ingin menerangkan bagaimana kita boleh membina aplikasi web carian segera yang serupa. Daripada menarik imej dari Google kita boleh menggunakan Instagram yang telah berkembang pesat dalam beberapa tahun yang singkat.

Rangkaian sosial ini dimulakan sebagai aplikasi mudah alih untuk iOS. Pengguna boleh mengambil gambar dan berkongsi dengan rakan-rakan mereka, meninggalkan komen, dan memuat naik ke rangkaian pihak ke-3 seperti Flickr. Pasukan ini baru-baru ini diperoleh oleh Facebook dan telah menerbitkan aplikasi baru untuk Android Market. Userbase mereka telah berkembang dengan pesat, dan kini pemaju boleh membina aplikasi mini yang menakjubkan seperti demo instasearch ini.

Lihat Demo
Muat turun Sumber

Mendapatkan Kredensial API

Sebelum membuat sebarang fail projek, kita harus terlebih dahulu melihat idea-idea di belakang sistem API Instagram. Anda memerlukan akaun untuk mengakses portal pemaju yang menawarkan arahan yang berguna untuk pemula. Semua yang kita perlukan untuk menanyakan pangkalan data Instagram adalah “ID Pelanggan”.

Di bar alat atas klik pautan Kelola Pelanggan, kemudian klik butang hijau “Daftar Pelanggan Baru”. Anda perlu memberi nama permohonan, penerangan ringkas dan URL tapak web aplikasi. URL dan Redirect URI boleh menjadi nilai yang sama dalam contoh ini hanya kerana kita tidak perlu mengesahkan mana-mana pengguna. Hanya masukkan semua nilai dan menghasilkan butiran aplikasi baru.

Anda akan melihat rentetan aksara panjang yang dinamakan ID CLIENT. Kami akan memerlukan kunci ini nanti apabila membina skrip backend, jadi kami akan kembali ke bahagian ini. Buat masa ini kita boleh memulakan pembinaan aplikasi carian segera jQuery kami.

Kandungan Halaman Web Lalai

HTML sebenarnya sangat tipis untuk jumlah fungsi yang kami gunakan. Oleh kerana kebanyakan data imej dilampirkan secara dinamik, kami hanya memerlukan beberapa elemen yang lebih kecil di dalam halaman. Kod ini terdapat di dalam index.html fail.

    Instagram Carian Instagram Foto dengan jQuery         Nota: Tiada ruang atau tanda baca yang dibenarkan. Carian adalah terhad kepada satu (1) kata kunci.

Saya menggunakan perpustakaan jQuery 1.7.2 terkini bersama dua sumber .css dan .js luaran. Medan carian input tidak mempunyai pembungkus bentuk luar kerana kami tidak mahu menghantar borang dan menyebabkan halaman tambah nilai. Saya telah melumpuhkan beberapa ketukan kekunci di dalam medan carian supaya terdapat sekatan yang lebih terhad apabila pengguna menaip.

Kami akan mengisi semua data foto di dalam bahagian tengah ID #photos. Ia memastikan HTML asas kami bersih dan mudah dibaca. Semua elemen HTML dalaman yang lain akan ditambah melalui jQuery, dan juga dikeluarkan sebelum setiap carian baru.

Menarik dari API

Saya ingin mulakan terlebih dahulu dengan mencipta skrip PHP dinamik kami dan kemudian berpindah ke jQuery. Fail baru saya dinamakan instasearch.php yang akan mengandungi semua cangkuk backend penting ke API.

 Baris pertama menunjukkan bahawa data pemulangan kami diformatkan sebagai JSON dan bukannya plaintext atau HTML. Ini diperlukan untuk fungsi JavaScript untuk membaca data dengan betul. Setelah itu saya mempunyai beberapa pembolehubah pembolehubah yang mengandungi ID klien aplikasi, nilai carian pengguna, dan URL API akhir. Pastikan anda mengemas kini $ pelanggan nilai rentetan untuk memadankan aplikasi anda sendiri.
 Untuk mengakses data URL ini, kita perlu mengurai kandungan fail atau menggunakan fungsi cURL. Fungsi tersuai get_curl () hanya sedikit kod yang menyemak terhadap konfigurasi PHP semasa.
 Sekiranya anda tidak mengaktifkan kod ini, anda akan cuba mengaktifkan ciri dan menarik data melalui fungsi perpustakaannya sendiri. Jika tidak, kita boleh menggunakan fail_get_contents () yang cenderung menjadi lebih perlahan, tetapi masih berfungsi dengan baik. Kemudian kita sebenarnya boleh tarik data ini ke dalam pemboleh ubah seperti:
 $ respons = get_curl ($ api); 
 Menyusun & Mengembalikan Data
 Kami hanya dapat membalas respons JSON asal ini dari Instagram dengan semua maklumat yang dimuat naik. Tetapi terdapat begitu banyak data tambahan dan ia sangat menjengkelkan untuk melangkau melalui segala-galanya. Saya lebih suka menyusun jawapan Ajax dan mengeluarkan data yang kami perlukan.
 Mula-mula kita boleh menyediakan pelbagai kosong untuk semua imej. Kemudian di dalam a untuk setiap() gelung kita akan mengeluarkan objek data JSON satu demi satu. Kami hanya memerlukan tiga (3) nilai khusus iaitu $ src(URL imej bersaiz penuh), $ thumb(URL imej kecil), dan $ url(permalink foto yang unik).
 $ images = array (); jika (sambutan $) foreach (json_decode (sambutan $) -> data sebagai $ item) $ src = $ item-> images-> standard_resolution-> url; $ thumb = $ item-> images-> thumbnail-> url; $ url = $ item-> pautan; $ images [] = array ("src" => htmlspecialchars ($ src), "thumb" => htmlspecialchars ($ thumb), "url" => htmlspecialchars ($ url));  
 Mereka yang tidak dikenali dengan gelung PHP mungkin tersesat dalam proses tersebut. Jangan terfokus pada coretan kod ini jika anda tidak memahami sintaks. Pelbagai imej kami akan mengandungi paling 16-20 entri foto unik yang ditarik dari tarikh penerbitan yang paling terkini. Kemudian kami dapat mengeluarkan semua kod ini ke halaman sebagai respons jQuery Ajax.
 print_r (str_replace ('\\ /', '/', json_encode ($ images))); mati (); 
 Tetapi sekarang kita telah melihat di belakang tabir kita boleh melompat ke skrip frontend. Saya telah membuat fail ajax.js yang mengandungi beberapa pengendali acara yang terikat pada medan carian. Sekiranya anda masih mengikuti sehingga kini maka teruja kami hampir siap!
 Acara Utama jQuery
 Apabila mula membuka dokumen itu siap () acara saya menyediakan beberapa pemboleh ubah. Dua yang pertama bertindak sebagai pemilih sasaran langsung untuk medan carian dan kontena foto. Saya juga menggunakan pemasa JavaScript untuk menjeda permintaan carian sehingga 900 saat selepas pengguna menaip.
 $ (document) .ready (function () var sfield = $ ("# s"); var container = $ ("# photos"); 
 Terdapat hanya dua blok fungsi utama yang kami bekerjasama. Pengendali utama dipicu oleh acara .keydown () apabila difokuskan pada medan carian. Kami mula-mula semak jika kod kunci sepadan dengan mana-mana kunci yang dilarang kita, dan jika demikian menafikan peristiwa utama. Jika tidak, hapus pemasa lalai dan tunggu 900ms sebelum memanggil instaSearch ().
 / ** * kod kunci glosari * 32 = SPACE * 188 = COMMA * 189 = DASH * 190 = PERIOD * 191 = BACKSLASH * 13 = ENTER * 219 = KIRI BRACKET * 220 = FORWARD SLASH * 221 = RIGHT BRACKET * / $ (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);); 
 Setiap kali anda mengemas kini nilai, ia akan secara automatik mengambil hasil carian baharu. Terdapat juga banyak kod kunci lain yang kami dapat disekat daripada mencetuskan fungsi Ajax - tetapi terlalu banyak untuk penyenaraian dalam tutorial ini.
 Fungsi InstaSearch () Ajax
 Di dalam fungsi khas baru kami, kami akan menambah satu “memuatkan” kelas ke dalam medan carian. Kelas ini akan mengemas kini ikon kamera untuk imej gif memuatkan baru. Kami juga mahu mengosongkan apa-apa data yang mungkin tersisa dalam seksyen foto. Pemboleh ubah pertanyaan ditarik secara dinamik dari nilai semasa yang dimasukkan dalam medan carian.
 fungsi instaSearch () $ (sfield) .addClass ("loading"); $ (kontena) .empty (); var q = $ (sfield) .val (); $ .ajax (taip: 'POST', url: 'instasearch.php', data: "q =" + q, kejayaan: fungsi (data) $ (sfield) .removeClass ("loading"); (data, fungsi (i, item) var ncode = ' 
'; $ (kontena). buka (ncode); ); , ralat: fungsi (xhr, jenis, pengecualian) $ (sfield) .removeClass ("loading"); $ (kontena) .html ("Ralat:" + jenis); );  
 Jika anda biasa dengan fungsi .ajax (), maka semua parameter ini sepatutnya kelihatan biasa. Saya lulus parameter carian pengguna “q” sebagai data POST. Apabila kejayaan dan kegagalan kita menghapuskan “memuatkan” kelas dan tambah sebarang jawapan kembali ke #photos pembalut.
 Di dalam fungsi kejayaan kami melengkapkan melalui jawapan akhir JSON untuk menarik elemen div individu. Kita boleh mencapai perulangan ini dengan fungsi $ .each () dan menyasarkan pelbagai data tindak balas kami. Jika tidak, kaedah kegagalan secara langsung akan mengeluarkan sebarang mesej ralat respons daripada API Instagram. Dan itu benar-benar semua ada padanya!
  
 Lihat Demo
 Muat turun Sumber
 
Pemikiran Akhir
 Pasukan Instagram telah melakukan kerja-kerja yang indah untuk mengukur aplikasi yang begitu besar itu. API boleh menjadi perlahan pada masa-masa, tetapi data tindak balas sentiasa diformatkan dengan betul dan sangat mudah untuk digunakan. Saya harap tutorial ini dapat menunjukkan bahawa terdapat banyak kuasa yang bekerja dari aplikasi pihak ke-3.
 Malangnya pertanyaan carian Instagram semasa tidak membenarkan lebih daripada 1 tag pada satu masa. Ini mengehadkan demo kami, tetapi sudah tentu tidak menghilangkan daya tarikannya. Anda harus menyemak contoh langsung di atas dan memuat turun salinan kod sumber saya untuk bermain-main dengan. Di samping itu, beritahu kami fikiran anda di kawasan perbincangan pos di bawah.