>> [CHWARAE CERDDORIAETH]
>> DAVID J. Malan: Helo.
Gadewch i ni fynd am dro drwy Problem Set 8 Mashup,
sydd yn mynd i herio chi i tynnu ar elfennau ar gyfer Google Maps
gydag elfennau o Google News a thatws stwnsh nhw at ei gilydd i mewn i rhaglennig gwe sy'n
yn galluogi defnyddiwr i chwilio map am newyddion lleol
i drefi penodol, dinasoedd, a chodau zip.
Er mwyn gwneud hyn, rydym yn mynd i integreiddio rhywfaint o HTML, CSS, PHP, SQL,
JavaScript, a thechneg a elwir yn gyffredinol fel AJAX er mwyn
i greu'r trochi profiad y defnyddiwr.
>> Gadewch i ni yn gyntaf i Google Maps ei hun.
Mae hyn, wrth gwrs, efallai rhyngwyneb cyfarwydd.
Ond mae'n troi allan bod Google Maps hefyd yn darparu cais API--
rhaglennu interface-- drwy lle y gallwch eu cymryd elfennau o Google Maps
ac integreiddio i mewn eich ceisiadau hun.
Yn wir, drwy gydol y proses, rydych yn mynd
i ddod o hyd un neu ddau o URLau arbennig o ddefnyddiol fod
yn cael eu crybwyll yn y manyleb ar gyfer Problem Set 8,
yn benodol hon Dechrau Arni Canllaw neu'r Arweiniad y Datblygwr
i Google Maps API Fersiwn 3 yn ogystal gan fod y API Google Maps JavaScript
cyfeirio v3, sydd yn ychydig yn fwy dirgel i ddarllen
ond mewn gwirionedd yn yr holl o'r lefel is manylion am yr hyn y swyddogaethau neu ddulliau
a gwrthrychau ac eiddo a digwyddiadau mewn gwirionedd yn dod gyda'r API,
debyg iawn o ran ysbryd i [Anghlywadwy] tudalennau.
>> Nawr, os ydym yn cymryd golwg yn Google News, wnewch chi helpu
efallai yn gweld rhyngwyneb cyfarwydd yma.
Ond mae'n troi allan, gallwch hefyd chwilio Google Newyddion i ddaearyddiaeth penodol
drwy paramedr HTTP o'r enw geo.
Yn wir, os wyf yn chwyddo i mewn i fyny yma, byddwch yn gweld bod
Rwy'n ar news.google.com/news/section?geo=02138.
Ac, yn wir, os wyf yn chwyddo allan, byddwch yn gweld fy mod yn
edrych ar dudalen gyda criw cyfan o barn am Cambridge, Massachusetts.
>> Yn y cyfamser, os wyf mewn gwirionedd yn newid y URL beidio â bod yn cod zip fel hyn,
ond rhywbeth ychydig yn Messier fel Caergrawnt, + Massachusetts,
lle mae'r plws yw'r ffordd yr ydych amgodio a cymeriad gofod mewn URL a tharo Enter,
byddwch yn gweld fy mod mewn gwirionedd gweld bron yr un newyddion.
Efallai ei fod yn ychydig yn wahanol oherwydd Caergrawnt mewn gwirionedd
Mae codau zip lluosog.
Nawr, sut y byddwn yn gwybod bod a, mewn gwirionedd, sut y gallwn i rhywsut
clymu dinasoedd a threfi i godau zip rhag ofn i mi
yn awyddus i ganiatáu i'r defnyddiwr i chwilio am naill ai?
Wel, mae'n ymddangos fod yna gwefan o'r enw allan yno
geonames.org sef menter i gael
cronfa ddata ar gael am ddim o'r holl math o wybodaeth ddaearyddol,
nid yn unig i'r Unol Daleithiau, ond hefyd ar gyfer gwledydd eraill hefyd.
Yn wir, os byddaf yn mynd i'r URL hyn yma, a oedd yn hefyd yn cael ei grybwyll yn y broblem a osodwyd
fanyleb, byddwch yn gweld ei fod tri rhestr o criw cyfan o ffeiliau sip
Gall unrhyw un ei lawrlwytho trwy chi.
Mewn gwirionedd, am y broblem hon a osodwyd rydych yn mynd i'w llwytho i lawr us.zip.
Nawr fewn y ffeil, yn ei gyfanrwydd criw o ddata mewn fformat testun.
Mae'r ffeiliau yn debyg iawn i CSV-- Comma Gwerthoedd gwahanu file--
ond mae'n defnyddio mewn gwirionedd tabiau i ddiffinio meysydd.
Yn awr, yn y cyfamser, os ydych yn edrych yma yn hyn yr wyf wedi tynnu sylw,
meysydd yn y ffeil hon yn mynd i fod yn bethau fel godau gwlad,
codau post, enwau lleoedd, ac yna, ar ryw ffurf
neu eraill, yn nodi a siroedd, cymunedau, a mwy.
Yn wir, rwyf wedi yn barod llwytho i lawr ffeil hwn ymlaen llaw.
Gadewch i mi fynd yn ei flaen ac yn agor Yma-- us.text-- ac, yn wir, wnewch chi helpu
weld os wyf yn sgroliwch i lawr i linell 16,792 byddwch yn gweld ychydig o gofnodion ar gyfer Cambridge,
Massachusetts a'i codau zip amrywiol.
Yr hyn yr ydych hefyd yn gweld ceir y sir, rhai rhifau nad wyf yn gwneud 'n sylweddol
deall, ond hefyd i gyd y ffordd ar y dde,
rhai GPS coordinates-- lledred a hydred.
Mae hyn yn wych oherwydd bod un o nodweddion Google Maps API
yw'r gallu i ganfod lle rydych yn ddaearyddol
yn nhermau cyfesurynnau GPS.
>> Nawr, gadewch i ni ddechrau at chyfrif i maes sut i dechrau clymu pethau hyn gyda'i gilydd.
Rydyn ni wedi rhoi i chi ei gyfanrwydd criw o cod dosbarthu,
yn ogystal â chronfa ddata MySQL.
Yn wir, os byddaf yn tynnu phpMyAdmin gael mewnforio yn barod, fel yr ydych fuan bydd,
pset8.SQL, byddwch yn gweld tabl MySQL sy'n yn edrych fel hyn, cae adnabod, gwlad
cod, cod post, enw lle a mwy.
Mae'r mathau o bawb colofnau wyf yn deillio yn syml
drwy ddarllen y readme.text ffeil yma a bennir
a yw maes hwn yn yn gyfanrif, neu varchar neu debyg.
>> Felly, rydym wedi creu y tabl ar gyfer chi ac o ystyried y gorchmynion SQL chi
i weithredu i greu'r tabl yn eich cronfa ddata eich hun,
ond does gwirionedd dim data ynddo eto.
Yn hytrach, rydych yn mynd i gael i llwytho i lawr us.zip neu zip unrhyw wlad
ffeil o'r URL yno.
Ac yna rydych yn mynd i gael i ysgrifennu sgript llinell orchymyn yn PHP dyna
mynd i agor y testun ffeil, ailadrodd dros ei linellau,
ac yna ar gyfer pob un o'r llinellau hynny yn gwneud mewnosodiad
i mewn sy'n rhoi tabl yn eich cronfa ddata MySQL.
Felly, ar ddiwedd y broses hon, wnewch chi helpu wedi rhedeg y sgript yn y pen draw
dim ond unwaith mewn theori.
Mewn gwirionedd wnewch chi helpu yn ôl pob tebyg redeg criw o weithiau
wrth geisio atgyweiria gwahanol chwilod.
>> Yn y pen draw, rydych yn mynd i gael cronfa ddata fawr iawn gyda miloedd
a miloedd o rhesi daearyddol.
Yna, rydych chi'n mynd i roi hynny mewnforio sgript neilltu unwaith y mae'n gweithio
a bod eich cronfa ddata yn braf ac yn gywir, ac yna
rydych yn mynd i symud ymlaen i mewn gwirionedd gweithredu'r mashup ei hun.
Mae'r mashup yn mynd i edrych rhywbeth bach fel hyn.
Ar mashup.cs50.net, rydym yn cael ateb staff
sy'n edrych rhywbeth bach fel hyn.
Yn wir, os wyf cliciwch ar y papur newydd hwn icon am Caergrawnt, Massachusetts,
fe welwch nyddu icon fyr ac yna
rhestr archebu, a rhestr bwledi o erthyglau
yn ymwneud â Cambridge, Massachusetts.
Os byddaf yn cliciwch ar Charlestown, Massachusetts,
'N annhymerus' gweld yr un peth ar gyfer y dref.
Ac Os wyf cliciwch ar Watertown, Massachusetts,
Efallai na fydd unrhyw newyddion am o Watertown,
felly byddwch yn gweld rhywbeth fel dydd newyddion araf.
>> Yn awr, yn y cyfamser, ar ben chwith rhai rheolaethau Google Maps cyfarwydd
i adael i chi chwyddo allan, padell i fyny, i lawr, i'r chwith, ac i'r dde,
ond hefyd yn blwch chwilio ein bod yn rhoi yno.
Felly, os wyf yn chwilio am, a dweud y gwir, yr unig cod zip arall yr wyf yn gwybod,
90,210, byddwn yn mewn gwirionedd yn gweld Beverly Hills, California.
Pan fydd glicio mae'n fy arwain at California a bagad cyfan
o newyddion am Beverly Hills.
Nawr sylwi, hefyd, yr hyn a ddigwyddodd yno.
Os byddaf yn y chwiliad amser ar gyfer 02,138 neu hyd yn oed Cambridge coma Massachusetts neu ryw
amrywiad ohono, byddwch yn cael ychydig iawn o gwympo AutoComplete.
Yn awr mae hyn yn defnyddio ategyn ar gyfer llyfrgell o'r enw jQuery,
a gelwir y ategyn yn cael ei typeahead.
Rydym yn syml yn darllen trwy y dogfennau,
lawrlwytho'r .js ffeil integredig i mewn i'r cod dosbarthu fel eich bod yn
yn y pen draw yn gallu ysgrifennu'r cod sy'n yn llenwi y ddewislen gwympo gyda'r auto
dewisiadau neu awgrymiadau auto.
>> Nawr bod y cod dosbarthu, fodd bynnag, bod a gawsoch nid yw'n gwneud bron cymaint.
Byddwch yn cael y Map Google wreiddio, a byddwch yn cael y rheolaethau y brig chwith,
a byddwch yn cael y blwch chwilio.
Ond os wyf yn teipio rhywbeth fel 02,138, nid oes lleoedd i'w cael eto.
Felly mae hynny'n mynd i fod yn un o'n nodau yma.
Ar ben hynny, os byddwch yn cymryd cam ôl ac edrych ar y map ei hun,
does dim newyddion o gwbl.
Hyd yn oed os ydw i'n clicio a llusgo, dim marcwyr mewn gwirionedd
ymddangos am newyddion oherwydd hynny her yn cael ei adael ar eich cyfer hefyd.
>> Gadewch i ni edrych wedyn yn y cod dosbarthu.
Unwaith y byddwch wedi llwytho i lawr pset8.zip a unzipped ei
i mewn i'ch cyfeiriadur vhost yn yr Offer CS50,
byddwch yn gweld y rhain cyfeiriaduron yma y tu mewn.
Bin-- sydd yn gyffredinol yn sefyll am deuaidd ar gyfer programs-- gweithredadwy
yn cynnwys, fel yn pset7, mae rhai PHP ffeiliau a ffeiliau eraill yn cynnwys,
Yna, y cyhoedd, sef y ffeiliau sydd ei angen
i fod yn hygyrch i'r cyhoedd i ddefnyddiwr sydd â porwr.
Gadewch i ni edrych yn y Cyfeiriadur bin, ac yr ydym chi helpu
gweld bod yna ffeil mae enw Mewnforio eisoes.
Os byddwn yn agor hyn gyda gedit, byddwn yn gweld hynny, yn anffodus, does dim llawer
yno.
Y cyfan sydd yno, fodd bynnag, yn shebang ar ben
sy'n nodi pa interpreter-- yn yr achos hwn PHP--
dylid eu defnyddio i mewn gwirionedd gweithredu y ffeil.
Ond yna lle mae'n dweud Todo yw lle rydych yn
mynd i angen i ysgrifennu rhai cod hynny yn ôl pob tebyg yn ofynnol i'r config
ffeil dyna yn y cynnwys cyfeiriadur fel yr ydym wedi ei wneud o'r blaen gyda ffeiliau PHP.
Ac yna rydych chi'n mynd i rhaid i agor rhywsut
us.text yr ydych yn ôl pob tebyg wedi unzipped yn barod.
Yna, rydych yn mynd i gael i ailadrodd dros y llinellau yn y ffeil,
efallai drwy ddefnyddio rhai o'r swyddogaethau awgrymir yn y fanyleb.
Yna rhowch bob un o'r rheini llinellau i mewn i gronfa ddata MySQL
drwy ddefnyddio'r swyddogaeth ymholiad, a oedd yn unwaith eto rydym wedi darparu i chi with--
neu o leiaf amrywiad o hynny mewn functions.php,
sy'n byddwn yn gweld mewn dim ond hyn o bryd.
>> Nawr, gadewch i ni gau mewnforio ac yn mynd yn ôl i ein cyfeiriadur a'r tro hwn yn mynd i mewn
cynnwys.
Ac os wyf yn gwneud ls yno, byddwch yn gweld tair ffeil yn eithaf tebyg i Problem Set 7.
A gadewch i ni edrych cyflym, er enghraifft, yn config.php.
Yn yno, mae llai o linellau nag o'r blaen, ac mae'n
Ymddengys y ffeil yn cynnwys constants.php a functions.php.
Rydym yn defnyddio ychydig yn wahanol dechneg y tro hwn i mewn gwirionedd
yn nodi bod y ffeiliau hyn yn gymharol i'r cyfeiriadur cyfredol __ DIR__
yn cynrychioli beth bynnag y cyfeiriadur hwn ffeil, config.php, ei hun i mewn.
Felly mae hwn yn fwy ffordd benodol o nodi
pa ffeiliau eraill rydych am ei gwneud yn ofynnol.
>> Nawr, os wyf yn cau'r ffeil a agor constants.php yn lle hynny,
byddwch yn gweld ffeil atgoffa rhywun iawn i Problem Set 7 yn ogystal, er
gyda chronfa ddata gwahanol o'r enw pset8.
Yn olaf, yn functions.php, byddwn yn gweld un swyddogaeth yn unig
y tro hwn a elwir ymholiad.
Mae hyn bron yr un fath ac eithrio ydym yn ei drin gwallau y tro hwn ychydig
yn wahanol, ond mae'n ddefnydd yn yr un fath ag yn broblem a osodwyd saith.
>> Nawr gadewch i ni fynd yn ôl i mewn i'n pset8 cyfeiriadur, yn mynd i mewn y cyhoedd, ac i mewn 'na
os wyf yn gwneud ls, byddwch yn gweld this-- articles.php, index.html, search.php,
ac update.php-- pob ffeil.
Ac yna y ffontiau css, img, a Cyfeiriadur js yn eithaf tebyg i pset7.
>> Gadewch i ni edrych ar index.html, sef
mynd i fod mewn gwirionedd yn y pwynt mynediad i'r smashup.
Nawr yn index.html, byddwch yn gweld ei gyfanrwydd criw o elfennau ddolen yn y pen,
yn benodol, ar gyfer y cychwyn ar gyfer ein hunain CSS yna criw cyfan o sgript
tagiau ar gyfer pethau fel y mapiau, API ei hun, marciwr arbennig gyda label
cyfleustodau a grybwyllwyd gennym yn y fanyleb ar gael i chi,
jQuery ei hun, y cychwyn ei hun, ac lyfrgell arall
Gelwir tanlinellu pa rydym yn siarad am yn y fanyleb.
Underscore.js fel jquery.js yn llyfrgell JavaScript
sydd â criw cyfan o swyddogaethau bod llawer o bobl yn y byd dymuniad
yn bodoli yn JavaScript ei hun.
Felly pob un o'r rhain yn mewn gwirionedd yn eithaf poblogaidd.
Rydym hefyd wedi crybwyll typeahead sef y llyfrgell sydd
yn gwneud hynny dropdown AutoComplete a yn olaf cysylltiad â'n JavaScript hunain.
>> Yn y cyfamser, ac efallai diolch byth, mashup hwn
yn cael ei yrru gan cymharol fach HTML lawr yma ar y gwaelod.
Rhybudd yr ydym wedi pennu div yn ein corff o hylif dosbarth-cynhwysydd.
Mae hyn, i bob bootstrap yn dogfennaeth, dim ond
yn golygu bod div hwn yn mynd i lenwi'r viewport neu ffenestr y porwr yn llawn.
>> Yn y cyfamser, yn is na'r hyn mae gennym div sy'n cael ei hagor a'u cau ar unwaith
gyda ID unigryw o gynfas map.
Mae hyn bellach yn dod o Google Dogfennaeth Mapiau
ar gyfer ei API, lle yr wyf yn syml, mae angen i cael div gwag yn lle i chwistrellu,
yn y pen draw, mae gwir Google Maps.
Ond yn fwy ar hynny mewn dim ond ychydig.
>> Yn olaf, mae ffurflen tu mewn fan hyn oedd
yn gweithredu'r blwch testun fyny top chwith yn ein rhyngwyneb ar gyfer chwilio.
Rhybudd yr ydym wedi defnyddio ychydig o bootstrap
yma too-- pethau fel Ffurflen-inline a ffurf-grŵp.
Rydym wedi ystyried y cyn- ID unigryw y ffurflen.
Ac yna, yn y pen draw, yr wyf mewn gwirionedd yn cael math mewnbwn, sydd yn eithaf cyfarwydd,
y mae eu ID yn q.
Dim ond confensiwn.
Q am y gallai query-- gael ei alw unrhyw beth.
Ac yna y dalfan, yn y cyfamser, yn y ddinas, y wladwriaeth,
a chod post y gallech cofio gweld yn ein mashup demo gynharach.
Gadewch i ni gau'r ffeil hon.
>> Nawr edrychwch ar y ffeiliau PHP sydd aros ac yna y ffeiliau JavaScript.
Yn ein ffeiliau PHP, rydym wedi rhoi ar waith yn barod ar eich cyfer,
er enghraifft, y newyddion diweddaraf.
Update.php-- ni fyddwn yn gwario enfawr faint o amser ar Yma-- yn gryno
yw y ffeil bod ein Cod JavaScript yn mynd
i gysylltu drwy AJAX sy'n techneg asynchronous dyna
hadeiladu i mewn JavaScript y dyddiau hyn sy'n mynd i ganiatáu i ni ofyn diweddaru.php
am fwy o wybodaeth.
>> Yn benodol, unrhyw bryd y defnyddiwr yn llusgo y map
neu yn perfformio chwilio sy'n neidio y defnyddiwr i leoliad arall,
ein cod JavaScript, fel y byddwn yn fuan yn gweld, yn
mynd i alw diweddaru.php a gofyn am 10 neu lai marcwyr
o fewn y viewport sy'n seiliedig ar ar y cyfesurynnau GPS
y top a gwaelod corneli hwnnw map.
Yna gallwn repopulate y map nawr bod y defnyddiwr wedi symud y sgrin er mwyn
i weld 10 yn ôl pob tebyg newydd marcwyr ar gyfer gwahanol drefi.
Yn y cyfamser, y ffeil yn y pen draw mynd i gyflawni ymholiad SQL
yn erbyn ein cronfa ddata lleoedd tabl o'r enw sy'n
yn mynd i ddychwelyd y rhai 10 neu lai o leoliadau.
>> Yn y cyfamser, yn articles.php, yn un arall ffeil rydym wedi ysgrifennu yn ei gyfanrwydd.
Mae'n debyg iawn o ran ysbryd i Swyddogaeth LOOKUP Problem Set 7,
oedd yn cysylltu â Yahoo Cyllid i chi.
Mae'r ffeil hon cysylltiadau Google News i chi, yn y pen draw yn crafangio
peiriant-ddarllenadwy version-- mewn rhywbeth
Gelwir RSS format-- o'r newyddion am Caergrawnt neu Beverly Hills
neu beth bynnag dref rydych wedi chwilio am yn seiliedig ar y geoparameter.
Rydym yn dosrannu hwnnw RSS, sydd ychydig yn math o iaith marcio a elwir yn XML,
ac yna rydym mewn gwirionedd dychwelyd at eich porwr
ac at eich cod JavaScript, yn benodol, mewn fformat a elwir yn
JSON, Nodiant Gwrthrych JavaScript.
Nawr byddwch yn gweld yn y specification-- rydym yn pwyntio i chi
ar sut y gallwch weld mewn gwirionedd rhai o'r back-- ddod JSON
y swyddogaeth hon yn y pen draw yn gadael i chi boblogi bwydlenni popup rhai hynny
pan fyddwch yn clicio ar marciwr yn y map
chi mewn gwirionedd yn gweld criw cyfan o fwledi, pob un ohonynt
dolenni at erthygl.
>> Nawr gadewch i ni edrych ar un diwethaf Ffeil PHP sydd, yn ffodus, nid yw'n
llawer wedi mynd on-- dim ond todo eithaf mawr.
Ar hyn o bryd y ffeil yn datgan arae o'r enw lleoedd.
Ac yna yn y pen draw printiau bod amrywiaeth yn JSON format--
'n bert-argraffu dim ond er mwyn pethau'n haws i'w dadfygio.
Yn anffodus, yn y canol mae todo hwn,
sy'n galw am i chi i chwilio'r cronfa ddata ar gyfer mannau cyfateb â geo HTTP
paramedr.
>> Ac, yn wir, mae hyn yn mynd i fod yn un o'ch challenges--
i weithredu'r swyddogaeth hon yma felly pan fyddwch yn cysylltu ffeil hwn gyda
URL fel chwilio. php? geo = rhywbeth, Bydd eich cod yn y pen draw dychwelyd JSON
amrywiaeth o bob un o'r lleoedd yn eich tabl cronfa ddata sy'n cyfateb hwnnw mewnbwn.
Felly, os y mathau o ddefnyddwyr yng Nghaergrawnt, eich ffeil yma search.php
Dylai pen draw yn dychwelyd amrywiaeth JSON ar gyfer pob un o'r gemau ar gyfer Cambridge,
a allai fod yn Massachusetts ond gallai fod hyd yn oed yn unrhyw le arall.
>> Yn olaf, gadewch i ni edrych ar ddau ffeiliau sy'n cael eu ultimately-- sefydlog
eich ffeil CSS a JavaScript eich ffeil.
Os byddaf yn mynd i mewn i'n cyfeirlyfr CSS, mae criw cyfan o ffeiliau yno,
ond mae'r rhan fwyaf ohonynt yn cael eu llyfrgelloedd.
Rydw i'n mynd i edrych, yn benodol, ar styles.css,
sef ein CSS byd-eang eu hunain sy'n mynd i stylize y mashup cyfan.
'N annhymerus' yn gadael i chi ddarllen drwy'r y sylwadau yma, ond, yn gryno,
dyma'r CSS sy'n sicrhau bod ein mashup, yn ddiofyn allan o'r bocs,
edrych yn union y ffordd yr ydym ei eisiau iddo-- gyda'r map llenwi'r olygfa porthladd
a chyda'r chwilio blwch i fyny ar y brig chwith.
Rydym hefyd wedi cymryd y rhyddid o stylizing hwnnw dropdown typeahead
dewislen ychydig bach hefyd.
>> Mae'r ffeil pwysicaf efallai ar gyfer y broblem hon a osodwyd
yw un olaf hwn, scripts.js.
Tu mewn i'ch cyfeiriadur JS yn oed yn fwy ffeiliau.
Mae pob un ohonynt yn ffeiliau llyfrgell ac eithrio ar gyfer yr un yma, scripts.js.
Os byddwn yn agor hyn i fyny, gadewch i ni gymryd ein taith terfynol drwy'r swyddogaethau y
yn cael eu cynnwys yn y ffeil ar eich cyfer chi a sylw alwad
at y ToDos sydd o'n blaenau.
>> Ar frig y ffeil, Mae tri newidyn byd-eang.
Mae un am fap, sydd yn mynd i yn gyfeiriad at ein map Google.
Gallwch chi feddwl am y peth math o fel pwyntydd.
Yn y cyfamser, rydym wedi newidyn byd-eang arall
Gelwir gwybodaeth, sy'n ymddangos i fod yn storio gwerth dychwelyd galwad
i google.maps.InfoWindow newydd.
JavaScript yn cefnogi gwrthrychau sy'n yn debyg iawn o ran ysbryd i struts.
A beth y llinell hon am ein dibenion yn ei wneud
yn creu wybodaeth newydd ffenestr yn y cof ac yna
cadw o amgylch cyfeiriad hynny mewn newidyn o'r enw Gwybodaeth.
Ac yn rhwng y rheiny, yn y cyfamser, yn yr hyn sy'n ymddangos
i fod yn JavaScript wag arae o'r enw marcwyr.
Mae pob un o'r eiconau papur newydd hynny, neu os ydych yn Efallai ddewis eicon arall yn gyfan gwbl,
yn mynd i gael eu storio yn y pen draw yn y arae hon
fel y gallwn yn hawdd iawn ychwanegu at y map ac yn eu tynnu oddi ar y map.
>> Nawr, gadewch i sgrolio i lawr ychydig a whizz
drwy'r cod sy'n mynd i fod yn ddienyddio cyn gynted ag y DOM neu ddogfen
model gwrthrych neu'r dudalen ei hun yn barod.
Dwyn i gof bod cystrawen hwn yma yn syml yn nodi
bod y cod canlynol Dylid ei weithredu yn unig
pan fydd y porwr wedi gorffen llwytho popeth arall.
>> Rydym yn gyntaf ddatgan criw cyfan o arddulliau,
sydd yn y pen draw stylizing y map yn unol â'r fanyleb.
Yna byddwn ddatgan criw cyfan o opsiynau,
sy'n addasu ymhellach Google map yr ydym chi ar fin i fewnosod.
Yna byddwn yn defnyddio ychydig o cod jQuery, sy'n cael ei esbonio mewn ychydig yn fwy o fanylder
yn y fanyleb, i fachu yr elfen honno, map-gynfas
ein bod yn nodi mor unigryw.
Ac yna y llinell hon yma yw yr hyn sy'n ymddangos i roi i ni hudol
map Google tu mewn ein cais ei hun,
storio cyfeiriad at hynny yn y newidyn a elwir map.
>> Yn olaf, i lawr dyma ni yn cofrestru hyn a elwir yn wrandäwr.
Meddyliwch ffordd back--, ffordd back-- i wythnos sero yn CS50
pan fyddwn yn edrych ar Scratch a ei gefnogaeth drwy daith gerdded
drwy am bethau o'r enw digwyddiadau a darllediadau.
Efallai nad ydych wedi defnyddio eich hun, ond mae'n
mecanwaith lle mae porwr yn yr achos hwn
yn gallu cael ein sylw pan mae'n yn barod i mewn gwirionedd yn gweithredu rhywfaint cod.
Yn yr achos hwn, mae'n mynd i wrando at y map am ddigwyddiad o'r enw segur.
Mae hyn yn golygu bod y porwr wedi gorffen llwytho'r map Google.
Ar y pwynt hwn yn swyddogaeth o'r enw Dylai ffurfweddu yn y pen draw
cael ei weithredu.
Swyddogaeth honno, ffurfweddu, byddwn yn gweld, yn cael ei ysgrifennu gan i ni.
>> Nawr lawr yma yn swyddogaeth hynny, yn anffodus,
yn unig yw marciwr ychwanegu todo.
Fesul y fanyleb. rydych yn mynd i angen i ysgrifennu'r cod sydd mewn gwirionedd yn
ychwanegu marker-- a yw'n edrych yn fel papur newydd, neu tack bawd,
neu rywbeth else-- at y map Google.
Yma yn awr yw bod swyddogaeth Gelwir ffurfweddu.
'N annhymerus' yn gadael i chi ei ddarllen drwy hyn yn fwy manwl,
ond yn sylweddoli ein bod yn ychwanegu bagad mwy Gwrandawyr
fel y gallwn gyflawni cod pan fydd y defnyddiwr yn clicio ar ac yn llusgo y map.
Mae gennym hefyd cod yn fan hyn bod initializes hwnnw ategyn typeahead
fel bod y dropdown dewislen yn gweithio mewn gwirionedd.
>> Ond gadewch i ni ganolbwyntio ar ddim ond cwpl o lefydd yma.
Yn benodol, mae hyn i'w wneud yma.
'N annhymerus' gohirio i'r-lein dogfennaeth a'r fanyleb
am sut i lenwi'r todo hwn.
Ond yn gryno, y llyfrgell hon typeahead yn eich galluogi i basio
yn yr hyn a elwir yn gyffredinol fel templed, sydd â rhai dalfannau amrywiol
debyg iawn o ran ysbryd i printf yn%. * s.
Ond yn yr achos hwn, mae'r templed unol â'r fanyleb
yn eich galluogi i bennu pa newidynnau yr ydych ei eisiau
i chwistrellu o ddata sydd wedi dod yn ôl o rhywbeth fel y PHP
ffeiliau eich bod wedi ysgrifennu sy'n allyrru cynnyrch JSON.
>> Nawr lawr yma yn sylweddoli ein bod yn gwrando am dewisiadau typeahead
pan fydd y defnyddiwr mewn gwirionedd yn cynnal a chwilio a dewis werth.
Dyma sut rydym yn mewn gwirionedd mynd i wrando ar gyfer hynny
a gweithredu rhywfaint cod o ganlyniad.
Yna, rydym yn parhau i ffurfweddu y mashup dim ond ychydig bach.
Ac, yn y pen draw, rydym yn galw Diweddariad swyddogaeth hon.
Mae'n diweddaru'r marcwyr ar y sgrin.
Mwy am hynny mewn dim ond hyn o bryd.
Yn y cyfamser, mae 'na ambell swyddogaethau bach yn fan hyn.
Un ohonynt yw hideInfo sy'n yn syml yn cau'r InfoWindow.
Swyddogaeth arall yma, yn y pen draw Ni fydd yn rhy hir, cael gwared marcwyr.
Mae hynny'n mynd i ddadwneud beth bynnag eich swyddogaeth marciwr ychwanegu ei wneud.
Ac yna i lawr yma yw chwilio.
Ac mae hyn yn un yn ddiddorol oherwydd ein wedi ysgrifennu y cod JavaScript dyna
mynd i siarad â search.php ar y gweinydd a mynd yn ôl rhywfaint o ymateb.
>> Chi, wrth gwrs, bydd yn dal i Mae angen i weithredu search.php,
ond rydym wedi rhoi ar waith y Cod JavaScript dyna
mynd i ymdrin mewn gwirionedd yn perfformio Chwiliadau o'r blwch testun.
Yn arbennig, rhybudd y swyddogaeth hon yma,
chwilio, yn galw search.php drwy ddull o'r enw
cael JSON, a welsom yn y ddarlith.
Ac mae'r gystrawen yma ychydig yn wahanol
o ddarlith yn ein bod yn ei ddefnyddio jQuery hyn a elwir rhyngwyneb addewid.
Mwy am hynny yn y fanyleb.
Mae hyn yn syml yn golygu ar gyfer ein dibenion erbyn hyn fod yna
yn ddwy swyddogaeth arbennig i ni Mae angen i alw gyda dot nodiant
yma yn syth ar ôl galw yn cael JSON.
Gelwir un yn cael ei gwneud.
Mae un yn cael ei alw'n methu.
Gallwch feddwl am hyn gan fod y triniwr llwyddiant
a'r methiant triniwr yn unig rhag ofn y bydd rhywbeth yn mynd o'i le.
>> Nawr gadewch i ni edrych ar yr olaf cwpl o swyddogaethau yn y ffeil hon.
Lawr yma yn swyddogaeth Gelwir showInfo, a oedd yn
yn dangos gwybodaeth mewn un o'r rhai ffenestri info bach sy'n
pops i fyny pan fydd y defnyddiwr yn clicio marciwr.
Lawr yma bellach yw swyddogaeth honno diweddaru
ein bod wedi rhoi ar waith ar eich cyfer.
Mae'n pennu ffiniau y map.
Beth yw cyfesurynnau GPS ei gogledd-ddwyrain i'r de-orllewin a chorneli yma.
Rydym wedi paratoi rhai paramedrau HDP yma ac wedyn pasio nhw yn y pen draw
i diweddariad.php, yr ydym i wedi rhoi ar waith hefyd i chi.
Yn y pen draw yn cael ôl rhyw JSON o'r ffeil o'r enw diweddaru.php
ac yna cael gwared ar unrhyw marcwyr ar y sgrin
ac yna ailadrodd drosodd mae'r data sydd wedi dod yn ôl
o diweddaru.php, a oedd yn unwaith eto yn unig yw amrywiaeth JSON.
Ac yna yn y pen draw yn ychwanegu marciwr ar gyfer pob un o'r lleoedd hynny, trin methiant
neu wallau a allai yn dda iawn yn digwydd.
>> Nawr dim ond er mwyn rhoi blas o sut yr ydych chi'n Gallai fynd ati i debugging y prosiect hwn,
sylweddoli fy mod i wedi agor yn ymlaen llaw tab hwn yma i URL hwn,
pset8 / articles.php? geo = 02,138.
Yn awr, unwaith eto, erthyglau am PHP rydym yn rhoi ar waith ar eich cyfer
felly nid yw hyn yn gymaint yr hyn y byddwch yn defnyddio
i debug, ond yn hytrach y dechneg.
Hysbysu fy mod i wedi chwilio am Caergrawnt yn cod zip yma,
ac rydw i wedi gotten yn ôl, yn wir, mae JSON amrywiaeth o JSON gwrthrychau y tu mewn ohonynt
Mae dau gyswllt keys-- a theitl.
>> Felly swyddogaeth hon yn gweithio'n barod i chi.
Ond mae dechneg hon o llaw yn mynd at URL fel hyn ar gyfer rhywbeth fel
search.php? geo = caergrawnt neu 02,138 neu beth bynnag yw'r defnyddiwr wedi teipio dylai
yn amhrisiadwy wrth i chi, chi eich hun, ceisiwch at chyfrif i maes yn union pa un a pham
search.php yn gweithio ai peidio.
>> Yn y pen draw felly, mae gennych ychydig o ToDos o'ch blaen.
Rydych yn mynd i offer cyntaf y sgript mewnforio hwnnw
darllen mewn us.text i mewn i'ch cronfa ddata.
Yna rydych yn mynd i angen i weithredu search.php
fel ei fod yn ymddwyn yn union fel y nodir.
Yna rydych chi'n mynd i eisiau i ganolbwyntio ar scripts.js
ac yn y pendraw yn gweithredu y rhai cwpl o ToDos,
gan gynnwys ar gyfer ffurfweddu a bod y templed,
ychwanegu marcwyr, tynnu marcwyr, ac Yna, bara, ond nid y lleiaf, un
cysylltiad personol.
>> Unwaith y byddwch wedi eich gwaith cyfrifo mashup yn eithaf fel ein un ni, y nod wrth law
yw i chi ychwanegu personol cyffwrdd â'ch mashup,
boed yn esthetig neu swyddogaethol.
Cymerwch y mashup erioed felly ychydig i'r lefel nesaf.
Cyn belled ag y byddwch yn gwthio eich hun y tu hwnt eich bod yn gyfarwydd â'r fanyleb ei hun
a chodi un dechneg newydd, hyd yn oed os mai dim ond
rhywbeth esthetig fel newid y cynllun y map eich bod yn defnyddio,
cwmpas ein bod yn disgwyl Bydd cael eu bodloni.
Mae hynny wedyn yw Problem Set 8 Mashup.
Aros diwnio ar gyfer mwy yn y manyleb a phob lwc
mynd i'r afael â hyn, eich ddiwethaf Problem CS50 a osodwyd erioed.
>> [CHWARAE CERDDORIAETH]