[MUSIK SPELA] 

DAVID J. MALAN: Hej. Låt oss ta en promenad genom Problem Set 8 Mashup, som kommer att utmana dig att utnyttja element för Google Maps med inslag från Google News och mäsk dem tillsammans i ett webb applet som tillåter en användare att söka en karta för nyheter lokalt till specifika städer, städer och postnummer. För att göra detta, kommer vi att integrera viss HTML, CSS, PHP, SQL, JavaScript, och en teknik allmänt känd som AJAX för att skapa denna uppslukande användarupplevelse. 

Låt oss först för Google Maps själv. Detta, naturligtvis, är kanske ett välbekant gränssnitt. Men det visar sig att Google Maps ger också en API-- ansökan programmering interface-- via vilken du kan ta delar av Google Maps och integrera dem i dina egna applikationer. Faktiskt, genom hela denna process, du kommer att hitta ett par webbadresser särskilt hjälp att nämns i specifikation för Problem Set 8, specifikt detta Komma igång Guide eller Utvecklarhandbok för Google Maps API Version 3 samt som Google Maps JavaScript API v3 referens, vilket är en lite mer svårbegripliga att läsa men faktiskt har alla den lägre nivån information om vilka funktioner eller metoder och objekt och egenskaper och händelser faktiskt kommer med API, mycket lika i anden till [OHÖRBAR] sidor. 

Om vi ​​nu tar en titt på Google News, kommer du kanske se ett bekant gränssnitt här. Men det visar sig att du kan också söka Google Nyheter för specifika geografiska via en HTTP parameter kallad geo. I själva verket om jag zooma in här uppe, ser du att Jag är på news.google.com/news/section?geo=02138. Och, ja, om jag zooma ut, ser du att jag är tittar på en sida med en hel massa synpunkter om Cambridge, Massachusetts. 

Under tiden, om jag faktiskt ändra URL inte vara ett postnummer som denna, men något lite stökigare som Cambridge, + Massachusetts, där plus är det sätt du koda ett mellanslag i en URL och tryck Enter, du kommer att se att jag faktiskt se nästan samma nyheterna. Kanske är det lite annorlunda eftersom Cambridge faktiskt har flera postnummer. Nu hur skulle jag kunna veta det och, faktiskt, hur kunde jag på något sätt knyta städer till postnummer i fall jag vill tillåta användaren att slå upp heller? Tja, visar det sig att det finns en hemsida där ute som heter geonames.org vilket är ett initiativ för att ha en fritt tillgänglig databas med alla sorters geografisk information, inte bara för USA, utan även för andra länder. Faktum är att om jag går till denna URL här, vilket nämns också i problemet inställd specifikation, kommer du att se det tre notering av en hel massa zip-filer någon som kan laddas ner av dig. Faktum är att för detta problem inställd du kommer att hämta us.zip. Nu i den här filen, finns en hel gäng data i textformat. Filerna är mycket lik en CSV-- kommaseparerade värden file-- men det faktiskt använder flikar för att avgränsa områden. Nu, under tiden, om man tittar här på vad jag har markerat, fälten i den här filen går att vara saker som landskoder, postnummer, ortnamn, och sedan, i någon form eller andra, stater och län, samhällen och mycket mer. I själva verket har jag redan hämtat den här filen i förväg. Låt mig gå vidare och öppna den här-- us.text-- och, faktiskt, kommer du se om jag bläddra ner till linje 16.792 ser du några poster för Cambridge, Massachusetts och dess olika postnummer. Vad du ser också att det finns i länet, några siffror som jag inte riktigt förstå, men också alla vägen till höger, Vissa GPS coordinates-- latitud och longitud. Detta är bra eftersom en av funktionerna i Google Maps API är förmågan att detektera där du är geografiskt i termer av GPS-koordinater. 

