[Παίζει μουσική] 

David J. Malan: Γεια σας. Ας ρίξουμε μια βόλτα Πρόβλημα Σετ 8 Mashup, το οποίο πρόκειται να σας προκαλέσει να αξιοποιήσει τα στοιχεία για τους Χάρτες Google με στοιχεία από το Google News και πουρέ μαζί σε ένα web applet που επιτρέπει στο χρήστη να διερευνήσει ένας χάρτης για τις τοπικές ειδήσεις σε συγκεκριμένες πόλεις, πόλεις, και ταχυδρομικοί κώδικες. Για να το κάνετε αυτό, θα πάμε να ενσωματώσει κάποια HTML, CSS, PHP, SQL, JavaScript, και μια τεχνική γενικά γνωστή ως AJAX με σκοπό για να δημιουργήσετε αυτό το συναρπαστικό εμπειρία του χρήστη. 

Ας πρώτα για τον εαυτό της το Google Maps. Αυτό, φυσικά, είναι ίσως ένα οικείο περιβάλλον. Αλλά αποδεικνύεται ότι το Google Maps Επίσης, παρέχει μια εφαρμογή API-- προγραμματισμού interface-- μέσω της οποίας μπορείτε να πάρετε τα στοιχεία από το Google Maps και την ενσωμάτωσή τους τις δικές σας εφαρμογές. Πράγματι, καθ 'όλο αυτό διαδικασία, θα πάμε για να βρείτε ένα ζευγάρι των διευθύνσεων URL ιδιαίτερα χρήσιμο το γεγονός ότι αναφέρονται στην προδιαγραφή για Πρόβλημα Σετ 8, ειδικά αυτό Ξεκινώντας Οδηγού ή των προγραμματιστών για το Google Maps API Έκδοση 3, καθώς και όπως το Google Maps API JavaScript αναφορά V3, η οποία είναι μια λίγο πιο απόκρυφες για να διαβάσετε αλλά στην πραγματικότητα έχει όλα του χαμηλότερου επιπέδου λεπτομέρειες για το τι λειτουργίες ή τις μεθόδους και τα αντικείμενα και ιδιότητες και γεγονότα στην πραγματικότητα έρχονται με το API, πολύ παρόμοια στο πνεύμα να [δεν ακούγεται] σελίδες. 

Τώρα, αν ρίξουμε μια ματιά στο Google News, θα ίσως δείτε ένα οικείο περιβάλλον εδώ. Αλλά τελικά, μπορείτε επίσης να ψάξετε Ειδήσεις Google για συγκεκριμένες γεωγραφικές περιοχές μέσω μιας παραμέτρου HTTP που ονομάζεται geo. Στην πραγματικότητα, αν μπορώ μεγέθυνση μέχρι εδώ, θα δείτε ότι Είμαι σε news.google.com/news/section?geo=02138. Και, μάλιστα, αν κάνω μεγέθυνση έξω, θα δείτε ότι είμαι κοιτάζοντας μια σελίδα με ένα σωρό απόψεις σχετικά με το Cambridge, Μασαχουσέτη. 

Εν τω μεταξύ, αν μπορώ πραγματικά να αλλάξει η Η διεύθυνση URL δεν είναι ένα ταχυδρομικό κώδικα, όπως αυτό, αλλά κάτι λίγο πιο βρώμικα όπως Cambridge, Μασαχουσέτη +, όπου το συν είναι ο τρόπος που κωδικοποιούν διάστημα χαρακτήρα σε μια διεύθυνση URL και πατήστε Enter, θα δείτε ότι στην πραγματικότητα δείτε σχεδόν την ίδια είδηση. Ίσως είναι λίγο διαφορετικά επειδή Cambridge πραγματικότητα έχει πολλούς ταχυδρομικούς κώδικες. Τώρα, πώς θα ξέρω ότι και, Στην πραγματικότητα, πώς θα μπορούσε με κάποιο τρόπο γραβάτα πόλεις και κωμοπόλεις να ταχυδρομικοί κώδικες σε περίπτωση που θέλει να επιτρέψει στον χρήστη να κοιτάζω προς τα πάνω είτε; Λοιπόν, αποδεικνύεται ότι υπάρχει μια ιστοσελίδα εκεί έξω που ονομάζεται geonames.org που είναι μια πρωτοβουλία για να έχουν μια ελεύθερα διαθέσιμη βάση δεδομένων όλων τα είδη των γεωγραφικών πληροφοριών, όχι μόνο για τις ΗΠΑ, αλλά επίσης για άλλες χώρες, όπως καλά. Στην πραγματικότητα, αν πάω σε αυτό το URL εδώ, η οποία αναφέρεται επίσης στο πρόβλημα που προδιαγραφών, θα το δείτε τρεις κατάλογο ένα σωρό αρχεία zip οποιαδήποτε από τις οποίες μπορείτε να κατεβάσετε από εσάς. Στην πραγματικότητα, αυτό το πρόβλημα που θα πάμε να κατεβάσετε us.zip. Τώρα, μέσα σε αυτό το αρχείο, είναι ένας ολόκληρος δέσμη των δεδομένων σε μορφή κειμένου. Τα αρχεία είναι πολύ παρόμοια με μια CSV-- τιμές διαχωρισμένες με κόμμα file-- αλλά χρησιμοποιεί στην πραγματικότητα καρτέλες για να οριοθετήσει τα πεδία. Τώρα, εν τω μεταξύ, εάν κοιτάξετε εδώ σε ό, τι έχω τόνισε, Τα πεδία σε αυτό το αρχείο θα να είναι τα πράγματα όπως τους κωδικούς χώρας, ταχυδρομικοί κώδικες, τοπωνύμια, και στη συνέχεια, σε κάποια μορφή ή άλλα, κράτη και επαρχίες, κοινότητες, και περισσότερο. Στην πραγματικότητα, έχω ήδη κατεβάσει το αρχείο αυτό εκ των προτέρων. Επιτρέψτε μου να προχωρήσει και να το ανοίξετε here-- us.text-- και, μάλιστα, θα δω αν μπορώ να μετακινηθείτε προς τα κάτω στη γραμμή 16792 θα δείτε μερικά αρχεία για το Cambridge, Μασαχουσέτη και διάφορα ταχυδρομικοί κώδικες του. Τι μπορείτε επίσης να δείτε εκεί είναι ο νομός, μερικοί αριθμοί που δεν μου καταλαβαίνω, αλλά και όλα ο τρόπος σχετικά με το δικαίωμα, Μερικοί GPS coordinates-- γεωγραφικό πλάτος και μήκος. Αυτό είναι μεγάλη, επειδή ένας από τους τα χαρακτηριστικά του Google Maps API είναι η ικανότητα να ανιχνεύει όπου θα είναι γεωγραφικά σε όρους συντεταγμένων GPS. 

