Cara Membangun Mesin Pencari Instagram Anda Sendiri Dengan jQuery dan PHP

Sejak Google meluncurkan fitur pencarian instan, itu telah menjadi tren populer dalam desain web. Ada beberapa contoh menyenangkan online seperti aplikasi Gambar Google Michael Hart. Teknik-tekniknya semuanya cukup mudah di mana bahkan seorang pengembang web dengan pengalaman jQuery moderat dapat mengambil API pemrograman dan data JSON.

Untuk tutorial ini saya ingin menjelaskan bagaimana kita dapat membangun aplikasi web pencarian instan serupa. Alih-alih menarik gambar dari Google, kita dapat menggunakan Instagram yang telah berkembang pesat hanya dalam beberapa tahun.

Jejaring sosial ini dimulai sebagai aplikasi seluler untuk iOS. Pengguna dapat mengambil foto dan membaginya dengan teman-teman mereka, meninggalkan komentar, dan mengunggah ke jaringan pihak ketiga seperti Flickr. Tim ini baru saja diakuisisi oleh Facebook dan telah menerbitkan aplikasi baru untuk Android Market. Userbase mereka telah berkembang pesat, dan sekarang pengembang dapat membangun aplikasi mini yang luar biasa seperti demo penelitian ini.

Lihat Demo
Sumber Unduhan

Memperoleh Kredensial API

Sebelum membuat file proyek apa pun, kita harus terlebih dahulu melihat ide di balik sistem API Instagram. Anda akan memerlukan akun untuk mengakses portal pengembang yang menawarkan instruksi bermanfaat bagi pemula. Yang kita butuhkan untuk menanyakan database Instagram adalah a “ID Klien”.

Di bilah alat atas, klik tautan Kelola Klien, lalu klik tombol hijau “Daftarkan Klien Baru”. Anda harus memberi nama aplikasi, deskripsi singkat, dan URL situs web. URL dan Redirect URI dapat menjadi nilai yang sama dalam hal ini hanya karena kami tidak perlu mengautentikasi pengguna mana pun. Cukup isi semua nilai dan hasilkan detail aplikasi baru.

Anda akan melihat serangkaian karakter bernama ID KLIEN. Kami akan membutuhkan kunci ini nanti ketika membuat skrip backend, jadi kami akan kembali ke bagian ini. Untuk saat ini kita dapat memulai pembangunan aplikasi pencarian instan jQuery kami.

Konten Halaman Web Default

HTML sebenarnya sangat tipis untuk jumlah fungsionalitas yang kami gunakan. Karena sebagian besar data gambar ditambahkan secara dinamis, kami hanya memerlukan beberapa elemen kecil di dalam halaman. Kode ini ditemukan di dalam index.html mengajukan.

    Aplikasi Pencarian Instan Foto Instagram dengan jQuery         Catatan: Tidak ada spasi atau tanda baca yang diizinkan. Pencarian terbatas pada satu (1) kata kunci.

Saya menggunakan pustaka jQuery 1.7.2 terbaru bersama dengan dua sumber daya .css dan .js eksternal. Bidang pencarian input tidak memiliki pembungkus formulir luar karena kami tidak ingin mengirimkan formulir dan menyebabkan pemuatan ulang halaman. Saya telah menonaktifkan beberapa penekanan tombol di dalam bidang pencarian sehingga ada batasan yang lebih terbatas saat pengguna mengetik.

Kami akan mengisi semua data foto di dalam ID bagian tengah #foto. Itu membuat HTML dasar kita bersih dan mudah dibaca. Semua elemen HTML internal lainnya akan ditambahkan melalui jQuery, dan juga dihapus sebelum setiap pencarian baru.

Menarik dari API

