[Musika nagpe-play] 

David J. MALAN: Hello. Tingnan natin ang isang lakad sa pamamagitan ng Problema Set 8 Mashup, na kung saan ay pagpunta sa hamunin ka upang gumuhit sa mga elemento para sa Google Maps may mga elemento mula sa Google News at i-mash ang mga ito nang magkakasama sa isang web applet na Binibigyang-daan ng gumagamit upang maghanap isang mapa para sa mga balita lokal sa mga partikular na mga bayan, lungsod, at zip code. Upang gawin ito, kami ay pagpunta sa isama ang ilang mga HTML, CSS, PHP, SQL, JavaScript, at isang diskarte Sa pangkalahatan ay kilala bilang AJAX upang upang lumikha ng mga nakaka-engganyong ito karanasan ng gumagamit. 

Sabihin sa unang para sa Google Maps mismo. Ito, siyempre, ay marahil isang pamilyar na interface. Ngunit ito ay lumiliko out na ang Google Maps Nagbibigay din ang isang API-- application mga programa interface-- sa pamamagitan ng kung saan na maaari mong gawin elemento ng Google Maps at isama ang mga ito sa ang iyong sariling mga application. Sa katunayan, sa buong ito proseso, na iyong pupuntahan upang makahanap ng isang pares ng mga URL partikular na nakatutulong na ay nabanggit sa pagtutukoy para sa Problema Set 8, Partikular ito sa Pagsisimula Patnubay o Gabay sa Developer ng Bersyon para sa 3 API ng Google Maps pati na rin bilang ang Google Maps JavaScript API reference v3, na isang higit pa arcane na basahin pero sa totoo ay lahat ng mga mas mababang antas mga detalye tungkol sa kung ano ang function o pamamaraan at mga bagay at mga pag-aari at mga kaganapan aktwal na dumating sa API, na halos kapareho sa espiritu upang [hindi marinig] mga pahina. 

Ngayon kung tinitingnan namin ang sa Google News, kakailanganin mo marahil ang isang pamilyar na interface dito. Ngunit ito ay lumiliko out maaari ka ring maghanap Google News para sa partikular na mga heograpiya sa pamamagitan ng HTTP parameter na tinatawag na geo. Sa katunayan, kung ang mag-zoom in ako hanggang dito, makikita mo na Ako ay sa news.google.com/news/section?geo=02138. At, sa katunayan, kung ang mag-zoom ko out, makakakita ka na ako pagtingin sa isang pahina na may isang buong bungkos ng mga tanawin tungkol sa Cambridge, Massachusetts. 

Samantala, kung talagang ko babaguhin ang Hindi na URL upang maging isang zip code tulad nito, ngunit may isang maliit na Messier tulad ng Cambridge, Massachusetts +, kung saan ang plus ay ang paraan ie-encode ka ng puwang ng character sa isang URL at pindutin ang Enter, makikita mo na ako talaga makita halos parehong balita. Marahil ito ay isang Medyo naiiba dahil Cambridge talaga ay may maramihang mga zip code. Ngayon kung paano alam ko na at, sa katunayan, kung paano maaari ko bang kahit papano itali lungsod at bayan sa mga zip code kung sakaling ako Gusto upang payagan ang user upang maghanap ng alinman? Well, ito ay lumiliko out na mayroong isang website out doon na tinatawag na geonames.org na isang inisyatibo na magkaroon isang malayang magagamit na database ng lahat uri ng mga geographic na impormasyon, hindi lamang para sa US, kundi pati na rin para sa iba pang mga bansa pati na rin. Sa katunayan, kung pumunta ako sa URL na ito dito, na ay nabanggit din sa problema nakatakda pagtutukoy, makikita mo itong tatlong listahan ng isang buong bungkos ng zip file anumang kung saan maaaring ma-download sa pamamagitan ng sa iyo. Sa katunayan, para sa problemang ito nakatakda na iyong pupuntahan upang i-download us.zip. Ngayon sa loob ng file na ito, ay isang buong bungkos ng data sa format na teksto. Ang mga file ay halos kapareho sa isang CSV-- Comma Separated Values ​​file-- ngunit ito aktwal na gumagamit mga tab upang maghiwalay field. Ngayon, samantala, kung tiningnan mo dito sa kung ano ang nai-highlight ko, ang mga patlang sa file na ito ay pumunta sa upang maging mga bagay tulad ng country code, postal code, pangalan ng lugar, at pagkatapos, sa ilang mga paraan o iba pang, mga estado at mga county, komunidad at higit pa. Sa katunayan, na hindi ko pa -download ang file na ito nang maaga. Hayaan akong sige at buksan ito here-- us.text-- at, sa katunayan, ikaw ay makita kung mag-scroll pababa ko sa line 16,792 makakakita ka ng ilang mga tala para sa Cambridge, Massachusetts at iba't-ibang mga zip code. Kung ano ang nakikita mo rin doon ay ang county, ilang numero na gagawin ko hindi talaga Nauunawaan, kundi pati na rin ang lahat ang paraan sa kanan, coordinates-- ilang GPS latitude at longitude. Mahusay ito dahil ang isa sa ang mga tampok ng Google Maps API ay ang kakayahang makita ang kung nasaan ka sa heograpiya sa mga tuntunin ng mga coordinate sa GPS. 

