[REPRODUCCIÓ DE MÚSICA] 

DAVID J. Malan: Hola. Anem a fer una passejada a través de Problemes de 8 Mashup, que et va a desafiar basarien en elements de Google Maps amb elements de Google Notícies i puré junts en un applet de web que permet a l'usuari buscar un mapa per a les notícies locals a ciutats específiques, ciutats i codis postals. Per a això, anem a integrar una mica d'HTML, CSS, PHP, SQL, JavaScript, i una tècnica de generalment conegut com AJAX per tal per crear aquesta immersió experiència de l'usuari. 

Del primer per a si mateix Google Maps Let. Això, per descomptat, és potser una interfície familiar. Però resulta que Google Maps també proporciona una aplicació API-- interface-- programació a través del qual vostè pot prendre elements de Google Maps i integrar-les en les seves pròpies aplicacions. De fet, durant tot aquest procés, vas trobar un parell d'adreces URL particularment útil que s'esmenten en el especificació per Problemes de 8, específicament aquest Getting Started Guia o la Guia del desenvolupador per a Google Maps API versió 3, així com l'API de JavaScript de Google Maps referència v3, que és una poc més arcà de llegir però en realitat té tot el nivell inferior detalls sobre quines funcions o mètodes i objectes i propietats i esdeveniments en realitat vénen amb l'API, molt similar en esperit a [inaudible] pàgines. 

Ara bé, si fem un cop d'ull a Google Notícies, podràs potser veure una interfície familiar aquí. Però resulta que també pot buscar Google Notícies per geografies específiques a través d'un paràmetre HTTP anomenada geo. De fet, si puc ampliar fins aquí, veuràs que Estic en news.google.com/news/section?geo=02138. I, de fet, si el zoom fora, veuràs que sóc mirant a una pàgina amb un munt de opinions sobre Cambridge, Massachusetts. 

Mentrestant, si realment canviar el URL no sigui un codi postal com aquesta, però una cosa una mica més desordenat com Cambridge, Massachusetts +, on l'avantatge és la manera de codificar un caràcter d'espai en una direcció URL i premeu Enter, veuràs que en realitat veure gairebé les mateixes notícies. Potser és una mica diferent perquè en realitat Cambridge té diversos codis postals. Ara, com anava jo a saber que i, de fet, com podria jo d'alguna manera lligar ciutats i pobles als codis postals en cas que desitgi permetre a l'usuari per buscar qualsevol? Bé, resulta que hi ha un lloc web per aquí diu geonames.org que és una iniciativa per tenir una base de dades de lliure accés de tots tipus d'informació geogràfica, no només per als EUA, sinó també per a altres països també. De fet, si vaig a aquest URL aquí, que També s'esmenta en el conjunt de problemes especificació, vostè veurà que 3 llista d'un munt d'arxius zip qualsevol dels quals es pot descarregar per vostè. De fet, per a aquest conjunt de problemes vas a descarregar us.zip. Ara dins d'aquest arxiu, és un tot munt de dades en format de text. Els arxius és molt similar a una CSV-- Valors separats per comes file-- però utilitza realment pestanyes per delimitar camps. Ara, per la seva banda, si ens fixem aquí, en el que jo he destacat, els camps d'aquest arxiu es van a ser coses com els codis de país, codis postals, noms de llocs, i després, en alguna forma o altres, els estats i comtats, comunitats, i més. De fet, ja he descarregat aquest arxiu per avançat. Déjame anar per davant i l'obro aquí-- us.text-- i, de fet, se li veure si em desplaço fins a la línia 16792 veuràs alguns registres de Cambridge, Massachusetts i els seus diferents codis postals. El que també es veu allà és el comtat, alguns números que jo realment no entendre, sinó també tots el camí de la dreta, alguns GPS coordinates-- latitud i longitud. Això és molt bo perquè un les característiques de l'API de Google Maps és la capacitat de detectar on es troba geogràficament en termes de coordenades GPS. 

Ara anem a començar a trobar la manera de començar a lligar aquestes coses juntes. Els hem donat un tot manat de codi de distribució, així com la base de dades MySQL. De fet, si em tiri una phpMyAdmin tenir prèviament importats, com aviat ho sabrà, pset8.SQL, veuràs una taula de MySQL que són aquestes, un camp d'ID, país codi, codi postal, nom del lloc i més. Els tipus de tots aquells columnes que deriven simplement mitjançant la lectura de la readme.txt presentar aquí que especifica si un camp és un nombre sencer, o varchar o similars. 

