Szakdolgozat. Miskolci Egyetem. HMTL5 alapú alkalmazás fejlesztése Android operációs rendszerre. Készítette: Ódor Zoltán Programtervező informatikus

Átírás

1 Szakdolgozat Miskolci Egyetem HMTL5 alapú alkalmazás fejlesztése Android operációs rendszerre Készítette: Ódor Zoltán Programtervező informatikus Témavezető: dr. Kovács László Miskolc, 2013

2 Miskolci Egyetem Gépészmérnöki és Informatikai Kar Alkalmazott Matematikai Tanszék Szám: Szakdolgozat Feladat Ódor Zoltán (CDTVNR) programtervező informatikus jelölt részére. A szakdolgozat tárgyköre: Alkalmazás fejlesztés A szakdolgozat címe: HTML5 alapú alkalmazás fejlesztése Android operációs rendszerre A feladat részletezése: Android alkalmazástípusok összehasonlítása. Context-Aware Computing bemutatása. A fejlesztés során használt technológiák és keretrendszer elméleti bemutatása. Szoftver dokumentáció és felhasználói leírás készítése. Témavezető: dr. Kovács László egyetemi docens A feladat kiadásának ideje: szakfelelős 2

3 1. A szakdolgozat feladat módosítása szükséges (módosítás külön lapon) nem szükséges dátum témavezető(k) 2. A feladat kidolgozását ellenőriztem: témavezető (dátum, aláírás): konzulens (dátum, aláírás): A szakdolgozat beadható: dátum témavezető(k) 4. A szakdolgozat szövegoldalt program protokollt (listát, felhasználói leírást) elektronikus adathordozót (részletezve) egyéb mellékletet (részletezve) tartalmaz dátum témavezető(k) 5. bocsátható A szakdolgozat bírálatra nem bocsátható A bíráló neve: dátum szakfelelős 6. A szakdolgozat osztályzata a témavezető javaslata: a bíráló javaslata: a szakdolgozat végleges eredménye: Miskolc, a Záróvizsga Bizottság Elnöke 3

4 Tartalomjegyzék 1. Bevezetés 5 2. Mobil alkalmazási technológiák Web és natív alkalmazás Context-Aware Computing Cascading Style Sheet HTML AJAX és JSON SQLite adatbázis PhoneGap Matematikai háttér Számítási modell Fejlesztői dokumentáció Feladatspecifikáció Rendszerterv Tárolt adatok Szerkezet és stílus Funkciók leírása Felhasználói leírás Tesztelés és fejlesztési lehetőségek Összefoglalás 45 Irodalomjegyzék 46 Adathordozó használati útmutató 47 4

5 1. fejezet Bevezetés Az okostelefonok térhódítása elképesztő sebességgel történt. Miközben a tévének több, mint tíz év, de még az internetnek is legalább öt év kellett az általános elterjedéshez, addig az okostelefonoknak és táblagépeknek mindezt néhány év alatt sikerült elérniük. [1] Egyre több kutatási adat szól arról, hogy 2013-ban már a mobil lesz az elsődleges internetes platform és azt csak kiegészíti a hagyományos asztali illetve notebook számítógép. Az interneten elérésén kívül számos más területen is meghatározóvá vált az emberek hétköznapjaiban. Ha ismeretlen helyen próbálunk tájékozódni, ha az időbeosztásunkat akarjuk átszervezni vagy csupán időtöltésként megnéznénk egy videót vagy olvasnánk egy könyvet, egyetlen eszköz segítségére van csupán szükségünk. Az okostelefonok használóinak száma folyamatosan nő, kimutatások [2] szerint csupán Európában 136 millióan vannak és az EU öt legnagyobb tagállamában, Németországban, az Egyesült Királyságban, Spanyolországban, Franciaországban és Olaszországban az okostelefonok piaci telítettségének aránya átlépte az 50%-ot. A piac alakulása kihatással volt az alkalmazásfejlesztésre is. A fejlesztőknek alkalmazkodniuk kellett az új platformhoz, különben kiszorulnak a piac igen nagy hányadából. Ennek leglátványosabb jele, hogy az idei évben már több mint 700 ezer alkalmazás elérhető letöltésre a Google Play kínálatából, amely az Android operációs rendszer alkalmazásboltja. [3] A növekedés mértéke elképesztő, a 2012-es év végén volt olyan hónap, mikor 25 ezer új alkalmazás került piacra. Szakirányom (Modern WEB technológiák) és a piac helyzete miatt kézenfekvő volt, hogy egy, az új eszközökre alkalmas webalkalmazás fejlesztését mutassam be szakdolgozatomban. Az Android alkalmazásfejlesztés eszközeinek és technikáinak tanulmányozása során, azonban találkoztam olyan új lehetőségekkel, amelyek a tanulmányaim során elsajátított technikákkal elkészített alkalmazásomat magasabb szintre emelhetik. Mind a tervezés folyamán, mind a kivitelezés során tudtam alkalmazni az új ötleteket. A szoftver kialakítása előtt elemeztem a különböző típusú alkalmazások előnyeit és hátrányait. Tanulmányoztam az eszközök modern szenzorainak, érzékelőinek használatát, elérhetőségét, a felhasználó környezetének és várható igényeinek meghatározásához. A fejlesztés során próbáltam beépíteni a HTML és CSS technológiák legújabb generációjának újdonságait, a keretrendszer lehetőségein belül törekedtem olyan módszereket alkalmazni, hogy a hálózati információcsere a lehető leggyorsabb legyen, a tárolt adatok mérete pedig minél kisebb legyen. A szakdolgozatom során bemutatom egy Java alapú keretrendszerrel készült, Android operációs rendszeren futtatható alkalmazás fejlesztését, kitérve a felhasznált technológiák elméleti hátterére. 5

6 2. fejezet Mobil alkalmazási technológiák 2.1. Web és natív alkalmazás Mobil web alkalmazás A mobil web alkalmazás nagyban hasonlít a hagyományos weboldalakra, azzal a különbséggel, hogy a tartalom a kisebb méretű kijelzőkre van optimalizálva. A tartalma lehet bármi, egyszerű üzleti oldaltól kezdve, bonyolult számításokat végző kalkulátorig a tartalom irreleváns. Az alkalmazás az operációs rendszer szabványos böngészőben fut, ezáltal készülék független. Ezért általában a fejlesztésük olcsóbb, hiszen nem kell a különböző készülékekre különböző változatokat fejlesztetni. Az alkalmazások karbantartása is egyszerűbb, a módosítás azonnal elérhető a felhasználók készülékein, nem kell semmit letölteni, és nem kell azt sem megvárni, hogy a fejlesztések a különböző piacterek (pl. Google Play, Apple Apps Store) engedélyezési folyamatán átmenjenek. A mobil web előnyei: A mobil web alkalmazások legfőbb előnye, hogy készülék és platform függetlenek. Miután az alkalmazás a telefon böngészőjében fut, független a készülék típusától, az egyetlen szempont, hogy a telefonnak internet képesnek kell lennie. Ez azt jelenti, hogy szélesebb tömegeket lehet elérni vele, mint a készülékfüggő natív alkalmazásokkal. A web alkalmazások jól ismert, szabványos technológiákat használnak (Java, HTML, CSS), ezekhez értő fejlesztőket könnyen és olcsón lehet találni. Miután az alkalmazás a weben van, nincs szükség harmadik fél általi engedélyezésre. Az alkalmazás valós időben módosítható, és a felhasználó által azonnal elérhető. Jelenleg a mobil web még ismertebb, bár kutatások bizonyítják, hogy az okostelefon tulajdonosok ma már több időt töltenek natív alkalmazások használatával, mint mobil website-okon. és hátrányai: Éppen a készülék függetlenség okán azonban a mobil web nem képes kihasználni az okostelefonok beépített szolgáltatásait. 6

