[Hudba hrát] 

DAVID J. Malan: Dobrý den. Pojďme se projít Problem Set 8 Mashup, který se chystá vyzvat vás k čerpají prvky pro Google Maps s prvky z Google News a kaší je dohromady do webového applet, který umožňuje uživateli vyhledávat mapa pro novinky místní na konkrétní měst, města a PSČ. K tomu, že budeme integrovat nějaký HTML, CSS, PHP, SQL, JavaScript, a technika obecně známé jako AJAX, aby K vytvoření tohoto pohlcující uživatelské zkušenosti. 

Podívejme se nejprve na samotné Google Maps. To je samozřejmě možná známý rozhraní. Ale ukazuje se, že Google Maps také poskytuje aplikaci API-- programování interface-- přes který si můžete vzít prvky Google Maps a integrovat je do vlastní aplikace. Opravdu, v celém tomto proces, budete nalézt několik adres URL zvláště užitečné, že jsou uvedeny v specifikace problému Set 8, Konkrétně to Začínáme Průvodce nebo Příručce pro vývojáře pro Google Maps API verze 3, jakož jako API Google Maps JavaScript v3 odkaz, který je bit více Arcane ke čtení ale ve skutečnosti má všechny nižší úrovni Podrobnosti o tom, co funkce nebo metody a objekty a vlastnosti a Události ve skutečnosti přicházejí s API, velmi podobné v duchu na [] neslyšitelný stránek. 

Nyní, když se podíváme na Google News, budete snad vidět známé rozhraní zde. Ale ukazuje se, můžete vyhledávat Google News pro konkrétní zeměpisných pomocí parametru HTTP s názvem geo. Ve skutečnosti, když jsem přiblížit tady, uvidíte, že Jsem na news.google.com/news/section?geo=02138. A opravdu, když jsem zoom out, uvidíte, že já jsem při pohledu na stránku s celou partou názory na Cambridge, Massachusetts. 

Mezitím, když jsem skutečně změní URL nebýt PSČ takhle, ale něco trochu Messier jako je Cambridge, Massachusetts +, kde a je způsob, jak kódovat mezera v URL a stiskněte klávesu Enter, uvidíte, že jsem vlastně vidět téměř stejný zprávy. Možná, že je to trochu jinak protože Cambridge vlastně má více poštovní směrovací čísla. Nyní, jak bych to mohla vědět, a Ve skutečnosti, jak bych mohl nějak tie měst a obcí na poštovních směrovacích čísel pro případ, že Chcete, aby uživatel vyhledat buď? No, ukázalo se, že je tu webové stránky tam volal geonames.org který je iniciativa mít volně k dispozici databáze všech druhy geografických informací, a to nejen pro USA, ale také pro ostatní země stejně. Ve skutečnosti, když půjdu na tuto adresu URL, která sem je také zmínil se v problému nastavené specifikace, budete to vidět tři výpis spoustu zip souborů kterýkoliv z nich si můžete stáhnout vámi. Ve skutečnosti, pro tento problém nastavit budete stahovat us.zip. Nyní v tomto souboru, je celý banda dat v textovém formátu. Soubory je velmi podobná CSV-- hodnoty oddělené file-- ale ve skutečnosti používá Karty vymezit pole. A teď, zatím, když se podíváte tady na to, co jsem se zvýrazní, pole v tomto souboru se děje být věci jako kódy zemí, poštovní směrovací čísla, místní názvy, a pak, v nějaké formě nebo jiných, stavy a kraje, komunity, a další. Ve skutečnosti, jsem už stáhli tento soubor předem. Nech mě jít napřed a otevřete jej here-- us.text-- a samozřejmě budete zjistil, jestli bych přejděte na linku 16792 uvidíte několik záznamů pro Cambridge, Massachusetts a jeho různé zip kódy. To, co vidím také, že je kraj, některá čísla, které jsem se opravdu Rozumím, ale také všechny jak na pravé, Některé GPS coordinates-- zeměpisné šířky a délky. To je skvělé, protože jeden z Rysy Google Maps API je schopnost detekovat kde jste geograficky pokud jde o GPS souřadnic. 

