[Музички] 

Дејвид Џ MALAN: Здраво. Ајде да ги прошетка низ Проблем Постави 8 Mashup, кој ќе ви предизвик да се осврне елементи за Google Maps со елементи од Google News и каша нив заедно во веб аплет кој му овозможува на корисникот за пребарување мапа на вести локалните на конкретни градови, градови, а поштенски кодови. За да го направите ова, ние ќе треба да интегрираат некои HTML, CSS, PHP, SQL, Го вклучите Javascript-и техника општо позната како AJAX, со цел да се создаде ова извонредно корисничко искуство. 

Ајде прво за Google Maps себе. Ова, се разбира, е можеби познат интерфејс. Но, се покажа дека Google Мапи исто така, обезбедува API-- апликација програмирање interface-- преку кој може да се земе елементи на Google Maps и ги интегрираат во Вашите сопствени апликации. Всушност, во текот на оваа процес, си оди да се најде на неколку адреси особено корисно дека се наведени во спецификација за Проблем Постави 8, конкретно ова Getting Started Водич или Прирачник за развивачот за Google Maps API верзија 3, како и како на Google Maps API за да го вклучите Javascript v3 референца, која е малку повеќе таинствени да се прочита но всушност има сите на пониско ниво детали за она што функции или методи и предмети и имот и настани всушност доаѓаат со API-то, многу слични во духот на [нечујни] страници. 

Сега, ако ги погледнеме на Гугл њуз, ќе можеби да гледаат познат интерфејс тука. Но, се покажа исто така, може да се бара Google вести за одредени географски области преку HTTP параметар се нарекува гео. Всушност, ако зумирате до тука, ќе видите дека Јас сум во news.google.com/news/section?geo=02138. И, навистина, ако зумирате надвор, ќе видите дека сум гледајќи во една страница со еден куп ставови во врска со Кембриџ, Масачусетс. 

Во меѓувреме, ако јас всушност ја менува URL-то да не биде ZIP код вака, но нешто малку messier како во Кембриџ, Масачусетс +, каде плус е начинот на кој го кодира празно место во URL-то и притиснете ентер, ќе видите дека јас всушност види речиси ист вести. Можеби тоа е малку поинаква бидејќи Кембриџ всушност има повеќе поштенски кодови. Сега како ќе знам дека и, Всушност, како би можел некако врзуваат градови за поштенски кодови во случај јас сакаат да им овозможи на корисникот да се погледне нагоре или? Па, излегува дека има веб-сајт таму се нарекува geonames.org што е иницијатива да имаат слободно достапни база на податоци за сите видови на географски информации, не само за САД, но, исто така, за други земји, како и. Всушност, ако одам на овој URL тука, што се споменува и во проблемот поставени спецификација, ќе го видите три листата на целиот куп на zip датотеки секој од нив може да се симне од вас. Всушност, за овој проблем во собата ви се случува да го симнете us.zip. Сега во оваа датотека, е целосно куп на податоци во текст формат. Додадени фајлови: е многу сличен на CSV-- разделени со запирки вредности file-- но тоа всушност го користи јазичиња за обележување полиња. Сега, пак, ако се погледне тука во она што сум го истакна, на полиња во оваа датотека се случува да се работи како кодови држава, поштенски кодови, имиња, а потоа, во некоја форма или други, држави и региони, заедници, и многу повеќе. Всушност, јас сум веќе ја преземале оваа датотека однапред. Дозволете ми да оди напред и да го отворите here-- us.text-- и, навистина, ќе види дали можам движете надолу за да се редат 16.792 ќе видите неколку рекорди за Кембриџ, Масачусетс и неговите разни поштенски кодови. Она што исто така се види дека постои на земјата, некои бројки кои јас навистина не се разбере, туку и на сите начинот на десната страна, некои GPS coordinates-- географската ширина и должина. Ова е одлична, бидејќи еден од карактеристики на Google Maps API е способност да се детектираат каде што се географски во однос на GPS координатите. 

Сега ајде да почнат да дознаам како да се започне врзување овие работи заедно. Ние ви даде целина куп на дистрибуција код, како и MySQL база на податоци. Всушност, ако јас се повлече phpMyAdmin имаат веќе увезени, како што наскоро ќе се, pset8.SQL, ќе видите дека MySQL табелата изгледа вака, проект поле, земја код, поштенски код, викано место и многу повеќе. Типови на сите оние колона I добиени едноставно со читање на readme.text поднесе тука дека одреден дали областите е цел број, или varchar или слично. 

