1
00:00:00,000 --> 00:00:03,388
>> [Παίζει μουσική]

2
00:00:03,388 --> 00:00:09,196

3
00:00:09,196 --> 00:00:10,180
>> David J. Malan: Γεια σας.

4
00:00:10,180 --> 00:00:12,600
Ας ρίξουμε μια βόλτα
Πρόβλημα Σετ 8 Mashup,

5
00:00:12,600 --> 00:00:15,880
το οποίο πρόκειται να σας προκαλέσει να
αξιοποιήσει τα στοιχεία για τους Χάρτες Google

6
00:00:15,880 --> 00:00:20,905
με στοιχεία από το Google News και πουρέ
μαζί σε ένα web applet που

7
00:00:20,905 --> 00:00:24,150
επιτρέπει στο χρήστη να διερευνήσει
ένας χάρτης για τις τοπικές ειδήσεις

8
00:00:24,150 --> 00:00:26,780
σε συγκεκριμένες πόλεις,
πόλεις, και ταχυδρομικοί κώδικες.

9
00:00:26,780 --> 00:00:31,040
Για να το κάνετε αυτό, θα πάμε να
ενσωματώσει κάποια HTML, CSS, PHP, SQL,

10
00:00:31,040 --> 00:00:34,390
JavaScript, και μια τεχνική
γενικά γνωστή ως AJAX με σκοπό

11
00:00:34,390 --> 00:00:36,850
για να δημιουργήσετε αυτό το συναρπαστικό
εμπειρία του χρήστη.

12
00:00:36,850 --> 00:00:38,920
>> Ας πρώτα για τον εαυτό της το Google Maps.

13
00:00:38,920 --> 00:00:41,220
Αυτό, φυσικά, είναι ίσως
ένα οικείο περιβάλλον.

14
00:00:41,220 --> 00:00:45,070
Αλλά αποδεικνύεται ότι το Google Maps
Επίσης, παρέχει μια εφαρμογή API--

15
00:00:45,070 --> 00:00:48,360
προγραμματισμού interface-- μέσω της οποίας
μπορείτε να πάρετε τα στοιχεία από το Google Maps

16
00:00:48,360 --> 00:00:50,740
και την ενσωμάτωσή τους
τις δικές σας εφαρμογές.

17
00:00:50,740 --> 00:00:52,650
Πράγματι, καθ 'όλο αυτό
διαδικασία, θα πάμε

18
00:00:52,650 --> 00:00:55,140
για να βρείτε ένα ζευγάρι των διευθύνσεων URL
ιδιαίτερα χρήσιμο το γεγονός ότι

19
00:00:55,140 --> 00:00:57,820
αναφέρονται στην
προδιαγραφή για Πρόβλημα Σετ 8,

20
00:00:57,820 --> 00:01:00,980
ειδικά αυτό Ξεκινώντας
Οδηγού ή των προγραμματιστών

21
00:01:00,980 --> 00:01:07,640
για το Google Maps API Έκδοση 3, καθώς και
όπως το Google Maps API JavaScript

22
00:01:07,640 --> 00:01:10,260
αναφορά V3, η οποία είναι μια
λίγο πιο απόκρυφες για να διαβάσετε

23
00:01:10,260 --> 00:01:14,600
αλλά στην πραγματικότητα έχει όλα του χαμηλότερου επιπέδου
λεπτομέρειες για το τι λειτουργίες ή τις μεθόδους

24
00:01:14,600 --> 00:01:18,220
και τα αντικείμενα και ιδιότητες και
γεγονότα στην πραγματικότητα έρχονται με το API,

25
00:01:18,220 --> 00:01:20,720
πολύ παρόμοια στο πνεύμα
να [δεν ακούγεται] σελίδες.

26
00:01:20,720 --> 00:01:23,480
>> Τώρα, αν ρίξουμε μια ματιά
στο Google News, θα

27
00:01:23,480 --> 00:01:25,370
ίσως δείτε ένα οικείο περιβάλλον εδώ.

28
00:01:25,370 --> 00:01:29,350
Αλλά τελικά, μπορείτε επίσης να ψάξετε
Ειδήσεις Google για συγκεκριμένες γεωγραφικές περιοχές

29
00:01:29,350 --> 00:01:32,000
μέσω μιας παραμέτρου HTTP που ονομάζεται geo.

30
00:01:32,000 --> 00:01:35,100
Στην πραγματικότητα, αν μπορώ μεγέθυνση
μέχρι εδώ, θα δείτε ότι

31
00:01:35,100 --> 00:01:41,672
Είμαι σε
news.google.com/news/section?geo=02138.

32
00:01:41,672 --> 00:01:43,630
Και, μάλιστα, αν κάνω μεγέθυνση
έξω, θα δείτε ότι είμαι

33
00:01:43,630 --> 00:01:47,090
κοιτάζοντας μια σελίδα με ένα σωρό
απόψεις σχετικά με το Cambridge, Μασαχουσέτη.

34
00:01:47,090 --> 00:01:50,620
>> Εν τω μεταξύ, αν μπορώ πραγματικά να αλλάξει η
Η διεύθυνση URL δεν είναι ένα ταχυδρομικό κώδικα, όπως αυτό,

35
00:01:50,620 --> 00:01:55,580
αλλά κάτι λίγο πιο βρώμικα
όπως Cambridge, Μασαχουσέτη +,

36
00:01:55,580 --> 00:02:00,740
όπου το συν είναι ο τρόπος που κωδικοποιούν
διάστημα χαρακτήρα σε μια διεύθυνση URL και πατήστε Enter,

37
00:02:00,740 --> 00:02:02,907
θα δείτε ότι στην πραγματικότητα
δείτε σχεδόν την ίδια είδηση.

38
00:02:02,907 --> 00:02:05,489
Ίσως είναι λίγο διαφορετικά
επειδή Cambridge πραγματικότητα

39
00:02:05,489 --> 00:02:06,910
έχει πολλούς ταχυδρομικούς κώδικες.

40
00:02:06,910 --> 00:02:09,410
Τώρα, πώς θα ξέρω ότι και,
Στην πραγματικότητα, πώς θα μπορούσε με κάποιο τρόπο

41
00:02:09,410 --> 00:02:12,940
γραβάτα πόλεις και κωμοπόλεις
να ταχυδρομικοί κώδικες σε περίπτωση που

42
00:02:12,940 --> 00:02:15,064
θέλει να επιτρέψει στον χρήστη
να κοιτάζω προς τα πάνω είτε;

43
00:02:15,064 --> 00:02:17,480
Λοιπόν, αποδεικνύεται ότι υπάρχει
μια ιστοσελίδα εκεί έξω που ονομάζεται

44
00:02:17,480 --> 00:02:20,060
geonames.org που είναι
μια πρωτοβουλία για να έχουν

45
00:02:20,060 --> 00:02:23,760
μια ελεύθερα διαθέσιμη βάση δεδομένων όλων
τα είδη των γεωγραφικών πληροφοριών,

46
00:02:23,760 --> 00:02:27,040
όχι μόνο για τις ΗΠΑ, αλλά επίσης
για άλλες χώρες, όπως καλά.

47
00:02:27,040 --> 00:02:30,430
Στην πραγματικότητα, αν πάω σε αυτό το URL εδώ, η οποία
αναφέρεται επίσης στο πρόβλημα που

48
00:02:30,430 --> 00:02:34,510
προδιαγραφών, θα το δείτε τρεις
κατάλογο ένα σωρό αρχεία zip

49
00:02:34,510 --> 00:02:36,400
οποιαδήποτε από τις οποίες μπορείτε να κατεβάσετε από εσάς.

50
00:02:36,400 --> 00:02:39,900
Στην πραγματικότητα, αυτό το πρόβλημα που
θα πάμε να κατεβάσετε us.zip.

51
00:02:39,900 --> 00:02:43,790
Τώρα, μέσα σε αυτό το αρχείο, είναι ένας ολόκληρος
δέσμη των δεδομένων σε μορφή κειμένου.

52
00:02:43,790 --> 00:02:47,760
Τα αρχεία είναι πολύ παρόμοια με μια
CSV-- τιμές διαχωρισμένες με κόμμα file--

53
00:02:47,760 --> 00:02:51,294
αλλά χρησιμοποιεί στην πραγματικότητα
καρτέλες για να οριοθετήσει τα πεδία.

54
00:02:51,294 --> 00:02:53,710
Τώρα, εν τω μεταξύ, εάν κοιτάξετε
εδώ σε ό, τι έχω τόνισε,