Τώρα ας αρχίσουμε να καταλάβω πώς να ξεκινήστε συνδέοντας αυτά τα πράγματα μαζί. Σας έχω δώσει ένα ολόκληρο μάτσο κώδικα διανομής, καθώς και βάση δεδομένων MySQL. Στην πραγματικότητα, αν έχω τραβήξει ένα phpMyAdmin έχει ήδη εισαχθεί, καθώς σύντομα θα, pset8.SQL, θα δείτε έναν πίνακα MySQL ότι μοιάζει με αυτό, ένα πεδίο, η χώρα κώδικα, ταχυδρομικό κώδικα, το όνομα τον τόπο και περισσότερο. Οι τύποι όλων εκείνων στήλες Ι προέρχεται απλά με την ανάγνωση του readme.text αρχείο εδώ ότι καθορίζεται εάν ένα πεδίο είναι ένας ακέραιος, ή varchar ή τα παρόμοια. 

Έτσι, δημιουργήσαμε αυτόν τον πίνακα για σας και σας έδωσα τις εντολές SQL να εκτελέσει για να δημιουργήσει αυτό πίνακα στη δική σας βάση δεδομένων, αλλά είναι πραγματικότητα, δεν υπάρχουν στοιχεία σε αυτό ακόμα. Μάλλον, εσείς πρόκειται να πρέπει να κατεβάστε us.zip ή φερμουάρ κάθε χώρας αρχείο από αυτήν τη διεύθυνση URL εκεί. Και μετά θα πάμε να πρέπει να γράψετε μια δέσμη ενεργειών γραμμής εντολών σε PHP που είναι πρόκειται να ανοίξει αυτό το κείμενο αρχείο, επαναλάβετε σε γραμμές του, και στη συνέχεια για κάθε μία από αυτές οι γραμμές κάνουν ένα ένθετο σε ότι τοποθετεί τραπέζι στη βάση δεδομένων MySQL σας. Έτσι, στο τέλος αυτής της διαδικασίας, θα έχουν τρέξει αυτό το σενάριο, τελικά, μόνο μία φορά στη θεωρία. Στην πραγματικότητα, θα πρέπει πιθανώς να τρέξει ένα σωρό φορές ενώ προσπαθεί να καθορίσει διάφορα σφάλματα. 

Τελικά, θα πάμε να έχουν μια πραγματικά μεγάλη βάση δεδομένων με χιλιάδες και χιλιάδες γεωγραφικής σειρές. Στη συνέχεια θα πάμε να θέσει αυτό το εισαγόμενο γραφή στην άκρη αφού λειτουργεί και η βάση δεδομένων σας είναι ωραίο και σωστή, και, στη συνέχεια, θα πάμε να περάσουμε στην πραγματικότητα την εφαρμογή της ίδιας της mashup. Το Mashup πρόκειται να δούμε ένα μικρό κάτι σαν αυτό. Στο mashup.cs50.net, εμείς έχουμε μια λύση προσωπικό ότι φαίνεται λίγο κάτι σαν αυτό. Πράγματι, αν κάνω κλικ σε αυτή την εφημερίδα icon για το Cambridge, Μασαχουσέτη, θα δείτε ένα περιστρεφόμενο icon λίγο και, στη συνέχεια, μια διατεταγμένη λίστα, ένα λίστα με κουκκίδες των άρθρων που σχετίζονται με την Cambridge, Μασαχουσέτη. Αν κάνω κλικ στο Τσάρλεστον, Μασαχουσέτη, Θα δω το ίδιο για εκείνη την πόλη. Και αν κάνω κλικ στο Watertown, Μασαχουσέτη, ενδέχεται να μην υπάρχει ειδήσεις από Watertown, έτσι θα δείτε κάτι όπως αργή ημέρα ειδήσεων. 