Ngayon simulan upang malaman kung paano upang ipaalam simulan tinali ang mga bagay-bagay. Nagbigay sa iyo kami ng isang buong bungkos ng code ng pamamahagi, pati na rin ang MySQL database. Sa katunayan, kung hilahin ako ng phpMyAdmin pagkakaroon Na-import na, tulad ng sa iyo sa lalong madaling panahon gagawin pset8.SQL, makikita mo ang isang MySQL talahanayan na Mukhang ganito, isang patlang na ID, bansa code, postal code, pangalan ng lugar at higit pa. Ang mga uri ng lahat ng mga mga haligi ko nakuha lamang sa pamamagitan ng pagbabasa ng readme.text -file dito na tinukoy kung ang isang patlang ay isang integer, o varchar o mga katulad. 

Kaya nilikha namin ang talahanayan na para sa sa iyo at ibinigay mo ang mga utos SQL upang maisagawa upang likhain ang talahanayan sa iyong sariling database, ngunit mayroong talagang pang mga data sa loob nito. Sa halip, na iyong pupuntahan kailangang -download us.zip o zip anumang bansa -file mula sa URL na iyon doon. At pagkatapos na iyong pupuntahan kailangang isulat isang script command line sa PHP na pagpunta upang buksan ang teksto na -file, umulit sa paglipas ng mga linya nito, at pagkatapos ay para sa bawat isa mga linya gawin ang isang insert sa na naglalagay sa talahanayan sa iyong MySQL database. Kaya sa katapusan ng proseso na ito, ikaw ay tumakbo na script na ganap minsan lamang sa teorya. Sa katotohanan ikaw ay malamang na patakbuhin ito ng grupo ng mga beses habang sinusubukang upang ayusin ang iba't-ibang mga bug. 

Sa huli, na iyong pupuntahan ay may talagang malaking database na may libu-libong at libu-libong mga geographic na mga hilera. Pagkatapos na iyong pupuntahan upang ilagay ang pag-import na script bukod sa sandaling ito ay gumagana at ang iyong database maganda at tama, at pagkatapos ay na iyong pupuntahan sa paglipat sa tunay pagpapatupad ng mga mashup mismo. Mashup ay pagpunta sa hitsura isang maliit na isang bagay na katulad nito. Sa mashup.cs50.net, namin magkaroon ng isang kawani ng solusyon na ang hitsura ng isang maliit na isang bagay na katulad nito. Sa katunayan, kung nag-click ako sa pahayagan na ito icon para sa Cambridge, Massachusetts, makikita mo ang isang umiikot sa madaling sabi at pagkatapos ay icon isang iniutos listahan, isang Naka-bullet na listahan ng mga artikulo na may kaugnayan sa Cambridge, Massachusetts. Kung nag-click ako sa Charlestown, Massachusetts, Kukunin ko makita ang parehong para sa bayan na iyon. At Kung nag-click ako sa Watertown, Massachusetts, doon ay maaaring maging anumang balita ng mula sa Watertown, kaya makikita mo ang isang bagay tulad ng mabagal na araw balita. 

