Comment construire votre propre moteur de recherche Instagram avec jQuery et PHP

Depuis que Google a lancé les fonctionnalités de recherche instantanée, il est devenu une tendance populaire dans la conception Web. Il existe quelques exemples amusants en ligne, tels que l'application Google Images de Michael Hart. Les techniques sont toutes assez simples: même un développeur Web possédant une expérience modérée de jQuery peut récupérer des API de programmation et des données JSON..

Pour ce tutoriel, je veux expliquer comment nous pouvons créer une application Web de recherche instantanée similaire. Au lieu de tirer des images de Google, nous pouvons utiliser Instagram qui a énormément grandi en quelques années seulement..

Ce réseau social a commencé comme une application mobile pour iOS. Les utilisateurs peuvent prendre des photos et les partager avec leurs amis, laisser des commentaires et les télécharger sur des réseaux tiers tels que Flickr. L’équipe a récemment été acquise par Facebook et a publié une nouvelle application pour Android Market. Leur base d’utilisateurs a énormément grandi et les développeurs peuvent désormais créer d’incroyables mini-applications comme dans cette démo instasearch..

Voir la démo
Source de téléchargement

Obtention des informations d'identification de l'API

Avant de créer des fichiers de projet, nous devons d'abord examiner les idées qui sous-tendent le système d'API d'Instagram. Vous aurez besoin d'un compte pour accéder au portail du développeur, qui offre des instructions utiles aux débutants. Tout ce dont nous avons besoin pour interroger la base de données Instagram est un “identité du client”.

Dans la barre d’outils supérieure, cliquez sur le lien Gérer les clients, puis sur le bouton vert. “Enregistrer un nouveau client”. Vous devrez donner à l'application un nom, une brève description et l'URL du site. L'URL et l'URI de redirection peuvent avoir la même valeur dans cette instance uniquement parce que nous n'avons pas besoin d'authentifier des utilisateurs. Il suffit de renseigner toutes les valeurs et de générer les nouveaux détails de l'application.

Vous verrez une longue chaîne de caractères nommés IDENTITÉ DU CLIENT. Nous aurons besoin de cette clé ultérieurement lors de la construction du script backend. Nous allons donc revenir à cette section. Pour l'instant, nous pouvons commencer la construction de notre application de recherche instantanée jQuery.

Contenu de la page Web par défaut

Le code HTML réel est très mince pour la quantité de fonctionnalités que nous utilisons. Comme la plupart des données d'image sont ajoutées dynamiquement, nous n'avons besoin que de quelques éléments plus petits à l'intérieur de la page. Ce code se trouve à l'intérieur du index.html fichier.

    Instagram Photo Instant Search App avec jQuery         Remarque: aucun espace ni ponctuation n'est autorisé. Les recherches sont limitées à un (1) mot clé.

J'utilise la dernière bibliothèque jQuery 1.7.2 avec deux ressources externes .css et .js. Le champ de recherche d'entrée n'a pas de wrapper de formulaire externe car nous ne voulons pas jamais envoyer le formulaire et provoquer un rechargement de page. J'ai désactivé quelques séquences de touches dans le champ de recherche afin de limiter davantage les restrictions lorsque les utilisateurs tapent.

Nous allons renseigner toutes les données photo à l'intérieur de l'ID de la section centrale. #Photos. Il garde notre code HTML de base propre et facile à lire. Tous les autres éléments HTML internes seront ajoutés via jQuery et également supprimés avant chaque nouvelle recherche..

Tirant de l'API

