[Възпроизвеждане на музика] 

DAVID J. Malan: Здравейте. Нека се поразходим из Проблем Set 8 Mashup, която ще ви предизвикателство да разчита и елементи за Google Maps с елементи от Google News и маш ги заедно в уеб аплет, че позволява на потребителя да търсите Карта на новини местно на специфични градове, места и пощенски кодове. За да направите това, ние ще интегрира някои HTML, CSS, PHP, SQL, JavaScript и техника известна като AJAX за да се създаде тази потапяне потребителски опит. 

Нека първо за Google Maps сама. Това, разбира се, е може би познатия интерфейс. Но се оказва, че Google Maps предвижда също заявление API-- програмиране interface-- чрез която можете да вземете елементи на Google Maps и да ги интегрират в собствени приложения. Всъщност, в този процес, ти започваш да намерите няколко URL адреси особено полезно, че са споменати в спецификация за Проблем Set 8, специално тази Първи стъпки Употреба или Ръководството за разработчици за Google Maps API Version 3, както и като програмен интерфейс на Google Maps JavaScript референтната v3, които е малко по-тайнствена да прочетете но всъщност има всичко на по-ниското ниво подробности за това, което на функции и методи и обекти и имоти и събития всъщност идват с API, много сходни по дух да [недоловим] страници. 

Сега, ако се вгледаме в Google News, ще може би виж позната интерфейс тук. Но се оказва, можете да търсите Google News за конкретни географски райони чрез HTTP параметър наречен Гео. В действителност, ако аз я увеличите до тук, ще видите, че Аз съм най- news.google.com/news/section?geo=02138. И наистина, ако съм я увеличите , вие ще видите, че аз съм търси в страницата с цял куп възгледи за Кеймбридж, Масачузетс. 

В същото време, ако действително се промени URL не да бъде пощенски код, подобен на този, но нещо малко по-объркана като Cambridge, + Massachusetts, където плюса е начина, по който кодира интервал в URL и натиснете Enter, ще видите, че аз всъщност виж почти същата новина. Може би това е малко по-различно защото Cambridge всъщност има няколко кода цип. Сега как ще знам, че и, в действителност, как бих могъл по някакъв начин вратовръзка градове до пощенски услуги в случай I да позволи на потребителя да погледнете нагоре или? Е, оказва се, че има един сайт там, наречен geonames.org което е инициатива за свободно достъпна база данни за всички видове географска информация, не само за САЩ, но и за други страни. В действителност, ако отида на този URL тук, които се споменава в определен проблем спецификация, ще го видите три Обява на цял куп файлове цип всеки от които може да бъде изтеглен от вас. В действителност, за този проблем избран започваш да изтеглите us.zip. Сега в рамките на този файл, е цяло куп данни в текстов формат. Файловете е много подобен на CSV-- Comma Separated Values ​​file-- но всъщност използва табове да определят границите на полета. Сега, междувременно, ако се вгледате тук, в това, което съм подчерта, полетата в този файл ще да бъде неща като кодовете на държавите, пощенски кодове, да търсите, и след това, в някаква форма или други, държави и области, общностите и други. Всъщност, вече съм изтеглили този файл предварително. Нека да вървим напред и да го отворите here-- us.text-- и, наистина, ще видя дали мога превъртете надолу, за да се подредят 16792 ще видите няколко записа за Cambridge, Масачузетс и неговите различни градове и села. Какво можете да видите там е окръга, някои цифри, които аз наистина не разбирам, но и всички, начинът на правото, някои GPS coordinates-- географска ширина и дължина. Това е страхотно, защото една от характеристиките на Google Maps API е възможността за откриване къде си географски от гледна точка на GPS координати. 

Сега нека да започнем да разбера как да започнете обвързване тези неща заедно. Ние Ви даде цялата куп разпространение на кодове, както и MySQL база данни. В действителност, ако аз извадя на PhpMyAdmin като вече внесени, тъй като скоро ще, pset8.SQL, ще видите таблица MySQL, че изглежда така, поле за самоличност, страна код, пощенски код, наименование и повече. Видовете всички онези колони I получени просто с четене на readme.text подадете тук, че определено дали поле е цяло число, или VARCHAR или други подобни. 