55
00:02:53,710 --> 00:02:56,459
Τα πεδία σε αυτό το αρχείο θα
να είναι τα πράγματα όπως τους κωδικούς χώρας,

56
00:02:56,459 --> 00:02:58,980
ταχυδρομικοί κώδικες, τοπωνύμια,
και στη συνέχεια, σε κάποια μορφή

57
00:02:58,980 --> 00:03:04,230
ή άλλα, κράτη και επαρχίες,
κοινότητες, και περισσότερο.

58
00:03:04,230 --> 00:03:06,630
Στην πραγματικότητα, έχω ήδη
κατεβάσει το αρχείο αυτό εκ των προτέρων.

59
00:03:06,630 --> 00:03:09,750
Επιτρέψτε μου να προχωρήσει και να το ανοίξετε here--
us.text-- και, μάλιστα, θα

60
00:03:09,750 --> 00:03:16,660
δω αν μπορώ να μετακινηθείτε προς τα κάτω στη γραμμή 16792
θα δείτε μερικά αρχεία για το Cambridge,

61
00:03:16,660 --> 00:03:19,120
Μασαχουσέτη και διάφορα ταχυδρομικοί κώδικες του.

62
00:03:19,120 --> 00:03:22,150
Τι μπορείτε επίσης να δείτε εκεί είναι ο νομός,
μερικοί αριθμοί που δεν μου

63
00:03:22,150 --> 00:03:24,500
καταλαβαίνω, αλλά και όλα
ο τρόπος σχετικά με το δικαίωμα,

64
00:03:24,500 --> 00:03:27,170
Μερικοί GPS coordinates--
γεωγραφικό πλάτος και μήκος.

65
00:03:27,170 --> 00:03:30,440
Αυτό είναι μεγάλη, επειδή ένας από τους
τα χαρακτηριστικά του Google Maps API

66
00:03:30,440 --> 00:03:33,670
είναι η ικανότητα να ανιχνεύει
όπου θα είναι γεωγραφικά

67
00:03:33,670 --> 00:03:36,850
σε όρους συντεταγμένων GPS.

68
00:03:36,850 --> 00:03:40,210
>> Τώρα ας αρχίσουμε να καταλάβω πώς να
ξεκινήστε συνδέοντας αυτά τα πράγματα μαζί.

69
00:03:40,210 --> 00:03:42,900
Σας έχω δώσει ένα ολόκληρο
μάτσο κώδικα διανομής,

70
00:03:42,900 --> 00:03:44,970
καθώς και βάση δεδομένων MySQL.

71
00:03:44,970 --> 00:03:49,100
Στην πραγματικότητα, αν έχω τραβήξει ένα phpMyAdmin έχει
ήδη εισαχθεί, καθώς σύντομα θα,

72
00:03:49,100 --> 00:03:54,800
pset8.SQL, θα δείτε έναν πίνακα MySQL ότι
μοιάζει με αυτό, ένα πεδίο, η χώρα

73
00:03:54,800 --> 00:03:57,400
κώδικα, ταχυδρομικό κώδικα, το όνομα τον τόπο και περισσότερο.

74
00:03:57,400 --> 00:04:00,490
Οι τύποι όλων εκείνων
στήλες Ι προέρχεται απλά

75
00:04:00,490 --> 00:04:03,870
με την ανάγνωση του readme.text
αρχείο εδώ ότι καθορίζεται

76
00:04:03,870 --> 00:04:07,330
εάν ένα πεδίο είναι ένας ακέραιος,
ή varchar ή τα παρόμοια.

77
00:04:07,330 --> 00:04:10,510
>> Έτσι, δημιουργήσαμε αυτόν τον πίνακα για
σας και σας έδωσα τις εντολές SQL

78
00:04:10,510 --> 00:04:12,770
να εκτελέσει για να δημιουργήσει αυτό
πίνακα στη δική σας βάση δεδομένων,

79
00:04:12,770 --> 00:04:15,290
αλλά είναι πραγματικότητα, δεν υπάρχουν στοιχεία σε αυτό ακόμα.

80
00:04:15,290 --> 00:04:19,600
Μάλλον, εσείς πρόκειται να πρέπει να
κατεβάστε us.zip ή φερμουάρ κάθε χώρας

81
00:04:19,600 --> 00:04:21,500
αρχείο από αυτήν τη διεύθυνση URL εκεί.

82
00:04:21,500 --> 00:04:24,940
Και μετά θα πάμε να πρέπει να γράψετε
μια δέσμη ενεργειών γραμμής εντολών σε PHP που είναι

83
00:04:24,940 --> 00:04:28,420
πρόκειται να ανοίξει αυτό το κείμενο
αρχείο, επαναλάβετε σε γραμμές του,

84
00:04:28,420 --> 00:04:31,180
και στη συνέχεια για κάθε μία από
αυτές οι γραμμές κάνουν ένα ένθετο

85
00:04:31,180 --> 00:04:34,940
σε ότι τοποθετεί τραπέζι
στη βάση δεδομένων MySQL σας.

86
00:04:34,940 --> 00:04:37,880
Έτσι, στο τέλος αυτής της διαδικασίας, θα
έχουν τρέξει αυτό το σενάριο, τελικά,

87
00:04:37,880 --> 00:04:39,610
μόνο μία φορά στη θεωρία.

88
00:04:39,610 --> 00:04:41,780
Στην πραγματικότητα, θα πρέπει πιθανώς
να τρέξει ένα σωρό φορές

89
00:04:41,780 --> 00:04:45,460
ενώ προσπαθεί να καθορίσει διάφορα σφάλματα.

90
00:04:45,460 --> 00:04:48,440
>> Τελικά, θα πάμε να έχουν μια
πραγματικά μεγάλη βάση δεδομένων με χιλιάδες

91
00:04:48,440 --> 00:04:50,139
και χιλιάδες γεωγραφικής σειρές.

92
00:04:50,139 --> 00:04:52,930
Στη συνέχεια θα πάμε να θέσει αυτό το εισαγόμενο
γραφή στην άκρη αφού λειτουργεί

93
00:04:52,930 --> 00:04:55,140
και η βάση δεδομένων σας είναι ωραίο
και σωστή, και, στη συνέχεια,

94
00:04:55,140 --> 00:04:58,880
θα πάμε να περάσουμε στην πραγματικότητα
την εφαρμογή της ίδιας της mashup.

95
00:04:58,880 --> 00:05:01,670
Το Mashup πρόκειται να δούμε
ένα μικρό κάτι σαν αυτό.

96
00:05:01,670 --> 00:05:05,165
Στο mashup.cs50.net, εμείς
έχουμε μια λύση προσωπικό

97
00:05:05,165 --> 00:05:06,990
ότι φαίνεται λίγο κάτι σαν αυτό.

98
00:05:06,990 --> 00:05:11,070
Πράγματι, αν κάνω κλικ σε αυτή την εφημερίδα
icon για το Cambridge, Μασαχουσέτη,

99
00:05:11,070 --> 00:05:13,300
θα δείτε ένα περιστρεφόμενο
icon λίγο και, στη συνέχεια,

100
00:05:13,300 --> 00:05:16,370
μια διατεταγμένη λίστα, ένα
λίστα με κουκκίδες των άρθρων

101
00:05:16,370 --> 00:05:18,280
που σχετίζονται με την Cambridge, Μασαχουσέτη.

102
00:05:18,280 --> 00:05:20,352
Αν κάνω κλικ στο Τσάρλεστον,
Μασαχουσέτη,

103
00:05:20,352 --> 00:05:21,685
Θα δω το ίδιο για εκείνη την πόλη.

104
00:05:21,685 --> 00:05:24,174
Και αν κάνω κλικ στο
Watertown, Μασαχουσέτη,

105
00:05:24,174 --> 00:05:26,090
ενδέχεται να μην υπάρχει
ειδήσεις από Watertown,

106
00:05:26,090 --> 00:05:28,630
έτσι θα δείτε κάτι
όπως αργή ημέρα ειδήσεων.

107
00:05:28,630 --> 00:05:32,140
>> Τώρα, εν τω μεταξύ, στο επάνω αριστερό μέρος είναι
κάποια γνωστά Google Maps ελέγχους

108
00:05:32,140 --> 00:05:34,980
να επιτρέπουν να κάνετε zoom out, pan
πάνω, κάτω, αριστερά και δεξιά,