Τώρα, εν τω μεταξύ, στο επάνω αριστερό μέρος είναι κάποια γνωστά Google Maps ελέγχους να επιτρέπουν να κάνετε zoom out, pan πάνω, κάτω, αριστερά και δεξιά, αλλά επίσης ένα κουτί αναζήτησης που βάζουμε εκεί. Έτσι, αν μπορώ να ψάξω για, ειλικρινά, Το μόνο άλλο ταχυδρομικό κώδικα ξέρω, 90210, θα δούμε πραγματικά Μπέβερλι Χιλς, Καλιφόρνια. Όταν μεταφερθεί με οδηγεί σε Καλιφόρνια και ένα σωρό ειδήσεις για Μπέβερλι Χιλς. Τώρα παρατηρήσετε, επίσης, τι συνέβη εκεί. Αν έχω αυτή την αναζήτηση χρόνου για 02138 ή ακόμη και Cambridge της Μασαχουσέτης κόμμα ή κάποια παραλλαγή αυτού, μπορείτε να πάρετε μια λίγο αναπτυσσόμενο αυτόματης συμπλήρωσης. Τώρα αυτό χρησιμοποιεί ένα plugin για μια βιβλιοθήκη που ονομάζεται jQuery, και ότι plugin ονομάζεται typeahead. Εμείς απλά διαβάστε η τεκμηρίωση, αρχείο λήψης ολοκληρωμένων οι .js στον Κώδικα Διαχείρισης του Δικτύου, έτσι ώστε να τελικά μπορεί να γράψει τον κώδικα που γεμίζει αυτό το αναπτυσσόμενο μενού με την αυτόματη επιλογές ή οι προτάσεις αυτοκινήτων. 

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

Ας ρίξουμε μια ματιά στη συνέχεια, τον κώδικα διανομής. Αφού έχετε κατεβάσει pset8.zip και φερμουάρ σε κατάλογο vhost σας στο CS50 Appliance, Θα δείτε αυτές τις καταλόγους εδώ μέσα. Bin-- που σημαίνει γενικά για δυαδικό εκτελέσιμο programs-- περιλαμβάνει, όπως στην pset7, μερικοί PHP αρχεία που άλλα αρχεία περιλαμβάνουν, τότε κοινό, η οποία είναι Τα αρχεία που χρειάζεστε να είναι προσβάσιμες από το κοινό σε ένα χρήστη με ένα πρόγραμμα περιήγησης. Ας ρίξουμε μια ματιά στο κατάλογο bin, και θα βλέπουμε ότι υπάρχει ένα αρχείο ήδη εκεί ονομάζεται Εισαγωγή. Αν ανοίξουμε αυτό με το gedit, θα δούμε ότι, δυστυχώς, δεν υπάρχει πολύς εκεί. Το μόνο που υπάρχει, όμως, είναι μια δουλεία στην κορυφή που ορίζει ποιοι interpreter-- σε αυτή την περίπτωση PHP-- θα πρέπει να χρησιμοποιούνται για πραγματικά εκτελέσουν αυτό το αρχείο. Στη συνέχεια, όμως εκεί που λέει TODO είναι όπου είστε Θα χρειαστεί να γράψετε κάποιο κώδικα που απαιτεί ίσως το config αρχείο που είναι στην συμπεριλαμβάνει κατάλογο όπως έχουμε κάνει στο παρελθόν με τα αρχεία της PHP. Και μετά θα πάμε να πρέπει με κάποιο τρόπο να ανοίξει us.text που σας πιθανώς αποσυμπιέσετε ήδη. Στη συνέχεια, θα πάμε να πρέπει να επαναλάβει πάνω από τις γραμμές σε αυτό το αρχείο, ίσως, χρησιμοποιώντας ορισμένες από τις λειτουργίες προτείνεται στην προδιαγραφή. Στη συνέχεια, τοποθετήστε το καθένα από αυτά γραμμές στη βάση δεδομένων MySQL χρησιμοποιώντας τη λειτουργία αναζήτησης, το οποίο έχουμε πάλι δώσατε with-- ή τουλάχιστον μία παραλλαγή αυτής σε functions.php, το οποίο θα δούμε σε λίγο. 

Τώρα ας κλείσουμε την εισαγωγή και να επιστρέψετε στην κατάλογο μας και αυτή τη φορά να πάει σε περιλαμβάνει. Και αν το κάνω ls εκεί, θα δείτε τρία αρχεία αρκετά όπως Πρόβλημα Σετ 7. Και ας ρίξουμε μια γρήγορη ματιά, για παράδειγμα, στο config.php. Εκεί, είναι λιγότερες γραμμές από ό, τι στο παρελθόν, και φαίνεται ότι αυτό το αρχείο περιλαμβάνει constants.php και functions.php. Είμαστε χρησιμοποιώντας μια ελαφρώς διαφορετική τεχνική αυτή τη φορά γύρω από πραγματικά διευκρινίζει ότι τα αρχεία αυτά είναι σχετικές στον τρέχοντα κατάλογο __ DIR__ αντιπροσωπεύει ανεξάρτητα από τον κατάλογο αυτό αρχείο, το config.php, είναι από μόνη της. Έτσι, αυτό είναι μια πιο κατηγορηματικό τρόπο προσδιορισμού τι άλλα αρχεία που θέλετε να απαιτήσει. 