Nyní pojďme začít přijít na to, jak se spustit vázání tyto věci dohromady. Dali jsme vám celý banda distribuce kódu, jakož i databáze MySQL. Ve skutečnosti, když jsem vytáhnout phpMyAdmin mající již importovány, jak brzy bude, pset8.SQL, uvidíte tabulku MySQL, který vypadá to, ID pole, země kód, poštovní směrovací číslo, název místa a další. Typy všechny ty, sloupce I odvozené prostě čtením readme.text soubor zde uvedená zda pole je celé číslo, nebo varchar nebo podobně. 

Proto jsme vytvořili uvedené tabulky pro Vy a vám dal příkazy SQL vykonat vytvářet že stůl ve své vlastní databázi, ale je to vlastně v ní dosud žádné údaje. Spíše, budete muset ke stažení us.zip nebo zip jakékoli země soubor od té tam URL. A pak budete muset psát příkazový řádek skript v PHP, který je chystá otevřít, že text soubor, iteraci přes své linky, a pak pro každou tyto řádky udělat vložku do toho místa tabulky v databázi MySQL. Takže na konci tohoto procesu, budete narazily, že skript nakonec jen jednou v teorii. Ve skutečnosti pravděpodobně budete spustit to spoustu časů při pokusu opravit různé chyby. 

Nakonec, budete mít opravdu velké databáze s tisíci a tisíce geografických řádků. Pak se chystáte dát, aby dovoz skript stranou jednou, že to funguje a databáze je hezké a správné, a pak se chystáte přejít na skutečně provádění mashup sám. Mashup bude vypadat trochu něco takového. V mashup.cs50.net jsme má řešení zaměstnanců že vypadá trochu něco takového. Ve skutečnosti, když jsem klikněte na tento noviny Ikonka pro Cambridge, Massachusetts, uvidíte spřádání krátce a poté ikonu objednal seznam odrážkami seznam článků vztahující se k Cambridge, Massachusetts. Když kliknu na Charlestown, Massachusetts, Uvidím, stejné pro dané město. A když jsem klikněte na Watertown, Massachusetts, mohlo by neměl být žádný Zprávy o z Watertown, takže uvidíte něco jako pomalý novinky den. 

A teď, zatím, v levé horní části jsou Některé známé ovládací Google Maps aby vám oddálit, pan nahoru, dolů, doleva a doprava, ale také vyhledávací pole, které jsme tam dal. Takže když jsem se hledat, upřímně řečeno, Jedinou další poštovní směrovací číslo vím, 90.210, budeme skutečně vidět Beverly Hills, Kalifornie. Po kliknutí mě to vede k Kalifornie a celá parta ze zprávy o Beverly Hills. Nyní si všimnout, i to, co se tam stalo. Pokud se i tentokrát hledání 02138 nebo dokonce Cambridge čárka Massachusetts nebo nějaká variantu, dostanete málo autocomplete dropdown. Nyní to je pomocí plugin pro knihovnu s názvem jQuery, a že plugin se nazývá dopředné. Prostě jsme pročíst dokumentace, stáhli JS soubor integrovaných do distribuční kódu, takže vás v konečném důsledku může psát kód, který vyplní, že rozbalovací nabídky se auto výběry nebo jejich auto návrhy. 

Nyní distribuce kód, i když, že jste dostali nedělá skoro stejně. Získáte Map Google vložený, a dostanete ovládací prvky v levém horním rohu, a dostanete vyhledávací pole. Ale když píšu něco jako 02138, žádná místa jsou nalezeny dosud. Takže to bude Jedním z našich cílů zde. Navíc, pokud budete mít o krok zpět a podívat se na mapu sám, není novinka vůbec. I když jsem klepněte na tlačítko a táhnout, žádné značky vlastně se objevují novinky, protože to Problém je ponechán i pro vás. 

