[Música tocando] 

DAVID J. MALAN: Olá. Vamos dar um passeio pela Problema Set 8 Mashup, que vai desafiá-lo a basear-se em elementos para o Google Maps com elementos do Google News and mash -los juntos em um applet web que Permite que o usuário pesquise um mapa para notícias locais para cidades específicas, cidades e códigos postais. Para fazer isso, vamos integrar algumas HTML, CSS, PHP, SQL, JavaScript, e uma técnica geralmente conhecido como AJAX em ordem para criar esta imersiva experiência do usuário. 

Vamos primeiro para o próprio Google Maps. Isto, naturalmente, é talvez uma interface familiar. Mas acontece que o Google Maps Também fornece uma aplicação API-- através do qual a programação interface-- você pode tomar elementos do Google Maps e integrá-los em seus próprios aplicativos. De facto, ao longo desta processo, você vai para encontrar um par de URLs particularmente útil que são mencionados na especificação para Problem Set 8, especificamente esta Introdução Guia ou o Guia do desenvolvedor para o Google Maps API versão 3, bem como a API do Google Maps JavaScript v3 de referência, que é um pouco mais misterioso para ler mas, na verdade, tem todo o nível mais baixo detalhes sobre o que funciona ou métodos e objetos e propriedades e eventos realmente vêm com a API, muito semelhante em espírito para [inaudível] páginas. 

Agora, se vamos dar uma olhada no Google News, você vai talvez ver um interface familiar aqui. Mas acontece que você também pode pesquisar Google News para geografias específicas através de um parâmetro HTTP chamado geo. Na verdade, se eu aumentar o zoom até aqui, você vai ver que Eu estou em news.google.com/news/section?geo=02138. E, de fato, se eu aumentar para fora, você vai ver que eu sou olhando para uma página com um monte de pontos de vista sobre Cambridge, Massachusetts. 

Enquanto isso, se eu realmente mudar a URL para não ser um código postal como este, mas algo um pouco mais confusa como Cambridge, Massachusetts +, onde a vantagem é do jeito que você codificar um caractere de espaço em uma URL e pressione Enter, você vai ver que eu realmente ver quase a mesma notícia. Talvez seja um pouco diferente porque, na verdade, Cambridge tem vários códigos postais. Agora como eu ia saber isso e, Na verdade, como eu poderia de alguma forma amarrar cidades e vilas para códigos postais em caso de eu quer permitir que o usuário a olhar para cima, quer? Bem, acontece que há um site lá fora chamado geonames.org que é uma iniciativa de ter uma base de dados de todos livremente disponíveis tipos de informação geográfica, não só para os EUA, mas também para outros países também. Na verdade, se eu for para este URL aqui, que Também é mencionado no conjunto de problemas especificação, você vai ver que três Lista de um monte de arquivos zip qualquer um que pode ser baixado por você. De facto, para este conjunto de problemas você vai baixar us.zip. Agora dentro deste arquivo, é um todo bando de dados em formato de texto. Os ficheiros é muito semelhante a um CSV-- Comma Separated Values ​​file-- mas, na verdade, usa guias para demarcar campos. Agora, enquanto isso, se você olhar aqui o que eu destacou, os campos neste arquivo estão indo para ser coisas como códigos de países, códigos postais, nomes de lugares, e, em seguida, de uma forma ou outros, estados e municípios, comunidades, e muito mais. Na verdade, eu já download deste arquivo com antecedência. Deixe-me ir em frente e abri-lo aqui-- us.text-- e, na verdade, você vai ver se eu rolar para baixo para a linha 16792 você verá alguns registros de Cambridge, Massachusetts e seus vários códigos postais. O que você também vê lá é o concelho, alguns números que eu realmente não compreender, mas também todos o caminho à direita, alguns GPS coordinates-- latitude e longitude. Isso é ótimo porque um dos os recursos do Google Maps API é a capacidade de detectar onde você está geograficamente em termos de coordenadas GPS. 

