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