Значи ние сме создадени масите за вас и да ви даде SQL команди да се изврши за да се создаде дека маса во вашата база на податоци, но има всушност нема податоци во него уште. Наместо тоа, ви се случува да треба да се преземете us.zip или поштенски ниту една земја датотека од овој URL таму. И тогаш ви се случува да мора да пишува командната линија PHP скрипта во тоа е отвораа дека текстот поднесе, iterate во текот своите редови, и потоа за секоја од тие линии се направи една влошка во кој ги става на маса во вашиот MySQL база на податоци. Па на крајот од овој процес, ќе се кандидира дека сценариото на крајот само еднаш во теорија. Во реалноста најверојатно ќе да ја стартувате неа еден куп пати додека се обидуваат да утврдат различни грешки. 

На крајот на краиштата, ви се случува да имаат навистина голема база на податоци со илјадници и илјадници географски редови. Потоа си оди за да се стави дека увозот скрипта настрана еднаш тоа е работа и вашата база на податоци е убаво и точни, а потоа ви се случува да се движат за да всушност спроведување на микс себе. Во микс се случува да се погледне малку нешто како ова. Во mashup.cs50.net, ние има персонал решение што изгледа малку нешто како ова. Навистина, ако јас кликнете на овој весник Икона за Кембриџ, Масачусетс, ќе видите врти icon кратко и потоа подредена листа, нумерирани листа на статии поврзани со Кембриџ, Масачусетс. Ако јас кликнете на Чарлстаун, Масачусетс, Јас ќе ги видат истите за тој град. И ако јас кликнете на Ватертаун, Масачусетс, таму не може да биде било кој вести од од Ватертаун, па ќе видите нешто како бавно вести ден. 

Сега, пак, во горниот лев агол се некои познати Google Maps контроли за да те одзумирате, тава горе, долу, лево и десно, но исто така и полето за пребарување која ќе стави таму. Значи, ако јас го побарате, искрено, единствената друга ZIP код знам, 90210, ние всушност ќе се види Беверли Хилс, Калифорнија. Кога кликнавте тоа ме доведува до Калифорнија и целиот куп на вести за Беверли Хилс. Сега забележите, исто така, она што се случи таму. Ако јас овој пат пребарувањето за 02.138 или дури Кембриџ, Масачусетс запирка или некои варијанта, ќе добиете малку AutoComplete паѓачкото мени. Сега ова е со помош на приклучокот За една библиотека наречена jQuery, и дека приклучокот се нарекува typeahead. Ние едноставно се чита преку документацијата, презел .js поднесе интегриран во дистрибутивната код, така што ќе во крајна линија може да напише код кој пополнува дека паѓачкото мени со авто селекции или авто предлози. 

Сега дистрибуција код, меѓутоа, дека сте го добиле тоа не го прави речиси колку. Можете да добиете на Google на сајтот вградени, и ќе го добиете контроли горниот лев агол, и ќе го добиете полето за пребарување. Но, ако го напишете нешто како 02138, нема места се уште не најде. Значи тоа ќе биде Една од нашите цели тука. Покрај тоа, ако се земе еден чекор назад и се погледне на сајтот себе, нема вести она. Дури и ако јас кликнете и повлечете, нема маркери, всушност, се појави за вести, бидејќи тоа Предизвикот е оставено на вас, како добро. 

Ајде да ги разгледаме потоа на дистрибуција код. Откако сте ја преземале pset8.zip а тоа е отпакуван во вашиот vhost директориум во CS50 апарати, Ќе ги видите овие Директориуми тука внатре. Bin-- кои генерално се залага за бинарен за извршна programs-- вклучува, како и во pset7, некои PHP датотеки, кои други датотеки вклучуваат, тогаш јавноста, која е додадени фајлови кои треба да бидат јавно достапни на корисник со друг пребарувач. Ајде да ги разгледаме во bin директориумот, а ние ќе види дека постои датотека таму веќе се нарекува увоз. Ако го отвори ова со gedit, ќе видиме дека, за жал, таму не е многу таму. Сето тоа е таму, иако, е фирма на врвот кој одредува кој interpreter-- во овој случај PHP-- треба да се користи за да се, всушност, ја извршите оваа датотека. Но, тогаш, каде што вели НАПРАВИ е местото каде што сте ќе треба да пишувам некои код што веројатно бара конфиг датотека која е во вклучува директориум како што правевме досега со PHP датотеки. И тогаш ви се случува да мора некако да се отвори us.text кој ви се претпоставува дека ја отпакувате веќе. Тогаш сте ќе треба да се iterate во текот на линии во таа датотека, можеби користејќи некои од функциите предложени во спецификацијата. Потоа внесете секоја од овие линии во MySQL база на податоци со користење на барање функција, што ние повторно сме ви обезбеди with-- или барем една варијанта смеси во functions.php, што ќе видиме во само еден миг. 

Сега ајде да се затвори увоз и се врати на нашите директориум и овој пат да одат во вклучува. И ако го направам ls таму, ќе видите три датотеки слично Проблем Постави 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, и ЈС директориумот слично pset7. 

