[GIOCO MUSIC] 

DAVID J. MALAN: Ciao. Facciamo una passeggiata attraverso Problema Set 8 Mashup, che sta per sfidare a attingere elementi per Google Maps con elementi da Google News e schiacciarle insieme in un applet web che consente a un utente di ricerca una mappa per le notizie locali a città specifiche, città e codici di avviamento postale. Per fare questo, stiamo andando a integrare alcuni HTML, CSS, PHP, SQL, JavaScript e tecnica generalmente noto come AJAX per per creare questa coinvolgente esperienza utente. 

Di prima per Google Maps si Let. Questo, naturalmente, è forse un'interfaccia familiare. Ma si scopre che Google Maps fornisce anche un'applicazione API-- programmazione interface-- via che si può prendere elementi di Google Maps e integrarli in le proprie applicazioni. Infatti, in questo processo, si sta andando per trovare un paio di URL particolarmente utile che sono menzionati nel Specifica per Problem Set 8, in particolare questo Getting Started Guida o Guida per gli sviluppatori per Google Maps API versione 3 e come l'API di Google Maps JavaScript riferimento v3, che è un po 'di più arcano da leggere ma in realtà ha tutte livello inferiore dettagli su cosa funzioni o metodi e oggetti e proprietà e eventi effettivamente venire con l'API, molto simile nello spirito a [incomprensibile] pagine. 

Ora, se diamo uno sguardo a Google News, ti forse vedere un'interfaccia familiare qui. Ma si scopre che si può anche cercare Google News per specifiche aree geografiche tramite un parametro HTTP chiamato geo. In realtà, se lo zoom in qui, vedrete che Sono al news.google.com/news/section?geo=02138. E, in effetti, se lo zoom fuori, vedrete che io sono guardando una pagina con un sacco di opinioni circa Cambridge, Massachusetts. 

Nel frattempo, se ho effettivamente cambiare la URL di non essere un codice postale come questo, ma qualcosa di un po 'di Messier come Cambridge, Massachusetts +, dove il vantaggio è il modo in cui si codifica un carattere di spazio in un URL e premere Invio, vedrai che io in realtà vedere quasi la stessa notizia. Forse è un po 'diverso perché in realtà Cambridge ha molteplici codici di avviamento postale. Ora come faccio a sapere che e, infatti, come potrei in qualche modo cravatta città e paesi di codici di avviamento postale in caso I voler consentire all'utente per cercare uno? Beh, si scopre che non c'è un sito web là fuori chiamato geonames.org che è un'iniziativa di avere un database liberamente disponibile di tutti i tipi di informazioni geografiche, non solo per gli Stati Uniti, ma anche per gli altri paesi. In realtà, se vado a questo URL qui, che è citato anche nel problema set specifiche, vedrete che tre quotazione di un intero gruppo di file zip qualsiasi che può essere scaricato da voi. Infatti, per questo problema impostare si sta andando a scaricare us.zip. Ora all'interno di questo file, è un tutto mucchio di dati in formato testo. I file è molto simile ad una CSV-- Comma Separated Values ​​file-- ma utilizza in realtà schede per delimitare i campi. Ora, nel frattempo, se si guarda qui a quello che ho evidenziato, i campi in questo file sono in corso ad essere le cose come i codici di paese, codici postali, nomi di località, e quindi, in qualche forma o altri, stati e contee, comunità, e altro ancora. In realtà, ho già scaricato questo file in anticipo. Lasciami andare avanti e apro qui-- us.text-- e, anzi, ti vedere se ho scorrere fino alla riga 16.792 vedrete alcuni record di Cambridge, Massachusetts e dei suoi vari codici di avviamento postale. Quello che anche ci vedete è la contea, alcuni numeri che non ho davvero capire, ma anche tutto la strada sulla destra, alcuni GPS coordinates-- latitudine e longitudine. Ciò è grande perché uno dei le funzioni di Google Maps API è la capacità di rilevare dove siete geograficamente in termini di coordinate GPS. 

Ora cominciamo a capire come avviare legare queste cose insieme. Vi abbiamo dato un intero mucchio di codice di distribuzione, così come database MySQL. In realtà, se tiro un phpMyAdmin con già importati, come presto sarà, pset8.SQL, vedrete una tabella MySQL si presenta come tale, un campo ID, paese codice, codice postale, nome della località e più. I tipi di tutti coloro colonne I derivati ​​semplicemente leggendo il readme.text presentare qui che specificato se un campo è un numero intero, o varchar o simili. 

