[REPRODUCCIÓN DE MÚSICA] 

DAVID J. MALAN: Hola. Vamos a dar un paseo a través de Problemas de 8 Mashup, que te va a desafiar a basarían en elementos de Google Maps con elementos de Google Noticias y puré juntos en un applet de web que permite al usuario buscar un mapa para las noticias locales a ciudades específicas, ciudades y códigos postales. Para ello, vamos a integrar algo de HTML, CSS, PHP, SQL, JavaScript, y una técnica de generalmente conocido como AJAX con el fin para crear esta inmersión experiencia del usuario. 

Del primero para sí mismo Google Maps Let. Esto, por supuesto, es quizás una interfaz familiar. Pero resulta que Google Maps también proporciona una aplicación API-- interface-- programación a través del cual usted puede tomar elementos de Google Maps e integrarlas en sus propias aplicaciones. De hecho, durante todo este proceso, vas encontrar un par de direcciones URL particularmente útil que se mencionan en el especificación para Problemas de 8, específicamente este Getting Started Guía o la Guía del desarrollador para Google Maps API versión 3, así como la API de JavaScript de Google Maps referencia v3, que es una poco más arcano de leer pero en realidad tiene todo el nivel inferior detalles acerca de qué funciones o métodos y objetos y propiedades y eventos en realidad vienen con la API, muy similar en espíritu a [inaudible] páginas. 

Ahora bien, si echamos un vistazo en Google Noticias, podrás tal vez ver una interfaz familiar aquí. Pero resulta que también puede buscar Google Noticias para geografías específicas a través de un parámetro HTTP llamada geo. De hecho, si puedo ampliar hasta aquí, verás que Estoy en news.google.com/news/section?geo=02138. Y, de hecho, si el zoom fuera, verás que soy mirando a una página con un montón de opiniones acerca de Cambridge, Massachusetts. 

Mientras tanto, si realmente cambiar el URL no sea un código postal como esta, pero algo un poco más desordenado como Cambridge, Massachusetts +, donde la ventaja es la manera de codificar un carácter de espacio en una dirección URL y pulse Enter, verás que en realidad ver casi las mismas noticias. Tal vez es un poco diferente porque en realidad Cambridge tiene varios códigos postales. Ahora, ¿cómo iba yo a saber que y, de hecho, ¿cómo podría yo de alguna manera atar ciudades y pueblos a los códigos postales en caso de que desee permitir al usuario para buscar cualquiera? Bueno, resulta que hay un sitio web por ahí llama geonames.org que es una iniciativa para tener una base de datos de libre acceso de todos tipo de información geográfica, no sólo para los EE.UU., sino también para otros países también. De hecho, si voy a esta URL aquí, que También se menciona en el conjunto de problemas especificación, usted verá que tres lista de un montón de archivos zip cualquiera de los cuales puede ser descargado por usted. De hecho, para este conjunto de problemas vas a descargar us.zip. Ahora dentro de este archivo, es un todo montón de datos en formato de texto. Los archivos es muy similar a una CSV-- Valores separados por comas file-- pero utiliza realmente pestañas para delimitar campos. Ahora, por su parte, si nos fijamos aquí, en lo que yo he destacado, los campos de este archivo se van a ser cosas como los códigos de país, códigos postales, nombres de lugares, y luego, en alguna forma u otros, los estados y condados, comunidades, y más. De hecho, ya he descargado este archivo por adelantado. Déjame ir por delante y lo abro aquí-- us.text-- y, de hecho, se le ver si me desplazo hasta la línea 16792 verás algunos registros de Cambridge, Massachusetts y sus distintos códigos postales. Lo que también se ve allí es el condado, algunos números que yo realmente no entender, sino también todos el camino de la derecha, algunos GPS coordinates-- latitud y longitud. Esto es muy bueno porque uno de las características de la API de Google Maps es la capacidad de detectar dónde se encuentra geográficamente en términos de coordenadas GPS. 