Per això hem creat aquesta taula per i et donen les ordres SQL executar per crear aquest taula en la seva pròpia base de dades, però hi ha en realitat no hi ha dades en això encara. Per contra, hauràs de descarregar us.zip o postal de qualsevol país presentar d'aquesta URL allà. I llavors hauràs de escriure un script de línia d'ordres en PHP que és va a obrir aquest text presentar, iterar sobre les seves línies, i després per a cada un aquestes línies fan un insert en què els llocs taula a la base de dades MySQL. Així que al final d'aquest procés, se li han corregut aquesta seqüència de comandaments en última instància, només una vegada en la teoria. En realitat probablement et executar un munt de vegades en tractar d'arreglar diversos bugs. 

Al final, vostè tindrà un realment gran base de dades amb milers i milers de files geogràfiques. Després et vas a posar aquesta importació guió de banda una vegada que està funcionant i la seva base de dades és agradable i correcta, i després passaràs a realitat l'aplicació de la mateixa mashup. El mashup es va a veure una mica d'alguna cosa com això. En mashup.cs50.net, ens tenir una solució personal que es veu una mica d'alguna cosa com això. De fet, si faig clic en aquest diari icona de Cambridge, Massachusetts, veuràs un filat icona breument i després una llista ordenada, un llista amb vinyetes d'articles relacionada amb Cambridge, Massachusetts. Si faig clic a Charlestown, Massachusetts, Vaig a veure el mateix per a aquella ciutat. I si faig clic a Watertown, Massachusetts, potser no hi hagi cap notícies de de Watertown, pel que veurà alguna cosa com el dia de poques notícies. 

Ara, per la seva banda, a la part superior esquerra són alguns familiars controls de Google Maps deixar que s'allunya, cassola amunt, avall, esquerra i dreta, sinó també un quadre de recerca que posem allà. Així que si jo busco, francament, l'únic altre codi postal sé, 90210, anem a veure realment Beverly Hills, Califòrnia. En fer clic en ella em porta a Califòrnia i un manat sencer de notícies sobre Beverly Hills. Ara noti, també, el que va passar allà. Si aquesta recerca de temps per 02.138 o fins i tot Cambridge Massachusetts coma o algun variant de la mateixa, s'obté una poc desplegable autocompletar. Ara això des d'un plugin per a una biblioteca anomenada jQuery, i aquest plugin es diu typeahead. Simplement llegeix a través de la documentació, descarregat arxius integrat els .js en el codi de distribució de manera que vostè en última instància, poden escriure el codi que omple aquest menú desplegable amb l'acte seleccions o els suggeriments d'automòbils. 

Ara el codi de distribució, però, que vostè va rebre no fa gairebé tant. Vostè aconsegueix el Google Map incrustat, i a obtenir els controls de la part superior esquerra, i s'obté el quadre de cerca. Però si escric alguna cosa com 02138, no hi ha llocs es troben encara. Així que serà un dels nostres objectius aquí. A més, si vostè pren un pas enrere i mirar el mapa en si, no hi ha cap notícia. Fins i tot si faig clic i arrossegament, no hi ha marcadors realitat apareixerà per les notícies perquè això desafiament es deixa per a vostè també. 

Fem una ullada a continuació, en el codi de distribució. Un cop hagi descarregat pset8.zip i va obrir la cremallera en el directori d'amfitrió virtual al CS50 Appliance, veuràs aquests directoris aquí dins. Bin-- que generalment significa binari per programs-- executable inclou, com en pset7, una mica de PHP arxius que altres arxius inclouen, llavors públic, que és els arxius que necessiten per ser accessible públicament a un usuari amb un navegador. Anem a fer una ullada al bin, i anem a veure que hi ha un fitxer ja deien Importar. Si obrim aquesta amb gedit, ja veurem que, per desgràcia, no hi ha molt ja està. Tot el que hi és, però, és un tinglado a la part superior que especifica que interpreter-- en aquest cas PHP-- ha de ser utilitzat per realment executar aquest fitxer. Però llavors on diu TOT és on ets va a haver d'escriure codi que probablement requereix l'config arxiu que està en el directori includes com ho hem fet abans amb arxius PHP. I després vas a ha d'obrir alguna manera us.text que presumiblement ja han descomprimit. Llavors hauràs de iterar sobre les línies a l'arxiu, potser utilitzant algunes de les funcions suggerit en l'especificació. A continuació, inseriu cadascun dels línies a la base de dades MySQL mitjançant l'ús de la funció de consulta, que hem de nou li proporcionem con-- o almenys una variant del mateix en functions.php, que veurem en un moment. 

