[Играет музыка] 

Дэвид Дж Маланом: Привет. Давайте прогуляемся по Проблема Set 8 Mashup, который собирается бросить вам вызов в опираться на элементы для Google Maps с элементами из Google News и пюре их вместе в веб-апплет, который позволяет пользователю искать Карта новостей местного к конкретным городах, городов и почтовые индексы. Чтобы сделать это, мы собираемся интегрировать некоторые HTML, CSS, PHP, SQL, Наличие и техника как правило, известны как AJAX в порядке создать этот захватывающий пользовательский опыт. 

Давайте сначала для Google Maps самостоятельно. Это, конечно, возможно, Знакомый интерфейс. Но оказывается, что Google Maps также обеспечивает применение API-- программирование interface--, через который Вы можете взять элементы Google Maps и интегрировать их в Ваши собственные приложения. Действительно, на протяжении всего этого Процесс, который вы собираетесь чтобы найти пару адресов особенно полезно, что упоминаются в Спецификация для поставленной задачи 8, В частности, это Начало работы Или Руководство разработчика Для Google Maps API версии 3, а как API Google Maps JavaScript ссылка v3, который является немного больше тайной для чтения но на самом деле имеет все более низком уровне Детали, какие функции или методы и объекты и свойства, и события на самом деле приходят с API, очень близки по духу на [неразборчиво] страниц. 

Теперь, если мы взглянем в Новостях Google, вы будете возможно, увидеть знакомый интерфейс здесь. Но, оказывается, вы также можете найти Google Новости для конкретных географических регионах с помощью параметра HTTP под названием Geo. В самом деле, если бы я увеличить здесь, вы увидите, что Я в news.google.com/news/section?geo=02138. И, действительно, если я увеличить , вы увидите, что я глядя на страницу с целой кучей мнения о Кембридже, штат Массачусетс. 

Между тем, если я на самом деле изменить URL не быть почтовый индекс, как это, но что-то немного грязнее как Кембридж, + Массачусетс, где плюс способ кодировать пробел в URL и нажмите Enter, вы увидите, что я на самом деле увидеть почти те же новости. Может быть, это немного по-другому потому Cambridge самом деле имеет несколько кодов ZIP. Теперь, как я могу знать, что и, В самом деле, как я мог каким-то образом связать городов и населенных пунктов Чтобы сжать кодов в случае, если я хочу, чтобы позволить пользователю чтобы посмотреть либо? Что ж, получается, что есть сайт там называется geonames.org что Инициатива есть свободно доступная база данных всех виды географической информации, не только для США, но и для других стран, а также. В самом деле, если я иду к этому URL здесь, что также упоминается в поставленной задачи спецификация, вы увидите, что три список целой кучей почтовые файлы любой из которых может быть загружена вами. В самом деле, для этой проблемы установите Вы собираетесь скачать us.zip. В настоящее время в этом файле, является в целом куча данных в текстовом формате. Файлы очень похож на CSV-- с разделителями-запятыми file-- но на самом деле использует Вкладки для разграничения полей. Теперь, между тем, если посмотреть здесь на то, что я выделил, поля в этом файле происходит быть вещи, как коды стран, почтовые индексы, географические названия, а затем, в каком-то виде или другие, штатах и ​​округах, общины, и многое другое. На самом деле, я уже скачал этот файл заранее. Позвольте мне идти вперед и открыть его here-- us.text-- и, по сути, вы будете увидеть, если я прокрутите вниз, чтобы выровнять 16792 Вы увидите несколько записей с Кембриджем, Штат Массачусетс, и его различные коды ZIP. То, что вы также видеть, что есть округа, некоторые цифры, которые я действительно не понять, но и все способ справа, некоторые GPS coordinates-- широта и долгота. Это здорово, потому что один из особенности Google Maps API является способность обнаруживать где вы находитесь территориально в терминах координат GPS. 