109
00:05:34,980 --> 00:05:37,360
αλλά επίσης ένα κουτί αναζήτησης που βάζουμε εκεί.

110
00:05:37,360 --> 00:05:40,910
Έτσι, αν μπορώ να ψάξω για, ειλικρινά,
Το μόνο άλλο ταχυδρομικό κώδικα ξέρω,

111
00:05:40,910 --> 00:05:45,020
90210, θα δούμε πραγματικά
Μπέβερλι Χιλς, Καλιφόρνια.

112
00:05:45,020 --> 00:05:48,550
Όταν μεταφερθεί με οδηγεί σε
Καλιφόρνια και ένα σωρό

113
00:05:48,550 --> 00:05:50,369
ειδήσεις για Μπέβερλι Χιλς.

114
00:05:50,369 --> 00:05:51,910
Τώρα παρατηρήσετε, επίσης, τι συνέβη εκεί.

115
00:05:51,910 --> 00:05:57,040
Αν έχω αυτή την αναζήτηση χρόνου για 02138 ή ακόμη και
Cambridge της Μασαχουσέτης κόμμα ή κάποια

116
00:05:57,040 --> 00:06:00,300
παραλλαγή αυτού, μπορείτε να πάρετε μια
λίγο αναπτυσσόμενο αυτόματης συμπλήρωσης.

117
00:06:00,300 --> 00:06:03,840
Τώρα αυτό χρησιμοποιεί ένα plugin
για μια βιβλιοθήκη που ονομάζεται jQuery,

118
00:06:03,840 --> 00:06:05,732
και ότι plugin ονομάζεται typeahead.

119
00:06:05,732 --> 00:06:07,440
Εμείς απλά διαβάστε
η τεκμηρίωση,

120
00:06:07,440 --> 00:06:13,150
αρχείο λήψης ολοκληρωμένων οι .js
στον Κώδικα Διαχείρισης του Δικτύου, έτσι ώστε να

121
00:06:13,150 --> 00:06:16,900
τελικά μπορεί να γράψει τον κώδικα που
γεμίζει αυτό το αναπτυσσόμενο μενού με την αυτόματη

122
00:06:16,900 --> 00:06:19,350
επιλογές ή οι προτάσεις αυτοκινήτων.

123
00:06:19,350 --> 00:06:23,820
>> Τώρα ο κώδικας διανομής, όμως, ότι
λάβατε δεν κάνει σχεδόν τόσο πολύ.

124
00:06:23,820 --> 00:06:26,860
Μπορείτε να πάρετε το Google Map ενσωματωμένο, και
μπορείτε να πάρετε τα χειριστήρια πάνω αριστερά,

125
00:06:26,860 --> 00:06:28,240
και μπορείτε να πάρετε το πλαίσιο αναζήτησης.

126
00:06:28,240 --> 00:06:32,760
Αλλά αν πληκτρολογήσετε κάτι σαν
02138, δεν υπάρχουν θέσεις ακόμα βρεθεί.

127
00:06:32,760 --> 00:06:34,730
Έτσι, αυτό πρόκειται να είναι
ένας από τους στόχους μας εδώ.

128
00:06:34,730 --> 00:06:37,430
Επιπλέον, αν πάρετε ένα βήμα
πίσω και να δούμε το ίδιο το χάρτη,

129
00:06:37,430 --> 00:06:38,950
δεν υπάρχει καμία είδηση.

130
00:06:38,950 --> 00:06:41,780
Ακόμα και αν κάνω κλικ και
έλξη, δεν υπάρχουν δείκτες πραγματικότητα

131
00:06:41,780 --> 00:06:45,560
εμφανίζονται για είδηση, διότι αυτό
πρόκληση είναι αριστερά σας, καθώς και.

132
00:06:45,560 --> 00:06:48,490
>> Ας ρίξουμε μια ματιά στη συνέχεια,
τον κώδικα διανομής.

133
00:06:48,490 --> 00:06:51,460
Αφού έχετε κατεβάσει
pset8.zip και φερμουάρ

134
00:06:51,460 --> 00:06:54,430
σε κατάλογο vhost σας
στο CS50 Appliance,

135
00:06:54,430 --> 00:06:56,550
Θα δείτε αυτές τις
καταλόγους εδώ μέσα.

136
00:06:56,550 --> 00:07:00,200
Bin-- που σημαίνει γενικά για
δυαδικό εκτελέσιμο programs--

137
00:07:00,200 --> 00:07:04,870
περιλαμβάνει, όπως στην pset7, μερικοί PHP
αρχεία που άλλα αρχεία περιλαμβάνουν,

138
00:07:04,870 --> 00:07:06,710
τότε κοινό, η οποία είναι
Τα αρχεία που χρειάζεστε

139
00:07:06,710 --> 00:07:09,369
να είναι προσβάσιμες από το κοινό
σε ένα χρήστη με ένα πρόγραμμα περιήγησης.

140
00:07:09,369 --> 00:07:11,410
Ας ρίξουμε μια ματιά στο
κατάλογο bin, και θα

141
00:07:11,410 --> 00:07:13,890
βλέπουμε ότι υπάρχει ένα αρχείο
ήδη εκεί ονομάζεται Εισαγωγή.

142
00:07:13,890 --> 00:07:17,591
Αν ανοίξουμε αυτό με το gedit, θα δούμε
ότι, δυστυχώς, δεν υπάρχει πολύς

143
00:07:17,591 --> 00:07:18,090
εκεί.

144
00:07:18,090 --> 00:07:20,250
Το μόνο που υπάρχει, όμως,
είναι μια δουλεία στην κορυφή

145
00:07:20,250 --> 00:07:23,410
που ορίζει ποιοι
interpreter-- σε αυτή την περίπτωση PHP--

146
00:07:23,410 --> 00:07:25,759
θα πρέπει να χρησιμοποιούνται για πραγματικά
εκτελέσουν αυτό το αρχείο.

147
00:07:25,759 --> 00:07:27,550
Στη συνέχεια, όμως εκεί που λέει
TODO είναι όπου είστε

148
00:07:27,550 --> 00:07:31,130
Θα χρειαστεί να γράψετε κάποιο κώδικα
που απαιτεί ίσως το config

149
00:07:31,130 --> 00:07:35,820
αρχείο που είναι στην συμπεριλαμβάνει κατάλογο
όπως έχουμε κάνει στο παρελθόν με τα αρχεία της PHP.

150
00:07:35,820 --> 00:07:38,180
Και μετά θα πάμε να
πρέπει με κάποιο τρόπο να ανοίξει

151
00:07:38,180 --> 00:07:41,920
us.text που σας πιθανώς
αποσυμπιέσετε ήδη.

152
00:07:41,920 --> 00:07:44,690
Στη συνέχεια, θα πάμε να πρέπει να
επαναλάβει πάνω από τις γραμμές σε αυτό το αρχείο,

153
00:07:44,690 --> 00:07:47,800
ίσως, χρησιμοποιώντας ορισμένες από τις λειτουργίες
προτείνεται στην προδιαγραφή.

154
00:07:47,800 --> 00:07:51,390
Στη συνέχεια, τοποθετήστε το καθένα από αυτά
γραμμές στη βάση δεδομένων MySQL

155
00:07:51,390 --> 00:07:54,940
χρησιμοποιώντας τη λειτουργία αναζήτησης, το οποίο
έχουμε πάλι δώσατε with--

156
00:07:54,940 --> 00:07:58,010
ή τουλάχιστον μία παραλλαγή
αυτής σε functions.php,

157
00:07:58,010 --> 00:07:59,560
το οποίο θα δούμε σε λίγο.

158
00:07:59,560 --> 00:08:04,430
>> Τώρα ας κλείσουμε την εισαγωγή και να επιστρέψετε στην
κατάλογο μας και αυτή τη φορά να πάει σε

159
00:08:04,430 --> 00:08:05,300
περιλαμβάνει.

160
00:08:05,300 --> 00:08:09,210
Και αν το κάνω ls εκεί, θα δείτε
τρία αρχεία αρκετά όπως Πρόβλημα Σετ 7.

161
00:08:09,210 --> 00:08:13,760
Και ας ρίξουμε μια γρήγορη ματιά,
για παράδειγμα, στο config.php.

162
00:08:13,760 --> 00:08:16,730
Εκεί, είναι λιγότερες γραμμές
από ό, τι στο παρελθόν, και