Pojďme se podívat a pak v distribučním kódu. Poté, co jste si stáhli pset8.zip a rozepnul ho do vhost adresáře V CS50 Appliance, uvidíte tyto adresáře tady uvnitř. Bin-- což obecně znamená binární spustitelné programs-- zahrnuje, jak je v pset7, některé PHP Soubory, které ostatní soubory obsahují, pak veřejnost, což je soubory, které potřebují být veřejně přístupné uživateli v prostředí internetového prohlížeče. Pojďme se podívat na bin, a my budeme vidět, že tam je soubor tam už volal Importovat. Po otevření to s gedit, uvidíme že, bohužel, že to není moc tam. Vše, co je tam, i když, je shebang nahoře který určuje, které interpreter-- v tomto případě PHP-- by měly být použity pro skutečně spustit tento soubor. Ale pak, kde se říká, že TODO je místo, kde jste bude muset napsat nějaký kód která pravděpodobně vyžaduje config Soubor, který je v adresáři zahrnuje jak jsme udělali předtím s PHP soubory. A pak budete muset nějak otevřít us.text která vám pravděpodobně rozbalení už. Pak budete muset opakovat na tratích v tomto souboru, případně s využitím některých funkcí navrženo ve specifikaci. Poté vložte každý z nich linky do databáze MySQL pomocí funkce dotazu, který jsme opět vám poskytl with-- nebo alespoň varianta tom functions.php, který uvidíme za chvíli. 

Nyní pojďme uzavřít dovoz a vrátit se do našem seznamu, a tentokrát jít do zahrnuje. A když to udělám ls tam, uvidíte tři soubory docela líbí Zadání problému 7. A pojďme se rychle podívat, Například, v config.php. V tam je méně řádků než dříve, a to Zdá se, tento soubor obsahuje constants.php a functions.php. Používáme mírně odlišný Technika tentokrát skutečně upřesnit, že tyto soubory jsou relativní k aktuálnímu adresáři __ DIR__ znamená cokoliv adresář to soubor config.php, je sám o sobě v. Tak tohle je víc explicitní způsob zadávání jaké další soubory, které chcete potřebovat. 

Nyní, když uzavřu tento soubor a otevřít constants.php místo toho, uvidíte soubor velmi připomínající k problému Set 7 je také, i když s jiné databázi s názvem pset8. A konečně, v functions.php, uvidíme pouze jednu funkci tentokrát s názvem dotazu. To je téměř stejný s výjimkou vyřizujeme Chyby tentokrát trochu jinak, ale je to využití je stejně jako v problém nastavit sedm. 

A teď se vraťme do naší pset8 adresář, jít do veřejnosti, a tam když to udělám ls, uvidíte tohle-- articles.php, index.html, search.php, a update.php-- všechny soubory. A pak CSS fonty, img, a js adresář docela rád pset7. 

Pojďme se podívat na index.html, který je bude opravdu vstupní bod do smashup. Nyní v index.html, uvidíte celý banda odkazů prvků v hlavě, konkrétně pro bootstrap pro naše vlastní CSS následuje spoustu skriptu tagy pro věci, jako mapy, API sám, speciální značka s popiskem nástroj, který jsme zmínili v specifikace je vám k dispozici, jQuery sám, bootstrap sám, a další knihovny volal podtržítko, které hovoříme o ve spec. Underscore.js jako jquery.js je knihovna JavaScript který má spoustu funkcí že mnoho lidí ve světě přání existovalo v samotném JavaScriptu. Takže všichni z nich jsou vlastně docela populární. Jsme také zmínil dopředné který je knihovna, která dělá automatického dokončování dropdown a nakonec odkaz na naše vlastní JavaScript. 

Mezitím, a možná Naštěstí tento mashup je řízen poměrně málo HTML tady dole. Všimněte si, že jsme zadali div v naše tělo třídy kontejneru tekutiny. To, na Bootstrap je dokumentace, jen Znamená to, že tento div bude vyplnit výřez nebo okna prohlížeče je plně. 

Mezitím, pod tím máme div že je otevřel a okamžitě zavřel s unikátním ID mapového okna. To je nyní od společnosti Google Dokumentace Mapy pro jeho API, čímž jsem se prostě musíte máte prázdný DIV, do které chcete aplikovat, nakonec, skutečný Google Maps. Ale o tom více v jen trochu. 

Konečně, tam je formulář uvnitř které zde implementuje textového pole nahoře vlevo nahoře v našem rozhraní pro vyhledávání. Všimněte si, že jsme použili trochu bootstrap Zde too-- věci jako form-inline a forma-group. Dali jsme dřívější Unikátní ID formy. A pak, konečně, vlastně mám typu vstupu, což je docela známý, jehož ID je q. Jen konvence. Q pro query-- by mohly mít byl povolán cokoliv. A pak zástupný symbol, Mezitím, je město, stát, a poštovní směrovací číslo, které by vás mohly vyvolat vidění v našem mashup demo dříve. Pojďme uzavřít tento soubor. 

