1 Szakdolgozat Miskolci Egyetem HMTL5 alapú alkalmazás fejlesztése Android operációs rendszerre Készítette: Ódor Zoltán Programtervező informatikus Té...
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
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: 2012. 09. 20.
................................. szakfelelős 2
1. szükséges (módosítás külön lapon) A szakdolgozat feladat módosítása 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):
..............
.............
..............
.............
..............
.............
3. A szakdolgozat beadható: ......................
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
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
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
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
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
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.
2.1. ábra. Példa a RWD alkalmazására Forrás: http://www.kunocreative.com/Portals/32387/images/responsive-web-design.png
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
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 1994-1996 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ó. 1998-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
2.4. HTML5 Így hivatkozhatunk külső stíluslapra CSS media query-vel: CSS fájlon belül is használhatjuk: @media 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.
2.4. 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
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.
