[Musik spiller] 

DAVID J. MALAN: Hej. Lad os tage en tur gennem Problem Set 8 Mashup, som vil udfordre dig til trække på elementer til Google Maps med elementer fra Google News og mos dem sammen i en web applet, tillader en bruger at søge et kort til nyheder lokal specifikke byer, byer og postnumre. For at gøre dette, vil vi integrere nogle HTML, CSS, PHP, SQL, JavaScript, og en teknik almindeligt kendt som AJAX for at skabe denne medrivende brugeroplevelse. 

Lad os først Googlemaps selv. Dette er naturligvis, er måske en velkendt grænseflade. Men det viser sig, at Google Maps også giver en API-- ansøgning programmering interface-- via hvilken du kan tage elementer fra Google Maps og integrere dem i dine egne applikationer. Faktisk hele denne proces, er du nødt at finde et par webadresser især positivt, at er nævnt i specifikation for Problem Set 8, specifikt dette Introduktion Guide eller udviklerens Guide Googlemaps API Version 3 samt som Google Maps JavaScript API v3 reference, som er en lidt mere mystisk at læse men faktisk har alle det lavere niveau oplysninger om, hvilke funktioner eller metoder og objekter og egenskaber, og begivenheder faktisk kommer med API, meget ens i ånden til [uhørligt] sider. 

Nu, hvis vi tager et kig på Google News, vil du måske se en velkendt grænseflade her. Men det viser sig, du kan også søge Google News for bestemte geografiske områder via en HTTP parameter kaldet geo. I virkeligheden, hvis jeg zoome ind op her, vil du se, at Jeg er på news.google.com/news/section?geo=02138. Og, ja, hvis jeg zoome ud, vil du se, at jeg er ser på en side med en hel masse synspunkter om Cambridge, Massachusetts. 

I mellemtiden, hvis jeg rent faktisk at ændre den URL ikke at være et postnummer som dette, men noget lidt Messier Ligesom Cambridge, + Massachusetts, hvor plus er den måde, du indkode en mellemrum i en URL og tryk på Enter, vil du se, at jeg faktisk se næsten samme nyheder. Måske er det en lille smule anderledes fordi Cambridge faktisk har flere postnumre. Nu hvordan skulle jeg vide det, og, i virkeligheden, hvordan kunne jeg en eller anden måde binde byer til postnumre i tilfælde I ønsker at tillade brugeren at slå op enten? Tja, det viser sig, at der er en hjemmeside derude kaldet geonames.org som er et initiativ for at en frit tilgængelig database over alle former for geografisk information, ikke kun for USA, men også for andre lande. I virkeligheden, hvis jeg går til denne URL her, som er også nævnt i det problem sæt specifikation, vil du se det tre notering af en hel bunke af zip-filer nogen af ​​som kan downloades af dig. I virkeligheden, for dette problem angivet du vil hente us.zip. Nu inden for denne fil, er en hel bundt af data i tekstformat. Filerne er meget lig en CSV-- kommaseparerede værdier file-- men det faktisk bruger faner til at afgrænse områder. Nu, i mellemtiden, hvis man ser her på hvad jeg har fremhævet, felterne i denne fil vil at være ting som landekoder, postnumre, stednavne, og derefter i en form eller andre stater og amter, fællesskaber, og meget mere. Faktisk har jeg allerede downloadet denne fil på forhånd. Lad mig gå videre og åbne den her-- us.text-- og, ja, vil du se om jeg rulle ned til linje 16.792 vil du se et par rekorder for Cambridge, Massachusetts og dens forskellige postnumre. Hvad du ser der er også amtet, nogle numre, som jeg ikke rigtig forstå, men også alle vejen til højre, nogle GPS coordinates-- bredde og længde. Det er fantastisk, fordi en af funktionerne i Google Maps API er evnen til at detektere hvor du er geografisk i form af GPS-koordinater. 

