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