Ara anem a tancar la importació i tornar a el nostre directori i aquesta vegada entrar a inclou. I si ho faig ls allà, veuràs tres arxius bastant com de problemes 7. I anem a fer una ullada ràpida, Per exemple, en config.php. Allà, és menys línies que abans, i es Sembla que aquest arxiu inclou constants.php i functions.php. Estem usant una mica diferent tècnica en aquesta ocasió per realment especifiquen que aquests arxius són relatius al directori actual __ DIR__ representa el directori que aquest arxiu, config.php, és en si mateix en. Així que aquesta és una més manera explícita de l'especificació Quins altres fitxers que voleu exigir. 

Ara si tanco aquest fitxer i obrir constants.php lloc, veuràs un arxiu molt reminiscent per de així, encara que de problemes 7 amb una base de dades diferent anomenat pset8. Finalment, en functions.php, anem a veure només una funció aquesta vegada trucada de consulta. Això és gairebé el mateix, llevat que fem servir errors en aquesta ocasió una mica de manera diferent, però és d'ús és el mateix que en el problema conjunt de set. 

Ara anem a tornar al nostre pset8 directori, entra en públic, i allà si ho faig ls, veurà esto-- articles.php, index.html, search.php, i update.php-- tots els arxius. I llavors la fonts css, img, i directori js agrada bastant pset7. 

Fem una ullada a index.html, que és serà realment el punt d'entrada a la Smashup. Ara a index.html, veuràs un tot munt d'elements d'enllaç al cap, específicament, per arrencada per al nostre propi CSS seguit per un munt d'escriptura etiquetes per a coses com els mapes, API en si, un marcador especial amb etiqueta utilitat que hem esmentat en el especificació està disponible per a vostè, si jQuery, bootstrap si mateix, i una altra biblioteca anomenat subratllat que parlem en l'especificació. Underscore.js com jquery.js és una biblioteca JavaScript que té un munt de funcionalitat que un munt de gent al món desitgen existit en si mateixa JavaScript. Així que tots aquests són en realitat bastant popular. També hem esmentat typeahead que és la biblioteca que fa que desplegable autocompletar i finalment, un enllaç al nostre propi JavaScript. 

Mentrestant, i potser per sort, aquest mashup és impulsat per relativament poc HTML aquí baix a la part inferior. Tingueu en compte que hem especificat un div a el nostre cos de fluid classe contenidor. Això, de per arrencada documentació, només significa que aquest div va a omplir el viewport o finestra completament del navegador. 

Mentrestant, per sota que tenim un div això es van obrir i van tancar immediatament amb l'ID exclusiu del mapa llenç. Això ara és de Google Documentació Mapes per la seva API, pel qual jo simplement necessito tenir un div buit en el qual injectar, en última instància, un ral de Google Maps. Però més d'això en només una mica. 

Finalment, hi ha una forma dins de la qual aquí implementa el quadre de text fins a la part superior esquerra en la nostra interfície de cerca. Tingueu en compte que hem utilitzat una mica d'arrencada aquí també- coses com forma-inline, cenyida al grup. Hem donat a l'antiga ID única de la forma. I després, en última instància, en realitat tinc un tipus d'entrada, que és bastant familiar, el ID és q. Només una convenció. Q per query-- podria tenir ha cridat res. I llavors el marcador de posició, per la seva banda, és la ciutat, estat, i el codi postal que es pot recordar veient en la nostra mashup de demostració abans. Anem a tancar aquest fitxer. 

