1 00:00:00,000 --> 00:00:03,388 >> [Musikwiedergabe] 2 00:00:03,388 --> 00:00:09,196 3 00:00:09,196 --> 00:00:10,180 >> DAVID J. MALAN: Hallo. 4 00:00:10,180 --> 00:00:12,600 Lassen Sie uns einen Spaziergang durch Übungsblatt 8 Mashup, 5 00:00:12,600 --> 00:00:15,880 die gehen, um Sie herauszufordern stützen sich auf Elemente für Google Maps 6 00:00:15,880 --> 00:00:20,905 mit Elementen aus Google News und Maische sie zusammen in einem Web-Applet, 7 00:00:20,905 --> 00:00:24,150 ermöglicht es einem Benutzer, zu suchen eine Karte für lokale Nachrichten 8 00:00:24,150 --> 00:00:26,780 auf bestimmte Städte, Städte und Postleitzahlen. 9 00:00:26,780 --> 00:00:31,040 Um dies zu tun, wir sind zu gehen integrieren einige HTML, CSS, PHP, SQL, 10 00:00:31,040 --> 00:00:34,390 JavaScript und eine Technik damit in der Regel als AJAX bekannt 11 00:00:34,390 --> 00:00:36,850 Diese immersive erstellen Benutzererfahrung. 12 00:00:36,850 --> 00:00:38,920 >> Lassen Sie uns zunächst für die Google-Karte selbst. 13 00:00:38,920 --> 00:00:41,220 Dies ist natürlich, ist vielleicht eine vertraute Benutzeroberfläche. 14 00:00:41,220 --> 00:00:45,070 Aber es stellt sich heraus, dass die Google-Karte bietet auch eine API-- Anwendung 15 00:00:45,070 --> 00:00:48,360 Programmierung interface-- über die Sie können Elemente von Google Maps zu nehmen 16 00:00:48,360 --> 00:00:50,740 und integrieren sie in Ihre eigenen Anwendungen. 17 00:00:50,740 --> 00:00:52,650 In der Tat, überall diese Prozess, Sie gehen 18 00:00:52,650 --> 00:00:55,140 ein paar URLs finden besonders hilfreich, dass 19 00:00:55,140 --> 00:00:57,820 werden in die erwähnte Spezifikation für Übungsblatt 8, 20 00:00:57,820 --> 00:01:00,980 speziell diesem Getting Started Leitfaden oder im Entwicklerhandbuch 21 00:01:00,980 --> 00:01:07,640 für Google Maps API Version 3 sowie wie die Google Maps JavaScript API 22 00:01:07,640 --> 00:01:10,260 v3 Referenz, die eine ist etwas obskure zu lesen 23 00:01:10,260 --> 00:01:14,600 aber eigentlich hat alle von der unteren Ebene Details über das, was Funktionen oder Methoden 24 00:01:14,600 --> 00:01:18,220 und Objekte und die Eigenschaften und Ereignisse tatsächlich mit dem API zu kommen, 25 00:01:18,220 --> 00:01:20,720 im Geiste sehr ähnlich zu [unverständlich] Seiten. 26 00:01:20,720 --> 00:01:23,480 >> Nun, wenn wir einen Blick bei Google News, werden Sie 27 00:01:23,480 --> 00:01:25,370 vielleicht finden Sie eine vertraute Benutzeroberfläche hier. 28 00:01:25,370 --> 00:01:29,350 Aber es stellt sich heraus, können Sie auch suchen Google News für bestimmte Regionen 29 00:01:29,350 --> 00:01:32,000 über eine HTTP-Parameter namens Geo. 30 00:01:32,000 --> 00:01:35,100 In der Tat, wenn ich Bilder in hier oben, dass Sie sehen werden 31 00:01:35,100 --> 00:01:41,672 Ich bin an news.google.com/news/section?geo=02138. 32 00:01:41,672 --> 00:01:43,630 Und in der Tat, wenn ich vergrößern out, werden Sie sehen, dass ich 33 00:01:43,630 --> 00:01:47,090 Blick auf eine Seite mit einem ganzen Bündel von Ansichten über Cambridge, Massachusetts. 34 00:01:47,090 --> 00:01:50,620 >> In der Zwischenzeit, wenn ich tatsächlich ändern die URL nicht auf eine Postleitzahl so sein, 35 00:01:50,620 --> 00:01:55,580 aber etwas ein wenig chaotischer wie Cambridge, Massachusetts +, 36 00:01:55,580 --> 00:02:00,740 wo das Plus ist die Weise, die Sie kodieren ein Leerzeichen in einer URL und drücken Sie die Eingabetaste, 37 00:02:00,740 --> 00:02:02,907 Du, dass ich tatsächlich sehen finden Sie beinahe die gleiche Nachricht. 38 00:02:02,907 --> 00:02:05,489 Vielleicht ist es ein bisschen anders weil Cambridge tatsächlich 39 00:02:05,489 --> 00:02:06,910 mehrere Postleitzahlen. 40 00:02:06,910 --> 00:02:09,410 Nun, wie soll ich das wissen, dass und, in der Tat, wie könnte ich irgendwie 41 00:02:09,410 --> 00:02:12,940 binden Städte und Gemeinden Postleitzahlen, falls ich 42 00:02:12,940 --> 00:02:15,064 möchte der Benutzer ermöglichen nachschlagen entweder? 43 00:02:15,064 --> 00:02:17,480 Nun stellt sich heraus, dass es eine Website gibt, genannt 44 00:02:17,480 --> 00:02:20,060 geonames.org was eine Initiative, die haben 45 00:02:20,060 --> 00:02:23,760 eine frei verfügbare Datenbank aller Arten von Geo-Informationen, 46 00:02:23,760 --> 00:02:27,040 nicht nur für die USA, aber auch für andere Länder auch. 47 00:02:27,040 --> 00:02:30,430 In der Tat, wenn ich auf diese URL hier, was wird auch in der genannten Problem gesetzt 48 00:02:30,430 --> 00:02:34,510 Spezifikation, du wirst es sehen drei Auflistung der eine ganze Reihe von Zip-Dateien 49 00:02:34,510 --> 00:02:36,400 jeder von denen kann von Ihnen heruntergeladen werden. 50 00:02:36,400 --> 00:02:39,900 In der Tat, für dieses Problem eingestellt Sie gehen zum Download us.zip. 51 00:02:39,900 --> 00:02:43,790 Jetzt in dieser Datei, eine ganze Reihe von Daten im Textformat. 52 00:02:43,790 --> 00:02:47,760 Die Dateien, ist sehr ähnlich zu einem CSV-- Comma Separated Values ​​file-- 53 00:02:47,760 --> 00:02:51,294 aber es tatsächlich verwendet Registerkarten, um Felder abzugrenzen. 54 00:02:51,294 --> 00:02:53,710 Nun, mittlerweile, wenn man sich hier auf dem, was ich hervorgehoben, 55 00:02:53,710 --> 00:02:56,459 die Felder in der Datei gehen Dinge wie Ländercodes sein, 56 00:02:56,459 --> 00:02:58,980 Postleitzahlen, Ortsnamen, und dann in irgendeiner Form 57 00:02:58,980 --> 00:03:04,230 oder andere, Staaten und Landkreise, Gemeinden und vieles mehr. 58 00:03:04,230 --> 00:03:06,630 In der Tat, ich habe schon Download diese Datei im Voraus. 59 00:03:06,630 --> 00:03:09,750 Lassen Sie mich gehen Sie vor und öffnen Sie sie hier-- us.text-- und in der Tat, werden Sie 60 00:03:09,750 --> 00:03:16,660 sehen, wenn ich nach unten scrollen zu Zeile 16.792 Sie werden einige Datensätze für Cambridge sehen 61 00:03:16,660 --> 00:03:19,120 Massachusetts und seine verschiedenen Postleitzahlen. 62 00:03:19,120 --> 00:03:22,150 Was Sie sehen, es gibt auch die Grafschaft, Einige Zahlen, die ich nicht wirklich 63 00:03:22,150 --> 00:03:24,500 zu verstehen, sondern auch alle die Art und Weise auf der rechten Seite, 64 00:03:24,500 --> 00:03:27,170 Einige GPS coordinates-- Breite und Länge. 65 00:03:27,170 --> 00:03:30,440 Das ist großartig, weil einer der die Funktionen von Google Maps API 66 00:03:30,440 --> 00:03:33,670 ist die Fähigkeit, zu erkennen wo man geographisch 67 00:03:33,670 --> 00:03:36,850 in Bezug auf die GPS-Koordinaten. 68 00:03:36,850 --> 00:03:40,210 >> Lassen Sie uns jetzt beginnen, herauszufinden, wie man Start binden diese Dinge zusammen. 69 00:03:40,210 --> 00:03:42,900 Wir haben Ihnen eine ganze gegeben Bündel von Vertriebs Code, 70 00:03:42,900 --> 00:03:44,970 sowie MySQL-Datenbank. 71 00:03:44,970 --> 00:03:49,100 In der Tat, wenn ich meinen a phpMyAdmin mit bereits importiert, wie Sie schnell an, 72 00:03:49,100 --> 00:03:54,800 pset8.SQL, erhalten Sie eine MySQL-Tabelle zu sehen, dass sieht so aus, ein ID-Feld, Land 73 00:03:54,800 --> 00:03:57,400 Code, Postleitzahl, Ortsnamen und vieles mehr. 74 00:03:57,400 --> 00:04:00,490 Werden die Typen aller derjenigen Spalten ich einfach abgeleitet 75 00:04:00,490 --> 00:04:03,870 durch Lesen des readme.text Datei hier, dass angegebenen 76 00:04:03,870 --> 00:04:07,330 ob ein Feld für eine ganze Zahl, oder varchar oder dergleichen. 77 00:04:07,330 --> 00:04:10,510 >> Also haben wir die Tabelle erstellt für Sie und die SQL-Befehle gegeben Sie 78 00:04:10,510 --> 00:04:12,770 ausführen zu erstellen Tabelle in einer eigenen Datenbank, 79 00:04:12,770 --> 00:04:15,290 aber es gibt tatsächlich keine Daten in es noch nicht. 80 00:04:15,290 --> 00:04:19,600 Vielmehr wirst du zu haben sind Download us.zip oder zip eines Landes 81 00:04:19,600 --> 00:04:21,500 Datei von dieser URL gibt. 82 00:04:21,500 --> 00:04:24,940 Und dann haben Sie gehen zu müssen, zu schreiben sind ein Kommandozeilen-Skript in PHP, das ist 83 00:04:24,940 --> 00:04:28,420 gehen zu eröffnen, dass Text Datei, durchlaufen seine Linien, 84 00:04:28,420 --> 00:04:31,180 und dann für jeden der diese Zeilen zu tun einen Einsatz 85 00:04:31,180 --> 00:04:34,940 in der Tabelle platziert in Ihrer MySQL-Datenbank. 86 00:04:34,940 --> 00:04:37,880 So dass am Ende dieses Prozesses, werden Sie haben das Skript letztlich laufen 87 00:04:37,880 --> 00:04:39,610 nur einmal in der Theorie. 88 00:04:39,610 --> 00:04:41,780 In der Realität werden Sie wahrscheinlich führen Sie es ein paar Mal 89 00:04:41,780 --> 00:04:45,460 bei dem Versuch, verschiedene Fehler zu beheben. 90 00:04:45,460 --> 00:04:48,440 >> Letztlich wollen Sie eine haben sind wirklich große Datenbank mit Tausenden 91 00:04:48,440 --> 00:04:50,139 und Tausenden geografischer Reihen. 92 00:04:50,139 --> 00:04:52,930 Dann wirst du diese Chemikalie eingeführt einsetzen werden Skript zur Seite, wenn es funktioniert 93 00:04:52,930 --> 00:04:55,140 und Ihre Datenbank ist schön und richtig, und dann 94 00:04:55,140 --> 00:04:58,880 Sie gehen auf dem Weg zu wirklich Umsetzung der Mashup selbst. 95 00:04:58,880 --> 00:05:01,670 Das Mashup wird sich freuen ein wenig so etwas wie dieses. 96 00:05:01,670 --> 00:05:05,165 Bei mashup.cs50.net wir haben einen Stab Lösung 97 00:05:05,165 --> 00:05:06,990 das sieht ein bisschen so etwas wie dieses. 98 00:05:06,990 --> 00:05:11,070 In der Tat, wenn ich an dieser Zeitung klicken Symbol für Cambridge, Massachusetts, 99 00:05:11,070 --> 00:05:13,300 finden Sie eine Spinn sehen kurz und dann Symbol 100 00:05:13,300 --> 00:05:16,370 eine geordnete Liste, ein Aufzählung von Artikeln 101 00:05:16,370 --> 00:05:18,280 Cambridge, Massachusetts bezogen. 102 00:05:18,280 --> 00:05:20,352 Wenn ich auf Charles klicken, Massachusetts, 103 00:05:20,352 --> 00:05:21,685 Ich werde das gleiche für die Stadt zu sehen. 104 00:05:21,685 --> 00:05:24,174 Und wenn ich klicken Sie Watertown, Massachusetts, 105 00:05:24,174 --> 00:05:26,090 könnte es nicht sein, Nachrichten von Watertown, 106 00:05:26,090 --> 00:05:28,630 so werden Sie etwas sehen, wie langsame News Tag. 107 00:05:28,630 --> 00:05:32,140 >> Nun, mittlerweile, links oben sind einige bekannte Google Maps Kontrollen 108 00:05:32,140 --> 00:05:34,980 damit Sie heraus zoomen, verschieben oben, unten, links und rechts, 109 00:05:34,980 --> 00:05:37,360 sondern auch ein Suchfeld, das wir dort setzen. 110 00:05:37,360 --> 00:05:40,910 Also, wenn ich für die, ehrlich gesagt zu suchen, die einzige andere Postleitzahl ich weiß, 111 00:05:40,910 --> 00:05:45,020 90210, werden wir tatsächlich sehen, Beverly Hills, Kalifornien. 112 00:05:45,020 --> 00:05:48,550 Wenn angeklickt haben führt mich zu Kalifornien und eine ganze Reihe 113 00:05:48,550 --> 00:05:50,369 Nachrichten über Beverly Hills. 114 00:05:50,369 --> 00:05:51,910 Jetzt bemerken auch, was da passiert ist. 115 00:05:51,910 --> 00:05:57,040 Wenn ich dieses Mal nach 02.138 oder sogar Cambridge Massachusetts oder ein Komma 116 00:05:57,040 --> 00:06:00,300 Variante davon, erhalten Sie eine wenig Autocomplete Dropdown. 117 00:06:00,300 --> 00:06:03,840 Nun ist dies mit Hilfe eines Plugin eine Bibliothek mit dem Namen jQuery, 118 00:06:03,840 --> 00:06:05,732 und das Plugin wird als Typeahead. 119 00:06:05,732 --> 00:06:07,440 Wir haben einfach durch Lesen die Dokumentation, 120 00:06:07,440 --> 00:06:13,150 heruntergeladen die JS-Datei integriert in den Verteilerschlüssel, so dass Sie 121 00:06:13,150 --> 00:06:16,900 schließlich können die Code schreiben, dass füllt diese Dropdown-Menü mit dem Auto 122 00:06:16,900 --> 00:06:19,350 Auswahlen oder die automatische Vorschläge. 123 00:06:19,350 --> 00:06:23,820 >> Nun ist die Verteilung Code jedoch, dass Sie erhalten nicht annähernd so viel zu tun. 124 00:06:23,820 --> 00:06:26,860 Sie erhalten die Google-Karte eingebettet und erhalten Sie die Bedienelemente oben links, 125 00:06:26,860 --> 00:06:28,240 und erhalten Sie das Suchfeld. 126 00:06:28,240 --> 00:06:32,760 Aber wenn ich etwas wie 02.138 sind keine Orte, noch nicht gefunden. 127 00:06:32,760 --> 00:06:34,730 So, das wird sein, Eines unserer Ziele hier. 128 00:06:34,730 --> 00:06:37,430 Außerdem, wenn Sie einen Schritt Rücken und an der Karte selbst zu suchen, 129 00:06:37,430 --> 00:06:38,950 es gibt keine Nachrichten löschen. 130 00:06:38,950 --> 00:06:41,780 Auch wenn ich klicke und Widerstand, keine Marker tatsächlich 131 00:06:41,780 --> 00:06:45,560 erscheinen für Nachrichten, denn das Herausforderung für Sie als auch nach links. 132 00:06:45,560 --> 00:06:48,490 >> Lassen Sie uns einen Blick dann bei der Verteilung Code. 133 00:06:48,490 --> 00:06:51,460 Sobald Sie heruntergeladen haben pset8.zip und entpackt es 134 00:06:51,460 --> 00:06:54,430 in Ihr vhost Verzeichnis in der CS50 Appliance, 135 00:06:54,430 --> 00:06:56,550 Sie werden diese zu sehen Verzeichnisse hier hinein. 136 00:06:56,550 --> 00:07:00,200 Bin-- die in der Regel steht für Binary für ausführbare programs-- 137 00:07:00,200 --> 00:07:04,870 enthält, wie in pset7 einige PHP Dateien, die andere Dateien enthalten, 138 00:07:04,870 --> 00:07:06,710 dann öffentlich, das ist die Dateien, die müssen 139 00:07:06,710 --> 00:07:09,369 öffentlich zugänglich sein sollen an einen Benutzer mit einem Browser. 140 00:07:09,369 --> 00:07:11,410 Werfen wir einen Blick in die bin, und wir werden 141 00:07:11,410 --> 00:07:13,890 zu sehen, dass es eine Datei da schon Import aufgerufen. 142 00:07:13,890 --> 00:07:17,591 Wenn wir dies mit gedit zu öffnen, werden wir sehen, dass leider gibt es nicht viel 143 00:07:17,591 --> 00:07:18,090 dort. 144 00:07:18,090 --> 00:07:20,250 Alles, was es gibt, obwohl, ist ein Shebang oben 145 00:07:20,250 --> 00:07:23,410 der angibt, welche interpreter-- hierbei PHP-- 146 00:07:23,410 --> 00:07:25,759 verwendet werden, um tatsächlich führen Sie diese Datei. 147 00:07:25,759 --> 00:07:27,550 Aber dann sagt, wo es TODO ist, wo Sie sind 148 00:07:27,550 --> 00:07:31,130 zu benötigen, um einen Code zu schreiben dass wahrscheinlich erfordert die Konfiguration 149 00:07:31,130 --> 00:07:35,820 Datei, die ist in der beinhaltet Verzeichnis wie wir bereits mit PHP-Dateien erfolgen. 150 00:07:35,820 --> 00:07:38,180 Und dann sind Sie gehen müssen irgendwie eröffnen 151 00:07:38,180 --> 00:07:41,920 us.text die Sie vermutlich bereits entpackt. 152 00:07:41,920 --> 00:07:44,690 Dann wirst du zu haben sind Iteration über die Zeilen in der Datei, 153 00:07:44,690 --> 00:07:47,800 vielleicht mit einigen Funktionen in der Beschreibung vorgeschlagen. 154 00:07:47,800 --> 00:07:51,390 Setzen Sie dann jede dieser Zeilen in MySQL-Datenbank 155 00:07:51,390 --> 00:07:54,940 mit der Abfragefunktion, die wir haben Sie wieder with-- bereitgestellt 156 00:07:54,940 --> 00:07:58,010 oder zumindest eine Variante davon in functions.php, 157 00:07:58,010 --> 00:07:59,560 die wir in nur einem Augenblick zu sehen. 158 00:07:59,560 --> 00:08:04,430 >> Lassen Sie uns nun zu schließen Import und gehen Sie zurück zu unser Verzeichnis und dieses Mal gehen in 159 00:08:04,430 --> 00:08:05,300 umfasst. 160 00:08:05,300 --> 00:08:09,210 Und wenn ich ls tun gibt, werden Sie sehen, drei Dateien ganz wie Übungsblatt 7. 161 00:08:09,210 --> 00:08:13,760 Und lassen Sie uns einen Blick darauf werfen, beispielsweise an config.php. 162 00:08:13,760 --> 00:08:16,730 In gibt, ist weniger Zeilen als vorher, und 163 00:08:16,730 --> 00:08:20,712 scheint diese Datei enthält constants.php und functions.php. 164 00:08:20,712 --> 00:08:23,670 Wir verwenden eine etwas andere Technik dieses Mal tatsächlich 165 00:08:23,670 --> 00:08:30,910 angeben, dass diese Dateien relativ sind in das aktuelle Verzeichnis __ DIR__ 166 00:08:30,910 --> 00:08:35,280 stellt unabhängig Verzeichnis diese Datei config.php, ist selbst in. 167 00:08:35,280 --> 00:08:37,600 Das ist also ein explizite Weise spezifizieren 168 00:08:37,600 --> 00:08:40,100 welche anderen Dateien, die Sie benötigen sollen. 169 00:08:40,100 --> 00:08:44,020 >> Nun, wenn ich diese Datei zu schließen und eröffnen constants.php statt, 170 00:08:44,020 --> 00:08:47,430 finden Sie eine Datei finden Sie erinnert sehr an zu Übungsblatt 7 ist ebenso, wenn auch 171 00:08:47,430 --> 00:08:50,050 mit einer anderen Datenbank namens pset8. 172 00:08:50,050 --> 00:08:54,020 Schließlich wird in functions.php, wir werden nur eine Funktion zu sehen 173 00:08:54,020 --> 00:08:55,942 dieses Mal genannt Abfrage. 174 00:08:55,942 --> 00:08:59,150 Das ist fast die gleiche, außer wir damit umgehen Fehler dieses Mal ein wenig 175 00:08:59,150 --> 00:09:02,860 anders, aber es ist Nutzung ist die gleichen wie in Problem stellte sieben. 176 00:09:02,860 --> 00:09:08,090 >> Jetzt gehen wir zurück in unsere pset8 Verzeichnis, gehen Sie in den öffentlichen und in dort 177 00:09:08,090 --> 00:09:14,420 wenn ich ls, werden Sie sehen, this-- articles.php, index.html, search.php, 178 00:09:14,420 --> 00:09:16,940 und update.php-- alle Dateien. 179 00:09:16,940 --> 00:09:22,010 Und dann die CSS-Schriftarten, img, und js Verzeichnis ganz wie pset7. 180 00:09:22,010 --> 00:09:24,660 >> Werfen wir einen Blick auf index.html, das ist 181 00:09:24,660 --> 00:09:27,290 werde wirklich sein Einstieg in die smashup. 182 00:09:27,290 --> 00:09:31,820 Jetzt in index.html können Sie eine ganze sehen werden Bündel von Verbindungselementen in den Kopf, 183 00:09:31,820 --> 00:09:36,540 Insbesondere für Bootstrap für eigene CSS, gefolgt von einer ganzen Reihe von Skripts 184 00:09:36,540 --> 00:09:41,520 Tags für Dinge wie die Karten, API selbst, eine besondere Markierung mit Label 185 00:09:41,520 --> 00:09:44,950 Dienstprogramm, das wir in der genannten Spezifikation für Sie verfügbar ist, 186 00:09:44,950 --> 00:09:48,420 jQuery selbst, Bootstrap- selbst und andere Bibliothek 187 00:09:48,420 --> 00:09:50,990 genannt Strich die wir sprechen in der spec. 188 00:09:50,990 --> 00:09:57,031 Underscore.js wie jquery.js ist eine JavaScript-Bibliothek 189 00:09:57,031 --> 00:10:00,280 das hat eine ganze Reihe von Funktionen dass viele Menschen auf der Welt Wunsch 190 00:10:00,280 --> 00:10:02,020 in JavaScript selbst existierte. 191 00:10:02,020 --> 00:10:04,560 Also all das sind eigentlich recht beliebt. 192 00:10:04,560 --> 00:10:07,140 Wir haben auch erwähnt Typeahead welche die Bibliothek ist, dass 193 00:10:07,140 --> 00:10:11,180 macht das Autovervollständigen-Dropdown und schließlich ein Link zu unserer eigenen JavaScript. 194 00:10:11,180 --> 00:10:13,880 >> Inzwischen und vielleicht Gott sei Dank, diese Mashups 195 00:10:13,880 --> 00:10:17,550 wird durch eine vergleichsweise kleine angetriebene HTML hier unten an der Unterseite. 196 00:10:17,550 --> 00:10:22,330 Beachten Sie, dass wir ein div in angegeben haben unser Körper der Klasse-Behälter Flüssigkeit. 197 00:10:22,330 --> 00:10:24,610 Diese, pro Bootstrap Dokumentation, nur 198 00:10:24,610 --> 00:10:29,840 bedeutet, dass diese div wird sich das füllen Ansichtsfenster oder Browser-Fenster vollständig. 199 00:10:29,840 --> 00:10:33,020 >> Inzwischen unten, dass wir ein div das ist geöffnet und sofort wieder geschlossen 200 00:10:33,020 --> 00:10:34,790 mit der eindeutigen ID des Kartenfensters. 201 00:10:34,790 --> 00:10:37,400 Dies ist nun von Google Karten Dokumentation 202 00:10:37,400 --> 00:10:42,490 für seine API, wobei ich müssen einfach ein leeres div, in die die Injektion, 203 00:10:42,490 --> 00:10:44,470 letztlich eine tatsächliche Google Maps. 204 00:10:44,470 --> 00:10:46,310 Aber mehr dazu in nur ein bisschen. 205 00:10:46,310 --> 00:10:48,850 >> Schließlich gibt es noch eine Form Innere hier die 206 00:10:48,850 --> 00:10:52,930 implementiert das Textfeld oben links oben in unserem Schnittstelle für die Suche. 207 00:10:52,930 --> 00:10:54,730 Beachte, dass wir verwendet haben ein bisschen wie Bootstrap 208 00:10:54,730 --> 00:10:57,670 hier too-- Dinge wie Form-inline und Form-Gruppe. 209 00:10:57,670 --> 00:11:00,080 Wir haben die ehemaligen gegeben eindeutige ID der Form. 210 00:11:00,080 --> 00:11:04,510 Und dann, am Ende, habe ich eigentlich ein Eingabetyp, das ist ziemlich vertraut ist, 211 00:11:04,510 --> 00:11:06,440 mit der ID q. 212 00:11:06,440 --> 00:11:07,230 Nur eine Konvention. 213 00:11:07,230 --> 00:11:09,234 Q für query-- haben könnte wurde nichts genannt. 214 00:11:09,234 --> 00:11:11,400 Und dann die Platzhalter, mittlerweile ist Stadt, Bundesland, 215 00:11:11,400 --> 00:11:16,200 und Postleitzahl, die Sie sich vielleicht erinnern Sehen Sie in unserem Mashup Demo früher. 216 00:11:16,200 --> 00:11:17,980 Lassen Sie uns diese Datei zu schließen. 217 00:11:17,980 --> 00:11:24,460 >> Nun nehmen Sie einen Blick auf die PHP-Dateien, abwarten und dann die JavaScript-Dateien. 218 00:11:24,460 --> 00:11:27,700 In unserem PHP-Dateien, haben wir bereits für Sie ausgeführt, 219 00:11:27,700 --> 00:11:29,960 B. Updates. 220 00:11:29,960 --> 00:11:35,060 Update.php-- wir nicht verbringen einen großen Zeit auf hier-- auf den Punkt gebracht 221 00:11:35,060 --> 00:11:38,400 ist die Datei, unsere JavaScript-Code wird 222 00:11:38,400 --> 00:11:41,610 über AJAX Kontakt, Asynchron-Technik, die es 223 00:11:41,610 --> 00:11:45,980 in JavaScript gebaut in diesen Tagen, das ist würde es uns ermöglichen, bitten update.php 224 00:11:45,980 --> 00:11:47,410 für weitere Informationen. 225 00:11:47,410 --> 00:11:50,045 >> Genauer gesagt, zu jeder Zeit der Benutzer die Karte zieht 226 00:11:50,045 --> 00:11:53,310 oder führt eine Suche, die Sprünge der Benutzer an einen anderen Ort, 227 00:11:53,310 --> 00:11:55,250 unsere JavaScript-Code, wie wir bald sehen werden, ist 228 00:11:55,250 --> 00:11:59,610 gehen zu nennen update.php und fragen Sie nach 10 oder so Marker 229 00:11:59,610 --> 00:12:02,630 im Ansichtsfenster auf der Basis auf den GPS-Koordinaten 230 00:12:02,630 --> 00:12:06,510 der oberen und unteren Ecken dieser Karte. 231 00:12:06,510 --> 00:12:10,520 Wir können dann die Karte wieder zu bevölkern jetzt, der Benutzer den Bildschirm, um bewegt 232 00:12:10,520 --> 00:12:14,210 um zu sehen, wahrscheinlich 10 neu Marker für verschiedene Städte. 233 00:12:14,210 --> 00:12:18,340 Inzwischen ist diese Datei letztlich würde eine SQL-Abfrage ausführen 234 00:12:18,340 --> 00:12:21,680 gegen unserer Datenbank Tabelle namens Stellen die 235 00:12:21,680 --> 00:12:26,380 wird sich die Rück 10 oder weniger Standorten. 236 00:12:26,380 --> 00:12:32,620 >> Währenddessen sind in articles.php ist eine weitere Datei haben wir in seiner Gesamtheit geschrieben. 237 00:12:32,620 --> 00:12:35,820 Es ist im Geiste sehr ähnlich Funktion VERWEIS Übungsblatt 7 ist, 238 00:12:35,820 --> 00:12:39,450 die Yahoo Finance für Sie kontaktiert. 239 00:12:39,450 --> 00:12:43,710 Diese Datei Kontakte Google News für Sie, schließlich griff 240 00:12:43,710 --> 00:12:46,050 ein maschinenlesbares version-- in etwas 241 00:12:46,050 --> 00:12:49,720 genannte RSS-Format aufnehmen der Nachrichten Cambridge oder Beverly Hills 242 00:12:49,720 --> 00:12:52,880 oder was auch immer der Stadt Sie gesucht haben denn an diesem geoparameter basiert. 243 00:12:52,880 --> 00:12:57,250 Wir analysieren diese RSS, die nur eine ist Art der Auszeichnungssprache namens XML, 244 00:12:57,250 --> 00:13:00,740 und dann werden wir tatsächlich schicken Sie es an Ihrem Browser 245 00:13:00,740 --> 00:13:03,570 und Ihren JavaScript-Code, Insbesondere wird in einem Format genannt 246 00:13:03,570 --> 00:13:06,097 JSON, JavaScript Object Notation. 247 00:13:06,097 --> 00:13:08,180 Sie werden nun in der zu sehen specification-- wir weisen Sie 248 00:13:08,180 --> 00:13:10,720 , wie Sie tatsächlich sehen können einige der JSON kommenden back-- 249 00:13:10,720 --> 00:13:15,210 dass diese Funktionalität letztendlich können Sie diese Popup-Menüs zu füllen, so 250 00:13:15,210 --> 00:13:16,960 dass, wenn Sie auf auf einen Marker in der Karte 251 00:13:16,960 --> 00:13:19,430 Sie tatsächlich sehen, eine ganze Reihe von Kugeln, von denen jede 252 00:13:19,430 --> 00:13:21,020 Links zu einem Artikel. 253 00:13:21,020 --> 00:13:25,000 >> Werfen wir nun einen Blick auf eine letzte PHP-Datei, die glücklicherweise nicht 254 00:13:25,000 --> 00:13:27,970 haben viel los an-- nur eine ziemlich große TODO. 255 00:13:27,970 --> 00:13:32,170 Gerade jetzt diese Datei erklärt ein Array namens Orten. 256 00:13:32,170 --> 00:13:35,980 Und dann schließlich Drucke dass Array im JSON-Format aufnehmen 257 00:13:35,980 --> 00:13:38,720 pretty-Druck es einfach so, dass Dinge sind einfacher zu debuggen. 258 00:13:38,720 --> 00:13:41,480 Leider ist in der Mitte gibt es diese TODO, 259 00:13:41,480 --> 00:13:46,890 welches für Sie die Suche ruft Datenbank für Orte passend ein geo HTTP 260 00:13:46,890 --> 00:13:47,490 Parameters. 261 00:13:47,490 --> 00:13:49,865 >> Und in der Tat, das wird ist einer Ihrer challenges-- 262 00:13:49,865 --> 00:13:54,240 um diese Funktionalität zu implementieren hier so dass, wenn Sie diese Datei mit kontaktieren 263 00:13:54,240 --> 00:14:00,610 eine URL wie Suche. php? geo = etwas, Ihr Code wird letztendlich zurück eine JSON 264 00:14:00,610 --> 00:14:05,020 Array aller Stellen in Ihrem Datenbanktabelle, die diese Eingabe passen. 265 00:14:05,020 --> 00:14:08,960 Also, wenn die Benutzertypen in Cambridge, Ihre Datei hier search.php 266 00:14:08,960 --> 00:14:12,680 letztlich ein JSON-Array zurück für alle Spiele für Cambridge, 267 00:14:12,680 --> 00:14:16,990 welche in Massachusetts sein könnte konnte aber auch anderswo. 268 00:14:16,990 --> 00:14:21,040 >> Schließlich werfen wir einen Blick auf zwei Dateien, die statische ultimately-- sind 269 00:14:21,040 --> 00:14:23,680 Ihre CSS-Datei und sie JavaScript-Datei. 270 00:14:23,680 --> 00:14:26,779 Wenn ich in unser CSS-Verzeichnis zu gehen, es gibt eine ganze Reihe von Dateien gibt, 271 00:14:26,779 --> 00:14:28,070 aber die meisten von ihnen sind Bibliotheken. 272 00:14:28,070 --> 00:14:31,530 Ich werde einen Blick zu nehmen, Insbesondere bei styles.css 273 00:14:31,530 --> 00:14:35,440 Das ist unsere eigene globale CSS, das ist werde diese ganze Mashup stilisieren. 274 00:14:35,440 --> 00:14:38,840 Ich überlasse es, Sie durch zu lesen Kommentare hier, aber, auf den Punkt gebracht, 275 00:14:38,840 --> 00:14:43,490 dies ist die CSS, die dafür sorgt unsere Mashup, standardmäßig aus der Box, 276 00:14:43,490 --> 00:14:46,950 sieht genau so aus, wie wir wollen es-- mit der Karte Füllen der Sichtöffnung 277 00:14:46,950 --> 00:14:49,720 und bei der Suche Feld bis in der oberen linken. 278 00:14:49,720 --> 00:14:52,870 Wir haben auch die Freiheit genommen Stilisierung, dass Typeahead Dropdown- 279 00:14:52,870 --> 00:14:55,170 Menü als auch ein wenig. 280 00:14:55,170 --> 00:14:58,030 >> Die wichtigste Datei vielleicht für dieses Problem eingestellt 281 00:14:58,030 --> 00:15:01,070 ist dieses letzte, scripts.js. 282 00:15:01,070 --> 00:15:03,800 Im Inneren des JS-Verzeichnis Noch Dateien. 283 00:15:03,800 --> 00:15:08,090 Alle von ihnen sind Bibliotheksdateien bis auf diesen einen, scripts.js. 284 00:15:08,090 --> 00:15:11,460 Wenn wir öffnen diese sich, werfen wir unsere Abschlussführung durch die Funktionen, 285 00:15:11,460 --> 00:15:13,820 werden in diese Datei gebaut für Sie und Call Aufmerksamkeit 286 00:15:13,820 --> 00:15:16,200 zu den TODOs die vor uns liegen. 287 00:15:16,200 --> 00:15:19,110 >> Am Anfang der Datei, sind drei globale Variablen. 288 00:15:19,110 --> 00:15:22,910 Eine für eine Karte, die gehen wird ist ein Verweis auf unserer Google Karte. 289 00:15:22,910 --> 00:15:25,510 Sie können davon halten Art als Zeiger. 290 00:15:25,510 --> 00:15:27,710 Inzwischen haben wir eine weitere globale Variable 291 00:15:27,710 --> 00:15:31,500 namens info, die zu sein scheint Speichern der Rückgabewert einer Kauf 292 00:15:31,500 --> 00:15:34,170 neue google.maps.InfoWindow. 293 00:15:34,170 --> 00:15:37,835 JavaScript unterstützt Objekte, sind geistig sehr ähnlich Struts. 294 00:15:37,835 --> 00:15:40,250 Und was diese Linie für unsere Zwecke tut 295 00:15:40,250 --> 00:15:42,820 ist die Schaffung einer neuen Info Fenster im Speicher und dann 296 00:15:42,820 --> 00:15:46,330 halten um einen Referenz dazu in einer Variable namens Info. 297 00:15:46,330 --> 00:15:48,330 Und zwischen denen, Unterdessen ist das, was angezeigt wird 298 00:15:48,330 --> 00:15:51,060 um eine leere JavaScript sein Array namens Marker. 299 00:15:51,060 --> 00:15:55,392 All diese Zeitung Icons, oder Sie könnte ein anderes Symbol insgesamt wählen, 300 00:15:55,392 --> 00:15:57,350 gehen zu lagern letztendlich in diesem Array 301 00:15:57,350 --> 00:16:01,570 so dass wir sehr leicht hinzufügen die Karte und entfernen Sie sie von der Karte. 302 00:16:01,570 --> 00:16:03,990 >> Lassen Sie uns nun nach unten scrollen ein wenig und Senkrechtstarter 303 00:16:03,990 --> 00:16:07,690 durch den Code, die gehen zu sein ausgeführt, sobald das DOM oder Dokumenten 304 00:16:07,690 --> 00:16:10,480 Objektmodell oder die Seite selbst ist fertig. 305 00:16:10,480 --> 00:16:12,942 Daran erinnern, dass diese Syntax hier lediglich Informationen 306 00:16:12,942 --> 00:16:14,900 dass der folgende Code sollte nur durchgeführt werden 307 00:16:14,900 --> 00:16:17,840 wenn der Browser beendet hat Laden alles andere. 308 00:16:17,840 --> 00:16:19,750 >> Wir erklären, zunächst ein ganze Reihe von Designs, 309 00:16:19,750 --> 00:16:22,410 die am Ende Stilisierung Über die Karte nach dem spec. 310 00:16:22,410 --> 00:16:24,790 Wir erklären dann ein ganze Reihe von Optionen, 311 00:16:24,790 --> 00:16:28,630 die weiter angepasst Google Karte, die wir sind dabei, zu verankern. 312 00:16:28,630 --> 00:16:32,090 Wir verwenden Sie dann ein wenig jQuery-Code, die in einer etwas näher erläutert wird 313 00:16:32,090 --> 00:16:35,000 in der Spezifikation, zu greifen das Element, map-Leinwand 314 00:16:35,000 --> 00:16:36,980 dass wir so eindeutig identifiziert. 315 00:16:36,980 --> 00:16:40,640 Und hier ist diese Linie wie es scheint, auf magische uns 316 00:16:40,640 --> 00:16:43,560 eine Google-Karte Innere unsere eigene Anwendung, 317 00:16:43,560 --> 00:16:47,020 Speichern einer Referenz mit in dieser Variable namens Karte. 318 00:16:47,020 --> 00:16:50,550 >> Schließlich haben wir hier unten registrieren eine so genannte Zuhörer. 319 00:16:50,550 --> 00:16:54,690 Denken Sie back-- weit, weit back-- zu Woche null in CS50 320 00:16:54,690 --> 00:16:57,430 als wir sahen Scratch und seine Unterstützung durch einen Spaziergang 321 00:16:57,430 --> 00:16:59,935 durch für Dinge genannt Veranstaltungen und Sendungen. 322 00:16:59,935 --> 00:17:01,810 Sie können nicht verwendet haben es selbst, aber es ist 323 00:17:01,810 --> 00:17:03,900 ein Mechanismus, durch ein Browser in diesem Fall 324 00:17:03,900 --> 00:17:07,940 kann unsere Aufmerksamkeit zu bekommen, wenn es bereit sein, um einen Code auszuführen. 325 00:17:07,940 --> 00:17:12,170 In diesem Fall ist, wird es zu hören auf der Karte für eine Veranstaltung namens Leerlauf. 326 00:17:12,170 --> 00:17:14,930 Dies bedeutet, dass der Browser beendet das Laden der Google Karte. 327 00:17:14,930 --> 00:17:18,380 An dieser Stelle genannt Funktion configure sollte letztlich 328 00:17:18,380 --> 00:17:19,339 ausgeführt werden. 329 00:17:19,339 --> 00:17:22,510 Diese Funktion, Konfiguration, wir werden sehen, wird von uns geschrieben. 330 00:17:22,510 --> 00:17:24,550 >> Jetzt hier unten ist eine Funktion, dass leider 331 00:17:24,550 --> 00:17:25,871 ist nur ein TODO Add Marker. 332 00:17:25,871 --> 00:17:28,620 Per der spec. Sie gehen zu müssen, sind den Code, der eigentlich schreiben 333 00:17:28,620 --> 00:17:32,840 fügt eine marker-- ob es aussieht wie eine Zeitung oder ein Daumenheftzwecke, 334 00:17:32,840 --> 00:17:35,360 oder etwas else-- auf der Google-Karte. 335 00:17:35,360 --> 00:17:37,720 Hier ist nun, dass Funktion genannt configure. 336 00:17:37,720 --> 00:17:40,390 Ich werde es zu verlassen, um Sie zu lesen durch das genauer, 337 00:17:40,390 --> 00:17:42,600 aber erkennen, dass wir hinzufügen ein paar mehr Zuhörer 338 00:17:42,600 --> 00:17:46,620 damit wir Code auszuführen, wenn das Benutzer klickt auf und zieht die Karte. 339 00:17:46,620 --> 00:17:50,730 Wir haben auch hier, dass Code in initialisiert, dass Typeahead-Plugin 340 00:17:50,730 --> 00:17:53,120 so dass die Dropdown- Menü tatsächlich funktioniert. 341 00:17:53,120 --> 00:17:55,690 >> Aber konzentrieren wir uns auf nur eine Paar hier der Orte. 342 00:17:55,690 --> 00:17:57,590 Genauer gesagt, dies zu tun. 343 00:17:57,590 --> 00:18:00,410 Ich werde in der Online verschieben Dokumentation und die Spezifikation 344 00:18:00,410 --> 00:18:02,530 für, wie man in diesem TODO füllen. 345 00:18:02,530 --> 00:18:05,890 Aber kurz gesagt, diese Bibliothek Typeahead können Sie übergeben 346 00:18:05,890 --> 00:18:09,790 in was allgemein als Matrize bekannt, die einige variable Platzhalter hat 347 00:18:09,790 --> 00:18:13,690 ganz im Geiste der printf%. * s. 348 00:18:13,690 --> 00:18:16,030 Aber in diesem Fall ist die Vorlage pro die Spezifikation 349 00:18:16,030 --> 00:18:18,760 können Sie festlegen, welche Variablen Sie wollen 350 00:18:18,760 --> 00:18:24,880 von Daten, die zu kommen ist zu injizieren von so etwas wie die PHP zurück 351 00:18:24,880 --> 00:18:29,810 Dateien, die Sie geschrieben haben, THAT emittiert werden JSON ausgegeben. 352 00:18:29,810 --> 00:18:35,170 >> Jetzt hier unten erkennen, dass wir Hören für Typeahead Auswahl 353 00:18:35,170 --> 00:18:38,050 Wenn der Benutzer tatsächlich leitet a suchen und wählt einen Wert. 354 00:18:38,050 --> 00:18:40,270 Dies ist, wie wir tatsächlich gehen, um für das zu hören 355 00:18:40,270 --> 00:18:42,250 und führen Sie einen Code als Ergebnis. 356 00:18:42,250 --> 00:18:45,300 Danach geht es weiter zu konfigurieren die Mashup nur ein kleines bisschen. 357 00:18:45,300 --> 00:18:48,000 Und schließlich fordern wir Diese Funktion Update. 358 00:18:48,000 --> 00:18:49,640 Er aktualisiert die Markierungen auf dem Bildschirm. 359 00:18:49,640 --> 00:18:51,529 Mehr dazu in einem Moment. 360 00:18:51,529 --> 00:18:53,570 Inzwischen gibt es ein paar kleine Funktionen in hier. 361 00:18:53,570 --> 00:18:56,820 Eines davon ist die hideInfo einfach schließt sich das Infofenster. 362 00:18:56,820 --> 00:19:00,020 Eine weitere Funktion hier, die letztlich wird nicht zu lang sein, entfernen Sie Markierungen. 363 00:19:00,020 --> 00:19:03,580 Das wird rückgängig zu machen was auch immer Ihr Add Marker-Funktion tut. 364 00:19:03,580 --> 00:19:04,960 Und dann hier unten ist Suche. 365 00:19:04,960 --> 00:19:08,610 Und das hier interessant ist, weil wir haben Sie den JavaScript-Code, ist geschrieben 366 00:19:08,610 --> 00:19:13,490 werde zu search.php auf das zu sprechen Server und wieder eine Reaktion. 367 00:19:13,490 --> 00:19:16,110 >> Sie, natürlich, werden noch implementieren müssen search.php, 368 00:19:16,110 --> 00:19:18,310 aber wir implementiert haben die JavaScript-Code, ist 369 00:19:18,310 --> 00:19:22,480 werde tatsächlich handgeführt sucht aus diesem Textfeld. 370 00:19:22,480 --> 00:19:25,340 Insbesondere Hinweis dass diese Funktion hier, 371 00:19:25,340 --> 00:19:29,160 Suche hat nennen search.php durch ein Verfahren namens 372 00:19:29,160 --> 00:19:31,072 zu JSON, die wir in der Vorlesung sahen. 373 00:19:31,072 --> 00:19:32,780 Und die Syntax hier ist ein wenig anders 374 00:19:32,780 --> 00:19:37,110 aus Vortrag, dass wir verwenden jQuery sogenannten Versprechen Schnittstelle. 375 00:19:37,110 --> 00:19:38,479 Mehr dazu in der spec. 376 00:19:38,479 --> 00:19:40,520 Dies bedeutet einfach, für unsere Zwecken jetzt, dass es 377 00:19:40,520 --> 00:19:43,870 gibt zwei spezielle Funktionen, die wir müssen mit Punktnotation nennen 378 00:19:43,870 --> 00:19:46,230 Hier sofort nach dem Aufruf zu JSON. 379 00:19:46,230 --> 00:19:47,510 Eines heißt getan. 380 00:19:47,510 --> 00:19:49,870 Eines heißt scheitern. 381 00:19:49,870 --> 00:19:51,790 Sie können von ihnen denken, wie der Erfolg Handler 382 00:19:51,790 --> 00:19:54,960 und die Fehlerbehandlungsroutine nur , falls etwas schief geht. 383 00:19:54,960 --> 00:19:57,760 >> Schauen wir uns nun an der letzten Einige Funktionen in dieser Datei. 384 00:19:57,760 --> 00:20:00,180 Hier unten ist eine Funktion, show genannt, die 385 00:20:00,180 --> 00:20:03,090 zeigt Informationen in einer von denen, kleines Info-Fenster, dass 386 00:20:03,090 --> 00:20:05,380 erscheint, wenn der Benutzer eine Markierung klickt. 387 00:20:05,380 --> 00:20:08,470 Hier unten ist weiter dass Update-Funktion 388 00:20:08,470 --> 00:20:10,510 dass wir für Sie umgesetzt. 389 00:20:10,510 --> 00:20:15,250 Es bestimmt die Grenzen der Karte. 390 00:20:15,250 --> 00:20:19,360 Was sind die GPS Koordinaten seines Nordosten und Südwesten Ecken hier. 391 00:20:19,360 --> 00:20:22,780 Wir haben einige HDP Parameter vorbereitet hier und dann schließlich an ihnen vorbei 392 00:20:22,780 --> 00:20:26,160 um update.php, die wir haben auch für Sie realisiert. 393 00:20:26,160 --> 00:20:31,390 Das bringt letztlich wieder einige JSON aus der Datei mit dem Namen update.php 394 00:20:31,390 --> 00:20:34,050 und dann entfernt alle Markierungen auf dem Bildschirm 395 00:20:34,050 --> 00:20:36,650 und dann durchläuft die Daten, die zurückgekommen ist 396 00:20:36,650 --> 00:20:40,350 von update.php, die wieder nur ein JSON-Array. 397 00:20:40,350 --> 00:20:45,130 Und dann ist es schließlich fügt eine Markierung für jedem dieser Orte, Handhabung Ausfall 398 00:20:45,130 --> 00:20:47,750 oder Fehler, die vielleicht sehr gut passieren. 399 00:20:47,750 --> 00:20:51,550 >> Nun, nur um Ihnen einen Eindruck davon, wie Sie zu geben könnte zum Debuggen das Projekt zu gehen, 400 00:20:51,550 --> 00:20:55,420 klar, dass ich in geöffnet haben voran hier diese Registerkarte, um diese URL, 401 00:20:55,420 --> 00:21:01,320 pset8 / articles.php? geo = 02138. 402 00:21:01,320 --> 00:21:04,050 Nun wieder Artikel über PHP wir für Sie eingeführt 403 00:21:04,050 --> 00:21:06,320 so ist dies nicht so sehr Was werden Sie mit 404 00:21:06,320 --> 00:21:08,190 zu debuggen, sondern die Technik. 405 00:21:08,190 --> 00:21:10,590 Beachten Sie, dass ich gesucht habe Cambridge Postleitzahl Sie hier, 406 00:21:10,590 --> 00:21:15,260 und ich habe wieder bekommen in der Tat ein JSON Liste von JSON-Objekte innerhalb dessen 407 00:21:15,260 --> 00:21:17,640 Zwei keys-- Link und Titel. 408 00:21:17,640 --> 00:21:19,860 >> Also diese Funktionalität arbeitet bereits für Sie. 409 00:21:19,860 --> 00:21:24,330 Aber diese Technik der manuell gehen zu einer URL, wie dies für so etwas wie 410 00:21:24,330 --> 00:21:31,710 search.php? geo = cambridge oder 02.138 oder was der Benutzer eingetippt sollten 411 00:21:31,710 --> 00:21:35,770 von unschätzbarem Wert, wie Sie selbst versuchen, , genau herauszufinden, ob oder warum 412 00:21:35,770 --> 00:21:38,510 search.php funktioniert oder nicht. 413 00:21:38,510 --> 00:21:41,720 >> Letztlich dann haben Sie wenige TODOs vor Ihnen. 414 00:21:41,720 --> 00:21:44,250 Du bist zum ersten Geräte gehen dass Import-Script, dass 415 00:21:44,250 --> 00:21:46,520 liest in us.text in Ihre Datenbank. 416 00:21:46,520 --> 00:21:48,760 Sie werden dann zu benötigen, zu implementieren search.php 417 00:21:48,760 --> 00:21:51,320 so dass es genau so verhält, als angegeben. 418 00:21:51,320 --> 00:21:54,170 Sie werden dann gehen zu wollen, auf scripts.js konzentrieren 419 00:21:54,170 --> 00:21:57,520 und schließlich führt die paar TODOs, 420 00:21:57,520 --> 00:21:59,950 einschließlich für configure und das Template, 421 00:21:59,950 --> 00:22:03,220 Add Marker, Marker zu entfernen, und dann dauern, but not least, ein 422 00:22:03,220 --> 00:22:04,330 persönliche Note. 423 00:22:04,330 --> 00:22:07,477 >> Sobald Sie Ihr Mashup Arbeits haben ganz wie bei uns, das Ziel bei der Hand 424 00:22:07,477 --> 00:22:09,560 ist für Sie eine persönliche hinzufügen berühren, um Ihre Mashup, 425 00:22:09,560 --> 00:22:11,290 ob es sich um Design und Funktionen. 426 00:22:11,290 --> 00:22:13,950 Nehmen Sie den Mashup noch so leicht auf die nächste Ebene. 427 00:22:13,950 --> 00:22:18,330 So lange, wie Sie sich über Push Ihre Vertrautheit mit der Spezifikation selbst 428 00:22:18,330 --> 00:22:20,840 und holen eine Technik neue, auch wenn es nur 429 00:22:20,840 --> 00:22:25,610 ästhetisierend wie das Ändern der Layout der Karte, die Sie verwenden, 430 00:22:25,610 --> 00:22:28,070 der Umfang, die wir erwarten zufrieden sein werden. 431 00:22:28,070 --> 00:22:30,260 Das Problem ist dann Set 8 Mashup. 432 00:22:30,260 --> 00:22:33,070 Bleiben Sie für weitere in der abgestimmte Spezifikation und viel Glück 433 00:22:33,070 --> 00:22:36,400 Bekämpfung dieser, letzten CS50 Problem überhaupt eingestellt. 434 00:22:36,400 --> 00:22:39,750 >> [Musikwiedergabe] 435 00:22:39,750 --> 00:22:43,542