[MUSIC SPILLE] 

DAVID J. MALAN: Hei. La oss ta en spasertur gjennom Problem Set 8 Mashup, som kommer til å utfordre deg til trekke på elementer for Google Maps med elementer fra Google News og mos dem sammen til en web-applet som lar brukeren søke et kart for nyheter lokalt til bestemte byer, byer og postnummer. For å gjøre dette, skal vi integrere noen HTML, CSS, PHP, SQL, Javascript, og en teknikk vanligvis kjent som AJAX for å skape denne oppslukende brukeropplevelse. 

La oss først for Google Maps selv. Dette er selvfølgelig er kanskje et velkjent grensesnitt. Men det viser seg at Google Maps gir også en API-- søknad programmering interface-- via som du kan ta elementer av Google Maps og integrere dem i dine egne applikasjoner. Faktisk, i hele denne prosessen, du kommer for å finne et par webadresser spesielt nyttig at er nevnt i spesifikasjon for Problem Set 8, spesielt denne Komme i gang Veilede eller utviklerveiledningen for Google Maps API versjon 3, så vel som Google Maps Javascript API v3 referanse, som er et litt mer uforståelige å lese men har faktisk alle de lavere nivå detaljer om hvilke funksjoner eller metoder og objekter og egenskaper og hendelsene faktisk kommer med API, svært like i ånden til [uhørbart] sider. 

Nå hvis vi tar en titt på Google News, vil du kanskje se et kjent grensesnitt her. Men det viser seg at du kan også søke Google News for bestemte geografiske områder via en HTTP parameter kalt geo. Faktisk, hvis jeg zoome inn opp her, vil du se at Jeg er på news.google.com/news/section?geo=02138. Og, ja, hvis jeg zoome ut, vil du se at jeg er ser på en side med en hel haug med synspunkter om Cambridge, Massachusetts. 

I mellomtiden, hvis jeg faktisk endre URL ikke å være et postnummer som dette, men noe litt Messier som Cambridge, + Massachusetts, der pluss er måten du koder en mellomromstegnet i en URL og trykk Enter, vil du se at jeg faktisk se nesten de samme nyhetene. Kanskje det er en litt annerledes fordi Cambridge faktisk har flere postnumre. Nå hvordan skulle jeg vite det og, faktisk, hvordan kunne jeg liksom knytte byer og tettsteder til postnumre i tilfelle jeg vil tillate brukeren å slå opp heller? Vel, det viser seg at det er et nettsted der ute kalt geonames.org som er et initiativ for å få en fritt tilgjengelig database over alle slags geografisk informasjon, ikke bare for USA, men også for andre land også. Faktisk, hvis jeg går til denne nettadressen her, som er også nevnt i oppgavesettet spesifikasjonen, vil du se det tre oppføring av en hel haug med zip-filer noen som kan lastes ned av deg. Faktisk, for dette oppgavesettet du kommer til å laste ned us.zip. Nå innenfor denne filen, er en hel haug av data i tekstformat. Filene som er svært lik en CSV-- .csv file-- men det faktisk bruker kategoriene for å avgrense felt. Nå, i mellomtiden, hvis du ser her hva jeg har uthevet, feltene i denne filen skal å være ting som landkoder, postnummer, stedsnavn, og deretter, i en eller annen form eller andre, stater og fylker, lokalsamfunn, og mer. Faktisk har jeg allerede lastet ned denne filen på forhånd. La meg gå videre og åpne den her-- us.text-- og, faktisk, vil du se om jeg bla ned til linje 16 792 du vil se noen poster for Cambridge, Massachusetts og dets ulike postnummer. Det du også se det er fylket, noen tall som jeg egentlig ikke liker forstå, men også alle veien på høyre side, noen GPS coordinates-- breddegrad og lengdegrad. Dette er bra fordi en av funksjonene i Google Maps API er evnen til å detektere hvor du er geografisk i form av GPS-koordinater. 