Τώρα, αν κλείσω αυτό το αρχείο και ανοίξει constants.php αντ 'αυτού, θα δείτε ένα αρχείο που θυμίζει πολύ Πρόβλημα με Σετ 7, καθώς, αν και με μια διαφορετική βάση δεδομένων που ονομάζεται pset8. Τέλος, σε functions.php, θα δούμε μόνο μία λειτουργία αυτή τη φορά ονομάζεται ερώτημα. Αυτό είναι σχεδόν το ίδιο, εκτός από χειριζόμαστε λάθη αυτή τη φορά γύρω από λίγο διαφορετικά, αλλά είναι η χρήση είναι το ίδιο όπως στο πρόβλημα που επτά. 

Τώρα ας πάμε πίσω στο pset8 μας ευρετήριο, πηγαίνετε σε δημόσιο, και εκεί αν κάνω ls, θα δείτε this-- articles.php, index.html, search.php, και update.php-- όλα τα αρχεία. Και τότε ο γραμματοσειρές CSS, img, και Κατάλογος js αρκετά όπως pset7. 

Ας ρίξουμε μια ματιά στο index.html, η οποία είναι πρόκειται να είναι πραγματικά η σημείο εισόδου στην smashup. Τώρα στο index.html, θα δείτε ένα ολόκληρο δέσμη των στοιχείων σύνδεσης στο κεφάλι, Συγκεκριμένα, για εκκίνησης για τη δική μας CSS που ακολουθείται από ένα σωρό script ετικέτες για πράγματα όπως το χαρτών, API μόνη της, ένα ειδικό δείκτη με ετικέτα βοηθητικό πρόγραμμα που αναφέρεται στην προδιαγραφή είναι στη διάθεσή σας, ίδια jQuery, bootstrap μόνη της, και μια άλλη βιβλιοθήκη καλείται υπογράμμισης που μιλάμε για το spec. Underscore.js όπως jquery.js είναι μια βιβλιοθήκη JavaScript ότι έχει ένα σωρό λειτουργίες ότι πολλοί άνθρωποι στον κόσμο την επιθυμία υπήρχε στην ίδια JavaScript. Έτσι, όλα αυτά είναι στην πραγματικότητα είναι αρκετά δημοφιλής. Έχουμε επίσης αναφερθεί typeahead η οποία είναι η βιβλιοθήκη που κάνει ότι αυτόματης συμπλήρωσης αναπτυσσόμενο και Τέλος μια σύνδεση με το δικό μας το JavaScript. 

Εν τω μεταξύ, και ίσως Ευτυχώς, αυτό το mashup οδηγείται από σχετικά μικρή HTML εδώ κάτω στο κάτω μέρος. Παρατηρήστε ότι έχουμε καθορίσει ένα div στο το σώμα μας από ρευστό τάξης δοχείο. Αυτό, ανά εκκίνησης του τεκμηρίωση, μόλις σημαίνει ότι αυτό το div πρόκειται να γεμίσει το παράθυρο ή το παράθυρο του browser πλήρως. 

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

Τέλος, υπάρχει μια μορφή μέσα από το οποίο εδώ υλοποιεί το πλαίσιο κειμένου επάνω στην κορυφή αριστερά στο περιβάλλον μας για την αναζήτηση. Παρατηρήστε ότι έχουμε χρησιμοποιήσει ένα κομμάτι της εκκίνησης εδώ too-- πράγματα όπως μορφή-inline και τη μορφή-ομάδα. Έχουμε δίνεται η πρώην μοναδικό αναγνωριστικό του μορφή. Και τότε, σε τελική ανάλυση, έχω πραγματικά ένας τύπος εισόδου, το οποίο είναι αρκετά εξοικειωμένοι, του οποίου η ταυτότητα είναι q. Απλά μια σύμβαση. Q για query-- θα μπορούσε να έχει κληθεί τίποτα. Και στη συνέχεια το σύμβολο κράτησης θέσης, Εν τω μεταξύ, είναι η πόλη, πολιτεία, και τον ταχυδρομικό κώδικα που μπορείτε να ανακαλέσετε βλέπουμε σε mashup μας demo νωρίτερα. Ας κλείσει το αρχείο αυτό. 

Τώρα ρίξτε μια ματιά στα αρχεία PHP που περιμένουν και στη συνέχεια τα αρχεία JavaScript. Στην PHP αρχεία μας, έχουμε εφαρμόζεται ήδη για εσάς, για παράδειγμα, ενημερώσεις. Update.php-- εμείς δεν θα δαπανήσει ένα τεράστιο χρονικό διάστημα για here-- με λίγα λόγια είναι το αρχείο που μας Κώδικα JavaScript θα να επικοινωνήσετε μέσω AJAX ότι ασύγχρονη τεχνική που είναι χτισμένο σε ένα JavaScript αυτές τις μέρες που είναι πρόκειται να επιτρέψει σε μας για να ζητήσετε update.php για περισσότερες πληροφορίες. 