Ara fes un cop d'ull als arxius PHP que esperar i després els arxius JavaScript. En els nostres arxius PHP, tenim ja implementat per a vostè, per exemple, les actualitzacions. Update.php-- no anem a gastar una enorme quantitat de temps en aquí-- en poques paraules és l'arxiu que la nostra Codi JavaScript se'n va posar-se en contacte a través d'AJAX que tècnica asíncrona que és incorporat en JavaScript aquests dies que és permetrem que ens preguntem update.php per més informació. 

En concret, en qualsevol moment l'usuari arrossega el mapa o realitza una recerca que salta l'usuari a una altra ubicació, nostre codi JavaScript com aviat veurem, és va a cridar update.php i demanar 10 o més marcadors dins de la finestra gràfica basada en les coordenades GPS de la part superior i inferior cantonades d'aquest mapa. Llavors podem repoblar el mapa ara que l'usuari ha mogut la pantalla per tal veure 10 probablement nova marcadors de diferents ciutats. Mentrestant, aquest fitxer és en última instància, va a executar una consulta SQL en contra de la nostra base de dades taula anomenada llocs que va a tornar els 10 o menys llocs. 

Mentrestant, en articles.php, és una altra arxivem que hem escrit íntegrament. És molt similar en esperit a Funció CERCAR de Problemes de 7, que contactar Yahoo Finances per a vostè. Aquest fitxer contactes de Google Notícies per a vostè, en última instància, l'acaparament una màquina de lectura versió-- en alguna cosa anomenada RSS format-- de les notícies per Cambridge o Beverly Hills o el que sigui la ciutat que has buscat per sobre la base que geoparámetros. Que s'analitzen els que RSS, que és només una tipus de llenguatge anomenat XML, i després en realitat retornar al seu navegador i al codi JavaScript, En concret, en un format anomenat JSON, JavaScript Object Notation. Ara veuràs a la specification-- assenyalem que la forma en què vostè pot veure realment alguns dels posterior-- vinguda JSON que aquesta funcionalitat en última instància li permet omplir els menús emergents de manera que en fer clic en un marcador al mapa que vegi en realitat un munt de bales, cadascun dels quals enllaços a un article. 

Ara donem una ullada a una última Arxiu PHP que, afortunadament, no ho fa molt tenir anar en-- només un bastant gran TOT. Ara mateix aquest fitxer declara una matriu anomenat llocs. I en última instància impressions aquesta matriu a JSON format-- bastant-imprimir només perquè les coses són més fàcils de depurar. Desafortunadament, en el mig hi ha aquest TOT, que demana que vostè busqui la base de dades de llocs que coincideixen amb un geo HTTP paràmetre. 

I, de fet, això va a ser un del seu challenges-- per implementar aquesta funcionalitat aquí de manera que quan es comuniqui amb aquest arxiu amb un URL com la recerca. php? geo = alguna cosa, el seu codi en última instància, tornar un JSON conjunt de tots els llocs en el seu taula de base de dades que coincideixin amb aquesta entrada. Així que si l'usuari escriu a Cambridge, seu arxiu aquí search.php en última instància, ha de retornar una matriu JSON per a tots els partits de Cambridge, el que podria ser a Massachusetts però podria ser fins i tot qualsevol altre lloc. 

Finalment, anem a fer una ullada a 2 arxius que són ultimately-- estàtica seu arxiu CSS i el seu arxiu JavaScript. Si entro al nostre directori CSS, hi ha un munt d'arxius allà, però la majoria d'ells són les biblioteques. Vaig a fer una ullada, específicament, en styles.css, que és el nostre propi CSS global que és va a estilitzar tot aquest mashup. Ho deixo perquè llegeixi els comentaris en aquest document, però, en poques paraules, aquest és el CSS que assegura que el nostre mashup, per defecte fora de la caixa, es veu exactament com volem it-- amb el mapa d'omplir el port vista i amb la recerca caixa a la part superior esquerra. També ens hem pres la llibertat de estilitzant que desplegable typeahead menú una mica també. 

L'arxiu més important potser per aquest conjunt de problemes és aquest últim, scripts.js. Dins del directori JS és encara més arxius. Tots ells són arxius de la biblioteca a excepció d'aquest, scripts.js. Si obrim això, anem a prendre el nostre última gira a través de les funcions que estan incorporats en aquest arxiu per a vostè i per cridar l'atenció als tots que s'acosten. 