163
00:08:16,730 --> 00:08:20,712
φαίνεται ότι αυτό το αρχείο περιλαμβάνει
constants.php και functions.php.

164
00:08:20,712 --> 00:08:23,670
Είμαστε χρησιμοποιώντας μια ελαφρώς διαφορετική
τεχνική αυτή τη φορά γύρω από πραγματικά

165
00:08:23,670 --> 00:08:30,910
διευκρινίζει ότι τα αρχεία αυτά είναι σχετικές
στον τρέχοντα κατάλογο __ DIR__

166
00:08:30,910 --> 00:08:35,280
αντιπροσωπεύει ανεξάρτητα από τον κατάλογο αυτό
αρχείο, το config.php, είναι από μόνη της.

167
00:08:35,280 --> 00:08:37,600
Έτσι, αυτό είναι μια πιο
κατηγορηματικό τρόπο προσδιορισμού

168
00:08:37,600 --> 00:08:40,100
τι άλλα αρχεία που θέλετε να απαιτήσει.

169
00:08:40,100 --> 00:08:44,020
>> Τώρα, αν κλείσω αυτό το αρχείο και
ανοίξει constants.php αντ 'αυτού,

170
00:08:44,020 --> 00:08:47,430
θα δείτε ένα αρχείο που θυμίζει πολύ
Πρόβλημα με Σετ 7, καθώς, αν και

171
00:08:47,430 --> 00:08:50,050
με μια διαφορετική βάση δεδομένων που ονομάζεται pset8.

172
00:08:50,050 --> 00:08:54,020
Τέλος, σε functions.php,
θα δούμε μόνο μία λειτουργία

173
00:08:54,020 --> 00:08:55,942
αυτή τη φορά ονομάζεται ερώτημα.

174
00:08:55,942 --> 00:08:59,150
Αυτό είναι σχεδόν το ίδιο, εκτός από χειριζόμαστε
λάθη αυτή τη φορά γύρω από λίγο

175
00:08:59,150 --> 00:09:02,860
διαφορετικά, αλλά είναι η χρήση είναι
το ίδιο όπως στο πρόβλημα που επτά.

176
00:09:02,860 --> 00:09:08,090
>> Τώρα ας πάμε πίσω στο pset8 μας
ευρετήριο, πηγαίνετε σε δημόσιο, και εκεί

177
00:09:08,090 --> 00:09:14,420
αν κάνω ls, θα δείτε this--
articles.php, index.html, search.php,

178
00:09:14,420 --> 00:09:16,940
και update.php-- όλα τα αρχεία.

179
00:09:16,940 --> 00:09:22,010
Και τότε ο γραμματοσειρές CSS, img, και
Κατάλογος js αρκετά όπως pset7.

180
00:09:22,010 --> 00:09:24,660
>> Ας ρίξουμε μια ματιά στο
index.html, η οποία είναι

181
00:09:24,660 --> 00:09:27,290
πρόκειται να είναι πραγματικά η
σημείο εισόδου στην smashup.

182
00:09:27,290 --> 00:09:31,820
Τώρα στο index.html, θα δείτε ένα ολόκληρο
δέσμη των στοιχείων σύνδεσης στο κεφάλι,

183
00:09:31,820 --> 00:09:36,540
Συγκεκριμένα, για εκκίνησης για τη δική μας
CSS που ακολουθείται από ένα σωρό script

184
00:09:36,540 --> 00:09:41,520
ετικέτες για πράγματα όπως το χαρτών, API
μόνη της, ένα ειδικό δείκτη με ετικέτα

185
00:09:41,520 --> 00:09:44,950
βοηθητικό πρόγραμμα που αναφέρεται στην
προδιαγραφή είναι στη διάθεσή σας,

186
00:09:44,950 --> 00:09:48,420
ίδια jQuery, bootstrap
μόνη της, και μια άλλη βιβλιοθήκη

187
00:09:48,420 --> 00:09:50,990
καλείται υπογράμμισης που
μιλάμε για το spec.

188
00:09:50,990 --> 00:09:57,031
Underscore.js όπως jquery.js
είναι μια βιβλιοθήκη JavaScript

189
00:09:57,031 --> 00:10:00,280
ότι έχει ένα σωρό λειτουργίες
ότι πολλοί άνθρωποι στον κόσμο την επιθυμία

190
00:10:00,280 --> 00:10:02,020
υπήρχε στην ίδια JavaScript.

191
00:10:02,020 --> 00:10:04,560
Έτσι, όλα αυτά είναι
στην πραγματικότητα είναι αρκετά δημοφιλής.

192
00:10:04,560 --> 00:10:07,140
Έχουμε επίσης αναφερθεί typeahead
η οποία είναι η βιβλιοθήκη που

193
00:10:07,140 --> 00:10:11,180
κάνει ότι αυτόματης συμπλήρωσης αναπτυσσόμενο και
Τέλος μια σύνδεση με το δικό μας το JavaScript.

194
00:10:11,180 --> 00:10:13,880
>> Εν τω μεταξύ, και ίσως
Ευτυχώς, αυτό το mashup

195
00:10:13,880 --> 00:10:17,550
οδηγείται από σχετικά μικρή
HTML εδώ κάτω στο κάτω μέρος.

196
00:10:17,550 --> 00:10:22,330
Παρατηρήστε ότι έχουμε καθορίσει ένα div στο
το σώμα μας από ρευστό τάξης δοχείο.

197
00:10:22,330 --> 00:10:24,610
Αυτό, ανά εκκίνησης του
τεκμηρίωση, μόλις

198
00:10:24,610 --> 00:10:29,840
σημαίνει ότι αυτό το div πρόκειται να γεμίσει το
παράθυρο ή το παράθυρο του browser πλήρως.

199
00:10:29,840 --> 00:10:33,020
>> Εν τω μεταξύ, κάτω από ότι έχουμε ένα div
που μπορεί να ανοιχτεί και να κλείσει αμέσως

200
00:10:33,020 --> 00:10:34,790
με το μοναδικό αναγνωριστικό του χάρτη καμβά.

201
00:10:34,790 --> 00:10:37,400
Αυτό τώρα είναι από την Google
Χάρτες τεκμηρίωση

202
00:10:37,400 --> 00:10:42,490
για το API του, σύμφωνα με την οποία θα πρέπει απλώς να
έχουν ένα άδειο div στο οποίο να εισφέρει,

203
00:10:42,490 --> 00:10:44,470
τελικά, μια πραγματική Google Maps.

204
00:10:44,470 --> 00:10:46,310
Αλλά περισσότερα για αυτό σε λίγο πιο.

205
00:10:46,310 --> 00:10:48,850
>> Τέλος, υπάρχει μια μορφή
μέσα από το οποίο εδώ

206
00:10:48,850 --> 00:10:52,930
υλοποιεί το πλαίσιο κειμένου επάνω στην κορυφή αριστερά
στο περιβάλλον μας για την αναζήτηση.

207
00:10:52,930 --> 00:10:54,730
Παρατηρήστε ότι έχουμε χρησιμοποιήσει
ένα κομμάτι της εκκίνησης

208
00:10:54,730 --> 00:10:57,670
εδώ too-- πράγματα όπως
μορφή-inline και τη μορφή-ομάδα.

209
00:10:57,670 --> 00:11:00,080
Έχουμε δίνεται η πρώην
μοναδικό αναγνωριστικό του μορφή.

210
00:11:00,080 --> 00:11:04,510
Και τότε, σε τελική ανάλυση, έχω πραγματικά
ένας τύπος εισόδου, το οποίο είναι αρκετά εξοικειωμένοι,

211
00:11:04,510 --> 00:11:06,440
του οποίου η ταυτότητα είναι q.

212
00:11:06,440 --> 00:11:07,230
Απλά μια σύμβαση.

213
00:11:07,230 --> 00:11:09,234
Q για query-- θα μπορούσε να έχει
κληθεί τίποτα.

214
00:11:09,234 --> 00:11:11,400
Και στη συνέχεια το σύμβολο κράτησης θέσης,
Εν τω μεταξύ, είναι η πόλη, πολιτεία,

215
00:11:11,400 --> 00:11:16,200
και τον ταχυδρομικό κώδικα που μπορείτε να ανακαλέσετε
βλέπουμε σε mashup μας demo νωρίτερα.

216
00:11:16,200 --> 00:11:17,980
Ας κλείσει το αρχείο αυτό.

217
00:11:17,980 --> 00:11:24,460
>> Τώρα ρίξτε μια ματιά στα αρχεία PHP που
περιμένουν και στη συνέχεια τα αρχεία JavaScript.

