[Музике може чути] 

ДАВИД Ј. Малан: Здраво. Хајде да прошетамо кроз Проблем сет 8 Масхуп, која ће вас изазов да ослањају елемената за Гоогле Мапс са елементима из Гоогле вести и пиреа их заједно у веб апплет који омогућава кориснику да тражи мапа за вести локалну специфичним градовима, градови, и поштански бројеви. Да бисте то урадили, идемо у интегришу неку ХТМЛ, ЦСС, ПХП, СКЛ, ЈаваСцрипт, и техника генерално познати као АЈАКС како да створи ово импресивно корисничко искуство. 

Хајде да прво за Гоогле Мапс самих. Ово је, наравно, можда познато интерфејс. Али испоставило се да Гоогле Мапс такође пружа АПИ-- апликацију програмирање интерфаце-- преко којих можете узети елементе Гоогле Мапс и интегришу их у Ваши сопствене апликације. Заиста, током ове Процес, идеш да пронађе неколико УРЛ-ова посебно корисно да се помињу у спецификација за Проблем Сет 8, конкретно ова Први кораци Водич или водичу развојног за Гоогле Мапс АПИ Версион 3, као као Гоогле Мапс ЈаваСцрипт АПИ в3 референце, што је мало више волшебни за читање али заправо има све на нижем нивоу детаљи о томе шта функција или метода и објекти и простори и догађаји заиста долазе са АПИ, Веома слично у духу да [неразумљиво] страницама. 

Сада, ако погледамо на Гоогле Невс, ви ћете можда видети познати интерфејс овде. Али испоставило се да претражите Гоогле вести за одређене географске преко ХТТП параметар који се зове гео. У ствари, ако зумирам овде, видећете да Ја сам у невс.гоогле.цом/невс/сецтион?гео=02138. И, заиста, ако зоом напоље, видећете да сам гледајући странице са хрпом погледа око Кембриџа у Масачусетсу. 

У међувремену, ако се заиста променити УРЛ адреса није да буде поштански број овако, али нешто мало висе нереда као и Кембриџ, Масачусетс +, где плус је начин на који кодира карактер простора у УРЛ и притисните Ентер, видећете да сам у ствари види скоро исту вест. Можда је мало другачија јер Кембриџ заправо има вишеструке зип кодове. Сада како сам могао знати да и, у ствари, како сам некако могао тие градова и мањих места да зип кодова у случају да Желим да омогућавају кориснику гледати ни горе? Па, испоставило се да постоји сајт тамо зове геонамес.орг која је иницијатива да се слободно доступна база података свих врсте географских информација, не само за САД, већ и за друге земље. У ствари, ако одем у овом УРЛ овде, који помиње се иу проблему сет спецификација, ви ћете га видети три списак гомила зип датотека свака од којих се може преузети од тебе. У ствари, за овај проблем сет идете да преузмете ус.зип. Сада у оквиру овог фајла, је цео Гомила података у текстуалном формату. Фајлови је веома слична ЦСВ-- вредности одвојене зарезом филе-- али то је заправо користи табс да демаркирају поља. Сада, у међувремену, ако погледате овде у шта сам нагласила, поља у овом фајлу ћемо да буде ствари као кодове земаља, поштански бројеви, топоними, а онда, у неком облику или друге државе, и жупаније, заједнице, и још много тога. У ствари, ја сам већ довнлоадед ову датотеку у унапред. Пусти ме само напред и отвори га овде- ус.тект-- и, заиста, ви ћете видим да ли идите доле на ред 16,792 видећете неколико записа за Цамбридге, Масачусетс и њене многобројне поштански бројеви. Оно што такође видети постоји округ, неки бројеви који не раде јако разумети, али и све начин на десној, неки ГПС цоординатес-- географска ширина и дужина. Ово је сјајно, јер је један од особине Гоогле Мапс АПИ је способност да детектује где си географски у смислу ГПС координата. 

