1
00:00:00,000 --> 00:00:03,388
>> [MUSIC CHƠI]

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

3
00:00:09,196 --> 00:00:10,180
>> DAVID J. Malan: Hello.

4
00:00:10,180 --> 00:00:12,600
Chúng ta hãy đi bộ qua
Vấn đề Set 8 Mashup,

5
00:00:12,600 --> 00:00:15,880
đó là sẽ thách thức bạn để
vẽ lên các thành tố cho Google Maps

6
00:00:15,880 --> 00:00:20,905
với các yếu tố từ Google News và các mash
chúng lại với nhau thành một applet web

7
00:00:20,905 --> 00:00:24,150
cho phép người sử dụng để tìm kiếm
một bản đồ cho tin tức địa phương

8
00:00:24,150 --> 00:00:26,780
đến thị trấn cụ thể,
các thành phố, và mã zip.

9
00:00:26,780 --> 00:00:31,040
Để làm được điều này, chúng ta sẽ
tích hợp một số HTML, CSS, PHP, SQL,

10
00:00:31,040 --> 00:00:34,390
JavaScript, và một kỹ thuật
thường được gọi là AJAX để

11
00:00:34,390 --> 00:00:36,850
để tạo ra các giả lập này
kinh nghiệm người dùng.

12
00:00:36,850 --> 00:00:38,920
>> Trước tiên hãy cho Google Maps chính nó.

13
00:00:38,920 --> 00:00:41,220
Điều này, tất nhiên, có lẽ
một giao diện quen thuộc.

14
00:00:41,220 --> 00:00:45,070
Nhưng nó chỉ ra rằng Google Maps
cũng cung cấp một ứng dụng API--

15
00:00:45,070 --> 00:00:48,360
lập trình interface-- qua đó
bạn có thể có các yếu tố của Google Maps

16
00:00:48,360 --> 00:00:50,740
và tích hợp chúng vào
các ứng dụng của riêng bạn.

17
00:00:50,740 --> 00:00:52,650
Thật vậy, trong suốt này
quá trình, bạn sẽ

18
00:00:52,650 --> 00:00:55,140
để tìm một vài URL
đặc biệt hữu ích mà

19
00:00:55,140 --> 00:00:57,820
được đề cập trong
đặc điểm kỹ thuật cho Problem Set 8,

20
00:00:57,820 --> 00:01:00,980
đặc biệt này Bắt đầu
Hướng dẫn hoặc hướng dẫn của Nhà phát triển

21
00:01:00,980 --> 00:01:07,640
cho Google Maps API Version 3 cũng
như các API Google Maps JavaScript

22
00:01:07,640 --> 00:01:10,260
tham khảo v3, mà là một
chút phức tạp hơn để đọc

23
00:01:10,260 --> 00:01:14,600
nhưng thực sự có tất cả các cấp độ thấp hơn
thông tin chi tiết về những gì các chức năng hoặc các phương pháp

24
00:01:14,600 --> 00:01:18,220
và các đối tượng và thuộc tính và
các sự kiện có thực sự đến với các API,

25
00:01:18,220 --> 00:01:20,720
rất tinh thần tương tự
để [Không nghe thấy] trang.

26
00:01:20,720 --> 00:01:23,480
>> Bây giờ nếu chúng ta có một cái nhìn
tại Google News, bạn sẽ thấy

27
00:01:23,480 --> 00:01:25,370
có lẽ thấy một giao diện quen thuộc ở đây.

28
00:01:25,370 --> 00:01:29,350
Nhưng hóa ra bạn cũng có thể tìm kiếm
Google News cho khu vực địa lý cụ thể

29
00:01:29,350 --> 00:01:32,000
thông qua một tham số HTTP gọi là địa lý.

30
00:01:32,000 --> 00:01:35,100
Trong thực tế, nếu tôi phóng to
lên đây, bạn sẽ thấy rằng

31
00:01:35,100 --> 00:01:41,672
Tôi đang ở
news.google.com/news/section?geo=02138.

32
00:01:41,672 --> 00:01:43,630
Và, quả thật, nếu tôi phóng to
ra, bạn sẽ thấy rằng tôi là

33
00:01:43,630 --> 00:01:47,090
nhìn vào một trang với một bó toàn bộ
quan điểm về Cambridge, Massachusetts.

34
00:01:47,090 --> 00:01:50,620
>> Trong khi đó, nếu tôi thực sự thay đổi
URL không phải là một mã zip như thế này,

35
00:01:50,620 --> 00:01:55,580
nhưng một cái gì đó một chút hỗn độn
như Cambridge, Massachusetts +,

36
00:01:55,580 --> 00:02:00,740
nơi các cộng là cách bạn mã hóa một
nhân vật không gian trong một URL và nhấn Enter,

37
00:02:00,740 --> 00:02:02,907
bạn sẽ thấy rằng tôi thực sự
thấy hầu như những tin tức cùng.

38
00:02:02,907 --> 00:02:05,489
Có lẽ đó là một chút khác nhau
vì Cambridge thực

39
00:02:05,489 --> 00:02:06,910
có nhiều mã zip.

40
00:02:06,910 --> 00:02:09,410
Bây giờ làm thế nào tôi sẽ biết điều đó và,
trên thực tế, làm thế nào tôi có thể bằng cách nào đó

41
00:02:09,410 --> 00:02:12,940
buộc các thành phố và thị trấn
để mã zip trong trường hợp tôi

42
00:02:12,940 --> 00:02:15,064
muốn cho phép người sử dụng
nhìn lên hai?

43
00:02:15,064 --> 00:02:17,480
Vâng, nó quay ra rằng có
một trang web ra có được gọi là

44
00:02:17,480 --> 00:02:20,060
geonames.org đó là
một sáng kiến ​​để có

45
00:02:20,060 --> 00:02:23,760
một cơ sở dữ liệu có sẵn miễn phí của tất cả các
các loại thông tin địa lý,

46
00:02:23,760 --> 00:02:27,040
không chỉ đối với Mỹ, nhưng cũng
cho các nước khác nữa.

47
00:02:27,040 --> 00:02:30,430
Trong thực tế, nếu tôi đi đến URL này ở đây, mà
cũng được đề cập trong các vấn đề đặt

48
00:02:30,430 --> 00:02:34,510
đặc điểm kỹ thuật, bạn sẽ thấy nó ba
danh sách của một bó toàn bộ các file zip

49
00:02:34,510 --> 00:02:36,400
bất kỳ trong số đó có thể được tải về của bạn.

50
00:02:36,400 --> 00:02:39,900
Trong thực tế, đối với vấn đề này đặt
bạn đang đi để tải us.zip.

51
00:02:39,900 --> 00:02:43,790
Bây giờ trong tập tin này, là một tổng thể
bó dữ liệu trong định dạng văn bản.

52
00:02:43,790 --> 00:02:47,760
Các tập tin này là rất tương tự như một
Comma Separated Values ​​CSV-- file--

53
00:02:47,760 --> 00:02:51,294
nhưng nó thực sự sử dụng
tab để phân ranh giới các lĩnh vực.

54
00:02:51,294 --> 00:02:53,710
Bây giờ, trong khi đó, nếu bạn nhìn
ở đây vào những gì tôi đã nêu bật,

