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