Agora vamos começar a descobrir como começar a amarrar essas coisas juntas. Nós demos-lhe um todo monte de código de distribuição, bem como banco de dados MySQL. Na verdade, se eu puxar um phpMyAdmin ter já importados, como você em breve, pset8.SQL, você verá uma tabela MySQL que se parece com isso, um campo ID, país código, código postal, o nome da cidade e muito mais. Os tipos de todos aqueles colunas I derivada simplesmente lendo o readme.text arquivar aqui que especificado se um campo é um número inteiro, ou VARCHAR ou semelhantes. 

Então nós criamos essa tabela para e lhe deu os comandos SQL para executar para criar esse tabela em seu próprio banco de dados, mas não há, na verdade, não há dados nele ainda. Em vez disso, você vai ter que baixar us.zip ou zip de qualquer país arquivo daquele URL lá. E então você vai ter que escrever um script de linha de comando em PHP que é vai abrir esse texto arquivo, interagir sobre suas linhas, e, em seguida, para cada um dos essas linhas fazer uma inserção em que coloca a tabela em seu banco de dados MySQL. Assim, no final deste processo, você vai ter executado esse script em última instância apenas uma vez, em teoria. Na realidade, você, provavelmente, executá-lo um monte de vezes ao tentar corrigir vários bugs. 

Finalmente, você vai ter um realmente grande banco de dados com milhares e milhares de linhas geográficas. Em seguida, você vai colocar essa importação script de lado uma vez que está funcionando e seu banco de dados é bom e correto, e, em seguida, você vai passar para realmente implementar o próprio mashup. O mashup vai olhar um pouco algo como isto. No mashup.cs50.net, nós tem uma solução pessoal que parece um pouco algo como isto. Na verdade, se eu clicar neste jornal ícone para Cambridge, Massachusetts, você verá uma fiação Ícone brevemente e, em seguida, uma lista ordenada, uma lista com marcas de artigos Relacionado com a Cambridge, Massachusetts. Se eu clicar em Charlestown, Massachusetts, Vou ver o mesmo para aquela cidade. E se eu clicar em Watertown, Massachusetts, pode não haver qualquer notícias de de Watertown, assim você vai ver algo como o dia de poucas notícias. 

Agora, enquanto isso, no canto superior esquerdo são alguns familiares controles Google Maps para deixá-lo diminuir o zoom, pan para cima, baixo, esquerda e direita, mas também uma caixa de pesquisa que colocamos lá. Então, se eu procurar, francamente, o único outro código postal Eu sei, 90210, vamos realmente ver Beverly Hills, Califórnia. Quando clicado ele me leva a Califórnia e um grupo inteiro de notícias sobre Beverly Hills. Agora observe, também, o que aconteceu lá. Se eu esta busca tempo para 02138 ou mesmo Cambridge Massachusetts vírgula ou alguns variante, você recebe um pouco suspensa autocomplete. Agora isso é usando um plugin para uma biblioteca chamada jQuery, e esse plugin é chamado typeahead. Nós simplesmente ler a documentação, o download do arquivo .js integrada no código de distribuição de modo que você em última análise, pode escrever o código que preenche esse menu dropdown com a auto seleções ou as sugestões de automóveis. 

Agora o código de distribuição, no entanto, que você recebeu não faz quase tanto quanto. Você pega o mapa do Google incorporado e você tem os controles na parte superior esquerda, e você começa a caixa de pesquisa. Mas se eu digitar algo como 02138, não há lugares são encontrados ainda. Assim que vai ser um dos nossos objetivos aqui. Além disso, se você der um passo para trás e olhar para o próprio mapa, não há nenhuma notícia qualquer. Mesmo se eu clicar e arrasto, na verdade não há marcadores aparecem para a notícia, porque isso desafio é deixado para você também. 