55
00:02:53,710 --> 00:02:56,459
các trường trong tập tin này sẽ
là những thứ như các mã quốc gia,

56
00:02:56,459 --> 00:02:58,980
mã bưu chính, địa danh,
và sau đó, trong một số hình thức

57
00:02:58,980 --> 00:03:04,230
hay khác, các quốc gia và các quận,
cộng đồng, và nhiều hơn nữa.

58
00:03:04,230 --> 00:03:06,630
Trong thực tế, tôi đã đã
tải về tập tin này trước.

59
00:03:06,630 --> 00:03:09,750
Hãy để tôi đi trước và mở nó here--
us.text-- và, thực sự, bạn sẽ thấy

60
00:03:09,750 --> 00:03:16,660
xem nếu tôi di chuyển xuống dòng 16.792
bạn sẽ thấy một vài hồ sơ cho Cambridge,

61
00:03:16,660 --> 00:03:19,120
Massachusetts và mã zip khác nhau của nó.

62
00:03:19,120 --> 00:03:22,150
Quận Những gì bạn cũng thấy có,
một số con số mà tôi không thực sự

63
00:03:22,150 --> 00:03:24,500
hiểu, mà còn tất cả
các cách trên bên phải,

64
00:03:24,500 --> 00:03:27,170
một số GPS coordinates--
vĩ độ và kinh độ.

65
00:03:27,170 --> 00:03:30,440
Điều này là rất tốt bởi vì một trong
các tính năng của Google Maps API

66
00:03:30,440 --> 00:03:33,670
là khả năng phát hiện
bạn đang ở đâu về mặt địa lý

67
00:03:33,670 --> 00:03:36,850
về tọa độ GPS.

68
00:03:36,850 --> 00:03:40,210
>> Bây giờ chúng ta hãy bắt đầu tìm hiểu làm thế nào để
bắt đầu buộc những thứ cùng nhau.

69
00:03:40,210 --> 00:03:42,900
Chúng tôi đã đưa cho bạn một tổng thể
bó mã phân phối,

70
00:03:42,900 --> 00:03:44,970
cũng như cơ sở dữ liệu MySQL.

71
00:03:44,970 --> 00:03:49,100
Trong thực tế, nếu tôi kéo một phpMyAdmin có
đã nhập khẩu, như bạn sẽ sớm biết,

72
00:03:49,100 --> 00:03:54,800
pset8.SQL, bạn sẽ thấy một bảng MySQL mà
trông như thế này, một trường ID, đất nước

73
00:03:54,800 --> 00:03:57,400
mã, mã bưu điện, tên địa điểm và nhiều hơn nữa.

74
00:03:57,400 --> 00:04:00,490
Các loại tất cả những
cột tôi bắt nguồn đơn giản

75
00:04:00,490 --> 00:04:03,870
bằng cách đọc các readme.text
nộp ở đây là quy định

76
00:04:03,870 --> 00:04:07,330
cho dù một lĩnh vực là một số nguyên,
hoặc varchar hoặc tương tự.

77
00:04:07,330 --> 00:04:10,510
>> Vì vậy, chúng tôi đã tạo cho rằng bảng
bạn và đưa cho bạn các lệnh SQL

78
00:04:10,510 --> 00:04:12,770
thực hiện để tạo ra rằng
bảng trong cơ sở dữ liệu của riêng bạn,

79
00:04:12,770 --> 00:04:15,290
nhưng có thực sự là không có dữ liệu trong nó.

80
00:04:15,290 --> 00:04:19,600
Thay vào đó, bạn sẽ phải
tải us.zip hoặc zip bất kỳ quốc gia

81
00:04:19,600 --> 00:04:21,500
nộp từ URL đó.

82
00:04:21,500 --> 00:04:24,940
Và sau đó bạn sẽ phải viết
một kịch bản dòng lệnh trong PHP đó là

83
00:04:24,940 --> 00:04:28,420
sẽ mở ra văn bản
tập tin, duyệt qua các dòng của nó,

84
00:04:28,420 --> 00:04:31,180
và sau đó cho mỗi
các đường dây làm một chèn

85
00:04:31,180 --> 00:04:34,940
vào mà đặt bảng
trong cơ sở dữ liệu MySQL của bạn.

86
00:04:34,940 --> 00:04:37,880
Vì vậy, vào cuối của quá trình này, bạn sẽ thấy
đã chạy script mà cuối cùng

87
00:04:37,880 --> 00:04:39,610
chỉ một lần trong lý thuyết.

88
00:04:39,610 --> 00:04:41,780
Trong thực tế có thể bạn sẽ
chạy nó một loạt các lần

89
00:04:41,780 --> 00:04:45,460
trong khi cố gắng để sửa chữa các lỗi khác nhau.

90
00:04:45,460 --> 00:04:48,440
>> Cuối cùng, bạn sẽ có một
cơ sở dữ liệu thực sự lớn với hàng ngàn

91
00:04:48,440 --> 00:04:50,139
và hàng ngàn hàng địa lý.

92
00:04:50,139 --> 00:04:52,930
Sau đó, bạn sẽ đặt nhập khẩu
kịch bản sang một bên khi nó đã làm việc

93
00:04:52,930 --> 00:04:55,140
và cơ sở dữ liệu của bạn là tốt đẹp
và chính xác, và sau đó

94
00:04:55,140 --> 00:04:58,880
bạn đang đi để chuyển sang thực
thực hiện các mashup tự.

95
00:04:58,880 --> 00:05:01,670
Các mashup là sẽ xem xét
một chút gì đó như thế này.

96
00:05:01,670 --> 00:05:05,165
Tại mashup.cs50.net, chúng tôi
có một giải pháp nhân viên

97
00:05:05,165 --> 00:05:06,990
trông một chút gì đó như thế này.

98
00:05:06,990 --> 00:05:11,070
Thật vậy, nếu tôi bấm vào tờ báo này
biểu tượng cho Cambridge, Massachusetts,

99
00:05:11,070 --> 00:05:13,300
bạn sẽ thấy một sợi
biểu tượng một thời gian ngắn và sau đó

100
00:05:13,300 --> 00:05:16,370
một danh sách đặt hàng, một
danh sách gạch đầu dòng các bài viết

101
00:05:16,370 --> 00:05:18,280
liên quan đến Cambridge, Massachusetts.

102
00:05:18,280 --> 00:05:20,352
Nếu tôi bấm vào Charlestown,
Massachusetts,

103
00:05:20,352 --> 00:05:21,685
Tôi sẽ xem cùng thành đó.

104
00:05:21,685 --> 00:05:24,174
Và Nếu tôi bấm vào
Watertown, Massachusetts,

105
00:05:24,174 --> 00:05:26,090
có thể không có bất kỳ
Tin từ Watertown,

106
00:05:26,090 --> 00:05:28,630
do đó, bạn sẽ thấy một cái gì đó
như ngày tin tức chậm.

107
00:05:28,630 --> 00:05:32,140
>> Bây giờ, trong khi đó, ở phía trên bên trái là
một số điều khiển Google Maps quen thuộc

108
00:05:32,140 --> 00:05:34,980
cho phép bạn phóng to ra, pan
lên, xuống, trái, phải,