Συγκεκριμένα, οποτεδήποτε ο χρήστης σέρνει το χάρτη ή εκτελεί μια αναζήτηση που πηδά ο χρήστης σε μια άλλη θέση, κωδικό μας JavaScript, όπως θα δούμε σύντομα, είναι πρόκειται να καλέσει update.php και να ζητήσει για 10 ή έτσι τους δείκτες μέσα στο παράθυρο με βάση σχετικά με τις συντεταγμένες του GPS από την κορυφή και τον πυθμένα γωνίες του εν λόγω χάρτη. Μπορούμε στη συνέχεια να συμπληρώσουν εκ νέου το χάρτη τώρα ότι ο χρήστης έχει μετακινηθεί στην οθόνη για για να δείτε 10 πιθανώς νέα δείκτες για διάφορες πόλεις. Εν τω μεταξύ, το αρχείο αυτό είναι τελικά πρόκειται να εκτελέσετε ένα ερώτημα SQL κατά βάση δεδομένων μας πίνακα που ονομάζεται θέσεις που πρόκειται να επιστρέψει εκείνους 10 ή λιγότερες θέσεις. 

Εν τω μεταξύ, σε articles.php, είναι μια άλλη αρχείο έχουμε γράψει στο σύνολό της. Είναι πολύ παρόμοια στο πνεύμα με Συνάρτηση LOOKUP Πρόβλημα Σετ 7, το επικοινώνησε με το Yahoo Finance για εσάς. Αυτό το αρχείο επαφών Ειδήσεις Google για εσάς, τελικά, αρπάζοντας αναγνώσιμη από μηχανή version-- σε κάτι που ονομάζεται RSS format-- των ειδήσεων για το Cambridge ή Μπέβερλι Χιλς ή ό, τι πόλη που έχετε ψάξει για βασίζονται στην εν λόγω geoparameter. Έχουμε αναλύσει αυτό το RSS, το οποίο είναι απλώς ένα είδος της γλώσσας σήμανσης που ονομάζεται XML, και, στη συνέχεια, στην πραγματικότητα επιστρέψετε στο πρόγραμμα περιήγησής σας και τον κωδικό σας JavaScript, Συγκεκριμένα, σε μια μορφή που ονομάζεται JSON, το JavaScript Object Notation. Τώρα θα δείτε στο specification-- σας επισημάνω πώς μπορείτε πραγματικά να δείτε μερικά από τα JSON επόμενο back-- ότι αυτή η λειτουργικότητα τελικά σας επιτρέπει να συμπληρώσετε αυτά τα popup μενού έτσι ότι όταν κάνετε κλικ σε ένα δείκτη στον χάρτη θα δείτε πραγματικά ένα σωρό από σφαίρες, έκαστο των οποίων συνδέσμους σε ένα άρθρο. 

Τώρα ας ρίξουμε μια ματιά σε μια τελευταία PHP αρχείο το οποίο, ευτυχώς, δεν έχουμε πολλά να συμβαίνουν on-- μόλις ένα αρκετά μεγάλο TODO. Αυτή τη στιγμή αυτό το αρχείο δηλώνει μια σειρά που ονομάζεται θέσεις. Και στη συνέχεια, τελικά εκτυπώσεις ότι η διάταξη στο JSON format-- είναι αρκετά τυπώνει ακριβώς έτσι ώστε τα πράγματα είναι πιο εύκολα για τον εντοπισμό σφαλμάτων. Δυστυχώς, στην μέση υπάρχει αυτό TODO, το οποίο καλεί για να αναζητήσετε το βάση δεδομένων για τις θέσεις που ταιριάζουν σε ένα γεω HTTP παράμετρο. 

Και, πράγματι, αυτό πρόκειται να είναι ένα από τα challenges-- σας να υλοποιήσετε αυτήν τη λειτουργικότητα εδώ έτσι ώστε όταν έρχεστε σε επαφή με αυτό το αρχείο ένα URL όπως η αναζήτηση. php? γεω = κάτι, κωδικός σας θα επιστρέψει τελικά ένα JSON σειρά από όλα τα μέρη σε σας πίνακα της βάσης δεδομένων που αντιστοιχούν σε αυτές τις πληροφορίες. Έτσι, αν ο χρήστης πληκτρολογεί στο Cambridge, το αρχείο σας εδώ search.php θα πρέπει τελικά να επιστρέψει μια σειρά JSON για όλους τους αγώνες για το Cambridge, η οποία θα μπορούσε να είναι στη Μασαχουσέτη αλλά θα μπορούσε να είναι ακόμη και οπουδήποτε αλλού. 