Ngayon, samantala, sa kaliwang tuktok ay ang ilang mga pamilyar na mga kontrol sa Google Maps upang hayaan kang mag-zoom out, ipihit pataas, pababa, pakaliwa, o pakanan, kundi pati na rin ng isang kahon sa paghahanap na ilalagay namin doon. Kaya kung hahanapin ko ang, nang tapat, ang tanging iba pang mga zip code Alam ko, 90210, ipapakita namin talaga makita Beverly Hills, California. Kapag nag-click ito ay humahantong sa akin sa California at ang maramihang ng balita tungkol sa Beverly Hills. Ngayon napansin, masyadong, kung ano ang nangyari doon. Kung ako ang paghahanap na ito panahon para sa 02138 o kahit na Cambridge kuwit Massachusetts o ilang variant nito, kang makakuha ng maliit na dropdown autocomplete. Ngayon ito ay gumagamit ng isang plugin para sa isang library na tinatawag na jQuery, at ang plugin ay tinatawag na typeahead. Lamang basahin namin sa pamamagitan ng ang dokumentasyon, -download ang .js-file ng pinagsamang sa code sa pamamahagi sa gayon ay sa huli ay maaaring isulat ang code na pinupuno na dropdown menu sa auto mga pagpili o ang auto mungkahi. 

Ngayon ang code sa pamamahagi, bagaman, na natanggap ay hindi gawin halos kasing dami. Makakakuha ka ng naka-embed ang Google Map, at makukuha mo ang mga kontrol na natitira sa itaas, at kumuha ka ng box para sa paghahanap. Ngunit kung nagta-type ako ng isang bagay tulad ng 02138, walang lugar pa nakita. Kaya na magiging isa sa aming layunin dito. Dagdag pa rito, kung kumuha ka ng isang hakbang bumalik at tumingin sa mapa mismo, walang balita kung ano pa man. Kahit na nag-click ako at -drag, walang mga marker talaga lumitaw para sa mga balita dahil na Ang hamon ay ang natitira para sa iyo pati na rin. 

Tingnan natin ang isang hitsura pagkatapos sa code ng pamamahagi. Sa sandaling na-download mo pset8.zip at unzipped ito sa iyong direktoryo ng vhost sa CS50 Appliance, makikita mo ang mga mga direktoryo sa loob dito. Bin-- na sa pangkalahatan ay kumakatawan sa binary para sa mga maipapatupad na programs-- Kabilang, tulad ng sa pset7, ang ilang PHP mga file na kasama ang mga iba pang mga file, pagkatapos publiko, na kung saan ay ang mga file na kailangang upang ma-access sa publiko sa isang user sa isang browser. Tingnan natin ang isang hitsura sa bin direktoryo, at kami ay makita na mayroong isang file doon na tinatawag na-import. Kung buksan namin ito sa gedit, makikita natin ang na iyon, sa kasamaang-palad, mayroong hindi magkano doon. Ang lahat ng iyon ay doon, bagaman, ay isang shebang sa tuktok na tumutukoy kung aling mga interpreter-- sa kasong ito PHP-- dapat gamitin upang aktwal na isagawa ang file na ito. Ngunit kung saan sinasabi nito TODO ay kung saan ikaw ay pagpunta sa kailangan upang sumulat ng ilang code na marahil ay nangangailangan ng config file na nasa Kasama direktoryo bilang iyong ginawa namin bago sa mga file na PHP. At pagkatapos na iyong pupuntahan kailangang kahit papaano buksan up us.text saan ka siguro Na unzipped na. Pagkatapos na iyong pupuntahan kailangang umulit sa paglipas ng mga linya sa file na iyon, marahil gamit ang ilan sa mga function iminungkahi sa pagtutukoy. Pagkatapos ay ipasok ang bawat isa sa mga mga linya sa MySQL database sa pamamagitan ng paggamit sa query function, kung saan muli namin ang ibinigay sa iyo with-- o hindi bababa sa isang variant doon sa functions.php, na aming makita sa sandali lamang. 