Така че ние сме създали тази таблица за вас и ще ви даде на SQL команди да изпълни, за да се създаде, че маса в собствената си база данни, но всъщност няма информация в него все още. По-скоро, ти започваш да се наложи да изтегляне us.zip или пощенски всяка страна файл от които URL там. И тогава вие ще трябва да напиша скрипт командния ред в PHP, че е Ще се отвори този текст файл, обхождане на своите линии, и след това за всеки тези линии правят вложка в които поставя на маса във вашата MySQL база данни. Така че в края на този процес, ще тичам, че скрипт в крайна сметка само веднъж на теория. В действителност най-вероятно ще да го ползвате куп пъти докато се опитва да поправи различни бъгове. 

В крайна сметка, ти започваш да има наистина голяма база данни с хиляди и хиляди географски редове. След това започваш да се сложи това внос скрипт настрана след това е работа и вашата база данни е хубаво и правилно, и след това започваш да се премине към реално изпълнение на самата Mashup. The Mashup ще изглежда малко нещо като това. В mashup.cs50.net, ние има решение на персонала че изглежда малко нещо като това. В действителност, ако кликнете върху този вестник икона за Кеймбридж, Масачузетс, ще видите предене икона за кратко и след това подреден списък, а списък с водещи символи на статии свързани с Кеймбридж, Масачузетс. Ако кликнете върху Чарлстън, Massachusetts, Ще видите едни и същи за този град. И ако щракнете върху Уотъртаун, щата Масачузетс, не може да бъде всеки Новини от от Watertown, така че ще видите нещо като бавно новини ден. 

Сега, междувременно, в горния ляв са някои познати контроли Google Maps да ви позволи да намалите мащаба, пан нагоре, надолу, наляво и надясно, но и поле за търсене, което ще се постави там. Така че, ако търсите, честно казано, единственият друг пощенски код Знам, 90210, ние всъщност ще видите Beverly Hills, Калифорния. При кликване той ме кара да се California и цял куп на новини за Бевърли Хилс. Сега забележите също, какво се е случило там. Ако това време търсенето на 02138 или дори Cambridge запетая Massachusetts или някои вариант от него, можете да получите Малко автоматично довършване меню. Сега това е с помощта на плъгин библиотека наречена JQuery, и че приставката се нарича typeahead. Ние просто прочетете документацията, Свалих .js файл интегрирани в кода за дистрибуция, така че да в крайна сметка може да се напише код, който изпълва, че падащото меню с автомобил селекции или предложения на AUTO. 

Сега кода за дистрибуция, макар, че сте получили не прави почти толкова. Можете да получите Google Map вградения, и получавате контролите в горния ляв ъгъл, и ще получите полето за търсене. Но ако объркате нещо подобно 02138, не места са все още открити. Така че ще бъде Една от целите ни тук. Освен това, ако вземете една стъпка назад и погледнете самата карта, че няма новини, каквато. Дори и да кликнете и влачене, не маркери всъщност се появи на новини, тъй че предизвикателство остава за вас, както и. 