Nu börjar lista ut hur man börja knyta dessa saker tillsammans. Vi har gett dig en hel gäng distributionskoden, samt MySQL-databas. I själva verket om jag drar en phpMyAdmin har redan importerats, som ni snart kommer, pset8.SQL, ser du en MySQL tabell som ser ut så här, en ID-fält, land kod, postnummer, ort namn och mer. De typer av alla dessa kolumner Jag härstammar helt enkelt genom att läsa readme.text fil här som specificeras huruvida ett fält är ett heltal, eller VARCHAR eller liknande. 

Så vi har skapat denna tabell för du och gett dig de SQL-kommandon ska köras för att skapa det tabell i din egen databas, men det finns faktiskt inga uppgifter i det ännu. Snarare, du kommer att behöva hämta us.zip eller något lands zip fil från den adressen där. Och då du kommer att behöva skriva en kommandorad skript i PHP som är kommer att öppna upp den texten fil, iterera över sina linjer, och därefter för var och en av dessa linjer gör en insats in som placerar bord i din MySQL-databas. Så i slutet av denna process, kommer du har kört skriptet slutändan bara en gång i teorin. I verkligheten kommer du förmodligen köra det ett gäng gånger samtidigt som man försöker åtgärda olika fel. 

Ytterst, du kommer att ha en riktigt stora databas med tusentals och tusentals geografiska rader. Då du kommer att sätta den import script åt sidan när det funkar och databasen är trevligt och korrekt, och sedan du kommer att gå vidare till faktiskt genomförande av mashup självt. Den mashup kommer att se en liten sak som denna. På mashup.cs50.net, vi har en personal lösning som ser lite ut ungefär så här. Faktum är att om jag klickar på den här tidningen ikon för Cambridge, Massachusetts, ser du en snurr icon kort och sedan en ordnad lista, ett punktlista över artiklar relaterade till Cambridge, Massachusetts. Om jag klickar på Charlestown, Massachusetts, Jag ser samma för den staden. Och om jag klickar på Watertown, Massachusetts, det kanske inte finns någon nyheter från Watertown, så du får se något som långsam nyhetsdag. 

Nu, under tiden, uppe till vänster är några bekanta Google Maps kontroller att låta dig zooma ut, panorera upp, ner, vänster och höger, men också en sökruta som vi lagt där. Så om jag söker efter, ärligt talat, den enda andra postnummer jag vet, 90210, vi faktiskt se Beverly Hills, Kalifornien. När du klickar det leder mig till Kalifornien och en hel massa av nyheter om Beverly Hills. Nu märker också vad som hände där. Om jag denna gång sökandet efter 02138 eller ens Cambridge comma Massachusetts eller något variant därav, får du en lite Komplettera automatiskt dropdown. Nu använder en plugin för ett bibliotek som heter jQuery, och att plugin kallas typeahead. Vi läser bara igenom dokumentationen, hämtat .js fil integrerad i distributionskoden så att du i slutändan kan skriva kod som fyller den rullgardinsmeny med auto markeringar eller auto förslag. 

Nu distributionskoden, dock att du fick inte göra nästan lika mycket. Du får Google Map inbäddade, och du får kontrollerna upp till vänster, och du får sökrutan. Men om jag skriver något i stil 02138, inga bostäder hittades ännu. Så det kommer att bli ett av våra mål här. Dessutom, om du tar ett steg tillbaka och titta på själva kartan, det finns inga nyheter alls. Även om jag klickar och dra, inga markörer faktiskt visas för nyheter eftersom det Utmaningen är kvar för dig också. 