Per questo abbiamo creato quel tavolo per si e dato i comandi SQL da eseguire per creare quella tabella nel proprio database, ma c'è in realtà sono dati in esso ancora. Piuttosto, si sta andando ad avere per scaricare us.zip o zip qualsiasi paese il file da questo URL lì. E poi si sta andando ad avere per scrivere uno script di riga di comando in PHP che è andando ad aprire quel testo presentare, iterare su sue linee, e per ciascuno degli quelle righe fanno un inserto in che pone tavolo nel vostro database MySQL. Così, alla fine di questo processo, ti hanno eseguito lo script alla fine solo una volta in teoria. In realtà, probabilmente vi eseguire un mucchio di volte durante il tentativo di risolvere vari bug. 

In ultima analisi, si sta andando ad avere un davvero grande database con migliaia e migliaia di righe geografiche. Poi si sta andando a mettere che l'importazione sceneggiatura da parte una volta che sta funzionando e il database è bello e corretto, e poi si sta andando a passare alla realtà attuazione del mashup stesso. Il mashup sta a guardare un po 'di qualcosa come questo. A mashup.cs50.net, abbiamo avere una soluzione personale che sembra un po 'qualcosa di simile. Anzi, se clicco su questo giornale icona per Cambridge, Massachusetts, vedrete una filatura icona brevemente e poi un elenco ordinato, un elenco puntato di articoli relativi a Cambridge, Massachusetts. Se clicco su Charlestown, Massachusetts, Ci vediamo la stessa di quella città. E se clicco su Watertown, Massachusetts, potrebbe non esserci alcun notizie da Watertown, così vedrete qualcosa come lento giorno di notizie. 

Ora, nel frattempo, in alto a sinistra sono alcuni familiari di Google Maps controlli per farvi rimpicciolire, pan su, giù, sinistra, destra e, ma anche una casella di ricerca che abbiamo messo lì. Quindi, se cerco, francamente, l'unico altro CAP Lo so, 90210, avremo realmente vedere Beverly Hills, California. Quando cliccato mi porta a California e un mazzo intero di notizie su Beverly Hills. Ora notare, anche, che cosa è successo lì. Se questa ricerca di tempo per 02138 o anche Cambridge Massachusetts virgola o qualche variante di ciò, si ottiene un poco discesa completamento automatico. Ora questo sta usando un plugin per una libreria chiamata jQuery, e che plugin viene chiamato typeahead. Leggiamo semplicemente attraverso la documentazione, Scaricato il .js file integrato nel codice di distribuzione in modo da in ultima analisi, in grado di scrivere il codice che riempie quel menu a tendina con l'auto selezioni o i suggerimenti automatici. 

Ora il codice di distribuzione, però, che avete ricevuto non fa quasi più. È possibile ottenere la Google Map incorporato, e si ottengono i controlli in alto a sinistra, e si ottiene la casella di ricerca. Ma se digito qualcosa di simile 02138, nessun luogo si trovano ancora. In modo che sara ' uno dei nostri obiettivi qui. Inoltre, se si prende un passo indietro e guardare la mappa stessa, non ci sono notizie di sorta. Anche se mi scatto e trascinamento, senza marcatori realtà appaiono notizie perché sfida è lasciato per voi pure. 

Diamo uno sguardo allora il codice di distribuzione. Una volta scaricato pset8.zip e decompresso esso nella directory vhost nel CS50 Appliance, vedrete questi directory qui dentro. Bin-- che generalmente sta per binario per programs-- eseguibile include, come in pset7, alcuni PHP i file che includono altri file, poi pubblico, che è i file che devono per essere accessibile al pubblico a un utente con un browser. Diamo uno sguardo al bin, e faremo vedere che c'è un file c'è già chiamato Import. Se apriamo questo con gedit, vedremo che, purtroppo, non c'è molto là. Tutto quello che c'è, però, è una faccenda in alto che specifica che interpreter-- in questo caso PHP-- dovrebbe essere utilizzato per effettivamente eseguire questo file. Ma allora dove si dice TODO è dove sei bisogno di andare a scrivere del codice che richiede probabilmente il config file è nella directory include come abbiamo fatto prima con i file PHP. E poi si sta andando a necessario aprire in qualche modo su us.text che presumibilmente hanno già decompresso. Poi si sta andando ad avere per iterare sulle righe in quel file, magari utilizzando alcune delle funzioni suggerito nelle specifiche. Quindi inserire ciascuno di questi linee in database MySQL utilizzando la funzione di query, che abbiamo ancora una volta che hai fornito with-- o almeno una variante ciò in functions.php, che vedremo in un attimo. 