Ahora vamos a empezar a encontrar la manera de empezar a atar estas cosas juntas. Les hemos dado un todo manojo de código de distribución, así como la base de datos MySQL. De hecho, si me tire un phpMyAdmin tener previamente importados, como pronto lo sabrá, pset8.SQL, verás una tabla de MySQL que se parece a esto, un campo de ID, país código, código postal, nombre del lugar y más. Los tipos de todos aquellos columnas que derivan simplemente mediante la lectura de la readme.txt presentar aquí que especifica si un campo es un número entero, o varchar o similares. 

Para ello hemos creado esa mesa para y te dan los comandos SQL ejecutar para crear ese tabla en su propia base de datos, pero hay en realidad no existen datos en ello todavía. Por el contrario, vas a tener que descargar us.zip o postal de cualquier país presentar de esa URL allí. Y entonces vas a tener que escribir un script de línea de comandos en PHP que es va a abrir ese texto presentar, iterar sobre sus líneas, y luego para cada uno de esas líneas hacen un inserto en que los lugares mesa en su base de datos MySQL. Así que al final de este proceso, se le han corrido esa secuencia de comandos en última instancia, sólo una vez en la teoría. En realidad probablemente te ejecutarlo un montón de veces al tratar de arreglar varios bugs. 

En última instancia, usted va a tener un realmente grande base de datos con miles y miles de filas geográficas. Luego te vas a poner esa importación guión a un lado una vez que está funcionando y su base de datos es agradable y correcta, y luego vas a pasar a realidad la aplicación de la misma mashup. El mashup se va a ver un poco de algo como esto. En mashup.cs50.net, nos tener una solución personal que se ve un poco de algo como esto. De hecho, si hago clic en este diario icono de Cambridge, Massachusetts, verás un hilado icono brevemente y después una lista ordenada, una lista con viñetas de artículos relacionada con Cambridge, Massachusetts. Si hago clic en Charlestown, Massachusetts, Voy a ver el mismo para aquella ciudad. Y si hago clic en Watertown, Massachusetts, puede que no haya ninguna noticias de de Watertown, por lo que verá algo como el día de pocas noticias. 

Ahora, por su parte, en la parte superior izquierda son algunos familiares controles de Google Maps dejar que se aleja, cacerola arriba, abajo, izquierda y derecha, sino también un cuadro de búsqueda que ponemos allí. Así que si yo busco, francamente, el único otro código postal sé, 90210, vamos a ver realmente Beverly Hills, California. Al hacer clic en ella me lleva a California y un manojo entero de noticias sobre Beverly Hills. Ahora note, también, lo que pasó allí. Si esta búsqueda de tiempo para 02.138 o incluso Cambridge Massachusetts coma o algún variante de la misma, se obtiene una poco desplegable autocompletar. Ahora esto es usar un plugin para una biblioteca llamada jQuery, y ese plugin se llama typeahead. Simplemente lee a través de la documentación, descargado archivos integrado los .js en el código de distribución de modo que usted en última instancia, pueden escribir el código que llena ese menú desplegable con el auto selecciones o las sugerencias de automóviles. 

Ahora el código de distribución, sin embargo, que usted recibió no hace casi tanto. Usted consigue el Google Map incrustado, y a obtener los controles de la parte superior izquierda, y se obtiene el cuadro de búsqueda. Pero si escribo algo como 02138, no hay lugares se encuentran todavía. Así que va a ser uno de nuestros objetivos aquí. Además, si usted toma un paso atrás y mirar el mapa en sí, no hay noticia alguna. Incluso si hago clic y arrastre, no hay marcadores realidad aparecerá para las noticias porque eso desafío se deja para usted también. 

Echemos un vistazo a continuación, en el código de distribución. Una vez que haya descargado pset8.zip y abrió la cremallera en el directorio de host virtual en el CS50 Appliance, verás estos directorios aquí dentro. Bin-- que generalmente significa binario para programs-- ejecutable incluye, como en pset7, algo de PHP archivos que otros archivos incluyen, entonces público, que es los archivos que necesitan para ser accesible públicamente a un usuario con un navegador. Vamos a echar un vistazo en el bin, y vamos a ver que hay un archivo ya llamaban Importar. Si abrimos esta con gedit, ya veremos que, por desgracia, no hay mucho ya está. Todo lo que está ahí, sin embargo, es un tinglado en la parte superior que especifica que interpreter-- en este caso PHP-- debe ser utilizado para realmente ejecutar este archivo. Pero entonces donde dice TODO es donde estás va a tener que escribir código que probablemente requiere la config archivo que está en el directorio includes como lo hemos hecho antes con archivos PHP. Y luego vas a tiene que abrir algún modo us.text que presumiblemente ya han descomprimido. Entonces vas a tener que iterar sobre las líneas en el archivo, tal vez utilizando algunas de las funciones sugerido en la especificación. A continuación, inserte cada uno de los líneas en la base de datos MySQL mediante el uso de la función de consulta, que hemos de nuevo le proporcionamos con-- o al menos una variante del mismo en functions.php, que veremos en un momento. 