Ngayon isara ang pag-import at bumalik upang ipaalam aming direktoryo at oras na ito pumunta sa Kasama. At kung gagawin ko l doon, makikita mo ang tatlong mga file masyadong tulad ng Problema Set 7. At tumagal ng isang mabilis na pagtingin ipaalam, halimbawa, sa config.php. Sa doon, ay mas kaunting mga linya kaysa sa bago, at ito Mukhang ang file na ito ay may kasamang constants.php at functions.php. Ginagamit namin ang isang bahagyang naiiba diskarteng oras na ito sa paligid upang aktwal na tukuyin na mga file na ito ay kamag-anak sa kasalukuyang direktoryo ng __ DIR__ Kinakatawan ang anumang direktoryong ito file, config.php, ay mismo sa. Kaya ito ay isang higit pa malinaw na paraan ng pagtukoy kung ano ang iba pang mga file na nais mong nangangailangan. 

Ngayon kung isinara ko ang file na ito at sa halip buksan ang constants.php, makikita mo ang napaka nakapagpapaalaala ng file Problema sa Set 7 din, kahit na na may ibang database na tinatawag na pset8. Sa wakas, sa functions.php, ipapakita namin ang isa lamang pag-andar oras na ito na tinatawag na query. Ito ay halos ang parehong maliban pangasiwaan namin Mga error sa oras na ito sa paligid nang kaunti sa ibang paraan, ngunit ito ay ang paggamit ay katulad ng nasa problema magtakda ng pitong. 

Ngayon sabihin bumalik sa aming pset8 direktoryo, pumunta sa publiko, at doon kung gagawin ko l, makikita mo ang this-- articles.php, index.html, search.php, at update.php-- lahat ng mga file. At pagkatapos ay ang css font, img, at direktoryo ng js medyo tulad ng pset7. 

Tingnan natin ang isang pagtingin sa index.html, na magiging talagang ang entry point sa smashup. Ngayon sa index.html, makikita mo ang isang buong tungkos ng mga elemento link sa head, partikular, para sa Bootstrap para sa aming mga sarili CSS sinusundan ng isang buong bungkos ng script mga tag para sa mga bagay tulad ng mga mapa, API mismo, isang espesyal na marker na may label na utility na aming nabanggit sa pagtutukoy ay magagamit para sa iyo, jQuery mismo, Bootstrap mismo, at isa pang library tinatawag na underscore pag-usapan natin sa spec. Underscore.js tulad ng jquery.js ay isang JavaScript library na may maramihang mga pag-andar na may maraming mga tao sa mga hiling mundo umiiral sa sarili nito ang JavaScript. Kaya ang lahat ng mga ito ay talagang masyadong sikat. Na nabanggit din kami typeahead kung saan ay ang library na ginagawa na dropdown autocomplete at sa wakas isang link sa aming sariling JavaScript. 

Samantala, at marahil ay Sa kabutihang palad, ito mashup ay hinimok sa pamamagitan ng relatibong maliit Down na dito sa ilalim ng HTML. Abiso na tinukoy kami ng div sa ang aming mga katawan ng klase-lalagyan fluid. Ito, sa bawat Bootstrap ni dokumentasyon, lamang Nangangahulugan ito na div ay pagpunta upang punan ang viewport o window ng browser ganap. 

Samantala, sa ibaba mayroon kaming isang div na binuksan at agad na sarado na may mga natatanging ID ng canvas mapa. Ito ngayon ay mula sa Google Dokumentasyon Maps para sa API nito, kung saan kailangan ko lang may isang walang laman na div sa kung saan upang mag-iniksyon, sa huli, isang aktwal na Google Maps. Ngunit higit pa sa na sa ilang saglit lamang. 

Sa wakas, mayroong isang form sa loob ng dito na ipinapatupad ang text box up itaas na kaliwang sa aming interface para sa paghahanap. Abiso na ang ginamit namin ng kaunting Bootstrap dito too-- mga bagay tulad ng form-inline at form-group. Binigyan namin ang dating natatanging ID ng form na ito. At pagkatapos, sa huli, ako aktwal na mayroon isang uri ng input, na kung saan ay medyo pamilyar, na ang ID ay q. Isang convention lang. Q para ma query-- mayroon ay tinawag ng kahit ano. At pagkatapos ay ang placeholder, samantala, ay lungsod, estado, at postal code na maaari mong isipin Nakikita sa aming mashup demo ng mas maaga. Isara ang file na ito Hayaan. 