218
00:11:24,460 --> 00:11:27,700
Στην PHP αρχεία μας, έχουμε
εφαρμόζεται ήδη για εσάς,

219
00:11:27,700 --> 00:11:29,960
για παράδειγμα, ενημερώσεις.

220
00:11:29,960 --> 00:11:35,060
Update.php-- εμείς δεν θα δαπανήσει ένα τεράστιο
χρονικό διάστημα για here-- με λίγα λόγια

221
00:11:35,060 --> 00:11:38,400
είναι το αρχείο που μας
Κώδικα JavaScript θα

222
00:11:38,400 --> 00:11:41,610
να επικοινωνήσετε μέσω AJAX ότι
ασύγχρονη τεχνική που είναι

223
00:11:41,610 --> 00:11:45,980
χτισμένο σε ένα JavaScript αυτές τις μέρες που είναι
πρόκειται να επιτρέψει σε μας για να ζητήσετε update.php

224
00:11:45,980 --> 00:11:47,410
για περισσότερες πληροφορίες.

225
00:11:47,410 --> 00:11:50,045
>> Συγκεκριμένα, οποτεδήποτε
ο χρήστης σέρνει το χάρτη

226
00:11:50,045 --> 00:11:53,310
ή εκτελεί μια αναζήτηση που πηδά
ο χρήστης σε μια άλλη θέση,

227
00:11:53,310 --> 00:11:55,250
κωδικό μας JavaScript,
όπως θα δούμε σύντομα, είναι

228
00:11:55,250 --> 00:11:59,610
πρόκειται να καλέσει update.php
και να ζητήσει για 10 ή έτσι τους δείκτες

229
00:11:59,610 --> 00:12:02,630
μέσα στο παράθυρο με βάση
σχετικά με τις συντεταγμένες του GPS

230
00:12:02,630 --> 00:12:06,510
από την κορυφή και τον πυθμένα
γωνίες του εν λόγω χάρτη.

231
00:12:06,510 --> 00:12:10,520
Μπορούμε στη συνέχεια να συμπληρώσουν εκ νέου το χάρτη τώρα ότι
ο χρήστης έχει μετακινηθεί στην οθόνη για

232
00:12:10,520 --> 00:12:14,210
για να δείτε 10 πιθανώς νέα
δείκτες για διάφορες πόλεις.

233
00:12:14,210 --> 00:12:18,340
Εν τω μεταξύ, το αρχείο αυτό είναι τελικά
πρόκειται να εκτελέσετε ένα ερώτημα SQL

234
00:12:18,340 --> 00:12:21,680
κατά βάση δεδομένων μας
πίνακα που ονομάζεται θέσεις που

235
00:12:21,680 --> 00:12:26,380
πρόκειται να επιστρέψει εκείνους
10 ή λιγότερες θέσεις.

236
00:12:26,380 --> 00:12:32,620
>> Εν τω μεταξύ, σε articles.php, είναι μια άλλη
αρχείο έχουμε γράψει στο σύνολό της.

237
00:12:32,620 --> 00:12:35,820
Είναι πολύ παρόμοια στο πνεύμα με
Συνάρτηση LOOKUP Πρόβλημα Σετ 7, το

238
00:12:35,820 --> 00:12:39,450
επικοινώνησε με το Yahoo Finance για εσάς.

239
00:12:39,450 --> 00:12:43,710
Αυτό το αρχείο επαφών Ειδήσεις Google
για εσάς, τελικά, αρπάζοντας

240
00:12:43,710 --> 00:12:46,050
αναγνώσιμη από μηχανή
version-- σε κάτι

241
00:12:46,050 --> 00:12:49,720
που ονομάζεται RSS format-- των ειδήσεων
για το Cambridge ή Μπέβερλι Χιλς

242
00:12:49,720 --> 00:12:52,880
ή ό, τι πόλη που έχετε ψάξει
για βασίζονται στην εν λόγω geoparameter.

243
00:12:52,880 --> 00:12:57,250
Έχουμε αναλύσει αυτό το RSS, το οποίο είναι απλώς ένα
είδος της γλώσσας σήμανσης που ονομάζεται XML,

244
00:12:57,250 --> 00:13:00,740
και, στη συνέχεια, στην πραγματικότητα
επιστρέψετε στο πρόγραμμα περιήγησής σας

245
00:13:00,740 --> 00:13:03,570
και τον κωδικό σας JavaScript,
Συγκεκριμένα, σε μια μορφή που ονομάζεται

246
00:13:03,570 --> 00:13:06,097
JSON, το JavaScript Object Notation.

247
00:13:06,097 --> 00:13:08,180
Τώρα θα δείτε στο
specification-- σας επισημάνω

248
00:13:08,180 --> 00:13:10,720
πώς μπορείτε πραγματικά να δείτε
μερικά από τα JSON επόμενο back--

249
00:13:10,720 --> 00:13:15,210
ότι αυτή η λειτουργικότητα τελικά
σας επιτρέπει να συμπληρώσετε αυτά τα popup μενού έτσι

250
00:13:15,210 --> 00:13:16,960
ότι όταν κάνετε κλικ
σε ένα δείκτη στον χάρτη

251
00:13:16,960 --> 00:13:19,430
θα δείτε πραγματικά ένα σωρό
από σφαίρες, έκαστο των οποίων

252
00:13:19,430 --> 00:13:21,020
συνδέσμους σε ένα άρθρο.

253
00:13:21,020 --> 00:13:25,000
>> Τώρα ας ρίξουμε μια ματιά σε μια τελευταία
PHP αρχείο το οποίο, ευτυχώς, δεν

254
00:13:25,000 --> 00:13:27,970
έχουμε πολλά να συμβαίνουν on--
μόλις ένα αρκετά μεγάλο TODO.

255
00:13:27,970 --> 00:13:32,170
Αυτή τη στιγμή αυτό το αρχείο δηλώνει
μια σειρά που ονομάζεται θέσεις.

256
00:13:32,170 --> 00:13:35,980
Και στη συνέχεια, τελικά εκτυπώσεις
ότι η διάταξη στο JSON format--

257
00:13:35,980 --> 00:13:38,720
είναι αρκετά τυπώνει ακριβώς έτσι ώστε
τα πράγματα είναι πιο εύκολα για τον εντοπισμό σφαλμάτων.

258
00:13:38,720 --> 00:13:41,480
Δυστυχώς, στην
μέση υπάρχει αυτό TODO,

259
00:13:41,480 --> 00:13:46,890
το οποίο καλεί για να αναζητήσετε το
βάση δεδομένων για τις θέσεις που ταιριάζουν σε ένα γεω HTTP

260
00:13:46,890 --> 00:13:47,490
παράμετρο.

261
00:13:47,490 --> 00:13:49,865
>> Και, πράγματι, αυτό πρόκειται να
είναι ένα από τα challenges-- σας

262
00:13:49,865 --> 00:13:54,240
να υλοποιήσετε αυτήν τη λειτουργικότητα εδώ
έτσι ώστε όταν έρχεστε σε επαφή με αυτό το αρχείο

263
00:13:54,240 --> 00:14:00,610
ένα URL όπως η αναζήτηση. php? γεω = κάτι,
κωδικός σας θα επιστρέψει τελικά ένα JSON

264
00:14:00,610 --> 00:14:05,020
σειρά από όλα τα μέρη σε σας
πίνακα της βάσης δεδομένων που αντιστοιχούν σε αυτές τις πληροφορίες.

265
00:14:05,020 --> 00:14:08,960
Έτσι, αν ο χρήστης πληκτρολογεί στο Cambridge,
το αρχείο σας εδώ search.php

266
00:14:08,960 --> 00:14:12,680
θα πρέπει τελικά να επιστρέψει μια σειρά JSON
για όλους τους αγώνες για το Cambridge,

267
00:14:12,680 --> 00:14:16,990
η οποία θα μπορούσε να είναι στη Μασαχουσέτη
αλλά θα μπορούσε να είναι ακόμη και οπουδήποτε αλλού.

268
00:14:16,990 --> 00:14:21,040
>> Τέλος, ας ρίξουμε μια ματιά σε δύο
αρχεία που είναι στατικές ultimately--

269
00:14:21,040 --> 00:14:23,680
αρχείο CSS σας και το αρχείο σας JavaScript.