Ahora vamos a cerrar la importación y volver a nuestro directorio y esta vez entrar en incluye. Y si lo hago ls allí, verás tres archivos bastante como de problemas 7. Y vamos a echar un vistazo rápido, Por ejemplo, en config.php. Allí, es menos líneas que antes, y se Parece que este archivo incluye constants.php y functions.php. Estamos usando un poco diferente técnica en esta ocasión para realmente especifican que estos archivos son relativos al directorio actual __ DIR__ representa el directorio que este archivo, config.php, es en sí mismo en. Así que esta es una más manera explícita de la especificación ¿qué otros archivos que desea exigir. 

Ahora si cierro este archivo y abrir constants.php lugar, verás un archivo muy reminiscente para de así, aunque de problemas 7 con una base de datos diferente llamado pset8. Finalmente, en functions.php, vamos a ver sólo una función esta vez llamada de consulta. Esto es casi el mismo, salvo que manejamos errores en esta ocasión un poco de manera diferente, pero es de uso es lo mismo que en el problema conjunto de siete. 

Ahora vamos a volver a nuestro pset8 directorio, entra en público, y allí si lo hago ls, verá esto-- articles.php, index.html, search.php, y update.php-- todos los archivos. Y entonces la fuentes css, img, y directorio js gusta bastante pset7. 

Echemos un vistazo a index.html, que es va a ser realmente el punto de entrada a la Smashup. Ahora en index.html, verás un todo montón de elementos de enlace en la cabeza, específicamente, para arranque para nuestro propio CSS seguido por un montón de escritura etiquetas para cosas como los mapas, API en sí, un marcador especial con etiqueta utilidad que hemos mencionado en el especificación está disponible para usted, sí jQuery, bootstrap sí mismo, y otra biblioteca llamado subrayado que hablamos en la especificación. Underscore.js como jquery.js es una biblioteca JavaScript que tiene un montón de funcionalidad que un montón de gente en el mundo desean existido en sí misma JavaScript. Así que todos estos son en realidad bastante popular. También hemos mencionado typeahead que es la biblioteca que hace que desplegable autocompletar y por último, un enlace a nuestro propio JavaScript. 

Mientras tanto, y tal vez por suerte, este mashup es impulsado por relativamente poco HTML aquí abajo en la parte inferior. Tenga en cuenta que hemos especificado un div en nuestro cuerpo de fluido clase contenedor. Esto, de por arranque documentación, sólo significa que este div va a llenar el viewport o ventana completamente del navegador. 

Mientras tanto, por debajo de que tenemos un div eso se abrieron y cerraron inmediatamente con el ID exclusivo del mapa lienzo. Esto ahora es de Google Documentación Mapas por su API, por el cual yo simplemente necesito tener un div vacío en el que inyectar, en última instancia, un real de Google Maps. Pero más de eso en sólo un poco. 

Por último, hay una forma dentro de la cual aquí implementa el cuadro de texto hasta la parte superior izquierda en nuestra interfaz de búsqueda. Tenga en cuenta que hemos utilizado un poco de arranque aquí también-- cosas como forma-inline, ceñida al grupo. Hemos dado a la antigua ID única de la forma. Y luego, en última instancia, en realidad tengo un tipo de entrada, que es bastante familiar, cuyo ID es q. Sólo una convención. Q para query-- podría tener ha llamado nada. Y entonces el marcador de posición, por su parte, es la ciudad, estado, y el código postal que se puede recordar viendo en nuestra mashup de demostración antes. Vamos a cerrar este archivo. 