Ora chiudiamo l'importazione e tornare alla la nostra directory e questa volta andare in comprende. E se lo faccio ls lì, vedrete tre file piuttosto come un problema Set 7. E diamo un rapido sguardo, per esempio, in config.php. Lì, è meno linee rispetto a prima, e Sembra questo file include constants.php e functions.php. Stiamo usando un po 'diverso tecnica questa volta effettivamente specificano che questi file sono relativi alla directory corrente __ DIR__ rappresenta qualsiasi directory presente file config.php, è di per sé in. Quindi questo è più modo esplicito di specificare quali altri file che si desidera richiedere. 

Ora, se chiudo questo file e aprire constants.php invece, vedrete un file molto ricorda per di così, anche se Problem Set 7 con un altro database chiamato pset8. Infine, in functions.php, vedremo solo una funzione questa volta chiamato query. Questa è quasi la stessa, tranne gestiamo errori questa volta un po ' diversamente, ma è l'uso è gli stessi problemi impostare sette. 

Ora torniamo nel nostro pset8 directory, andare in pubblico, e in là se faccio ls, vedrete questo-- articles.php, index.html, search.php, e update.php-- tutti i file. E poi il font CSS, img, e directory js abbastanza come pset7. 

Diamo uno sguardo a index.html, che è sta per essere davvero il punto di accesso al smashup. Ora in index.html, vedrete un intero mucchio di elementi di collegamento nella testa, in particolare, per il bootstrap per il nostro CSS seguito da un intero gruppo di scrittura tag per le cose come le mappe, API sé, un marcatore speciale con etichetta utility che abbiamo menzionato in specifica è a vostra disposizione, jQuery sé, bootstrap stesso, e un'altra libreria chiamato sottolineatura che si parla nelle specifiche. Underscore.js come jquery.js è una libreria JavaScript che ha un sacco di funzionalità che un sacco di gente nella volontà mondo esisteva in JavaScript sé. Quindi tutti questi sono in realtà molto popolare. Abbiamo anche accennato typeahead che è la libreria che fa che autocomplete discesa e infine, un link al nostro JavaScript. 

Nel frattempo, e forse per fortuna, questo mashup è guidato da relativamente poco HTML qui in basso. Si noti che abbiamo specificato un div in il nostro corpo di liquido classe container. Questo, per bootstrap del documentazione, basta significa che questo div sta per riempire il viewport o la finestra del browser completamente. 

Nel frattempo, al di sotto che abbiamo un div che è aperto e immediatamente chiuso con l'ID univoco della mappa. Questo è ora da Google Documentazione Maps per la sua API, per cui ho semplicemente bisogno di avere un div vuoto in cui iniettare, in ultima analisi, un vero e Google Maps. Ma più che in appena un po '. 

Infine, c'è un modulo all'interno di qui che implementa la casella di testo in alto in alto a sinistra in nostra interfaccia per la ricerca. Si noti che abbiamo usato un po 'di bootstrap qui too-- cose come forma-linea e forma-gruppo. Abbiamo dato il primo ID univoco del modulo. E poi, alla fine, io in realtà sono un tipo di ingresso, che è abbastanza familiare, il cui ID è q. Solo una convenzione. Q per query-- potrebbe avere stato chiamato niente. E poi il segnaposto, nel frattempo, è la città, lo stato, e il codice postale che si potrebbe ricordare vedendo nel nostro mashup demo precedente. Chiudiamo questo file. 

