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