[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]