109
00:05:34,980 --> 00:05:37,360
mà còn là một hộp tìm kiếm mà chúng tôi đặt ở đó.

110
00:05:37,360 --> 00:05:40,910
Vì vậy, nếu tôi tìm kiếm, thẳng thắn,
chỉ có các mã zip khác tôi biết,

111
00:05:40,910 --> 00:05:45,020
90210, chúng tôi sẽ thực sự thấy
Beverly Hills, California.

112
00:05:45,020 --> 00:05:48,550
Khi nhấp vào nó dẫn tôi đến
California và cả một bó

113
00:05:48,550 --> 00:05:50,369
tin tức về Beverly Hills.

114
00:05:50,369 --> 00:05:51,910
Bây giờ để ý, quá, những gì xảy ra ở đó.

115
00:05:51,910 --> 00:05:57,040
Nếu tôi tìm kiếm thời gian này cho 02138 hoặc thậm chí
Cambridge Massachusetts dấu phẩy hoặc một số

116
00:05:57,040 --> 00:06:00,300
biến thể của chúng, bạn sẽ có được một
ít autocomplete thả xuống.

117
00:06:00,300 --> 00:06:03,840
Bây giờ điều này là sử dụng một plugin
cho một thư viện được gọi jQuery,

118
00:06:03,840 --> 00:06:05,732
và plugin đó được gọi là typeahead.

119
00:06:05,732 --> 00:06:07,440
Chúng tôi chỉ đơn giản là đọc qua
các tài liệu,

120
00:06:07,440 --> 00:06:13,150
đã tải về các tập tin .js tích hợp
vào mã phân phối để các bạn

121
00:06:13,150 --> 00:06:16,900
cuối cùng có thể viết code mà
đầy rằng menu thả xuống với các ô tô

122
00:06:16,900 --> 00:06:19,350
Lựa chọn hoặc các gợi ý tự động.

123
00:06:19,350 --> 00:06:23,820
>> Bây giờ mã phân phối, mặc dù, rằng
bạn nhận được không làm gần như là nhiều.

124
00:06:23,820 --> 00:06:26,860
Bạn nhận được các bản đồ của Google nhúng, và
bạn sẽ có được các điều khiển phía trên bên trái,

125
00:06:26,860 --> 00:06:28,240
và bạn nhận được hộp tìm kiếm.

126
00:06:28,240 --> 00:06:32,760
Nhưng nếu tôi gõ một cái gì đó như
02138, không có nơi chưa được tìm thấy.

127
00:06:32,760 --> 00:06:34,730
Vì vậy, đó sẽ là
một trong những mục tiêu của chúng tôi ở đây.

128
00:06:34,730 --> 00:06:37,430
Hơn nữa, nếu bạn đi một bước
lại và nhìn vào bản đồ,

129
00:06:37,430 --> 00:06:38,950
không có tin tức gì.

130
00:06:38,950 --> 00:06:41,780
Ngay cả khi tôi bấm và
kéo, không có dấu hiệu thực sự

131
00:06:41,780 --> 00:06:45,560
xuất hiện các tin tức, vì đó
Thách thức là để lại cho bạn là tốt.

132
00:06:45,560 --> 00:06:48,490
>> Chúng ta hãy nhìn rồi
vào mã phân phối.

133
00:06:48,490 --> 00:06:51,460
Một khi bạn đã tải về
pset8.zip và giải nén nó

134
00:06:51,460 --> 00:06:54,430
vào thư mục vhost của bạn
trong CS50 gia dụng,

135
00:06:54,430 --> 00:06:56,550
bạn sẽ thấy những
thư mục ở đây bên trong.

136
00:06:56,550 --> 00:07:00,200
Bin-- mà nói chung là viết tắt của
nhị phân cho programs-- thực thi

137
00:07:00,200 --> 00:07:04,870
bao gồm, như trong pset7, một số PHP
file mà file khác bao gồm,

138
00:07:04,870 --> 00:07:06,710
sau đó công chúng, đó là
các tập tin mà cần

139
00:07:06,710 --> 00:07:09,369
để có thể truy cập công khai
cho người sử dụng với một trình duyệt.

140
00:07:09,369 --> 00:07:11,410
Chúng ta hãy nhìn vào
bin thư mục, và chúng tôi sẽ

141
00:07:11,410 --> 00:07:13,890
thấy rằng có một tập tin
ở đó đã gọi là nhập khẩu.

142
00:07:13,890 --> 00:07:17,591
Nếu chúng ta mở này với gedit, chúng ta sẽ thấy
đó, không may, không có nhiều

143
00:07:17,591 --> 00:07:18,090
có.

144
00:07:18,090 --> 00:07:20,250
Tất cả đó là có, tuy nhiên,
là một công việc ở đầu

145
00:07:20,250 --> 00:07:23,410
trong đó quy định cụ thể mà
interpreter-- trong trường hợp này PHP--

146
00:07:23,410 --> 00:07:25,759
nên được sử dụng để thực
thực thi tập tin này.

147
00:07:25,759 --> 00:07:27,550
Nhưng sau đó, nơi nó nói
TODO là nơi bạn

148
00:07:27,550 --> 00:07:31,130
sẽ cần phải viết một số mã
mà có lẽ đòi hỏi cấu hình

149
00:07:31,130 --> 00:07:35,820
tập tin đó trong bao gồm các thư mục
như chúng ta đã làm trước đó với các file PHP.

150
00:07:35,820 --> 00:07:38,180
Và sau đó bạn sẽ
phải bằng cách nào đó mở lên

151
00:07:38,180 --> 00:07:41,920
us.text mà bạn có lẽ
đã giải nén rồi.

152
00:07:41,920 --> 00:07:44,690
Sau đó, bạn sẽ phải
duyệt qua các dòng trong tập tin đó,

153
00:07:44,690 --> 00:07:47,800
có lẽ sử dụng một số chức năng
đề nghị trong các đặc điểm kỹ thuật.

154
00:07:47,800 --> 00:07:51,390
Sau đó chèn mỗi người
đường vào cơ sở dữ liệu MySQL

155
00:07:51,390 --> 00:07:54,940
bằng cách sử dụng các chức năng truy vấn, mà
chúng tôi đã cung cấp cho bạn một lần nữa with--

156
00:07:54,940 --> 00:07:58,010
hoặc ít nhất là một biến thể
đó trong functions.php,

157
00:07:58,010 --> 00:07:59,560
mà chúng ta sẽ thấy chỉ trong một khoảnh khắc.

158
00:07:59,560 --> 00:08:04,430
>> Bây giờ chúng ta hãy đóng cửa nhập khẩu và quay trở lại
thư mục của chúng tôi và lần này đi vào

159
00:08:04,430 --> 00:08:05,300
bao gồm.

160
00:08:05,300 --> 00:08:09,210
Và nếu tôi làm ls ở đó, bạn sẽ thấy
ba tập tin khá giống như Problem Set 7.

161
00:08:09,210 --> 00:08:13,760
Và chúng ta hãy có một cái nhìn nhanh chóng,
Ví dụ, ở config.php.

162
00:08:13,760 --> 00:08:16,730
Trong đó, có ít dòng
hơn trước, và nó

163
00:08:16,730 --> 00:08:20,712
dường như tập tin này bao gồm
constants.php và functions.php.

