>> [Muziek]
>> DAVID J. MALAN: Hallo.
Laten we eens een wandeling door Probleem Set 8 Mashup,
die zal je uitdagen om putten elementen voor Google Maps
met elementen uit Google News en mash ze samen in een web-applet dat
Een gebruiker zoeken een kaart voor nieuws lokaal
specifieke plaatsen, steden en postcodes.
Om dit te doen, gaan we integreren wat HTML, CSS, PHP, SQL,
JavaScript, en een techniek algemeen bekend als AJAX in orde
dit meeslepende creëren gebruikerservaring.
>> Laten we eerst naar Google Maps zelf.
Dit is natuurlijk misschien Een bekende interface.
Maar het blijkt dat Google Maps biedt ook een API-- applicatie
programmering interface-- via welke U kunt elementen van Google Maps te nemen
en integreren in uw eigen toepassingen.
Inderdaad, in deze proces, je gaat
om een ​​paar URL's vinden bijzonder nuttig dat
zijn vermeld in de specificatie voor Probleemverzameling 8,
specifiek deze slag Begeleiden of de handleiding voor ontwikkelaars
voor de Google Maps API Versie 3, alsmede als de Google Maps JavaScript API
v3 referentie, een beetje meer geheimzinnige te lezen
maar eigenlijk alle lagere niveau details over welke functies of methoden
en objecten en eigenschappen en gebeurtenissen eigenlijk komen met de API,
vergelijkbaar geest om [onverstaanbaar] pagina's.
>> Als we nu een kijkje nemen bij Google News, zult u
misschien zie hier een vertrouwde interface.
Maar het blijkt dat je kunt ook zoeken Google Nieuws voor specifieke geografische regio's
via een HTTP-parameter genaamd geo.
In feite, als ik in te zoomen hier, zult u zien dat
Ik ben op news.google.com/news/section?geo=02138.
En inderdaad, als ik te zoomen out, zult u zien dat ik ben
kijken naar een pagina met een hele hoop opvattingen over Cambridge, Massachusetts.
>> Ondertussen, als ik eigenlijk veranderen de URL niet om een ​​postcode als dit,
maar iets slordiger zoals Cambridge, + Massachusetts,
waar de plus is de manier waarop je coderen voor een spatie in een URL en druk op Enter,
je zult zien dat ik eigenlijk zie bijna hetzelfde nieuws.
Misschien is het een beetje anders omdat Cambridge eigenlijk
heeft meerdere postcodes.
Nu hoe zou ik weten dat en, in feite, hoe kon ik een of andere manier
binden steden en gemeenten om postcodes voor het geval ik
de gebruiker wilt toestaan opzoeken ofwel?
Nou, het blijkt dat er een website die er zijn genoemd
geonames.org die een initiatief om te hebben
een vrij beschikbare database van alle allerlei geografische informatie,
niet alleen voor de VS, maar ook voor andere landen ook.
In feite, als ik naar deze URL hier, die Ook in de probleemstelling genoemde
specificatie, zult u het zien van drie notering van een hele hoop van zip-bestanden
elk van die kan worden gedownload door u.
In feite, voor dit probleem stellen je gaat us.zip downloaden.
Nu in dit bestand, is een hele bos van gegevens in tekstformaat.
De bestanden is vergelijkbaar met een CSV-- komma's gescheiden waarden file--
maar het daadwerkelijk gebruikt tabbladen om velden af ​​te bakenen.
Nu, ondertussen, als je kijkt hier bij wat ik heb gemarkeerd,
de velden in dit bestand gaan om zaken als land codes zijn,
postcodes, plaatsnamen, en vervolgens, in een bepaalde vorm
of andere, staten en provincies, gemeenschappen en nog veel meer.
Sterker nog, ik heb al gedownload dit bestand op voorhand.
Laat me ga je gang en open het hier-- us.text-- en, inderdaad, dan heb je
kijken of ik scroll naar beneden naar lijn 16.792 zie je een paar records voor Cambridge,
Massachusetts en de verschillende postcodes.
Wat zie je er ook is de provincie, sommige nummers die ik niet echt
begrijpen, maar ook alle de weg aan de rechterkant,
sommige GPS coordinates-- lengte- en breedtegraad.
Dit is geweldig, want één van de functies van Google Maps API
is kan waarnemen waar je bent geografisch
qua GPS coördinaten.
>> Laten we nu eens beginnen om erachter te komen hoe beginnen samen te binden deze dingen.
We hebben u krijgt een hele stelletje verdeelsleutel,
evenals MySQL database.
In feite, als ik trek een phpMyAdmin met al geïmporteerd, zoals u binnenkort,
pset8.SQL, dan heb je een MySQL tabel te zien dat ziet er zo uit, een ID-veld, land
code, postcode, plaatsnaam en nog veel meer.
De aard van al deze kolommen I afgeleide gewoon
het lezen van de readme.text bestand hier dat gespecificeerd
of een veld een geheel getal, of VARCHAR of iets dergelijks.
>> Dus hebben we die tafel voor gemaakt u en gezien u de SQL-commando's
uitvoeren te creëren dat tabel in uw eigen database,
maar er is eigenlijk nog geen gegevens in.
Integendeel, je gaat te hebben om downloaden us.zip of zip elk land
bestand van die URL daar.
En dan zul je te hebben om te schrijven een command line script in PHP dat is
gaat om open te stellen dat de tekst bestand, itereren over de lijnen,
en vervolgens voor elk van die lijnen doen een insert
in die plaatst tafel in uw MySQL database.
Dus aan het einde van dit proces, zult u heb dat script uiteindelijk draaien
één keer in theorie.
In werkelijkheid zul je waarschijnlijk draaien een paar keer
terwijl het proberen om verschillende bugs te repareren.
>> Uiteindelijk zul je een hebben echt grote databank met duizenden
en duizenden geografische rijen.
Dan ga je dat import zetten script opzij zodra het werkt
en uw database is leuk en correct, en dan
je gaat om verder te gaan om daadwerkelijk de uitvoering van de mashup zelf.
De mashup is gaan kijken een beetje iets als dit.
Bij mashup.cs50.net we hebben een staf oplossing
dat ziet er een beetje iets als dit.
Sterker nog, als ik klik op deze krant pictogram voor Cambridge, Massachusetts,
je zult een draaiende zien icon kort en vervolgens
een geordende lijst, een opsommingstekens lijst van artikels
gerelateerd aan Cambridge, Massachusetts.
Als ik klik op Charlestown, Massachusetts,
Ik zie hetzelfde voor die stad.
En als ik klik op Watertown, Massachusetts,
er zou geen zijn nieuws uit Watertown,
dus je zult iets zien zoals langzaam nieuws dag.
>> Nu, ondertussen, linksboven zijn een aantal bekende Google Maps controles
om u te laten uitzoomen, pan omhoog, omlaag, naar links en naar rechts,
maar ook een zoekvak dat we daar te zetten.
Dus als ik naar, eerlijk gezegd, de enige andere postcode Ik weet het,
90210, zullen we echt zien Beverly Hills, Californië.
Toen klikte het leidt me naar Californië en een hele hoop
van nieuws over Beverly Hills.
Merk nu, ook, wat daar gebeurde.
Als ik deze keer zoeken naar 02138 of zelfs Cambridge Massachusetts komma of een
variant daarvan, krijg je een weinig autocomplete dropdown.
Nu wordt dit met behulp van een plugin voor een bibliotheek genaamd jQuery,
en dat de plugin heet typeahead.
We gewoon door te lezen de documentatie,
downloadde het .js bestand geïntegreerde in de distributie-code, zodat u
Uiteindelijk kan de code te schrijven die vult dat dropdown menu met de auto
selecties of de automatische suggesties.
>> Nu is de verdeelsleutel, hoewel, dat u hebt ontvangen niet bijna net zo veel te doen.
U krijgt de Google Map ingebed, en krijg je de besturing van de links boven,
en je krijgt het zoekvak.
Maar als ik iets typt 02138, zijn geen plaatsen nog niet gevonden.
Dus dat gaat worden één van onze doelen hier.
Bovendien, als je een stap te nemen terug en kijk naar de kaart zelf,
er is geen enkel nieuws.
Zelfs als ik op en slepen, geen markers eigenlijk
verschijnen voor nieuws, want dat uitdaging overblijft voor u als goed.
>> Laten we eens een kijkje nemen dan bij de verdeelsleutel.
Als je eenmaal hebt gedownload pset8.zip en uitgepakt
in uw vhost directory in de CS50 Appliance,
je zult zien dat deze directories hier binnen.
Bin-- die algemeen betekent binaire uitvoerbare programs--
omvat, zoals in pset7, sommige PHP Bestanden die andere bestanden bevatten,
Vervolgens publiek, dat is de bestanden die moeten
publiekelijk toegankelijk zijn Een gebruiker met een browser.
Laten we eens een kijkje nemen in de bin directory, en we zullen
zien dat er een bestand er reeds Import genoemd.
Als we deze openen met gedit, we zullen zien dat, helaas, er is niet veel
daar.
Dat alles is er, hoewel, is een keet aan de bovenkant
waarin wordt aangegeven welke interpreter-- in dit geval PHP--
worden gebruikt om daadwerkelijk voeren dit bestand.
Maar dan waar het zegt TODO is waar je bent
gaat nodig hebben om wat code te schrijven die waarschijnlijk vereist dat de config
bestand dat is in de includes directory zoals we eerder hebben gedaan met PHP-bestanden.
En dan ga je moeten een of andere manier open te stellen
us.text die je vermoedelijk zijn al uitgepakt.
Dan bent u gaat te hebben om itereren over de lijnen in het bestand
wellicht met behulp van een aantal van de functies voorgesteld in de specificatie.
Plaats vervolgens elk van deze lijnen in MySQL-database
Door de query functie die we hebben je weer voorzien met--
of ten minste een variant daarvan in functions.php,
die we zullen zien in slechts een ogenblik.
>> Laten we nu eens sluiten import en ga terug naar onze directory en deze keer gaan in
omvat.
En als ik ls doen daar, zie je drie bestanden heel graag Probleemverzameling 7.
En laten we eens een snelle blik, bijvoorbeeld bij config.php.
Daar, is minder regels dan voorheen, en
lijkt dit bestand bevat constants.php en functions.php.
We gebruiken een iets andere techniek rond deze tijd om daadwerkelijk
specificeren dat deze bestanden zijn ten opzichte naar de huidige directory __ DIR__
vertegenwoordigt welke map deze bestand config.php, is zelf in.
Dus dit is een expliciete manier van specificeren
wat andere bestanden die u wilt vragen.
>> Nu als ik sluit dit bestand en openstellen constants.php plaats,
je een bestand te zien erg denken om Probleemverzameling 7's als goed, zij het
met een andere database genaamd pset8.
Tot slot, in functions.php, we zullen gewoon één functie zien
dit keer genaamd zoekopdracht.
Dit is bijna hetzelfde, behalve wij omgaan fouten deze keer een beetje
anders, maar het is gebruik is hetzelfde als in problemen stelde zeven.
>> Nu gaan we terug in onze pset8 directory, gaan in het openbaar, en daar
als ik ls doet, zul je zien dit-- articles.php, index.html, search.php,
en update.php-- alle bestanden.
En dan is de css fonts, img en js directory heel graag pset7.
>> Laten we eens een kijkje nemen op index.html, hetgeen
gaat echt het zijn toegangspunt tot de Smashup.
Nu in index.html, zie je een hele stelletje koppeling elementen in het hoofd,
in het bijzonder, voor de bootstrap voor onze eigen CSS gevolgd door een hele hoop script
tags voor dingen zoals de kaarten, API zelf, een speciale marker met label
hulpprogramma dat we in de genoemde specificatie is voor u beschikbaar,
jQuery zelf, bootstrap zelf en andere bibliotheek
genaamd underscore die we praten over de spec.
Underscore.js zoals jquery.js is een JavaScript-bibliotheek
dat heeft een hele hoop functionaliteit dat veel mensen in de wereld wens
bestonden in JavaScript zichzelf.
Dus al deze zijn eigenlijk heel populair.
We hebben ook gezegd typeahead die de bibliotheek
doet dat autocomplete dropdown en eindelijk een link naar onze eigen JavaScript.
>> Ondertussen, en misschien Gelukkig, dit mashup
wordt door relatief weinig HTML hier beneden op de bodem.
Merk op dat we een div in hebt opgegeven ons lichaam van klasse-container vloeistof.
Dit, per bootstrap's documentatie, net
betekent dat deze div gaat het vullen viewport of raam volledig van de browser.
>> Ondertussen, daaronder we een div dat is geopend en meteen gesloten
met de unieke ID van de kaart canvas.
Dit is nu van Google Kaarten documentatie
voor de API, waarbij ik moet gewoon een lege div waarin te injecteren,
uiteindelijk, een echte Google Maps.
Maar meer daarover in slechts een beetje.
>> Tot slot is er een vorm binnenkant van hier die
implementeert het tekstvak up linksboven in onze interface voor het zoeken.
Merk op dat we hebben gebruikt een beetje van bootstrap
hier too-- dingen zoals form-inline en vorm-groep.
We hebben de voormalige gegeven unieke ID van de vorm.
En dan, uiteindelijk, ik heb eigenlijk een soort input, die redelijk bekend is,
waarvan de ID q.
Gewoon een conventie.
Q voor query-- konden is er iets geroepen.
En dan is de tijdelijke aanduiding, Ondertussen is de stad, staat,
en de postcode die u misschien herinneren zien in onze mashup demo eerder.
Laten we sluiten dit bestand.
>> Neem nu een kijkje op de PHP-bestanden die wachten en dan de JavaScript-bestanden.
In onze PHP-bestanden, we hebben reeds geïmplementeerd voor u,
bijvoorbeeld updates.
Update.php-- we niet zullen besteden een enorme hoeveelheid tijd op hier-- in een notendop
is het bestand dat onze JavaScript-code gaat
contact op te nemen via AJAX dat asynchrone techniek die is
ingebouwd in Javascript deze dagen dat is gaan om ons in staat te update.php vragen
voor meer informatie.
>> In het bijzonder, op elk gewenst moment de gebruiker de kaart sleept
of voert een zoekopdracht uit dat springt de gebruiker naar een andere locatie,
onze JavaScript-code, als we straks zullen zien, is
gaan noemen update.php en vraag naar 10 of zo markers
binnen de viewport gebaseerde de GPS coördinaten
van de bovenste en onderste hoeken van die kaart.
We kunnen dan opnieuw te bevolken de kaart nu dat de gebruiker het scherm in orde is verhuisd
tot 10 waarschijnlijk nieuwe zien merkers voor verschillende steden.
Ondertussen is dit bestand is uiteindelijk gaan naar een SQL-query uit te voeren
tegen onze database tabel met de naam plaatsen die
zal deze terugkeren 10 of minder plaatsen.
>> Ondertussen, in articles.php, is een bestand dat we in zijn geheel heb geschreven.
Het is zeer vergelijkbaar in geest Probleem Set 7's functie ZOEKEN,
die Yahoo Finance gecontacteerd voor u.
Dit bestand contacten Google Nieuws voor u, uiteindelijk grijpen
een machine leesbare version-- in iets
genaamd RSS met de indeling van het nieuws Cambridge of Beverly Hills
of welke stad u heeft gezocht voor op basis van die geoparameter.
We ontleden dat RSS, dat is gewoon een type opmaaktaal genaamd XML,
en dan eigenlijk wij terug te sturen naar uw browser
en om uw JavaScript-code, in het bijzonder, in een formaat genaamd
JSON, JavaScript Object Notation.
Nu zie je in de specification-- wijzen wij u
hoe kan je eigenlijk zien een aantal van de JSON komende Terug--
dat deze functionaliteit uiteindelijk laat u dus bevolken deze popup menu's
dat wanneer je klikt op een marker op de kaart
je eigenlijk zien een hele hoop kogels, die elk
Verwijzingen naar een artikel.
>> Laten we nu eens een kijkje nemen op een laatste PHP bestand dat, gelukkig, niet
hebben veel gaande on-- gewoon een vrij grote TODO.
Op dit moment is dit bestand verklaart een array met de naam plaatsen.
En dan uiteindelijk prints die array in JSON met de indeling
pretty-printen is het gewoon zo dat dingen zijn makkelijker te debuggen.
Helaas, in de midden is er dit TODO,
waarin wordt gepleit voor u de zoekopdracht databank voor plaatsen die overeenkomen met een geo HTTP
parameter.
>> En, inderdaad, dit gaat een van uw challenges--
om deze functionaliteit te implementeren hier zodat wanneer u contact opnemen met dit bestand met
een URL zoals zoeken. php? geo = iets, uw code zal uiteindelijk terug een JSON
matrix van alle plaatsen in database tabel die overeenkomen met die ingang.
Dus als de gebruiker typt in Cambridge, uw bestand hier search.php
moet uiteindelijk terug een JSON-array voor al de wedstrijden voor Cambridge,
die zou kunnen zijn in Massachusetts maar kon ook ergens anders zijn.
>> Tot slot, laten we een kijkje nemen op twee bestanden die zijn statisch ultimately--
je CSS-bestand en uw JavaScript-bestand.
Als ik in onze CSS directory, er is een hele hoop bestanden daar,
maar de meeste van hen zijn bibliotheken.
Ik ga een kijkje nemen, specifiek, op styles.css,
dat is onze eigen wereldwijde CSS dat is ga deze hele mashup stileren.
Ik laat het aan u door te lezen hierin de opmerkingen, maar, in een notendop,
dit is de CSS die ervoor zorgt dat onze mashup, standaard uit de doos,
ziet er precies zoals we willen het-- met de kaart invullen van het uitzicht haven
en met het zoeken doos op de top linkerkant.
We hebben ook genomen van de vrijheid van stileren dat typeahead dropdown
menu een beetje ook.
>> Het belangrijkste bestand misschien voor dit probleem stellen
is dit laatste, scripts.js.
Binnenkant van je JS directory nog meer bestanden.
Allemaal zijn library bestanden behalve deze ene, scripts.js.
Als we open deze op, laten we onze laatste tour door de functies die
zijn ingebouwd in dit bestand voor u en vraagaandacht
naar Todos die voor ons liggen.
>> Op de top van dit bestand, drie globale variabelen.
Een voor een kaart, die gaat zijn een verwijzing naar onze Google map.
U kunt denken aan het soort als een pointer.
Ondertussen hebben we een andere globale variabele
genaamd info, die lijkt te zijn opslaan van de return waarde van een oproep
om nieuwe google.maps.InfoWindow.
JavaScript ondersteunt voorwerpen die zijn zeer vergelijkbaar in de geest te Struts.
En wat deze lijn voor onze doeleinden doet
is het creëren van een nieuwe info venster in het geheugen en vervolgens
houden rond een referentie daarop in een variabele genaamd Info.
En tussen die, Ondertussen, is het blijkbaar
een lege JavaScript te zijn array met de naam markers.
Al deze krant iconen, of u misschien een ander pictogram helemaal kiezen,
zullen worden opgeslagen uiteindelijk in deze array
zodat we heel gemakkelijk kunnen toevoegen aan de kaart en ze te verwijderen uit de map.
>> Laten we nu eens naar beneden scrollen een klein beetje en whizzkid
door de code die gaat worden uitgevoerd zodra de DOM of document
object model of de pagina zelf is klaar.
Bedenk dat deze syntaxis hier gewoon specificeert
dat de volgende code mag alleen worden uitgevoerd
wanneer de browser klaar het laden van al het andere.
>> Wij verklaren eerst een heleboel stijlen,
die uiteindelijk het stileren de kaart volgens de spec.
Verklaren wij dan een hele hoop opties,
die verder aanpassen van de Google kaart dat we op het punt om te verankeren.
Vervolgens gebruiken we een beetje van jQuery code, Dit wordt uitgelegd in wat meer detail
in de spec, om te grijpen dat element, map-doek
dat we zo uniek geïdentificeerd.
En dan is deze lijn is hier wat lijkt op magische geven ons
een Google-kaart binnen van onze eigen applicatie,
opslaan van een verwijzing hiernaar doordat map met de naam.
>> Tot slot, hier beneden registreren we wat heet een luisteraar.
Denk Terug-- weg, weg Terug-- tot week nul in CS50
Toen we keken naar Scratch en haar steun door middel van een wandeling
door voor dingen geroepen evenementen en uitzendingen.
Je zou niet hebben gebruikt het zelf, maar het is
een mechanisme waarbij een browser casu
kan onze aandacht te krijgen wanneer het klaar om enkele code daadwerkelijk uit te voeren.
In dit geval gaat het om te luisteren om de kaart voor een evenement genaamd inactief.
Dit betekent dat de browser klaar met het laden van de Google map.
Op dit moment wel een functie configure moet uiteindelijk
uitgevoerd.
Die functie, configureren, we zullen zien, is geschreven door ons.
>> Nu hier beneden is een functie dat helaas
is gewoon een TODO markering toevoegen.
Per de spec. je gaat nodig hebben om de code die eigenlijk te schrijven
voegt een marker-- of het eruit ziet als een krant, of een duim Tack,
of iets else-- naar de Google map.
Hier is nu die functie riep configure.
Ik laat het aan u om te lezen door deze in meer detail,
maar beseffen dat we voegen een bos meer Luisteraars
zodat we de code kan uitvoeren wanneer de gebruiker klikt op en trekt de kaart.
We hebben ook de code in hier dat geïnitialiseerd dat typeahead plugin
zodat de dropdown menu eigenlijk werkt.
>> Maar laten we focussen op slechts een paar plaatsen hierin.
Specifiek, dit te doen hier.
Ik zal zich naar de online documentatie en de specificatie
voor hoe je in deze TODO vullen.
Maar in een notendop, deze bibliotheek typeahead kunt u doorgeven
in wat algemeen bekend staat als een sjabloon, die enkele variabele placeholders heeft
zeer vergelijkbaar in de geest om printf's%. * s.
Maar in dit geval, de sjabloon per de spec
kunt u opgeven welke variabelen je wilt
injecteren van gegevens die is gekomen terug van iets als de PHP
bestanden die u hebt geschreven die worden emitting JSON-uitgang.
>> Nu hier beneden realiseren dat we luisteren naar typeahead selecties
wanneer de gebruiker geleidt een zoeken en selecteert een waarde.
Dit is hoe we zijn eigenlijk gaan voor die te luisteren
en uitvoeren van een code als resultaat.
Daarna gaan we verder om te configureren de mashup maar een klein beetje.
En, uiteindelijk, noemen we Deze functie-update.
Het bijwerken van de markeringen op het scherm.
Meer daarover in slechts een moment.
Inmiddels zijn er een paar kleine functies in hier.
Een daarvan is hideInfo welke eenvoudigweg sluit de InfoWindow.
Een andere functie hier, die uiteindelijk zal niet al te lang zijn, te verwijderen markers.
Dat gaat om ongedaan te maken wat uw add marker functie doet.
En dan hier beneden is zoek.
En dit is interessant, omdat we de JavaScript-code die is geschreven
naar search.php spreken over de server en krijgt terug wat respons.
>> U, natuurlijk, zal hij nog altijd moeten implementeren search.php,
maar we hebben geïmplementeerd de JavaScript-code dat is
gaan om daadwerkelijk te behandelen uitvoeren zoekt uit dat tekstvak.
In het bijzonder, bericht dat deze functie hier,
zoeken, doet oproep search.php door een methode genaamd
krijgen JSON, die we zagen in de collegezaal.
En de syntax hier is een beetje anders
vanaf lezing in dat we gebruiken jQuery zogenaamde belofte interface.
Meer daarover in de spec.
Dit betekent simpelweg onze doeleinden nu er
zijn twee speciale functies we moet bellen met puntnotatie
hier onmiddellijk na het aanroepen krijgen JSON.
Een daarvan is gedaan genoemd.
Een heet mislukken.
U kunt denken aan deze het succes handler
en het falen handler net in het geval er iets misgaat.
>> Laten we nu eens kijken naar de laatste paar functies in dit bestand.
Hier beneden is een functie genaamd showinfo, die
toont info in een van die weinig info ramen die
opduikt wanneer de gebruiker een marker klikt.
Hier beneden verder is die update-functie
die wij hebben uitgevoerd voor u.
Het bepaalt de grenzen van de kaart.
Wat zijn de GPS-coördinaten van de noordoosten en zuidwesten hoeken hier.
We hebben een aantal HDP parameters voorbereid hier en dan gaf ze uiteindelijk
naar update.php, die we hebben eveneens uitgevoerd voor u.
Die uiteindelijk krijgt terug wat JSON uit het bestand met de naam update.php
en verwijdert vervolgens elke markeringen op het scherm
en dan doorloopt de gegevens die terug is gekomen
uit update.php, die weer is gewoon een JSON array.
En dan voegt het uiteindelijk een marker voor elk van deze plaatsen, behandeling falen
of fouten die heel goed kan gebeuren.
>> Nu alleen maar om u een voorproefje van hoe je geeft zou kunnen gaan over het debuggen van dit project,
besef dat ik in hebt geopend vooruit dit tabblad hier om deze URL,
pset8 / articles.php? geo = 02138.
Nu, weer, artikelen over PHP implementeerden we voor u
dus dit is niet zozeer wat je zult gebruiken
te debuggen, maar eerder de techniek.
Merk op dat ik heb gezocht naar Cambridge postcode hier,
en ik heb terug gekregen, inderdaad, een JSON scala van JSON objecten binnenkant van die
zijn twee keys-- koppeling en de titel.
>> Dus deze functionaliteit werkt al voor u.
Maar deze techniek handmatig gaan naar een URL als dit voor iets als
search.php? geo = cambridge of 02138 of ongeacht de gebruiker heeft getypt moet
onschatbare waarde als je, jezelf, probeer om erachter te komen of waarom
search.php werkt of niet.
>> Uiteindelijk dan, je hebt een paar TODOS voor je.
Je gaat naar de eerste werktuigen dat import script dat
leest in us.text in uw database.
Je bent dan gaat nodig hebben te implementeren search.php
zodat het zich gedraagt ​​precies zoals aangegeven.
U bent dan van plan te willen zich te richten op scripts.js
en uiteindelijk implementeert die paar Todos,
waaronder voor configure en dat sjabloon,
markers toevoegen, verwijderen markers, en Vervolgens duren, but not least, een
persoonlijk tintje.
>> Zodra u uw mashup werkende vrij als de onze, het doel bij de hand
is voor u om een ​​persoonlijke toe te voegen aanraken om uw mashup,
of het esthetische of functionele.
Neem de mashup ooit zo iets naar het volgende niveau.
Zolang je duw jezelf voorbij uw vertrouwdheid met de spec zelf
en halen een techniek nieuw, zelfs al is het maar
iets esthetisch zoals het veranderen van de lay-out van de kaart die u gebruikt,
de ruimte die we verwachten zal worden voldaan.
Dat is dan Probleemverzameling 8 Mashup.
Stay tuned voor meer in de specificatie en het beste van geluk
het aanpakken van deze, uw laatste CS50 probleem ooit ingesteld.
>> [Muziek]