Теперь давайте начнем, чтобы выяснить, как начать связывать эти вещи вместе. Мы дали вам целый куча кода распределения, а также в качестве базы данных MySQL. В самом деле, если я тяну PHPMYADMIN имеющих уже импортировали, как вы скоро будет, pset8.SQL, вы увидите таблицу MySQL, что Похоже, это, ID поле, страна Код, почтовый индекс, название и многое другое. Типы всех тех, колонны Я просто выводится читая readme.text подать здесь указано ли поле представляет собой целое число, или VARCHAR или тому подобное. 

Таким образом, мы создали эту таблицу для Вы и дал вам команды SQL выполнить, чтобы создать что стол в вашей собственной базе данных, но нет на самом деле никаких данных в нем еще. Скорее всего, вы будете иметь, чтобы скачать us.zip или почтовый любой страны файл с этой URL там. И тогда вы будете иметь, чтобы написать Сценарий командной строки в PHP это собирается открыть этот текст подать, перебрать его линии, а затем для каждого из эти строки делать вставки в том, что помещает таблицу в вашей базе данных MySQL. Так, в конце этого процесса, вы будете столкнулись этот сценарий в конечном счете, только один раз, в теории. На самом деле вы, вероятно, Запустите его кучу раз при попытке исправить различные ошибки. 

В конечном счете, вы будете иметь действительно большая база данных с тысячами и тысячи географических строк. Тогда вы собираетесь положить, что импорт Сценарий сторону, когда он работает и ваша база данных хорошо и правильно, а затем Вы собираетесь перейти на самом деле реализации самого коллажей. Коллажей будет выглядеть немного что-то вроде этого. В mashup.cs50.net, мы есть решение персонала что выглядит немного что-то вроде этого. В самом деле, если я нажму на эту газету значок в Кембридж, штат Массачусетс, Вы увидите спиннинг коротко и затем нажмите на значок упорядоченный список, маркированный список статей связанные с Кембридже, штат Массачусетс. Если я нажимаю на Чарльзтауне, Массачусетс, Я буду видеть то же самое для этого города. И если я нажимаю на Уотертаун, штат Массачусетс, там не может быть любой новости из Уотертаун, так что вы увидите что-то как медленный день новостей. 

Теперь, в то время, в верхнем левом углу являются некоторые привычные элементы управления Google Maps чтобы вы уменьшить масштаб, пан вверх, вниз, влево и вправо, но и окно поиска, которое мы ставим там. Так что, если я ищу, честно говоря, Единственный почтовый индекс Я знаю, 90210, мы на самом деле видим Беверли-Хиллз, Калифорния. При нажатии приводит меня Калифорния и целая куча новостей о Беверли-Хиллз. Теперь обратите внимание, тоже, что там произошло. Если я на этот раз поиск 02138 или даже Cambridge запятой Массачусетс или какой-либо вариант, вы получите немного автозаполнения списка. Теперь это, используя плагин для библиотеки под названием JQuery, и что плагин называется typeahead. Мы просто прочитать документация, скачал .js файл интегрированный в код распределения, так что вы в конечном счете, может написать код, который заполняет этот выпадающее меню с авто выбор либо автоматически предложения. 

Теперь код распределения, однако, что Вы получили не делает почти столько же. Вы получаете Google Map встроенные, и вы получаете контроль в левом верхнем углу, и вы получите окно поиска. Но если я что-то вроде введите 02138, нет места не будут найдены. Так что будет одна из наших целей здесь. Кроме того, если вы делаете шаг назад и взглянуть на самой карте, нет новостей бы то ни было. Даже если я нажимаю и сопротивления, без маркеров на самом деле появляются на новости, потому что это Задача остается для вас. 

