[Música tocando] 

DAVID J. Malan: Ola. Imos dar un paseo pola Problema Set 8 Mashup, que vai desafia-lo a basearse en elementos a Google Maps con elementos de Google News and mash Los xuntos nun applet web que Permite que o usuario buscar un mapa para noticias locais para cidades específicas, cidades e códigos postais. Para iso, imos integrar algunhas HTML, CSS, PHP, SQL, JavaScript, e unha técnica xeralmente coñecido como AJAX en orde para crear esta inmersa experiencia do usuario. 

Imos primeiro ao propio Google. Isto, naturalmente, é posible que unha interface familiar. Pero resulta que Google Maps Tamén fornece unha aplicación API-- a través do cal a programación interface-- pode tomar elementos de Google Maps e integralos en as súas propias aplicacións. De feito, ao longo desta proceso, vai para atopar un par de URL especialmente útil que son mencionados na especificación para Problem Set 8, especificamente esta Introdución Guía ou a Guía do desenvolvedor a Google Maps API versión 3, así como a API de Google Maps JavaScript v3 de referencia, que é un pouco máis misterioso para ler pero, en realidade, ten todo o nivel máis baixo detalles sobre o que funciona ou métodos e obxectos e propiedades e eventos realmente veñen coa API, moi semellante en espírito para [inaudível] páxinas. 

Agora, se imos dar un ollo en Google News, vai quizais ver unha interface familiar aquí. Pero resulta que tamén pode buscar Google News para xeografías específicas a través dun parámetro HTTP chamado geo. En realidade, se eu aumentar o zoom ata aquí, vai ver que Estou en news.google.com/news/section?geo=02138. E, de feito, se eu aumentar a fóra, vai ver que eu son mirando para unha páxina con unha morea de puntos de vista sobre Cambridge, Massachusetts. 

Mentres tanto, se realmente cambiar a URL para non ser un código postal como este, pero algo un pouco máis confusa como Cambridge, Massachusetts +, onde a vantaxe é do xeito que codificar un carácter de espazo nunha URL e prema Intro, vai ver que realmente ver case a mesma noticia. Quizais sexa un pouco diferente porque, en realidade, Cambridge ten varios códigos postais. Agora como eu ía saber isto e, En realidade, como eu podería dalgún xeito amarre cidades e vilas para códigos postais en caso de eu quere facer que o usuario a ollar para arriba, quere? Ben, resulta que hai un sitio aí chamado geonames.org que é unha iniciativa de ter unha base de datos de todos libremente dispoñibles tipo de información xeográfica, non só para os Estados Unidos, pero tamén a outros países tamén. En realidade, se eu for a este URL aquí, que Tamén é mencionado no conxunto de problemas especificación, vai ver que tres Lista de unha morea de arquivos zip calquera que se pode descargar por ti. De feito, para este conxunto de problemas vai baixar us.zip. Agora dentro deste arquivo, é un todo banda de datos en formato de texto. Os ficheiros é moi semellante a un CSV-- Comma Separated Values ​​file-- pero, en realidade, usa guías para demarcar campos. Agora, mentres tanto, se ollar aquí o que me destacou, os campos neste arquivo están indo para ser cousas como códigos de países, códigos postais, nomes de lugares, e logo, dunha forma ou outros, estados e municipios, comunidades, e moito máis. En realidade, eu xa descarga deste ficheiro con antelación. Deixe-me ir adiante e abrilo aqui-- us.text-- e, en realidade, vai ver se eu rolar para abaixo para a liña 16792 verás algúns rexistros de Cambridge, Massachusetts e os seus varios códigos postais. O que tamén ve alí é o concello, algúns números que realmente non comprender, pero tamén todos o camiño á dereita, algúns GPS coordinates-- latitude e lonxitude. Isto é óptimo porque un dos os recursos de Google Maps API é a capacidade de detectar onde está xeograficamente en termos de coordenadas GPS. 