164
00:08:20,712 --> 00:08:23,670
Chúng tôi đang sử dụng một chút khác nhau
kỹ thuật trong thời gian này để thực sự

165
00:08:23,670 --> 00:08:30,910
xác định rằng những tập tin này là tương đối
vào thư mục hiện __ DIR__

166
00:08:30,910 --> 00:08:35,280
đại diện cho bất kỳ thư mục này
file, config.php, bản thân nó trong.

167
00:08:35,280 --> 00:08:37,600
Vì vậy, đây là một chi tiết
cách rõ ràng các quy định cụ thể

168
00:08:37,600 --> 00:08:40,100
những tập tin khác mà bạn muốn yêu cầu.

169
00:08:40,100 --> 00:08:44,020
>> Bây giờ nếu tôi đóng tập tin này và
mở constants.php thay vào đó,

170
00:08:44,020 --> 00:08:47,430
bạn sẽ thấy một tập tin rất gợi nhớ
Vấn đề với Set 7 là tốt, mặc dù

171
00:08:47,430 --> 00:08:50,050
với một cơ sở dữ liệu khác nhau được gọi là pset8.

172
00:08:50,050 --> 00:08:54,020
Cuối cùng, trong functions.php,
chúng ta sẽ thấy chỉ là một chức năng

173
00:08:54,020 --> 00:08:55,942
thời gian này được gọi là truy vấn.

174
00:08:55,942 --> 00:08:59,150
Điều này là gần như giống nhau, ngoại trừ chúng tôi xử lý
lỗi thời gian này xung quanh một chút

175
00:08:59,150 --> 00:09:02,860
khác nhau, nhưng nó sử dụng là
giống như trong vấn đề thiết lập bảy.

176
00:09:02,860 --> 00:09:08,090
>> Bây giờ chúng ta hãy quay trở lại vào pset8 của chúng tôi
thư mục, đi vào công chúng, và trong đó

177
00:09:08,090 --> 00:09:14,420
nếu tôi làm ls, bạn sẽ thấy this--
articles.php, index.html, search.php,

178
00:09:14,420 --> 00:09:16,940
và update.php-- tất cả các file.

179
00:09:16,940 --> 00:09:22,010
Và sau đó các phông chữ css, img, và
js thư mục khá giống như pset7.

180
00:09:22,010 --> 00:09:24,660
>> Chúng ta hãy nhìn vào
index.html, đó là

181
00:09:24,660 --> 00:09:27,290
sẽ thực sự
điểm mấu chốt để các smashup.

182
00:09:27,290 --> 00:09:31,820
Bây giờ trong index.html, bạn sẽ thấy toàn bộ
bó của các yếu tố liên kết trong đầu,

183
00:09:31,820 --> 00:09:36,540
Cụ thể, đối với bootstrap cho riêng chúng tôi
CSS theo sau là một bó toàn bộ kịch bản

184
00:09:36,540 --> 00:09:41,520
tags cho những thứ như các bản đồ, API
chính nó, một dấu hiệu đặc biệt với nhãn

185
00:09:41,520 --> 00:09:44,950
tiện ích mà chúng tôi đề cập trong
đặc điểm kỹ thuật có sẵn cho bạn,

186
00:09:44,950 --> 00:09:48,420
jQuery chính nó, bootstrap
chính nó, và các thư viện khác

187
00:09:48,420 --> 00:09:50,990
được gọi là gạch mà
chúng ta nói về trong spec.

188
00:09:50,990 --> 00:09:57,031
Underscore.js như jquery.js
là một thư viện JavaScript

189
00:09:57,031 --> 00:10:00,280
rằng có một bó toàn bộ các chức năng
mà rất nhiều người trong thế giới mong muốn

190
00:10:00,280 --> 00:10:02,020
tồn tại trong bản thân JavaScript.

191
00:10:02,020 --> 00:10:04,560
Vì vậy, tất cả trong số này là
thực tế khá phổ biến.

192
00:10:04,560 --> 00:10:07,140
Chúng tôi cũng đã đề cập typeahead
đó là thư viện đó

193
00:10:07,140 --> 00:10:11,180
nào đó autocomplete thả xuống và
cuối cùng là một liên kết đến JavaScript của riêng của chúng tôi.

194
00:10:11,180 --> 00:10:13,880
>> Trong khi đó, và có lẽ
may mắn thay, mashup này

195
00:10:13,880 --> 00:10:17,550
được thúc đẩy bởi tương đối ít
HTML xuống đây ở phía dưới.

196
00:10:17,550 --> 00:10:22,330
Thông báo rằng chúng tôi đã chỉ định một div trong
cơ thể của chúng ta về dịch class-container.

197
00:10:22,330 --> 00:10:24,610
Điều này, mỗi bootstrap của
tài liệu hướng dẫn, chỉ

198
00:10:24,610 --> 00:10:29,840
có nghĩa là div này sẽ lấp đầy
Viewport hoặc cửa sổ của trình duyệt đầy đủ.

199
00:10:29,840 --> 00:10:33,020
>> Trong khi đó, dưới đây chúng ta có một div
đó là mở ra và ngay lập tức đóng lại

200
00:10:33,020 --> 00:10:34,790
với ID duy nhất của canvas bản đồ.

201
00:10:34,790 --> 00:10:37,400
Điều này bây giờ là từ Google
Tài liệu bản đồ

202
00:10:37,400 --> 00:10:42,490
cho API của nó, nhờ đó mà tôi chỉ đơn giản là cần phải
có một div trống vào để chích,

203
00:10:42,490 --> 00:10:44,470
cuối cùng, một Google Maps thực tế.

204
00:10:44,470 --> 00:10:46,310
Nhưng thêm vào đó trong chỉ một chút.

205
00:10:46,310 --> 00:10:48,850
>> Cuối cùng, có một hình thức
bên đây mà

206
00:10:48,850 --> 00:10:52,930
thực hiện các hộp văn bản lên trên bên trái
trong giao diện của chúng tôi để tìm kiếm.

207
00:10:52,930 --> 00:10:54,730
Chú ý rằng chúng ta đã sử dụng
một chút bootstrap

208
00:10:54,730 --> 00:10:57,670
đây too-- những thứ như
form-inline và hình thức nhóm.

209
00:10:57,670 --> 00:11:00,080
Chúng tôi đã cho các cựu
ID duy nhất của hình thức.

210
00:11:00,080 --> 00:11:04,510
Và sau đó, cuối cùng, tôi thực sự có
một loại đầu vào, mà là khá quen thuộc,

211
00:11:04,510 --> 00:11:06,440
có ID là q.

212
00:11:06,440 --> 00:11:07,230
Chỉ cần một quy ước.

213
00:11:07,230 --> 00:11:09,234
Q cho query-- có thể có
được gọi là bất cứ điều gì.

214
00:11:09,234 --> 00:11:11,400
Và sau đó giữ chỗ,
Trong khi đó, là thành phố, tiểu bang,

215
00:11:11,400 --> 00:11:16,200
và mã bưu chính mà bạn có thể gọi lại
nhìn thấy trong mashup của chúng tôi giới thiệu trước đó.

216
00:11:16,200 --> 00:11:17,980
Hãy đóng tập tin này.