Ајде да ги разгледаме во index.html, што е ќе биде навистина влезна точка на smashup. Сега во index.html, ќе видите целата куп на линк елементи во главата, Поточно, за подигање за нашите сопствени CSS проследено со целиот куп на сценариото тагови за нешта како на мапи, API себе, посебна ознака со етикета алатка која ги споменавме во спецификацијата е на располагање на вас, jQuery себе, подигање себе, и друга библиотека наречен црта која зборуваме за во спецификации. Underscore.js како jquery.js е да го вклучите Javascript библиотека дека има еден куп на функционалност дека многу луѓе во светот желба постоеле во JavaScript себе. Значи, сите овие се всушност доста популарни. Ние, исто така споменува typeahead која е библиотека која дали тоа AutoComplete паѓачкото мени и конечно линк до нашите сопствени 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 за пребарување функција, кои контактирале Јаху финансии за вас. Оваа податотека контакти Гугл њуз за вас, во крајна линија грабање машински-читлив version-- во нешто нарекува RSS format-- на вести за Кембриџ или Беверли Хилс или што и градот сте бараа за врз основа на тоа geoparameter. Ние се интерпретира дека RSS, што е само еден тип на XML јазикот за Селектирај нарекува, а потоа ние, всушност, вратете го на вашиот интернет пребарувач и на вашиот JavaScript код, Поточно, во формат наречен JSON, го вклучите Javascript-Објектно нотација. Сега ќе видиме во specification-- ние ви точка како што всушност може да се види некои од JSON наредниот back-- дека оваа функционалност на крајот Ви овозможува да се доверат оние менија така дека кога ќе кликнете на маркер на картата вие всушност ја видите целиот куп на куршуми, од кои секоја линкови до една статија. 

Сега ајде да ги разгледаме во последен PHP фајл кој, за среќа, не го прави тоа имаат многу случува on-- само една прилично голема НАПРАВИ. Токму сега оваа датотека изјавува низа наречен места. И тогаш на крајот отпечатоци кои низа во JSON format-- тоа прилично-печатење само така што работите се полесно да се debug. За жал, во средината има овој НАПРАВИ, која повикува за вас да пребарувате на база на податоци за места појавување гео HTTP параметар. 

И, навистина, ова се случува да биде една од вашите challenges-- за спроведување на оваа функционалност тука така што кога ќе се јавите оваа датотека URL-то како пребарување. PHP? гео = нешто, кодот на крајот ќе се врати на JSON низа на сите места во вашиот база на податоци маса, што одговара на онаа влез. Значи, ако на корисникот видови во Кембриџ, вашето досие тука search.php во крајна линија треба да се врати на JSON низа за сите натпревари за Кембриџ, кои можат да бидат во Масачусетс но може да биде дури и никаде на друго место. 

И на крај, ајде да ги разгледаме во две додадени фајлови кои се статични ultimately-- вашиот CSS датотека и вашиот вклучите Javascript-датотека. Ако одам во нашата CSS директориум, има еден куп на датотеки таму, но повеќето од нив се библиотеките. Одам да ги погледне, Поточно, на styles.css, која е нашата сопствени глобални CSS тоа е случува да стилизирам целата оваа микс. Ќе го оставиме тоа за вас да се чита преку коментари овде, но, во мало, ова е CSS кој обезбедува дека нашите микс, по правило надвор од кутијата, изгледа токму онака како што сакаме it-- со мапа пополнување на гледање порта и со пребарување кутија нагоре во горниот лев агол. Ние, исто така зедоа за слобода stylizing дека typeahead паѓачкото мени малку, како и. 

Најважните датотека можеби за овој проблем во собата е ова последново, scripts.js. Во внатрешноста на вашиот ЈС директориум е дури и повеќе датотеки. Сите од нив се библиотека датотеки освен овој, scripts.js. Ако ги отвориме ова горе, нека ги нашите конечна турнеја низ функции кои се вградени во датотеката за вас и да се сврти вниманието на Todos што претстојат. 

На врвот од оваа датотека, три глобални променливи. Еден за мапа, која се случува да за упатување на нашите карта на Google. Можете да мислам на тоа вид на како покажувач. Во меѓувреме, имаме друг глобалната променлива наречен инфо, кој се чини дека чување на повратната вредност на повик до нови google.maps.InfoWindow. Поддржува JavaScript предмети кои се многу слични во духот Struts. И она што оваа линија за нашите цели се прави е создавање на нови инфо прозорец во меморијата, а потоа водење околу референца со него во променлива наречена Инфо. И меѓу нив, пак, е она што се појавува да биде празна го вклучите Javascript- низа наречен маркери. Сите тие весникот икони, или може да изберете друга икона целосно, ќе треба да се чуваат на крајот во оваа низа така што ние многу лесно може да додадете мапа и ги отстранат од картата. 