La oss nå begynne å finne ut hvordan du begynne å knytte disse tingene sammen. Vi har gitt deg en hel haug med distribusjon kode, samt MySQL database. Faktisk, hvis jeg trekker en phpMyAdmin ha allerede importert, som du snart vil, pset8.SQL, vil du se en MySQL tabell som ser ut som dette, et ID-feltet, country kode, postnummer, stedsnavn og mer. Typene alle de kolonner jeg avledet rett og slett ved å lese readme.text fil her som er spesifisert om et felt er et helt tall, eller varchar eller lignende. 

Så vi har laget dette bordet for deg og gitt deg de SQL-kommandoer for å utføre for å skape den bord i din egen database, men det er faktisk ingen data i det ennå. Heller, du er nødt til å laste us.zip eller ethvert lands zip fil fra denne nettadressen der. Og da er du nødt til å skrive en kommandolinje skript i PHP som er kommer til å åpne opp som tekst fil, iterere over sine linjer, og deretter for hver av disse linjene gjør en innsats inn som plasserer bordet i din MySQL database. Så på slutten av denne prosessen, vil du har kjørt skriptet slutt bare en gang i teorien. I realiteten vil du sannsynligvis kjøre den en rekke ganger mens du prøver å fikse diverse bugs. 

Til syvende og sist, er du nødt til å ha en virkelig stor database med tusenvis og tusenvis av geografiske rader. Deretter kommer du til å sette det import script til side når det fungerer og databasen din er fin og riktig, og deretter du kommer til å gå videre til faktisk implementere mashup selv. Mashup kommer til å se litt noe sånt som dette. På mashup.cs50.net, vi har en stab løsning som ser litt noe sånt som dette. Faktisk, hvis jeg klikker på denne avis ikon for Cambridge, Massachusetts, du får se et spinnende ikon raskt, og deretter en ordnet liste, en punktliste over artikler relatert til Cambridge, Massachusetts. Hvis jeg klikker på Charlestown, Massachusetts, Jeg vil se den samme for den byen. Og hvis jeg klikker på Watertown, Massachusetts, det kan ikke være noen nyheter fra Watertown, så vil du se noe som sakte nyheter dag. 

Nå, i mellomtiden, øverst til venstre er noen kjente Google Maps kontroller å la deg zoome ut, pan opp, ned, til venstre og høyre, men også en søkeboks som vi satt der. Så hvis jeg søker etter, ærlig, den eneste andre postnummer jeg vet, 90210, får vi faktisk se Beverly Hills, California. Når klikket det fører meg til California og en hel haug av nyheter om Beverly Hills. Nå legger merke til, også, hva som skjedde der. Hvis jeg denne gang søk etter 02138 eller til og med Cambridge komma Massachusetts eller noen variant av denne, får du en lite autofullfør nedtrekksmenyen. Nå dette er å bruke en plugin for et bibliotek kalt jQuery, og at plugin kalles typeahead. Vi bare lese gjennom dokumentasjonen, lastet ned JS-fil integrert i fordelingen koden slik at du til slutt kan skrive koden som fyller det nedtrekksmenyen med auto valg eller auto forslag. 

Nå fordelingen kode, men at du mottok gjør ikke på langt nær så mye. Du får Google Map innebygd, og du får kontrollene øverst til venstre, og du får søkeboksen. Men hvis jeg skriver noe sånt 02138, er ingen steder funnet ennå. Så det kommer til å bli ett av våre mål her. Dessuten, hvis du tar et skritt tilbake og se på selve kartet, det er ingen nyheter hodet. Selv om jeg klikker og dra, ingen markører faktisk vises for nyheter fordi det Utfordringen er igjen for deg også. 