Ahora echa un vistazo a los archivos PHP que esperar y luego los archivos JavaScript. En nuestros archivos PHP, tenemos ya implementado para usted, por ejemplo, las actualizaciones. Update.php-- no vamos a gastar una enorme cantidad de tiempo en aquí-- en pocas palabras es el archivo que nuestra Código JavaScript se va ponerse en contacto a través de AJAX que técnica asíncrona que es incorporado en JavaScript estos días que es vamos a permitir que nos preguntemos update.php para más información. 

En concreto, en cualquier momento el usuario arrastra el mapa o realiza una búsqueda que salta al usuario a otra ubicación, nuestro código JavaScript como pronto veremos, es va a llamar update.php y pedir 10 o más marcadores dentro de la ventana gráfica basada en las coordenadas GPS de la parte superior e inferior esquinas de ese mapa. Entonces podemos repoblar el mapa ahora que el usuario ha movido la pantalla con el fin ver 10 probablemente nueva marcadores de diferentes ciudades. Mientras tanto, este archivo es en última instancia, va a ejecutar una consulta SQL en contra de nuestra base de datos tabla llamada lugares que va a devolver los 10 o menos lugares. 

Mientras tanto, en articles.php, es otra archivamos que hemos escrito en su totalidad. Es muy similar en espíritu a Función BUSCAR de Problemas de 7, que contactarse Yahoo Finanzas para usted. Este archivo contactos de Google Noticias para usted, en última instancia, el acaparamiento una máquina de lectura version-- en algo llamada RSS format-- de las noticias para Cambridge o Beverly Hills o lo que sea la ciudad que has buscado para en base a que geoparámetros. Que se analizan los que RSS, que es sólo una tipo de lenguaje llamado XML, y luego en realidad devolverlo a su navegador y al código JavaScript, En concreto, en un formato llamado JSON, JavaScript Object Notation. Ahora verás en la specification-- señalamos que la forma en que usted puede ver realmente algunos de los posterior-- venida JSON que esta funcionalidad en última instancia le permite rellenar los menús emergentes de modo que al hacer clic en un marcador en el mapa que vea en realidad un montón de balas, cada uno de los cuales enlaces a un artículo. 

Ahora echemos un vistazo a una última Archivo PHP que, afortunadamente, no lo hace mucho tener ir en-- sólo un bastante grande TODO. Ahora mismo este archivo declara un array llamado lugares. Y en última instancia impresiones esa matriz en JSON format-- bastante-imprimirlo sólo para que las cosas son más fáciles de depurar. Desafortunadamente, en el medio hay este TODO, que pide que usted busque la base de datos de lugares que coinciden con un geo HTTP parámetro. 

Y, de hecho, esto va a ser uno de su challenges-- para implementar esta funcionalidad aquí de manera que cuando se comunique con este archivo con una URL como la búsqueda. php? geo = algo, su código en última instancia, devolver un JSON conjunto de todos los lugares en su tabla de base de datos que coincidan con esa entrada. Así que si el usuario escribe en Cambridge, su archivo aquí search.php en última instancia, debe devolver una matriz JSON para todos los partidos de Cambridge, lo que podría ser en Massachusetts pero podría ser incluso cualquier otro lugar. 

Por último, vamos a echar un vistazo a dos archivos que son ultimately-- estática su archivo CSS y su archivo JavaScript. Si entro en nuestro directorio CSS, hay un montón de archivos allí, pero la mayoría de ellos son las bibliotecas. Voy a echar un vistazo, específicamente, en styles.css, que es nuestro propio CSS global que es va a estilizar todo este mashup. Lo dejo para que lea los comentarios en este documento, pero, en pocas palabras, este es el CSS que asegura que nuestro mashup, por defecto fuera de la caja, se ve exactamente como queremos it-- con el mapa de llenar el puerto vista y con la búsqueda caja en la parte superior izquierda. También nos hemos tomado la libertad de estilizando que desplegable typeahead menú un poco también. 

El archivo más importante tal vez por este conjunto de problemas es este último, scripts.js. Dentro de su directorio JS es aún más archivos. Todos ellos son archivos de la biblioteca a excepción de éste, scripts.js. Si abrimos esto, vamos a tomar nuestro última gira a través de las funciones que están incorporados en este archivo para usted y para llamar la atención a los TODOs que se avecinan. 