Låt oss ta en titt sedan vid distributionskoden. När du har hämtat pset8.zip och uppackade det i din vhost katalogen i CS50 Appliance, du ser dessa kataloger här inuti. Bin-- som i allmänhet står för binär för körbara programs-- omfattar, som i pset7, vissa PHP filer som andra filer innehåller, då allmänheten, vilket är de filer som behöver att vara tillgänglig för allmänheten till en användare med en webbläsare. Låt oss ta en titt på bin, och vi ska ser att det finns en fil det redan kallas Importera. Om vi ​​öppnar detta med gedit, vi får se att det tyvärr finns det inte mycket där. Allt som finns där, men, är en shebang på toppen som anger vilka interpreter-- i detta fall PHP-- bör användas för att faktiskt köra den här filen. Men sedan där det står TODO är där du är kommer att behöva skriva någon kod som förmodligen kräver config fil som är i inkluderar katalogen som vi har gjort tidigare med PHP-filer. Och då du kommer att måste på något sätt öppna upp us.text som ni förmodligen har uppackade redan. Då du kommer att behöva iterera över raderna i den filen, kanske använda några av de funktioner föreslagits i beskrivningen. Sätt sedan var och en av dem linjer till MySQL databas genom att använda frågefunktionen, som Vi har återigen gett dig with-- eller åtminstone en variant därav i functions.php, som vi får se på bara ett ögonblick. 

Nu stänger import och gå tillbaka till vår katalog och den här gången går in i omfattar. Och om jag gör ls där, kommer du att se tre filer ganska gillar Problem Set 7. Och låt oss ta en snabb titt, till exempel vid config.php. I det är färre linjer än tidigare, och det verkar denna fil innehåller constants.php och functions.php. Vi använder en något annorlunda Tekniken här gången att faktiskt ange att dessa filer är relativa till den aktuella katalogen __ DIR__ representerar den katalog detta fil, config.php, själv är i. Så detta är ett mer explicit sätt att ange vilka andra filer du vill kräva. 

Nu om jag stänger den här filen och öppna upp constants.php stället, ser du en fil påminner mycket till Problem Set 7: s också, om än med en annan databas som kallas pset8. Slutligen, i functions.php, vi får se bara en funktion denna gång heter fråga. Detta är nästan samma förutom vi hanterar fel denna gång runt lite annorlunda, men det är användning är samma som i problem satt sju. 

Nu går vi tillbaka till vårt pset8 katalog, gå in allmänheten, och i det om jag gör ls ser du this-- articles.php, index.html, search.php, och update.php-- alla filer. Och sedan css teckensnitt, img, och js katalogen riktigt gillar pset7. 

Låt oss ta en titt på index.html, vilket är kommer att bli riktigt den inkörsport till smashup. Nu i index.html, ser du en hel gäng länkelement i huvudet, specifikt för bootstrap för vår egen CSS följt av en hel massa manus taggar för saker som kartor, API själv, en speciell markör med etikett verktyg som vi nämnde i Specifikationen är tillgänglig för dig, jQuery självt, bootstrap själv, och ett annat bibliotek kallas streck som vi talar om i spec. Underscore.js som jquery.js är ett JavaScript-bibliotek som har en hel massa funktioner att många människor i världen önskan existerade i JavaScript sig. Så alla dessa är faktiskt ganska populär. Vi har också nämnt typeahead som är bibliotek som gör att automatisk komplettering dropdown och slutligen en länk till vår egen JavaScript. 

Under tiden, och kanske tack och lov, denna mashup drivs av relativt lite HTML här nere på botten. Observera att vi har angett en div i vår kropp class containervätska. Detta, per bootstrap s dokumentation, bara innebär att denna div kommer att fylla visnings eller webbläsarens fönster helt. 

Samtidigt under att vi har en div som har öppnat och omedelbart stängas med ett unikt ID för kartvyn. Detta är nu från Google Kartor dokumentation för sin API, varvid jag behöver bara ha en tom div in för att injicera, i slutändan, en faktisk Google Maps. Men mer om det på bara en bit. 

Slutligen finns det en form insidan av här som implementerar textrutan uppe till vänster i vårt gränssnitt för sökning. Observera att vi har använt en bit av bootstrap Här too-- saker som form inline och formgrupp. Vi har gett den tidigare unikt ID form. Och sedan, i slutändan, jag har faktiskt en ingång typ, vilket är ganska bekant, vars ID är q. Bara en konvention. Q för query-- kunde ha kallats något. Och sedan platshållaren, Samtidigt är stad, stat, och postnummer som du kanske minns ser i vår mashup demo tidigare. Låt oss avsluta detta ärende. 