Давайте взглянем, то на код распределения. После того, как вы скачали pset8.zip и расстегнул его в каталоге с виртуальными хостами в CS50 Appliance, Вы увидите их каталоги здесь внутри. Bin-- которые, как правило выступает за бинарный код для исполняемого programs-- включает, как и в pset7, некоторые РНР файлы, которые другие файлы включают в себя, то публика, которая является файлы, которые должны быть доступны для общественности пользователю с помощью браузера. Давайте взглянем на Каталог ящик, и мы видеть, что есть файл есть уже называют Импорт. Если мы откроем это с Gedit, мы увидим, что, к сожалению, существует не так много там. Все, что есть, тем не менее, это притон на вершине который определяет, какие interpreter-- в этом случае PHP-- должен быть использован на самом деле выполнить этот файл. Но тогда где он говорит TODO, где вы находитесь будет необходимо написать код что, вероятно, требует конфигурации файл, который находится в включает в себя каталог как мы делали раньше с PHP файлов. И тогда вы будете как-то открыть us.text, которые Вы, вероятно, распакуете уже. Тогда вы будете иметь, чтобы перебора строк в этом файле, возможно, с использованием некоторых функций предложено в описании. Затем вставьте каждый из тех, линии в базе данных MySQL с помощью функции запроса, который мы снова предоставили вам with-- или, по крайней мере, вариант их в functions.php, который мы увидим в минуту. 

Теперь давайте закроем импорт и вернуться к Наш каталог и на этот раз идти в включает в себя. А если я Имеется ли, вы увидите три файла совсем как поставленной задачи 7. И давайте бросим быстрый взгляд, например, в config.php. В там, меньше строк чем раньше, и его Кажется, этот файл содержит constants.php и functions.php. Мы используем немного отличается Техника этот раз на самом деле указать, что эти файлы являются относительными в текущем каталоге __ DIR__ представляет все каталог этом Файл, config.php, сама находится в. Так что это больше Явный способ задания что другие файлы, которые вы хотите требовать. 

Теперь, если я закрою этот файл и открыть constants.php вместо этого, Вы увидите файл очень напоминает для поставленной задачи 7, а также, хотя и с другой базе данных под названием pset8. Наконец, в functions.php, мы увидим только одну функцию на этот раз называется запроса. Это почти то же самое, за исключением мы обращаемся Ошибки в этот раз немного по-разному, но его использование является так же, как в задаче установлено семь. 

Теперь давайте вернемся в наш pset8 каталога, перейдите в публике, и там если я делаю Ls, вы увидите this-- articles.php, index.html, search.php, и update.php-- все файлы. А потом CSS шрифты, IMG, и JS каталог совсем как pset7. 

Давайте взглянем на index.html, который является будет очень точка входа в smashup. Сейчас в index.html, то увидите, вся куча элементов линий в голове, В частности, для начальной загрузки для наших собственных CSS последовала целая куча сценария теги для вещей, как карты, API Сам, специальный маркер с меткой Утилита котором мы уже упоминали в спецификация доступна для вас, Сам JQuery, загрузочный Сам, и одна библиотека, называется подчеркивания, которые мы говорим о в спецификации. Underscore.js как jquery.js это библиотека JavaScript что имеет целую кучу функциональности что много людей в мире желанию существовали в самой JavaScript. Таким образом, все это на самом деле довольно популярны. Мы также упомянул typeahead который является библиотека, которая делает это автозаполнения списка и наконец, ссылка на наш собственный JavaScript. 

В то же время, и, возможно, К счастью, это коллажей приводится в движение относительно мало HTML сюда внизу. Обратите внимание, что мы указали DIV в наше тело класса-контейнера для жидкости. Это, в бутстраповские-х Документация, просто означает, что этот DIV собирается заполнить видового экрана или окна браузера в полном объеме. 

Между тем, ниже, чем у нас есть DIV который открыл и сразу же закрыл с уникальным идентификатором карты. Это сейчас от Google Карты документация для его API, в результате чего я просто нужно есть пустой DIV, в который будет вводить, в конечном счете, фактическая Google Maps. Но об этом немного позже. 

Наконец, есть форма внутри здесь, который реализует текстовое поле наверху слева в нашем интерфейса для поиска. Обратите внимание, что мы использовали немного бутстрапе здесь too-- вещи, как форм-рядный и форма-группа. Мы дали бывший Уникальный идентификатор формы. А потом, в конечном счете, я на самом деле есть Тип входного, что довольно хорошо знакомы, которого идентификатор д. Просто конвенции. Q для query-- может иметь называют что угодно. И тогда заполнитель, Между тем, это город, и почтовый код, который вы могли бы вспомнить, видя в нашей коллажей демо раньше. Давайте закроем этот файл. 