Lad os nu begynde at finde ud af at begynde at binde disse ting sammen. Vi har givet dig en hel flok fordeling kode, samt MySQL database. I virkeligheden, hvis jeg trækker en phpMyAdmin har allerede er importeret, da du snart vil, pset8.SQL, vil du se en MySQL tabel, ser sådan ud, et ID felt, land kode, postnummer, stednavn og mere. De typer af alle dem kolonner Jeg stammer simpelthen ved at læse readme.text fil her, der er specificeret om et felt er et helt tal, eller VARCHAR eller lignende. 

Så vi har oprettet denne tabel for du og givet dig de SQL-kommandoer at udføre for at skabe det tabel i din egen database, men der er faktisk ingen data i det endnu. I stedet er du nødt til at hente us.zip eller ethvert lands zip fil fra URL der. Og så er du nødt til at skrive en kommandolinje script i PHP, der er kommer til at åbne op, at tekst fil, gentage over sine linjer, og derefter for hver af disse linjer gør en indsats i der placerer tabel i din MySQL-database. Så i slutningen af ​​denne proces, vil du har kørt det script i sidste ende én gang i teorien. I virkeligheden vil du sandsynligvis køre det en masse gange samtidig forsøger at løse forskellige fejl. 

I sidste ende, er du nødt til at have en virkelig store database med tusindvis og tusindvis af geografiske rækker. Så du kommer til at sætte den pågældende import script til side, når det fungerer og din database er rart og korrekt, og derefter du kommer til at gå videre til rent faktisk gennemføre mashup selv. Den mashup kommer til at se lidt noget som dette. På mashup.cs50.net, vi har en stab løsning der ser lidt noget som dette. Ja, hvis jeg klikker på denne avis ikon til Cambridge, Massachusetts, vil du se en roterende ikon kort og derefter en ordnet liste, en punktopstilling over artikler relateret til Cambridge, Massachusetts. Hvis jeg klikker på Charlestown, Massachusetts, Jeg vil se det samme for denne by. Og hvis jeg klikker på Watertown, Massachusetts, Der kan ikke være nogen nyheder fra Watertown, så du vil se noget ligesom langsom nyheder dag. 

Nu, i mellemtiden, øverst til venstre er nogle velkendte Google Maps kontrol at lade dig zoome ud, panorere op, ned, til venstre og højre, men også et søgefelt, at vi sætter der. Så hvis jeg søger efter, helt ærligt, den eneste anden postnummer, jeg kender, 90210, vil vi faktisk se Beverly Hills, Californien. Når der klikkes det får mig til at Californien og en hel masse af nyheder om Beverly Hills. Nu Læg også mærke til, hvad der skete der. Hvis jeg denne gang søgning på 02138 eller endog Cambridge komma Massachusetts eller nogle variant deraf, får du en lille autocomplete dropdown. Nu er dette er ved hjælp af et plugin for et bibliotek kaldet jQuery, og at plugin kaldes typeahead. Vi har simpelthen læse dokumentationen, downloadet Js fil integreret i distributionen kode, så du i sidste ende kan skrive den kode, fylder det dropdown menu med auto valg eller auto forslag. 

Nu fordelingen kode dog, at du har modtaget gør ikke nær så meget. Du får Google Map indlejret, og du får kontrollen øverst til venstre, og du får søgefeltet. Men hvis jeg skriver noget lignende 02138, er ikke fundet nogen steder endnu. Så det kommer til at blive et af vores mål her. Desuden, hvis du tager et skridt tilbage og se på selve kortet, Der er ingen som helst nyheder. Selv hvis jeg klikker og drag, ingen markører faktisk vises nyheder, fordi det udfordring er tilbage for dig så godt. 