Vamos dar uma olhada em seguida, no código de distribuição. Uma vez que você tenha baixado pset8.zip e abriu o zíper em seu diretório vhost no CS50 Appliance, você vai ver estes diretórios aqui dentro. Bin-- que geralmente significa binário para programs-- executável inclui, como em pset7, alguns PHP arquivos que outros arquivos incluem, em seguida, público, que é os ficheiros que necessitam para ser acessível ao público para um usuário com um navegador. Vamos dar uma olhada no bin, e nós vamos ver que há um arquivo já chamado Import. Se abrirmos esta com gedit, vamos ver que, infelizmente, não há muito lá. Tudo o que está lá, no entanto, é uma coisa toda em cima que especifica quais interpreter-- neste caso PHP-- deve ser utilizado para realmente executar este ficheiro. Mas, então, onde se diz TODO é o lugar onde você está indo a necessidade de escrever um código que provavelmente requer a configuração arquivo que está no diretório inclui como fizemos antes com arquivos PHP. E então você vai tem que abrir alguma forma-se us.text onde presumivelmente já descompactado. Então você vai ter que iterar sobre as linhas desse arquivo, talvez usando algumas das funções sugerido na especificação. Em seguida, insira cada um desses linhas no banco de dados MySQL usando a função de consulta, o que temos novamente desde que você com-- ou, pelo menos, uma variante mesmos em functions.php, que vamos ver em apenas um momento. 

Agora vamos fechar importação e voltar para nossa diretoria e desta vez vá em inclui. E se eu fizer ls lá, você vai ver três arquivos muito como Conjunto de Problemas 7. E vamos dar uma olhada rápida, por exemplo, no config.php. De lá, é menos linhas do que antes, e ele Parece que este arquivo inclui constants.php e functions.php. Estamos usando um pouco diferente técnica desta vez para realmente especificar que esses arquivos são relativos para o diretório atual __ DIR__ representa qualquer diretório este arquivo, config.php, é em si mesmo em. Portanto, esta é uma forma mais maneira explícita de especificar o que os outros arquivos que você deseja exigir. 

Agora, se eu fechar este arquivo e abrir constants.php em vez disso, você verá um arquivo muito reminiscente a do bem, ainda que Problem Set 7 com um banco de dados diferente chamado pset8. Finalmente, em functions.php, vamos ver apenas uma função desta vez chamado consulta. Isso é quase o mesmo, exceto lidamos erros desta vez um pouco de forma diferente, mas é uso é o mesmo que no conjunto de problemas de sete. 

Agora vamos voltar para a nossa pset8 diretório, entrar em público, e lá se eu fizer ls, você verá isto-- articles.php, index.html, search.php, e update.php-- todos os arquivos. E então a fontes css, img, e diretório js bastante como pset7. 

Vamos dar uma olhada index.html, que é vai ser realmente o ponto de entrada para o smashup. Agora em index.html, você verá um todo bando de elementos de ligação na cabeça, especificamente, para a inicialização para o nosso próprio CSS seguido por um monte de roteiro tags para coisas como a mapas, API em si, um marcador especial com rótulo utilitário que mencionamos na especificação está disponível para você, próprio jQuery, de bootstrap em si, e uma outra biblioteca chamado sublinhado que falamos no spec. Underscore.js como jquery.js é uma biblioteca JavaScript que tem um monte de funcionalidade que um monte de pessoas no mundo de desejos existiram na própria JavaScript. Então, todos esses são realmente muito popular. Nós também já mencionei typeahead que é a biblioteca que faz isso suspensa autocomplete e finalmente, um link para o nosso próprio JavaScript. 

Enquanto isso, e talvez felizmente, este mashup é conduzido por relativamente pouco HTML aqui em baixo na parte inferior. Observe que temos especificado um div em nosso corpo de fluido classe-container. Este, por Bootstrap de documentação, apenas significa que este div vai preencher o viewport ou janela do navegador totalmente. 

Enquanto isso, a seguir que temos uma div que está aberta e imediatamente fechada com o ID único do mapa lona. Este agora é do Google Documentação Mapas para a sua API, em que eu simplesmente precisa ter um div vazio em que a injectar, em última análise, um real do Google Maps. Mas mais sobre isso em apenas um bit. 

Finalmente, há um formulário aqui dentro que implementa a caixa de texto no topo à esquerda em nossa interface para pesquisa. Note que nós usamos um pouco de inicialização aqui demasiado-- coisas como forma-inline e forma-grupo. Nós demos ao ex- ID único do formulário. E então, em última análise, eu realmente tenho um tipo de entrada, que é bastante familiar, cujo ID é q. Apenas uma convenção. Q para query-- poderia ter sido chamado de qualquer coisa. E então, o espaço reservado, entretanto, é cidade, estado, e código postal que você deve se lembrar vendo em nosso mashup de demonstração antes. Vamos fechar este arquivo. 

