Πώς να δημιουργήσετε τη δική σας μηχανή αναζήτησης Instagram Με jQuery και PHP

Από τότε που η Google παρουσίασε τις άμεσες λειτουργίες αναζήτησης, έχει γίνει μια δημοφιλής τάση στο σχεδιασμό ιστοσελίδων. Υπάρχουν μερικά διασκεδαστικά παραδείγματα στο διαδίκτυο, όπως η εφαρμογή Google Images του Michael Hart. Οι τεχνικές είναι όλες αρκετά απλές, όπου ακόμη και ένας προγραμματιστής ιστού με μέτρια εμπειρία jQuery μπορεί να πάρει API προγραμματισμού και δεδομένα JSON.

Για αυτό το σεμινάριο θέλω να το εξηγήσω πώς μπορούμε να δημιουργήσουμε μια παρόμοια εφαρμογή άμεσης αναζήτησης στο διαδίκτυο. Αντί να τραβήξουμε εικόνες από την Google, μπορούμε να χρησιμοποιήσουμε το Instagram το οποίο έχει αυξηθεί σημαντικά σε λίγα μόνο χρόνια.

Αυτό το κοινωνικό δίκτυο ξεκίνησε ως εφαρμογή για κινητά για iOS. Οι χρήστες μπορούν να τραβήξουν φωτογραφίες και να τις μοιραστούν με τους φίλους τους, να αφήσουν σχόλια και να μεταφορτώσουν σε δίκτυα τρίτων μερών όπως το Flickr. Η ομάδα αποκτήθηκε πρόσφατα από το Facebook και είχε δημοσιεύσει μια ολοκαίνουργια εφαρμογή για το Android Market. Το userbase τους έχει αυξηθεί πολύ, και τώρα οι προγραμματιστές μπορούν να δημιουργήσουν εκπληκτικές μίνι εφαρμογές όπως αυτή η επίδειξη instasearch.

Προβολή επίδειξης
Λήψη πηγής

Λήψη διαπιστευτηρίων API

Προτού δημιουργήσετε αρχεία έργου, θα πρέπει πρώτα να εξετάσουμε τις ιδέες πίσω από το σύστημα API του Instagram. Θα χρειαστείτε έναν λογαριασμό για να αποκτήσετε πρόσβαση στην πύλη του προγραμματιστή, η οποία προσφέρει χρήσιμες οδηγίες για αρχάριους. Το μόνο που πρέπει να αναζητήσουμε στη βάση δεδομένων Instagram είναι a “ταυτότητα πελάτη”.

Στην επάνω γραμμή εργαλείων, κάντε κλικ στο σύνδεσμο Διαχείριση χρηστών και στη συνέχεια κάντε κλικ στο πράσινο κουμπί “Εγγραφή νέου πελάτη”. Θα χρειαστεί να δώσετε στην εφαρμογή όνομα, σύντομη περιγραφή και διεύθυνση URL του ιστότοπου. Το URI διεύθυνσης URL και ανακατεύθυνσης μπορεί να έχει την ίδια τιμή σε αυτήν την περίπτωση μόνο επειδή δεν χρειάζεται να επαληθεύσουμε τους χρήστες. Απλά συμπληρώστε όλες τις τιμές και δημιουργήστε τα νέα στοιχεία της εφαρμογής.

Θα δείτε μια μακρά σειρά χαρακτήρων που ονομάζονται ΤΑΥΤΟΤΗΤΑ ΠΕΛΑΤΗ. Θα χρειαστούμε αυτό το κλειδί αργότερα κατά την κατασκευή του script backend, οπότε θα επιστρέψουμε σε αυτήν την ενότητα. Προς το παρόν μπορούμε να ξεκινήσουμε την κατασκευή της εφαρμογής άμεσης αναζήτησης jQuery.

Προεπιλεγμένο περιεχόμενο ιστοσελίδας