Nu kan du titta på PHP-filer som väntar och sedan de JavaScript-filer. I våra PHP-filer, vi har redan genomförts för dig, Exempelvis uppdateringar. Update.php-- vi inte kommer att spendera en stor mängd tid på här-- i ett nötskal är filen som vår JavaScript-kod går att kontakta via AJAX som asynkron teknik som är inbyggd i JavaScript dessa dagar som är kommer att ge oss möjlighet att ställa update.php för mer information. 

Specifikt, när som helst användaren drar kartan eller utför en sökning som hoppar användaren till en annan plats, vår JavaScript-kod, som vi snart får se, är kommer att kalla update.php och be om 10 eller så markörer inom visningsbaserade på GPS-koordinater av toppen och botten hörnen i kartan. Vi kan då återbefolka kartan nu när användaren har flyttat skärmen i ordning att se 10 förmodligen nya markörer för olika städer. Samtidigt är den här filen i slutändan kommer att köra en SQL-fråga mot vår databas tabell som kallas platser som kommer att återvända dem 10 eller färre platser. 

Under tiden, i articles.php, är en annan fil vi har skrivit i sin helhet. Det är mycket lik i anden till Problem Set 7: s LETAUPP funktion, vilket kontaktade Yahoo Finance för dig. Denna fil kontakter Google Nyheter för dig, i slutändan ta tag en maskinläsbar version-- i något kallas RSS format-- av nyheterna för Cambridge eller Beverly Hills eller vad staden du har sökt för utifrån det geoparameter. Vi tolka det RSS, som ligger bara en typ av märkspråk som kallas XML, och sedan vi faktiskt returnera den till din webbläsare och till din JavaScript-kod, specifikt, i ett format som kallas JSON, JavaScript Object Notation. Nu kommer du att se i specification-- vi peka dig på hur du faktiskt kan se några av JSON kommande back-- att denna funktionalitet i slutändan låter dig fylla dessa popup-menyer så att när du klickar på på en markör på kartan du faktiskt se en hel drös av kulor, som var och en länkar till en artikel. 

Nu ska vi ta en titt på en sista PHP-fil som lyckligtvis inte har mycket att gå on-- bara en ganska stor TODO. Just nu denna fil förklarar en array kallas ställen. Och sedan slutligen utskrifter den arrayen i JSON format-- pretty-skriver ut det bara så att saker är lättare att felsöka. Olyckligtvis, i mitten finns här TODO, vilket kräver att du kan söka på databas för platser som matchar en geo HTTP parameter. 

Och, ja, det kommer att vara en av dina challenges-- att genomföra denna funktionalitet här så att när du kontaktar den här filen med en webbadress som sökning. php? geo = något, koden i slutändan kommer att återvända en JSON uppsättning av alla de platser i ditt databastabell som matchar den ingången. Så om användaren skriver i Cambridge, din fil här search.php bör på sikt returnera en JSON array för alla matcher för Cambridge, vilket kan vara i Massachusetts men kan bli ännu någon annanstans. 

Slutligen, låt oss ta en titt på två filer som är statiskt ultimately-- din CSS-fil och din JavaScript-fil. Om jag går in i vår CSS katalog, det finns en hel massa filer där, men de flesta av dem är bibliotek. Jag ska ta en titt, specifikt, vid styles.css, som är vår egen globala CSS som är kommer att stilisera hela denna mashup. Jag lämnar det till dig att läsa igenom kommentarerna här, men, i ett nötskal, Detta är den CSS som ser till att våra mashup, som standard ur lådan, ser ut precis så som vi vill det-- med kartan fyller granskningsporten och med sökningen rutan upp längst upp till vänster. Vi har också tagit mig friheten att stylizing att typeahead dropdown Menyn lite också. 

Den viktigaste filen kanske för detta problem inställd är detta sista, scripts.js. Insidan av din JS katalog är ännu fler filer. Alla är biblioteksfiler utom för detta, scripts.js. Om vi ​​öppnar upp det här, låt oss ta vårt slutliga tur genom de funktioner som är inbyggda i den här filen för dig och samtals uppmärksamhet till de todos som ligger framför oss. 