Lad os tage et kig derefter ved fordelingen kode. Når du har downloadet pset8.zip og unzipped det ind i din vhost mappe i CS50 Appliance, vil du se disse mapper her inde. Bin-- som generelt står for binær til eksekverbare programs-- omfatter, som i pset7 nogle PHP filer, andre filer omfatter, så offentligheden, som er De filer, der at være offentligt tilgængelige til en bruger med en browser. Lad os tage et kig på bin, og vi vil se, at der er en fil der allerede opfordret Importer. Hvis vi åbner denne med gedit, vil vi se at der desværre er der ikke meget der. Alt dette er der, selv om, er en molevitten på top som angiver, hvilke interpreter-- i dette tilfælde PHP-- skal anvendes til rent faktisk udføre denne fil. Men så hvor der står TODO er, hvor du er vil få brug for at skrive noget kode der sandsynligvis kræver config fil, der er i omfatter biblioteket som vi har gjort før med PHP filer. Og så du kommer til at have en eller anden måde at åbne us.text som du formentlig har unzipped allerede. Så du er nødt til at gentage over linjerne i filen, måske ved hjælp af nogle af de funktioner, foreslået i specifikationen. Sæt derefter hver af disse linjer i MySQL-database ved hjælp af forespørgslen funktion, som Vi har igen givet dig med-- eller mindst en variant deraf i functions.php, som vi vil se på bare et øjeblik. 

Lad os lukke import og gå tilbage til vores bibliotek og denne gang gå ind omfatter. Og hvis jeg gør ls der, vil du se tre filer helt ligesom Problem Set 7. Og lad os tage et hurtigt kig, for eksempel ved config.php. Derinde, er færre linjer end før, og det synes denne fil indeholder constants.php og functions.php. Vi bruger en lidt anden teknik denne gang til rent faktisk præcisere, at disse filer er relative til den aktuelle mappe __ DIR__ repræsenterer uanset Vejviser dette fil, config.php, selv i. Så dette er en mere eksplicit måde at angive hvilke andre filer, du vil kræve. 

Nu, hvis jeg lukker denne fil og åbne constants.php stedet vil du se en fil meget minder til Problem Set 7 er så godt, om end med en anden database kaldet pset8. Endelig i functions.php, vi vil se bare én funktion denne gang kaldet forespørgsel. Det er næsten det samme, bortset fra at vi håndterer fejl denne gang en lille smule forskelligt, men det er brug er det samme som i problem sæt syv. 

Lad os nu gå tilbage ind i vores pset8 bibliotek, gå i offentlige, og i der hvis jeg gør ls, vil du se denne-- articles.php, index.html, search.php, og update.php-- alle filer. Og så CSS skrifttyper, IMG, og js Vejviser helt ligesom pset7. 

Lad os tage et kig på index.html, som er kommer til at være virkelig indgang til smashup. Nu i index.html, vil du se en hel flok ledelementer i hovedet, Specifikt for bootstrap for vores egen CSS efterfulgt af en hel bunke af script tags for ting som kort, API selv en særlig markør med etiket hjælpeprogram, vi nævnte i specifikation er tilgængelig for dig, jQuery selv, bootstrap selv, og et andet bibliotek kaldet underscore som vi taler om i spec. Underscore.js som jquery.js er en JavaScript-bibliotek der har en hel masse funktionalitet at en masse mennesker i verden ønsker eksisterede i JavaScript selv. Så alle disse er faktisk meget populært. Vi har også nævnt typeahead som er det bibliotek, gør det autofuldførelse dropdown og endelig et link til vores egen JavaScript. 

I mellemtiden, og måske heldigvis, denne mashup drives ved relativt lidt HTML hernede i bunden. Bemærk, at vi har angivet en div i vores krop af klasse-container væske. Dette pr bootstrap s dokumentation, bare betyder, at denne div vil fylde viewport eller browserens vindue helt. 

I mellemtiden, under at vi har en div der er åbnet og lukkes øjeblikkeligt med den unikke id kort lærred. Dette nu er fra Google Kort dokumentation for sin API, hvorved jeg simpelthen nødt til at har en tom div i at injicere, i sidste ende, en egentlig Google Maps. Men mere om det i bare en smule. 

Endelig er der en formular indersiden af ​​her som på iværksættelsen tekstboksen op øverst til venstre i vores interface for søgningen. Bemærk, at vi har brugt lidt af bootstrap her too-- ting som formular-inline, figurbetonet gruppe. Vi har givet den tidligere unikt id form. Og så, i sidste ende, jeg har faktisk en input type, som er temmelig velkendt, hvis ID er q. Bare en konvention. Q for query-- kunne have blevet kaldt noget. Og så pladsholderen, i mellemtiden, er by, stat, og postnummer, som du måske husker se i vores mashup demo tidligere. Lad os lukke denne fil. 