Ora date un'occhiata ai file PHP che attendere e quindi i file JavaScript. Nelle nostre file PHP, abbiamo già implementato per voi, per esempio, gli aggiornamenti. Update.php-- noi non spendere un enorme quantità di tempo su qui-- in poche parole è il file che il nostro Codice JavaScript sta andando contattare via AJAX che tecnica asincrona che è costruita in JavaScript in questi giorni che è andando a permetterci di chiedere update.php per ulteriori informazioni. 

In particolare, in qualsiasi momento l'utente trascina la mappa o esegue una ricerca che salta l'utente in un'altra posizione, il nostro codice JavaScript, come vedremo tra poco, è chiamerà update.php e chiedere 10 o giù di lì marcatori all'interno della finestra base sulle coordinate GPS della parte superiore e inferiore angoli di quella mappa. Possiamo poi ripopolare la mappa ora che l'utente ha spostato la schermata per per vedere 10 probabilmente nuovo marcatori per diverse città. Nel frattempo, questo file è in ultima analisi, andando ad eseguire una query SQL contro la nostra banca dati luoghi da tavolo chiamato che sta per tornare quelli 10 o meno punti. 

Nel frattempo, in articles.php, è un altro file che abbiamo scritto nella sua interezza. E 'molto simile nello spirito Funzione CERCA di Problem Set 7, che contattato Yahoo Finance per voi. Questo file contatti di Google News per voi, in ultima analisi, afferrando un leggibile macchina version-- in qualcosa chiamato RSS format-- della notizia per Cambridge o Beverly Hills o qualunque paese che hai cercato per basata su quella geoparameter. Noi analizziamo quella RSS, che è solo un tipo di linguaggio di markup chiamato XML, e poi abbiamo effettivamente restituirlo al vostro browser e al codice JavaScript, in particolare, in un formato chiamato JSON, JavaScript Object Notation. Ora si vedrà nel specification-- segnaliamo voi a come si può effettivamente vedere alcuni dei JSON venuta back-- che questa funzionalità in ultima analisi, consente di inserire quei menu popup così che quando si fa clic su un marcatore nella mappa in realtà vede un sacco di proiettili, ciascuna delle quali link ad un articolo. 

Ora diamo un'occhiata a un ultimo File PHP che, per fortuna, non hanno molto andare on-- solo una bella grande TODO. In questo momento questo file dichiara un array chiamato luoghi. E poi, in definitiva, stampe che array in JSON format-- pretty-stampa solo in modo che le cose sono più facili da eseguire il debug. Purtroppo, in mezzo c'è questo TODO, che chiede di cercare il database per posti che corrispondono a un geo HTTP parametro. 

E, in effetti, questo sta per essere uno dei vostri challenges-- per implementare questa funzionalità qui in modo che quando si contattare questo file con un URL del tipo di ricerca. php? geo = qualcosa, il codice alla fine tornare a JSON array di tutti i posti nel vostro tabella di database che corrisponde a quella di ingresso. Quindi, se l'utente a Cambridge, il file qui search.php dovrebbe infine restituire un array di JSON per tutte le partite di Cambridge, che potrebbe essere in Massachusetts ma potrebbe essere anche altrove. 

Infine, diamo uno sguardo a due i file che sono ultimately-- statico il file CSS e file JavaScript. Se vado nella nostra directory CSS, c'è un sacco di file lì, ma la maggior parte di essi sono librerie. Io vado a dare un'occhiata, in particolare, a styles.css, che è il nostro CSS globale che è andando a stilizzare tutta questa mashup. Lascio a voi di leggere attraverso i commenti qui, ma, in poche parole, questo è il CSS che assicura che la nostra mashup, per impostazione predefinita, fuori dalla scatola, appare esattamente il modo in cui vogliamo it-- con la mappa riempimento della porta di visualizzazione e con la ricerca box in alto in alto a sinistra. Abbiamo anche preso la libertà di stilizzazione che typeahead discesa menù un po 'pure. 

Il file più importante forse per questo problema impostare è quest'ultimo, scripts.js. All'interno della directory JS è anche più file. Tutti loro sono file di libreria tranne per questo, scripts.js. Se apriamo questo in su, diamo il nostro ultimo tour attraverso le funzioni che sono costruiti in questo file per voi e per l'attenzione chiamata alle TODOs che ci attendono. 