Τέλος, ας ρίξουμε μια ματιά σε δύο αρχεία που είναι στατικές ultimately-- αρχείο CSS σας και το αρχείο σας JavaScript. Αν πάω σε κατάλογο CSS μας, υπάρχει μια ολόκληρη δέσμη των αρχείων εκεί, αλλά οι περισσότεροι από αυτούς είναι οι βιβλιοθήκες. Πάω να ρίξω μια ματιά, Συγκεκριμένα, στο styles.css, η οποία είναι η δική μας παγκόσμια CSS που είναι πρόκειται να στυλιζάρω όλο αυτό το mashup. Θα το αφήσουμε σε εσάς να διαβάσετε τα σχόλια εδώ, όμως, με λίγα λόγια, Αυτό είναι το CSS που διασφαλίζει ότι μας mashup, από προεπιλογή έξω από το κουτί, Μοιάζει ακριβώς με τον τρόπο που θέλουμε it-- με το χάρτη γεμίζοντας το λιμάνι θέα και με την αναζήτηση κουτί επάνω στην επάνω αριστερή γωνία. Έχουμε επίσης εκφράσει την ελευθερία του stylizing ότι typeahead αναπτυσσόμενο μενού λίγο ως πολύ. 

Το πιο σημαντικό αρχείο ίσως γι 'αυτό το πρόβλημα που είναι αυτό το τελευταίο, scripts.js. Μέσα από τον κατάλογο σας JS είναι ακόμη περισσότερα αρχεία. Όλα αυτά είναι τα αρχεία της βιβλιοθήκης εκτός από αυτό, scripts.js. Αν ανοίξουμε αυτό επάνω, ας ρίξουμε μας τελική περιήγηση μέσω τις λειτουργίες που είναι χτισμένα σε αυτό το αρχείο για σας και την προσοχή κλήση στις Todos που βρίσκονται μπροστά μας. 

Στην κορυφή αυτού του αρχείου, είναι τρεις καθολικές μεταβλητές. Ένα για χάρτη, ο οποίος πρόκειται να είναι μια αναφορά στο Google χάρτη μας. Μπορείτε να σκεφτείτε από το είδος του ως δείκτη. Εν τω μεταξύ, έχουμε μια άλλη παγκόσμια μεταβλητή που ονομάζεται πληροφορίες, οι οποίες φαίνεται να είναι αποθήκευση της τιμής επιστροφής μιας κλήσης σε νέα google.maps.InfoWindow. JavaScript υποστηρίζει αντικείμενα που είναι πολύ παρόμοια στο πνεύμα με αντηρίδες. Και τι αυτή η γραμμή για σκοπούς μας κάνει είναι η δημιουργία ενός νέου Πληροφορίες παράθυρο στη μνήμη και στη συνέχεια διατηρώντας γύρω αναφορά αυτό σε μια μεταβλητή που ονομάζεται Info. Και μεταξύ αυτών, Εν τω μεταξύ, είναι αυτό που φαίνεται να είναι ένα άδειο JavaScript σειρά ονομάζονται δείκτες. Όλες αυτές οι εικόνες εφημερίδων, ή μπορείτε μπορεί να επιλέξει μια άλλη εικόνα εντελώς, πρόκειται να αποθηκευτεί τελικά σε αυτή την σειρά έτσι ώστε να μπορούμε πολύ εύκολα να προσθέσετε Ο χάρτης και να τα αφαιρέσετε από τον χάρτη. 

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

Πρέπει πρώτα να αναγνωρίσει ένα σωρό στυλ, που καταλήγουν stylizing Ο χάρτης σύμφωνα με το spec. Μετά δηλώνουμε μια σωρό επιλογές, το οποίο να προσαρμόσετε περαιτέρω την Google χάρτη που είμαστε έτοιμοι να ενσωματώσετε. Στη συνέχεια, χρησιμοποιήστε ένα κομμάτι του κώδικα jQuery, η οποία εξηγείται σε λίγο περισσότερες λεπτομέρειες στο spec, να αρπάξει το στοιχείο αυτό, χάρτης καμβά ότι είμαστε τόσο μονοσήμαντα. Και τότε αυτή η γραμμή είναι εδώ ό, τι φαίνεται να μαγικά να μας δώσει ένα χάρτη της Google στο εσωτερικό του τη δική μας εφαρμογή, αποθηκεύει μία αναφορά σ ' σε αυτή τη μεταβλητή που ονομάζεται χάρτη. 

Τέλος, εδώ κάτω είμαστε εγγραφείτε ό, τι λέγεται ακροατής. Σκεφτείτε back-- τρόπο, τον τρόπο back-- στην εβδομάδα μηδέν στο CS50 όταν κοιτάξαμε το μηδέν και υποστήριξή του μέσω μια βόλτα μέσα για πράγματα που ονομάζεται εκδηλώσεις και εκπομπές. Μπορεί να μην χρησιμοποιούνται μόνοι σας, αλλά είναι ένας μηχανισμός με τον οποίο ένα πρόγραμμα περιήγησης σε αυτή την περίπτωση μπορεί να πάρει την προσοχή μας όταν είναι έτοιμος να εκτελέσει πράγματι κάποιο κώδικα. Σε αυτήν την περίπτωση, πρόκειται να ακούσουμε στο χάρτη για μια εκδήλωση που ονομάζεται αδράνεια. Αυτό σημαίνει ότι ο browser έχει ολοκληρώσει τη φόρτωση χάρτη της Google. Σε αυτό το σημείο μια λειτουργία που ονομάζεται Διαμόρφωση θα πρέπει τελικά να να εκτελεστεί. Αυτή η λειτουργία, να ρυθμίσετε, θα δούμε, είναι γραμμένο από εμάς. 