J'aimerais commencer par créer notre script PHP dynamique, puis passer à jQuery. Mon nouveau fichier est nommé instasearch.php qui contiendra tous les points d'ancrage importants dans l'API.

 La première ligne indique que nos données de retour sont au format JSON au lieu de texte en clair ou HTML. Cela est nécessaire pour que les fonctions JavaScript lisent correctement les données. Ensuite, j'ai quelques configurations de variables contenant l'ID client d'application, la valeur de recherche de l'utilisateur et l'URL finale de l'API. Assurez-vous de mettre à jour le $ client valeur de chaîne pour correspondre à votre propre application.
 Pour accéder à cette URL, nous devons analyser le contenu du fichier ou utiliser les fonctions cURL. La fonction personnalisée get_curl () est juste un petit bout de code qui vérifie la configuration PHP actuelle.
 Si vous n'avez pas activé cURL, ceci tentera d'activer la fonctionnalité et d'extraire des données via leur propre bibliothèque de fonctions. Sinon, nous pouvons simplement utiliser file_get_contents (), qui a tendance à être plus lent, mais fonctionne tout aussi bien. Ensuite, nous pouvons extraire ces données dans une variable comme celle-ci:
 $ response = get_curl ($ api); 
 Organisation et retour des données
 Nous pourrions simplement renvoyer cette réponse JSON d'origine d'Instagram avec toutes les informations chargées. Mais il y a tellement de données supplémentaires et il est très agaçant de tout parcourir en boucle. Je préfère organiser les réponses Ajax et extraire exactement les données dont nous avons besoin.
 Premièrement, nous pouvons configurer un tableau vierge pour toutes les images. Puis à l'intérieur d'un pour chaque() boucle, nous allons extraire les objets de données JSON un par un. Nous avons seulement besoin de trois (3) valeurs spécifiques qui sont les $ src(URL de l'image en taille réelle), $ pouce(URL de l'image miniature), et $ url(photo unique permalien).
 $ images = array (); if ($ response) foreach (json_decode ($ response) -> les données en tant que $ 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));  
 Ceux qui ne sont pas familiers avec les boucles PHP peuvent se perdre. Ne vous concentrez pas trop sur ces extraits de code si vous ne comprenez pas la syntaxe. Notre gamme d'images contiendra au plus 16 à 20 entrées uniques de photos extraites de la date de publication la plus récente. Ensuite, nous pouvons afficher tout ce code sur la page en tant que réponse jQuery Ajax.
 print_r (str_replace ('\\ /', '/', json_encode ($ images))); mourir(); 
 Mais maintenant que nous avons jeté un coup d'œil dans les coulisses, nous pouvons nous lancer dans les scripts frontaux. J'ai créé un fichier ajax.js qui contient un couple de gestionnaires d’événements attachés au champ de recherche. Si vous suivez toujours jusqu'à maintenant, soyez excités, nous sommes si près du tout.!
 Événements clés de jQuery
 Lors de la première ouverture du document prêt() événement, je configure quelques variables. Les deux premiers se comportent comme des sélecteurs de cibles directes pour le champ de recherche et le conteneur de photos. J'utilise également un minuteur JavaScript pour suspendre la requête de recherche jusqu'à 900 millisecondes après la fin de la saisie..
 $ (document) .ready (function () var sfield = $ ("# s"); var conteneur = $ ("# photos"); var timer; 
 Nous ne travaillons qu'avec deux principaux blocs fonctionnels. Le gestionnaire principal est déclenché par un événement .keydown () lorsqu'il est activé sur le champ de recherche. Nous vérifions d’abord si le code de la clé correspond à l’une de nos clés interdites et, le cas échéant, annulons l’événement de clé. Sinon, effacez la minuterie par défaut et attendez 900 ms avant d'appeler instaSearch ().
 / ** * Glossaire des codes de touche * 32 = ESPACE * 188 = COMMA * 189 = DASH * 190 = PÉRIODE * 191 = COUVERCLE * 13 = ENTRER * 219 = SUPPORT GAUCHE * 220 = COUPURE AVANT * 221 = SUPPORT DROIT * / $ ) .keydown (fonction (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);); 
 Chaque fois que vous mettez à jour la valeur, les résultats de la recherche seront automatiquement récupérés. Il y a aussi beaucoup d'autres codes de clés que nous aurions pu empêcher de déclencher la fonction Ajax - mais trop nombreux pour être listés dans ce tutoriel.
 La fonction Ajax instaSearch ()
 Dans ma nouvelle fonction personnalisée, nous ajoutons d'abord un “chargement” classe sur le champ de recherche. Cette classe mettra à jour l’icône de la caméra pour une nouvelle image gif de chargement. Nous souhaitons également vider les éventuelles données laissées dans la section photos. La variable de requête est extraite dynamiquement de la valeur actuelle entrée dans le champ de recherche.
 fonction instaSearch () $ (sfield) .addClass ("chargement"); $ (conteneur) .empty (); varq = $ (sfield) .val (); $ .ajax (type: 'POST', url: 'instasearch.php', données: "q =" + q, succès: fonction (données) $ (sfield) .removeClass ("chargement"); $ .each (données, fonction (i, élément) var ncode = ' 
'; $ (conteneur) .append (ncode); ); , erreur: fonction (xhr, type, exception) $ (sfield) .removeClass ("loading"); $ (conteneur) .html ("Erreur:" + type); );  
 Si vous connaissez la fonction .ajax (), tous ces paramètres doivent vous paraître familiers. Je passe le paramètre de recherche utilisateur “q” comme les données POST. En cas de succès et d’échec, nous supprimons le “chargement” classe et ajouter une réponse dans le #Photos emballage.
 Dans la fonction de réussite, nous parcourons la réponse JSON finale pour extraire des éléments div individuels. Nous pouvons accomplir cela en boucle avec la fonction $ .each () et en ciblant notre tableau de données de réponse. Sinon, la méthode d'échec générera directement tout message d'erreur de réponse de l'API Instagram. Et c'est vraiment tout ce qu'il y a à faire!
  
 Voir la démo
 Source de téléchargement
 
Dernières pensées
 L’équipe d’Instagram a fait un travail remarquable en développant une application aussi formidable. L'API peut parfois être lente, mais les données de réponse sont toujours correctement formatées et très faciles à utiliser. J'espère que ce tutoriel peut démontrer que les applications tierces génèrent beaucoup de puissance.
 Malheureusement, les requêtes de recherche Instagram actuelles ne permettent pas plus de 1 balise à la fois. Cela limite notre démo, mais cela n'enlève rien à son charme. Vous devriez consulter l'exemple en direct ci-dessus et télécharger une copie de mon code source pour jouer avec. De plus, laissez-nous savoir ce que vous pensez dans le post-débat ci-dessous.