217
00:11:17,980 --> 00:11:24,460
>> Bây giờ hãy nhìn vào các tập tin PHP
chờ đợi và sau đó các tập tin JavaScript.

218
00:11:24,460 --> 00:11:27,700
Trong các tập tin PHP của chúng tôi, chúng tôi đã
đã được thực hiện cho bạn,

219
00:11:27,700 --> 00:11:29,960
Ví dụ, thông tin cập nhật.

220
00:11:29,960 --> 00:11:35,060
Update.php-- chúng tôi sẽ không chi tiêu một lớn
lượng thời gian trên here-- trong một nutshell

221
00:11:35,060 --> 00:11:38,400
là tập tin mà chúng tôi
Mã JavaScript được đi

222
00:11:38,400 --> 00:11:41,610
để liên hệ qua AJAX
kỹ thuật không đồng bộ đó

223
00:11:41,610 --> 00:11:45,980
được xây dựng vào JavaScript những ngày đó
sẽ cho phép chúng tôi để hỏi update.php

224
00:11:45,980 --> 00:11:47,410
để biết thêm thông tin.

225
00:11:47,410 --> 00:11:50,045
>> Cụ thể, bất cứ lúc nào
người dùng kéo bản đồ

226
00:11:50,045 --> 00:11:53,310
hoặc thực hiện một tìm kiếm mà nhảy
người sử dụng một vị trí khác,

227
00:11:53,310 --> 00:11:55,250
mã JavaScript,
như chúng ta sẽ sớm thấy, là

228
00:11:55,250 --> 00:11:59,610
sẽ gọi update.php
và yêu cầu 10 hoặc để đánh dấu

229
00:11:59,610 --> 00:12:02,630
trong khung nhìn dựa
trên các tọa độ GPS

230
00:12:02,630 --> 00:12:06,510
các đỉnh và đáy
góc của bản đồ đó.

231
00:12:06,510 --> 00:12:10,520
Sau đó chúng tôi có thể phục hồi lại bản đồ bây giờ
người dùng đã chuyển màn hình theo thứ tự

232
00:12:10,520 --> 00:12:14,210
để xem 10 có lẽ mới
đánh dấu cho các thị trấn khác nhau.

233
00:12:14,210 --> 00:12:18,340
Trong khi đó, tập tin này là cuối cùng
sẽ thực hiện một truy vấn SQL

234
00:12:18,340 --> 00:12:21,680
chống lại cơ sở dữ liệu của chúng tôi
bảng gọi là những nơi mà

235
00:12:21,680 --> 00:12:26,380
sẽ trả lại những
10 hoặc ít địa điểm.

236
00:12:26,380 --> 00:12:32,620
>> Trong khi đó, trong articles.php, là một
nộp chúng tôi đã viết trong toàn bộ.

237
00:12:32,620 --> 00:12:35,820
Nó rất giống với tinh thần
Hàm LOOKUP vấn đề Set 7,

238
00:12:35,820 --> 00:12:39,450
mà liên lạc với Yahoo Tài chính cho bạn.

239
00:12:39,450 --> 00:12:43,710
Tập tin này có liên hệ Google News
cho bạn, cuối cùng lấy

240
00:12:43,710 --> 00:12:46,050
một máy có thể đọc
version-- trong một cái gì đó

241
00:12:46,050 --> 00:12:49,720
gọi là RSS dưới định dạng của tin tức
Cambridge hoặc Beverly Hills

242
00:12:49,720 --> 00:12:52,880
hoặc bất cứ thành phố, bạn đã tìm kiếm
cho dựa trên geoparameter đó.

243
00:12:52,880 --> 00:12:57,250
Chúng tôi phân tích rằng RSS, mà chỉ là một là
loại ngôn ngữ đánh dấu được gọi là XML,

244
00:12:57,250 --> 00:13:00,740
và sau đó chúng tôi thực sự
trả lại cho trình duyệt của bạn

245
00:13:00,740 --> 00:13:03,570
và mã JavaScript của bạn,
Cụ thể, trong một định dạng được gọi

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

247
00:13:06,097 --> 00:13:08,180
Bây giờ bạn sẽ thấy trong
specification-- chúng tôi chỉ cho bạn

248
00:13:08,180 --> 00:13:10,720
làm thế nào bạn thực sự có thể nhìn thấy
một số các back-- sắp tới JSON

249
00:13:10,720 --> 00:13:15,210
rằng chức năng này cuối cùng
cho phép bạn cư những menu popup để

250
00:13:15,210 --> 00:13:16,960
rằng khi bạn bấm
vào điểm đánh dấu trên bản đồ

251
00:13:16,960 --> 00:13:19,430
bạn thực sự thấy cả một bó
đạn, mỗi trong số đó

252
00:13:19,430 --> 00:13:21,020
liên kết đến một bài viết.

253
00:13:21,020 --> 00:13:25,000
>> Bây giờ chúng ta hãy nhìn vào một cuối cùng
File PHP đó, may mắn thay, không

254
00:13:25,000 --> 00:13:27,970
có nhiều đang xảy on--
chỉ một TODO khá lớn.

255
00:13:27,970 --> 00:13:32,170
Ngay bây giờ tập này tuyên bố
một mảng gọi nơi.

256
00:13:32,170 --> 00:13:35,980
Và sau đó cuối cùng in
rằng mảng trong JSON dưới định dạng

257
00:13:35,980 --> 00:13:38,720
khá-in nó chỉ như vậy mà
điều này là dễ dàng hơn để gỡ lỗi.

258
00:13:38,720 --> 00:13:41,480
Thật không may, trong
giữa có TODO này,

259
00:13:41,480 --> 00:13:46,890
trong đó kêu gọi bạn để tìm kiếm
cơ sở dữ liệu cho những nơi phù hợp với một địa HTTP

260
00:13:46,890 --> 00:13:47,490
tham số.

261
00:13:47,490 --> 00:13:49,865
>> Và, trên thực tế, điều này là có
là một trong challenges-- của bạn

262
00:13:49,865 --> 00:13:54,240
để thực hiện chức năng này tại đây
để khi bạn liên hệ với tập tin này với

263
00:13:54,240 --> 00:14:00,610
một URL như tìm kiếm. php? geo = cái gì,
mã của bạn cuối cùng sẽ trả về một JSON

264
00:14:00,610 --> 00:14:05,020
mảng của tất cả các nơi trong bạn
bảng cơ sở dữ liệu phù hợp với đầu vào đó.

265
00:14:05,020 --> 00:14:08,960
Vì vậy, nếu sử dụng các loại ở Cambridge,
tập tin của bạn ở đây search.php

266
00:14:08,960 --> 00:14:12,680
cuối cùng phải trả lại một mảng JSON
cho tất cả các trận đấu của Cambridge,

267
00:14:12,680 --> 00:14:16,990
mà có thể là ở Massachusetts
nhưng có thể còn bất cứ nơi nào khác.

268
00:14:16,990 --> 00:14:21,040
>> Cuối cùng, chúng ta hãy nhìn vào hai
tập tin được ultimately-- tĩnh

269
00:14:21,040 --> 00:14:23,680
tập tin CSS và JavaScript tập tin của bạn.