La oss ta en titt da ved fordelingskode. Når du har lastet ned pset8.zip og pakket det inn din vhost katalogen i CS50 Appliance, du vil se disse kataloger her inne. Bin-- som vanligvis står for binær for kjørbar programs-- omfatter, som i pset7, noen PHP filer som andre filer inkluderer, deretter offentlige, som er filene som trenger å være offentlig tilgjengelig til en bruker med en nettleser. La oss ta en titt i bin-katalogen, og vi vil se at det er en fil det allerede kalt Import. Hvis vi åpner dette med gedit, vi får se at, dessverre, det er ikke mye der. Alt som er der, skjønt, er en shebang på topp som angir hvilke interpreter-- i dette tilfellet PHP-- skal brukes til å faktisk kjøre denne filen. Men så der det står TODO er der du er kommer til å trenge å skrive noen kode som trolig krever config fil som er i den inkluderer katalogen som vi har gjort før med PHP-filer. Og så kommer dere til må liksom åpne opp us.text som du antagelig har pakket allerede. Da er du nødt til å iterere over linjene i denne filen, kanskje bruke noen av funksjonene antydet i beskrivelsen. Deretter setter hver av dem linjer i MySQL database ved hjelp av spørrefunksjon som vi har igjen gitt deg with-- eller i det minste en variant derav i functions.php, som vi vil se i bare et øyeblikk. 

Nå la oss lukke import og gå tilbake til vår katalog og denne gangen går inn omfatter. Og hvis jeg gjør ls der, vil du se tre filer helt som Problem Set 7. Og la oss ta en rask titt, for eksempel ved config.php. Der inne, er færre linjer enn før, og det synes denne fila inneholder constants.php og functions.php. Vi bruker en litt annen teknikk denne gangen rundt å faktisk spesifisere at disse filene er relativ til gjeldende katalog __ DIR__ representerer uansett katalogen dette fil, config.php, er i seg selv i. Så dette er en mer eksplisitt måte å angi hva andre filer du vil kreve. 

Nå hvis jeg lukker denne filen og åpne opp constants.php stedet, vil du se en fil veldig minner til Problem Set 7-tallet også, om enn med en annen database kalt pset8. Til slutt, i functions.php, vi får se bare én funksjon denne gangen kalt spørringen. Dette er nesten det samme bortsett fra at vi håndterer feil denne gangen rundt en liten bit annerledes, men det er bruken er det samme som i oppgavesettet sju. 

Nå la oss gå tilbake til vår pset8 katalog, gå inn i offentligheten, og i det hvis jeg gjør ls, vil du se dette-- articles.php, index.html, search.php, og update.php-- alle filer. Og så css fonter, img, og js katalogen helt som pset7. 

La oss ta en titt på index.html, som er kommer til å bli virkelig inngangspunkt til smashup. Nå i index.html, vil du se en hel haug med leddelementene i hodet, spesifikt, for bootstrap for vår egen CSS etterfulgt av en hel haug med script koder for ting som kart, API seg selv, en spesiell markør med etikett verktøy som vi nevnte i spesifikasjonen er tilgjengelig for deg, jQuery selv, bootstrap seg selv, og en annen bibliotek kalt strek som vi snakker om i spec. Underscore.js som jquery.js er en Javascript-bibliotek som har en hel haug med funksjonalitet at mange mennesker i verden ønske eksistert i Javascript seg selv. Så alle disse er faktisk ganske populær. Vi har også nevnt typeahead som er biblioteket som gjør at autofullfør dropdown og endelig en link til vår egen Javascript. 

I mellomtiden, og kanskje heldigvis, dette mashup drives med forholdsvis liten HTML her nede på bunnen. Legg merke til at vi har spesifisert en div i vår kropp av klasse-container væske. Dette, per bootstrap s dokumentasjon, bare betyr at denne div kommer til å fylle view eller nettleservinduet fullt. 

I mellomtiden, under at vi har en div som er åpnet og umiddelbart stengt med den unike ID av kartet lerret. Dette er nå fra Google Kartene dokumentasjon for sin API, hvor jeg bare trenger å har en tom div inn for å injisere, til slutt, en faktisk Google Maps. Men mer om det i bare litt. 

Til slutt er det en form innsiden av her som implementerer tekstboksen opp øverst til venstre i vår søkegrensesnitt mot. Legg merke til at vi har brukt en bit av bootstrap her også-- ting som form inline og form gruppe. Vi har gitt den tidligere unik ID av form. Og så, til slutt, jeg har faktisk en input type, som er ganske kjent, hvis ID er q. Bare en konvensjon. Q for query-- kunne ha blitt kalt noe. Og så plassholderen, i mellomtiden, er by, stat, og postnummer som du kanskje husker se i vår mashup demo tidligere. La oss avslutte denne filen. 