Хајде сада да почну да смислимо како да старт везивање те ствари заједно. Дали смо вам цео гомила дистрибуције, као и МиСКЛ базе података. У ствари, ако повучем ПхпМиАдмин има Већ увезена, као што сте ускоро ће, псет8.СКЛ, видећете МиСКЛ табелу која изгледа овако, поље ИД, земља код, поштански број, мјесто и назив више. Врсте свима Колоне ја једноставно изведени читањем реадме.тект филе овде није наведена да ли је поље је цео број, ор варцхар или слично. 

Тако смо створили тај сто за ти и дао вам команде СКЛ да изврши да створи да сто у својој бази података, али у ствари постоји подаци у њој још. Уместо тога, ти ћеш морати да скидање ус.зип или поштански било које земље филе од тог УРЛ тамо. А онда ћеш морати написати командна линија скрипта у ПХП то је ће отворити тај текст филе, поновити преко своје линије, а онда за сваку од те линије урадимо уметак у то ставља сто у МиСКЛ базу. Тако на крају овог процеса, ви ћете су покренути тај сценарио на крају Само једном у теорији. У стварности вероватно ћете Рун Ит много пута док је покушавао да поправи разне бубе. 

На крају крајева, ти ћеш имати стварно велики база података са хиљадама и хиљаде географских редова. Онда ћеш да се тај увоз скрипта по страни кад је ради и ваша база података је лијепо и тачно, а затим ти ћеш прећи на стварно имплементацију самог масхуп. Масхуп ће изгледати мало нешто овако. У масхуп.цс50.нет смо имате решење особља да изгледа нешто овако. Заиста, ако кликнете на ове новине ицон за Кембриџа у Масачусетсу, видећете окреће ицон кратко и онда наредио листа, нумерисана листа чланака повезани са Кембриџа у Масачусетсу. Ако кликнем на Цхарлестовн, Массацхусеттс, Видећу исти за тај град. И ако кликнем на Ватертовн, Масачусетс, чини се да неће бити никаквог Вест о у Ватертовн, тако да ћете видети нешто као спорог вести дана. 

Сада, у међувремену, у горњем левом углу су неки познати Гоогле Мапс контроле да ти умањили, пан горе, доле, лево, десно и, али и поље за претрагу да смо тамо ставили. Дакле, ако сам тражити, искрено, једина поштански број Знам, 90210, ми ћемо заправо видети Беверли Хилс, Калифорнија. Када кликнете доводи ме до Калифорнија и цела гомила вести о Беверли Хиллс. Сада приметите, такође, шта се тамо десило. Ако И овога пута потрага за 02138 или чак Кембриџ зарез Масачусетс или неки варијанта, добијате Мало аутоцомплете падајући. Сада се то користи плугин за библиотеку под називом јКуери, и да се зове плугин типеахеад. Ми једноставно прочитате документација, преузели јс филе интегрисани у код дистрибутивног тако да вас на крају може написати код који попуњава ту падајући мени са ауто селекције или су ауто сугестије. 

Сада код дистрибуције, ипак, да сте добили не ради скоро колико. Добијате Гоогле Мап ембеддед, и добијате контроле у ​​горњем левом, и добијате поље за претрагу. Али ако куцам нешто као 02138, нема места налазе се још. Тако да ће бити један од наших циљева овде. Штавише, ако узмете корак назад и погледамо саму мапу, нема вести уопште. Чак и ако кликнем и драг, но маркери заправо појављују за вест, јер то изазов је оставио за вас као добро. 