Agora imos comezar a descubrir como comezar a amarrar esas cousas xuntas. Nós demos-lle un todo chea de código de distribución, así como base de datos MySQL. En realidade, se eu tirar un phpMyAdmin ter xa descargados, como pronto, pset8.SQL, verás unha táboa MySQL que parécese tanto, un campo ID, país código, código postal, nome da cidade e moito máis. Tipo de todos aqueles columnas I derivada simplemente lendo o readme.text arquivar aquí que especificar un campo é un número enteiro, ou varchar ou semellantes. 

Entón creamos esta táboa para e lle deu os comandos SQL para realizar a crear ese táboa no seu propio banco de datos, pero non hai, en realidade, non hai datos nel aínda. Pola contra, vai ter que descargar us.zip ou zip de calquera país arquivo daquel URL alí. E entón vai ter que escribir un guión da liña de comandos en PHP que é abrirá este texto arquivo, interactuar sobre as súas liñas, e, a continuación, para cada un dos estas liñas facer unha inserción en que pon a táboa na súa base de datos MySQL. Así, a finais deste proceso, vai ter executado este script en última instancia só unha vez, en teoría. En realidade, probablemente, executa-lo unha morea de veces ao tentar resolver varios erros. 

Finalmente, vai ter un realmente grande base de datos con miles e miles de liñas xeográficas. Logo vai poñer esta importación script de lado xa que funciona e base de datos é bo e correcto, e, a continuación, vai pasar realmente aplicar o propio mashup. O mashup vai mirar un pouco algo así. No mashup.cs50.net, nós ten unha solución persoal que parece un pouco algo así. En realidade, se eu premer neste xornal icona para Cambridge, Massachusetts, podes ver unha fiación Icona brevemente e logo, unha lista ordenada, unha lista con marcas de artigos Relacionado coa Cambridge, Massachusetts. Se eu premer en Charlestown, Massachusetts, Vou ver o mesmo para aquela cidade. E se eu premer en Watertown, Massachusetts, pode non haber ningún noticias de de Watertown, así vai ver algo como o día de poucas noticias. 

Agora, mentres tanto, na esquina superior esquerda son algúns familiares controis Google Maps para deixalo reducir, pan cara arriba, abaixo, esquerda e dereita, pero tamén unha caixa de busca que poñemos alí. Entón, se eu buscar, francamente, o único outro código postal Sei, 90210, imos realmente ver Beverly Hills, California. Cando premendo el me leva a California e un grupo enteiro de noticias sobre Beverly Hills. Agora observe, tamén, o que pasou alí. Se eu esta busca tempo para 02138 ou mesmo Cambridge Massachusetts comas ou algúns variante, que obtén un pouco suspendida autocomplete. Agora iso é usar un plugin para unha biblioteca chamada jQuery, e ese plugin chámase typeahead. Nós simplemente ler a documentación, a descarga do ficheiro .js integrada no código de distribución de modo que en definitiva, pode escribir o código que enche este menú dropdown coa auto seleccións ou as suxestións de automóbiles. 

Agora o código de distribución, con todo, que recibiu non fai case tanto como. Colle o mapa de Google incorporado e tes os controis na parte superior esquerda, e comeza a caixa de busca. Pero se eu escribir algo como 02138, non hai lugares se atopan aínda. Así que será un dos nosos obxectivos aquí. Ademais, se der un paso cara atrás e ollar para o propio mapa, non hai ningunha noticia calquera. Mesmo se eu premer e arrastre, en realidade non hai marcadores aparecen á noticia, porque iso reto é deixar para ti tamén. 

Imos dar un ollo a continuación, no código de distribución. Unha vez que teña baixo pset8.zip e abriu o zíper no seu directorio vhost no CS50 Appliance, vai ver estes directorios aquí dentro. Bin-- que xeralmente significa binario para programs-- executable inclúe, como en pset7, algúns PHP arquivos que outros ficheiros inclúen, logo público, que é os ficheiros que necesitan para ser accesible ao público para un usuario cun navegador. Imos dar un ollo ao bin, e nós imos ver que hai un ficheiro xa chamado Import. Se abrimos esta con gedit, veremos que, por desgraza, non hai moito alí. Todo o que está aí, no entanto, é unha cousa toda enriba que especifica cales interpreter-- neste caso PHP-- debe utilizar para realmente executar este ficheiro. Pero, entón, onde se di TODO é o lugar onde está indo a necesidade de escribir un código que probablemente require a configuración ficheiro que está no directorio inclúe como fixemos antes con arquivos PHP. E entón vai ten que abrir algunha maneira se us.text onde presuntamente xa descomprimido. Entón vai ter que iterado sobre as liñas deste arquivo, quizais usando algunhas das funcións suxerido na especificación. Logo insira cada un destes liñas na base de datos MySQL usando a función de procura, o que temos novo sempre que com-- ou, polo menos, unha variante mesmos en functions.php, que veremos en só un momento. 