Nu tager et kig på PHP-filer, afvente og derefter JavaScript-filer. I vores PHP-filer, vi har allerede gennemført for dig, f.eks, opdateringer. Update.php-- vi vil ikke bruge en enorm mængde tid på her-- i en nøddeskal er den fil, vores JavaScript-kode går til at kontakte via AJAX som asynkron teknik, der er indbygget i JavaScript disse dage, der er vil tillade os at spørge update.php for mere information. 

Specifikt, når som helst brugeren trækker kortet eller udfører en søgning, der springer brugeren til en anden placering, vores JavaScript-kode, som vi snart vil se, er vil kalde update.php og bede om 10 eller så markører i viewport baseret på GPS-koordinater af de øverste og nederste hjørner, at kortet. Vi kan så genbefolke kortet nu, brugeren har flyttet skærmen for at se 10 sandsynligvis ny markører for forskellige byer. I mellemtiden, denne fil er i sidste ende kommer til at udføre en SQL-forespørgsel mod vores database table kaldet steder, som kommer til at vende dem 10 eller færre steder. 

I mellemtiden, i articles.php, er en anden fil, vi har skrevet i sin helhed. Det er meget ens i ånd til Problem Set 7 s LOOKUP funktion, som kontaktede Yahoo Finance for dig. Denne fil kontakter Google News for dig, i sidste ende sensationsprægede maskinlæsbar version-- i noget kaldet RSS format-- af nyhederne for Cambridge eller Beverly Hills eller hvad by du har søgt for på grundlag af denne geoparameter. Vi parse at RSS, som er blot en type markup language kaldet XML, og så vi faktisk returnere den til din browser og til din JavaScript-kode, specifikt i et format kaldet JSON, JavaScript Object Notation. Nu skal du se i specification-- vi pege dig på, hvordan du rent faktisk kan se nogle af JSON kommende tilbage-- at denne funktionalitet i sidste ende lader dig udfylde disse popup menuer, så at når du klikker på en markør på kortet du faktisk se en hel masse af kugler, som hver links til en artikel. 

Lad os nu tage et kig på en sidste PHP-fil, som heldigvis ikke meget går on-- bare en temmelig stor TODO. Lige nu denne fil erklærer et array kaldet steder. Og så i sidste ende udskrifter at array i JSON format-- pretty-udskrivning det bare så ting er lettere at debug. Desværre, i den midten er der denne TODO, som opfordrer til at søge den database til steder, der passer en geo HTTP parameter. 

Og faktisk, det vil være en af ​​dine challenges-- at implementere denne funktionalitet her så når du kontakte denne fil med en URL lignende søgning. php? geo = noget, din kode vil i sidste ende returnere en JSON array af alle de steder i din database tabel der matcher denne indgang. Så hvis brugeren skriver i Cambridge, din fil her search.php skal i sidste ende returnere en JSON-array for alle de kampe Cambridge, som kunne være i Massachusetts men kunne være endnu et andet sted. 

Endelig, lad os tage et kig på to filer, der er statisk ultimately-- din CSS-fil og din JavaScript-fil. Hvis jeg går ind i vores CSS bibliotek, der er en hel masse filer der, men de fleste af dem er biblioteker. Jeg har tænkt mig at tage et kig, specifikt på styles.css, som er vores egen globale CSS, der er kommer til at stilisere hele denne mashup. Jeg vil overlade det til dig at læse igennem kommentarerne heri, men i en nøddeskal, dette er CSS, der sikrer, at vores mashup, som standard ud af kassen, ser ud præcis den måde, vi ønsker det-- med kortet fylde viewporten og med søgningen boksen op øverst til venstre. Vi har også taget sig den frihed at bearbejde denne typeahead dropdown Menuen lidt så godt. 

Den vigtigste fil måske for dette problem sæt er denne sidste, scripts.js. Inde i din JS bibliotek er endnu flere filer. Alle af dem er bibliotek filer bortset fra denne ene, scripts.js. Hvis vi åbner dette op, lad os tage vores endelige tur gennem de funktioner, er indbygget i denne fil for dig og opkald opmærksomhed til de todos, der ligger forude. 