Нека да разгледаме тогава най-кода за дистрибуция. След като изтеглите pset8.zip и го разархивирате във вашия vhost директория в CS50 Appliance, ще видите това директории тук вътре. Bin-- които обикновено означава двоичен за изпълнимия programs-- включва, както в pset7, някои PHP файлове, които други файлове включват, След това публично, което е файловете, които се нуждаят от да бъде публично достъпна на потребител с браузър. Нека да погледнем в указател бин, и ние ще се види, че има един файл там вече призова Import. Ако отворим тази с текстовия редактор, ще видим че, за съжаление, че не е много там. Всичко, което е там, че, е вертеп отгоре която определя кои interpreter-- в този случай PHP-- трябва да се използва за действително изпълнят този файл. Но след това, когато той казва, TODO е мястото, където сте ще трябва да пиша някакъв код които вероятно са необходими довереник файл, който е в включва указател както сме правили преди с PHP файлове. И тогава започваш да Трябва по някакъв начин да се отворят us.text която се предполага, разархивирате вече. След това ще трябва да обхождане на линиите в този файл, може би с помощта на някои от функциите, препоръчва в описанието. След това се поставя всяка една от тези линии в MySQL база данни чрез използване на функцията за заявка, която ние сме отново сте предоставили with-- или най-малко един вариант от него в functions.php, които ще видим в един момент. 

Сега нека да затворите внос и да се върнете към директорията ни и този път отиде в включва. И ако го направя ли там, ще видите три файлове съвсем като Проблем Set 7. И нека хвърлим един бърз поглед, например, в config.php. В там, е по-малко линии отколкото преди, и Изглежда този файл включва constants.php и functions.php. Ние използваме малко по-различен Техниката на този път наистина да уточни, че тези файлове са относителни в текущата директория __ DIR__ представлява каквато и директория тази файл, config.php, самата е вътре. Така че това е по- изрична начин на определяне Какви други файлове, които искате да се изисква. 

Сега, ако си затворя този файл и отворят constants.php вместо това, ще видите файл много напомня да Проблем Set 7, както и, макар и с различен база данни, наречена pset8. И накрая, в functions.php, ще видим само една функция този път, наречен заявка. Това е почти същото, ако не бяхме се справя грешки този път малко по- по различен начин, но това е използване е същите като в проблем зададете седем. 

Сега нека се върнем в нашия pset8 указател, идете в обществения, и там ако го направя ли, ще видите 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. 

В същото време, и може би За щастие, тази Mashup се задвижва от сравнително малко HTML тук долу на дъното. Забележете, че ние сме посочили Разделение в тялото ни от клас-контейнер течности. Това на фърмуера на документация, просто означава, че тази Разделение ще да запълни демонстрационен прозорец или прозорец изцяло на браузъра. 

В същото време, по-долу, че имаме Разделение която е отворена и затворена незабавно, с уникалния идентификатор на картата платно. Това сега е от Google Карти документация за неговото API, чрез което аз просто трябва да има една празна Разделение в която да се инжектира, в крайна сметка, на действително Google Maps. Но повече за това по малко. 

И накрая, има един вид вътре оттук които пособията текстовото поле до горния ляв в нашия интерфейс за търсене. Забележете, че сме използвали малко на фърмуера тук too-- неща като формуляр-инлайн и форма-група. Ние дадохме бившия уникален идентификатор на форма. И след това, в крайна сметка, аз всъщност трябва вид входен, което е доста познато, чието ID е р. Само една конвенция. Q за query-- може да има повикани нищо. И тогава на контейнера, В същото време, е град, държава, и пощенски код, който можете да си спомните, виждаме в нашата Mashup демо-рано. Нека да затворите този файл. 

Сега да разгледаме файловете PHP, че изчака и след това файловете JavaScript. В нашите PHP файлове, ние сме която вече се прилага за вас, например, ъпдейти. Update.php-- ние няма да се харчат огромни период от време за here-- в орехова черупка е файла, който ни JavaScript код ще да се свържете чрез AJAX, че асинхронен техника, която е вградена в JavaScript тези дни, че е ще ни позволи да поиска update.php за повече информация. 

По-специално, по всяко време потребителят влачи карта или извършва търсене, която скача потребителят на друго място, JavaScript код ни, тъй като ние скоро ще видите, е Ще се обадя на update.php и поиска за 10-те маркери в рамките на демонстрационен прозорец базирани координатите на GPS на горната и долната кътчета на тази карта. След това можем да се заселят отново картата сега, че потребителят се е преместило на екрана, за за да видите 10-вероятно новата маркери за различни градове. В същото време, този файл е в крайна сметка ще извърши заявка SQL срещу нашата база данни таблица, наречена места, които ще се върнат тези, 10 или по-малко места. 