Τώρα εδώ κάτω είναι μια συνάρτηση ότι, δυστυχώς, είναι απλά ένας δείκτης TODO add. Ανά το spec. θα πάμε να χρειάζονται να γράψει τον κώδικα που πράγματι προσθέτει μια marker-- αν φαίνεται όπως μια εφημερίδα ή ένα καρφί του αντίχειρα, ή κάτι else-- στο χάρτη της Google. Εδώ τώρα είναι ότι η λειτουργία που ονομάζεται configure. Θα το αφήσουμε σε εσάς να διαβάσετε μέσω αυτού με περισσότερες λεπτομέρειες, αλλά να συνειδητοποιήσουμε ότι έχουμε προσθέσει Μια δέσμη περισσότερους ακροατές έτσι ώστε να μπορούμε να εκτελέσουμε κώδικα, όταν η χρήστης κάνει κλικ και σέρνει το χάρτη. Έχουμε επίσης κώδικας εδώ ότι αρχικοποιεί ότι typeahead plugin έτσι ώστε το αναπτυσσόμενο μενού λειτουργεί πραγματικά. 

Αλλά ας σταθώ μόνο σε δυο θέσεις εδώ. Συγκεκριμένα, αυτό να το κάνετε εδώ. Θα αναβάλει την απευθείας σύνδεση τεκμηρίωση και η προδιαγραφή για το πώς να συμπληρώσετε αυτό το TODO. Αλλά με λίγα λόγια, αυτή η βιβλιοθήκη typeahead σας επιτρέπει να περάσετε σε ό, τι είναι γενικά γνωστό ως εκμαγείο, η οποία έχει κάποιες μεταβλητές κράτησης θέσης πολύ παρόμοια στο πνεύμα με printf του%. * s. Αλλά σε αυτή την περίπτωση, η πρότυπο ανά το spec Σας επιτρέπει να καθορίσετε τι μεταβλητές που θέλετε να εισφέρει από τα δεδομένα που έχει έρθει πίσω από κάτι σαν την PHP αρχεία που έχετε γράψει ότι οι εκπέμπουν εξόδου JSON. 

Τώρα, εδώ κάτω να συνειδητοποιήσουμε ότι είμαστε ακούγοντας για τις επιλογές typeahead όταν ο χρήστης πραγματοποιεί πραγματικότητα Μια αναζήτηση και επιλέγει μια τιμή. Αυτό είναι το πώς είμαστε πραγματικά πρόκειται να ακούσει για αυτό και να εκτελέσει κάποια κώδικα, ως αποτέλεσμα. Στη συνέχεια, θα συνεχίσουμε να ρυθμίσετε το Mashup λιγάκι. Και, τελικά, καλούμε Αυτή η ενημερωμένη έκδοση λειτουργία. Θα ενημερώνει τους δείκτες στην οθόνη. Περισσότερα για αυτό σε λίγο. Εν τω μεταξύ, υπάρχουν μερικά μικρές λειτουργίες εδώ. Ένα των οποίων είναι hideInfo οποία απλά κλείνει το InfoWindow. Μια άλλη λειτουργία εδώ, η οποία τελικά δεν θα είναι πάρα πολύ καιρό, αφαιρέστε δείκτες. Αυτό πρόκειται να αναιρέσετε ανεξαρτήτως λειτουργία δείκτη πρόσθετο σας κάνει. Και στη συνέχεια κάτω εδώ είναι η αναζήτηση. Και αυτό είναι ενδιαφέρον, γιατί εμείς έχουν γράψει τον κώδικα JavaScript που είναι πρόκειται να μιλήσω για search.php για το server και να πάρει πίσω κάποια απάντηση. 

Μπορείτε, φυσικά, θα είναι ακόμα πρέπει να εφαρμόσει search.php, αλλά έχουμε υλοποιηθεί το JavaScript κώδικα που είναι πρόκειται να χειριστεί που εκτελεί αναζητήσεις από αυτό το κουτί κειμένου. Ειδικότερα, ανακοίνωση ότι αυτή η λειτουργία εδώ, αναζήτησης, θέτει search.php με μία μέθοδο που ονομάζεται πάρετε JSON, το οποίο είδαμε σε διάλεξη. Και η σύνταξη εδώ είναι λίγο διαφορετικό από διάλεξη στο ότι είμαστε χρησιμοποιώντας jQuery λεγόμενη διεπαφή υπόσχεση. Περισσότερα για αυτό το spec. Αυτό με απλά λόγια σημαίνει για μας σκοπούς τώρα ότι υπάρχει είναι δύο ειδικές λειτουργίες που πρέπει να καλέσετε με τελεία σημειογραφία εδώ αμέσως μετά την κλήση πάρει JSON. Ένα ονομάζεται γίνει. Ένα ονομάζεται αποτύχει. Μπορείτε να σκεφτείτε αυτά ως χειριστής επιτυχία και ο χειριστής αποτυχία μόνο σε περίπτωση που κάτι πάει στραβά. 