På toppen af ​​denne fil, er tre globale variabler. Én for et kort, der kommer til at være en henvisning til vores Google map. Du kan tænke på det slags som en pegepind. I mellemtiden har vi en anden global variabel kaldet info, som synes at være lagring returværdien af ​​et opkald til ny google.maps.InfoWindow. JavaScript understøtter genstande, som er meget ens i ånd til Struts. Og hvad denne linje for vores formål er at gøre skaber en ny info vindue i hukommelsen og derefter holder omkring en reference dertil i en variabel kaldet Info. Og i mellem dem, i mellemtiden, er hvad der synes at være en tom JavaScript matrix kaldes markører. Alle disse avis ikoner, eller du kan vælge en anden ikon helt, vil blive gemt i sidste ende i denne matrix således at vi meget nemt kan føje til kortet og fjerne dem fra kortet. 

Lad os rulle ned en lille smule og guru gennem den kode, der kommer til at være udføres, så snart DOM eller dokument objekt model eller selve siden er klar. Husk på, at denne syntaks her blot specificerer at følgende kode bør kun udføres når browseren er færdig lastning alt andet. 

Vi først erklære en hel masse stilarter, der ender stilisering kortet som pr spec. Vi derefter erklære en hel masse muligheder, hvilket yderligere tilpasse Google kort, som vi er ved at integrere. Vi bruger så lidt af jQuery kode, som er forklaret i en lidt mere detaljeret i spec, at få fat i dette element, Kort-lærred at vi så identificeres entydigt. Og så denne linje her er hvad der synes at magisk give os et Google-kort inde i vores egen applikation, lagring af en henvisning hertil i denne variabel kaldet kort. 

Endelig hernede registrere vi hvad der kaldes en lytter. Tænk tilbage-- måde, måde tilbage-- til uge nul i CS50 når vi kiggede på Scratch og sin støtte gennem en gåtur igennem for ting kaldet begivenheder og udsendelser. Du har måske ikke har brugt det selv, men det er en mekanisme, hvorved en browser i dette tilfælde kan få vores opmærksomhed, når det er klar til at faktisk at udføre nogle kode. I dette tilfælde går det til at lytte til kortet til et arrangement kaldet inaktiv. Dette betyder, at browseren har færdig indlæsning af Google map. På dette tidspunkt kaldes en funktion configure bør i sidste ende blive henrettet. Denne funktion, konfigurere, vi vil se, er skrevet af os. 

Nu hernede er en funktion at desværre, er blot en TODO add markør. Per spec. du får brug for at skrive den kode, der faktisk tilføjer en marker-- om det ser som en avis, eller en tegnestift, eller noget else-- til Google map. Her er nu, at funktionen kaldet configure. Jeg vil overlade det til dig til at læse gennem denne mere detaljeret, men indser, at vi tilføjer En flok flere lyttere så vi kan udføre kode, når brugeren klikker på og trækker kortet. Vi har også kode her, at initialiserer at typeahead plugin så dropdown menu rent faktisk virker. 

Men lad os fokusere på blot et par steder heri. Specifikt giver dette at gøre her. Jeg vil udsætte til online dokumentation og specifikation for hvordan skal udfylde denne TODO. Men i en nøddeskal, dette bibliotek typeahead giver dig mulighed for at passere i, hvad der er almindeligt kendt som en skabelon, som har nogle variable pladsholdere meget ens i ånd til printf s%. * s. Men i dette tilfælde, den template pr spec kan du angive hvad variabler, du ønsker at injicere fra data, der er kommet tilbage fra noget i retning af PHP filer, som du har skrevet der udsender JSON output. 