В същото време, в articles.php, е друг подаде сме написали в своята цялост. Той е много подобен по дух Функцията LOOKUP Проблем Set 7 е, която контактува Yahoo Finance за вас. Този файл контакти Google Новини за вас, в крайна сметка измъкна четима от машина version-- в нещо наречена RSS format-- на новините за Cambridge или Beverly Hills или каквото град сте търсили на базата на това geoparameter. Ние разбор, че RSS, която е само на тип на Markup Language нарича XML, и след това ние всъщност да го върнете на вашия браузър и да ви JavaScript код, По-специално, във формат, наречен JSON, JavaScript Object Notation. Сега ще видите в specification-- да ви посоча как всъщност можете да видите някои от JSON идване back-- че тази функция в крайна сметка позволява да се пренесат тези изскачащи менюта, така че когато кликнете на маркер в картата което виждате цял куп куршуми, всеки от които линкове към статията. 

Сега нека да разгледаме един последен PHP файл, който, за щастие, не е така има много неща on-- Просто доста голяма TODO. В момента този файл декларира масив наречен места. И след това в крайна сметка щампи че масив в JSON format-- то доста-отпечатване просто така, че нещата са по-лесни за отстраняване на грешки. За съжаление, в Близък има тази TODO, която призовава за да търсите в база данни за места, отговарящи на гео HTTP параметър. 

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

И накрая, нека да разгледаме две файлове, които са статични ultimately-- Вашата CSS файл и JavaScript файл си. Ако отида в нашия CSS директорията, има един куп файлове там, но повечето от тях са библиотеки. Отивам да погледнете, По-специално, в styles.css, която е нашата собствена глобална CSS, че е Ще стилизирам целия този колаж. Аз ще го оставя на вас да прочетете коментарите тук, но, по-накратко, това е най-СГО, който гарантира, че нашата Mashup, по подразбиране от кутията, изглежда точно така, както ние искаме it-- с карта попълване на пристанището и с търсенето боксира в горния ляв ъгъл. Ние също така сме направили Позволих stylizing че typeahead падащото меню малко, както добре. 

Най-важният файл може би за този проблем избран е последната употреба, scripts.js. Вътре на Направи JS е още по-файлове. Всички те са библиотечни файлове с изключение на това, scripts.js. Ако отворим тази нагоре, нека да ни крайния турне през функциите, които са вградени в този файл за вас и внимание повикване на Todos, които ни предстоят. 

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

Сега нека да превъртите надолу малко и фуча чрез кода, който ще бъде изпълнена веднага след като DOM или документ обектен модел или Самата страница е готова. Припомнете си, че този синтаксис Тук просто се уточнява че следния код трябва да се извършва само когато браузърът е завършен зареждане всичко останало. 

Ние първо да обяви куп стилове, които в крайна сметка stylizing карта по спец. Ние след това да обяви цял куп възможности, което допълнително персонализиране на Google Карта, че сме на път да се вгради. Ние след това използвайте малко Jquery код, което се обяснява в малко по-подробно в спецификацията, за да вземете този елемент, карта-платно така че еднозначно идентифицирани. И тогава тази линия тук е това, което изглежда магически ни даде карта Google вътре нашето собствено приложение, съхраняване на информация за този курс в тази променлива, наречена карта. 

И накрая, тук можем да се регистрирате което се нарича слушател. Помислете back-- начин, начин back-- до нула седмица в CS50 когато погледна Scratch и подкрепата си чрез разходка чрез нещата, наречени събития и предавания. Може да не са използвали Направи си, но това е механизъм, чрез който Браузърът в този случай може да привлече вниманието ни, когато това е готови да всъщност изпълни някакъв код. В този случай, то се случва да слушате към картата за едно събитие, наречено покой. Това означава, че браузърът е приключи зареждането на картата на Google. В този момент функция, наречена Конфигуриране в крайна сметка да да бъде изпълнена. Тази функция, конфигуриране, ще видим, е написана от нас. 