Ngayon tingnan ang mga file na PHP na Naghihintay at pagkatapos ay ang mga file sa JavaScript. Sa aming mga file na PHP, hindi namin na ipinapatupad para sa iyo, halimbawa, mga update. Update.php-- hindi namin gumastos ng napakalaking dami ng oras sa here-- sa maikling sabi ang file na aming JavaScript code ay pagpunta makipag-ugnay sa pamamagitan ng AJAX na asynchronous diskarte na -built in sa JavaScript ang mga araw na pagpunta sa-daan sa amin upang hilingin update.php para sa karagdagang impormasyon. 

Sa partikular, anumang oras -drag ng user ang mapa o gumaganap ng isang paghahanap na jumps ang gumagamit sa isa pang lokasyon, ang aming JavaScript code, dahil kakailanganin namin sa lalong madaling panahon makita, ay pagpunta sa tumawag sa update.php at hilingin para sa 10 o kaya mga marker sa loob ng viewport batay sa mga coordinate sa GPS ng tuktok at ibaba mga sulok ng mapa na. Pagkatapos ay maaari naming repopulate ang mapa ngayon na ang gumagamit ay inilipat sa screen upang upang makita ang 10 malamang bagong mga marker para sa iba't ibang mga bayan. Samantala, ang file na ito ay sa huli pagpunta sa magsagawa ng isang SQL query laban sa aming database talahanayan na tinatawag na mga lugar kung saan Mawawala na upang ibalik ang mga 10 o mas kaunting mga lokasyon. 

Samantala, sa articles.php, ay isa pang -file na aming sinulat sa kabuuan nito. Ito ay lubos na katulad sa espiritu sa Problema Set 7 ng lookup function, kung saan-ugnay sa Yahoo Finance para sa iyo. Ang mga contact na file sa Google News para sa iyo, sa huli daklot isang machine-nababasa version-- sa isang bagay na tinatawag na RSS format-- ng balita para sa Cambridge o Beverly Hills o kahit anong bayan hinanap mo para sa batay sa na geoparameter. -Parse namin na RSS, na lamang uri ng markup language na tinatawag na XML, at pagkatapos namin talaga ibalik ito sa iyong browser at sa iyong code ng JavaScript, partikular, sa isang format na tinatawag na JSON, JavaScript Bagay pagtatanda. Makikita mo na ngayon ang sa specification-- ituro namin sa iyo sa kung paano mo talaga makita ang ilan sa mga JSON darating back-- na ang pagpapaandar na ito sa huli Hinahayaan ka populate mga popup menu kaya na kapag nag-click ka sa isang marker sa mapa aktwal mong makita ang maramihang ng mga bullet, ang bawat isa mga link sa isang artikulo. 

Ngayon ipaalam sa tumagal ng isang pagtingin sa isang huling PHP file na kung saan, sa kabutihang-palad, ay hindi gaanong pagpunta on-- lamang ng isang medyo malaking TODO. Sa ngayon declares ang file na ito isang array na tinatawag na mga lugar. At pagkatapos ay sa huli ng mga kopya na array sa JSON format-- Kahanga-pag-print nito kaya lang na mga bagay na mas madaling pag-debug. Sa kasamaang palad, sa gitna may ito TODO, kung aling tawag para sa iyo upang maghanap sa database para sa mga lugar na tumutugma sa isang geo HTTP parameter. 

At, sa katunayan, ito ay pagpunta sa maging isa sa iyong mga challenges-- upang ipatupad ang pag-andar dito upang kapag makipag-ugnay sa iyo ang file na ito gamit ang isang URL tulad ng paghahanap. php? geo = isang bagay, ang iyong code sa huli ay nagbabalik ng JSON array ng lahat ng mga lugar sa iyong database ng talahanayan na tumutugma sa input na iyon. Kaya kung type ng user sa Cambridge, ang iyong file dito search.php dapat na ganap na magbalik ng JSON array para sa lahat ng mga tugma para sa Cambridge, na maaaring Massachusetts pero maaaring kahit saan pa man. 