Nå tar en titt på PHP-filer som avvente og deretter Javascript-filer. I våre PHP-filer, vi har allerede implementert for deg, for eksempel, oppdateringer. Update.php-- vi ikke vil bruke en stor mengde tid på her-- i et nøtteskall er filen som vår Javascript-kode kommer å ta kontakt via AJAX som asynkron teknikk som er bygget inn Javascript i disse dager som er kommer til å tillate oss å spørre update.php for mer informasjon. 

Spesifikt, når som helst brukeren drar kartet eller utfører et søk som hopper brukeren til et annet sted, vår Javascript-kode, som vi vil snart se, er kommer til å ringe update.php og be om 10 eller så markører innenfor synsfeltet basert på GPS-koordinatene fra toppen og bunnen hjørner av det kartet. Vi kan deretter fylle den på kartet nå at at brukeren har beveget seg på skjermen i rekkefølge å se 10 trolig ny markører for ulike byer. I mellomtiden er denne filen til slutt kommer til å utføre en SQL-spørring mot vår database bord kalt steder som kommer til å returnere dem 10 eller færre steder. 

I mellomtiden, i articles.php, er en annen fil vi har skrevet i sin helhet. Det er veldig likt i ånden til Problem Set 7s oppslag funksjon, som kontaktet Yahoo Finance for deg. Denne filen kontakter Google News for deg, slutt å gripe maskinlesbart version-- i noe kalt RSS format-- av nyhetene for Cambridge eller Beverly Hills eller hva byen du har søkt for, basert på at geoparameter. Vi analysere det RSS, som er bare en type kodespråket XML, og da vi faktisk returnere det til nettleseren din og til Javascript-koden, spesifikt, i et format som heter JSON, Javascript Object Notation. Nå vil du se i specification-- vi peke deg på hvordan du faktisk kan se noen av JSON kommende back-- at denne funksjonaliteten i siste instans lar deg fylle disse popup menyer så at når du klikker på en markør i kartet du faktisk se en hel haug av kuler, hver av hvilke linker til en artikkel. 

Nå la oss ta en titt på en siste PHP-fil som, heldigvis, ikke har mye å gå on-- bare en ganske stor TODO. Akkurat nå denne filen erklærer en array kalt steder. Og så til slutt utskrifter denne matrisen i JSON format-- pen-utskrift det bare slik at ting er lettere å feilsøke. Dessverre, i midten er det dette TODO, som krever deg til å søke på database for steder som sams en geo HTTP parameter. 

Og, ja, dette kommer til å være en av dine challenges-- å implementere denne funksjonaliteten her slik at når du tar kontakt med denne filen med en URL som søk. php? geo = noe, koden vil til slutt returnere en JSON utvalg av alle stedene i din databasetabell som passer den inngangen. Så hvis brukeren skriver i Cambridge, din fil her search.php bør til slutt returnere en JSON matrise for alle kampene for Cambridge, som kan være i Massachusetts men kan bli enda noe annet sted. 

Til slutt, la oss ta en titt på to filer som er statisk ultimately-- CSS-filen og Javascript-fil. Hvis jeg går inn i vår CSS katalog, det er en hel haug med filer der, men de fleste av dem er biblioteker. Jeg kommer til å ta en titt, spesifikt, ved styles.css, som er vår egen globale CSS som er kommer til å stilisere hele denne mashup. Jeg overlater det til deg å lese gjennom kommentarene her, men, i et nøtteskall, dette er CSS som sikrer at vår mashup som standard ut av boksen, ser ut akkurat slik vi ønsker it-- med kartet fyller utsikten port og med søket boksen opp øverst til venstre. Vi har også tatt meg den frihet å stylizing at typeahead dropdown menyen litt også. 