Nella parte superiore di questo file, sono tre variabili globali. Una per una mappa, che sta per essere un riferimento alla nostra mappa Google. Si può pensare di esso sorta di come un puntatore. Nel frattempo, abbiamo un'altra variabile globale chiamato info, che sembra essere memorizzare il valore di ritorno di una chiamata di nuovo google.maps.InfoWindow. JavaScript supporta oggetti sono molto simile nello spirito a Struts. E che questa linea per i nostri scopi sta facendo è la creazione di un nuovo Info Finestra in memoria e poi mantenendo intorno a un riferimento ad essa in una variabile denominata Info. E tra questi, nel frattempo, è ciò che appare essere un JavaScript vuota array chiamato marcatori. Tutte queste icone di giornale, o potrebbe scegliere un'altra icona del tutto, stanno per essere memorizzati in ultima analisi, in questo array in modo da poter facilmente aggiungere la mappa e li rimuove dalla mappa. 

Ora diamo scorrere verso il basso un po 'e mago attraverso il codice che sta per essere eseguito non appena il DOM o il documento modello a oggetti o la pagina stessa è pronta. Ricordiamo che questa sintassi qui specifica semplicemente che il codice seguente deve essere eseguito solo quando il browser è terminato caricare tutto il resto. 

Per prima cosa dichiariamo una tutta una serie di stili, che finiscono stilizzazione la mappa secondo le specifiche. Abbiamo poi dichiariamo un sacco di opzioni, che personalizzare ulteriormente il Google mappa che stiamo per incorporare. Utilizziamo quindi un po 'di codice jQuery, che è spiegato in un po 'più in dettaglio nelle specifiche, per afferrare tale elemento, carta-tela che abbiamo identificato in modo univoco. E poi questa linea qui è ciò che sembra a noi dare magicamente una mappa di Google all'interno di la nostra applicazione, memorizzare un riferimento a tale in quella variabile denominata mappa. 

Infine, qui registriamo quello che chiama un ascoltatore. Pensate modo back--, modo back-- in settimana zero nel CS50 quando abbiamo guardato Scratch e il suo sostegno attraverso una passeggiata through per cose chiamate eventi e trasmissioni. Non potrebbe avere usato da soli, ma è un meccanismo per cui un il browser in questo caso può ottenere la nostra attenzione quando è pronto ad eseguire effettivamente codice. In questo caso, sta andando ad ascoltare alla mappa per un evento chiamato inattività. Ciò significa che il browser ha terminato il caricamento della mappa di Google. A questo punto una funzione chiamata configure dovrebbe in ultima analisi, essere eseguito. Tale funzione, configurare, vedremo, è scritto da noi. 

Ora qui è una funzione che, purtroppo, è solo un marcatore TODO add. Per le specifiche. si sta andando ad avere bisogno scrivere il codice che effettivamente aggiunge un marker-- se sembra come un giornale, o una puntina, o qualcosa else-- alla mappa di Google. Ecco ora è che la funzione chiamato configure. Lascio a voi di leggere attraverso questo più in dettaglio, ma si rende conto che aggiungiamo un mazzo più ascoltatori in modo da poter eseguire il codice quando il utente fa clic su e trascina la mappa. Abbiamo anche il codice qui che inizializza quel plugin typeahead in modo che la discesa Menu effettivamente funziona. 

Ma concentriamoci solo su un paio di posti qui. In particolare, questo da fare qui. Mi rimetto alla linea la documentazione e le specifiche per come compilare questo TODO. Ma in poche parole, questa biblioteca typeahead consente di passare in quello che è noto come modello, che ha alcuni segnaposto variabili molto simile nello spirito al di printf%. * s. Ma in questo caso, la modello per le specifiche consente di specificare quali variabili vuoi per iniettare dai dati che è venuto indietro da qualcosa come il PHP file che hai scritto che emettono uscita JSON. 

Ora qui rendiamo conto che siamo ascolto per le selezioni typeahead quando l'utente effettua effettivamente una ricerca e seleziona un valore. Questo è il modo in cui siamo realmente andare ad ascoltare per quello ed eseguire del codice di conseguenza. Poi continuiamo a configurare il mashup solo un po '. E, in ultima analisi, che noi chiamiamo questo aggiornamento funzione. Esso aggiorna i marcatori sullo schermo. Più su quello in un attimo. Nel frattempo, c'è un paio piccole funzioni in qui. Uno dei quali è che hideInfo semplicemente chiude il InfoWindow. Un'altra funzione qui, che alla fine non sarà troppo lungo, togliere i marcatori. Che sta per annullare qualunque la funzione marcatore add fa. E poi qui è la ricerca. E questo è interessante perché noi hanno scritto il codice JavaScript che è andando a parlare con search.php sulla server e tornare qualche risposta. 

