>> [Musikwiedergabe]
>> DAVID J. MALAN: Hallo.
Lassen Sie uns einen Spaziergang durch Übungsblatt 8 Mashup,
die gehen, um Sie herauszufordern stützen sich auf Elemente für Google Maps
mit Elementen aus Google News und Maische sie zusammen in einem Web-Applet,
ermöglicht es einem Benutzer, zu suchen eine Karte für lokale Nachrichten
auf bestimmte Städte, Städte und Postleitzahlen.
Um dies zu tun, wir sind zu gehen integrieren einige HTML, CSS, PHP, SQL,
JavaScript und eine Technik damit in der Regel als AJAX bekannt
Diese immersive erstellen Benutzererfahrung.
>> Lassen Sie uns zunächst für die Google-Karte selbst.
Dies ist natürlich, ist vielleicht eine vertraute Benutzeroberfläche.
Aber es stellt sich heraus, dass die Google-Karte bietet auch eine API-- Anwendung
Programmierung interface-- über die Sie können Elemente von Google Maps zu nehmen
und integrieren sie in Ihre eigenen Anwendungen.
In der Tat, überall diese Prozess, Sie gehen
ein paar URLs finden besonders hilfreich, dass
werden in die erwähnte Spezifikation für Übungsblatt 8,
speziell diesem Getting Started Leitfaden oder im Entwicklerhandbuch
für Google Maps API Version 3 sowie wie die Google Maps JavaScript API
v3 Referenz, die eine ist etwas obskure zu lesen
aber eigentlich hat alle von der unteren Ebene Details über das, was Funktionen oder Methoden
und Objekte und die Eigenschaften und Ereignisse tatsächlich mit dem API zu kommen,
im Geiste sehr ähnlich zu [unverständlich] Seiten.
>> Nun, wenn wir einen Blick bei Google News, werden Sie
vielleicht finden Sie eine vertraute Benutzeroberfläche hier.
Aber es stellt sich heraus, können Sie auch suchen Google News für bestimmte Regionen
über eine HTTP-Parameter namens Geo.
In der Tat, wenn ich Bilder in hier oben, dass Sie sehen werden
Ich bin an news.google.com/news/section?geo=02138.
Und in der Tat, wenn ich vergrößern out, werden Sie sehen, dass ich
Blick auf eine Seite mit einem ganzen Bündel von Ansichten über Cambridge, Massachusetts.
>> In der Zwischenzeit, wenn ich tatsächlich ändern die URL nicht auf eine Postleitzahl so sein,
aber etwas ein wenig chaotischer wie Cambridge, Massachusetts +,
wo das Plus ist die Weise, die Sie kodieren ein Leerzeichen in einer URL und drücken Sie die Eingabetaste,
Du, dass ich tatsächlich sehen finden Sie beinahe die gleiche Nachricht.
Vielleicht ist es ein bisschen anders weil Cambridge tatsächlich
mehrere Postleitzahlen.
Nun, wie soll ich das wissen, dass und, in der Tat, wie könnte ich irgendwie
binden Städte und Gemeinden Postleitzahlen, falls ich
möchte der Benutzer ermöglichen nachschlagen entweder?
Nun stellt sich heraus, dass es eine Website gibt, genannt
geonames.org was eine Initiative, die haben
eine frei verfügbare Datenbank aller Arten von Geo-Informationen,
nicht nur für die USA, aber auch für andere Länder auch.
In der Tat, wenn ich auf diese URL hier, was wird auch in der genannten Problem gesetzt
Spezifikation, du wirst es sehen drei Auflistung der eine ganze Reihe von Zip-Dateien
jeder von denen kann von Ihnen heruntergeladen werden.
In der Tat, für dieses Problem eingestellt Sie gehen zum Download us.zip.
Jetzt in dieser Datei, eine ganze Reihe von Daten im Textformat.
Die Dateien, ist sehr ähnlich zu einem CSV-- Comma Separated Values ​​file--
aber es tatsächlich verwendet Registerkarten, um Felder abzugrenzen.
Nun, mittlerweile, wenn man sich hier auf dem, was ich hervorgehoben,
die Felder in der Datei gehen Dinge wie Ländercodes sein,
Postleitzahlen, Ortsnamen, und dann in irgendeiner Form
oder andere, Staaten und Landkreise, Gemeinden und vieles mehr.
In der Tat, ich habe schon Download diese Datei im Voraus.
Lassen Sie mich gehen Sie vor und öffnen Sie sie hier-- us.text-- und in der Tat, werden Sie
sehen, wenn ich nach unten scrollen zu Zeile 16.792 Sie werden einige Datensätze für Cambridge sehen
Massachusetts und seine verschiedenen Postleitzahlen.
Was Sie sehen, es gibt auch die Grafschaft, Einige Zahlen, die ich nicht wirklich
zu verstehen, sondern auch alle die Art und Weise auf der rechten Seite,
Einige GPS coordinates-- Breite und Länge.
Das ist großartig, weil einer der die Funktionen von Google Maps API
ist die Fähigkeit, zu erkennen wo man geographisch
in Bezug auf die GPS-Koordinaten.
>> Lassen Sie uns jetzt beginnen, herauszufinden, wie man Start binden diese Dinge zusammen.
Wir haben Ihnen eine ganze gegeben Bündel von Vertriebs Code,
sowie MySQL-Datenbank.
In der Tat, wenn ich meinen a phpMyAdmin mit bereits importiert, wie Sie schnell an,
pset8.SQL, erhalten Sie eine MySQL-Tabelle zu sehen, dass sieht so aus, ein ID-Feld, Land
Code, Postleitzahl, Ortsnamen und vieles mehr.
Werden die Typen aller derjenigen Spalten ich einfach abgeleitet
durch Lesen des readme.text Datei hier, dass angegebenen
ob ein Feld für eine ganze Zahl, oder varchar oder dergleichen.
>> Also haben wir die Tabelle erstellt für Sie und die SQL-Befehle gegeben Sie
ausführen zu erstellen Tabelle in einer eigenen Datenbank,
aber es gibt tatsächlich keine Daten in es noch nicht.
Vielmehr wirst du zu haben sind Download us.zip oder zip eines Landes
Datei von dieser URL gibt.
Und dann haben Sie gehen zu müssen, zu schreiben sind ein Kommandozeilen-Skript in PHP, das ist
gehen zu eröffnen, dass Text Datei, durchlaufen seine Linien,
und dann für jeden der diese Zeilen zu tun einen Einsatz
in der Tabelle platziert in Ihrer MySQL-Datenbank.
So dass am Ende dieses Prozesses, werden Sie haben das Skript letztlich laufen
nur einmal in der Theorie.
In der Realität werden Sie wahrscheinlich führen Sie es ein paar Mal
bei dem Versuch, verschiedene Fehler zu beheben.
>> Letztlich wollen Sie eine haben sind wirklich große Datenbank mit Tausenden
und Tausenden geografischer Reihen.
Dann wirst du diese Chemikalie eingeführt einsetzen werden Skript zur Seite, wenn es funktioniert
und Ihre Datenbank ist schön und richtig, und dann
Sie gehen auf dem Weg zu wirklich Umsetzung der Mashup selbst.
Das Mashup wird sich freuen ein wenig so etwas wie dieses.
Bei mashup.cs50.net wir haben einen Stab Lösung
das sieht ein bisschen so etwas wie dieses.
In der Tat, wenn ich an dieser Zeitung klicken Symbol für Cambridge, Massachusetts,
finden Sie eine Spinn sehen kurz und dann Symbol
eine geordnete Liste, ein Aufzählung von Artikeln
Cambridge, Massachusetts bezogen.
Wenn ich auf Charles klicken, Massachusetts,
Ich werde das gleiche für die Stadt zu sehen.
Und wenn ich klicken Sie Watertown, Massachusetts,
könnte es nicht sein, Nachrichten von Watertown,
so werden Sie etwas sehen, wie langsame News Tag.
>> Nun, mittlerweile, links oben sind einige bekannte Google Maps Kontrollen
damit Sie heraus zoomen, verschieben oben, unten, links und rechts,
sondern auch ein Suchfeld, das wir dort setzen.
Also, wenn ich für die, ehrlich gesagt zu suchen, die einzige andere Postleitzahl ich weiß,
90210, werden wir tatsächlich sehen, Beverly Hills, Kalifornien.
Wenn angeklickt haben führt mich zu Kalifornien und eine ganze Reihe
Nachrichten über Beverly Hills.
Jetzt bemerken auch, was da passiert ist.
Wenn ich dieses Mal nach 02.138 oder sogar Cambridge Massachusetts oder ein Komma
Variante davon, erhalten Sie eine wenig Autocomplete Dropdown.
Nun ist dies mit Hilfe eines Plugin eine Bibliothek mit dem Namen jQuery,
und das Plugin wird als Typeahead.
Wir haben einfach durch Lesen die Dokumentation,
heruntergeladen die JS-Datei integriert in den Verteilerschlüssel, so dass Sie
schließlich können die Code schreiben, dass füllt diese Dropdown-Menü mit dem Auto
Auswahlen oder die automatische Vorschläge.
>> Nun ist die Verteilung Code jedoch, dass Sie erhalten nicht annähernd so viel zu tun.
Sie erhalten die Google-Karte eingebettet und erhalten Sie die Bedienelemente oben links,
und erhalten Sie das Suchfeld.
Aber wenn ich etwas wie 02.138 sind keine Orte, noch nicht gefunden.
So, das wird sein, Eines unserer Ziele hier.
Außerdem, wenn Sie einen Schritt Rücken und an der Karte selbst zu suchen,
es gibt keine Nachrichten löschen.
Auch wenn ich klicke und Widerstand, keine Marker tatsächlich
erscheinen für Nachrichten, denn das Herausforderung für Sie als auch nach links.
>> Lassen Sie uns einen Blick dann bei der Verteilung Code.
Sobald Sie heruntergeladen haben pset8.zip und entpackt es
in Ihr vhost Verzeichnis in der CS50 Appliance,
Sie werden diese zu sehen Verzeichnisse hier hinein.
Bin-- die in der Regel steht für Binary für ausführbare programs--
enthält, wie in pset7 einige PHP Dateien, die andere Dateien enthalten,
dann öffentlich, das ist die Dateien, die müssen
öffentlich zugänglich sein sollen an einen Benutzer mit einem Browser.
Werfen wir einen Blick in die bin, und wir werden
zu sehen, dass es eine Datei da schon Import aufgerufen.
Wenn wir dies mit gedit zu öffnen, werden wir sehen, dass leider gibt es nicht viel
dort.
Alles, was es gibt, obwohl, ist ein Shebang oben
der angibt, welche interpreter-- hierbei PHP--
verwendet werden, um tatsächlich führen Sie diese Datei.
Aber dann sagt, wo es TODO ist, wo Sie sind
zu benötigen, um einen Code zu schreiben dass wahrscheinlich erfordert die Konfiguration
Datei, die ist in der beinhaltet Verzeichnis wie wir bereits mit PHP-Dateien erfolgen.
Und dann sind Sie gehen müssen irgendwie eröffnen
us.text die Sie vermutlich bereits entpackt.
Dann wirst du zu haben sind Iteration über die Zeilen in der Datei,
vielleicht mit einigen Funktionen in der Beschreibung vorgeschlagen.
Setzen Sie dann jede dieser Zeilen in MySQL-Datenbank
mit der Abfragefunktion, die wir haben Sie wieder with-- bereitgestellt
oder zumindest eine Variante davon in functions.php,
die wir in nur einem Augenblick zu sehen.
>> Lassen Sie uns nun zu schließen Import und gehen Sie zurück zu unser Verzeichnis und dieses Mal gehen in
umfasst.
Und wenn ich ls tun gibt, werden Sie sehen, drei Dateien ganz wie Übungsblatt 7.
Und lassen Sie uns einen Blick darauf werfen, beispielsweise an config.php.
In gibt, ist weniger Zeilen als vorher, und
scheint diese Datei enthält constants.php und functions.php.
Wir verwenden eine etwas andere Technik dieses Mal tatsächlich
angeben, dass diese Dateien relativ sind in das aktuelle Verzeichnis __ DIR__
stellt unabhängig Verzeichnis diese Datei config.php, ist selbst in.
Das ist also ein explizite Weise spezifizieren
welche anderen Dateien, die Sie benötigen sollen.
>> Nun, wenn ich diese Datei zu schließen und eröffnen constants.php statt,
finden Sie eine Datei finden Sie erinnert sehr an zu Übungsblatt 7 ist ebenso, wenn auch
mit einer anderen Datenbank namens pset8.
Schließlich wird in functions.php, wir werden nur eine Funktion zu sehen
dieses Mal genannt Abfrage.
Das ist fast die gleiche, außer wir damit umgehen Fehler dieses Mal ein wenig
anders, aber es ist Nutzung ist die gleichen wie in Problem stellte sieben.
>> Jetzt gehen wir zurück in unsere pset8 Verzeichnis, gehen Sie in den öffentlichen und in dort
wenn ich ls, werden Sie sehen, this-- articles.php, index.html, search.php,
und update.php-- alle Dateien.
Und dann die CSS-Schriftarten, img, und js Verzeichnis ganz wie pset7.
>> Werfen wir einen Blick auf index.html, das ist
werde wirklich sein Einstieg in die smashup.
Jetzt in index.html können Sie eine ganze sehen werden Bündel von Verbindungselementen in den Kopf,
Insbesondere für Bootstrap für eigene CSS, gefolgt von einer ganzen Reihe von Skripts
Tags für Dinge wie die Karten, API selbst, eine besondere Markierung mit Label
Dienstprogramm, das wir in der genannten Spezifikation für Sie verfügbar ist,
jQuery selbst, Bootstrap- selbst und andere Bibliothek
genannt Strich die wir sprechen in der spec.
Underscore.js wie jquery.js ist eine JavaScript-Bibliothek
das hat eine ganze Reihe von Funktionen dass viele Menschen auf der Welt Wunsch
in JavaScript selbst existierte.
Also all das sind eigentlich recht beliebt.
Wir haben auch erwähnt Typeahead welche die Bibliothek ist, dass
macht das Autovervollständigen-Dropdown und schließlich ein Link zu unserer eigenen JavaScript.
>> Inzwischen und vielleicht Gott sei Dank, diese Mashups
wird durch eine vergleichsweise kleine angetriebene HTML hier unten an der Unterseite.
Beachten Sie, dass wir ein div in angegeben haben unser Körper der Klasse-Behälter Flüssigkeit.
Diese, pro Bootstrap Dokumentation, nur
bedeutet, dass diese div wird sich das füllen Ansichtsfenster oder Browser-Fenster vollständig.
>> Inzwischen unten, dass wir ein div das ist geöffnet und sofort wieder geschlossen
mit der eindeutigen ID des Kartenfensters.
Dies ist nun von Google Karten Dokumentation
für seine API, wobei ich müssen einfach ein leeres div, in die die Injektion,
letztlich eine tatsächliche Google Maps.
Aber mehr dazu in nur ein bisschen.
>> Schließlich gibt es noch eine Form Innere hier die
implementiert das Textfeld oben links oben in unserem Schnittstelle für die Suche.
Beachte, dass wir verwendet haben ein bisschen wie Bootstrap
hier too-- Dinge wie Form-inline und Form-Gruppe.
Wir haben die ehemaligen gegeben eindeutige ID der Form.
Und dann, am Ende, habe ich eigentlich ein Eingabetyp, das ist ziemlich vertraut ist,
mit der ID q.
Nur eine Konvention.
Q für query-- haben könnte wurde nichts genannt.
Und dann die Platzhalter, mittlerweile ist Stadt, Bundesland,
und Postleitzahl, die Sie sich vielleicht erinnern Sehen Sie in unserem Mashup Demo früher.
Lassen Sie uns diese Datei zu schließen.
>> Nun nehmen Sie einen Blick auf die PHP-Dateien, abwarten und dann die JavaScript-Dateien.
In unserem PHP-Dateien, haben wir bereits für Sie ausgeführt,
B. Updates.
Update.php-- wir nicht verbringen einen großen Zeit auf hier-- auf den Punkt gebracht
ist die Datei, unsere JavaScript-Code wird
über AJAX Kontakt, Asynchron-Technik, die es
in JavaScript gebaut in diesen Tagen, das ist würde es uns ermöglichen, bitten update.php
für weitere Informationen.
>> Genauer gesagt, zu jeder Zeit der Benutzer die Karte zieht
oder führt eine Suche, die Sprünge der Benutzer an einen anderen Ort,
unsere JavaScript-Code, wie wir bald sehen werden, ist
gehen zu nennen update.php und fragen Sie nach 10 oder so Marker
im Ansichtsfenster auf der Basis auf den GPS-Koordinaten
der oberen und unteren Ecken dieser Karte.
Wir können dann die Karte wieder zu bevölkern jetzt, der Benutzer den Bildschirm, um bewegt
um zu sehen, wahrscheinlich 10 neu Marker für verschiedene Städte.
Inzwischen ist diese Datei letztlich würde eine SQL-Abfrage ausführen
gegen unserer Datenbank Tabelle namens Stellen die
wird sich die Rück 10 oder weniger Standorten.
>> Währenddessen sind in articles.php ist eine weitere Datei haben wir in seiner Gesamtheit geschrieben.
Es ist im Geiste sehr ähnlich Funktion VERWEIS Übungsblatt 7 ist,
die Yahoo Finance für Sie kontaktiert.
Diese Datei Kontakte Google News für Sie, schließlich griff
ein maschinenlesbares version-- in etwas
genannte RSS-Format aufnehmen der Nachrichten Cambridge oder Beverly Hills
oder was auch immer der Stadt Sie gesucht haben denn an diesem geoparameter basiert.
Wir analysieren diese RSS, die nur eine ist Art der Auszeichnungssprache namens XML,
und dann werden wir tatsächlich schicken Sie es an Ihrem Browser
und Ihren JavaScript-Code, Insbesondere wird in einem Format genannt
JSON, JavaScript Object Notation.
Sie werden nun in der zu sehen specification-- wir weisen Sie
, wie Sie tatsächlich sehen können einige der JSON kommenden back--
dass diese Funktionalität letztendlich können Sie diese Popup-Menüs zu füllen, so
dass, wenn Sie auf auf einen Marker in der Karte
Sie tatsächlich sehen, eine ganze Reihe von Kugeln, von denen jede
Links zu einem Artikel.
>> Werfen wir nun einen Blick auf eine letzte PHP-Datei, die glücklicherweise nicht
haben viel los an-- nur eine ziemlich große TODO.
Gerade jetzt diese Datei erklärt ein Array namens Orten.
Und dann schließlich Drucke dass Array im JSON-Format aufnehmen
pretty-Druck es einfach so, dass Dinge sind einfacher zu debuggen.
Leider ist in der Mitte gibt es diese TODO,
welches für Sie die Suche ruft Datenbank für Orte passend ein geo HTTP
Parameters.
>> Und in der Tat, das wird ist einer Ihrer challenges--
um diese Funktionalität zu implementieren hier so dass, wenn Sie diese Datei mit kontaktieren
eine URL wie Suche. php? geo = etwas, Ihr Code wird letztendlich zurück eine JSON
Array aller Stellen in Ihrem Datenbanktabelle, die diese Eingabe passen.
Also, wenn die Benutzertypen in Cambridge, Ihre Datei hier search.php
letztlich ein JSON-Array zurück für alle Spiele für Cambridge,
welche in Massachusetts sein könnte konnte aber auch anderswo.
>> Schließlich werfen wir einen Blick auf zwei Dateien, die statische ultimately-- sind
Ihre CSS-Datei und sie JavaScript-Datei.
Wenn ich in unser CSS-Verzeichnis zu gehen, es gibt eine ganze Reihe von Dateien gibt,
aber die meisten von ihnen sind Bibliotheken.
Ich werde einen Blick zu nehmen, Insbesondere bei styles.css
Das ist unsere eigene globale CSS, das ist werde diese ganze Mashup stilisieren.
Ich überlasse es, Sie durch zu lesen Kommentare hier, aber, auf den Punkt gebracht,
dies ist die CSS, die dafür sorgt unsere Mashup, standardmäßig aus der Box,
sieht genau so aus, wie wir wollen es-- mit der Karte Füllen der Sichtöffnung
und bei der Suche Feld bis in der oberen linken.
Wir haben auch die Freiheit genommen Stilisierung, dass Typeahead Dropdown-
Menü als auch ein wenig.
>> Die wichtigste Datei vielleicht für dieses Problem eingestellt
ist dieses letzte, scripts.js.
Im Inneren des JS-Verzeichnis Noch Dateien.
Alle von ihnen sind Bibliotheksdateien bis auf diesen einen, scripts.js.
Wenn wir öffnen diese sich, werfen wir unsere Abschlussführung durch die Funktionen,
werden in diese Datei gebaut für Sie und Call Aufmerksamkeit
zu den TODOs die vor uns liegen.
>> Am Anfang der Datei, sind drei globale Variablen.
Eine für eine Karte, die gehen wird ist ein Verweis auf unserer Google Karte.
Sie können davon halten Art als Zeiger.
Inzwischen haben wir eine weitere globale Variable
namens info, die zu sein scheint Speichern der Rückgabewert einer Kauf
neue google.maps.InfoWindow.
JavaScript unterstützt Objekte, sind geistig sehr ähnlich Struts.
Und was diese Linie für unsere Zwecke tut
ist die Schaffung einer neuen Info Fenster im Speicher und dann
halten um einen Referenz dazu in einer Variable namens Info.
Und zwischen denen, Unterdessen ist das, was angezeigt wird
um eine leere JavaScript sein Array namens Marker.
All diese Zeitung Icons, oder Sie könnte ein anderes Symbol insgesamt wählen,
gehen zu lagern letztendlich in diesem Array
so dass wir sehr leicht hinzufügen die Karte und entfernen Sie sie von der Karte.
>> Lassen Sie uns nun nach unten scrollen ein wenig und Senkrechtstarter
durch den Code, die gehen zu sein ausgeführt, sobald das DOM oder Dokumenten
Objektmodell oder die Seite selbst ist fertig.
Daran erinnern, dass diese Syntax hier lediglich Informationen
dass der folgende Code sollte nur durchgeführt werden
wenn der Browser beendet hat Laden alles andere.
>> Wir erklären, zunächst ein ganze Reihe von Designs,
die am Ende Stilisierung Über die Karte nach dem spec.
Wir erklären dann ein ganze Reihe von Optionen,
die weiter angepasst Google Karte, die wir sind dabei, zu verankern.
Wir verwenden Sie dann ein wenig jQuery-Code, die in einer etwas näher erläutert wird
in der Spezifikation, zu greifen das Element, map-Leinwand
dass wir so eindeutig identifiziert.
Und hier ist diese Linie wie es scheint, auf magische uns
eine Google-Karte Innere unsere eigene Anwendung,
Speichern einer Referenz mit in dieser Variable namens Karte.
>> Schließlich haben wir hier unten registrieren eine so genannte Zuhörer.
Denken Sie back-- weit, weit back-- zu Woche null in CS50
als wir sahen Scratch und seine Unterstützung durch einen Spaziergang
durch für Dinge genannt Veranstaltungen und Sendungen.
Sie können nicht verwendet haben es selbst, aber es ist
ein Mechanismus, durch ein Browser in diesem Fall
kann unsere Aufmerksamkeit zu bekommen, wenn es bereit sein, um einen Code auszuführen.
In diesem Fall ist, wird es zu hören auf der Karte für eine Veranstaltung namens Leerlauf.
Dies bedeutet, dass der Browser beendet das Laden der Google Karte.
An dieser Stelle genannt Funktion configure sollte letztlich
ausgeführt werden.
Diese Funktion, Konfiguration, wir werden sehen, wird von uns geschrieben.
>> Jetzt hier unten ist eine Funktion, dass leider
ist nur ein TODO Add Marker.
Per der spec. Sie gehen zu müssen, sind den Code, der eigentlich schreiben
fügt eine marker-- ob es aussieht wie eine Zeitung oder ein Daumenheftzwecke,
oder etwas else-- auf der Google-Karte.
Hier ist nun, dass Funktion genannt configure.
Ich werde es zu verlassen, um Sie zu lesen durch das genauer,
aber erkennen, dass wir hinzufügen ein paar mehr Zuhörer
damit wir Code auszuführen, wenn das Benutzer klickt auf und zieht die Karte.
Wir haben auch hier, dass Code in initialisiert, dass Typeahead-Plugin
so dass die Dropdown- Menü tatsächlich funktioniert.
>> Aber konzentrieren wir uns auf nur eine Paar hier der Orte.
Genauer gesagt, dies zu tun.
Ich werde in der Online verschieben Dokumentation und die Spezifikation
für, wie man in diesem TODO füllen.
Aber kurz gesagt, diese Bibliothek Typeahead können Sie übergeben
in was allgemein als Matrize bekannt, die einige variable Platzhalter hat
ganz im Geiste der printf%. * s.
Aber in diesem Fall ist die Vorlage pro die Spezifikation
können Sie festlegen, welche Variablen Sie wollen
von Daten, die zu kommen ist zu injizieren von so etwas wie die PHP zurück
Dateien, die Sie geschrieben haben, THAT emittiert werden JSON ausgegeben.
>> Jetzt hier unten erkennen, dass wir Hören für Typeahead Auswahl
Wenn der Benutzer tatsächlich leitet a suchen und wählt einen Wert.
Dies ist, wie wir tatsächlich gehen, um für das zu hören
und führen Sie einen Code als Ergebnis.
Danach geht es weiter zu konfigurieren die Mashup nur ein kleines bisschen.
Und schließlich fordern wir Diese Funktion Update.
Er aktualisiert die Markierungen auf dem Bildschirm.
Mehr dazu in einem Moment.
Inzwischen gibt es ein paar kleine Funktionen in hier.
Eines davon ist die hideInfo einfach schließt sich das Infofenster.
Eine weitere Funktion hier, die letztlich wird nicht zu lang sein, entfernen Sie Markierungen.
Das wird rückgängig zu machen was auch immer Ihr Add Marker-Funktion tut.
Und dann hier unten ist Suche.
Und das hier interessant ist, weil wir haben Sie den JavaScript-Code, ist geschrieben
werde zu search.php auf das zu sprechen Server und wieder eine Reaktion.
>> Sie, natürlich, werden noch implementieren müssen search.php,
aber wir implementiert haben die JavaScript-Code, ist
werde tatsächlich handgeführt sucht aus diesem Textfeld.
Insbesondere Hinweis dass diese Funktion hier,
Suche hat nennen search.php durch ein Verfahren namens
zu JSON, die wir in der Vorlesung sahen.
Und die Syntax hier ist ein wenig anders
aus Vortrag, dass wir verwenden jQuery sogenannten Versprechen Schnittstelle.
Mehr dazu in der spec.
Dies bedeutet einfach, für unsere Zwecken jetzt, dass es
gibt zwei spezielle Funktionen, die wir müssen mit Punktnotation nennen
Hier sofort nach dem Aufruf zu JSON.
Eines heißt getan.
Eines heißt scheitern.
Sie können von ihnen denken, wie der Erfolg Handler
und die Fehlerbehandlungsroutine nur , falls etwas schief geht.
>> Schauen wir uns nun an der letzten Einige Funktionen in dieser Datei.
Hier unten ist eine Funktion, show genannt, die
zeigt Informationen in einer von denen, kleines Info-Fenster, dass
erscheint, wenn der Benutzer eine Markierung klickt.
Hier unten ist weiter dass Update-Funktion
dass wir für Sie umgesetzt.
Es bestimmt die Grenzen der Karte.
Was sind die GPS Koordinaten seines Nordosten und Südwesten Ecken hier.
Wir haben einige HDP Parameter vorbereitet hier und dann schließlich an ihnen vorbei
um update.php, die wir haben auch für Sie realisiert.
Das bringt letztlich wieder einige JSON aus der Datei mit dem Namen update.php
und dann entfernt alle Markierungen auf dem Bildschirm
und dann durchläuft die Daten, die zurückgekommen ist
von update.php, die wieder nur ein JSON-Array.
Und dann ist es schließlich fügt eine Markierung für jedem dieser Orte, Handhabung Ausfall
oder Fehler, die vielleicht sehr gut passieren.
>> Nun, nur um Ihnen einen Eindruck davon, wie Sie zu geben könnte zum Debuggen das Projekt zu gehen,
klar, dass ich in geöffnet haben voran hier diese Registerkarte, um diese URL,
pset8 / articles.php? geo = 02138.
Nun wieder Artikel über PHP wir für Sie eingeführt
so ist dies nicht so sehr Was werden Sie mit
zu debuggen, sondern die Technik.
Beachten Sie, dass ich gesucht habe Cambridge Postleitzahl Sie hier,
und ich habe wieder bekommen in der Tat ein JSON Liste von JSON-Objekte innerhalb dessen
Zwei keys-- Link und Titel.
>> Also diese Funktionalität arbeitet bereits für Sie.
Aber diese Technik der manuell gehen zu einer URL, wie dies für so etwas wie
search.php? geo = cambridge oder 02.138 oder was der Benutzer eingetippt sollten
von unschätzbarem Wert, wie Sie selbst versuchen, , genau herauszufinden, ob oder warum
search.php funktioniert oder nicht.
>> Letztlich dann haben Sie wenige TODOs vor Ihnen.
Du bist zum ersten Geräte gehen dass Import-Script, dass
liest in us.text in Ihre Datenbank.
Sie werden dann zu benötigen, zu implementieren search.php
so dass es genau so verhält, als angegeben.
Sie werden dann gehen zu wollen, auf scripts.js konzentrieren
und schließlich führt die paar TODOs,
einschließlich für configure und das Template,
Add Marker, Marker zu entfernen, und dann dauern, but not least, ein
persönliche Note.
>> Sobald Sie Ihr Mashup Arbeits haben ganz wie bei uns, das Ziel bei der Hand
ist für Sie eine persönliche hinzufügen berühren, um Ihre Mashup,
ob es sich um Design und Funktionen.
Nehmen Sie den Mashup noch so leicht auf die nächste Ebene.
So lange, wie Sie sich über Push Ihre Vertrautheit mit der Spezifikation selbst
und holen eine Technik neue, auch wenn es nur
ästhetisierend wie das Ändern der Layout der Karte, die Sie verwenden,
der Umfang, die wir erwarten zufrieden sein werden.
Das Problem ist dann Set 8 Mashup.
Bleiben Sie für weitere in der abgestimmte Spezifikation und viel Glück
Bekämpfung dieser, letzten CS50 Problem überhaupt eingestellt.
>> [Musikwiedergabe]