Agora imos pechar importación e volver nosa dirección e esta vez vai en inclúe. E se eu fai ls alí, vai ver tres arquivos moi como Conxunto de problemas 7. E imos dar un ollo rápida, por exemplo, no config.php. De alí, é menos liñas que antes, e el Parece que este ficheiro inclúe constants.php e functions.php. Utilizamos un pouco diferente técnica desta vez para realmente especificar que estes arquivos son relativos ao directorio actual __ DIR__ representa calquera directorio este arquivo, config.php é en si mesmo en. Polo tanto, esta é unha forma máis xeito explícito especificar o que os outros arquivos que quere esixir. 

Agora, se eu pechar este ficheiro e abrir constants.php no seu lugar, verás un arquivo moi reminiscente a do ben, aínda que Problem Set 7 con unha base de datos diferente chamado pset8. Finalmente, en functions.php, imos ver só unha función esta vez chamado consulta. Isto é case o mesmo, agás lidamos erros esta vez un pouco de forma diferente, pero é uso é o mesmo que no conxunto de problemas de sete. 

Agora imos voltar á nosa pset8 directorio, entrar en público, e alí se eu fai ls, verás isto-- articles.php, index.html, search.php, e update.php-- todos os ficheiros. E entón a fontes css, img, e directorio js bastante como pset7. 

Imos dar un ollo index.html, que é vai ser realmente o punto de entrada ao smashup. Agora en index.html, verá un todo banda de elementos de conexión na cabeza, especificamente, para o arranque para o noso propio CSS seguido por unha morea de guión etiquetas para cousas como a mapas, API en si, un marcador especial con etiqueta utilidade que mencionados na especificación está dispoñible para ti, propio jQuery, de bootstrap en si, e outra biblioteca chamado subliñado que falamos no spec. Underscore.js como jquery.js é unha biblioteca JavaScript que ten unha morea de funcionalidade que unha morea de persoas no mundo de desexos existiron na propia JavaScript. Entón, todos estes son realmente moi popular. Tamén xa mencionei typeahead que é a biblioteca que fai iso suspendida autocomplete e finalmente, unha ligazón para o noso propio JavaScript. 

Mentres tanto, e quizais por sorte, este mashup é conducido por relativamente pouco HTML aquí abaixo na parte inferior. Teña en conta que temos indicado un div en noso corpo de fluído clase-container. Este, á Bootstrap de documentación, só significa que este div vai cubrir o viewport ou fiestra do navegador totalmente. 

Mentres tanto, a continuación que temos unha div que está aberta e inmediatamente pechada con identificador único do mapa lona. Este momento é de Google Documentación Mapas para a súa API, en que eu simplemente debe ter un div baleiro no que a inxectar, en definitiva, un real de Google. Pero máis sobre isto en só un bit. 

Finalmente, hai un formulario aquí dentro que aplica a caixa de texto na parte superior á esquerda na nosa interface para investigación. Teña en conta que usamos un pouco de arranque aquí demasiado-- cousas como fórmase liña e fórmase grupo. Nós demos ao ex- ID único do formulario. E entón, en definitiva, eu realmente teño un tipo de entrada, que é moi familiar, cuxo ID é q. Só unha convención. Q para query-- podería foi chamado de calquera cousa. E entón, o espazo reservado, con todo, é cidade, provincia, e código postal que ten que se lembrar vendo no noso mashup de demostración antes. Imos pechar este ficheiro. 