Högst upp i den här filen, är tre globala variabler. En för en karta, som kommer att vara en referens till vår Google-karta. Du kan tänka på det typ av som en pekare. Samtidigt har vi annan global variabel kallas info, vilket verkar vara lagra returvärdet för ett samtal till nya google.maps.InfoWindow. JavaScript stöder föremål som är mycket lika i anden till Struts. Och vad denna linje för våra syften gör skapar en ny info fönster i minnet och sedan hålla runt en referens därtill i en variabel som kallas info. Och i mellan dem, Samtidigt är det som visas att vara en tom JavaScript array kallas markörer. Alla dessa ikoner tidnings, eller om du kanske väljer en annan ikon helt och hållet, kommer att lagras slutligen i denna array så att vi lätt kan lägga till kartan och ta bort dem från kartan. 

Nu bläddra ner lite och vina genom den kod som kommer att bli verkställas så snart som DOM eller dokumentet objektmodell eller själva sidan är klar. Minns att denna syntax här helt enkelt specificerar att följande kod bör endast verk när webbläsaren är klar laddar allt annat. 

Vi först deklarera en massa stilar, som hamnar stylizing kartan som per spec. Vi förklarar sedan en massa alternativ, vilket ytterligare anpassa Google karta som vi håller på att bädda. Vi använder sedan en bit av jQuery-kod, vilket förklaras i lite mer i detalj i spec, att greppa det elementet, map-duk att vi så identifieras. Och sedan denna linje här är vad som verkar magiskt ge oss en Google-karta inuti vår egen ansökan, lagra en hänvisning till detta i den variabel som heter kartan. 

Slutligen, här nere registrera vi vad som kallas en lyssnare. Tänk back-- sätt, sätt back-- till vecka noll i CS50 När vi tittade på Scratch och sitt stöd genom en promenad igenom för saker som kallas händelser och sändningar. Du kanske inte har använt det själv, men det är en mekanism genom vilken en webbläsare i detta fall kan få vår uppmärksamhet när det är redo att faktiskt köra lite kod. I det här fallet, det kommer att lyssna till kartan för en händelse som kallas tomgång. Detta innebär att webbläsaren har färdigt laddar Google map. Vid denna punkt en funktion som kallas configure bör slutligen exekveras. Den funktionen, konfigurera, vi får se, är skriven av oss. 

Nu här nere är en funktion som tyvärr är bara en TODO add markör. Per spec. du kommer att behöva att skriva kod som faktiskt lägger till en marker-- huruvida det ser som en tidning, eller en tumme please, eller något else-- till Google-karta. Här nu är att funktionen kallas configure. Jag lämnar det till dig att läsa genom detta mer i detalj, men inser att vi lägger ett gäng fler lyssnare så att vi kan köra kod när användaren klickar på och drar kartan. Vi har även kod i här att initialiserar att typeahead plugin så att dropdown Menyn faktiskt fungerar. 

Men låt oss fokusera på bara en par ställen häri. Specifikt för detta göra här. Jag ska skjuta till nätet dokumentation och specifikation för hur man fyller i denna TODO. Men i ett nötskal, detta bibliotek typeahead tillåter dig att passera i vad som allmänt känt som en mall, som har några rörliga platshållare mycket i samma anda som printf s%. * s. Men i detta fall, den mall per spec kan du ange vilka variabler som du vill att injicera från data som har kommit tillbaka från något som PHP filer som du har skrivit som avger JSON utgång. 