Τώρα ας δούμε την τελευταία ζευγάρι των λειτουργιών σε αυτό το αρχείο. Εδώ κάτω είναι μια συνάρτηση ονομάζεται showInfo, η οποία δείχνει πληροφορίες σε ένα από αυτά λίγες πληροφορίες παράθυρα που αναδύεται όταν ο χρήστης κάνει κλικ σε ένα δείκτη. Εδώ κάτω είναι περαιτέρω ότι η λειτουργία ενημέρωσης ότι έχουμε υλοποιήσει για εσάς. Καθορίζει τα όρια του χάρτη. Ποιες είναι οι συντεταγμένες GPS του βορειοανατολικά και νοτιοδυτικά γωνίες εδώ. Έχουμε ετοιμάσει κάποιες παραμέτρους HDP εδώ και στη συνέχεια να περάσει τελικά να update.php, που έχουμε Επίσης εφαρμόζεται για εσάς. Αυτό τελικά παίρνει πίσω κάποια JSON από το αρχείο που ονομάζεται update.php και στη συνέχεια αφαιρεί οποιαδήποτε δείκτες στην οθόνη και στη συνέχεια επαναλαμβάνεται σε τα δεδομένα που έχει έρθει πίσω από update.php, η οποία και πάλι είναι απλά μια σειρά JSON. Και στη συνέχεια θα προσθέσει τελικά ένα δείκτη για καθένα από αυτά τα μέρη, το χειρισμό αποτυχία ή τα λάθη που θα μπορούσαν κάλλιστα να συμβούν. 

Τώρα απλά για να σας δώσει μια γεύση του πώς θα θα μπορούσε να πάει για τον εντοπισμό σφαλμάτων αυτού του έργου, συνειδητοποιήσει ότι έχω ανοίξει σε προωθήσει αυτήν την καρτέλα εδώ σε αυτό το URL, pset8 / articles.php; γεω = 02138. Τώρα, πάλι, άρθρα σχετικά με PHP υλοποιήσαμε για εσάς έτσι αυτό δεν είναι τόσο τι θα πρέπει να χρησιμοποιούν για τον εντοπισμό σφαλμάτων, αλλά μάλλον την τεχνική. Ανακοίνωση που έχω ψάξει για Ταχυδρομικό κώδικα του Cambridge εδώ, και έχω πάρει πίσω, πράγματι, ένα JSON σειρά του JSON αντικείμενα μέσα από τα οποία είναι δύο keys-- σύνδεσμο και τον τίτλο. 

Έτσι, αυτή η λειτουργία εργάζεται ήδη για σας. Αλλά αυτή η τεχνική του με το χέρι πηγαίνει σε ένα URL, όπως αυτό για κάτι σαν search.php; γεω = Cambridge ή 02138 ή ό, τι ο χρήστης έχει πληκτρολογήσει θα πρέπει να αποδειχθεί ανεκτίμητη όπως εσείς, μόνοι σας, δοκιμάστε για να καταλάβω ακριβώς αν και γιατί search.php εργάζεται ή όχι. 

Τελικά, στη συνέχεια, έχετε μερικά todos μπροστά σας. Θα πάμε στην πρώτη εργαλεία ότι το σενάριο εισαγωγής, που είναι διαβάζει us.text στη βάση δεδομένων σας. Είσαι τότε θα χρειαστείτε για την εφαρμογή search.php έτσι ώστε να συμπεριφέρεται ακριβώς όπως ορίζεται. Στη συνέχεια, είστε πρόκειται να θέλουν να επικεντρωθεί σε scripts.js και τελικά υλοποιεί εκείνοι ζευγάρι του Todos, συμπεριλαμβανομένων των configure και αυτό το πρότυπο, να προσθέσετε δείκτες, αφαιρέστε δείκτες, και Στη συνέχεια Τελευταίο αλλά όχι λιγότερο σημαντικό, ένα προσωπική επαφή. 

Μόλις έχετε εργασίας mashup σας αρκετά όπως ο δικός μας, ο στόχος στο χέρι είναι για σας να προσθέσετε μια προσωπική πατήστε για να mashup σας, είτε πρόκειται για την αισθητική ή λειτουργική. Πάρτε το mashup ποτέ έτσι ελαφρώς στο επόμενο επίπεδο. Εφ 'όσον έχετε τον εαυτό σας ωθήσει πέρα εξοικείωσή σας με το ίδιο το spec και πάρτε μια τεχνική νέα, ακόμα κι αν είναι μόνο κάτι σαν αισθητική αλλαγή του διάταξη του χάρτη που χρησιμοποιείτε, το πεδίο εφαρμογής που περιμένουμε θα είναι ικανοποιημένοι. Αυτό λοιπόν είναι Πρόβλημα Σετ 8 Mashup. Μείνετε συντονισμένοι για περισσότερα στο προδιαγραφών και καλή τύχη λυθεί το πρόβλημα αυτό, το τελευταίο σας CS50 πρόβλημα που ποτέ. 

[Παίζει μουσική]