Nu hernede indse, at vi er lytte efter typeahead markeringer når brugeren faktisk udfører en søgning og vælger en værdi. Det er sådan, vi er faktisk vil lytte til dette og udføre noget kode som et resultat. Derefter fortsætter vi til at konfigurere den mashup bare en lille smule. Og i sidste ende, vi kalder denne funktion opdatering. Den opdaterer markeringerne på skærmen. Mere om det om et øjeblik. I mellemtiden er der et par små funktioner i her. Hvoraf den ene er hideInfo som simpelthen lukker InfoWindow. En anden funktion her, som i sidste ende vil ikke være for lang, fjerne markører. Det kommer til at fortryde, hvad din add markør funktion gør. Og så hernede er søgning. Og dette er interessant, fordi vi har skrevet den JavaScript-kode, der er vil tale til search.php på server og komme tilbage nogle svar. 

Du, selvfølgelig, vil stadig nødt til at gennemføre search.php, men vi har gennemført JavaScript-kode, der er vil håndtere faktisk udfører søger fra tekstfeltet. Især varsel at denne funktion her, Søg, er ringe search.php ved en fremgangsmåde kaldet få JSON, som vi så i foredrag. Og syntaksen her er lidt anderledes fra foredrag i, at vi bruger jQuery såkaldte løfte interface. Mere om det i spec. Det betyder blot, for vores formål nu, at der er to specialfunktioner vi brug for at ringe med dot notation her umiddelbart efter kald få JSON. Den ene kaldes gjort. Den ene kaldes mislykkes. Du kan tænke på disse som succesen handleren og den manglende handleren bare hvis noget går galt. 

Lad os nu se på det sidste par funktioner i denne fil. Hernede er en funktion kaldet SHOWINFO, som viser information i en af ​​disse lidt info vinduer, popper op, når brugeren klikker på et markør. Hernede yderligere er at opdateringsfunktion at vi har gennemført for dig. Den fastlægger grænserne for kortet. Hvad er GPS-koordinaterne for sin nordøst og sydvest hjørner her. Vi har forberedt nogle HDP parametre her og derefter passerede dem i sidste ende at update.php, som vi har også implementeret for dig. Der i sidste ende kommer tilbage nogle JSON fra fil kaldet update.php og fjerner derefter eventuelle markører på skærmen og derefter gentager i de data, der er kommet tilbage fra update.php, som igen er blot en JSON array. Og så er det i sidste ende tilføjer en markør for hvert af disse steder, håndtering fiasko eller fejl, som kan meget vel ske. 

Nu bare for at give dig en forsmag på, hvordan du måske gå om debugging dette projekt, indse, at jeg har åbnet i fremme denne fane her til denne webadresse, pset8 / articles.php? geo = 02138. Nu, igen, artikler om PHP vi implementeret for dig så det er ikke så meget hvad du skal bruge til debug, men teknikken. Bemærk, at jeg har søgt efter Cambridges postnummer her, og jeg har fået tilbage, ja, en JSON vifte af JSON objekter inden i hvilken er to keys-- link og titel. 

Så denne funktionalitet arbejder allerede for dig. Men denne teknik manuelt går til en URL som dette for noget lignende search.php? geo = cambridge eller 02138 eller hvad brugeren har indtastet bør vise sig uvurderlig som dig, dig selv, så prøv at finde ud af præcis, om hvorfor search.php virker eller ej. 

I sidste ende så har du et par todos foran dig. Du kommer til at første redskaber at import script, læser i us.text i din database. Du derefter vil få brug for at gennemføre search.php således at den opfører sig nøjagtigt som angivet. Du derefter vil ønsker at fokusere på scripts.js og i sidste ende gennemfører de par Todos, herunder til configure og at skabelon, tilføje markører, fjern markører, og Så holder, men ikke mindst, en personlige touch. 

Når du har din mashup bearbejdning helt ligesom vores, målet ved hånden er for dig at tilføje en personlig touch til dit mashup, uanset om det er æstetisk eller funktionelt. Tag mashup nogensinde så lidt til det næste niveau. Så længe man presser sig selv ud Deres kendskab til spec selv og afhente en teknik ny, selvom det er bare noget æstetiske såsom at ændre layout af det kort, du bruger, anvendelsesområde, som vi forventer vil blive opfyldt. Det er da Problem Set 8 Mashup. Stay tuned for mere i specifikation og held og lykke tackle dette, din sidste CS50 problem sæt nogensinde. 

[Musik spiller]