7 2.1. Web és natív alkalmazás Ha fizetős alkalmazás szeretnénk elkészíteni, ki kell alakítani saját fizetési rendszerünket. A felhasználói felületen egyes effekteket csak igen bonyolultan lehet végrehajtani. Natív mobil alkalmazás A natív alkalmazások a mobil web alkalmazásokkal szemben, az eszköz natív környezetében futnak, a különböző piacterekről letölthetőek, a különböző készülékekhez eltérő verziók szükségesek. Az alkalmazások különböző fejlesztői nyelveken készülnek (pl. Java, Objective-C), gyorsak, megbízhatóak, fejlettek, a webnél lényegesen jobb és több felhasználói élményt nyújtanak. Hátrányuk, hogy a különböző készülékekhez az adott alkalmazás más más verziója szükséges, de ez egyben előny is lehet, hiszen ezáltal komplexebb alkalmazások készíthetőek, melyek képesek kihasználni a készülékek beépített képességeit (hívás, sms küldés, navigáció, kamera, gyorsulásmérő, kontaktlista, stb.). Ezen natív funkciók kihasználásával lényegesen több interakció érhető el az ügyfelekkel, egészen más felhasználói élményt nyújtva. A natív mobil alkalmazások előnyei: A natív alkalmazások fejlettebbek, szebbek és gazdagabb a funkcionalitásuk. Miután ezek képesek kihasználni az okostelefonok beépített szolgáltatásait (fényképezőgép, gyorsulásmérő, GPS, stb.), a fejlesztők számára több lehetőség van, hogy a felhasználókat lekössék, az alkalmazást vonzóvá tegyék. Kutatások alapján mondhatjuk, hogy a visszatérő felhasználók aránya a natív alkalmazások esetén összehasonlíthatatlanul nagyobb, mint a mobil web alkalmazásoknál. A natív alkalmazásokhoz nem kell feltétlenül internet kapcsolat, azok a telefonban futnak, ezáltal gyorsabbak, azonnal rendelkezésre állnak. Felmérések szerint az elkövetkező időben a legfőbb felhasználói igény a sebesség. Ha egy oldal nem jön be 5 másodpercen belül, a felhasználó esetleg még egyszer megpróbálja elindítani, de többet soha. A natív alkalmazásokat a gyártói piacterekről (Android market, Apple Apps Store, OVI, stb.) lehet letölteni, ezáltal regisztrált felhasználók milliói pusztán pár kattintással hozzájuthatnak az alkalmazáshoz. és hátrányai: A natív alkalmazásokkal nehezebb nagyobb tömegeket elérni bár a piactereken keresgélő felhasználók száma exponenciálisan nő hátrány mindenképpen, hogy az alkalmazást előbb le kell tölteni, és csak azután lehet használatba venni. Fontos szempont, hogy mely platformra fejlesszünk. Miután az alkalmazások készülékfüggőek, körültekintően kell eljárni, hogy az optimális számú ügyfelet érhessük el. Mindenképpen javasolt minimum a két legelterjedtebb platformra (ios, Android) elkészíteni az alkalmazást. Ez általában szerencsére már nem minden esetben nagyobb beruházást igényel. Az ellenzők szerint ez a legkomolyabb érv a natív alkalmazásokkal szemben. 7

8 2.1. Web és natív alkalmazás A gyártói piactereken való megjelenéshez mindenképpen szükség van azok gazdáinak a jóváhagyására is, valamint a módosítások nem érhetőek el valós időben, csak némi késleltetéssel. Ez azonban két szempontból sem kritikus. Egyrészről az engedélyezés egyfajta minőséget is garantál, hibás, nem befejezett alkalmazások, vagy sértő tartalmak nem publikálhatóak. Másrészről a késedelem sem elviselhetetlen. Az Android market esetén a feltöltött alkalmazások néhány órán belül aktívak, az Apple esetén ez 3-5 munkanapig is eltarthat. Ezt mindenképpen bele kell kalkulálni a fejlesztési időkbe. Hibrid alkalmazás Ezek az alkalmazások kompromisszumot jelentenek a mobil web és a natív alkalmazások között, hiszen a fejlesztői környezetük biztosítja a készülékek közötti kompatibilitást, miközben képesek kihasználni a telefonok bizonyos szolgáltatásait. Úgy kell elképzelni, hogy a hibrid alkalmazások olyan natív alkalmazások, melyekben beépített HTML kód is van. Hibrid alkalmazások készítésére az egyik legelterjedtebb megoldás a PhoneGap használata, amely egy platform független fejlesztői keretrendszer. Legismertebb hibrid alkalmazás a Facebook mobil alkalmazása, melyet a piacterekről lehet letölteni, rendelkezik a natív alkalmazások összes lényeges tulajdonságával, de a használathoz az internet elérés szükséges, onnan tölti a frissítéseket. 8

9 2.2. Context-Aware Computing 2.2. Context-Aware Computing Amikor arra törekszünk, hogy az általunk fejlesztett alkalmazások, készülékek vagy rendszerek felhasználói felülete könnyen használható legyen, elengedhetetlen, hogy ismerjük, milyen környezetben fogják használni. A Context-Aware Computing [4] célja, hogy nem csupán a készítés során veszszük ezt figyelembe, hanem használat közben is, tehát a program adaptálódik az aktuális felhasználói környezethez. Az eddig megszokott módszer, hogy olyan kialakítást terveznek, amely illeszkedik ahhoz a környezethez, ahol a leggyakrabban használják az adott alkalmazást. Context-Aware Computing során azonban több kialakítást tervezünk, így mindig az adott helyzethez leginkább megfelelőt tudjuk használni. Futásidőben amikor a felhasználó "kommunikál" a szoftverrel a rendszer képes meghatározni az aktuális környezetet és kiválasztja azt a kialakítását a felhasználói felületnek, ami speciálisan arra a helyzetre optimalizált. Szemléltetésképpen, egy egyszerű példa [4] következik. Tegyük fel, hogy a feladatunk, hogy megtervezzünk egy karórát. Kutatásaink során felismerjük, hogy használják a szabadban és épületekben egyaránt, sötét, gyengén megvilágított vagy fényes környezetben, például tűző napsütésben. Lehet, hogy a felhasználó épp rohan, hogy elérje a vonatot vagy épp egy unalmas előadáson ül. Okos fejlesztőként, több ötletünk is támad, hogyan tudnánk a lehető legjobb szolgáltatást nyújtani a felhasználóknak, az egyes helyzetekben. Például, mikor siet valaki, hogy elérje a vonatot, a kijelző kiemeli a perc és másodperc számlálót, nagyobb méretben mutatva azokat. Máskor, ha a felhasználó épp tétlenül várakozik, a kijelző kisebb méretben mutatja az időt és megjelenít egy vicces idézetet. Hagyományos fejlesztésnél előbb utóbb arra a következtetésre jutunk, hogy el kell döntenünk melyik kialakítást akarjuk használni, mivel egyszerre minden helyzetnek nem tudunk megfelelni. Rendszerint a végeredmény egy kompromisszum, amiben sok ötletünktől meg kell szabadulnunk. Azonban Context-Aware esetén, olyan órát készíthetünk, amely alkalmazkodik az adott környezethez, így kombinálhatjuk a korábbi ötleteket a kialakítás tervezése során. Ha az óra fel tudja ismerni, hogy milyen környezetben van (folyamatosan, nagy sebességgel változtat helyet, folyamatos erős fény éri, stb.), kiválasztja az annak megfelelő képernyő kialakítást. Ahogy a példából is látszik, a technológia hatalmas előnye, hogy nagyobb szabadságot enged a felület kialakításában, azonban szem előtt kell tartani, hogy sokkal bonyolultabb, összetettebb, egyes esetekben igen időigényes egy ilyen rendszert kialakítani. A mobil eszközök elterjedésével nagymértékben nőtt az igény az adott környezethez optimalizált alkalmazásokra, azonban ugyanebből az okból a szituációk száma is megnövekedett. A fejlett érzékelőkkel sok helyzetet fel tudnak ismerni a készülékek, így részletesen beállíthatjuk, hogy az egyes funkciók és szolgáltatások mikor és hogyan működjenek. A hordozható tulajdonság miatt számolnunk kell a mobil eszközökre gyártott alkalmazásoknál, hogy különböző látási viszonyokra kell felkészülni. Használhatják a programot a szabadban, jó fényviszonyok között, gyengén megvilágított szobában, esetleg éjszaka, sötét környezetben. Egyes esetekre be kell állítani a megfelelő fényerőt és színeket, esetleg a betűmérettel is lehet javítani a láthatóságot. A multifunkciós tulajdonság miatt figyelembe kell vennünk, hogy az alkalmazás hogyan reagáljon le egyes eseteket, ha más programok is futnak. Például egy üzenetküldő rendszer rezgő és hangjelzést ad üzenet érkezésekor alapesetben, de amennyiben egy média program fut (a felhasználó esetleg videót néz), csak egy kis ikon jelenik meg a felső sarokban, ezzel jelezve az üze- 9