Теперь взгляните на файлы PHP, что ждут, и затем файлы JavaScript. В наших PHP файлов, мы уже реализована для вас, Например, обновления. Update.php-- мы не будем тратить огромные количество времени на here-- в двух словах это файл, что наши Код JavaScript собирается связаться с помощью AJAX, что асинхронный метод, который это встроенный в JavaScript в эти дни, что это собирается, чтобы позволить нам, чтобы спросить update.php для получения дополнительной информации. 

В частности, в любое время пользователь перетаскивает карту или выполняет поиск, который прыгает Пользователь в другое место, наш код JavaScript, как мы скоро увидим, является буду называть update.php и попросить 10 или около того маркеров в окне просмотра основе от координат GPS в верхней и нижней углы этой карты. Мы можем заселить карту теперь, пользователь перешел на экране в порядке чтобы увидеть 10, вероятно, новый маркеры для разных городов. Между тем, этот файл, в конечном счете собирается выполнить SQL-запрос против нашей базе данных таблицу с именем места, которые собирается вернуться тех, 10 или меньше места. 

Между тем, в articles.php, является еще одним файла, который мы написали в полном объеме. Он очень похож по духу Функция ПРОСМОТР поставленной задачи 7, в который связался с Yahoo Finance для вас. Этот файл контакты Google Новости для вас, в конечном счете, захватывая машиночитаемой version-- в чем-то называется RSS format-- новостей Кембридж или Беверли-Хиллз или любом городе вы искали для основе этого geoparameter. Мы разобрать, что RSS, который находится всего в тип языка разметки называется XML, и тогда мы на самом деле вернуть его в браузере и ваш код JavaScript, В частности, в формате, называемом JSON, JavaScript Object Notation. Теперь вы увидите в specification-- мы указываем вам на то, как вы можете видеть, некоторые из грядущего back-- JSON что эта функция в конечном счете, позволяет вам заполнить эти всплывающие меню, так что при нажатии на маркер в карте вы на самом деле видите целую кучу пуль, каждый из которых Ссылки на статьи. 

Теперь давайте взглянем на еще один PHP-файл, который, к счастью, не есть много всего происходит on-- только довольно большой TODO. Сейчас этот файл объявляет Массив назвать местами. , И в итоге печатает что массив в JSON format-- довольно-печати его просто так, что вещи легче для отладки. К сожалению, в средний есть этот TODO, которая призывает к вам искать база данных для мест, соответствующих гео HTTP параметром. 

И, действительно, это будет быть одним из ваших challenges-- чтобы реализовать эту функциональность здесь так что, когда вы обратитесь к этому файлу URL как поиск. PHP? гео = то, ваш код будет в конечном итоге вернуть JSON Массив всех объектов в списке Таблица базы данных, которые соответствуют этому входу. Так что, если пользователь вводит в Кембридже, Ваш файл здесь search.php в конечном счете должны вернуть массив JSON для всех матчей в Кембридж, которые могут быть в штате Массачусетс но может быть даже где-либо еще. 

Наконец, давайте взглянем на два файлы, которые являются статическими ultimately-- Ваш файл CSS и ваш файл JavaScript. Если я иду в нашем каталоге CSS, есть целая куча файлов там, но большинство из них являются библиотеки. Я собираюсь взглянуть, В частности, на styles.css, которая является нашим собственным глобальный CSS это будет стилизовать весь этот коллажей. Я оставлю это вам прочитать комментарии здесь, но, в общем, это CSS, что гарантирует, что наши коллажей, по умолчанию из коробки, выглядит именно так, как мы хотим it-- с картой заполнения смотровое отверстие и с поиском запихивать в левом верхнем углу. Мы также взял на себя смелость стилизацию, что typeahead выпадающий список Меню немного, как хорошо. 

