[Грає музика] 

Девід Дж Маланов: Привіт. Давайте прогуляємося по Проблема 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 встановити ніколи. 

[Грає музика]