En la parte superior de este archivo, son tres variables globales. Uno para un mapa, que se va a ser una referencia en nuestro mapa de Google. Usted puede pensar en él tipo de como un puntero. Mientras tanto, tenemos otra variable global llamado info, que parece ser almacenar el valor de retorno de una llamada a nueva google.maps.InfoWindow. JavaScript soporta objetos que son muy similares en espíritu a Struts. Y lo que esta línea para nuestros propósitos está haciendo es la creación de una nueva información ventana en la memoria y luego mantener torno a una referencia al mismo en una variable llamada Info. Y entre aquellos, por su parte, es lo que parece ser un JavaScript vacío array llamado marcadores. Todos los iconos de periódicos, o podría elegir otro icono conjunto, van a ser almacenados en última instancia, en esta matriz para que podamos añadir muy fácilmente a el mapa y eliminarlas del mapa. 

Ahora vamos a desplazarse hacia abajo un poco y genio a través del código que va a ser ejecutada tan pronto como el DOM o documento modelo de objetos o la página en sí está listo. Recordemos que esta sintaxis aquí simplemente especifica que el código siguiente debe ser ejecutada sólo cuando el navegador ha terminado cargar todo lo demás. 

En primer lugar, declaramos una toda montón de estilos, que terminan estilización el mapa como por la especificación. Entonces Declaramos un toda montón de opciones, que personalizar aún más el Google mapa que estamos a punto de empotrar. A continuación, utilizamos un poco de código jQuery, que se explica en detalle un poco más en la especificación, para agarrar ese elemento, mapa-lona que identificamos de manera exclusiva. Y luego esta línea aquí es lo que parece mágicamente nos dan un mapa de Google dentro de nuestra propia aplicación, almacenar una referencia a la misma en esa variable llamada mapa. 

Por último, aquí se registra lo que se llama un oyente. Piense forma parte posterior--, camino posterior-- a la semana cero en CS50 cuando miramos los arañazos y su apoyo a través de un paseo a través de cosas llamadas eventos y transmisiones. Es posible que no haya utilizado usted mismo, pero es un mecanismo por el que una navegador en este caso puede llamar nuestra atención cuando es listo para ejecutar en realidad algo de código. En este caso, se va a escuchar al mapa de un evento llamado inactivo. Esto significa que el navegador tiene terminado de cargar el mapa de Google. En este punto una función llamada configure debería en última instancia, ser ejecutado. Esa función, configurar, vamos a ver, está escrito por nosotros. 

Ahora aquí es una función que, por desgracia, es sólo un marcador TODO add. Por la especificación. usted va a necesitar para escribir el código que realmente añade un marker-- si parece como un periódico o una tachuela, o algo else-- al mapa Google. Aquí ahora es que la función llamado configure. Lo dejo a usted a leer a través de esto con más detalle, pero damos cuenta de que añadimos un montón más oyentes para que podamos ejecutar código cuando el usuario hace clic en y arrastra el mapa. También tenemos código aquí que inicializa ese plugin typeahead para que en el menú desplegable menú realmente funciona. 

Pero vamos a centrarnos en sólo un par de lugares en este documento. En concreto, esto que ver aquí. Te remito a la línea documentación y la especificación de cómo rellenar este TODO. Pero en pocas palabras, esta biblioteca typeahead le permite pasar en lo que se conoce generalmente como una plantilla, que tiene unos marcadores de posición variables muy similares en espíritu a% de printf. * s. Pero en este caso, la plantilla por la especificación permite especificar qué variables desea para inyectar a partir de datos que se vienen detrás de algo así como el PHP archivos que has escrito que están emitiendo salida JSON. 

Ahora aquí damos cuenta de que somos la escucha de selecciones TYPEAHEAD cuando el usuario lleva a cabo realmente una búsqueda y selecciona un valor. Así es como en realidad somos va a escuchar para que y ejecutar algún código como resultado. Luego continuamos configurar el mashup sólo un poco. Y, en última instancia, que llamamos esta actualización función. Actualiza los marcadores en la pantalla. Más sobre esto en un momento. Mientras tanto, hay algunos pequeñas funciones en aquí. Una de ellas es que hideInfo simplemente cierra la ventana de información. Otra función aquí, que en última instancia no será demasiado largo, quitar marcadores. Eso va a deshacer lo que sea su función de marcador add hace. Y entonces aquí es la búsqueda. Y éste es interesante porque nos haber escrito el código JavaScript que es va a hablar con search.php en el servidor y volver alguna respuesta. 