270
00:14:23,680 --> 00:14:26,779
Nếu tôi đi vào thư mục CSS của chúng tôi,
có một bó toàn bộ các file đó,

271
00:14:26,779 --> 00:14:28,070
nhưng hầu hết trong số đó là các thư viện.

272
00:14:28,070 --> 00:14:31,530
Tôi sẽ có một cái nhìn,
Cụ thể, tại styles.css,

273
00:14:31,530 --> 00:14:35,440
đó là CSS toàn cầu của chúng tôi đó là
đi phong cách hóa toàn bộ mashup này.

274
00:14:35,440 --> 00:14:38,840
Tôi sẽ để lại nó cho bạn đọc qua
các ý kiến ​​này, nhưng, trong một nutshell,

275
00:14:38,840 --> 00:14:43,490
đây là CSS để đảm bảo rằng chúng tôi
mashup, theo mặc định ra khỏi hộp,

276
00:14:43,490 --> 00:14:46,950
trông giống hệt cách chúng ta muốn it--
với bản đồ điền vào các cổng xem

277
00:14:46,950 --> 00:14:49,720
và với các tìm kiếm
hộp lên ở phía trên bên trái.

278
00:14:49,720 --> 00:14:52,870
Chúng tôi cũng đã hiểu sự tự do
stylizing rằng typeahead dropdown

279
00:14:52,870 --> 00:14:55,170
đơn một chút là tốt.

280
00:14:55,170 --> 00:14:58,030
>> Các tập tin quan trọng nhất
có lẽ đối với vấn đề này đặt

281
00:14:58,030 --> 00:15:01,070
là người cuối cùng này, scripts.js.

282
00:15:01,070 --> 00:15:03,800
Bên trong thư mục JS của bạn
thậm chí còn nhiều file.

283
00:15:03,800 --> 00:15:08,090
Tất cả trong số họ là các tập tin thư viện
trừ trường hợp này, scripts.js.

284
00:15:08,090 --> 00:15:11,460
Nếu chúng ta mở này lên, chúng ta hãy chúng tôi
tour du lịch cuối cùng thông qua các chức năng mà

285
00:15:11,460 --> 00:15:13,820
được xây dựng vào tập tin này
cho bạn và sự quan tâm cuộc gọi

286
00:15:13,820 --> 00:15:16,200
để các todos phía trước.

287
00:15:16,200 --> 00:15:19,110
>> Ở phía trên cùng của tập tin này,
ba biến toàn cầu.

288
00:15:19,110 --> 00:15:22,910
Một cho một bản đồ, mà là có
là một tham chiếu đến bản đồ Google của chúng tôi.

289
00:15:22,910 --> 00:15:25,510
Bạn có thể nghĩ về nó
loại như một con trỏ.

290
00:15:25,510 --> 00:15:27,710
Trong khi đó, chúng ta có
một biến toàn cầu

291
00:15:27,710 --> 00:15:31,500
được gọi là thông tin, mà dường như là
lưu trữ các giá trị trở lại của một cuộc gọi

292
00:15:31,500 --> 00:15:34,170
để google.maps.InfoWindow mới.

293
00:15:34,170 --> 00:15:37,835
JavaScript hỗ trợ các đối tượng đó
rất tinh thần tương tự Struts.

294
00:15:37,835 --> 00:15:40,250
Và những dòng này cho
mục đích của chúng tôi là làm

295
00:15:40,250 --> 00:15:42,820
đang tạo ra một thông tin mới
cửa sổ trong bộ nhớ và sau đó

296
00:15:42,820 --> 00:15:46,330
giữ các tài liệu tham khảo
sung tại một biến gọi là Info.

297
00:15:46,330 --> 00:15:48,330
Và ở giữa những người,
Trong khi đó, là những gì xuất hiện

298
00:15:48,330 --> 00:15:51,060
là một JavaScript trống
mảng được gọi là dấu hiệu.

299
00:15:51,060 --> 00:15:55,392
Tất cả những biểu tượng báo, hoặc bạn
có thể chọn biểu tượng hoàn toàn khác,

300
00:15:55,392 --> 00:15:57,350
sẽ được lưu trữ
cuối cùng trong mảng này

301
00:15:57,350 --> 00:16:01,570
để chúng ta có thể dễ dàng thêm vào
bản đồ và loại bỏ chúng khỏi bản đồ.

302
00:16:01,570 --> 00:16:03,990
>> Bây giờ chúng ta hãy di chuyển xuống
một chút và whiz

303
00:16:03,990 --> 00:16:07,690
thông qua các mã đó sẽ được
thực hiện ngay khi DOM hoặc tài liệu

304
00:16:07,690 --> 00:16:10,480
mô hình đối tượng hoặc
trang riêng của mình đã sẵn sàng.

305
00:16:10,480 --> 00:16:12,942
Nhớ lại rằng cú pháp này
ở đây chỉ đơn giản là quy định cụ thể

306
00:16:12,942 --> 00:16:14,900
các mã sau đây
nên chỉ được thực thi

307
00:16:14,900 --> 00:16:17,840
khi trình duyệt đã hoàn thành
tải mọi thứ khác.

308
00:16:17,840 --> 00:16:19,750
>> Đầu tiên chúng ta khai báo một
bó toàn bộ các phong cách,

309
00:16:19,750 --> 00:16:22,410
mà kết thúc stylizing
bản đồ theo spec.

310
00:16:22,410 --> 00:16:24,790
Sau đó chúng ta khai báo một
bó toàn bộ các tùy chọn,

311
00:16:24,790 --> 00:16:28,630
mà hơn nữa tùy chỉnh của Google
bản đồ mà chúng tôi đang về để nhúng.

312
00:16:28,630 --> 00:16:32,090
Sau đó chúng tôi sử dụng một chút mã jQuery,
được giải thích trong một chi tiết hơn chút

313
00:16:32,090 --> 00:16:35,000
trong spec, để lấy
yếu tố đó, bản đồ vải

314
00:16:35,000 --> 00:16:36,980
rằng chúng ta nên xác định duy nhất.

315
00:16:36,980 --> 00:16:40,640
Và sau đó dòng này ở đây là
những gì có vẻ kỳ diệu cho chúng tôi

316
00:16:40,640 --> 00:16:43,560
một bản đồ Google bên trong
ứng dụng của riêng của chúng tôi,

317
00:16:43,560 --> 00:16:47,020
lưu trữ một tham chiếu quan
trong đó biến được gọi là bản đồ.

318
00:16:47,020 --> 00:16:50,550
>> Cuối cùng, xuống đây chúng ta đăng ký
những gì được gọi là một người biết lắng nghe.

319
00:16:50,550 --> 00:16:54,690
Hãy nghĩ cách back--, cách
back-- tuần zero trong CS50

320
00:16:54,690 --> 00:16:57,430
khi chúng ta nhìn vào và Scratch
hỗ trợ thông qua một đi bộ

321
00:16:57,430 --> 00:16:59,935
thông qua cho điều được gọi là
các sự kiện và chương trình phát sóng.

322
00:16:59,935 --> 00:17:01,810
Bạn có thể không sử dụng
nó cho mình, nhưng nó

323
00:17:01,810 --> 00:17:03,900
một cơ chế theo đó một
Trình duyệt trong trường hợp này