10 2.2. Context-Aware Computing netet, de nem megzavarva a felhasználót. A mobil eszközök egyik gyenge pontja, hogy a rengeteg funkció gyorsan elfogyasztja a rendelkezésre álló erőforrást, és lemerül a készülék. Erre egyszerű megoldás, ha bizonyos érték alatt figyelmeztet az alkalmazás, hogy csatlakoztassa töltőre a készüléket, azonban ez nem mindig megvalósítható. Ilyenkor hasznos tulajdonság lehet, ha az alkalmazásunk képes a funkcióit alacsony fogyasztású üzemmódban is végrehajtani, esetleg csökkentett grafikával, ezzel megnövelve az élettartamot. Ezek csak töredékei azoknak a szituációknak, amikre odafigyelve javíthatjuk a programunk alkalmazhatóságát, azonban van egy kikerülhetetlen probléma, a széles készülékválasztéknak köszönhetően, a kijelzők változatossága. Erre megoldást jelenthet a Responsive Web Design [5] technológia. Responsive Web Design A technológia alapja, hogy a tartalom rugalmas (fluid) elrendezésű, mind a különböző egységek egymáshoz viszonyított helyzete, mind az egység mérete, alakja változtatható. Ezzel elérhetjük, hogy a kisebb kijelzőkön is a teljes tartalom legyen elérhető, míg nagyobb kijelzők esetén elkerülhetjük a csúnya, üres helyeket. A képméret mellett a kijelző felbontását is figyelembe kell venni, a képek megjelenítésénél például látványos hibának számít, ha egy magas felbontású készüléken, egy erősen pixeles, alacsony felbontású kép éktelenkedik ábra. Példa a RWD alkalmazására Forrás: A technológia kivitelezésének egyik módja, a CSS3 egyik újdonsága, a media queries használata, melyről a következő fejezetben találhat több információt. 10

11 2.3. Cascading Style Sheet 2.3. Cascading Style Sheet A CSS a Cascading Style Sheet rövidítése, mely annyit tesz "Egymásba ágyazott stíluslapok". A CSS a weblapok (vagy hasonlóan strukturált HTML, XHTML dokumentumok) stílusának, kinézetének meghatározására szolgáló stílusleíró nyelv, melynek specifikációját a W3C konzorcium felügyeli [6]. A CSS létrejöttének oka a HTML leíró nyelv hiányossága volt, miszerint a HTML főleg a dokumentum tartalmának leírásáért volt felelős, annak formázásáért már kevésbé. A növekvő igények miatt a HTML 3.2-es verziójába már beépültek formázó tag-ek, de ezek használata bonyodalmas volt és semmiképp nem célratörő. Szükség volt egy a HTML dokumentumtól független formázási lehetőségre, melyekre több megoldás is született. A legjobb megoldásnak mégis a CSS tűnt. Az első verzió elő készületei közé tehetők. Ezeket főleg két ember végezte, név szerint Hakon Wium Lie és Bert Bos. Az ő vezetésükkel 1996 decemberében megjelent a CSS1 azaz az első hivatalos verzió ban a második verzió is elkészült CSS2 néven. A CSS3 azaz a harmadik verzió fejlesztései pedig még a napokban is folynak. A CSS olyannyira felülkerekedett a HTML formázási lehetőségein hogy a HTML 4.0 szabványból már ki is kerültek ezek a formázást segítő tag-ek. Így például a jól megszokott FONT tag is érvénytelenített státuszú lett. A CSS segítségével a következő feladatokat oldhatjuk meg: Az elkészített stílusokat egy állományba tudjuk összegyűjteni (.css) Az így elkészített stílusokkal több különböző weblapot tudunk felruházni (egy CSS több weblap) Egy elkészített weboldal többfajta megjelenését tudjuk prezentálni egyetlen hivatkozás megváltoztatásával (egy weblap több CSS) Tudunk igazodni a weboldal megnyitását végző kliens számítógép paramétereihez (pl. felbontás, böngésző, nyelv) Interaktívabbá tudjuk tenni a már meglévő weblapjainkat az egér és billentyűzet eseményekre történő stílusváltoztatással Sok időt tudunk megtakarítani, mivel a formázásokat változtatás esetén jó esetben csak egy helyen kell módosítani CSS3 Media query A CSS2 segítségével különböző stíluslapokat rendelhettünk az egyes média típusokhoz, mint a kijelző vagy a nyomatás. A CSS3 újítása, a media query, még hatékonyabbá teszi ezt a funkciót. Hozzáadhatunk kifejezéseket a média típushoz, amely a feltételek ellenőrzése után a megadott stíluslapot alkalmazza. Így külön stílust rendelhetünk hozzá a nagyméretű kijelzőkhöz (monitorok vagy laptopok) és a kisebb méretű kijelzőkhöz (mobiltelefonok vagy táblagépek), a tartalom legkisebb változtatása nélkül. Röviden bemutatom a használatát. 11