Наиболее важный файл Возможно, по этой поставленной задачи это последний, scripts.js. Внутри каталога JS даже несколько файлов. Все они библиотечные файлы для этого, кроме одного, scripts.js. Если мы откроем эту игру, давайте наш итоговый тур через функции, которые встроены в этом файле для вас и внимания вызова в несделанного, которые лежат впереди. 

В верхней части этого файла, три глобальные переменные. Один за картой, которая собирается быть ссылка на нашей карте Google. Вы можете думать об этом вроде как указатель. Между тем, мы имеем другой глобальной переменной называется информация, которая, как представляется, хранения возвращаемого значения вызова к новому google.maps.InfoWindow. JavaScript поддерживает объекты, которые очень похожи по духу Struts. И то, что эта линия для наши цели делает создает новую информацию окно, в памяти, а затем держать вокруг ссылки к нему в переменной с именем информация. И между этими, Между тем, то, что появляется чтобы быть пустой наличие Массив называется маркеры. Все эти газетные икон, или вы может вообще выбрать другой значок, которые будут храниться в конечном счете, в этом массиве так что мы можем очень легко добавить в карта и удалить их с карты. 

Теперь давайте прокрутите вниз чуть-чуть и свист с помощью кода, будет выполняется, как только DOM или документа объектная модель или Сама страница будет готова. Напомним, что этот синтаксис здесь просто указывает что следующий код должен быть выполнен только когда браузер закончил загрузка все остальное. 

Мы сначала объявить целая куча стилей, которые в конечном итоге стилизации Карта, как в спецификации. Затем мы объявляем Весь набор опций, которые в дальнейшем настроить Google Карта, что мы собираемся внедрить. Затем мы используем немного JQuery код, что объясняется в немного более подробно в спецификации, чтобы захватить что элемент, карта холст что мы так однозначно идентифицированы. А потом эта линия здесь то, что кажется волшебным дать нам Карта Google внутри наш собственное приложение, хранения ссылку на них в этой переменной называется карте. 

Наконец, здесь мы регистрируем то, что называется слушателем. Подумайте back-- путь, путь back-- к нулевой неделе в CS50 когда мы смотрели на пустом месте и поддержка через прогулку через вещи, называемые события и трансляции. Вы не могли бы использовать сам, но это механизм, посредством которого Браузер в этом случае может привлечь наше внимание, когда это готов на самом деле выполнить код. В этом случае, это будет слушать на карту для мероприятии под названием простаивает. Это означает, что браузер имеет завершил загрузку карту Google. На данный момент функция называется Настройка должна в конечном счете, быть казнен. Эта функция, настраивать мы увидим, написано нами. 

Теперь здесь находится функция что, к сожалению, просто TODO добавить маркер. Согласно спецификации. Вы будете нуждаться написать код, который на самом деле добавляет marker-- выглядит ли это как газету, так и на флэш тактику, или что-то else-- к карте Google. Вот сейчас в том, что функция называется настройке. Я оставляю это вам читать через это более подробно, но понимаю, что мы добавляем куча больше слушателей так что мы можем выполнить код, когда Пользователь нажимает на тащит карту. У нас также есть код здесь инициализирует эту typeahead плагин так что выпадающий Меню действительно работает. 

Но давайте сосредоточиться только на несколько мест здесь. В частности, это сделать здесь. Я отложить до онлайн документация и спецификации о том, как заполнить эту TODO. Но в двух словах, эта библиотека typeahead позволяет передавать В то, что общеизвестно как шаблон, который имеет некоторые переменные заполнители очень близки по духу PRINTF в%. * S. Но в этом случае, шаблон согласно спецификации позволяет указать какие переменные вы хотите вводить из данных, которые приходят назад от чего-то вроде PHP файлы, которые вы написали что излучают выход JSON. 