A la part superior d'aquest arxiu, són tres variables globals. Un per un mapa, que es va a ser una referència en el nostre mapa de Google. Vostè pot pensar en ell tipus de com un punter. Mentrestant, tenim una altra variable global anomenat info, que sembla ser emmagatzemar el valor de retorn d'una trucada a nova google.maps.InfoWindow. JavaScript suporta objectes que són molt similars en esperit a Struts. I el que aquesta línia per nostres propòsits està fent és la creació d'una nova informació finestra a la memòria i després mantenir voltant d'una referència al mateix en una variable anomenada Info. I entre aquells, per la seva banda, és el que sembla ser un JavaScript buit array anomenat marcadors. Totes les icones de diaris, o podria triar una nova icona conjunt, seran emmagatzemats en última instància, en aquesta matriu perquè puguem afegir molt fàcilment a el mapa i eliminar del mapa. 

Ara anem a desplaçar-se cap avall una mica i geni a través del codi que serà executada tan aviat com el DOM o document model d'objectes o la pàgina en si està llest. Recordem que aquesta sintaxi aquí simplement especifica que el codi següent s'ha de fer només quan el navegador ha acabat carregar tota la resta. 

En primer lloc, declarem 1 tota munt d'estils, que acaben estilització el mapa com per l'especificació. Llavors Declarem 1 tota munt d'opcions, que personalitzar encara més el Google mapa que estem a punt d'encastar. A continuació, utilitzem una mica de codi jQuery, que s'explica en detall una mica més en l'especificació, per agafar aquest element, mapa-lona que identifiquem de manera exclusiva. I després aquesta línia aquí és el que sembla màgicament ens donen un mapa de Google dins de la nostra pròpia aplicació, emmagatzemar una referència a la mateixa en aquesta variable anomenada mapa. 

Finalment, aquí es registra el que es diu un oient. Penseu forma part posterior--, camí posterior-- a la setmana zero a CS50 quan mirem les ratllades i el seu suport a través d'un passeig a través de coses trucades esdeveniments i transmissions. És possible que no hagi utilitzat vostè mateix, però és un mecanisme per el qual una navegador en aquest cas pot cridar la nostra atenció quan és a punt per executar en realitat una mica de codi. En aquest cas, es va a escoltar al mapa d'un esdeveniment anomenat inactiu. Això significa que el navegador té acabat de carregar el mapa de Google. En aquest punt una funció anomenada configuri hauria en última instància, ser executat. Aquesta funció, configurar, anem a veure, està escrit per nosaltres. 

Ara aquí és una funció que, per desgràcia, és només un marcador TOT add. Per l'especificació. vostè va a necessitar per escriure el codi que realment S'afegeix un marker-- si sembla com un diari o una tatxa, o alguna cosa else-- al mapa Google. Aquí ara és que la funció anomenat configuri. Ho deixo a vostè a llegir a través d'això amb més detall, però adonem que afegim un munt més oients perquè puguem executar codi quan el usuari fa clic i arrossega el mapa. També hem codi aquí que inicialitza aquest plugin typeahead perquè en el menú desplegable menú realment funciona. 

Però ens centrarem en només un parell de llocs en aquest document. En concret, això veure aquí. Et remeto a la línia documentació i l'especificació de com omplir aquest TOT. Però en poques paraules, aquesta biblioteca typeahead li permet passar en el que es coneix generalment com a plantilla, que té uns marcadors de posició variables molt similar a la de% de printf. * s. Però en aquest cas, la plantilla per l'especificació permet especificar quines variables desitja per injectar a partir de dades que es vénen darrere d'una cosa així com el PHP arxius que has escrit que estan emetent sortida JSON. 

Ara aquí adonem que som l'escolta de seleccions TYPEAHEAD quan l'usuari porta a terme realment una recerca i seleccioneu un valor. Així com en realitat som va a escoltar perquè i executar algun codi com a resultat. Després continuem configurar el mashup només una mica. I, en última instància, que anomenem aquesta actualització funció. Actualitza les adreces d'interès a la pantalla. Més sobre això en un moment. Mentrestant, hi ha alguns petites funcions en aquí. Una d'elles és que hideInfo simplement tanca la finestra d'informació. Una altra funció aquí, que en última instància no serà massa llarg, treure marcadors. Això va a desfer el que sigui la seva funció de marcador add fa. I llavors aquí és la recerca. I aquest és interessant perquè ens haver escrit el codi JavaScript que és va a parlar amb search.php al servidor i tornar alguna resposta. 