Nyní se podívej na soubory, PHP, které čekají a pak soubory JavaScript. V našich PHP soubory, máme která již byla provedena pro vás, Například, aktualizace. Update.php-- nebudeme utrácet obrovské Množství času na here-- v kostce je soubor, který dotazy Kód JavaScript se děje kontaktovat přes AJAX, že asynchronní technika, která je zabudované do JavaScriptu v těchto dnech, že je to bude nám umožní požádat update.php Pro více informací. 

Konkrétně, kdykoliv uživatel táhne mapu nebo provede vyhledávání, který skáče Uživatel na jiné místo, náš kód JavaScript, jak brzy uvidíte, je zavolá update.php a požádat o 10 nebo tak markerů ve výřezu na bázi o GPS souřadnicích v horní a dolní části rohy této mapě. Pak jsme se znovu osídlit mapy nyní, uživatel přesunul obrazovce v pořadí vidět, 10 asi nové markery různých městech. Mezitím, tento soubor je v konečném důsledku chystá spustit SQL dotazu proti naší databázi tabulku s názvem místa, která se bude vracet ty 10 nebo méně místa. 

Mezitím, v articles.php, je dalším soubor psali jsme v plném rozsahu. Je to velmi podobné v duchu k Funkce vyhledávání Zadání problému 7 je, který kontaktoval Yahoo Finance pro vás. Tento soubor kontakty Google News pro vás, nakonec popadl strojově čitelné version-- v něčem volal RSS format-- z novinek pro Cambridge nebo Beverly Hills nebo co město, které jste hledali na na základě tohoto geoparameter. My analyzovat tento RSS, která je jen typ značkovacího jazyka XML volal, a pak jsme vlastně vrátit do vašeho prohlížeče a do kódu JavaScript, konkrétně ve formátu s názvem JSON, JavaScript Object Notation. Teď uvidíte v specification-- vám ukázat na to, jak můžete skutečně vidět některé z JSON nadcházející back-- že tato funkce nakonec vám umožní naplnit ty vyskakovací menu tak že po klepnutí na tlačítko na marker v mapě je skutečně vidět spoustu kuliček, z nichž každá odkazy na článek. 

Nyní se pojďme podívat na jeden poslední PHP soubor, který, naštěstí, není mají hodně jít on-- jen docela velký TODO. Právě teď tento soubor prohlašuje pole s názvem místa. A pak nakonec tisky že pole v JSON format-- to pěkně, tisk jen proto, aby věci jsou jednodušší ladění. Bohužel, v Uprostřed je to TODO, hovory, které pro vás vyhledávání databáze pro místa odpovídajících geo HTTP parametrů. 

A skutečně, to bude být jeden z vašich challenges-- implementovat tuto funkci zde tak, že když se obrátíte na tento soubor URL jako vyhledávání. php? geo = něco, Váš kód bude nakonec vrátí JSON pole ze všech míst ve vašem databázové tabulky, které odpovídají, že vstup. Takže v případě, že uživatel zadá ve městě Cambridge, váš soubor zde search.php by měla v konečném důsledku vrátit pole JSON pro všechny zápasy na Cambridge, který by mohl být v Massachusetts ale může být i kdekoliv jinde. 

A konečně, pojďme se podívat na dvě soubory, které jsou statické ultimately-- Váš CSS soubor a váš soubor JavaScript. Když jdu do naší CSS adresáře, je tu celá parta souborů tam, ale většina z nich jsou knihovny. Jdu se podívat, specificky, na styles.css, což je naše vlastní globální CSS, že je to bude stylizovat celý tento mashup. Nechám to na vás, abyste přečíst komentáře zde, ale v kostce, to je CSS, který zajišťuje, že naše mashup, ve výchozím nastavení po vybalení z krabice, vypadá přesně tak, jak chceme to-- s mapou plnící výřezu a s hledáním box se v levém horním rohu. Také jsme vzít svobodu stylizace, že typeahead rozevírací Nabídka trochu stejně. 