12 2.4. HTML5 Így hivatkozhatunk külső stíluslapra CSS media query-vel: <link rel= stylesheet media= screen and (min-width: 701px) and (max-width: 900px) href= css/medium.css /> CSS fájlon belül is all and (max-width: 699px) and (min-width: 520px) { body { background: #ccc; } } Mint látható, a media attribútumhoz kapcsolva akár több kifejezést is használhatunk. A kifejezések kiértékelésekor az AND kulcsszó a logikai és műveletet, a vessző pedig a logikai vagy műveletet jelenti. A NOT kulcsszó is használható, a logikai negációt jelenti. Fontosabb tulajdonságok: width és height: A szélesség és a magasság tulajdonságokra hivatkozhatunk, a tartalmat megjelenítő felület esetén. Használhatunk min- illetve max- előtagokat a "nagyobb vagy egyenlő" illetve a "kisebb vagy egyenlő" megszorítások kifejezésére. Erre a < és > karakterek elkerülése miatt van szükség, ami HTML és XML esetén probléma lenne. device-width és device-height: Szintén a szélesség és a magasság tulajdonságokra hivatkozhatunk, azonban a tartalmat megjelenítő felület helyett a teljes kijelző esetén. Itt is használhatóak a min- illetve maxelőtagok. orientation: A tulajdonság értéke "portrait" ha a magasság tulajdonság nagyobb vagy egyenlő mint a szélesség. Egyéb esetben az érték "landscape". aspect-ratio és device-aspect-ratio: Előbbi a szélesség tulajdonság értékének a magasság értékéhez viszonyított aránya, utóbbi az eszköz-szélesség tulajdonság értékének az eszköz-magasság értékéhez viszonyított aránya. resolution: A kijelző felbontására, pixelsűrűségére hivatkozhatunk. Itt is használhatóak a minilletve max- előtagok HTML5 A HTML5 [7] a jelölőnyelv legújabb változata, rengeteg új technikával és funkcióval bővíti a korábbi, 4.0-ás verziót. Ugyanakkor visszafelé kompatibilis az eddigi HTML/XHTML verziókkal, a korábbi szintaktikától nem tér el gyökeresen inkább a meglévő elemeket tovább fejlesztette, bővítette. Ha valaki egy régebbi HTML/XHTML verzióban készült 12

13 2.4. HTML5 weblapjának kódjában csak a dokumentumtípus meghatározását átírja, máris HTML5- ös weblapja van esetleg előfordulhat, hogy elavult elemeket is használ és nem használja ki az új szolgáltatásokat. Az új szabvány tehát nagyon toleráns és felhasználóbarát, és még a hibás kódok értelmezésére is útmutatást ad a különböző böngészőkben. A HTML5-nek komoly szerepe lehet a platform független mobil alkalmazások fejlesztése terén. Az egyik legjobb megoldás, hogy egyszerű, mégis tartalom és funkció gazdag alkalmazásokat készítsünk, amelyek támogatnak minden fontosabb "okos" készüléket és azokon futó böngészőket. A HTML5 komoly lépés a HTML4/XHTML1.1-től. Számos új elemet vezet be, például új oldalvázat, szekciókat leíró elemek, új szöveges elemek, új tartalmat beágyazó elemek, újfajta beviteli mezők, form elemek és a komplex formok leírását lehetővé tevő jelölők, elemek. Legtöbb esetben HTML4 elemekkel is elérhető ugyanez a látvány, azonban mégis hasznosabb az új elemeket használni, csupán néhány szempont: tisztább, átláthatóbb kód, amit könnyebb rendben tartani gépi fordítók könnyebben, gyorsabban tudják értelmezni a kódot kereső motorok és böngészők pontosabban tudják értelmezni a dokumentum tagolását nem kell annyi osztályt és azonosítót létrehozni, ezzel a stíluslap is átláthatóbb A következőkben kiemelek néhány fontosabb elemet az újak közül: <article> Különálló, független tartalom elkülönítésére szolgáló elem, például hírcikkek vagy hozzászólások esetén használható. Tartalmazhat saját fejlécet és láblécet, mellékes információt a tartalomról (például szerző). Article elemek egymásba ágyazhatóak. <aside> Az oldal fő tartalmához nem szorosan kapcsolódó elemeket tartalmaz, például külső vagy belső hivatkozások, navigációs elemek. Általában az oldal jobb vagy bal oldalán helyezkedik el. <header>, <footer> Fejléc és lábléc létrehozására szolgál, div elemet helyettesítenek. Létrehozhatóak más elemeken belül is (article, section). <section> Egy adott szakasz elkülönítésére használhatjuk. Összekapcsolhatjuk hasonló típusú elemeket, például fejezeteket egy blogban vagy termék információkat egy céges oldalon. Hasonló szerepe van, mint a div elemnek, azonban a section fő feladata, hogy a html oldalunk jól tagolt, átlátható legyen, míg a div elem a stíluslapok és script-ek kialakításában játszik fő szerepet. 13

14 2.4. HTML ábra. HTML5 szerkezete Forrás: Learn HTML5 and JavaScript for Android [8], 50. oldal <mark> A szöveg kiemelésére szolgáló elem. <nav> Navigációs elemek meghatározására szolgáló elem. <output> Számítások eredményét tudjuk reprezentálni az elemmel. Hasznos lehet, ha dinamikus oldalon szeretnénk eredmény kiírni. Fontos azonban megjegyezni, hogy az output elem nem küldi el az információt, ez esetben használhatunk rejtett elemet. Az egyik új funkció az offline használatot lehetővé tevő Application Cache. Ezzel a funkcióval gyorsítótárba helyezhetünk fájlokat, így internet elérhetőség nélkül is tudunk használni webes felületet. A web alkalmazásoknak több előnye is származik ebből: Offline böngészés a felhasználók internet nélkül is tudják használni az alkalmazást Sebesség gyorsítótárban lévő erőforrások rövidebb idő alatt elérhetőek Szerver terheltség csökkentése a böngésző csak a frissített vagy megváltoztatott erőforrásokat tölti le a szerverről A funkciót minden nagyobb böngésző támogatja az Internet Exploreren kívül. 14

15 2.5. AJAX és JSON Szintén újítás a beépített rajzfelület, amelyet a <canvas> elemmel érhetünk el. Ezen a beépített rajzfelületen 2D elemeket rajzolhatunk JavaScript segítségével, maga az elem csak a felületet hozza létre. Először létre kell hozni a canvas felületet: <canvas id="mycanvas" width="200" height="100"></canvas> Ez egy négyzet alakú terület, alapbeállítás szerint nem veszi körül keret és nincs tartalma. Meg kell határozni egy azonosítót, amivel hivatkozni lehet a rajzfelületre, és meg kell adni a méretét szélesség és magasság értékkel. A többi elemhez hasonlóan a canvas elem is testreszabható stíluslappal. Rajzolás a felületre: Minden rajzolási műveletet JavaScript-tel végezhetünk. Képzeljük el a felületet, mint egy kétdimenziós koordináta rendszert, aminek a (0,0) koordinátája a felület bal alsó sarka. Szöveget is kiírathatunk, kiválaszthatjuk a betűtípust, a betűméretet és beállíthatjuk, hogy csak a betű körvonalát rajzolja vagy ki is töltse. Beállíthatjuk a színeket, de használhatunk színátmeneteket is. Képet is kirajzoltathatunk a felületen. Gyakorlatban lássuk, hogy kell kirajzolni egy piros téglalapot a korábban létrehozott felületen: <script> var c=document.getelementbyid("mycanvas"); var ctx=c.getcontext("2d"); ctx.fillstyle="#ff0000"; ctx.fillrect(0,0,150,75); </script> Az 1. sorban megkeressük a canvas elemet. Mivel az elem id-je szerint azonosítjuk a felületet, egy oldalon több canvas elem is lehet, csak más azonosítóval kell ellátni őket. A 2. sorban meghívjuk a getcontext függvényt, 2d paraméterrel. Ezzel a függvénnyel létrehozunk egy beépített HTML5 objektumot, amely tulajdonságainak változtatásával hozhatjuk létre a különböző kétdimenziós alakzatokat. A 3. sorban beállítjuk a kitöltési színt, a 4. sorban pedig az alakzatot. Az alakzat létrehozásánál a négy paraméterrel két pontot határozunk meg, az első két paraméter a bal alsó sarok koordinátája, a harmadik és negyedik paraméter pedig a jobb felső sarok koordinátája AJAX és JSON AJAX A név az Asynchronous JavaScript and XML kifejezésből származik. A technológia célja, gyors és dinamikus oldalak készítése. Az AJAX segítségével lehetséges a weboldalak aszinkron frissítése, a háttérben kisméretű adatcserével a szerver felé. A lényege, hogy lehetséges az oldal egy részének a frissítése, a teljes oldal újratöltése nélkül. A klasszikus oldalaknak, amelyek nem használnak AJAX-ot, muszáj újratölteni a teljes oldalt, ha változik a tartalom. Néhány népszerű példa: Google Maps, Gmail, YouTube és Facebook. 15

16 2.5. AJAX és JSON 2.3. ábra. AJAX működése Az AJAX az alábbiak kombinációival dolgozik: XMLHttpRequest objektum (a szerverrel való aszinkron adatcsere) JavaScript/DOM (az információ kezelése és közlése) CSS (az adat stílusa állítható) XML (az átküldött adat gyakori formátuma) Az AJAX böngésző- és platformfüggetlen technológia. JSON A JSON [9] a JavaScript Object Notation rövidítése. A JSON egy nyelvfüggetlen, "önleíró" és könnyen megérthető szöveges adat átalakító formátum, melynek célja a gyors adatátvitel. A JSON szöveg formátuma szintaktikailag azonos a JavaScript objektum létrehozó kódjával. A hasonlóság miatt, elemző (parser) használata helyett, a JavaScript használhatja a beépített eval() funkciót a JSON adaton, így JavaScript objektumokhoz jutva. 16

17 2.7. PhoneGap 2.6. SQLite adatbázis Az SQLite egy beágyazott SQL adatbázis motor, amely kisméretű, szerver- és telepítés nélküli, ACID kompatibilis adatbázis kezelő rendszert valósít meg. [10] (ACID = Atomicity, Consistency, Isolation, Durability. Az atomicitás, konzisztencia, izoláció és tartósság az adatbázis-kezelő rendszer tranzakció - kezelő képességeinek alapelemei, amelyek garantálják az adatbázis integritását.) C-alapú forráskódja nyílt, tehát szabadon felhasználható bármilyen célra. D. Richard Hipp tervezte és valósította meg. Szemben a legtöbb SQL adatbázissal, ennek nincs szüksége külön szerverre a működéshez, kis erőforrásokkal dolgozik. Minden SQL utasítást végre tud hajtani, az adatokat, táblákat együtt tárolja egy fájlban. Az adatbázis fájlformátuma platform független, tehát ugyanazt a fájlt használhatjuk 32 bites és 64 bites rendszeren is. Az SQLite egy tömörített könyvtár. Az adatbázis minden funkciójának használatát engedélyezve, a könyvtár mérete 350 Kb alatti is lehet, a cél platform és a fordító beállításaitól függően. (Például 64 bites kód nagyobb.) Ha a nem használt funkciókat elhagyjuk, a könyvtár mérete 300 Kb alá is csökkenthető. Az SQLite egyik legnagyobb előnye, hogy minimális memória hely használatával is futtatható, ezért népszerű megoldás telefonokra, PDA-kra vagy MP3 lejátszókra készített alkalmazások esetén. A sebessége függ ugyan a használható memória méretétől, azonban alacsony memória használat esetén is megfelelő gyorsasággal képes dolgozni. Az SQLite megbízhatósága kulcsfontosságú, ezért minden új verziót, kibocsátás előtt átfogóan tesztelik. A tesztek során több millió esetet futtatnak rajta, amely esetek több ezer különálló SQL kifejezést tartalmaznak. Az adatbázist felkészítik a futás közben előforduló hardver hibák kezelésére is. A tranzakciók ACID-ok, még ha rendszerösszeomlás vagy áramingadozás miatt is szakadtak is meg. Az SQLite-ot használó alkalmazások száma folyamatosan nő, számos, népszerű alkalmazás is használja. (Például a Mozilla Firefox is használja konfigurációs adatok, sütik, könyvjelzők tárolására.) Az SQLite-ra nem úgy kell tekinteni, mint ami helyettesíti az Oracle-t, hanem ami helyettesíti az fopen() metódust PhoneGap A PhoneGap [11] egy platform független fejlesztői keretrendszer, amely lehetővé teszi, hogy natív alkalmazásokat írjunk különböző mobiltelefon platformokra HTML5, JavaScript és CSS felhasználásával. A PhoneGap által kialakított híd (bridge) megoldja, hogy egy beágyazott böngésző segítségével futó JavaScript kód az adott platform saját kódjával kommunikálni tudjon, és fordítva. Ez a megoldás attól függ, hogy milyen sajátosságai vannak az adott platform saját böngészőjének. Architektúrálisan ez a következőt eredményezi: 17

18 2.7. PhoneGap 2.4. ábra. PhoneGap architektúrája Forrás: Középen látjuk ezt az elvi hidat, melynek döntő jellemzője még, hogy csupasz (chromeless), csak megjelenítési gépezetként működő böngészőt (mint a WebKit) feltételez az eszközön lévő, szabványos webes (HTML, JS, CSS) tartalmak megjelenítéséhez. Az eredmény ebben az elvi megoldásban nem csak okostelefonokon, hanem tableteken, asztali gépeken, TV-ken, autókban és sok más helyen való alkalmazhatóságot vetít előre, hiszen csupasz és szabványos böngészővel ma már ezek az eszközök is rendelkezhetnek, és "a határ a csillagos ég". Amit ezen az ábrán nem látunk az a híd JavaScript és saját eszközkód közötti "átjárást" biztosító szerepe. A PhoneGap eredendő, "híd" funkciójának megfelelően technikailag megoldott a JavaScript és az adott platform saját, natív (saját kódja pl.: az IOS-nél az objective-c) kódja közötti kétirányú kommunikáció. Device API Az alkalmazás - programozási felület vagy alkalmazás - programozási interfész (angolul application programming interface, röviden API) egy program vagy rendszerprogram azon eljárásainak (szolgáltatásainak) és azok használatának dokumentációja, amelyet más programok felhasználhatnak. Egy nyilvános API segítségével lehetséges egy programrendszer szolgáltatásait használni anélkül, hogy annak belső működését ismerni kellene. A piacot alakító mobil platformok eszközfunkciói elég közel állnak egymáshoz, és így ki lehet alakítani egy egységes Device API rendszert, ami megfelelő implementációk révén egyúttal a többplatformos JavaScript kódolást is támogatja (mint az Untapped "natív" változatához szükséges, beépített fényképezőgép funkció használatát). Ehhez a Device API-kat alapos és körültekintő munkával tervezni és implementálni kellett a szintén nem kevés munkával prioritási rendbe sorolt platformok között. A kö- 18

19 2.7. PhoneGap vetkező ábrán láthatjuk az egyes mobil operációs rendszerek által támogatott device API-kat: 2.5. ábra. Támogatott Device API-k Forrás: html5hu.files.wordpress.com/2011/11/phonegap-1-2-supported-features_thumb.jpg Device API-k jellemzése: accelerometer (gyorsulás mérő): mozgásérzékelő, amely érzékeli az előző pozíciótól való eltérést camera: a kamerával készített képet kezeli vagy betölti az albumból a képeket compass: iránytű contacts: ezen keresztül férhetünk hozzá a telefonkönyvhöz file: a fájlkezelést hajtja végre írás, olvasás, listázás geolocation: gps adatok lekérdezése media: a video és zene fájlokhoz való hozzáférést biztosítja network: a hálózathoz való hozzáférés notification: jelzések, amelyek lehetnek hang, üzenet, rezgés storage: sql szerverhez való kapcsolódást teszi lehetővé 19

20 2.7. PhoneGap Plug-in architektúra A plug-in architektúra azért lett kialakítva, hogy ne csak a mobil eszközök Device API-kon keresztül megnyilvánuló funkciói legyenek (egyébként egységes módon, a W3Cvel szoros együttműködésben való kialakításban) elérhetők a JavaScript kódból, amit a beágyazott böngésző hajt végre, hanem az adott eszköz, platform saját kódjában írott modulok is elérhetőek legyenek. Erre azért van szükség, mert hiába lett néhány év alatt százszor gyorsabb a JavaScript, bizonyos igényekhez a platformon futó saját kóddal tudunk csak elérni kellő teljesítményt. A plugin architektúrának köszönhetően, a PhoneGap minden lehetőséget képes kihasználni, amit eddig csak a natív programok tudtak. A HTML5 és Javascript alapú mobil fejlesztés teljesen egyenértékű az adott platform saját nyelvén fejlesztett alkalmazással. 20

21 3. fejezet Matematikai háttér 3.1. Számítási modell A program útvonal funkciója készítése során egy olyan feladatot kellett megoldanom, hogy ismerve a felhasználó és a boltok koordinátáit, a boltok termékkínálatát és a felhasználó által megvásárolni kívánt termékeket, meg kellett találnom azt az utat, amelyet bejárva, a legkevesebb bolt érintésével a felhasználó a leggyorsabban meg tudja vásárolni a kívánt termékeket. Az alábbiakban matematikai modellel ábrázolom a feladatot. Adott egy G=(V,E) irányítatlan, súlyozott gráf a következő feltételekkel: a G gráfot két részgráfra bontom, H 1 és H 2 részgráfra H 1 tartalmazza a felhasználó pozícióját jelképező S pontot, valamint a boltok helyét jelképező B 1,B 2,...,B n pontokat, így a részgráf pontjainak száma n+1 (n darab bolt, valamint a felhasználó pozíciója) H 2 tartalmazza a termékeket jelképező T pontokat, ezeknek száma legyen m H 1 teljes részgráf, a benne lévő élek súlya különböző a B 1,B 2,...,B n pontok mindegyikének van legalább egy H 2 -beli ponttal közös éle, ezen élek súlya azonos S pontnak nincs közös éle egyetlen H 2 -beli ponttal H 2 minden pontjára igaz, hogy más H 2 -beli ponttal nincs közös éle és minimum 1, de maximum n darab B ponthoz köti él. 21

22 3.1. Számítási modell Példa a gráfra n=4, m=9 esetén: 3.1. ábra. Válasszunk ki k < m darab T pontot. Ezek a pontok jelképezik a megvásárolni kívánt termékeket. Meg kell találni a legkisebb összsúlyú körutat, amely S pontból és B 1,...,B n pontokból áll, úgy, hogy minden kiválasztott T pontnak legalább egy közös éle van valamelyik körútbeli B ponttal. A megoldás megtalálásához az alábbi lépéseket kell végrehajtani. A feladatot két részre osztom: I. Megkeresem azt a legkisebb elemű M halmazt, amely tartalmazza az összes olyan B csúcsot, amelyből egy él távolságra minden kiválasztott T csúcs elérhető. II. Megkeresem a legkisebb összsúlyú körutat, S pont és M halmaz elemei között. M halmaz megkeresése: 1. Az első kiválasztott T csúcsból elérhető B csúcsok közül kiválasztom azt, amelyiknek az S csúcshoz vezető éle a legkisebb súlyú és hozzáadom az M halmazhoz. 2. A további kiválasztott T csúcsok vizsgálata: a, ha a vizsgált T csúcsból elérhető B csúcsok között van olyan, amely eleme M halmaznak, befejezem a vizsgálatot és a következő T elemet nézem b, ha a vizsgált T csúcsból elérhető B csúcsok között nincs olyan, amely eleme M halmaznak, kiválasztom a vizsgált B csúcsok közül azt amelyiknek az S csúcshoz vezető éle a legkisebb súlyú és hozzáadom az M halmazhoz. 3. Ha minden kiválasztott T csúcsot megvizsgáltam kész az M halmaz. Legkisebb összsúlyú út megkeresése: A részfeladatot tekinthetem "utazó ügynök probléma" feladatnak, ahol S csúcsból indulva kell visszajutnom oda, az M halmazban szereplő B csúcsok egyszeri érintésével. 22

23 3.1. Számítási modell A "Nyers erő" módszert választva, megvizsgálom az összes lehetséges utat, és kiválasztom a lekisebb összsúlyút. Azért ezt a módszert választottam, mert más módszerrel (pl. mohó vagy beillesztéses) ugyan csökkenteni lehet a számolási időt, azonban ezek a módszerek nem adnak biztosan jó megoldást. Szemléltetésképpen egy egyszerű példán bemutatom a számítás menetét. Vegyük az alábbi gráfot: 3.2. ábra. Legyenek a kiválasztott elemek a T 1, T 3, T 4, T 5 pontok. Első részfeladat, hogy meghatározzuk az M halmazt. Ehhez meg kell vizsgálni a kiválasztott elemeket. 1, T 1 pontnak kizárólag B 1 ponttal van közös éle, ezért B 1 pontot hozzáadjuk az M halmazhoz ábra. 23

24 3.1. Számítási modell 2, T 3 pontnak 3 ponttal van közös éle, ezért meg kell vizsgálni, a 3 pont közül valamelyik eleme-e M halmaznak. B 1 eleme, ezért T 3 vizsgálatát befejezhetjük ábra. 3, T 4 pontnak 2 ponttal van közös éle, ezért meg kell vizsgálni, a 2 pont közül valamelyik eleme-e M halmaznak. Nincs ilyen pont, ezért meg kell határozni, a pontok S ponttal közös élei közül melyik a legkisebb súlyú. B 2 S él 1 súlyú, míg B 4 S él 5 súlyú, tehát B 2 pontot kell M halmazhoz hozzáadni ábra. 4, T 5 pontnak kizárólag B 3 ponttal van közös éle, ezért B 3 pontot hozzáadjuk az M halmazhoz. 24

25 3.1. Számítási modell 3.6. ábra. Minden kiválasztott elemet megvizsgáltunk, a részfeladat eredménye M:=B 1,B 2,B 3. A második részfeladat, hogy a "Nyers erő" módszerrel meghatározzuk, a legkisebb összsúlyú körutat S, B 1, B 2 és B 3 pontok között. Az eredmények: Körút Összsúly S B 1 B 2 B 3 S 11 S B 1 B 3 B 2 S 11 S B 2 B 1 B 3 S 10 A táblázatból kiolvasható, hogy a második részfeladat és a teljes feladat megoldása az S B 2 B 1 B 3 S körút ábra. Piros vonallal jelölve a megoldás 25

26 4. fejezet Fejlesztői dokumentáció 4.1. Feladatspecifikáció A szoftver egy magyarországi áruház lánc bevásárlást segítő alkalmazása. A termékek adatait (név, ár, hol kapható) szerveren kell tárolni, az áruházak adatait (cím, nyítvatartás) és a felhasználó által készített adatokat lokálisan kell tárolni. Az alábbi funkciókat kell végrehajtania: termékek közötti keresés kategória és áruház szerint bevásárló lista létrehozása, összköltség kiszámításával áruházak közötti keresés város szerint legközelebbi áruház megállapítása a bevásárló listában szereplő termékek leggyorsabb beszerzéséhez szükséges út meghatározása a meghatározott út térképen való ábrázolása vásárlási tranzakciók mentése a tranzakciók elemzésével a közelben lévő áruházak kínálatából ajánlat készítése 4.2. Rendszerterv A program fejlesztése során HTML5 és CSS3 technológiával alakítom ki a felhasználói felületet, helymeghatározáshoz a HTML5 beépített Geolocation funkcióját használom. A termékek és áruházak adatait JSON fájlban tárolom, a bevásárló listát és a vásárlási tranzakciókat SQLite adatbázisban tárolom. JavaScript technológiát használok a fájlok eléréséhez, adatbázis műveletekhez, számításokhoz. A térkép kirajzolásához a Google Maps JavaScript API-t használom. Azért ezeket a technológiákat választottam, mert így be tudom mutatni tanulmányaim során szerzett tapasztalataimat, valamint az alkalmazás rugalmas, internet kapcsolattól független lesz. Természetesen a helymeghatározásra és szerveren tárolt adatokra épülő funkciók használata csak aktív internet 26

27 4.3. Tárolt adatok elérés esetén lehetséges, a többi funkció és tárolt adat azonban elérhető internet kapcsolat nélkül is ábra. Az alkalmazás felépítése 4.3. Tárolt adatok A shops.json fájl tartalmazza az áruház adatait, a következő modell szerint: 4.2. ábra. shops.json fájl felépítése A name tulajdonság tartalmazza az áruház nevét. Az address összetett tulajdonság, ami az áruház címét tárolja. A town és street tulajdonságok a cím város és utca, házszám részét tartalmazzák. A latitude és longitude tulajdonságok az áruház földrajzi szélességét és hosszúságát tartalmazza, amelyek a helymeghatározásnál lesznek felhasználva. Az open tulajdonság a nyitvatartást tartalmazza. 27

28 4.3. Tárolt adatok Részlet a shops.json fájlból: "markets": [ { "name":"tesco Debrecen Supermarket", "address": { "varos":"debrecen", "street":"szentgyörgyfalvi u. 9.", "latitude":" ", "longitude":" " }, "open":"h-v: " }, ] A products.json fájl tartalmazza a termékek adatait, a következő modell szerint: 4.3. ábra. products.json fájl felépítése A name tulajdonság tartalmazza a termék nevét. A cost tulajdonság tartalmazza a termék árát, mértékegységgel. A category tulajdonság tárolja, hogy a termék melyik kategóriába tartozik. A shop egy többértékű tulajdonság, amely azoknak az áruházaknak a nevét tartalmazza, ahol a termék kapható. Részlet a products.json fájlból: "products":[ { "name":"gtx gyerekkerékpár", "cost":"26990ft", "cat":"játék, sport", "shop":[ {"name":"tesco Campona Hipermarket"}, {"name":"tesco Debrecen Piac Expressz"} ] }, ] 28

29 4.4. Szerkezet és stílus Az SQLite adatbázisban két táblát használok az adatok tárolására. A Kosár tábla tartalmazza a bevásárló listában szereplő termékek adatait. A tábla elsődleges kulcsa a K.id mező, amely auto increment tulajdonsággal bír, azaz minden új elem esetén automatikusan értéket kap. A data mező tartalmazza a termék nevét, az ar mező pedig a termék árát, mértékegységgel. A bolt mező tartalma azon boltok listája, ahol a termék kapható ábra. A Kosar tábla modellje A Past tábla tartalmazza a vásárolt termékek listáját. A tábla elsődleges kulcs a P.id mező, mely auto increment tulajdonsággal bír, azaz minden új elem esetén automatikusan értéket kap. A data mező tartalmazza a termék nevét, a day mező pedig a vásárlás napját, heti lebontásban ábra. A Past tábla modellje 4.4. Szerkezet és stílus Az alkalmazás egy html fájlt (index.html) használ. A header részbe vannak beágyazva a különböző méretű kijelzőkhöz szabott stíluslapok. <link type="text/css" href="css/style_s.css" rel="stylesheet" media= screen and (max-width: 300px) /> <link type="text/css" href="css/style_m.css" rel="stylesheet" 29

30 4.4. Szerkezet és stílus media= screen and (min-width: 301px) and (max-width: 500px) /> <link type="text/css" href="css/style_l.css" rel="stylesheet" media= screen and (min-width: 501px) and (max-width: 1000px) /> <link type="text/css" href="css/style_xl.css" rel="stylesheet" media= screen and (min-width: 1001px) /> Minden formázást a külső stíluslapok tartalmaznak, amelyek a css mappában vannak elhelyezve. A style_s.css-t a 300 pixel vagy annál kisebb szélességű kijelzők esetén használja. A style_m.css-t és style_l.css-t a 301 pixel és 500 pixel, valamint a 501 pixel és 1000 pixel közötti szélességű kijelzőkön használja. Az 1000 pixelnél nagyobb szélességű felbontásra képes kijelzők esetén a style_xl.css-t használja az alkalmazás. A főmenü, a menük és almenük egy-egy <div>-ben vannak elkülönítve, az aktuálisan használt, látni kívánt <div> kivételével mindegyik hidden attribútummal rendelkezik. <body> <div id="menu">... </div> <div id="menu1" hidden>... </div> <div id="menu2" hidden>... </div> <div id="menu3" hidden>... </div> <div id="menu4" hidden>... </div> <div id="menu5" hidden>... </div> </body> A "menu" azonosítóval rendelkező <div> a főmenü. Négy gomb elemet tartalmaz, melyek közül három, a menük megjelenítésére szolgálók, a "menubutton" osztályba tartoznak, a kilépés gomb pedig az "exitmenubutton" osztályba tartozik. A gombok vízszintesen középre rendezettek, a legalsó, kilépés gomb kissé távolabb helyezve a többitől. <div id="menu" > <button onclick="menu(1)" class=menubutton>kosár</button></br> <button onclick="menu(2)" class=menubutton>termékek</button></br> <button onclick="menu(3)" class=menubutton>áruházak</button></br> <button onclick="exit()" class=exitmenubutton>kilépés</button> </div> 30

31 4.4. Szerkezet és stílus A "menu1" azonosítójú <div> a kosár menü. A <h2> elem tartalmazza a menü elnevezését, nagyobb betűmérettel, középre igazítva. A "backbutton" osztályba tartozó gomb a vissza gomb, a főmenübe lehet visszatérni vele, minden menüben megtalálható, egységesen a bal felső sarokba helyezve. A másik gombbal elérhető a térkép almenü, ez a "secondbutton" osztályba tartozik, amely képernyőmérettől függően a vissza gomb mellett vagy a jobb felső sarokban helyezkedik el. A "cartcontainer" azonosítójú <div> tartalma a dinamikusan betöltődő tartalom. Az elem magassága a stíluslapokon úgy van meghatározva, hogy ne lépje túl a menü a kijelző méretét, az overflow: auto tulajdonság miatt azonban a "cartcontainer" tartalma lapozható. Ennek lényege, hogy ha a dinamikus tartalom egy része nem látható a kijelzőn, lehet lapozni, azonban a többi elem helye nem változik. A felső részt és a tartalmat egy 3 pixel szélességű vonal választja el. A menü alján két <div> balra igazítva helyezkedik el, ezek közül a másodikban lesz kiírva a kosár elemei árának összege. <div id="menu1" hidden> <h2 class="headline">kosár</h2> <button onclick="back(1)" class="backbutton">vissza</button> <button onclick="utvonalfull();"class="secondbutton">útvonal</button> <hr class="thickhr"> <div id="cartcontainer"> <table id="cartlist"></table> </div> <div class="sum">végösszeg: </div><div class="sum">0ft</div> </div> A kijelző méretétől függően, a dinamikus tartalom mérete változó. A kisméretű kijelzőkön az ötödik oszlop nincs megjelenítve, ezzel nagyobb helyet hagyva a többi információnak, a jobb olvashatóságért. A következő ábrákon előbb egy 300 pixel szélességű alatti, majd egy nagyobb kijelzőn látható ábra. Bal oldalon a kisebb, jobb oldalon a nagyobb szélességű kijelző A "menu2" azonosítóval rendelkező <div> a termékek menü. A felső részén az előző menühöz hasonlóan az elnevezés, a vissza gomb és egy almenü gomb helyezkedik 31

32 4.4. Szerkezet és stílus el, utóbbival az ajánlat almenü érhető el. Alatta két <select> elem található, címkével ellátva. Mindkettővel a termékeket lehet szűrni, az elsővel áruház, a másodikkal kategória szerint. Az onchange attribútum használatával, ha új elemet választunk ki a legördülő menüből, automatikusan meghívja a prodlist() metódust. Egy 3 pixeles vonal választja el a dinamikus tartalmat, amely a kosár menühöz hasonlóan épül fel. <div id="menu2" hidden> <h2 class="headline">termékek</h2> <button onclick="back(2)" class="backbutton">vissza</button> <button onclick="ajanlatpage()" class="secondbutton">ajánlat</button> <label for="varos">áruház:</label> <select id="shopvaros" onchange="prodlist()"> <option value="debrecen Supermarket">Debrecen Supermarket</option>... <option value="campona Hipermarket">Campona Hipermarket</option </select></br> <label for="varos">kategória:</label> <select id="category" onchange="prodlist()"> <option value="ital">ital</option>... <option value="ruhazat">ruházat</option> </select> <hr class="thickhr"> <div id="prodcontainer"> <table id="prodlist"></table> </div> </div> A "menu3" azonosítójú <div> az áruház menü. Az elnevezés és a vissza gomb alatt két <div> található. Ezek elhelyezkedése a kijelző méretétől függ. 300 pixel szélességnél kisebb kijelzőn a két <div> egymás alatt helyezkedik el, nagyobb esetén az első <div> balra igazítva helyezkedik el a második mellett. A "picktown" osztályba tartozó <div> egy <select> elemet tartalmaz, amelynek legördülő menüjéből ha kiválasztunk egy elemet, meghívja a shopout() metódust. A "minshop" azonosítójú <div> a jelenlegi pozícióhoz legközelebbi áruház nevét, vagy ha ezt nem tudja megállapítani, akkor az eredeti "Nincs adat" szöveget tartalmazza. Ezt követően az előző menükhöz hasonlóan a dinamikus tartalmat egy 3 pixeles vonal különíti el. <div id="menu3" hidden> <h2 class="headline">áruházak</h2> <button onclick="back(3)" class="backbutton">vissza</button> <div id="picktown"> <label for="varos">város:</label> <select id="varos" name="varos" onchange="shopout()"> <option value="budapest">budapest</option>... <option value="miskolc">miskolc</option> </select> 32

33 4.4. Szerkezet és stílus </div> <div> <div>legközelebbi áruház:</div> <div id="minshop">nincs adat</div> </div> <hr class="thickhr"> <div id="shopcontainer"> <table id="shoplist"></table> </div> </div> A kosár menühöz hasonlóan itt is kijelző mérettől függő a dinamikus tartalom. A következő ábrákon látható a tartalom változása ábra. Bal oldalon a kisebb, jobb oldalon a nagyobb szélességű kijelző A "menu4" és "menu5" azonosítóval rendelkező <div> a térkép és ajánlat almenü. A szokásos elnevezés és vissza gomb mellett előbbi egy iframe-t tartalmaz, amely a map.html oldal tartalmát tölti be, utóbbi egy table elemet, amely a dinamikus tartalmat írja ki. <div id="menu4" hidden> <h2 class="headline">térkép</h2> <button onclick="run()" class="backbutton">vissza</button> <iframe id="mapframe"></iframe> </div> <div id="menu5" hidden> <h2 class="headline">ajánlat</h2> <button onclick="pageback()" class="backbutton">vissza</button> </br> <table id="ajanlatlist"></table> </div> 33

34 4.5. Funkciók leírása A menükben és az ajánlat almenüben a dinamikus tartalom egy-egy táblázatban jelenik meg. A sorok egy vízszintes, 1 pixel vastagságú, fehér vonallal vannak elválasztva. Az oszlop szélességek százalékos formában van megadva, így alkalmazkodik a kijelző szélességéhez Funkciók leírása Az alkalmazás funkcióit JQuery, illetve a PhoneGap beépített metódusai segítségével valósítottam meg. A funkciók indítási módjuk szerint két csoportba lehet sorolni, automatikus illetve felhasználó által indítható funkciók. Automatikus funkciók 1, Internet ellenőrzés és helymeghatározás Az alkalmazás betöltődése után 2 másodpercenként lefut a checkconnection metódus. Ez a PhoneGap egyik beépített metódusa, amely megállapítja, milyen módon csatlakozik a készülék az internethez (Wi-Fi, 2G, 3G, stb.). Ez esetben azonban csak azt nézi meg, hogy csatlakozik-e az internethez. Ha nem csatlakozik, beállítja a net változó értékét 0-ra (ezt használom feltételként a további metódusoknál, amelyek helyes működéséhez internet szükséges), valamint a curlat és curlon változók értékét üres stringre állítja. Ha csatlakozik, a net változó értékét 1-re állítja és meghívja a getlocation metódust, amely kiolvassa jelenlegi pozíciónk földrajzi szélességét és hosszúságát a HTML5 Geolocation API használatával és letárolja azokat a curlat és curlon változókban. 2, Töltöttségi szint Az alkalmazás indításakor létrejön egy eseményfigyelő, amely az akkumulátor töltöttségi szintjének 1 százalékos változása esetén létrehoz egy objektumot az adatokkal, és meghív egy kezelő metódust, amelynek átadja az objektumot. Az objektumnak két tulajdonsága van, a töltöttségi szint mértéke (szám) valamint, hogy csatlakoztatva van-e erőforráshoz (logikai változó). Ez esetben csak a szint mértékével foglalkozom, amely ha nem éri el a 16-ot, felugró ablak jelenik meg, az "Alacsony töltöttségi szint!" üzenettel. Felhasználó által indítható funkciók 1, Áruházak és termékek listázása A korábban ismertetett JSON fájlok feldolgozásával jönnek létre a termékek és áruházak listái. A fájlt egy AJAX kéréssel olvassa be, az áruházak esetében a helyi lemezről, a termékek esetében szerverről (utóbbi esetén előbb ellenőrzi az internet kapcsolat meglétét). A fájl adatai ezután objektumként kezelhetőek, az adatok szöveges formájúak. Ezután könnyen listázhatóak az elemek. A megfelelő select típusú input elem értékét kiolvassa, majd minden elemre lefuttat egy összehasonlítást, és ahol megegyezik az érték, annak az objektumnak az adatait kilistázza. A termékek esetén a listázás mellett az adatokat egy-egy külön tömbben is tárolja (név, ár és kapható bolt szerint), későbbi felhasználás céljából. 34

35 4.5. Funkciók leírása 2, Kosár tartalmának változtatása A kosár tartalmának tárolását SQLite adatbázissal valósítottam meg. Az alkalmazás indításakor megnyitja az adatbázist (illetve ha a megadott paraméterekkel nem talál adatbázist, létrehozza). Az adatbázisban minden SQL művelet végrehajtható, az alkalmazás számára azonban csak a select, insert és delete műveletek szükségesek. Ezeket az executesql metódussal lehet végrehajtani, amely alakja függ a művelettől. Az insert és delete műveletek esetén egy paramétere van, maga az SQL művelet. A metódus hatására végrehajtja a változtatásokat a megadott tábla elemein. Törlésnél a megadott indexű elemet eltávolítja a táblából, beillesztésnél a megadott index alapján, a korábban letárolt adatokat (termékek neve, ára és kapható boltja) egy elemként eltárolja a táblában. Lekérdezés esetén (select művelet) az executesql metódus három paramétert kér: az első az SQL művelet, a második a kezelő metódus, a harmadik a hibakezelő metódus. A hibakezelő metódust akkor hívja meg, ha nem sikerült végrehajtani a lekérdezést. Ha sikerült, akkor a kezelő metódust hívja meg, amelynek paraméterként átadja a lekérdezés eredményét objektumként. Ez a kezelő metódus végigfut az objektum összes elemén és kilistázza értékét, ezzel kiírva a kosár tartalmát. 3, Legrövidebb útvonal meghatározása és kirajzolása A funkció a korábban ismertetett matematikai logika alapján működik. Előbb megvizsgálja kapcsolódik-e az internethez a készülék (későbbi kalkulációhoz szükséges), majd a kosár elemeinek adataiból létrehozza azon boltok listáját, ahova el kell menni. Ezekből a boltokból hozza létre azt a teljes gráfot, ahol a legrövidebb körutat határozza meg. Az élek hosszát a getdistance metódussal számolja ki, amely két bolt távolságát számolja ki a földrajzi szélesség és hosszúság adatai alapján. Miután megtalálta a körutat, az aktuális pozícióhoz legközelebbi bolttal kezdve kilistázza azt és a kosárban lévő termékekhez hozzárendeli azt a boltot a listából, ahol meg lehet vásárolni, több bolt esetén a legközelebbit. Ezt követően a Google Maps Javascript API segítségével kirajzolja térképet és a listán szereplő boltok koordinátájával kirajzolja rajta az utat. 4, Ajánlat meghatározása A megvásárolt termékek adatait az SQLite adatbázisban egy külön táblában tárolom, amely tartalmazza a termék nevét és a vásárlás napját. Az ajánlat létrehozásához két listára van szükség: az első azt tartalmazza, hogy az adott napon és az azt követő két napon milyen termékeket vásároltak, a második az aktuális pozícióhoz mért 10 kilométeres körön belül elhelyezkedő áruházakat tartalmazza. Az első listán szereplő termékek közül csak azokat listázom, amelyek a második listán szereplő áruházak valamelyikében kaphatóak, így megkapom azokat a termékeket, amelyeket az adott napokon rendszerint venni szokott és a közelben kaphatóak. 35

36 4.6. Felhasználói leírás Telepítés 4.6. Felhasználói leírás A telepítéshez az install_markets.apk fájl futtatása szükséges. A telepítés előtt engedélyeznie kell a különböző hozzáféréseket ábra. Hozzáférések engedélyezése A tovább gombot megérintve megadja az engedélyeket és a telepítés elkezdődik ábra. Telepítés befejezve Ha a kijelzőn a 4.7-es ábra jelenik meg, a telepítés befejeződött, érintse meg a kész gombot. A menüben megjelenik a Markets nevű alkalmazás. 36

37 4.6. Felhasználói leírás ábra. Android menü az új ikonnal Az ikon elhelyezhető a kezdőképernyőn, ehhez érintse meg hosszan az ikont, majd húzza a kívánt helyre. Futtatás Az alkalmazás futtatásához egyszer érintse meg az ikont. Az adatok betöltése közben az alábbi képernyő jelenik meg ábra. Töltőképernyő Az adatok betöltése után a főmenü jelenik meg. 37

38 4.6. Felhasználói leírás ábra. Főmenü A főmenüben a Kosár, Termékek illetve Áruházak menüket lehet kiválasztani, valamint a Kilépés gombbal bezárható az alkalmazás. Funkciók 1, Termékek kosárba helyezése A Termékek menüben tudja kiválasztani a termékeket, amelyeket a kosárhoz kíván hozzáadni. Válassza ki a kívánt áruházat és termékkategóriát a legördülő menüből és láthatja az elérhető termékeket ábra. Legördülő menük elérése Ha áruháztól függetlenül, csak termékkategória alapján szeretne keresni, válassza ki a "Minden áruház" lehetőséget az áruházak legördülő menüből. 38

39 4.6. Felhasználói leírás ábra. Keresés minden áruház kínálatában Az Ajánlat gomb megérintésével az Ajánlat almenübe jut, ahol az alkalmazás megkeresi a 10 kilométernél közelebb lévő áruházakat, és a választékukban megkeresi azokat a termékeket, amelyeket az adott napon és az azt követő két napon szokott vásárolni ábra. Ajánlat menü Ha megtalálta a kívánt terméket a sor végén található "Kosár" gomb megérintésével hozzáadhatja a terméket a kosár tartalmához ábra. Termékek menü, kosár gomb A készülék, ha képes rá, rezgő visszajelzést küld sikeres hozzáadás esetén. 2, Kosár tartalma, legrövidebb útvonal meghatározása A Kosár menüben megtekinthetjük a kiválasztott termékek listáját, a végösszeg kiszámításával. Bármely elem eltávolítható, az adott sorban megtalálható "Törlés" gombot megérintve. 39

40 4.6. Felhasználói leírás ábra. Kosár menü, törlés gomb Ha a kosárban lévő terméket megvásárolta, érintse meg a "Kész" gombot, ezzel a vásárlást eltárolja az alkalmazás az adatbázisban ábra. Kosár menü, kész gomb Előfordulhat, hogy a kiválasztott termékeket nem lehet egy áruházban beszerezni. Erre szolgál a Térkép almenü, amely megkeresi a legrövidebb útvonalat, ahol beszerezhető minden termék és térképen kirajzolja. Ehhez a kosár feltöltése után válassza az "Útvonal" gombot. Ezután a következő kép fogadja önt ábra. Kosár menü, útvonal gomb 40

41 4.6. Felhasználói leírás ábra. Térkép menü A térképen kék vonal jelzi az utat, a jelzések pedig az áruházak helyét jelölik. Jobb oldalon szövegesen is listázva vannak az érintett áruházak, valamint az útvonal hossza. 3, Áruházak keresése Az Áruházak menüben megnézheti egy adott város áruházainak nyitvatartását, pontos címét valamint jelenlegi helyzetétől való távolságát. Ehhez válassza ki a kívánt várost a legördülő menüből ábra. Áruházak menü, legördülő menü elérése A gyors használat érdekében az alkalmazás automatikusan megkeresi az önhöz legközelebb lévő áruházat ábra. Legközelebbi áruház 41

42 4.6. Felhasználói leírás Hibaüzenetek 1, "Nincs termék" ábra. "Nincs termék" hibaüzenet Ha ez a felirat jelenik meg a termékek listájában, azt jelenti, hogy a kiválasztott áruházban, a kiválasztott termékkategóriában nem szerepelnek termékek. 2, "Nincs internet!" ábra. "Nincs internet!" hibaüzenet A termékek keserése vagy az útvonal funkció használata esetén találkozhat ezzel az üzenettel. Az alkalmazás nem tud csatlakozni az internethez. 3, "Nincs adat" ábra. "Nincs adat" hibaüzenet 42