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