Lei, naturalmente, sarà ancora necessario implementare search.php, ma abbiamo implementato il Codice JavaScript che è andando a gestire realmente eseguire ricerche da quella casella di testo. In particolare, avviso che questa funzione qui, Ricerca, non chiamare search.php con un metodo chiamato ottenere JSON, che abbiamo visto in conferenza. E la sintassi qui è un po 'diverso da lezione in che stiamo usando jQuery cosiddetta interfaccia promessa. Più su che nelle specifiche. Questo significa semplicemente per la nostra scopo ora che ci sono due funzioni speciali che bisogno di chiamare con notazione punto qui subito dopo la chiamata ottiene JSON. Uno si chiama fatto. Uno si chiama fallire. Si può pensare a questi come gestore successo e il gestore di fallimento appena in caso qualcosa vada storto. 

Ora diamo un'occhiata all'ultimo paio di funzioni in questo file. Quaggiù è una funzione chiamato showInfo, che di visualizzare le informazioni in uno di quelli piccole finestre informative che si apre quando l'utente fa clic su un marcatore. Quaggiù ulteriormente è che funzione di aggiornamento che abbiamo realizzato per voi. Esso determina i limiti della mappa. Quali sono le coordinate GPS della sua nord-est e sud-ovest angoli qui. Abbiamo preparato alcuni parametri HDP qui e poi passati definitiva a update.php, che abbiamo inoltre implementato per voi. Che ottiene infine indietro alcuni JSON dal file denominato update.php e poi rimuove qualsiasi indicatori sullo schermo e poi itera su il dato che è tornato da update.php, che ancora una volta è solo una matrice JSON. E poi aggiunge infine un marcatore per ciascuno di questi luoghi, la manipolazione fallimento o errori che potrebbero benissimo accadere. 

Ora solo per darvi un assaggio di come si potrebbe andare sul debug di questo progetto, rendo conto che ho aperto in avanzare questa scheda qui a questo URL, pset8 / articles.php? geo = 02138. Ora, di nuovo, articoli su PHP abbiamo implementato per voi quindi questo non è tanto quello che userete per eseguire il debug, ma piuttosto la tecnica. Si noti che ho cercato CAP di Cambridge, e ho ottenuto di nuovo, anzi, un JSON array di oggetti JSON all'interno del quale sono due collegamento keys-- e titolo. 

Così questa funzionalità già lavora per voi. Ma questa tecnica di manualmente andare a un URL come questo per qualcosa come search.php? geo = cambridge o 02138 o qualunque sia l'utente ha digitato dovrebbe rivelarsi prezioso come voi, voi stessi, provate per capire esattamente se e perché search.php funziona o no. 

In definitiva quindi, si ha alcuni TODOs davanti a voi. Stai andando a primi attrezzi quello script di importazione che legge in us.text nel database. Stai andando poi ad avere bisogno implementare search.php in modo che si comporta esattamente come specificato. Stai andando poi a voler di concentrarsi su scripts.js e implementa definitiva quelli paio di Todos, anche per configure e tale modello, aggiungere marcatori, rimuovere i marcatori, e quindi durare, ma non meno importante, un tocco personale. 

Una volta che hai il tuo lavoro mashup piuttosto come la nostra, l'obiettivo a portata di mano è per voi di aggiungere un personal tocca al tuo mashup, se è estetico o funzionale. Prendete il mashup mai così un po 'al livello successivo. Finché si spinge al di là la familiarità con le specifiche sé e prendere una tecnica nuovo, anche se è solo qualcosa di estetica come cambiare la il layout della mappa che si sta utilizzando, la portata che ci aspettiamo sarà soddisfatto. Che poi è un problema Set 8 Mashup. Restate sintonizzati per di più in specifiche e buona fortuna affrontare questo, la tua ultima Problema CS50 set mai. 

[GIOCO MUSIC]