Agora, dê uma olhada nos arquivos PHP que aguardar e, em seguida, os arquivos JavaScript. Em nossos arquivos PHP, nós temos já implementadas para você, por exemplo, atualizações. Update.php-- não vamos gastar uma enorme quantidade de tempo em aqui-- em poucas palavras é o arquivo que o nosso Código JavaScript está acontecendo entrar em contato via AJAX que técnica assíncrona que é incorporado JavaScript nestes dias que é vai permitir-nos a perguntar update.php para mais informações. 

Especificamente, a qualquer hora o usuário arrasta o mapa ou executa uma pesquisa que salta o usuário para outro local, nosso código JavaScript, como veremos em breve, é vai chamar update.php e pedir 10 ou mais marcadores dentro da janela de exibição com base sobre as coordenadas GPS da parte superior e inferior cantos do mapa. Podemos, então, repovoar o mapa agora que o usuário passou a tela, a fim ver 10 provavelmente novo marcadores para diferentes cidades. Enquanto isso, este arquivo é, em última instância indo para executar uma consulta SQL contra o nosso banco de dados tabela chamada lugares que vai voltar aqueles 10 ou menor número de locais. 

Enquanto isso, em articles.php, é outro arquivar temos escrito na sua totalidade. É muito semelhante ao espírito Função PROC do Conjunto de Problemas 7, que contactado Yahoo Finance para você. Este arquivo de contatos do Google Notícias para você, em última análise, agarrando uma máquina de leitura version-- em algo chamado RSS format-- da notícia para Cambridge ou Beverly Hills ou o que quer que cidade você pesquisou para com base nesse geoparâmetros. Nós analisar esse RSS, que é apenas uma tipo de linguagem de marcação chamada XML, e então nós realmente devolvê-lo ao seu navegador e ao seu código JavaScript, especificamente, em um formato de chamada JSON, JavaScript Object Notation. Agora você vai ver na specification-- nós apontá-lo em como você pode realmente ver alguns dos traseira-- vinda JSON que esta funcionalidade em última análise permite preencher esses menus pop-up de modo que quando você clica em um marcador no mapa você realmente vê um grupo inteiro de balas, cada um dos quais links para um artigo. 

Agora vamos dar uma olhada em um último Arquivo PHP que, felizmente, não faz tem muita coisa acontecendo on-- apenas um bem grande TODO. Agora este arquivo declara um array chamado lugares. E, em seguida, em última análise, impressões essa matriz em JSON format-- pretty imprimindo-lo apenas para que as coisas são mais fáceis de depurar. Infelizmente, no meio há este TODO, que apela para você pesquisar o banco de dados para os lugares correspondentes a geo HTTP parâmetro. 

E, de fato, isso vai ser um de seus challenges-- para implementar essa funcionalidade aqui de modo que quando você entrar em contato com este arquivo com uma URL como pesquisa. php? geo = alguma coisa, seu código acabará por retornar um JSON matriz de todos os lugares em seu tabela de banco de dados que correspondem a essa entrada. Portanto, se o usuário digita em Cambridge, seu arquivo aqui search.php deve finalmente retornar uma matriz JSON para todos os jogos de Cambridge, que pode ser em Massachusetts mas poderia ser ainda em qualquer outro lugar. 

Por último, vamos dar uma olhada em dois arquivos que estão ultimately-- estática seu arquivo CSS e seu arquivo JavaScript. Se eu entrar em nosso diretório CSS, há todo um conjunto de arquivos de lá, mas a maioria deles são bibliotecas. Vou dar uma olhada, especificamente, a styles.css, que é o nosso próprio CSS global que é indo para estilizar todo este mashup. Vou deixar para você a ler Os comentários aqui, mas, em poucas palavras, este é o CSS que assegura que o nosso mashup, por padrão fora da caixa, parece exatamente do jeito que queremos ele-- com o mapa de encher o porta vista e com a busca caixa-se na parte superior esquerda. Também tomei a liberdade de estilizando que dropdown typeahead Menu um pouco também. 