Det viktigste fil kanskje for dette oppgavesettet er dette siste, scripts.js. Innsiden av JS katalogen er enda flere filer. Alle av dem er bibliotekfiler bortsett fra denne ene, scripts.js. Hvis vi åpner dette opp, la oss ta vår endelig tur gjennom de funksjonene som er bygget inn i denne filen for deg og ringe oppmerksomhet til de todos som ligger foran oss. 

På toppen av denne filen, er tre globale variabler. Ett for et kart, som kommer til å være en referanse til vår Google kart. Du kan tenke på det liksom som en peker. I mellomtiden har vi en annen global variabel kalt info, som synes å være lagring av returverdien til et anrop til ny google.maps.InfoWindow. Java støtter gjenstander som er svært like i ånden til Struts. Og hva denne linjen for vårt formål er å gjøre er å skape en ny info vindu i minnet, og deretter holde rundt en referanse dertil i en variabel kalt info. Og i mellom disse, i mellomtiden, er det som vises å være en tom Java array kalt markører. Alle disse avis ikoner, eller du kan velge et annet ikon helt, kommer til å bli lagret til slutt i denne matrisen slik at vi kan veldig enkelt legge til kartet og fjerne dem fra kartet. 

Nå la oss rulle ned litt og whiz gjennom koden som kommer til å være utføres så snart DOM eller dokument objektmodell eller side selv er klar. Husker at denne syntaksen her bare spesifiserer at følgende kode skal utføres kun når nettleseren er ferdig lasting alt annet. 

Vi først erklære en hel haug med stiler, som ender opp stylizing kartet som per spec. Da erklærer vi en hel haug av alternativer, som ytterligere tilpasse Google kart som vi er i ferd med å bygge. Deretter bruker vi en bit av jQuery-kode, som er forklart i litt mer detalj i spec, for å hente som element, kart-lerret at vi så entydig identifisert. Og så denne linjen her er hva synes å magisk gi oss et Google-kart på innsiden av vår egen søknad, lagre en henvisning til denne i den variabelen som kalles kartet. 

Til slutt ned her vi registrere det som kalles en lytter. Tenk back-- vei, vei back-- til uke null i CS50 når vi så på Scratch og sin støtte gjennom en spasertur gjennom for ting som kalles hendelser og sendinger. Du kanskje ikke har brukt det selv, men det er en mekanisme hvorved en leseren i dette tilfellet kan få vår oppmerksomhet når det er klar til å faktisk utføre noen kode. I dette tilfellet kommer det til å lytte til kartet for en hendelse som heter inaktiv. Dette betyr at leseren har ferdig med å laste Google-kartet. På dette punktet en funksjon kalt configure bør til slutt bli henrettet. Som funksjon, konfigurere vi får se, er skrevet av oss. 

Nå ned her er en funksjon at, dessverre, er bare en TODO legg til markør. Per spec. du kommer til å trenge å skrive koden som faktisk legger en marker-- om det ser ut som en avis, eller en tommel tack, eller noe else-- til Google-kartet. Her nå, er at funksjonen kalt konfigurere. Jeg overlater det til deg å lese gjennom dette i mer detalj, men innser at vi legger en haug flere Lyttere slik at vi kan kjøre kode når brukeren klikker på og drar kartet. Vi har også kode her at initialiserer at typeahead plugin slik at dropdown menyen fungerer faktisk. 

Men la oss fokusere på bare en par steder her. Spesielt dette å gjøre her. Jeg skal utsette til den elektroniske dokumentasjon og spesifikasjon for hvordan du fyller ut denne TODO. Men i et nøtteskall, dette biblioteket typeahead lar deg passere i det som er allment kjent som en mal, som har noen variable plassholdere svært lik i ånden til printf sin%. * s. Men i dette tilfellet mal per spec lar deg spesifisere hva variablene du ønsker å injisere fra data som er kommet tilbake fra noe som PHP filer som du har skrevet som avgir JSON utgang. 