270
00:14:23,680 --> 00:14:26,779
Αν πάω σε κατάλογο CSS μας,
υπάρχει μια ολόκληρη δέσμη των αρχείων εκεί,

271
00:14:26,779 --> 00:14:28,070
αλλά οι περισσότεροι από αυτούς είναι οι βιβλιοθήκες.

272
00:14:28,070 --> 00:14:31,530
Πάω να ρίξω μια ματιά,
Συγκεκριμένα, στο styles.css,

273
00:14:31,530 --> 00:14:35,440
η οποία είναι η δική μας παγκόσμια CSS που είναι
πρόκειται να στυλιζάρω όλο αυτό το mashup.

274
00:14:35,440 --> 00:14:38,840
Θα το αφήσουμε σε εσάς να διαβάσετε
τα σχόλια εδώ, όμως, με λίγα λόγια,

275
00:14:38,840 --> 00:14:43,490
Αυτό είναι το CSS που διασφαλίζει ότι μας
mashup, από προεπιλογή έξω από το κουτί,

276
00:14:43,490 --> 00:14:46,950
Μοιάζει ακριβώς με τον τρόπο που θέλουμε it--
με το χάρτη γεμίζοντας το λιμάνι θέα

277
00:14:46,950 --> 00:14:49,720
και με την αναζήτηση
κουτί επάνω στην επάνω αριστερή γωνία.

278
00:14:49,720 --> 00:14:52,870
Έχουμε επίσης εκφράσει την ελευθερία του
stylizing ότι typeahead αναπτυσσόμενο

279
00:14:52,870 --> 00:14:55,170
μενού λίγο ως πολύ.

280
00:14:55,170 --> 00:14:58,030
>> Το πιο σημαντικό αρχείο
ίσως γι 'αυτό το πρόβλημα που

281
00:14:58,030 --> 00:15:01,070
είναι αυτό το τελευταίο, scripts.js.

282
00:15:01,070 --> 00:15:03,800
Μέσα από τον κατάλογο σας JS
είναι ακόμη περισσότερα αρχεία.

283
00:15:03,800 --> 00:15:08,090
Όλα αυτά είναι τα αρχεία της βιβλιοθήκης
εκτός από αυτό, scripts.js.

284
00:15:08,090 --> 00:15:11,460
Αν ανοίξουμε αυτό επάνω, ας ρίξουμε μας
τελική περιήγηση μέσω τις λειτουργίες που

285
00:15:11,460 --> 00:15:13,820
είναι χτισμένα σε αυτό το αρχείο
για σας και την προσοχή κλήση

286
00:15:13,820 --> 00:15:16,200
στις Todos που βρίσκονται μπροστά μας.

287
00:15:16,200 --> 00:15:19,110
>> Στην κορυφή αυτού του αρχείου,
είναι τρεις καθολικές μεταβλητές.

288
00:15:19,110 --> 00:15:22,910
Ένα για χάρτη, ο οποίος πρόκειται να
είναι μια αναφορά στο Google χάρτη μας.

289
00:15:22,910 --> 00:15:25,510
Μπορείτε να σκεφτείτε από το
είδος του ως δείκτη.

290
00:15:25,510 --> 00:15:27,710
Εν τω μεταξύ, έχουμε
μια άλλη παγκόσμια μεταβλητή

291
00:15:27,710 --> 00:15:31,500
που ονομάζεται πληροφορίες, οι οποίες φαίνεται να είναι
αποθήκευση της τιμής επιστροφής μιας κλήσης

292
00:15:31,500 --> 00:15:34,170
σε νέα google.maps.InfoWindow.

293
00:15:34,170 --> 00:15:37,835
JavaScript υποστηρίζει αντικείμενα που
είναι πολύ παρόμοια στο πνεύμα με αντηρίδες.

294
00:15:37,835 --> 00:15:40,250
Και τι αυτή η γραμμή για
σκοπούς μας κάνει

295
00:15:40,250 --> 00:15:42,820
είναι η δημιουργία ενός νέου Πληροφορίες
παράθυρο στη μνήμη και στη συνέχεια

296
00:15:42,820 --> 00:15:46,330
διατηρώντας γύρω αναφορά
αυτό σε μια μεταβλητή που ονομάζεται Info.

297
00:15:46,330 --> 00:15:48,330
Και μεταξύ αυτών,
Εν τω μεταξύ, είναι αυτό που φαίνεται

298
00:15:48,330 --> 00:15:51,060
να είναι ένα άδειο JavaScript
σειρά ονομάζονται δείκτες.

299
00:15:51,060 --> 00:15:55,392
Όλες αυτές οι εικόνες εφημερίδων, ή μπορείτε
μπορεί να επιλέξει μια άλλη εικόνα εντελώς,

300
00:15:55,392 --> 00:15:57,350
πρόκειται να αποθηκευτεί
τελικά σε αυτή την σειρά

301
00:15:57,350 --> 00:16:01,570
έτσι ώστε να μπορούμε πολύ εύκολα να προσθέσετε
Ο χάρτης και να τα αφαιρέσετε από τον χάρτη.

302
00:16:01,570 --> 00:16:03,990
>> Τώρα ας μετακινηθείτε προς τα κάτω
λίγο και σφυρίζω

303
00:16:03,990 --> 00:16:07,690
μέσω του κώδικα που πρόκειται να είναι
εκτελεστεί μόλις το DOM ή εγγράφου

304
00:16:07,690 --> 00:16:10,480
μοντέλο αντικειμένου ή η
ίδια η σελίδα είναι έτοιμο.

305
00:16:10,480 --> 00:16:12,942
Υπενθυμίζεται ότι αυτή τη σύνταξη
εδώ, απλά διευκρινίζει

306
00:16:12,942 --> 00:16:14,900
ότι τον ακόλουθο κώδικα
θα πρέπει να εκτελούνται μόνο

307
00:16:14,900 --> 00:16:17,840
όταν το πρόγραμμα περιήγησης έχει τελειώσει
φόρτωση οτιδήποτε άλλο.

308
00:16:17,840 --> 00:16:19,750
>> Πρέπει πρώτα να αναγνωρίσει ένα
σωρό στυλ,

309
00:16:19,750 --> 00:16:22,410
που καταλήγουν stylizing
Ο χάρτης σύμφωνα με το spec.

310
00:16:22,410 --> 00:16:24,790
Μετά δηλώνουμε μια
σωρό επιλογές,

311
00:16:24,790 --> 00:16:28,630
το οποίο να προσαρμόσετε περαιτέρω την Google
χάρτη που είμαστε έτοιμοι να ενσωματώσετε.

312
00:16:28,630 --> 00:16:32,090
Στη συνέχεια, χρησιμοποιήστε ένα κομμάτι του κώδικα jQuery,
η οποία εξηγείται σε λίγο περισσότερες λεπτομέρειες

313
00:16:32,090 --> 00:16:35,000
στο spec, να αρπάξει
το στοιχείο αυτό, χάρτης καμβά

314
00:16:35,000 --> 00:16:36,980
ότι είμαστε τόσο μονοσήμαντα.

315
00:16:36,980 --> 00:16:40,640
Και τότε αυτή η γραμμή είναι εδώ
ό, τι φαίνεται να μαγικά να μας δώσει

316
00:16:40,640 --> 00:16:43,560
ένα χάρτη της Google στο εσωτερικό του
τη δική μας εφαρμογή,

317
00:16:43,560 --> 00:16:47,020
αποθηκεύει μία αναφορά σ '
σε αυτή τη μεταβλητή που ονομάζεται χάρτη.

318
00:16:47,020 --> 00:16:50,550
>> Τέλος, εδώ κάτω είμαστε εγγραφείτε
ό, τι λέγεται ακροατής.

319
00:16:50,550 --> 00:16:54,690
Σκεφτείτε back-- τρόπο, τον τρόπο
back-- στην εβδομάδα μηδέν στο CS50

320
00:16:54,690 --> 00:16:57,430
όταν κοιτάξαμε το μηδέν και
υποστήριξή του μέσω μια βόλτα

321
00:16:57,430 --> 00:16:59,935
μέσα για πράγματα που ονομάζεται
εκδηλώσεις και εκπομπές.

322
00:16:59,935 --> 00:17:01,810
Μπορεί να μην χρησιμοποιούνται
μόνοι σας, αλλά είναι

323
00:17:01,810 --> 00:17:03,900
ένας μηχανισμός με τον οποίο ένα
πρόγραμμα περιήγησης σε αυτή την περίπτωση