Хајде да погледамо онда на коду за дистрибуцију. Када преузмете псет8.зип и распакирали га у ваш вхост директоријум у ЦС50 Апплианце, видећете ово именици овде унутра. Бин-- који углавном означава бинарни за извршну програмс-- укључује, као у псет7, неки ПХП датотеке које друге датотеке укључују, онда јавно, која је датотеке које је потребно да буду доступни јавности до корисника са претраживача. Хајде да погледамо у бин, а ми ћемо видим да постоји фајл тамо већ зове Увоз. Ако отворимо ово са гедит, видећемо да, нажалост, нема много тамо. Све што је тамо, међутим, је ствар на врху који прецизира која интерпретер-- у овом случају ПХП-- треба користити да заправо изврши ову слику. Али онда где пише ТОДО је где си ти Требаће написати неки код који вероватно захтева цонфиг датотека која је у укључује директоријум као што смо раније урадили са ПХП датотеке. А онда ћеш морају некако отвори ус.тект који вам вероватно већ распакирали. Онда ћеш морати да Посматрајте преко линија у том фајлу, можда користећи неке од функција предложен у спецификацији. Онда убацити сваки са Линије инто МиСКЛ базу коришћењем упита функцију, која опет сам ти обезбедио са-- или барем варијанта њихове у фунцтионс.пхп, који ћемо видети за који тренутак. 

Хајде сада да затворите увоз и вратите се наш каталог и овај пут ићи у укључује. И ако то урадим лс тамо, видећете три фајла сасвим попут Проблем Сет 7. И хајде да бацимо поглед, на пример, у цонфиг.пхп. У ту, је мање линија него пре, то и Изгледа ова датотека садржи цонстантс.пхп и фунцтионс.пхп. Користимо мало другачије Техника овај пут да заправо навести да су ови фајлови су релативне на текућем директоријуму __ ДИР__ представља шта год директоријум ово фајл, цонфиг.пхп, сама је у. Дакле, ово је више експлицитна начин наводећи шта друго датотеке желите да захтевају. 

Сада ако затворим ову слику и отвори цонстантс.пхп уместо, видећете датотеку веома подсећа Проблем за сет 7 је такође, мада са друге базе података зове псет8. Коначно, у фунцтионс.пхп, видецемо само једну функцију овај пут звао упит. Ово је скоро иста, осим носимо Грешке овај пут мало другачије, али то је употреба је исто као у проблему сет седам. 

Хајде сада да се вратимо у нашу псет8 Директоријум, иду у јавност, и тамо ако то урадим лс, видећете ово-- артицлес.пхп, индек.хтмл, сеарцх.пхп, и упдате.пхп-- све фајлове. А онда ЦСС фонтови, имг, и јс директоријум лепшег псет7. 

Хајде да погледамо индек.хтмл, која је Биће заиста улазна тачка за Смасхуп. Сада у индек.хтмл, видећете цео гомила линк елемената у главу, конкретно, за Бутстрапа за наше ЦСС затим гомила скрипте ознаке за ствари као што су мапе, АПИ Сама, специјална маркер са етикетом програм који смо поменули у спецификација је доступан за вас, Сама јКуери, боотстрап Сама, а други библиотека зове подвлаку који говоримо о у спец. Ундерсцоре.јс попут јкуери.јс је ЈаваСцрипт библиотека да има гомилу функционалности да много људи у светској жељи постојала у самом ЈаваСцрипт. Дакле, све су то заправо прилично популаран. Такође смо поменули типеахеад што је библиотека коју да ли то аутоцомплете падајући и коначно линк на нашем ЈаваСцрипт. 

У међувремену, и можда срећу, ово масхуп је условљено релативно мало ХТМЛ доле на дну. Обавештење које смо навели у див наше тело класе-контејнера течности. Овај, по Боотстрап је документација, само значи да је овај див ће попунити оквир за приказ или прозор прегледника потпуности. 

У међувремену, испод које имамо див да је отворен и одмах затворен са јединственим ИД за карте платну. Ово сада је од Гоогле-а Мапе документација за АПИ, при чему ја једноставно треба да имате празан див у којој се убризгати, на крају, стварна Гоогле Мапс. Али више о томе у само мало. 

Коначно, ту је облик унутар којих овде имплементира текст кутија горе горе лево у нашем интерфејс за претраживање. Обавештење које смо користили мало Боотстрап овде најбоље урадио-- ствари као што су образац-инлине и форма-група. Ми смо дали бивши јединствени ИД форме. А онда, на крају, ја заправо имам инпут типе, која је прилично позната, чији је ИД К. Само конвенција. К за куери-- могао имати позван ништа. А онда чувар места, У међувремену, је град, држава, и поштански број који сте можда сећате видећи у нашем масхуп демо раније. Хајде да затворите ову слику. 