Nejdůležitější soubor možná pro tento problém nastavit je to poslední, scripts.js. Uvnitř adresáře JS je i více souborů. Všechny z nich jsou soubory knihoven s výjimkou pro tento jeden, scripts.js. Po otevření toto nahoru, pojďme se naše Poslední turné prostřednictvím funkcí, které jsou zabudovány do tohoto souboru pro vás a upozornit na Todos, které leží před námi. 

V horní části tohoto souboru, jsou tři globální proměnné. Jeden pro mapy, který se chystá je odkaz na naši mapu Google. Můžete si ji trochu jako ukazatel. Mezitím, máme další globální proměnné volal info, který se zdá být uložení návratové hodnoty volání nové google.maps.InfoWindow. JavaScript podporuje objekty, které jsou velmi podobné v duchu k vzpěrami. A co tento řádek pro naše účely je na tom je vytvoření nové info Okno v paměti a pak vedení kolem odkazu ní v proměnné s názvem Info. A mezi těmi, Mezitím, je to, co se zdá být prázdný JavaScript pole s názvem značky. Všechny tyto novin ikon, nebo může zvolit jinou ikonu úplně, se bude skladovat nakonec v tomto poli takže můžeme velice snadno přidat do Mapa a odstranit z mapy. 

Nyní přejděte dolů trochu a svist prostřednictvím kódu, který je bude proveden jakmile DOM nebo dokument objektový model, nebo strana sama o sobě je připraven. Připomeňme si, že tuto syntaxi tady prostě určuje že následující kód by měly být prováděny pouze v případě, že prohlížeč dokončení načítání všechno ostatní. 

Poprvé jsme se prohlásit spoustu stylů, který končí stylizace Mapa podle spec. Pak jsme prohlásit spoustu možností, což dále přizpůsobit Google mapa, která se chystáme vložit. My pak použít trochu jQuery kódu, která je vysvětlena v trochu podrobněji v spec, chytit tento prvek, mapa, plátno že jsme tak jednoznačně identifikovány. A pak se tato linka je zde to, co se zdá, jako mávnutím kouzelného proutku, aby nám Google uvnitř naše vlastní aplikace, uložení odkaz na ně V této proměnné s názvem mapy. 

A konečně, tady dole jsme se zaregistrujte co se nazývá posluchač. Myslíš, že back-- cesta, cesta back-- na týden nula v CS50 když jsme se podívali na Scratch a jeho podpora prostřednictvím procházku díky za věci s názvem události a vysílání. Možná nepoužili it yourself, ale je to mechanismus, který prohlížeče v tomto případě Můžete získat naši pozornost, když je to připraveni skutečně spustit nějaký kód. V tomto případě, že to bude poslouchat na mapu na akci s názvem nečinnosti. To znamená, že prohlížeč má dokončil načtení mapy Google. V tomto bodě s názvem funkce configure by nakonec být provedeny. Tato funkce, konfigurovat, uvidíme, je napsán u nás. 

Teď tady je funkce že, bohužel, je jen TODO add značka. Per spec. budete potřebovat napsat kód, který skutečně přidává marker-- ať to vypadá jako noviny, nebo palec připínáček, nebo něco else-- na Google mapě. Tady už je to, že funkce volal configure. Nechám to na vás, abyste přečíst přes to podrobněji, ale uvědomit, že přidáme parta více posluchačů takže můžeme spustit kód, když uživatel klepne na vytáhne mapu. Máme také kód zde, že inicializuje, že typeahead plugin takže dropdown nabídka skutečně funguje. 

Ale pojďme zaměřit na právě Pár míst zde. Konkrétně se to dělat. Budu odložit na on-line dokumentace a specifikace na to, jak vyplnit tuto TODO. Ale ve zkratce, tato knihovna dopředné umožňuje předat v tom, co je obecně známé jako šablonu, , která má nějaké proměnné zástupné symboly velmi podobný svým duchem printf je%. * s. Ale v tomto případě, Šablona na spec umožňuje zadat to, co chcete, proměnné aplikovat z údajů, které pocházejí zpět z něčeho, jako je PHP soubory, které jste napsali které jsou emitující výstup JSON. 