Теперь здесь понимают, что мы прислушиваясь к typeahead выборов когда пользователь в действительности ведет поиск и выбирает значение. Это, как мы на самом деле будет слушать, что и выполнить код в качестве результата. Тогда мы продолжаем настраивать коллажей только чуть-чуть. И, в конечном счете, мы называем Эта функция обновления. Он обновляет маркеры на экране. Подробнее об этом в минуту. Между тем, есть несколько небольшие функции здесь. Одним из них является hideInfo которые просто закрывает InfoWindow. Еще одна функция здесь, что в конечном итоге не будет слишком долго, удалить маркеры. Это собирается отменить все надстройка функция маркер не. А потом сюда, это поиск. А это интересно, потому что мы написал код JavaScript, что это собираюсь поговорить с search.php на сервер и получить обратно некоторую реакцию. 

Вы, конечно, будет по-прежнему необходимо реализовать search.php, но мы реализовали Код JavaScript это справимся, фактически выполняя поиск от этого текстовое поле. В частности, уведомления что эта функция здесь, поиск, действительно требует search.php по способу, называемому получить JSON, который мы видели в лекции. И синтаксис здесь это немного по-другому Из лекции в том, что мы используем JQuery так называемый интерфейс обещание. Подробнее об этом в спецификации. Это просто означает для наших Цели Теперь, когда две специальные функции, которые мы нужно позвонить с точечной нотации здесь сразу после вызова получить JSON. Одна из них называется сделать. Одна из них называется провал. Вы можете думать о них в качестве обработчика успеха и обработчик отказ только если что-то пойдет не так. 

Теперь давайте посмотрим на последний Несколько функций в этом файле. Вниз здесь функция называется showInfo, что показывает информацию в одном из тех, маленькие информационные окна, которые появляется, когда пользователь щелкает маркер. Вниз вот дальше есть что функция обновления что мы реализовали для вас. Он определяет границы карты. Каковы GPS координаты его северо-восток и юго-запад углы здесь. Мы подготовили некоторые параметры HDP здесь, а затем передал их в конечном счете, в update.php, который мы Также реализован для вас. В конечном итоге, возвращается некоторое JSON от файла называется update.php а затем удаляет любые Маркеры на экране а затем перебирает данные, которые возвращаются от update.php, который снова просто массив JSON. И тогда, в конечном счете добавляет маркер для каждый из этих мест, обработки отказ или ошибкам, которые могут очень хорошо случиться. 

Теперь только, чтобы дать вам вкус, как вы может пойти об отладке этот проект, понимаю, что я открыл в продвинуть эту вкладку здесь, чтобы этому адресу, pset8 / articles.php? гео = 02138. Теперь снова статьи о PHP мы реализовали для вас так что это не так много то, что вы будете использовать для отладки, а техники. Обратите внимание, что я искал Почтовый индекс Кембриджа здесь, и я получил обратно, на самом деле, JSON массив JSON объектов, внутри которых два keys-- ссылку и название. 

Так эта функциональность уже работает для вас. Но этот метод вручную происходит в URL, как это что-то вроде search.php? гео = Кембридж или 02138 или то, что пользователь набрал в должны бесценным, как вы сами, попробуйте чтобы выяснить точно, или почему search.php работает или нет. 

В конечном счете, то, у вас есть несколько ToDos перед вами. Вы собираетесь первых орудий что сценарий импорта, что считывает us.text в вашей базе данных. Вы тогда будете нуждаться осуществить search.php так, что он ведет себя так, как указано. Вы тогда собираетесь хотите сосредоточиться на scripts.js и в конечном итоге реализует те пару несделанного, в том числе для Настроить и что шаблон, добавить маркеры, удалить маркеры, и Затем в прошлом, но не менее важное, один личный контакт. 

Если у вас есть коллажей работу совсем как у нас, цель под рукой для Вас, чтобы добавить личный прикоснуться к вашей коллажей, является ли это эстетическое или функциональное. Возьмите коллажей очень немного на следующий уровень. Так долго, как вы заставить себя за ваше знакомство с самой спецификации и забрать одну технику новый, даже если это просто то эстетические, как меняется Схема карте, который вы используете, Сфера, что мы ожидаем, будут удовлетворены. Что же тогда проблема Set 8 Mashup. Оставайтесь с нами для более Спецификация и удачи решения этого ваш последний Проблема CS50 установить никогда. 

[Играет музыка]