Η πραγματική HTML είναι πολύ λεπτή για το μέγεθος της λειτουργικότητας που χρησιμοποιούμε. Δεδομένου ότι τα περισσότερα δεδομένα εικόνας προσαρτώνται δυναμικά απαιτούνται μόνο μερικά μικρότερα στοιχεία μέσα στη σελίδα. Αυτός ο κώδικας βρίσκεται μέσα στο index.html αρχείο.

    Εφαρμογή Instagram Photo Instant Search με jQuery         Σημείωση: Δεν επιτρέπονται κενά ή σημεία στίξης. Οι αναζητήσεις περιορίζονται σε μία (1) λέξη-κλειδί.

Χρησιμοποιώ την τελευταία βιβλιοθήκη jQuery 1.7.2 μαζί με δύο εξωτερικούς πόρους .css και .js. Το πεδίο αναζήτησης εισαγωγής δεν έχει εξωτερικό περιτύλιγμα φόρμας επειδή δεν θέλουμε ποτέ να υποβάλουμε τη φόρμα και να προκαλέσουμε επαναφόρτωση της σελίδας. Έχω απενεργοποιήσει μερικές πληκτρολογήσεις μέσα στο πεδίο αναζήτησης, έτσι ώστε να υπάρχουν πιο περιορισμένοι περιορισμοί όταν πληκτρολογούν οι χρήστες.

Θα γεμίσουμε όλα τα δεδομένα φωτογραφιών μέσα στο αναγνωριστικό μεσαίου τμήματος #photos. Διατηρεί τη βασική μας HTML καθαρή και εύκολη στην ανάγνωση. Όλα τα άλλα εσωτερικά στοιχεία HTML θα προστεθούν μέσω του jQuery και επίσης θα καταργηθούν πριν από κάθε νέα αναζήτηση.

Τραβώντας από το API

Θα ήθελα να ξεκινήσω πρώτα δημιουργώντας το δυναμικό script μας PHP και στη συνέχεια να μεταβείτε στο jQuery. Το νέο μου αρχείο ονομάζεται instasearch.php το οποίο θα περιέχει όλα τα σημαντικά άγκιστρα οπίσθιας θύρας στο API.

Η πρώτη γραμμή δηλώνει ότι τα δεδομένα επιστροφής μορφοποιούνται ως JSON αντί για κείμενο ή HTML. Αυτό είναι απαραίτητο για τις λειτουργίες του JavaScript να διαβάζουν σωστά τα δεδομένα. Στη συνέχεια, έχω μερικές ρυθμίσεις μεταβλητών που περιέχουν το αναγνωριστικό πελάτη εφαρμογής, την τιμή αναζήτησης χρηστών και την τελική διεύθυνση URL API. Βεβαιωθείτε ότι έχετε ενημερώσει το $ client για να ταιριάζει με τη δική σας εφαρμογή.

Για να έχετε πρόσβαση σε αυτά τα δεδομένα URL, πρέπει να αναλύσουμε τα περιεχόμενα του αρχείου ή να χρησιμοποιήσουμε τις λειτουργίες cURL. Η προσαρμοσμένη λειτουργία get_curl () είναι ένα μικρό κομμάτι κώδικα που ελέγχει την τρέχουσα διαμόρφωση PHP.

Εάν δεν έχετε ενεργοποιήσει το cURL, θα προσπαθήσετε να ενεργοποιήσετε τη λειτουργία και να τραβήξετε δεδομένα μέσω της δικής τους βιβλιοθήκης λειτουργιών. Διαφορετικά, μπορούμε απλά να χρησιμοποιήσουμε file_get_contents () που τείνει να είναι πιο αργή, αλλά λειτουργεί ακόμα εξίσου καλά. Στη συνέχεια, μπορούμε πραγματικά να τραβήξουμε αυτά τα δεδομένα σε μια μεταβλητή όπως αυτή:

$ απάντηση = get_curl ($ api);

Οργάνωση και επιστροφή δεδομένων

Θα μπορούσαμε απλώς να επιστρέψουμε αυτήν την αρχική απάντηση JSON από το Instagram με όλες τις πληροφορίες που φορτώθηκαν. Αλλά υπάρχουν τόσα πολλά επιπλέον δεδομένα και είναι πολύ ενοχλητικό να βγάζετε τα πάντα. Προτιμώ να οργανώσω τις απαντήσεις του Ajax και να βγάλω ακριβώς ποια κομμάτια δεδομένων χρειαζόμαστε.