Panghuli, sabihin tumagal ng isang pagtingin sa dalawang mga file na static ultimately-- iyong CSS file at ang iyong JavaScript na file. Kung pumunta ako sa aming direktoryo CSS, mayroong isang buong bungkos ng mga file doon, ngunit karamihan sa kanila ay mga aklatan. Pupunta ako sa Titingnan, partikular, sa styles.css, na kung saan ay ang aming sariling mga global CSS na pagpunta sa stylize ito buong mashup. Kukunin ko iwanan ito sa iyo na basahin sa pamamagitan ng ang mga komento dito, ngunit, sa maikling sabi, ito ang CSS na nagsisiguro na ang aming mashup, sa pamamagitan ng default sa labas ng kahon, mukhang eksakto sa paraang nais namin it-- sa mapa ng pagpuno sa daungan pagtingin at sa paghahanap kahon ng hanggang sa kaliwang tuktok. Kinuha rin namin ang kalayaan ng stylizing na dropdown typeahead Menu ng kaunti pati na rin. 

Ang pinakamahalagang file marahil para sa problema-set ay ang huling isa, scripts.js. Sa loob ng iyong direktoryo ng JS ay mas higit pang mga file. Ang lahat ng mga ito ay mga file library maliban sa ang isang ito, scripts.js. Kung Bubuksan namin ito, ipaalam sa tumagal ng aming huling tour sa pamamagitan ng mga pag-andar na ay built in ang file na ito para sa iyo at atensyon tawag sa TODOs na hindi nagsasabi ng totoo maaga. 

Sa tuktok ng file na ito, tatlong mga pangkalahatang variable. Isa para sa isang mapa, na kung saan ay pagpunta sa maging ang pagsangguni sa aming Google mapa. Maaari mong isipin na ito uri ng bilang tagaturo. Samantala, mayroon kaming isa pang pandaigdigang variable tinatawag na impormasyon, na kung saan ay lumilitaw na pag-iimbak ang return halaga ng isang tawag sa mga bagong google.maps.InfoWindow. Sumusuporta sa JavaScript bagay na ay katulad na katulad sa espiritu sa Struts. At kung ano ang linyang ito para sa ang aming mga layunin ay ang magawa ay lumilikha ng bagong impormasyon window sa memorya at pagkatapos ay pagpapanatiling sa paligid ng reference patungo roon sa isang variable na tinatawag na Impormasyon. At sa pagitan ng mga, samantala, ay kung ano ang lumilitaw upang maging isang walang laman ang JavaScript array na tinatawag na mga marker. Ang lahat ng mga icon sa pahayagan, o mo Maaaring piliin ng isa pang icon ng sama-sama, pupunta na ma-imbak huli sa array nang sa gayon ay masyadong madali naming idagdag sa mapa at alisin ang mga ito mula sa mapa. 

Ngayon mag-scroll pababa ipaalam Medyo at humaging sa pamamagitan ng code na magiging isagawa sa lalong madaling DOM o dokumento modelo ng object o ang pahina mismo ay handa na. Isipin na ang syntax na ito dito lamang sa tinutukoy ng na ang mga sumusunod na code dapat na isagawa lamang kapag tapos ang browser nilo-load ang lahat ng iba pa. 

Unang namin ipinahahayag ng ang maramihang mga estilo, kung saan napupunta stylizing mapa ng bawat ang spec. Pagkatapos ay ipinahahayag namin ang isang ang maramihang mga pagpipilian, na higit pang ipasadya ang Google mapa na kami ay tungkol sa upang i-embed. Pagkatapos ay gamitin kami ng kaunting jQuery code, na kung saan ay ipinaliwanag sa isang bit mas detalyado sa spec, i-grab na elemento, mapa-canvas na kaya namin nang katangi-tangi na kinilala. At pagkatapos ay ang line dito ay kung ano ang tila magically magbibigay sa amin isang Google mapa sa loob ng ating sariling application, pag-iimbak ng isang reference na ipinapatupad dito sa variable na tinatawag na mapa. 

Sa wakas, pababa dito magparehistro namin kung ano ang tinatawag na tagapakinig ng. Mag-isip back-- paraan, paraan back-- sa linggo zero sa CS50 kapag itinuturing namin ang mga scratch at suporta nito sa pamamagitan ng isang lakad sa pamamagitan ng mga bagay na tinatawag na mga kaganapan at mga broadcast. Hindi mo maaaring magamit ito sa iyong sarili, ngunit ito ay isang mekanismo kung saan ang isang browser sa kasong ito maaaring makakuha ng aming pansin kapag ito ay handa upang aktwal na isagawa ang ilang mga code. Sa kasong ito, ito ay pagpunta sa makinig sa mapa para sa isang kaganapan na tinatawag na walang ginagawa. Nangangahulugan ito na ang browser ay may tapos nilo-load ang Google mapa. Sa puntong ito ng isang function na tinatawag na I-configure ang dapat sa huli ipatupad. Function na, i-configure, ipapakita namin makita, ay nakasulat sa pamamagitan ng sa amin. 