Vostè, per descomptat, seguirà necessitarà implementar search.php, però hem implementat el Codi JavaScript que és va a manejar en realitat dur a terme Cerca des d'aquest quadre de text. En particular, la notificació que aquesta funció aquí, recerca, no cridi search.php per un mètode anomenat obtenir JSON, que vam veure a classe. I la sintaxi aquí és una mica diferent de conferència en la qual estem usant jQuery l'anomenada interfície promesa. Més sobre això en l'especificació. Això simplement vol dir per a la nostra propòsits ara que hi ha són dues funcions especials que necessita trucar amb la notació de punt aquí immediatament després de cridar a aconseguir JSON. Un es diu fer. Un es diu fallen. Vostè pot pensar en aquests com el controlador d'èxit i el gestor de fallades només en cas que alguna cosa va malament. 

Ara donem una ullada a l'última parell de funcions en aquest arxiu. Aquí sota és una funció anomenat showInfo, que mostra informació en un dels info petites finestres que apareix quan l'usuari fa clic a un marcador. Aquí sota addicional és que la funció d'actualització que hem implementat per a vostè. Es determina els límits del mapa. Quines són les coordenades GPS de la seva cantonades nord-est i sud-oest d'aquí. Hem preparat alguns paràmetres HDP aquí i després els va passar en última instància, a update.php, que hem També implementat per a vostè. Que finalment aconsegueix recuperar part JSON des de l'arxiu anomenat update.php i després elimina qualsevol marcadors a la pantalla i després itera sobre les dades que ha tornat de update.php, que de nou és simplement una matriu JSON. I llavors s'afegeix en última instància, un marcador de cada un d'aquests llocs, insuficiència manipulació o errors que podria molt bé succeir. 

Ara només has de donar-te una idea de com es podria anar sobre la depuració d'aquest projecte, m'adono que he obert a avançar en aquesta fitxa aquí a aquesta URL, pset8 / articles.php? geo = 02138. Ara, de nou, articles sobre PHP implementem per a vostè pel que aquest no és tant el podràs fer servir depurar, sinó més aviat la tècnica. Tingueu en compte que he buscat El codi postal de Cambridge aquí, i m'he quedat enrere, de fet un JSON varietat d'objectes JSON dins dels quals són dos keys-- enllaç i el títol. 

Així aquesta funcionalitat treballa ja per a vostè. Però aquesta tècnica de forma manual va a un URL com aquesta per alguna cosa com search.php? geo = cambridge o 02138 o qualsevol que sigui l'usuari ha escrit a ha de de gran valor com vostè, vostè mateix, intenta d'esbrinar exactament si o per què search.php està funcionant o no. 

En última instància, llavors, vostè té alguns Tots davant. Esteu primera implements que script d'importació que llegeix en us.text a la base de dades. Vostè està llavors necessitarà per implementar search.php de manera que es comporta exactament com s'especifica. Vostè està llavors voldrà centrar-se en scripts.js i implementa en última instància aquest parell de Tots, fins i tot per a configurar i aquesta plantilla, afegir marcadors, treure marcadors, i a continuació, l'última, però no menys important, un toc personal. 

Un cop s'hagi posat en funcionament mashup bastant com la nostra, l'objectiu a la mà és perquè vostè afegir un personal toc per la seva mashup, ja sigui estètica o funcional. Prengui el mashup sempre tan lleugerament al següent nivell. Sempre que vostè s'empeny més enllà la seva familiaritat amb la mateixa especificació i recollir una tècnica nou, fins i tot si és només alguna cosa estètic com canviar el disseny del mapa que utilitzeu, l'abast que esperem serà satisfet. Això és, doncs, de problemes 8 Mashup. Estiguin atents per més en el especificació i millor de les sorts fer front a aquest, el seu últim Problema CS50 establert mai. 

[REPRODUCCIÓ DE MÚSICA]