Nå ned her innse at vi er lytter for typeahead valg når brukeren faktisk gjennomfører en søke og velger en verdi. Dette er hvordan vi er faktisk kommer til å lytte til det og utføre noen kode som resultat. Deretter fortsetter vi å konfigurere mashup bare en liten bit. Og, til slutt, kaller vi denne funksjonen oppdatering. Den oppdaterer markører på skjermen. Mer om det i løpet av et øyeblikk. I mellomtiden, det er noen små funksjoner i her. En av dem er hideInfo som bare lukker InfoWindow. En annen funksjon her, som til slutt vil ikke være for lang, fjerner markører. Det kommer til å angre uansett add markør funksjonen gjør. Og deretter ned her er søk. Og dette er interessant fordi vi har skrevet Javascript-kode som er kommer til å snakke med search.php på server og få tilbake noen respons. 

Deg, selvfølgelig, vil fortsatt må implementere search.php, men vi har implementert Javascript-kode som er kommer til å håndtere faktisk utfører søker fra at tekstboksen. Spesielt varsel at denne funksjonen her, søk, ikke ringe search.php ved en metode som kalles få JSON, som vi så i forelesning. Og syntaksen her er litt annerledes fra forelesning i at vi bruker jQuery såkalt løfte grensesnitt. Mer om det i spec. Dette betyr ganske enkelt for vår formål nå at der er to spesialfunksjoner vi trenger å ringe med dot notasjon her umiddelbart etter ringer få JSON. Heter gjort. Heter mislykkes. Du kan tenke på disse som suksessen handler og svikt handler bare i tilfelle noe går galt. 

Nå la oss se på den siste par funksjoner i denne filen. Ned her er en funksjon kalt showInfo, som viser info i en av dem lite info vinduer som dukker opp når brukeren klikker på en markør. Ned her lenger er at oppdateringsfunksjonen at vi har implementert for deg. Det bestemmer grensene av kartet. Hva er GPS-koordinatene til sin nordøst og sørvest hjørner her. Vi har utarbeidet noen HDP parametere her og deretter passerte dem til slutt å update.php, som vi har også implementert for deg. Som til slutt får tilbake noen JSON fra filen heter update.php og deretter fjerner eventuelle markører på skjermen og deretter gjentas i løpet av dataene som er kommet tilbake fra update.php, som igjen er bare en JSON array. Og så er det til syvende og sist legger en markør for hver av disse stedene, håndtering svikt eller feil som kan meget vel skje. 

Nå bare for å gi deg en smak av hvordan du kan gå om debugging dette prosjektet, innser at jeg har åpnet i fremme denne kategorien her på denne nettadressen, pset8 / articles.php? geo = 02138. Nå, igjen, artikler om PHP vi implementert for deg så dette er ikke så mye hva du skal bruke å feilsøke, men heller teknikken. Legg merke til at jeg har søkt etter Cambridges postnummer her, og jeg har fått tilbake, ja, en JSON utvalg av JSON objekter innsiden av som er to keys-- link og tittel. 

Så denne funksjonaliteten arbeider allerede for deg. Men denne teknikken for manuelt å gå til en URL som dette for noe sånt search.php? geo = cambridge eller 02138 eller hva brukeren har tastet inn bør være uvurderlig som du, selv, prøve å finne ut nøyaktig om hvorfor search.php fungerer eller ikke. 

Til syvende og sist så har du noen todos foran deg. Du kommer til første redskaper at import skript som leser i us.text inn i databasen. Du da kommer til å trenge å implementere search.php slik at den oppfører seg nøyaktig som angitt. Du da kommer til å ønske å fokusere på scripts.js og til slutt implementerer de par Todos, herunder for configure og at malen, legge til markører, fjerne markører, og deretter vare, men ikke minst, en personlig preg. 

Når du har din mashup arbeids helt som vårt, målet på hånden er for deg å legge til en personlig røre til din mashup, enten det er estetisk eller funksjonell. Ta mashup aldri så svakt til det neste nivå. Så lenge du presser deg selv utover ditt kjennskap til spec selv og plukke opp en teknikk nytt, selv om det bare er noe estetiske som å endre layout av kartet som du bruker, omfanget som vi forventer vil bli fornøyd. Som da er Problem Set 8 Mashup. Stay tuned for mer i spesifikasjon og lykke takle dette, din siste CS50 oppgavesettet noensinne. 

[MUSIC SPILLE]