Agora, bótalle un ollo nos arquivos PHP que agardar e, a continuación, os ficheiros JavaScript. Nos nosos arquivos PHP, temos xa aplicadas para ti, por exemplo, actualizacións. Update.php-- non imos gastar unha enorme cantidade de tempo en aqui-- en poucas palabras é o ficheiro que o noso Código JavaScript está pasando entrar en contacto vía AJAX que técnica asíncrono que é incorporado JavaScript nestes días que é vai permitir-nos a preguntar update.php para máis información. 

En concreto, a calquera hora o usuario arrastra o mapa ou executa unha busca que salta o usuario a outro lugar, o noso código JavaScript, como veremos en breve, é vai chamar update.php e pedir 10 ou máis etiquetas dentro da ventá de visualización con base sobre as coordenadas GPS da parte superior e inferior cantos do mapa. Podemos, entón, repoboar o mapa agora que o usuario pasou a pantalla, a fin ver 10 probablemente novo etiquetas para diferentes cidades. Mentres tanto, este arquivo é, en última instancia indo para executar unha consulta SQL contra o noso banco de datos táboa chamada lugares que volverá aqueles 10 ou menor número de lugares. 

Mentres tanto, en articles.php, é outro arquivar temos escrito na súa totalidade. É moi semellante ao espírito Función Proc do Conxunto de problemas 7, que contactado Yahoo Finance para ti. Este ficheiro de contactos de Google Noticias para ti, en definitiva, agarrando unha máquina de lectura version-- en algo chamado RSS format-- da noticia a Cambridge ou Beverly Hills ou o que quere que cidade investigou para con base nese geoparâmetros. Nós analizar ese RSS, que é só unha tipo de linguaxe de marcado chamada XML, e entón nós realmente devolve-lo ao seu navegador e ao seu código JavaScript, especificamente, nun formato de chamada JSON, JavaScript Object Notation. Agora vai ver na specification-- nós sinala-lo en como pode realmente ver algúns dos traseira-- benvida JSON que esta función en definitiva permite cubrir eses menús emerxentes de xeito que cando fai clic nun marcador no mapa realmente ve un grupo enteiro de balas, cada un dos cales ligazóns a unha páxina. 

Agora imos dar un ollo a un último Arquivo PHP que, por sorte, non fai ten moita cousa a suceder on-- só un ben grande TODO. Agora este ficheiro declara un array chamado lugares. E, a continuación, en definitiva, impresións esa matriz en JSON format-- pretty imprimindo-lo só para que as cousas son máis fáciles de depurar. Desafortunadamente, o medio hai este TODO, que apela lle buscar o base de datos para as partes correspondentes a geo HTTP parámetro. 

E, de feito, iso vai ser un dos seus challenges-- para aplicar esta funcionalidade aquí de xeito que cando vostede poñerse en contacto con este arquivo con unha URL como investigación. php? geo = algo, seu código acabará voltar un JSON matriz de todos os lugares no seu táboa de base de datos que corresponden a esta entrada. Polo tanto, se o usuario escribe en Cambridge, seu arquivo aquí search.php debe finalmente retornar unha matriz JSON para todos os xogos de Cambridge, que se pode en Massachusetts pero podería ser aínda en calquera outro lugar. 

Por último, imos dar un ollo en dous arquivos que están ultimately-- estática seu arquivo CSS e seu arquivo JavaScript. Se eu entrar no noso directorio CSS, hai todo un conxunto de arquivos de alí, pero a maioría deles son bibliotecas. Vou dar un ollo, En concreto, a styles.css, que é o noso propio CSS global que é indo estilizar todo este mashup. Vou deixar para a ler Os comentarios aquí, pero, en poucas palabras, este é o CSS que asegura que o noso mashup, por defecto fóra da caixa, parece exactamente do xeito que queremos ele-- co mapa de encher o porto vista e coa busca caixa-se na parte superior esquerda. Tamén tomei a liberdade de estilizando que Dropdown typeahead Menú algo tamén. 