324
00:17:03,900 --> 00:17:07,940
có thể nhận được sự chú ý của chúng tôi khi đó là
sẵn sàng để thực sự thực hiện một số mã.

325
00:17:07,940 --> 00:17:12,170
Trong trường hợp này, nó sẽ lắng nghe
để bản đồ cho một sự kiện được gọi là nhàn rỗi.

326
00:17:12,170 --> 00:17:14,930
Điều này có nghĩa rằng trình duyệt có
xong tải bản đồ Google.

327
00:17:14,930 --> 00:17:18,380
Tại thời điểm này, một chức năng gọi là
configure nên cuối cùng

328
00:17:18,380 --> 00:17:19,339
được thực thi.

329
00:17:19,339 --> 00:17:22,510
Đó là chức năng, cấu hình,
chúng ta sẽ thấy, được viết bởi chúng tôi.

330
00:17:22,510 --> 00:17:24,550
>> Bây giờ xuống đây là một chức năng
đó, không may,

331
00:17:24,550 --> 00:17:25,871
chỉ là một TODO add marker.

332
00:17:25,871 --> 00:17:28,620
Mỗi spec. bạn sẽ cần
để viết code mà thực sự

333
00:17:28,620 --> 00:17:32,840
thêm một marker-- dù nó trông
như một tờ báo, hoặc một chiến thuật ngón tay cái,

334
00:17:32,840 --> 00:17:35,360
hoặc một cái gì đó để else-- bản đồ Google.

335
00:17:35,360 --> 00:17:37,720
Ở đây bây giờ là chức năng mà
gọi là cấu hình.

336
00:17:37,720 --> 00:17:40,390
Tôi sẽ để lại nó cho bạn đọc
thông qua điều này một cách chi tiết hơn,

337
00:17:40,390 --> 00:17:42,600
nhưng nhận ra rằng chúng ta thêm
Thính giả một bó hơn

338
00:17:42,600 --> 00:17:46,620
để chúng tôi có thể thực thi mã khi
người dùng nhấp vào và kéo bản đồ.

339
00:17:46,620 --> 00:17:50,730
Chúng tôi cũng có mã ở đây mà
khởi tạo mà cắm typeahead

340
00:17:50,730 --> 00:17:53,120
để thả xuống
đơn thực sự hoạt động.

341
00:17:53,120 --> 00:17:55,690
>> Nhưng chúng ta hãy tập trung vào chỉ một
vài nơi đây.

342
00:17:55,690 --> 00:17:57,590
Cụ thể, điều này làm ở đây.

343
00:17:57,590 --> 00:18:00,410
Tôi sẽ hoãn đến trực tuyến
tài liệu và các đặc điểm kỹ thuật

344
00:18:00,410 --> 00:18:02,530
làm thế nào để điền vào TODO này.

345
00:18:02,530 --> 00:18:05,890
Nói tóm lại, thư viện này
typeahead phép bạn vượt qua

346
00:18:05,890 --> 00:18:09,790
trong những gì thường được biết đến như một mẫu,
trong đó có một số placeholders biến

347
00:18:09,790 --> 00:18:13,690
rất giống với tinh thần của printf%. * s.

348
00:18:13,690 --> 00:18:16,030
Nhưng trong trường hợp này,
mẫu mỗi spec

349
00:18:16,030 --> 00:18:18,760
cho phép bạn chỉ định
những gì bạn muốn biến

350
00:18:18,760 --> 00:18:24,880
tiêm từ dữ liệu đó đi
trở lại từ một cái gì đó giống như PHP

351
00:18:24,880 --> 00:18:29,810
các tập tin mà bạn đã viết
được phát ra JSON đầu ra.

352
00:18:29,810 --> 00:18:35,170
>> Bây giờ xuống đây nhận ra rằng chúng ta là
nghe cho các lựa chọn typeahead

353
00:18:35,170 --> 00:18:38,050
khi người sử dụng thực sự tiến hành
một tìm kiếm và lựa chọn một giá trị.

354
00:18:38,050 --> 00:18:40,270
Đây là cách chúng tôi thực sự
sẽ nghe cho rằng

355
00:18:40,270 --> 00:18:42,250
và thực hiện một số mã như một kết quả.

356
00:18:42,250 --> 00:18:45,300
Sau đó chúng tôi tiếp tục cấu hình
các mashup chỉ một chút.

357
00:18:45,300 --> 00:18:48,000
Và, cuối cùng, chúng ta gọi
cập nhật chức năng này.

358
00:18:48,000 --> 00:18:49,640
Nó cập nhật các dấu hiệu trên màn hình.

359
00:18:49,640 --> 00:18:51,529
Thêm vào đó trong một lúc.

360
00:18:51,529 --> 00:18:53,570
Trong khi đó, có một vài
chức năng nhỏ ở đây.

361
00:18:53,570 --> 00:18:56,820
Một trong số đó là hideInfo mà
chỉ đơn giản là đóng InfoWindow.

362
00:18:56,820 --> 00:19:00,020
Một chức năng ở đây, mà cuối cùng
sẽ không quá dài, loại bỏ các dấu hiệu.

363
00:19:00,020 --> 00:19:03,580
Điều đó sẽ hoàn tác bất cứ điều gì
Chức năng đánh dấu add của bạn không.

364
00:19:03,580 --> 00:19:04,960
Và sau đó xuống ở đây là tìm kiếm.

365
00:19:04,960 --> 00:19:08,610
Và điều này rất thú vị bởi chúng tôi
đã viết mã JavaScript đó là

366
00:19:08,610 --> 00:19:13,490
sẽ nói chuyện với search.php trên
máy chủ và nhận được một số phản ứng lại.

367
00:19:13,490 --> 00:19:16,110
>> Bạn, tất nhiên, sẽ vẫn còn
cần phải thực hiện search.php,

368
00:19:16,110 --> 00:19:18,310
nhưng chúng tôi đã thực hiện các
Mã JavaScript đó là

369
00:19:18,310 --> 00:19:22,480
sẽ xử lý thực sự thực hiện
tìm kiếm từ đó hộp văn bản.

370
00:19:22,480 --> 00:19:25,340
Đặc biệt, thông báo
rằng chức năng này ở đây,

371
00:19:25,340 --> 00:19:29,160
tìm kiếm, không gọi search.php
bằng một phương pháp gọi là

372
00:19:29,160 --> 00:19:31,072
được JSON, mà chúng ta đã thấy trong bài giảng.

373
00:19:31,072 --> 00:19:32,780
Và cú pháp ở đây
là một chút khác nhau

374
00:19:32,780 --> 00:19:37,110
từ bài giảng trong đó chúng ta đang sử dụng
jQuery cái gọi là giao diện lời hứa.

375
00:19:37,110 --> 00:19:38,479
Thêm vào đó trong spec.

376
00:19:38,479 --> 00:19:40,520
Điều này đơn giản có nghĩa là cho chúng tôi
mục đích bây giờ mà có

377
00:19:40,520 --> 00:19:43,870
hai chức năng đặc biệt chúng tôi
cần phải gọi với ký hiệu dấu chấm

378
00:19:43,870 --> 00:19:46,230
đây ngay lập tức sau khi gọi được JSON.

379
00:19:46,230 --> 00:19:47,510
Một được gọi là done.