Teď sem si uvědomil, že jsme poslech pro dopředné výběry když uživatel skutečně provádí vyhledávání a vybere hodnotu. To je, jak jsme vlastně bude naslouchat, že a spustit nějaký kód jako výsledek. Dále budeme pokračovat v konfiguraci mashup jen trochu. A nakonec, nazýváme tato funkce aktualizace. Aktualizuje značek na obrazovce. Více o tom za chvíli. Mezitím, je tu pár malé funkce v zde. Jedním z nich je hideInfo který prostě zavře InfoWindow. Další funkcí, která sem nakonec nebude příliš dlouhá, odstranit značky. To bude vrátit cokoliv Váš add funkce značka dělá. A pak tady je vyhledávání. A tohle je zajímavé, protože my psali kód JavaScriptu, který je mluvit do search.php na serveru a získat zpět část odpovědi. 

Ty, samozřejmě, bude i nadále muset implementovat search.php, ale my jsme realizován JavaScript kód, který je bude zvládnout skutečně provádí vyhledává od tohoto textového pole. Zejména, oznámení že tato funkce zde, vyhledávání, to volání search.php metodou zvanou dostat JSON, který jsme viděli v přednášce. A syntax zde je trochu jinak z přednášky v tom, že jsme pomocí jQuery tzv slib rozhraní. O tom více v spec. To jednoduše znamená pro naši účely se, že tam jsou dvě speciální funkce jsme třeba volat bodovým zápisem zde hned po volání dostat JSON. Jedním z nich je tzv hotovo. Jedním z nich je tzv selhání. Můžete si myslet o těchto jako ovladač úspěch a psovod selhání právě V případě, že se něco pokazí. 

Nyní se podívejme na poslední několik funkcí v tomto souboru. Tady dole je funkce nazvaný showInfo, který zobrazuje informace v jednom z těch, malé info okna, která se objeví, když uživatel klepne na značku. Tady dole je další že funkce aktualizace že jsme zavedli pro vás. To určuje hranice mapy. Jaké jsou GPS souřadnice jeho severovýchod a jihozápadní rohy zde. Připravili jsme některé parametry HDP tady a pak přešel je nakonec ke update.php, který máme implementovány i pro vás. To nakonec dostane zpět část JSON od soubor s názvem update.php a pak se odstraní všechny značky na obrazovce a pak se opakuje po Data, která se vrátí z update.php, který opět je jen pole JSON. A pak se to nakonec přidá značku pro každé z těchto míst, manipulace selhání nebo chyby, které by mohly velmi dobře stát. 

Teď už jen stačí, aby vám chuť na to, jak může jít o ladění tohoto projektu, Uvědomuji si, že jsem otevřel v předem tuto kartu sem na tuto adresu URL, pset8 / articles.php? geo = 02138. Nyní, znovu, články o PHP jsme zavedli pro Vás takže to není tak moc to, co budete používat ladění, ale spíše techniky. Všimněte si, že jsem hledal Cambridgeova PSČ tady, a já jsem dostal zpátky, opravdu, JSON Pole JSON objektů uvnitř kterého jsou dva keys-- odkaz a název. 

Tak tato funkce pracuje již pro vás. Ale tato technika manuálně děje na adresu URL, jako je to na něco jako search.php? geo = Cambridge nebo 02138 nebo co uživatel napsal by mel neocenitelné jako vy, sami, zkuste přesně zjistit, zda je, nebo proč search.php funguje, nebo ne. 

Nakonec pak máte několik Todos před vámi. Budeš první nářadí že import skript, který čte us.text do databáze. Ty pak bude potřebovat implementovat search.php tak, že se chová přesně tak, jak je uvedeno. Ty pak bude chtít zaměřit se na scripts.js a nakonec implementuje těch pár Todos, včetně configure a že šablona, přidat značky, odstranit značky, a pak poslední, ale v neposlední řadě, jeden osobní kontakt. 

Jakmile máte mashup práci docela jako je ta naše, cíl na dosah ruky je pro vás přidat osobní dotek na vaší mashup, ať už je to estetické nebo funkční. Vezměte mashup někdy tak mírně na další úroveň. Tak dlouho, jak budete tlačit sami za Váš obeznámenost s spec samotným a vyzvednout jednu techniku nový, i když je to jen něco estetický jako měnící se uspořádání mapy, který používáte, rozsah, že očekáváme budou spokojeni. To je pak problém Set 8 Mashup. Zůstaňte naladěni na více specifikace a hodně štěstí řešení, vaše poslední CS50 problém nastavit vůbec. 

[Hudba hrát]