Сада погледајте на ПХП датотеке које чекају и онда су ЈаваСцрипт датотеке. У нашим ПХП фајлова, имамо Већ имплементиран за вас, на пример, исправке. Упдате.пхп-- нећемо потрошити огроман количина времена на овде- у кратким цртама је фајл да наша ЈаваСцрипт код иде да контактирате путем АЈАКС који асинхрони техника која је уграђен у ЈаваСцрипт ових дана то је ће нам омогућити да питам упдате.пхп За више информација. 

Конкретно, у свако доба корисник драгс карту или обавља претрес који скоковима корисник на другу локацију, наш ЈаваСцрипт код, као што ћемо ускоро видети, је ће позвати упдате.пхп и питајте за 10-ак маркера унутар прозора заснован о ГПС координате на врху и дну углови тој мапи. Тада можемо да насели карту сада да корисник је преселио екран како би да видим 10 вероватно нова маркери за разне градове. У међувремену, овај фајл је на крају ће да изврши СКЛ упит против нашој бази табле назива места која ће да се врате они 10 или мање локација. 

У међувремену, у артицлес.пхп, је још један филе ми смо написали у целости. То је веома сличан у духу на Проблем је одредио 7 ЛООКУП функција, који је контактирао Иахоо Финанце за вас. Овај фајл контактира Гоогле Невс за вас, на крају грабе машински читљив версион-- у нечему назива РСС формат-- вијести за Цамбридге или Беверли Хиллс или шта год град који сте тражили за основу те геопараметер. Ми парсе да РСС, што је само тип маркуп лангуаге зове КСМЛ, а онда ми заправо вратите га на вашем претраживачу и на ваш ЈаваСцрипт кода, конкретно, у формату зове ЈСОН, ЈаваСцрипт Објецт Нотатион. Сада ћете видети у специфицатион-- смо вам указати колико заправо можете видети неке од ЈСОН наредном бацк-- да ова функционалност на крају омогућава вам да раст становништва те попуп менија тако да када кликнете на маркера у Мапа ви видели гомилу метака, од којих сваки линкове ка чланку. 

Сада хајде да погледамо још један ПХП фајл који, срећом, не има много иде ајде-- Само прилицно велика ТОДО. Управо сада овај фајл изјављује низ назива места. И на крају отисци да низ у ЈСОН формат-- ит прилично-штампање тако да ствари су лакше дебуг. Нажалост, у средњи постоји ово ТОДО, која од вас захтева да тражи база података за места подударања гео ХТТП параметар. 

И, заиста, ово ће бити један од вашег цхалленгес-- да спроведе ову функционалност овде тако да када се обратите ову слику са УРЛ адреса попут претраживања. пхп? гео = нешто, Ваш број ће на крају вратити ЈСОН Низ сва места у вашој таблица у бази података да достигли тај улаз. Дакле, ако је корисник у Кембриџу, Ваш фајл овде сеарцх.пхп треба на крају вратити ЈСОН низ за све мечеве за Цамбридге, која може бити у Масачусетсу али може да буде и било где другде. 

На крају, хајде да погледамо два датотеке које су статични ултиматели-- Ваш ЦСС фајл и је ЈаваСцрипт датотека. Ако одем у наш ЦСС директоријум, постоји читава гомила фајлова тамо, али већина њих су библиотеке. Идем да погледам, конкретно, у стилес.цсс, која је наша глобална ЦСС то је ће стилизовати целу ову масхуп. Ја ћу то оставити за вас да прочитате овде су коментари, али, у суштини, ово је ЦСС да гарантује да наш масхуп, по дефаулту из кутије, Изгледа онако како смо то-- желите са карте попуњавања виев порт и са потрази бок горе у горњем левом углу. Такође смо узео слободу стилизује да типеахеад падајућем менију Мени мало као добро. 