Nu här nere inse att vi är lyssna efter typeahead val när användaren faktiskt genomför en sökning och väljer ett värde. Det är så vi är faktiskt kommer att lyssna efter det och köra lite kod som följd. Sen fortsätter vi att konfigurera mashup bara lite. Och, slutligen, kallar vi denna uppdateringsfunktionen. Det uppdaterar markörerna på skärmen. Mer om det på bara ett ögonblick. Samtidigt finns det ett fåtal små funktioner i här. Varav en är hideInfo som helt enkelt stänger InfoWindow. En annan funktion här, vilket i slutändan kommer inte vara för lång, ta bort markörer. Det kommer att ångra vad ditt tillägg markör funktionen gör. Och sedan här nere är sökning. Och den här är intressant eftersom vi har skrivit JavaScript-kod som är ska prata med search.php på server och få tillbaka en del svar. 

Du, naturligtvis, kommer fortfarande behöver för att genomföra search.php, men vi har genomfört JavaScript-kod som är kommer att hantera faktiskt utför söker sig från textrutan. Särskilt meddelande att denna funktion här, sök, inte ringa search.php genom en metod som kallas få JSON, som vi såg i föreläsningen. Och syntaxen här är lite annorlunda från föreläsning i att vi använder jQuery s.k. löfte gränssnitt. Mer om det i spec. Detta betyder helt enkelt för vår ändamål nu att det är två specialfunktioner vi behöver ringa med punktnotation här omedelbart efter ringer få JSON. En heter gjort. En heter misslyckas. Du kan tänka på dessa som framgången handler och misslyckandet handler bara om något går fel. 

Låt oss nu titta på det sista par funktioner i den här filen. Här nere är en funktion kallas Show, vilket visar info i en av dem lite info fönster som dyker upp när användaren klickar på en markör. Här nere vidare är att uppdateringsfunktion att vi har genomfört för dig. Den bestämmer gränserna för kartan. Vilka är GPS-koordinaterna för dess nordost och sydväst hörn här. Vi har förberett några HDP parametrar här och sedan passerade dem i slutändan att update.php, vilket vi har även implementeras för dig. Som i slutändan får tillbaka en del JSON från filen heter update.php och därefter avlägsnar alla markörer på skärmen och sedan itererar över de data som har kommit tillbaka från update.php, vilket återigen är bara en JSON array. Och då är det i slutändan lägger till en markör för var och en av de platserna, hantering misslyckande eller fel som kan mycket väl hända. 

Nu är det bara att ge dig en smak av hur du kan gå om felsökning detta projekt, inser att jag har öppnat i avancera denna flik här till denna URL, pset8 / articles.php? geo = 02.138. Nu, igen, artiklar om PHP vi genomfört för dig så det är inte så mycket vad du kommer att använda att felsöka, utan snarare tekniken. Observera att jag har sökt efter Cambridges postnummer här, och jag har fått tillbaka, faktiskt, en JSON matris med JSON-objekt inuti vilket är två keys-- länk och titel. 

Så denna funktionalitet arbetar redan för dig. Men denna teknik att manuellt gå till en webbadress som denna för något liknande search.php? geo = Cambridge eller 02138 eller oavsett användaren har skrivit in bör visa sig ovärderligt när du själv prova att räkna ut exakt om varför search.php fungerar eller inte. 

Ytterst då, har du några todos framför dig. Du kommer att första redskap att import skript som läser in us.text i din databas. Du är sedan kommer att behöva att genomföra search.php så att den beter sig exakt som angetts. Du är sedan kommer att vilja att fokusera på scripts.js och slutligen genomför de par Todos, även för configure och att mallen, lägga till markörer, ta bort markörer, och sedan sist, men inte minst, en personlig touch. 

När du har din mashup arbets riktigt som vårt, målet till hands är för dig att lägga till en personlig Rör till din mashup, oavsett om det är estetisk eller funktionell. Ta mashup någonsin så något till nästa nivå. Så länge du skjuta dig själv bortom din förtrogenhet med spec själv och plocka upp en teknik nytt, även om det bara något estetiska som att ändra layout av kartan som du använder, omfattningen som vi förväntar oss kommer att bli nöjd. Det är då Problem Set 8 Mashup. Håll utkik efter fler i specifikation och lycka tackla detta, din sista CS50 problem inställd någonsin. 

[MUSIK SPELA]