Usted, por supuesto, seguirá necesitará implementar search.php, pero hemos implementado el Código JavaScript que es va a manejar en realidad llevar a cabo Búsqueda desde ese cuadro de texto. En particular, la notificación que esta función aquí, búsqueda, no llame search.php por un método llamado obtener JSON, que vimos en clase. Y la sintaxis aquí es un poco diferente de conferencia en la que estamos usando jQuery la llamada interfaz promesa. Más sobre esto en la especificación. Esto simplemente significa para nuestra propósitos ahora que hay son dos funciones especiales que necesita llamar con la notación de punto aquí inmediatamente después de llamar a conseguir JSON. Uno se llama hacer. Uno se llama fallan. Usted puede pensar en estos como el controlador de éxito y el manejador de fallos sólo en caso de que algo va mal. 

Ahora echemos un vistazo a la última par de funciones en este archivo. Aquí abajo es una función llamado showInfo, que muestra información en uno de los info pequeñas ventanas que aparece cuando el usuario hace clic en un marcador. Aquí abajo adicional es que la función de actualización que hemos implementado para usted. Se determina los límites del mapa. ¿Cuáles son las coordenadas GPS de su esquinas noreste y suroeste de aquí. Hemos preparado algunos parámetros HDP aquí y luego los pasó en última instancia, a update.php, que hemos También implementado para usted. Que finalmente consigue recuperar parte JSON desde el archivo llamado update.php y luego elimina cualquier marcadores en la pantalla y luego itera sobre los datos que ha regresado de update.php, que de nuevo es simplemente una matriz JSON. Y entonces se añade en última instancia, un marcador de cada uno de esos lugares, insuficiencia manipulación o errores que podría muy bien suceder. 

Ahora sólo tienes que darte una idea de cómo se podría ir sobre la depuración de este proyecto, doy cuenta de que he abierto en avanzar en esta ficha aquí a esta URL, pset8 / articles.php? geo = 02138. Ahora, de nuevo, artículos sobre PHP implementamos para usted por lo que este no es tanto lo podrás usar depurar, sino más bien la técnica. Tenga en cuenta que he buscado El código postal de Cambridge aquí, y me he quedado atrás, de hecho, un JSON variedad de objetos JSON dentro de los cuales son dos keys-- enlace y el título. 

Así esta funcionalidad trabaja ya para usted. Pero esta técnica de forma manual va a una URL como esta para algo como search.php? geo = cambridge o 02138 o cualquiera que sea el usuario ha escrito en debe de gran valor como usted, usted mismo, intenta de averiguar exactamente si o por qué search.php está funcionando o no. 

En última instancia, entonces, usted tiene algunos TODOs delante. Vas a primera implementos que script de importación que lee en us.text en su base de datos. Usted está entonces va a necesitar para implementar search.php de manera que se comporta exactamente como se especifica. Usted está entonces va a querer centrarse en scripts.js e implementa en última instancia ese par de Todos, incluso para configurar y esa plantilla, añadir marcadores, quitar marcadores, y a continuación, la última, pero no menos importante, una toque personal. 

Una vez que haya puesto en funcionamiento mashup bastante como la nuestra, el objetivo a la mano es para que usted agregue un personal toque para su mashup, ya sea estética o funcional. Tome el mashup siempre tan ligeramente al siguiente nivel. Siempre y cuando usted se empuja más allá su familiaridad con la misma especificación y recoger una técnica nuevo, incluso si es sólo algo estético como cambiar el diseño del mapa que está utilizando, el alcance que esperamos será satisfecho. Eso es, pues, de problemas 8 Mashup. Estén atentos para más en el especificación y mejor de las suertes hacer frente a este, su último Problema CS50 establecido nunca. 

[REPRODUCCIÓN DE MÚSICA]