380
00:19:47,510 --> 00:19:49,870
Một được gọi là thất bại.

381
00:19:49,870 --> 00:19:51,790
Bạn có thể nghĩ về những
như là xử lý thành công

382
00:19:51,790 --> 00:19:54,960
và xử lý thất bại chỉ
trong trường hợp bị sai.

383
00:19:54,960 --> 00:19:57,760
>> Bây giờ chúng ta hãy nhìn vào các cuối cùng
vài chức năng trong tập tin này.

384
00:19:57,760 --> 00:20:00,180
Xuống đây là một chức năng
gọi showInfo, mà

385
00:20:00,180 --> 00:20:03,090
hiển thị thông tin theo một trong những
ít cửa sổ thông tin mà

386
00:20:03,090 --> 00:20:05,380
bật lên khi người dùng nhấp vào một điểm đánh dấu.

387
00:20:05,380 --> 00:20:08,470
Xuống đây nữa là
rằng chức năng cập nhật

388
00:20:08,470 --> 00:20:10,510
mà chúng tôi đã thực hiện cho bạn.

389
00:20:10,510 --> 00:20:15,250
Nó xác định các giới hạn của bản đồ.

390
00:20:15,250 --> 00:20:19,360
Các tọa độ GPS của nó là gì
phía đông bắc và tây nam góc ở đây.

391
00:20:19,360 --> 00:20:22,780
Chúng tôi đã chuẩn bị một số thông số HDP
ở đây và sau đó vượt qua họ cuối cùng

392
00:20:22,780 --> 00:20:26,160
để update.php, mà chúng tôi đã
cũng thực hiện cho bạn.

393
00:20:26,160 --> 00:20:31,390
Mà cuối cùng sẽ trở lại một số JSON
từ tập tin gọi là update.php

394
00:20:31,390 --> 00:20:34,050
và sau đó loại bỏ bất kỳ
đánh dấu trên màn hình

395
00:20:34,050 --> 00:20:36,650
và sau đó lặp lại trên
các dữ liệu đó là quay trở lại

396
00:20:36,650 --> 00:20:40,350
từ update.php, mà
lại chỉ là một mảng JSON.

397
00:20:40,350 --> 00:20:45,130
Và rồi cuối cùng nó cho biết thêm một dấu hiệu cho
mỗi người trong những địa điểm, giải quyết thất bại

398
00:20:45,130 --> 00:20:47,750
hoặc lỗi mà ta sẽ rất tốt xảy ra.

399
00:20:47,750 --> 00:20:51,550
>> Bây giờ chỉ cần để cung cấp cho bạn một hương vị như thế nào bạn
có thể đi về gỡ lỗi dự án này,

400
00:20:51,550 --> 00:20:55,420
nhận ra rằng tôi đã mở trong
tiến tab này ở đây để URL này,

401
00:20:55,420 --> 00:21:01,320
pset8 / articles.php? geo = 02138.

402
00:21:01,320 --> 00:21:04,050
Bây giờ, một lần nữa, bài viết về
PHP chúng tôi thực hiện cho bạn

403
00:21:04,050 --> 00:21:06,320
vì vậy đây không phải là quá nhiều
những gì bạn sẽ được sử

404
00:21:06,320 --> 00:21:08,190
để gỡ lỗi, nhưng đúng hơn là kỹ thuật.

405
00:21:08,190 --> 00:21:10,590
Chú ý rằng tôi đã tìm kiếm
Zip code Cambridge ở đây,

406
00:21:10,590 --> 00:21:15,260
và tôi đã nhận được trở lại, thực sự, một JSON
mảng các đối tượng JSON bên trong đó

407
00:21:15,260 --> 00:21:17,640
hai link keys-- và tiêu đề.

408
00:21:17,640 --> 00:21:19,860
>> Vì vậy, chức năng này
công trình đã cho bạn.

409
00:21:19,860 --> 00:21:24,330
Nhưng kỹ thuật này trong tay đi
đến một URL như thế này cho một cái gì đó như

410
00:21:24,330 --> 00:21:31,710
search.php? geo = cambridge hoặc 02138 hoặc
bất cứ điều gì người dùng gõ vào nên

411
00:21:31,710 --> 00:21:35,770
chứng minh vô giá như bạn, mình, hãy thử
để tìm ra chính xác hay lý do tại sao

412
00:21:35,770 --> 00:21:38,510
search.php làm việc hay không.

413
00:21:38,510 --> 00:21:41,720
>> Cuối cùng sau đó, bạn có
một vài todos phía trước của bạn.

414
00:21:41,720 --> 00:21:44,250
Bạn đang đi đến dụng cụ đầu tiên
rằng kịch bản nhập khẩu

415
00:21:44,250 --> 00:21:46,520
đọc trong us.text vào cơ sở dữ liệu của bạn.

416
00:21:46,520 --> 00:21:48,760
Sau đó bạn sẽ cần
để thực hiện search.php

417
00:21:48,760 --> 00:21:51,320
để nó cư xử chính xác theo quy định.

418
00:21:51,320 --> 00:21:54,170
Sau đó bạn sẽ muốn
tập trung vào scripts.js

419
00:21:54,170 --> 00:21:57,520
và cuối cùng là thực hiện
những cặp vợ chồng của Todos,

420
00:21:57,520 --> 00:21:59,950
bao gồm cả cấu hình
và mẫu mà,

421
00:21:59,950 --> 00:22:03,220
thêm dấu, loại bỏ các dấu hiệu, và
sau đó kéo dài, nhưng không kém, một

422
00:22:03,220 --> 00:22:04,330
liên lạc cá nhân.

423
00:22:04,330 --> 00:22:07,477
>> Một khi bạn đã làm việc mashup của bạn
khá giống như chúng ta, mục tiêu trong tầm tay

424
00:22:07,477 --> 00:22:09,560
là cho bạn thêm một cá nhân
chạm đến mashup của bạn,

425
00:22:09,560 --> 00:22:11,290
cho dù đó là thẩm mỹ hoặc chức năng.

426
00:22:11,290 --> 00:22:13,950
Đi mashup bao giờ nên
nhẹ đến cấp độ tiếp theo.

427
00:22:13,950 --> 00:22:18,330
Vì vậy, miễn là bạn tự đẩy mình vượt
quen thuộc của bạn với spec chính

428
00:22:18,330 --> 00:22:20,840
và nhặt một kỹ thuật
mới, thậm chí nếu nó chỉ là

429
00:22:20,840 --> 00:22:25,610
một cái gì đó mang tính thẩm mỹ như thay đổi
bố trí của các bản đồ mà bạn đang sử dụng,

430
00:22:25,610 --> 00:22:28,070
phạm vi mà chúng ta mong đợi
sẽ được hài lòng.

431
00:22:28,070 --> 00:22:30,260
Đó là vấn đề sau đó Set 8 Mashup.

432
00:22:30,260 --> 00:22:33,070
Hãy theo dõi để biết thêm trong
đặc điểm kỹ thuật và tốt nhất của may mắn

433
00:22:33,070 --> 00:22:36,400
giải quyết này, cuối cùng bạn
Vấn đề đặt CS50 bao giờ hết.

434
00:22:36,400 --> 00:22:39,750
>> [MUSIC CHƠI]

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