Најважнији фајл можда за овај проблем сет је ово последњи, сцриптс.јс. Унутар вашег ЈС директоријума је још више датотека. Сви они су либрари филес осим овог, сцриптс.јс. Ако отворимо ово, хајде да наше Коначна тура кроз функције које су уграђени у овом фајлу за тебе и скрећу пажњу на тодос који су пред нама. 

На врху овог фајла, Три су глобалне променљиве. Један за карту, који ће бити референца на нашем Гоогле мапи. Можете мислити о томе некако као показивач. У међувремену, ми имамо друга глобална променљива Подаци зове, која је изгледа складиштење повратне вредности позива да нови гоогле.мапс.ИнфоВиндов. Јавасцрипт подржава објекте који су веома слични у духу на Струтс. А шта то линија за наше намере ради ствара нову инфо прозор у меморији, а затим држећи око референце појму у променљивој зове информација. А између оних, У међувремену, је оно што се појављује да буде празан ЈаваСцрипт Арраи зове маркере. Сви ти новинских икона, или сте Можда изабрати сасвим другу икону, ће се чувати на крају у овом низу тако да можемо врло лако додати мапа и да их уклоните са мапе. 

Хајде сада да сцролл довн мало и вхизз кроз кода који ће бити извршена чим ДОМ или документа објекат модел или Сама страна је спремна. Подсетимо да је овај синтаксе Овде једноставно прецизира да следећем коду Треба само извршава када је завршио претраживач лоадинг све остало. 

Ми прво се изјашњавају гомила стилова, који заврше стилизује мапа по спец. Ми онда прогласити гомила опција, што додатно прилагодили Гоогле Карта да ћемо ускоро да уградите. Затим користимо мало јКуери кода, што се објашњава у мало детаљније у спец, да зграбите тај елемент, мапа-платно да смо тако јединствено идентификована. И онда ова линија овде је шта изгледа магично нам Гоогле мапа унутар наше апликације, складиштење референцу тим системима у том променљивом зове карти. 

Коначно, овде доле региструјемо оно што се зове слушалац. Размислите натраг-- начин, начин бацк-- да недеље нула у ЦС50 када смо погледали Сцратцх и његова подршка кроз шетњу кроз за ствари називају догађаји и емитује. Можда сте користили то сами, али то је механизам којим претраживач у овом случају могу добити нашу пажњу када је спремна да изврши заправо неки код. У овом случају, то ће слушати на карти за неког догађаја под називом беспослени. То значи да прегледач има завршио учитавања Гоогле мапу. У овом тренутку функција названа цонфигуре треба коначно бити погубљен. То функција, конфигурисање, видећемо, је написао нас. 

Сада овде доле је функција да, нажалост, је само ТОДО адд маркера. По спец. ти ћеш требати да да стварно пише код додаје маркер-- да ли изгледа као новина, или палца ексер, или нешто елсе-- на Гоогле мапи. Ево сада је то функција звао цонфигуре. Ја ћу то оставити за вас да прочитате кроз ово детаљно, али схватите да додамо Још гомилу Слушаоци тако да можемо извршити код кад корисник кликне на и драгс мапу. Такође имамо код овде да иницира да типеахеад плугин тако да падајући Мени заправо ради. 

Али хајде да се фокусирају на само Неколико места овде. Конкретно, ово да радим овде. Ја ћу се приклоне онлајн документација и спецификација како да попуните овај ТОДО. Али у суштини, ова библиотека типеахеад вам омогућава проћи у шта се опште позната као предложак, која има неке променљиве плејсхолдери веома сличан у духу до принтф је% * с.. Али у овом случају, шаблон по спец омогућава вам да наведете шта хоћеш варијабле убризгати из податка да је дошао вратио из нечега попут ПХП датотеке које сте писмени да се емитује ЈСОН излаз. 