Saya ingin memulai dengan membuat skrip PHP dinamis kami dan kemudian pindah ke jQuery. File baru saya dinamai instasearch.php yang akan berisi semua kait backend penting ke dalam API.

 Baris pertama menunjukkan bahwa data pengembalian kami diformat sebagai JSON, bukan plaintext atau HTML. Ini diperlukan agar fungsi JavaScript dapat membaca data dengan benar. Setelah itu saya mendapatkan beberapa pengaturan variabel yang berisi ID klien aplikasi, nilai pencarian pengguna, dan URL API final. Pastikan Anda memperbarui $ klien nilai string untuk mencocokkan aplikasi Anda sendiri.
 Untuk mengakses data URL ini, kita perlu mem-parsing konten file atau menggunakan fungsi cURL. Fungsi kustom get_curl () hanya sedikit kode yang memeriksa terhadap konfigurasi PHP saat ini.
 Jika Anda tidak mengaktifkan cURL, ini akan mencoba mengaktifkan fitur dan menarik data melalui pustaka fungsinya sendiri. Kalau tidak, kita cukup menggunakan file_get_contents () yang cenderung lebih lambat, tetapi masih berfungsi juga. Maka kita benar-benar dapat menarik data ini ke dalam variabel seperti:
 $ response = get_curl ($ api); 
 Mengatur & Mengembalikan Data
 Kami hanya bisa mengembalikan respons JSON asli ini dari Instagram dengan semua informasi dimuat. Tetapi ada begitu banyak data tambahan dan sangat menjengkelkan untuk mengulang semuanya. Saya lebih suka mengatur tanggapan Ajax dan mengeluarkan data mana yang kami butuhkan.
 Pertama, kita dapat mengatur array kosong untuk semua gambar. Lalu di dalam a untuk setiap() loop kita akan menarik objek data JSON satu per satu. Kami hanya membutuhkan tiga (3) nilai spesifik yang merupakan $ src(URL gambar ukuran penuh), $ jempol(URL gambar mini thumbnail), dan $ url(permalink foto unik).
 $ images = array (); if ($ response) foreach (json_decode ($ response) -> data sebagai $ item) $ src = $ item-> images-> standard_resolution-> url; $ thumb = $ item-> images-> thumbnail-> url; $ url = $ item-> tautan; $ images [] = array ("src" => htmlspecialchars ($ src), "thumb" => htmlspecialchars ($ thumb), "url" => htmlspecialchars ($ url));  
 Mereka yang tidak terbiasa dengan loop PHP dapat tersesat dalam proses. Jangan terlalu fokus pada cuplikan kode ini jika Anda tidak memahami sintaksisnya. Array gambar kami akan berisi paling banyak 16-20 entri unik foto yang diambil dari tanggal publikasi terbaru. Kemudian kita bisa menampilkan semua kode ini ke halaman sebagai respons jQuery Ajax.
 print_r (str_replace ('\\ /', '/', json_encode ($ images))); mati(); 
 Tapi sekarang kita sudah melihat di belakang layar kita bisa melompat ke skrip frontend. Saya telah membuat file ajax.js yang berisi beberapa penangan acara yang terikat pada bidang pencarian. Jika Anda masih menindaklanjuti sampai sekarang maka bersemangatlah kami sudah hampir selesai!
 jQuery Acara Utama
 Saat pertama membuka dokumen siap() acara saya menyiapkan beberapa variabel. Dua yang pertama berperilaku sebagai penyeleksi target langsung untuk bidang pencarian dan wadah foto. Saya juga menggunakan penghitung waktu JavaScript untuk menjeda permintaan pencarian hingga 900 milidetik setelah pengguna selesai mengetik.
 $ (document) .ready (function () var sfield = $ ("# s"); var container = $ ("# photos"); var timer; 
 Hanya ada dua blok fungsi utama yang kami kerjakan. Handler utama dipicu oleh peristiwa .keydown () saat difokuskan pada bidang pencarian. Kami pertama kali memeriksa apakah kode kunci cocok dengan salah satu kunci terlarang kami, dan jika demikian meniadakan acara utama. Jika tidak, hapus timer default dan tunggu 900 ms sebelum memanggil instaSearch ().
 / ** * keycode glosarium * 32 = SPACE * 188 = COMMA * 189 = DASH * 190 = PERIOD * 191 = BACKSLASH * 13 = ENTER * 219 = BRACKET KIRI * 220 = BRASET KIRI * 220 = BRACKET KANAN * 221 = BRACKET KANAN * / $ (sfield ) .keydown (fungsi (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 memperbarui nilai, itu akan secara otomatis mengambil hasil pencarian baru. Ada juga banyak kode kunci lain yang dapat kami blokir agar tidak memicu fungsi Ajax - tetapi terlalu banyak untuk dicantumkan dalam tutorial ini.
 Fungsi Ajax instaSearch ()
 Di dalam fungsi kustom baru saya, pertama-tama kita menambahkan a “pemuatan” kelas ke bidang pencarian. Kelas ini akan memperbarui ikon kamera untuk gambar gif pemuatan baru. Kami juga ingin mengosongkan data yang mungkin tersisa di bagian foto. Variabel kueri ditarik secara dinamis dari nilai saat ini yang dimasukkan dalam bidang pencarian.
 function instaSearch () $ (sfield) .addClass ("loading"); $ (wadah) .empty (); var q = $ (sfield) .val (); $ .ajax (type: 'POST', url: 'instasearch.php', data: "q =" + q, sukses: fungsi (data) $ (sfield) .removeClass ("memuat"); $ .each (data, fungsi (i, item) var ncode = ' 
'; $ (container) .append (ncode); ); , error: function (xhr, type, exception) $ (sfield) .removeClass ("loading"); $ (wadah) .html ("Kesalahan:" + tipe); );  
 Jika Anda terbiasa dengan fungsi .ajax () maka semua parameter ini akan terlihat familier. Saya melewati parameter pencarian pengguna “q” sebagai data POST. Setelah berhasil dan gagal kami menghapus “pemuatan” kelas dan menambahkan tanggapan apa pun kembali ke #foto pembungkus.
 Dalam fungsi sukses, kami mengulangi respons JSON akhir untuk mengeluarkan elemen div individu. Kita dapat menyelesaikan perulangan ini dengan fungsi $ .each () dan menargetkan array data respons kami. Kalau tidak, metode kegagalan akan langsung mengeluarkan pesan kesalahan respons dari API Instagram. Dan hanya itu yang ada di sana!
  
 Lihat Demo
 Sumber Unduhan
 
Pikiran terakhir
 Tim Instagram telah melakukan pekerjaan luar biasa dalam meningkatkan aplikasi yang luar biasa ini. Kadang-kadang API bisa lambat, tetapi data respons selalu diformat dengan benar dan sangat mudah digunakan. Saya harap tutorial ini dapat menunjukkan bahwa ada banyak daya mematikan aplikasi pihak ke-3.
 Sayangnya permintaan pencarian Instagram saat ini tidak memungkinkan lebih dari 1 tag pada suatu waktu. Ini membatasi demo kami, tapi itu pasti tidak menghilangkan pesonanya. Anda harus melihat contoh langsung di atas dan mengunduh salinan kode sumber saya untuk bermain-main. Selain itu beri tahu kami pemikiran Anda di area diskusi pos di bawah ini.