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
>> דוד י מלאן: שלום.

4
00:00:10,180 --> 00:00:12,600
בואו לטייל דרך
הבעיה סט 8 Mashup,

5
00:00:12,600 --> 00:00:15,880
שהוא הולך לאתגר אותך ל
לשאוב אלמנטים לGoogle Maps

6
00:00:15,880 --> 00:00:20,905
עם אלמנטים מGoogle News ומועך
אותם יחד ליישומון אינטרנט ש

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
ליצור את זה immersive
חוויית משתמש.

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
כדי למצוא כמה כתובות אינטרנט
מועיל במיוחד ש

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
לגרסת API Google Maps 3, כמו גם
כAPI JavaScript מפות Google

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 News לאזורים גיאוגרפיים ספציפיים

29
00:01:29,350 --> 00:01:32,000
באמצעות פרמטר HTTP נקרא גיאו.

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
מסתכל על דף עם חבורה של כל
דעות על קיימברידג ', מסצ'וסטס.

34
00:01:47,090 --> 00:01:50,620
>> בינתיים, אם אני באמת לשנות את
כתובת אתר לא להיות מיקוד כזה,

35
00:01:50,620 --> 00:01:55,580
אבל משהו קצת מבולגן
כמו קיימברידג ', מסצ'וסטס +,

36
00:01:55,580 --> 00:02:00,740
שבו בתוספת היא דרכך לקודד
תו רווח בכתובת אתר ולחץ על Enter,

37
00:02:00,740 --> 00:02:02,907
אתה תראה שאני באמת
לראות כמעט את אותן חדשות.

38
00:02:02,907 --> 00:02:05,489
אולי זה קצת שונה
בגלל קיימברידג למעשה

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
למעשה, אם אני הולך לכתובת אתר זו כאן, ש
מוזכר גם בבעיה להגדיר

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
תראה כמה רשומות לקיימברידג ',

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
זה נהדר, כי אחד מ
התכונות של ה- API של Google Maps

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
קובץ מכתובת האתר שיש.

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
ולאחר מכן לכל אחד מ
קווים אלה לעשות insert

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
ואכן, אם אני לוחץ על עיתון זה
סמל לקיימברידג ', מסצ'וסטס,

99
00:05:11,070 --> 00:05:13,300
תראה ספינינג
סמל בקצרה ולאחר מכן

100
00:05:13,300 --> 00:05:16,370
רשימה, הורה
רשימה עם תבליטים של מאמרים

101
00:05:16,370 --> 00:05:18,280
הקשורים לקיימברידג ', מסצ'וסטס.

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
אולי לא יהיה כל
חדשות של מווטרטאון,

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
כדי לאפשר לך להקטין את התצוגה, מחבת
למעלה, למטה, שמאלה וימינה,

109
00:05:34,980 --> 00:05:37,360
אבל גם תיבת חיפוש שאנחנו מכניסים לשם.

110
00:05:37,360 --> 00:05:40,910
אז אם אני מחפש, בכנות,
הקוד רק אחר zip אני יודע,

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 או אפילו
פסיק מסצ'וסטס קיימברידג 'או חלק

116
00:05:57,040 --> 00:06:00,300
גרסתם, אתה מקבל
נפתחת השלמה אוטומטית קטנה.

117
00:06:00,300 --> 00:06:03,840
עכשיו זה משתמש בתוסף
לספרייה שנקראת jQuery,

118
00:06:03,840 --> 00:06:05,732
והתוסף שנקרא 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 שלך
בAppliance CS50,

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
בואו נסתכל ב
ספריית בן, ואנו

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, תראה זה--
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
במיוחד, לbootstrap לנו
CSS ואחריו חבורה של תסריט שלמה

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
קו תחתון בשם ש
אנחנו מדברים על במפרט.

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
זה, bootstrap לשל
תיעוד, רק

198
00:10:24,610 --> 00:10:29,840
משמעות הדבר היא כי div זה הולך למלא
viewport או החלון של הדפדפן באופן מלא.

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
תיעוד Maps

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
שים לב שאנחנו כבר בשימוש
קצת bootstrap