O arquivo mais importante talvez para este problema definir É esta última, scripts.js. Dentro de seu diretório JS é ainda mais arquivos. Todos eles são arquivos de biblioteca exceto para um presente, scripts.js. Se abrirmos isto, vamos dar o nosso última turnê através das funções que são incorporadas a esse arquivo para você e chamada de atenção para os TODOs que temos pela frente. 

No topo desse arquivo, São três variáveis ​​globais. Um para um mapa, que vai ser uma referência para o nosso mapa Google. Você pode pensar nisso tipo de como um ponteiro. Enquanto isso, nós temos outra variável global Informação chamada, o que parece ser armazenar o valor de retorno de uma chamada a nova google.maps.InfoWindow. JavaScript suporta objetos que são muito similares em espírito à Struts. E o que esta linha para nossos propósitos está fazendo está criando um novo Informação janela na memória e, em seguida manter em torno de uma referência da mesma, a uma variável chamada Info. E entre aqueles, entretanto, é o que parece ser um vazio JavaScript array chamado marcadores. Todos esses ícones de jornal, ou você pode escolher outro ícone completamente, vão ser armazenados em última análise, essa matriz de modo que podemos facilmente adicionar o mapa e removê-los do mapa. 

Agora vamos rolar para baixo um pouco e whiz através do código que vai ser executada logo que o documento ou DOM modelo de objeto ou o própria página está pronto. Lembre-se que esta sintaxe aqui simplesmente especifica que o código a seguir só deve ser executada quando o navegador terminou carregar tudo o resto. 

Nós primeiro declarar uma todo grupo de estilos, que acabam stylizing o mapa de acordo com a especificação. Nós, então, declarar uma todo monte de opções, que personalizar ainda mais o Google mapa que estamos prestes a incorporar. Em seguida, usamos um pouco de código jQuery, que é explicado em detalhes um pouco mais no spec, para agarrar esse elemento, o mapa-canvas que identificamos de forma exclusiva. E então essa linha aqui é o que parece magicamente nos dar um mapa do Google dentro de nossa própria aplicação, armazenando uma referência a esse nessa variável chamado mapa. 

Finalmente, aqui registamos o que é chamado um ouvinte. Pense maneira traseira--, caminho traseira-- a semana zero no CS50 quando olhamos para zero e o seu apoio através de uma caminhada através de coisas chamadas eventos e transmissões. Você pode não ter usado -lo sozinho, mas é um mecanismo pelo qual um navegador, neste caso, pode chamar nossa atenção quando é realmente pronto para executar algum código. Neste caso, ele vai ouvir para o mapa para um evento chamado ocioso. Isto significa que o navegador tem terminar de carregar o mapa do Google. Neste ponto, uma função chamada configure deve, em última instância ser executado. Essa função, configurar vamos ver, é escrito por nós. 

Agora aqui é uma função que, infelizmente, é apenas um marcador TODO add. Per o spec. você vai precisar para escrever o código que realmente adiciona um marker-- se parece como um jornal ou uma tachinha, ou algo else-- para o mapa do Google. Aqui, agora, é que a função chamado configure. Vou deixar para você a ler por isso com mais pormenor, mas percebemos que adicionar Um grupo mais ouvintes para que possamos executar código quando o usuário clica e arrasta o mapa. Temos também o código aqui que inicializa esse plugin typeahead de modo que a lista suspensa Menu realmente funciona. 

Mas vamos nos concentrar em apenas um alguns lugares aqui. Especificamente, esta a fazer aqui. Vou adiar para o on-line documentação e especificação para saber como preencher este TODO. Mas em poucas palavras, esta biblioteca typeahead permite que você passe no que é geralmente conhecido como um modelo, que tem alguns espaços reservados variáveis muito similares ao espírito% do printf. * s. Mas neste caso, o template por a especificação permite especificar Que variáveis ​​você quer a administração a partir de dados que está vindo de volta de algo como o PHP arquivos que você escreveu que são emissores de saída JSON. 