Сада овде схвате да смо ми слушање за типеахеад селекцијама када корисник стварно спроводи претраживање и бира вредност. Овако ми заправо смо ће да слуша за то и извршава неки код као резултат. Онда смо наставили да подесите масхуп само мало. И, на крају, ми зовемо ова функција ажурирање. Она ажурира маркере на екрану. Више о томе за који тренутак. У међувремену, постоји неколико мале функције у овде. Од којих је хидеИнфо којем једноставно затвара Инфовиндов. Још једна функција овде, што на крају неће бити превише дуго, уклоните маркере. То ће поништити све што Ваш оглас маркера функција ради. А онда овде доле је претрага. А овај је занимљив јер смо ми Писао ЈаваСцрипт код који је ће разговарати са сеарцх.пхп на сервера и вратимо мало одговор. 

Ви, наравно, и даље ће треба да спроведу сеарцх.пхп, али ми смо спроводи ЈаваСцрипт код које је иде за руковање заправо обављање тражи од тог оквира за текст. Посебно, обавештења да ова функција овде, претраживање, не зови сеарцх.пхп од метода названог гет ЈСОН, који смо видели у предавању. И овде синтакса је мало другачија од предавања у које користимо јКуери тзв обећање интерфејс. Више о томе у спец. То једноставно значи за нашу сврхе сада када тамо су два специјална функције смо треба да позовете са дот нотацијом Овде одмах након расписивања добити ЈСОН. Један се зове готов. Један се зове фаил. Можете мислити на њих као успех руковалац и руковалац неуспех само у случају да нешто крене наопако. 

Сада погледајмо последњи Неколико функција у овом фајлу. Овде је функција зове сховинфо, која показује информације у једној од оних литтле инфо прозори који искаче када корисник кликне маркер. Овде доле даље је да функција ажурирање да смо имплементирали за вас. Он одређује границе карти. Које су ГПС координате његовог североисточно и југозападни углови овде. Ми смо припремили неке параметре ХДП овде и онда их прошао на крају да упдате.пхп, који имамо Такође спроводи за вас. То на крају врати мало ЈСОН из фајл под називом упдате.пхп а онда узме било који маркери на екрану а затим преко Примењује Подаци који се вратио из упдате.пхп, којих Опет је само ЈСОН низ. А онда се на крају додаје маркер за свака од тих места, руковање неуспех или грешке који могу веома добро деси. 

Сада само да вам дам укус како сте Можда одем о дебуггинг овај пројекат, схватим да сам отворио у унапреди ову картицу овде на овај УРЛ, псет8 / артицлес.пхп? гео = 02138. Сада, опет, чланци о ПХП реализовали смо за вас па ово није толико шта ће бити користећи да дебуг, већ технике. Обавештење да сам тражили Цамбридге зип код овде, и ја сам се вратила, заиста, ЈСОН низ ЈСОН објеката унутар којих су два кеис-- линк и наслов. 

Дакле, ово функционалност ради већ за вас. Али ова техника ручно иде на УРЛ овако нешто слично сеарцх.пхп? гео = Цамбридге или 02138 или шта год је корисник откуца треба доказати непроцењиве вредности као што сте, сами, покушајте да схватим тачно да ли је или зашто сеарцх.пхп ради или не. 

У крајњој линији онда, имате неколико тодос испред вас. Идеш у првих оруђа да увоз скрипта да чита у ус.тект у бази података. Тада ћеш требати да спроведе сеарцх.пхп тако да управо понаша као што је наведено. Тада ћеш желети да се фокусира на сцриптс.јс и на крају спроводи они пар тодос, укључујући за цонфигуре и да шаблон, адд маркере, уклоните маркере, и онда трајати, али не и најмање важно, један лични печат. 

Када имате свој рад масхуп сасвим као што је наша, циљ на дохват руке је за вас да додате лични додирните на ваш масхуп, да ли је то естетски или функционално. Узмите масхуп икада тако благо на следећи ниво. Докле год ви сами претеривати Ваш познавање саме спец и покупи једну технику нова, чак и ако је то само Естетска нешто попут промене распоред на карти који користите, обим да очекујемо ће бити задовољни. То онда је проблем сет 8 Масхуп. Следите за више у спецификација и пуно среће рјешавању ово, твој последњи ЦС50 Проблем сет икада. 

[Музике може чути]