O ficheiro máis importante quizais a este problema establecer É esta última, scripts.js. Dentro do seu directorio JS é aínda máis ficheiros. Todos eles son ficheiros de biblioteca excepto para un regalo, scripts.js. Se abrimos isto, imos dar o noso última xira a través das funcións que son incorporadas a este ficheiro para ti e chamada de atención para os todos que temos por diante. 

Na parte superior deste arquivo, Son tres variables globais. Un a un mapa, que vai ser un referente para o noso mapa de Google. Podes pensar niso tipo de como un punteiro. Mentres tanto, temos outra variable global Información chamada, o que parece ser almacenar o valor de retorno dunha chamada a nova google.maps.InfoWindow. JavaScript soporta obxectos que son moi similares en espírito á Struts. E o que esta liña para nosos propósitos está facendo está creando un novo Información fiestra na memoria e, a continuación manter en torno a unha referencia do mesmo, a unha variable chamada Info. E entre aqueles, con todo, é o que parece ser un baleiro JavaScript array chamado marcadores. Todos estes iconas de xornal, ou pode escoller un ícone completamente, van ser gardados en definitiva, esta matriz de xeito que podemos facilmente engadir o mapa e eliminar-los do mapa. 

Agora imos rolar para abaixo un pouco e Whiz a través do código que será executada logo que o documento ou DOM modelo de obxecto ou o propia páxina está preparado. Lembre que esta sintaxe aquí simplemente especifica que o código a seguir só debe ser executada cando o navegador rematou Cargando o resto. 

Nós primeiro declarar unha todo grupo de estilos, que acaban stylizing o mapa de acordo coa especificación. Nós, entón, declarar unha todo morea de opcións, que personalizar aínda máis o Google mapa que estamos a piques de incorporar. Logo usan un pouco de código jQuery, que se explica en detalle un pouco máis no spec, para coller ese elemento, o mapa-canvas que identificamos de forma exclusiva. E entón esa liña aquí é o que parece Magic darnos un mapa de Google dentro nosa propia aplicación, almacenando unha referencia a este nesa variable chamado mapa. 

Finalmente, aquí registamos o que se chama un ouvinte. Pense xeito traseira--, camiño traseira-- a semana cero no CS50 cando miramos para cero e o seu apoio a través dunha andaina a través de cousas chamadas eventos e transmisións. Pode non ter usado Lo só, pero é un mecanismo polo cal un navegador, neste caso, pode chamar a nosa atención cando é realmente preparado para realizar algún código. Neste caso, vai escoitar para o mapa para un evento chamado ausente. Isto significa que o navegador ten rematar de cargar o mapa de Google. Neste punto, unha función chamada configure debe, en última instancia ser executado. Esta función, configurar imos ver, está escrito por nós. 

Agora aquí é unha función que, por desgraza, é só un marcador TODO add. Per o spec. vai ter para escribir o código que realmente engade un marker-- parécese como un xornal ou unha tachinha, ou algo else-- ao mapa de Google. Aquí, agora, é que a función chamado configure. Vou deixar para a ler por iso con máis detalle, pero entendemos que engadir Un grupo máis oíntes para que poidamos realizar código cando o usuario fai clic e arrastra o mapa. Temos tamén o código aquí que arrinque este plugin typeahead de xeito que a lista despregable Menú realmente funciona. 

Pero imos concentrar en só un nalgúns lugares aquí. En concreto, esta a facer aquí. Vou retrasar a en liña documentación e especificación para saber como encher este TODO. Pero en poucas palabras, esta biblioteca typeahead permite que pase no que é xeralmente coñecido como un modelo, que ten uns espazos reservados variables moi similares ao espírito% do printf. * s. Pero neste caso, o template por especificación permite especificar Que variables quere a administración a partir de datos que está a benvida de volta de algo así como o PHP arquivos que escribiu que son emisores de saída JSON. 