Agora aqui percebemos que somos escuta para as seleções typeahead quando o usuário realmente conduz a busca e seleciona um valor. Esta é a forma como estamos, na verdade, vai ouvir para que e executar um código como um resultado. Em seguida, continuar a configurar o mashup só um pouquinho. E, em última análise, a que chamamos esta atualização função. Ele atualiza os marcadores na tela. Mais sobre isso em apenas um momento. Enquanto isso, há alguns pequenas funções em aqui. Uma delas é que hideInfo simplesmente fecha a InfoWindow. Outra função aqui, o que, em última instância não será por muito tempo, remover marcadores. Isso vai desfazer o que quer sua função de marcador add faz. E, em seguida, para baixo aqui é pesquisa. E isso é interessante porque nós ter escrito o código JavaScript que é vai falar com search.php no servidor e voltar alguma resposta. 

Você, é claro, vai ainda precisa implementar search.php, mas temos implementado o Código JavaScript que é vai lidar realmente executar Buscas de que a caixa de texto. Em particular, o aviso prévio que esta função aqui, pesquisa, põe search.php através de um método chamado obter JSON, que vimos na palestra. E aqui a sintaxe é um pouco diferente a partir de palestra em que estamos usando jQuery chamado interface de promessa. Mais sobre isso na spec. Isto significa simplesmente para o nosso propósitos agora que há são duas funções especiais que precisa chamar com a notação de ponto aqui imediatamente após chamar obter JSON. Um é chamado feito. Um é chamado de falhar. Você pode pensar nisso como o manipulador de sucesso eo manipulador de falha apenas no caso de algo correr mal. 

Agora vamos olhar para o passado par de funções neste arquivo. Aqui em baixo é uma função chamado showInfo, que mostra as informações em um desses Informações de pequenas janelas que aparece quando o usuário clica em um marcador. Aqui em baixo é ainda mais que a função de atualização que temos implementado para você. Ela determina os limites do mapa. Quais são as coordenadas GPS da sua nordeste e sudoeste cantos aqui. Nós preparamos alguns parâmetros HDP aqui e, em seguida, passou por eles, em última instância para update.php, o que nós temos também implementado para você. Que, finalmente, recebe de volta alguns JSON a partir do arquivo chamado update.php e, em seguida, remove qualquer marcadores na tela e, em seguida, itera sobre os dados que está de volta de update.php, que novamente é apenas uma matriz JSON. E, em seguida, em última análise, adiciona um marcador de cada um desses lugares, tratamento de falhas ou erros que pode muito bem acontecer. 

Agora é só para lhe dar um gostinho de como você pode ir sobre depuração este projeto, perceber que eu já abriu em avançar este guia aqui para este URL, pset8 / articles.php? geo = 02138. Agora, novamente, artigos sobre PHP implementamos para você de modo que este não é tanto o que você vai estar usando depurar, mas sim a técnica. Observe que eu tenho procurado por CEP de Cambridge aqui, e eu consegui voltar, de fato, um JSON matriz de objetos JSON dentro do qual são dois ligação keys-- e título. 

Portanto, esta funcionalidade já funciona para você. Mas esta técnica de manualmente indo a uma URL como esta para algo como search.php? geo = Cambridge ou 02138 ou o que quer que o usuário digitou no deve provar inestimável como você, você mesmo, tente para descobrir exatamente por isso que se deve ou search.php está funcionando ou não. 

Em última análise, então, você tem alguns TODOs à frente de você. Você vai primeiros implementos que script de importação que lê em us.text em seu banco de dados. Você está em seguida, vai precisar para implementar search.php de modo que ele se comporta exactamente como especificado. Você está em seguida, vai querer para se concentrar em scripts.js e, finalmente, implementa aqueles par de Todos, inclusive para configure e esse modelo, adicionar marcadores, remover marcadores, e então durar, mas não menos importante, uma toque pessoal. 

Depois de ter seu trabalho mashup bem como o nosso, a meta na mão é para você adicionar um personal toque no seu mashup, se é estético ou funcional. Leve o mashup sempre assim ligeiramente para o próximo nível. Contanto que você empurrar-se para além sua familiaridade com a própria especificação e pegar uma técnica novo, mesmo que seja apenas algo estética como a mudança da layout do mapa que você está usando, o alcance que esperamos ficará satisfeito. Isso, então, é Problema Set 8 Mashup. Fique ligado para mais no especificação e boa sorte fazer face a este, o seu último Problema CS50 definir nunca. 

[Música tocando]