Technológie off-line web aplikácií

	Trenčianska Univerzita Alexandra Dubčeka v Trenčíne Fakulta Mechatroniky
	Technológie off-line web aplikácií Semetrálna práca

Autor:	Dušan Pagáč
Pedagogický vedúci:	Ing. Juraj Ďuďák
Študijný odbor:	Mechatronika
Akademický rok	2009/2010

Obsah práce

1.	Štruktúra webovej aplikácie
2.	Technológie off-line web aplikácií
3.	Systémy na vizualizáciu rozvrhu hodín
4.	Návrh používateľského rozhrania rozvrhu FM TnUAD

Google Gears

Google Gears [1] je open-source projekt of firmy Google. Pridaním nových funkcií do prehliadača dokáže sprístupniť webovú aplikáciu aj v režime off-line. Užívateľovi stačí nainštalovať rozšírenie (Obr. 2.1) do svojho prehliadača a následne povoliť (Obr. 2.2) prístup konkrétnej webovej lokalite pre použitie tohto rozšírenia.

Súbor:Semestralka dušan pagáč v1 0 07.png

Obr. 2.1 Zobrazenie rozšírenia Google Gears v správe rozšírení prehliadača Firefox

Súbor:Semestralka dušan pagáč v1 0 08.png

Obr. 2.2 Nastavenie povolenia rozšírenia pre konkrétnu lokalitu (localhost)

Moduly Google Gears

Rozdelenie modulov

Podstata tohto rozšírenia je, že s ním získame tri nezávislé moduly. Každý z nich vylepšuje nejaký aspekt programovania webovej aplikácie na strane klienta prostredníctvom konkrétneho modulu.

Localserver

Modul LocalServer (lokálny server) umožňuje aplikácií uložiť a používať jeho HTTP zdroje lokálne bez pripojenia k sieti. Je to špecializovaná URL vyrovnávacia pamäť. Požiadavky na URL vo vyrovnávacej pamäti lokálneho servera sú zachytené a obslúžené lokálne priamo z disku používateľa.

Databáza

Databázový modul poskytuje open-source SQLite databázový systém. Databázová API slúži k neustálemu ukladaní používateľských dát. Dáta ktoré sú uložené používajú bezpečnostnú politiku, ktorá web aplikácií nedovolí prístup mimo jej domény.

Workerpool

Skript časovo náročný na spracovanie ako napríklad zložitý výpočet môže spôsobiť, že užívateľské prostredie neodpovedá. WorkerPool API dovoľuje web aplikácií spustiť javaskriptový kód na pozadí, bez blokovania vykonávania ostatných skriptov na stránke.

Google Gears API