Ngayon down na dito ay isang pagpapaandar na iyon, sa kasamaang-palad, lamang TODO add marker. Ayun sa spec. ka ng pagpunta sa kailangan isulat ang code na talaga nagdadagdag ng isang marker-- kung mukha itong tulad ng isang pahayagan, o isang hinlalaki tak, o isang bagay na else-- sa Google mapa. Narito ngayon ay ang pag-andar tinatawag na i-configure. Kukunin ko iwanan ito sa iyo na basahin sa pamamagitan ng sa mas maraming detalyado, ngunit mapagtanto na idagdag namin isang bungkos mas maraming mga tagapakinig upang maaari naming isagawa code kapag ang -click ang gumagamit sa at na-drag ang mapa. Mayroon din kaming mga code in dito na initializes na typeahead plugin upang ang dropdown Menu ng aktwal na gumagana. 

Ngunit ng tumutok sa lamang ipaalam ilang mga lugar dito. Sa partikular, ito ang gagawin dito. Kukunin ko umalinsunod sa online dokumentasyon at mga pagtutukoy para sa kung paano punan ito TODO. Ngunit sa maikling sabi, ito library Binibigyang-daan ka typeahead mo upang pumasa sa kung ano ang pangkalahatan ay kilala bilang isang template, na kung saan ay may ilang mga variable na mga placeholder na halos kapareho sa espiritu sa% printf ni. * s. Ngunit sa kasong ito, ang template ayon sa mga spec Binibigyang-daan kang tukuyin kung ano ang mga variable na gusto mo upang mag-iniksyon mula sa data na dumating pabalik mula sa isang bagay tulad ng PHP ang mga file na nakasulat na nagpapalabas ng JSON output. 

Ngayon pababa dito mapagtanto na tayo ay makinig para sa mga seleksyon typeahead kapag aktwal na nagsasagawa ang user isang hanapin at pumipili ng isang halaga. Ito ay kung paano namin ikaw talaga pagpunta sa makinig para sa at isagawa ang ilang mga code bilang isang resulta. Pagkatapos ay patuloy naming upang i-configure ang mashup lamang nang kaunti. At, sa huli, tinatawag namin ito ang update function. -A-update ito ang palatandaan sa screen. Higit pa sa na sa isang sandali lamang. Samantala, may ilang maliit na function in dito. Isa rito ay hideInfo na nagsasara lang ang InfoWindow. Ang isa pang pag-andar dito, na sa huli hindi magiging masyadong mahaba, alisin ang marker. Iyon ang nangyayari upang i-undo ang anumang ang iyong mga function ng marker add gumagana. At pagkatapos ay down na dito ay sa paghahanap. At ang isang ito ay kawili-wili dahil namin isinulat ang code ng JavaScript na pagpunta sa makipag-usap sa search.php sa server at bumalik sa ilang mga tugon. 

Ikaw, siyempre, ay pa rin kailangan upang ipatupad search.php, ngunit ipinatupad namin ang Ng code ng JavaScript na pagpunta upang mahawakan ang aktwal na gumaganap Naghanap mula sa kahon ng teksto. Sa partikular, ang paunawa na ang function na ito dito, paghahanap, ay tumawag sa search.php pamamagitan ng isang pamamaraan na tinatawag na makakuha ng JSON, na nakita natin sa sermon. At ang syntax dito ay isang maliit na iba't ibang magbigay ng panayam mula sa na ginagamit namin jQuery tinatawag na pangako interface. Higit pa sa na sa spec. Ito ay nangangahulugan lamang para sa aming mga layunin na ngayon na may dalawang espesyal na mga pag-andar namin kailangan mong tumawag gamit ang tuldok pagtatanda dito kaagad pagkatapos ng pagtawag makakuha ng JSON. Ang isa ay tinatawag na tapos na. Ang isa ay tinatawag na mabibigo. Maaari mong isipin na ang mga bilang tagapangasiwa ng tagumpay at ang handler pagkabigo lamang kung sakaling may mangyaring hindi mali. 