208
00:10:54,730 --> 00:10:57,670
כאן too-- דברים כמו
טופס מוטבע וצורה-קבוצה.

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 שלנו הדגמה קודם לכן.

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
בתוך viewport מבוסס
על קואורדינטות 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
זה דומה מאוד ברוחו ל
פונקצית בדיקה של הבעיה סט 7,

238
00:12:35,820 --> 00:12:39,450
שיצר קשר עם Yahoo Finance בשבילך.

239
00:12:39,450 --> 00:12:43,710
אנשי קשר בקובץ זה Google News
בשבילך, סופו של דבר תופס

240
00:12:43,710 --> 00:12:46,050
מכונה-קריא
version-- במשהו

241
00:12:46,050 --> 00:12:49,720
נקרא RSS format-- של החדשות
לקיימברידג 'או בוורלי הילס

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.

247
00:13:06,097 --> 00:13:08,180
עכשיו תראה ב
specification-- אנו מצביעים לך

248
00:13:08,180 --> 00:13:10,720
איך אתה יכול ממש לראות
חלק מback-- הקרוב JSON

249
00:13:10,720 --> 00:13:15,210
כי את הפונקציונליות הזו סופו של דבר
מאפשר לך לאכלס תפריטים קופצים אלה כל כך

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
ואז בסופו של הדפסים
מערך שבformat-- JSON

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
כתובת אתר כמו חיפוש. php? הגיאו = משהו,
הקוד שלך יהיה סופו של דבר לחזור JSON

264
00:14:00,610 --> 00:14:05,020
מערך של כל המקומות בך
טבלת מסד נתונים התואמים את הקלט ש.

265
00:14:05,020 --> 00:14:08,960
אז אם המשתמש מקליד בקיימברידג ',
הקובץ כאן search.php שלך

266
00:14:08,960 --> 00:14:12,680
צריך סופו של דבר להחזיר מערך JSON
לכל המשחקים לקיימברידג ',

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
שמירה סביב התייחסות
כך במשתנה שנקראת מידע.

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
המפה בהתאם למפרט.

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
במפרט, כדי לתפוס את
שאלמנט, המפה-בד

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
מפת גוגל בתוך
היישום שלנו,

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
כשהסתכלנו בScratch ו
תמיכתה באמצעות הליכה

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
משמעות דבר היא כי יש לו את הדפדפן
סיים טעינת מפת גוגל.

327
00:17:14,930 --> 00:17:18,380
בנקודה זו פונקציה שנקראת
configure צריך סופו של דבר

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.

332
00:17:25,871 --> 00:17:28,620
למפרט. אתה הולך צריך
כדי לכתוב את הקוד שלמעשה

333
00:17:28,620 --> 00:17:32,840
מוסיף marker-- אם זה נראה
כמו עיתון, או נקודת סימון אגודל,

334
00:17:32,840 --> 00:17:35,360
או משהו else-- למפת גוגל.

335
00:17:35,360 --> 00:17:37,720
הנה עכשיו היא פונקציה ש
נקרא להגדיר.

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

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
אבל במקרה הזה,
תבנית למפרט

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
שרת ולקבל בחזרה איזו תגובה.

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
עוד על כך במפרט.

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
מבין שאני כבר פתחתי ב
לקדם כרטיסייה זו כאן לכתובת אתר זו,

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
שים לב שאני כבר חיפשתי
המיקוד של קיימברידג 'כאן,

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
אבל טכניקה זו של ידני הולכת
לכתובת אתר כמו זה למשהו כמו

410
00:21:24,330 --> 00:21:31,710
search.php? הגיאו = קיימברידג 'או 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
ובכלל זה לקביעה תצורה
ותבנית ש,

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
כל כך הרבה זמן כמו שאתה לדחוף את עצמך מעבר ל
ההיכרות שלך עם המפרט עצמו

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
כי אז הוא Mashup הבעיה סט 8.

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