Сега ајде да дојдете долу малку и факир преку код кој ќе биде извршуваат во најкус ДОМ или документ објект модел или самата страница е подготвена. Потсетиме дека оваа синтакса тука само одредува дека следните код треба да се изврши само Кога пребарувачот е завршена вчитување сè друго. 

Ние прво се прогласи целиот куп на стилови, кои завршуваат stylizing На сајтот, како за на спецификации. Ние тогаш се изјасни за целиот куп на опции, што уште повеќе се прилагодите на Google мапа која ние сме за да го вградите. Ние тогаш се користи малку на jQuery код, што е објаснето во малку повеќе детали во спецификации, да го зграби тој елемент, сајтот платно дека ние толку уникатно идентификувани. И тогаш оваа линија, тука е она што се чини магично ни даде мапа на Google во внатрешноста на нашата сопствена апликација, чување повикување на истиот во таа променлива наречена картата. 

Конечно, овде долу регистрираме она што се нарекува слушател. Размислете back-- начин, начин back-- до недела нула во CS50 кога ние погледна гребење и својата поддршка преку прошетка преку за работи вика настани и емисии. Вие не може да се користи тоа сами, но тоа е механизам со која прелистувач во овој случај може да се добијат нашето внимание, кога тоа е подготвени да всушност се изврши некој код. Во овој случај, тоа се случува да се слуша на сајтот за настан кој се вика неактивен. Ова значи дека прелистувачот заврши вчитувањето на сајтот на Google. Во овој момент функција наречена Конфигурирај треба во крајна линија биде погубен. Таа функција, конфигурирање, ќе видиме, е напишана од нас. 

Сега овде е функција дека, за жал, е само НАПРАВИ додаток маркер. На спец. сте ќе треба да се напише код кој, всушност, додава marker-- дали тоа изгледа како весник или палецот тактика, или нешто else-- на сајтот на Google. Еве сега е таа функција наречен конфигурирате. Ќе го оставиме тоа за вас да го прочитате преку овој во повеќе детали, но сфати дека ова се додаде еден куп Слушатели така што можеме да се изврши код кога корисникот ќе кликне и влече на сајтот. Ние исто така имаме код овде дека иницијализира дека приклучокот typeahead така што паѓачкото мени всушност се работи. 

Но, ајде да се фокусираат само на неколку места во текстот. Конкретно, ова да го направите тука. Ќе се одложи до онлајн документација и спецификацијата за тоа како да ја пополните оваа НАПРАВИ. Но, во мало, оваа библиотека 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 а потоа ги отстранува сите маркери на екранот а потоа во текот iterates на податоци и тоа е се врати од update.php, што повторно е само JSON низа. И тогаш се додава на крајот маркер за секоја од тие места, ракување со неуспех или грешки кои би можеле многу добро да се случи. 

Сега само да ви даде вкусот на тоа како ќе може да се обратите за дебагирање овој проект, сфатат дека јас сум отворена во унапреди ова јазиче тука за да овој URL, pset8 / articles.php? гео = 02.138. Сега, пак, статии за PHP воведовме за вас така што ова не е толку многу она што ќе биде со користење на да се debug, туку техниката. Забележете дека јас го барав Кембриџ ZIP код овде, и сум добил назад, навистина, JSON низа на JSON објектите во кои два keys-- линк и насловот. 

Значи оваа функционалност веќе работи за вас. Но, оваа техника на рачно се случува на URL-то како оваа за нешто како search.php? гео = Кембриџ или 02.138 или што корисникот треба да ја внесе во докажат својата голема вредност за вас, сами, се обиде да дознаам точно дали или зошто search.php работи или не. 

На крајот на краиштата, тогаш, ќе мора неколку Todos пред вас. Ти одиш прво да се имплементира дека увозот скрипта која се вели во us.text во вашата база на податоци. Ти тогаш ќе треба за спроведување на search.php така што тоа се однесува токму онака како што е наведено. Ти си тогаш се случува да сакаме да се фокусираат на scripts.js и на крајот се имплементира оние неколку Todos, вклучувајќи ги конфигурирате и која дефиниција, додадете маркери, отстранете маркери, и тогаш последно, но не и најмалку важно, еден личен допир. 

Откако ќе го вашиот микс за работа доста како нашата, целта при рака е за вас да додадете лична допир на вашиот микс, дали тоа е естетски или функционални. Земете микс некогаш толку малку за да на следното ниво. Толку долго како што се притисни надвор вашата блискост со спецификации се и ги собереш една техника нови, дури и ако тоа е само нешто естетски како менување на изгледот на картата дека сте користење, обемот што ние очекуваме ќе бидат задоволни. Тоа е тогаш проблемот Постави 8 Mashup. Stay tuned за повеќе во спецификација и најдоброто од среќа справување со овој, Вашиот последен CS50 проблем во собата било кога. 

[Музички]