Agora aquí entendemos que somos escoita para as seleccións typeahead cando o usuario realmente conduce a procura e selecciona un valor. Esta é a forma na que estamos, en realidade, Vai escoitar para que e executar un código como un resultado. A continuación, continuar a configurar o mashup só un pouquiño. E, en definitiva, a que chamamos esta actualización función. El actualiza os marcadores na pantalla. Máis sobre isto en só un momento. Mentres tanto, hai algúns pequenas funcións en aquí. Unha delas é que hideInfo simplemente pecha a InfoWindow. Outra función aquí, o que, en última instancia non será por moito tempo, eliminar marcadores. Isto vai desfacer o que quere súa función de marcador add fai. E, a continuación, para abaixo aquí é investigación. E iso é interesante porque nós escribir o código JavaScript que se vai falar con search.php no servidor e volver algunha resposta. 

Vostede, por suposto, vai aínda Debe aplicar search.php, pero temos implantado o Código JavaScript que é enfrontará realmente executar Procuras de que a caixa de texto. En particular, o aviso previo que esta función aquí, investigación, pon search.php a través dun método chamado obter JSON, que vimos na charla. E aquí a sintaxe é un pouco diferente desde charla na que estamos usando jQuery chamado interface de promesa. Máis sobre iso na spec. Isto significa simplemente para o noso propósitos agora que hai son dúas funcións especiais que que chamar coa notación de punto aquí inmediatamente despois chamar obter JSON. Un chámase feito. Un chámase fallar. Podes pensar niso como o manipulador de éxito eo manipulador de fallo só no caso de algo vai mal. 

Agora imos ollar para o pasado par de funcións neste arquivo. Aquí abaixo é unha función chamado showInfo, que mostra a información nun deses Información de pequenas fiestras que aparece cando o usuario fai clic nun marcador. Aquí abaixo é aínda máis que a función de actualización que temos implementado para ti. Ela determina os límites do mapa. Cales son as coordenadas GPS da súa nordeste e suroeste cantos aquí. Nós preparamos algúns parámetros HDP aquí e, a continuación, pasou por eles, en última instancia para update.php, o que temos tamén aplicado para ti. Que finalmente recibe de volta algúns JSON a partir do ficheiro chamado update.php e, a continuación, elimina calquera marcadores na pantalla e, a continuación, itera sobre os datos que está de volta de update.php, que novo é só unha matriz JSON. E, a continuación, en definitiva, engade un marcador cada un destes lugares, tratamento de erros ou erros que pode moi ben ocorrer. 

Agora é só para lle dar un gostinho de como pode ir sobre depuración este proxecto, entender que eu xa abriu en avanzar esta guía aquí a este URL, pset8 / articles.php? geo = 02138. Agora, de novo, artigos sobre PHP Implementar para ti de xeito que este non é tanto o que vai estar usando depurar, mais si a técnica. Teña en conta que eu teño procurado por CEP de Cambridge aquí, e eu puiden volver, de feito, un JSON matriz de obxectos JSON dentro do cal son dous conexión keys-- e título. 

Polo tanto, esta función xa funciona para ti. Pero esta técnica de man indo a unha URL como esta para algo así como search.php? geo = Cambridge ou 02138 ou o que quere que o usuario introduciu no debe probar inestimable como ti, mesmo, proba para descubrir exactamente por iso que se debe ou search.php funciona ou non. 

En definitiva, entón, ten algúns Todos á fronte de ti. Vai primeiros implementos que script de importación que le en us.text na súa base de datos. Está logo vai ter para aplicar search.php de xeito que se comporta exactamente como especificado. Está logo vai querer para concentrarse en scripts.js e, finalmente, aplica aqueles par de Todos, ata para configurar e ese modelo, engadir etiquetas, eliminar etiquetas, e entón durar, pero non menos importante, unha toque persoal. 

Despois de ter o seu traballo mashup así como o noso, a meta na man é para engadir un personal tu mashup, se é estético ou funcional. Leve o mashup sempre así lixeiramente ao seguinte nivel. Sempre que empurrar-se ademais súa familiaridade coa propia especificación e pegar unha técnica novo, aínda que sexa só algo estética como o cambio da esquema do mapa que está a usar, o alcance que esperamos Estará satisfeito. Iso, entón, é Problema Set 8 Mashup. Sexa conectado para máis no especificación e boa sorte facer fronte a este, o seu último Problema CS50 definir nunca. 

[Música tocando]