Αρχικά μπορούμε να ορίσουμε ένα κενό πίνακα για όλες τις εικόνες. Στη συνέχεια μέσα σε ένα για κάθε() θα βγάλουμε τα αντικείμενα δεδομένων JSON ένα-ένα-ένα. Χρειαζόμαστε μόνο τρεις (3) συγκεκριμένες τιμές που είναι οι $ src(διεύθυνση URL εικόνας πλήρους μεγέθους), $ thumb(διεύθυνση URL εικόνας μικρογραφίας), και $ url(μοναδική φωτογραφία permalink).

$ images = array (); αν ($ απάντηση) foreach (json_decode ($ απάντηση) -> δεδομένα ως στοιχείο $) $ src = $ item-> images-> standard_resolution-> url; $ thumb = $ item-> images-> thumbnail-> url; $ url = $ item-> σύνδεσμος? $ images [] = array ("src" => htmlspecialchars ($ src), "thumb" => htmlspecialchars ($ thumb), "url" => htmlspecialchars ($ url));

Όσοι δεν είναι εξοικειωμένοι με τους βρόχους PHP μπορεί να χαθούν στη διαδικασία. Μην εστιάζετε τόσο πολύ σε αυτά τα αποσπάσματα κώδικα αν δεν κατανοείτε τη σύνταξη. Η σειρά των εικόνων μας θα περιέχει το πολύ 16-20 μοναδικές λήψεις φωτογραφιών που έχουν τραβηχτεί από την πιο πρόσφατη ημερομηνία δημοσίευσης. Στη συνέχεια, μπορούμε να εξάγουμε όλο αυτόν τον κώδικα στη σελίδα ως απάντηση jQuery Ajax.

print_r (str_replace ('\\ /', '/', json_encode ($ images))); καλούπι();

Αλλά τώρα που είχαμε μια ματιά πίσω από τις σκηνές μπορούμε να πηδήξουμε σε scripting frontend. Έχω δημιουργήσει ένα αρχείο ajax.js το οποίο περιέχει χειριστές συμβάντων ζευγαριών που είναι συνδεδεμένοι στο πεδίο αναζήτησης. Εάν εξακολουθείτε να παρακολουθείτε μέχρι τώρα, τότε θα είστε ενθουσιασμένοι, είμαστε τόσο κοντά στο τέλος!

jQuery Key Events

Κατά το πρώτο άνοιγμα του εγγράφου έτοιμος() γεγονός που δημιουργώ ζεύγος μεταβλητών. Οι πρώτες δύο συμπεριφέρονται ως άμεσοι επιλογείς στόχων για το πεδίο αναζήτησης και το δοχείο φωτογραφιών. Χρησιμοποιώ επίσης χρονοδιακόπτη JavaScript για να θέσω σε παύση το ερώτημα αναζήτησης μέχρι 900 χιλιοστά του δευτερολέπτου μετά την ολοκλήρωση της πληκτρολόγησης του χρήστη.