Сега тук е функция че, за съжаление, е просто маркер TODO добавка. Per спец. започваш да се нуждаят от да се напише код, който всъщност добавя marker-- дали тя изглежда като един вестник, или палец халс, или нещо else-- към картата Google. Ето сега е, че функцията наречено конфигурирате. Аз ще го оставя на вас да прочетете чрез това по-подробно, но осъзнавам, че ние добавяме куп още Слушателите така че ние може да изпълни код, когато потребител кликне върху и влекове на картата. Ние също имаме код тук, че инициализира че typeahead плъгин така че падащото меню менюто действително работи. 

Но нека се фокусираме само върху няколко места тук. По-конкретно, това да направите тук. Аз ще се отложи за онлайн документация и спецификация за начина на попълване на тази TODO. Но с две думи, тази библиотека typeahead ви позволява да подадете в това, което е широко известна като шаблон, която има някои променливи контейнери много сходни по смисъл с ФОРМАТ е%. * ите. Но в този случай, шаблон за спец позволява ви да определите какво променливи искате да се инжектира от данните, които идват назад от нещо подобно на PHP файлове, които сте написали че са излъчващи JSON изход. 

Сега тук се разбере, че ние сме слушане за typeahead селекции когато потребителят действително провежда за търсене и избира стойност. Ето как ние всъщност ще слушам за това и изпълни някои код в резултат. След това ние продължаваме да конфигурирате на Mashup само малко. И, в крайна сметка, ние наричаме тази функция актуализация. Тя актуализира маркерите на екрана. Повече за това в един момент. В същото време, има няколко малки функции тук. Един от които е hideInfo които просто затваря InfoWindow. Друга функция тук, което в крайна сметка няма да е твърде дълго, премахнете маркери. Това ще унищожи каквото Вашата функция добавка маркер прави. И тогава тук е търсене. И това е интересно, защото ние писах кода JavaScript, че е Ще говорим за search.php относно: сървър и да се върнат някои отговор. 

Можете, разбира се, все още ще трябва да се прилагат search.php, но ние сме приложили JavaScript код, който е Ще се справя, осъществяващ търси от това текстово поле. По-специално, предизвестие че тази функция тук, търсене, който не изисква search.php по метод, наречен получите JSON, които видяхме в лекция. И синтаксиса тук е малко по-различна от лекция в който използваме Jquery т.нар обещание интерфейс. Повече за това в спец. Това просто означава за нашата цели сега, че има са два специални функции ние Трябва да се обадя с нотацията тук веднага след извикването получите JSON. Един от тях е направено. Един от тях е неуспешно. Можете да мислите за тях като успех манипулатор и водачът неуспех просто в случай, че нещо се обърка. 

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

Сега, само за да ви даде вкус на начина, по който може да отиде за отстраняване на грешки на този проект, осъзнавам, че съм открит през преминете този раздел тук на този URL, pset8 / articles.php? гео = 02138. Сега, отново статии за PHP реализирахме за вас така че това не е толкова това, което ще се използва отстраняване на грешки, а по-скоро на техниката. Забележете, че съм търсихте Кеймбридж пощенски код тук, и съм намерила назад, наистина, а JSON масив от JSON обекти във вътрешността на която са две keys-- връзка и заглавието. 

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

В крайна сметка след това, което трябва няколко Todos пред вас. Ти ще първите сечива че скрипт за внос, че чете в us.text във вашата база данни. Ти тогава щеше да се наложи да приложат search.php така че той се държи точно както е посочено. Вие тогава ще искате да се съсредоточи върху scripts.js и в крайна сметка изпълнява тези няколко Todos, включително за конфигуриране и този шаблон, добавете маркери, премахнете маркери, и След това продължи, но не на последно място, една личен стил. 

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

[Възпроизвеждане на музика]