324
00:17:03,900 --> 00:17:07,940
μπορεί να πάρει την προσοχή μας όταν είναι
έτοιμος να εκτελέσει πράγματι κάποιο κώδικα.

325
00:17:07,940 --> 00:17:12,170
Σε αυτήν την περίπτωση, πρόκειται να ακούσουμε
στο χάρτη για μια εκδήλωση που ονομάζεται αδράνεια.

326
00:17:12,170 --> 00:17:14,930
Αυτό σημαίνει ότι ο browser έχει
ολοκληρώσει τη φόρτωση χάρτη της Google.

327
00:17:14,930 --> 00:17:18,380
Σε αυτό το σημείο μια λειτουργία που ονομάζεται
Διαμόρφωση θα πρέπει τελικά να

328
00:17:18,380 --> 00:17:19,339
να εκτελεστεί.

329
00:17:19,339 --> 00:17:22,510
Αυτή η λειτουργία, να ρυθμίσετε,
θα δούμε, είναι γραμμένο από εμάς.

330
00:17:22,510 --> 00:17:24,550
>> Τώρα εδώ κάτω είναι μια συνάρτηση
ότι, δυστυχώς,

331
00:17:24,550 --> 00:17:25,871
είναι απλά ένας δείκτης TODO add.

332
00:17:25,871 --> 00:17:28,620
Ανά το spec. θα πάμε να χρειάζονται
να γράψει τον κώδικα που πράγματι

333
00:17:28,620 --> 00:17:32,840
προσθέτει μια marker-- αν φαίνεται
όπως μια εφημερίδα ή ένα καρφί του αντίχειρα,

334
00:17:32,840 --> 00:17:35,360
ή κάτι else-- στο χάρτη της Google.

335
00:17:35,360 --> 00:17:37,720
Εδώ τώρα είναι ότι η λειτουργία
που ονομάζεται configure.

336
00:17:37,720 --> 00:17:40,390
Θα το αφήσουμε σε εσάς να διαβάσετε
μέσω αυτού με περισσότερες λεπτομέρειες,

337
00:17:40,390 --> 00:17:42,600
αλλά να συνειδητοποιήσουμε ότι έχουμε προσθέσει
Μια δέσμη περισσότερους ακροατές

338
00:17:42,600 --> 00:17:46,620
έτσι ώστε να μπορούμε να εκτελέσουμε κώδικα, όταν η
χρήστης κάνει κλικ και σέρνει το χάρτη.

339
00:17:46,620 --> 00:17:50,730
Έχουμε επίσης κώδικας εδώ ότι
αρχικοποιεί ότι typeahead plugin

340
00:17:50,730 --> 00:17:53,120
έτσι ώστε το αναπτυσσόμενο
μενού λειτουργεί πραγματικά.

341
00:17:53,120 --> 00:17:55,690
>> Αλλά ας σταθώ μόνο σε
δυο θέσεις εδώ.

342
00:17:55,690 --> 00:17:57,590
Συγκεκριμένα, αυτό να το κάνετε εδώ.

343
00:17:57,590 --> 00:18:00,410
Θα αναβάλει την απευθείας σύνδεση
τεκμηρίωση και η προδιαγραφή

344
00:18:00,410 --> 00:18:02,530
για το πώς να συμπληρώσετε αυτό το TODO.

345
00:18:02,530 --> 00:18:05,890
Αλλά με λίγα λόγια, αυτή η βιβλιοθήκη
typeahead σας επιτρέπει να περάσετε

346
00:18:05,890 --> 00:18:09,790
σε ό, τι είναι γενικά γνωστό ως εκμαγείο,
η οποία έχει κάποιες μεταβλητές κράτησης θέσης

347
00:18:09,790 --> 00:18:13,690
πολύ παρόμοια στο πνεύμα με printf του%. * s.

348
00:18:13,690 --> 00:18:16,030
Αλλά σε αυτή την περίπτωση, η
πρότυπο ανά το spec

349
00:18:16,030 --> 00:18:18,760
Σας επιτρέπει να καθορίσετε
τι μεταβλητές που θέλετε

350
00:18:18,760 --> 00:18:24,880
να εισφέρει από τα δεδομένα που έχει έρθει
πίσω από κάτι σαν την PHP

351
00:18:24,880 --> 00:18:29,810
αρχεία που έχετε γράψει
ότι οι εκπέμπουν εξόδου JSON.

352
00:18:29,810 --> 00:18:35,170
>> Τώρα, εδώ κάτω να συνειδητοποιήσουμε ότι είμαστε
ακούγοντας για τις επιλογές typeahead

353
00:18:35,170 --> 00:18:38,050
όταν ο χρήστης πραγματοποιεί πραγματικότητα
Μια αναζήτηση και επιλέγει μια τιμή.

354
00:18:38,050 --> 00:18:40,270
Αυτό είναι το πώς είμαστε πραγματικά
πρόκειται να ακούσει για αυτό

355
00:18:40,270 --> 00:18:42,250
και να εκτελέσει κάποια κώδικα, ως αποτέλεσμα.

356
00:18:42,250 --> 00:18:45,300
Στη συνέχεια, θα συνεχίσουμε να ρυθμίσετε
το Mashup λιγάκι.

357
00:18:45,300 --> 00:18:48,000
Και, τελικά, καλούμε
Αυτή η ενημερωμένη έκδοση λειτουργία.

358
00:18:48,000 --> 00:18:49,640
Θα ενημερώνει τους δείκτες στην οθόνη.

359
00:18:49,640 --> 00:18:51,529
Περισσότερα για αυτό σε λίγο.

360
00:18:51,529 --> 00:18:53,570
Εν τω μεταξύ, υπάρχουν μερικά
μικρές λειτουργίες εδώ.

361
00:18:53,570 --> 00:18:56,820
Ένα των οποίων είναι hideInfo οποία
απλά κλείνει το InfoWindow.

362
00:18:56,820 --> 00:19:00,020
Μια άλλη λειτουργία εδώ, η οποία τελικά
δεν θα είναι πάρα πολύ καιρό, αφαιρέστε δείκτες.

363
00:19:00,020 --> 00:19:03,580
Αυτό πρόκειται να αναιρέσετε ανεξαρτήτως
λειτουργία δείκτη πρόσθετο σας κάνει.

364
00:19:03,580 --> 00:19:04,960
Και στη συνέχεια κάτω εδώ είναι η αναζήτηση.

365
00:19:04,960 --> 00:19:08,610
Και αυτό είναι ενδιαφέρον, γιατί εμείς
έχουν γράψει τον κώδικα JavaScript που είναι

366
00:19:08,610 --> 00:19:13,490
πρόκειται να μιλήσω για search.php για το
server και να πάρει πίσω κάποια απάντηση.

367
00:19:13,490 --> 00:19:16,110
>> Μπορείτε, φυσικά, θα είναι ακόμα
πρέπει να εφαρμόσει search.php,

368
00:19:16,110 --> 00:19:18,310
αλλά έχουμε υλοποιηθεί το
JavaScript κώδικα που είναι

369
00:19:18,310 --> 00:19:22,480
πρόκειται να χειριστεί που εκτελεί
αναζητήσεις από αυτό το κουτί κειμένου.

370
00:19:22,480 --> 00:19:25,340
Ειδικότερα, ανακοίνωση
ότι αυτή η λειτουργία εδώ,

371
00:19:25,340 --> 00:19:29,160
αναζήτησης, θέτει search.php
με μία μέθοδο που ονομάζεται

372
00:19:29,160 --> 00:19:31,072
πάρετε JSON, το οποίο είδαμε σε διάλεξη.

373
00:19:31,072 --> 00:19:32,780
Και η σύνταξη εδώ
είναι λίγο διαφορετικό

374
00:19:32,780 --> 00:19:37,110
από διάλεξη στο ότι είμαστε χρησιμοποιώντας
jQuery λεγόμενη διεπαφή υπόσχεση.

375
00:19:37,110 --> 00:19:38,479
Περισσότερα για αυτό το spec.

376
00:19:38,479 --> 00:19:40,520
Αυτό με απλά λόγια σημαίνει για μας
σκοπούς τώρα ότι υπάρχει

377
00:19:40,520 --> 00:19:43,870
είναι δύο ειδικές λειτουργίες που
πρέπει να καλέσετε με τελεία σημειογραφία

378
00:19:43,870 --> 00:19:46,230
εδώ αμέσως μετά την κλήση πάρει JSON.