S modulmi pracujeme pomocou metód aplikačného rozhrania. Pre prístup k nim musíme do aplikácie zahrnúť súbor gears_init.js (http://code.google.com/intl/sk/apis/gears/gears_init.js).

Factory API

Trieda Factory je použitá na vytvorenie inštancií všetkých Gears objektov.

Kód 2.1 Volanie metódy create' triedy factory

<script type="text/javascript" src="gears_init.js"></script>
<script type="text/javascript">
    if (window.google && google.gears) {
        var db = google.gears.factory.create('beta.database');
    }
</script>

Existenciu rozšírenia overíme pomocou kontroly globálnych objektov window.google a google.gears. V skripte gears_init.js sa definuje objekt google.gears.factory. Metóda create triedy factory vytvorí objekt danej triedy s parametrom className. Parameter className značí typ objektu, ktorý sa ma vytvoriť.

Tabuľka 2.1 Popis metód triedy Factory'. (Kompletná špecifikácia je v [2])

Trieda:	factory
Metóda:	Object create(className, [classVersion])
Popis:	Vytvára Gears objekt danej triedy
Parametre:	className – typ objektu ktorý sa má vytvoriť classVersion – parameter sa už nepoužíva, prípadne jeho hodnota ’1.0’
Detaily:	Podporované hodnoty parametru className: className Vytvorenie Gears triedy beta.blobbuilder BlobBuilder beta.canvas Canvas beta.database Database beta.desktop Desktop beta.geolocation Geolocation beta.httprequest HttpRequest beta.localserver LocalServer beta.timer Timer beta.workerpool WorkerPool

LocalServer API

Na správu vyrovnávacej pamäti sú dostupné dve triedy:

ResourceStore – povoľuje dáta (obrázky, PDF súbor), ktoré sú adresované s URL zachytávať pomocou javaskriptu.

ManagedResourceStore – zoznam URL odkazov je v súbore manifest. Pomocou tejto triedy môžeme zabezpečiť aplikácií všetky dáta, ktoré potrebuje definovaním v jednom súbore. Výhoda je v automatickej aktualizácií pri zmene manifestu. Príklad použitia (Kód 2.2).

Kód 2.2 Príklad použitia metódy createManagedStor'e

<script type="text/javascript" src="gears_init.js"></script>
<script type="text/javascript">
    var localServer = google.gears.factory.create('beta.localserver');
    var store = localServer.createManagedStore('test-store');
    store.manifestUrl = 'manifest.txt';
</script>

Odkazy na súbory uvedené v manifeste (Kód 2.3) sa pri synchronizácií skopírujú na lokálny disk.

Kód 2.3 Výpis súboru manifest.txt

{
    "betaManifestVersion": 1,
    "version": "1.0",
    "entries": [
        { "url": "index.html" },
        { "url": "gears_init.js" }
    ]
}

Tabuľka 2.2 Výpis metód triedy LocalServer. Kompletná špecifikácia je v [3]

Trieda:	LocalServer
Metóda:	createManagedStore(string name, [string requiredCookie])
Parametre:	name – reťazec identifikujúci úložný priestor requiredCookie – nepovinný parameter identifikujúci jedinečnosť úložného priestoru
Návratová hodnota:	ManagedResourceStore
Popis:	Otvorí existujúcu ManagedResourceStore alebo vytvorí novú, ak žiadná taká neexistuje
Metóda:	openManagedStore(string name, [string requiredCookie])
Parametre:	name – reťazec identifikujúci úložný priestor requiredCookie – nepovinný parameter identifikujúci jedinečnosť úložného priestoru
Návratová hodnota:	ManagedResourceStore
Popis:	Otvorí existujúcu ManagedResourceStore alebo vráti null, ak žiadná taká neexistuje
Metóda:	void removeManagedStore(string name, [string requiredCookie])
Parametre:	name – reťazec identifikujúci úložný priestor [requiredCookie]
Popis:	Odstráni ManagedResourceStore a odstráni všetky jej URL z lokálnej vyrovnávacej pamäti
Metóda:	createStore(string name, [string requiredCookie])
Parametre:	name – reťazec identifikujúci úložný priestor [requiredCookie]
Návratová hodnota:	ResourceStore
Popis:	Otvorí existujúcu ResourceStore alebo vytvorí novú, ak žiadná taká neexistuje
Metóda:	openStore(string name, [string requiredCookie])
Parametre:	name – reťazec identifikujúci úložný priestor requiredCookie – nepovinný parameter identifikujúci jedinečnosť úložného priestoru
Návratová hodnota:	ResourceStore
Popis:	Otvorí existujúcu ResourceStore alebo vráti null, ak žiadná taká neexistuje
Metóda:	void removeStore(string name, [string requiredCookie])
Parametre:	name – reťazec identifikujúci úložný priestor requiredCookie – nepovinný parameter identifikujúci jedinečnosť úložného priestoru
Popis:	Odstráni ResourceStore a odstráni a celý jeho obsah vyrovnávacej pamäti

Database API

Database API je aplikačné rozhranie pre prácu s lokálnou databázou SQLite.

Kód 2.4 Príklad práce s lokálnou databázou

   <script type="text/javascript" src="gears_init.js"></script>
   <script type="text/javascript">
      var db = google.gears.factory.create(’beta.database’);
      db.open(’moja-databaza);
      db.execute(’create table if not exists Zoznam’ + ’ (Meno text, Vek int)’);
      db.execute(’insert into Zoznam values (?, ?)’, [’Peter’, ’22’]);
      var rs = db.execute(’select * from Zoznam order by Vek desc’);
      rs.close();
   </script>

Metóda execute vykoná požiadavku na databázu. Pri ukončení práce s databázou je doporučené použitie metódy close.

Tabuľka 2.3 Popis metód triedy Database. Kompletná špecifikácia je v [4]

Trieda:	Database
Metóda:	void open([name])
Parametre:	name – voliteľný
Popis:	Otvorí databázu
Metóda:	execute(sqlStatement, [argArray])
Parametre:	sqlStatement – reťazec obsahujúci SQL príkaz, so znakom ’? ’ ako zástupný symbol previazaný s parametrami argArray – voliteľné pole parametrov, ktoré nahradia symboly ’? ’
Návratová hodnota:	ResultSet
Popis:	Vykoná SQL príkazy.
Metóda:	void close()
Popis:	Ukončí spojenie s databázou. Volanie Database.close() nie je potrebné
Metóda:	void remove()
Popis:	Zmaže práve otvorenú databázu.

Metóda database.execute po úspešnom volaní vráti objekt triedy ResultSet. Obsahuje výsledky vykonaných SQL príkazov.

Tabuľka 2.4 Popis metód triedy ResultSet

Trieda:	ResultSet
Metóda:	boolean isValidRow()
Popis:	Vráti true ak môžete volať metódy na extrakciu dát
Metóda:	void next()
Popis:	Pokračuje na ďalší riadok výsledkov
Metóda:	void close()
Popis:	Je potrebné zavolať metodu close() ak sme skončili s prácou s výsledkami

Tabuľka 2.5 Popis metód na extrakciu dát

Metódy na extrakciu dát ResultSet
Metóda:	Int fieldCount()
Popis:	Vráti počet polí výsledku
Metóda:	string fieldName(int fieldIndex)
Parametre:	fieldIndex – index požadovaného pola
Popis:	Vráti meno špecifikovaného pola.
Metóda:	field(int fieldIndex)
Parametre:	fieldIndex – index požadovaného pola
Návratová hodnota:	rôzne
Popis:	Vráti obsah špecifikovaného pola v aktuálnom riadku
Metóda:	fieldByName(string fieldName)
Parametre:	fieldName – názov požadovaného pola
Návratová hodnota:	rôzne
Popis:	Vráti obsah špecifikovaného pola v aktuálnom riadku

WorkerPool API

Aplikačné rozhranie, ktoré umožňuje spracovávať javaskriptový kód na pozadí. Vďaka tomu neblokuje vykonávanie ďalších skriptov. Kompletná špecifikácia v [5].

Blob API

Pomocou objektov typu Blob môžeme odkazovať na binárne dáta vo webových aplikáciách. Kompletná špecifikácia v [6].

BlobBuilder API

BlobBuilder je pomocný objekt pre vytváranie objektov typu Blob. Blob je nemenný, read-only object, rovnaký ako reťazec v Javascripte. BlobBuilder je používaný na generovanie Blobu s novým obsahom. Kompletná špecifikácia v [7].

Canvas API

Prostredníctvom tejto API môžeme pracovať s obrázkami pomocou javaskriptu. Táto grafická API je inšpirovaná HTML5 canvasom. Obsahuje metódy na rozkódovanie a zakódovanie do binárnych formátov (napr. PNG, JPEG). Kompletná špecifikácia v [8].

Desktop API

Desktop API poskytuje rozhranie pre prístup k desktopovým funkciám, ako je vytváranie ikon. Kompletná špecifikácia v [9].

Kód 2.5 Ukážka práce s Desktop API

   var desktop = google.gears.factory.create(’beta.desktop’);
   function createShortcut() {
      var desktop = google.gears.factory.create("beta.desktop");
      var description = "Vytvorenie ikonky ROZVRHU.";
      var icons = {
         "16x16": "16icon.png"
         "32x32": "32icon.png",
         "48x48": "48icon.png",
         "128x128": "128icon.png"
      };
      desktop.createShortcut("Rozvrh Fakulty Mechatroniky","http://priklad.sk/index.html", icons, description);
}

Tabuľka 2.6 Popis metód triedy Desktop

Trieda:	Desktop
Metóda:	createShortcut(name, url, icons, [description])
Parametre:	name - meno odkazu url - adresa dokumentu, ktorý sa má otvoriť icons – Objekt obsahujúci jednu alebo viac hodnôt v tvare: rozmer : URL ikony. Napr. ’128x128’: ’http://priklad. sk/icon128x128.png’ descriptions – nepovinný parameter. Text sa zobrazí v potvrdzovacom dialógu.
Popis:	Vytvorí desktopový odkaz na spustenie aplikácie

Geolocation API

Geolocation API umožňuje webovej aplikácie získať užívateľa geografickú polohu. Kompletnú špecifikáciu nájdete v [10].

HttpRequest API

HttpRequest API implementuje podskupinu XmlHttpRequest W3C špecifikácie. Gears poskytuje vlastný HttpRequest objekt. Obsahuje väčšinu vlastností. Kompletnú špecifikáciu nájdete v [11].

Timer API

Obsahuje metódy, ktoré umožnia nastaviť vykonanie skriptov s časovým oneskorením a podobne. Kompletnú špecifikáciu nájdete v [12].

Podpora

Funkčnosť Google Gears je overená na nasledujúcich platformách a prehliadačoch:

• Apple Mac OS X (10.4 alebo vyššia, G4, G5 or Intel Processor)
• Firefox 1.5 alebo vyššia
• Safari 3.1.1 alebo vyššia (OS X Tiger 10.4.11+ alebo Leopard 10.5.3+, G4, G5 alebo Intel Processor)
• Linux
• Firefox 1.5 alebo vyššia
• Microsoft Windows (XP alebo vyššia)
• Firefox 1.5 alebo vyššia
• Internet Explorer 6 alebo vyššia
• Google Chrome
• Microsoft Windows Mobile (5 alebo vyššia)
• Internet Explorer 4.01 alebo vyššia
• Opera Mobile 9.51 (Presto build 2.1.0+) (Windows Mobile 6 len pre dotykové zariadenia)
•  Nasledovné zariadenia nie sú podporované
• Samsung i320 a i320N
• Orange SPV C600
• Motorola Q
• Android 1.0

Umiestnenie dát na disku

Umiestnenie dát webovej aplikácie na disku záleží na platforme a internetovom prehliadači.

Windows Vista - Internet Explorer

Umiestnenie: {FOLDERID_LocalAppDataLow}\Google\Google Gears for Internet Explorer
Príklad: C:\Users\Bob\AppData\LocalLow\Google\Google Gears for Internet Explorer

Windows Vista - Firefox

Umiestnenie: C:\Users\<username>\AppData\Local\Mozilla\Firefox\Profiles\{profile}.default\Google Gears for Firefox
Príklad: C:\Users\Bob\AppData\Local\Mozilla\Firefox\Profiles\uelib44s.default\Google Gears for Firefox

Windows Vista - Chrome

Umiestnenie: C:\Users\<username>\AppData\Local\Google\Chrome\User Data\Default\Plugin Data\Google Gears
Príklad: C:\Users\Bob\AppData\Local\Google\Chrome\User Data\Default\Plugin Data\Google Gears

Mac OS X - Safari

Umiestnenie: ~/Library/Application Support/Google/Google Gears for Safari
Príklad: /Users/Bob/Library/Application Support/Google/Google Gears for Safari

Linux - Firefox

Umiestnenie: ~bob/.mozilla/firefox/<firefox’s profile id>/Google Gears for Firefox
Príklad: ~bob/.mozilla/firefox/08ywpi3q.default/Google Gears for Firefox

Využitie Google Gears

Ako prvá začala Google Gears využívať firma Google vo svojej čítačke kanálov Google Reader. V režime off-line umožňuje prehliadať až 2000 príspevkov. Postupne sa podpora pre toto rozšírenie pridala aj do mailovej služby Gmail a on-line kancelárskeho balíka Google Docs.

Ďalšie webové služby využívajúce Google Gears:

• správca úloh rememberthemilk.com,
• sociálna služba myspace.com,
• on-line správca hesiel passpack.com,
• nástroj pre riadenie projektov mindmeister.com,
• open-source redakčný systém wordpress.net a ďalší.

HTML 5

HTML5 [13] je najnovšia špecifikácia značkovacieho jazyka HTML vyvíjaná medzinárodným združením W3C (World Wide Web Consortium). Najdôležitejšou zmenou v novej verzií je samotná štruktúra HTML dokumentu, veľké množstvo nových elementov a aj podpora off-line web aplikácií. Pretože Google sa snaží dodržiavať štandardy, zastavil vývoj Google Gears a svoju iniciatívu smeruje na HTML5. Je možné, že podpora off-line aplikácií bude mať v novej špecifikácií aj niektoré rysy, ktoré poznáme z Google Gears. V súčasnosti je stále HTML 5 vo fáze vývoja. Dokončenie je plánované na rok 2012. Niekoľko rokov však potrvá jeho úplná podpora vo väčšine prehliadačoch. Prehliadače ako napríklad Firefox podporujú už väčšiu časť nových prvkov HTML5.

Elementy štruktúry

Doposiaľ bola štruktúra HTML dokumentu tvorená z div elementov. HTML5 pridáva nové elementy k identifikácií každého z nich. Tieto majú presne stanovený sémantický význam a lepšie sa v nich orientuje aj samotný programátor.

Tabuľka 3.1 Zoznam nových sémantických elementov štruktúry HTML5

section	Všeobecná (často nadradená) časť, ktorá môže združovať ostatné časti stránky. Element DIV, ktorý dostal sémantické meno.
header	Hlavička časti, v ktorej je začlenená.
footer	Pätička časti, v ktorej je začlenená.
nav	Časť stránky, ktorá obsahuje odkazy na ostatné stránky alebo časti danej stránky.
article	Časť stránky, ktorá obsahuje text nezávislý od ostatných dielov stránky.

Elementy multimédií

Zaujímavých zmien sa dočkala aj podpora multimédií (zvuk, video). Tieto na webe neskutočne rýchlo rozšírili (hlavne jednoduchým šírením pomocou stránok youtube.com a podobne). Preto sú v novej verzií HTML5 prístupné tagy <video> a <audio>.

Element <canvas> reprezentuje 2D kresliacu plochu ovládanú javaskriptom, ktorú môžete využívať napr. na kreslenie grafov, grafických prvkov v hrách a prezentáciách.

Inline elementy

HTML5 zavádza nové elementy, ktoré majú pomôcť uviesť základné prvky, ako je čas alebo čísla.

Tabuľka 3.2 Zoznam nových inline elementov HTML5

mark	Označenie textu. Slúži napríklad na označenie hľadaného slová v zozname výsledkov
time	Označuje čas, alebo dátum v bloku textu.
meter	Predstavuje skalárne meradlá.
progress	Reprezentuje pokrok v dokončení úlohy. Môže byť použitý pre vizuálne zobrazenie.

Podpora režimu off-line

S novou špecifikáciou jazyka HTML 5 prichádza aj podpora off-line aplikácií. K dispozícií máme SQL API a Caching APIs, ktorá je obdobou LocalServer API.

SQL API

SQL databáza na strane klienta umožní štruktúrované dátové úložisko. API pracuje s touto databázou asynchrónne. To znamená, že užívateľské prostredie nebude blokované vykonávaním synchrónneho požiadavku.

Tabuľka 3.3 Zoznam metód návrhu HTML5

Metóda:	Object openDatabase(dbname, dbversion, displayname, size)
Popis:	Vytvára databázový objekt podľa zvolených parametrov
Parametre:	dbname – meno databázy dbversion – verzia databázy displayname – zobrazený názov databázy size – predpokladaná veľkosť databázy v bajtoch
Ďalšie Metódy:	transaction(), executeSql()

LocalStorage API

Dáta na lokálnom disku bude reprezentovať objekt localStorage.

Tabuľka 3.4 Zoznám niektorých metód pre prácu s lokálnym úložiskom

Metóda:	Popis
clear()	zmaže celý obsah objektu
getItem()	získa obsah objektu podľa názvu
key()	získa kľúč podľa čísla
length	Počet uložených kľučov
removeItem()	odstráni položku podľa jej mena
setItem()	Pridá hodnotu položke

Podpora off-line aplikácií je zatiaľ vo fáze vývoja. Preto je podpora v prehliadačoch zatiaľ len minimálna.