Ngayon tingnan natin ang huling ipaalam ilang mga function sa file na ito. Down dito ay isang pagpapaandar tinatawag na showInfo, na Ipinapakita ng impormasyon sa isa sa mga maliit na window ng impormasyon na Nagpa-pop up kapag nag-click ang isang marker. Down dito pa ay na function na-update na nagpatupad kami para sa iyo. Tinutukoy nito ang mga hangganan ng mapa. Ano ang mga GPS coordinate ng kanyang hilagang-silangan at timog-kanluran ng kanto dito. Naghanda kami ng ilang mga parameter HDP dito at pagkatapos ay pumasa sa mga ito sa huli sa update.php, na hindi namin ipinatupad din para sa iyo. Na ganap ay makakakuha ng pabalik ilang JSON mula sa file na tinatawag na update.php at pagkatapos ay nag-aalis ng anumang mga marker sa screen at pagkatapos ay iterates sa paglipas ng ang data na bumalik mula update.php, na muli lamang ang JSON array. At pagkatapos nito sa huli ay nagdaragdag ng isang marker para sa bawat isa sa mga lugar na ito, sa paghawak ng mga pagkabigo o mga error na maaari nang napakahusay mangyari. 

Ngayon lang na magbigay sa iyo ng isang lasa ng kung paano mo Baka pumunta tungkol sa pag-debug ng proyektong ito, Napag-alaman na iyong binuksan ko sa isulong ang tab na ito dito sa URL na ito, pset8 / articles.php? geo = 02138. Ngayon, muli, mga artikulo tungkol sa PHP namin ipinapatupad para sa iyo kaya ito ay hindi kaya magkano ano ang magagawa mo gamit ang upang i-debug, ngunit sa halip ang diskarteng. Abiso na ang iyong hinanap ko para sa Zip code Cambridge dito, at ang nakuha ko pabalik, sa katunayan, isang JSON array ng JSON mga bagay sa loob ng kung saan dalawang keys-- link at pamagat. 

Kaya ang functionality na ito Gumagana na para sa iyo. Ngunit sa diskarteng ito ng mano-mano ng pagpunta sa isang URL tulad nito para sa isang bagay tulad ng search.php? geo = Cambridge o 02138 o kahit anong gumagamit ay nai-type sa dapat patunayan napakahalaga bilang iyo, sa iyong sarili, subukan upang malaman kung eksakto kung bakit o search.php ay gumagana o hindi. 

Sa huli pagkatapos, mayroon kang Ilang TODOs nangunguna sa iyo. Ikaw ay pagpunta sa unang ipinapatupad ng na script import na bumabasa sa us.text sa iyong database. Pagkatapos na iyong pupuntahan kailangan upang ipatupad search.php upang ito behaves eksakto tulad ng tinukoy. Pagkatapos na iyong pupuntahan gusto upang tumuon sa scripts.js at sa huli ipinapatupad ng mga ilang TODOs, kabilang ang para sa I-configure ang at na template, magdagdag ng marker, alisin ang marker, at pagkatapos ay tumatagal, ngunit hindi bababa sa, isa sa personal touch. 

Sa sandaling mayroon ka ng iyong mashup ng pagtatrabaho medyo tulad ng atin, ang layunin sa kamay ay para sa iyo upang magdagdag ng isang personal na pindutin sa iyong mashup, kung ito ay ang Aesthetic o functional. Gamitin ang mashup napaka bahagyang sa susunod na antas. Kaya hangga't itulak mo ang iyong sarili na lampas sa pagpapalagayang-loob ng iyong sa spec mismo at kunin ang isa diskarteng bago, kahit na kung ikaw lamang isang bagay Aesthetic tulad ng pagbabago ng layout ng mapa na iyong ginagamit, ang saklaw na inaasahan naming Magiging nasiyahan. Na pagkatapos ay Problema Set 8 Mashup. Manatiling nakatutok para sa higit sa pagtutukoy at suwertehin ka sana tackling ito, ang iyong huling -Set kailanman problema CS50. 

[Musika nagpe-play]