$ (έγγραφο) .ready (function () var sfield = $ ("# s"); var container = $ ("# φωτογραφίες");

Υπάρχουν μόνο δύο βασικές λειτουργίες με τις οποίες δουλεύουμε. Ο κύριος χειριστής ενεργοποιείται από ένα συμβάν .keydown () όταν εστιάζεται στο πεδίο αναζήτησης. Αρχικά ελέγξουμε αν ο κωδικός κλειδιού ταιριάζει με οποιοδήποτε από τα απαγορευμένα κλειδιά μας και, αν ναι, αρνηθεί το βασικό συμβάν. Αλλιώς σβήστε τον προεπιλεγμένο χρονοδιακόπτη και περιμένετε 900ms πριν καλέσετε instaSearch ().

/ ** * γλωσσάριο κλειδιού * 32 = SPACE * 188 = COMMA * 189 = DASH 190 = PERIOD 191 = BACKSLASH 13 = ENTER 219 LEFT BRACKET 220 = SLASH FORMARD 221 = ) .keydown (συνάρτηση (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 = setTimeout (λειτουργία () instaSearch (), 900)?

Κάθε φορά που ενημερώνετε την τιμή, θα φτάσει αυτόματα τα νέα αποτελέσματα αναζήτησης. Υπάρχουν επίσης πολλοί άλλοι κωδικοί κλειδιών που θα μπορούσαμε να αποκλείσουμε από την ενεργοποίηση της λειτουργίας Ajax - αλλά πάρα πολλοί για εγγραφή σε αυτό το tutorial.

Η λειτουργία Ajax instaSearch ()

Μέσα στη νέα προσαρμοσμένη λειτουργία μου προσθέτουμε πρώτα ένα “φόρτωση” class στο πεδίο αναζήτησης. Αυτή η κλάση θα ενημερώσει το εικονίδιο κάμερας για μια νέα εικόνα gif φόρτωσης. Θέλουμε επίσης να αδειάσουμε τυχόν δεδομένα που απομένουν στο τμήμα των φωτογραφιών. Η μεταβλητή ερωτήματος τραβιέται δυναμικά από την τρέχουσα τιμή που εισάγεται στο πεδίο αναζήτησης.

λειτουργία instaSearch () $ (sfield) .addClass ("φόρτωση"); $ (κοντέινερ) .empty (); var q = $ (sfield) .val (); $ .ajax (type: 'POST', url: 'instasearch.php', δεδομένα: 'q =' + q, επιτυχία: συνάρτηση (δεδομένα) $ (sfield) .removeClass (δεδομένα, λειτουργία (i, στοιχείο) var ncode = ' 
' $ (κοντέινερ) .append (ncode); ); , σφάλμα: συνάρτηση (xhr, τύπος, εξαίρεση) $ (sfield) .removeClass ("φόρτωση"); $ (κοντέινερ) .html ("Σφάλμα:" τύπος +); );

Εάν γνωρίζετε τη λειτουργία .ajax () τότε όλες αυτές οι παράμετροι θα πρέπει να φαίνονται οικείες. Περνάω την παράμετρο αναζήτησης χρήστη “q” ως δεδομένα POST. Μετά την επιτυχία και την αποτυχία, αφαιρούμε το “φόρτωση” και να επισυνάψετε οποιαδήποτε απάντηση στο #photos περικάλυμμα.

Εντός της λειτουργίας επιτυχίας βγάζουμε την τελική απόκριση JSON για να βγάλουμε ξεχωριστά στοιχεία div. Μπορούμε να ολοκληρώσουμε αυτό το looping με τη συνάρτηση $ .each () και να στοχεύσουμε τη συστοιχία δεδομένων απόκρισης. Διαφορετικά, η μέθοδος αποτυχίας θα εκπέμπει απευθείας οποιοδήποτε μήνυμα σφάλματος απόκρισης από το API Instagram. Και αυτό είναι πραγματικά το μόνο που υπάρχει σε αυτό!

Προβολή επίδειξης
Λήψη πηγής

Τελικές σκέψεις

Η ομάδα του Instagram έχει κάνει μια θαυμάσια δουλειά που εξελίσσεται σε μια τέτοια τεράστια εφαρμογή. Το API μπορεί να είναι αργό κατά περιόδους, αλλά τα δεδομένα απόκρισης είναι πάντα κατάλληλα μορφοποιημένα και είναι πολύ εύκολο να εργαστείτε με. Ελπίζω ότι αυτό το σεμινάριο μπορεί να αποδείξει ότι υπάρχει μεγάλη δύναμη που λειτουργεί από εφαρμογές τρίτων.

Δυστυχώς, τα τρέχοντα ερωτήματα αναζήτησης Instagram δεν επιτρέπουν περισσότερες από 1 ετικέτες κάθε φορά. Αυτό περιορίζεται στο demo μας, αλλά σίγουρα δεν αφαιρεί καμία από τις γοητείες του. Θα πρέπει να δείτε το παραπάνω παράδειγμα και να κατεβάσετε ένα αντίγραφο του πηγαίου κώδικα μου για να παίξετε μαζί του. Επιπλέον, ενημερώστε μας τις σκέψεις σας στην παρακάτω περιοχή συζήτησης.