379
00:19:46,230 --> 00:19:47,510
Ένα ονομάζεται γίνει.

380
00:19:47,510 --> 00:19:49,870
Ένα ονομάζεται αποτύχει.

381
00:19:49,870 --> 00:19:51,790
Μπορείτε να σκεφτείτε αυτά
ως χειριστής επιτυχία

382
00:19:51,790 --> 00:19:54,960
και ο χειριστής αποτυχία μόνο
σε περίπτωση που κάτι πάει στραβά.

383
00:19:54,960 --> 00:19:57,760
>> Τώρα ας δούμε την τελευταία
ζευγάρι των λειτουργιών σε αυτό το αρχείο.

384
00:19:57,760 --> 00:20:00,180
Εδώ κάτω είναι μια συνάρτηση
ονομάζεται showInfo, η οποία

385
00:20:00,180 --> 00:20:03,090
δείχνει πληροφορίες σε ένα από αυτά
λίγες πληροφορίες παράθυρα που

386
00:20:03,090 --> 00:20:05,380
αναδύεται όταν ο χρήστης κάνει κλικ σε ένα δείκτη.

387
00:20:05,380 --> 00:20:08,470
Εδώ κάτω είναι περαιτέρω
ότι η λειτουργία ενημέρωσης

388
00:20:08,470 --> 00:20:10,510
ότι έχουμε υλοποιήσει για εσάς.

389
00:20:10,510 --> 00:20:15,250
Καθορίζει τα όρια του χάρτη.

390
00:20:15,250 --> 00:20:19,360
Ποιες είναι οι συντεταγμένες GPS του
βορειοανατολικά και νοτιοδυτικά γωνίες εδώ.

391
00:20:19,360 --> 00:20:22,780
Έχουμε ετοιμάσει κάποιες παραμέτρους HDP
εδώ και στη συνέχεια να περάσει τελικά

392
00:20:22,780 --> 00:20:26,160
να update.php, που έχουμε
Επίσης εφαρμόζεται για εσάς.

393
00:20:26,160 --> 00:20:31,390
Αυτό τελικά παίρνει πίσω κάποια JSON
από το αρχείο που ονομάζεται update.php

394
00:20:31,390 --> 00:20:34,050
και στη συνέχεια αφαιρεί οποιαδήποτε
δείκτες στην οθόνη

395
00:20:34,050 --> 00:20:36,650
και στη συνέχεια επαναλαμβάνεται σε
τα δεδομένα που έχει έρθει πίσω

396
00:20:36,650 --> 00:20:40,350
από update.php, η οποία
και πάλι είναι απλά μια σειρά JSON.

397
00:20:40,350 --> 00:20:45,130
Και στη συνέχεια θα προσθέσει τελικά ένα δείκτη για
καθένα από αυτά τα μέρη, το χειρισμό αποτυχία

398
00:20:45,130 --> 00:20:47,750
ή τα λάθη που θα μπορούσαν κάλλιστα να συμβούν.

399
00:20:47,750 --> 00:20:51,550
>> Τώρα απλά για να σας δώσει μια γεύση του πώς θα
θα μπορούσε να πάει για τον εντοπισμό σφαλμάτων αυτού του έργου,

400
00:20:51,550 --> 00:20:55,420
συνειδητοποιήσει ότι έχω ανοίξει σε
προωθήσει αυτήν την καρτέλα εδώ σε αυτό το URL,

401
00:20:55,420 --> 00:21:01,320
pset8 / articles.php; γεω = 02138.

402
00:21:01,320 --> 00:21:04,050
Τώρα, πάλι, άρθρα σχετικά με
PHP υλοποιήσαμε για εσάς

403
00:21:04,050 --> 00:21:06,320
έτσι αυτό δεν είναι τόσο
τι θα πρέπει να χρησιμοποιούν

404
00:21:06,320 --> 00:21:08,190
για τον εντοπισμό σφαλμάτων, αλλά μάλλον την τεχνική.

405
00:21:08,190 --> 00:21:10,590
Ανακοίνωση που έχω ψάξει για
Ταχυδρομικό κώδικα του Cambridge εδώ,

406
00:21:10,590 --> 00:21:15,260
και έχω πάρει πίσω, πράγματι, ένα JSON
σειρά του JSON αντικείμενα μέσα από τα οποία

407
00:21:15,260 --> 00:21:17,640
είναι δύο keys-- σύνδεσμο και τον τίτλο.

408
00:21:17,640 --> 00:21:19,860
>> Έτσι, αυτή η λειτουργία
εργάζεται ήδη για σας.

409
00:21:19,860 --> 00:21:24,330
Αλλά αυτή η τεχνική του με το χέρι πηγαίνει
σε ένα URL, όπως αυτό για κάτι σαν

410
00:21:24,330 --> 00:21:31,710
search.php; γεω = Cambridge ή 02138 ή
ό, τι ο χρήστης έχει πληκτρολογήσει θα πρέπει να

411
00:21:31,710 --> 00:21:35,770
αποδειχθεί ανεκτίμητη όπως εσείς, μόνοι σας, δοκιμάστε
για να καταλάβω ακριβώς αν και γιατί

412
00:21:35,770 --> 00:21:38,510
search.php εργάζεται ή όχι.

413
00:21:38,510 --> 00:21:41,720
>> Τελικά, στη συνέχεια, έχετε
μερικά todos μπροστά σας.

414
00:21:41,720 --> 00:21:44,250
Θα πάμε στην πρώτη εργαλεία
ότι το σενάριο εισαγωγής, που είναι

415
00:21:44,250 --> 00:21:46,520
διαβάζει us.text στη βάση δεδομένων σας.

416
00:21:46,520 --> 00:21:48,760
Είσαι τότε θα χρειαστείτε
για την εφαρμογή search.php

417
00:21:48,760 --> 00:21:51,320
έτσι ώστε να συμπεριφέρεται ακριβώς όπως ορίζεται.

418
00:21:51,320 --> 00:21:54,170
Στη συνέχεια, είστε πρόκειται να θέλουν
να επικεντρωθεί σε scripts.js

419
00:21:54,170 --> 00:21:57,520
και τελικά υλοποιεί
εκείνοι ζευγάρι του Todos,

420
00:21:57,520 --> 00:21:59,950
συμπεριλαμβανομένων των configure
και αυτό το πρότυπο,

421
00:21:59,950 --> 00:22:03,220
να προσθέσετε δείκτες, αφαιρέστε δείκτες, και
Στη συνέχεια Τελευταίο αλλά όχι λιγότερο σημαντικό, ένα

422
00:22:03,220 --> 00:22:04,330
προσωπική επαφή.

423
00:22:04,330 --> 00:22:07,477
>> Μόλις έχετε εργασίας mashup σας
αρκετά όπως ο δικός μας, ο στόχος στο χέρι

424
00:22:07,477 --> 00:22:09,560
είναι για σας να προσθέσετε μια προσωπική
πατήστε για να mashup σας,

425
00:22:09,560 --> 00:22:11,290
είτε πρόκειται για την αισθητική ή λειτουργική.

426
00:22:11,290 --> 00:22:13,950
Πάρτε το mashup ποτέ έτσι
ελαφρώς στο επόμενο επίπεδο.

427
00:22:13,950 --> 00:22:18,330
Εφ 'όσον έχετε τον εαυτό σας ωθήσει πέρα
εξοικείωσή σας με το ίδιο το spec

428
00:22:18,330 --> 00:22:20,840
και πάρτε μια τεχνική
νέα, ακόμα κι αν είναι μόνο

429
00:22:20,840 --> 00:22:25,610
κάτι σαν αισθητική αλλαγή του
διάταξη του χάρτη που χρησιμοποιείτε,

430
00:22:25,610 --> 00:22:28,070
το πεδίο εφαρμογής που περιμένουμε
θα είναι ικανοποιημένοι.

431
00:22:28,070 --> 00:22:30,260
Αυτό λοιπόν είναι Πρόβλημα Σετ 8 Mashup.

432
00:22:30,260 --> 00:22:33,070
Μείνετε συντονισμένοι για περισσότερα στο
προδιαγραφών και καλή τύχη

433
00:22:33,070 --> 00:22:36,400
λυθεί το πρόβλημα αυτό, το τελευταίο σας
CS50 πρόβλημα που ποτέ.

434
00:22:36,400 --> 00:22:39,750
>> [Παίζει μουσική]

435
00:22:39,750 --> 00:22:43,542