JU MJEŠOVITA ELEKTROTEHNIČKA ŠKOLSKA GODINA

I DRVOPRERAĐIVAČKA SREDNJA ŠKOLA 2012./2013.

BIHAĆ

MATURSKI RADPredmet: Računari i programiranje

Tema: Izrada aplikacija za mobilne operatere

MENTOR: UČENIK:Elvir Čirić, dipl. ing. Emrah Babić

Razred: IV3

BIHAĆ, maj, 2013.god

Sadržaj

1. Uvod ............................................................................................................................... 22. Izrađivanje ANDROID aplikacije .................................................................................. 3

2.1. Šta je Android? .................................................................................................. 32.2. Eclipse IDE ........................................................................................................ 32.3. Naša prva aplikacija .......................................................................................... 3

2.3.1. AndroidManifest.xml fajl ............................................................................. 42.3.2. /res mapa ....................................................................................................... 52.3.3. /gen mapa ..................................................................................................... 52.3.4. /src mapa ....................................................................................................... 52.3.5. /assetsmapa ................................................................................................... 6

2.4. Pokretanje i otklanjanje grešaka svoje prve aplikacije ...................................... 63. Izrađivanje WINDOWS MOBILE aplikacija ................................................................ 8

3.1. O platformi ........................................................................................................ 83.2. Početak .............................................................................................................. 83.3. Otvaranje VISUAL STUDIO-a ........................................................................ 93.4. Izrada vaše prve aplikacije .............................................................................. 10

3.4.1. Kretanje kroz UI Editor ............................................................................. 113.4.2. Izrada vašeprve aplikacije .......................................................................... 123.4.3. Dodavanje dugmeta ................................................................................... 123.4.4. Dodavanje rukovanja događajem ............................................................... 13

4. Literatura ...................................................................................................................... 16

2

1.Uvod

Mobilna aplikacija (ili mobilne aplikacije) je softverski program dizajniran za rad na smartphone, tablet računalima i drugim mobilnim uređajima. Oni su obično dostupni putem distribucijskih platformami za aplikacije, koje obično vodi vlasnik mobilnog operativnog sistema, kao što su Apple App Store, Google Play, Windows Phone Store i BlackBerry App World. Neke aplikacije su besplatne, dok druge imaju svoju cijenu. Obično se preuzimaju sa platforme do ciljnog uređaja, kao što su iPhone, BlackBerry, Android telefon ili Windows Phone, ali ponekad se može skinuti na manje prijenosne računare, kao što su laptop ili desktop računari. Za aplikacije s cijenom, općenito 20-30%, ide na distribucijsku uslugu (kao što su iTunes), a ostatak ide programeru aplikacije.

Mobilne aplikacije su izvorno ponuđene za opštu produktivnost i pronalaženje informacija, uključujući i e-mail, kalendar, kontakte i burze i vremensku prognozu. Međutim, javna potražnja i dostupnost razvojnog alata uticali su na brzo širenje u druge kategorije, kao što su mobilne igre, GPS i položajne usluge, bankarstvo, naručeno praćenje, i kupovina ulaznica. Eksplozija u broju i raznolikosti aplikacija napravila je izazov, koji je dovelo do stvaranja širokog raspona pregleda, preporuka, uključujući blogove, časopise, posvećenim uslugama traženja aplikacija na mreži.

Popularnost mobilnih aplikacija je nastavila rasti, kako njihova upotreba sve više prevladava kod većine korisnika mobilnih telefona. U maju 2012 comScore studija je objavila da je tokom prethodnog tromjesečja, više mobilnih pretplatnika koristilo aplikacije nego što su pregledavali web na svojim uređajima: 51,1% naspram 49,8%.

U ovom radu ćemo dati primjere razvoja jednostavnijih mobilnih aplikacija za savremene mobilne uredjaje, sa različitim operativnim sistemom. Svaki operativni sistem je različit i zahtjeva posebnu pažnju kod razvoja aplikacija. Ovdje ćemo pažnju posvetiti dva operativna sistema za mobilne uređaje, a to su: Google ANDROID i Microsoft WINDOWS MOBILE.

3

android windows

1.Izrađivanje ANDROID aplikacija

1.1. Šta je android?

Android je open source mobilni operativni sistem koji kombinira i nadograđuje dijelove raznih open source projekata. Šta to znači za developera? Imamo pristup izvornom kodu platforme koja se izvodi na telefonu. To nam može pomoći da bolje razumijemo kako sučelje kontrole i razne druge komade rade. Ako nam se dogodi bug, također možemo poslati zakrpu kao nadogradnju programa, iako je to naprednija praksa. Google je također spojio veliku skupinu kompanija (tzv. Open Handset Alliance) da doprinose i koriste Android OS u svojim hardverskim uređajima. To znači da imaju veliku podršku za Google OS u industriji, obećavajući široko usvajanje preko poznatih proizvođača.

1.2. Eclipse IDE

Preduvjeti prije programiranja aplikacije za android su:

Moramo preuzeti i instalirati Eclipse IDE, Moramo preuzeti i instalirati Android SDK, Instalirati Android Development Tools (ADT) dodatak za Eclipse.

Eclipse je složen i proširiv Integrated Development Environment (IDE). Nakon prvog otvaranja Eclipse, odaberemo radni prostor na koji spašavamo svoj projekt. Nakon toga moramo konfigurisati Eclipse za Android razvoj tako što ručno postavimo filepath za Android SDK. Odaberemo Eclipse> Preferences iz alatne trake, a zatim odaberemo Android iz dijaloškog okvira koji se pojavljuje. Sada bi trebali imati IDE konfiguriran za Android razvoj.

Važno je napomenuti da Eclipse koristi nešto što se zove "perspektive" da grupiše najčešće korištene zadatake. Promjena perspektive će prebaciti iz dijelova izbornika i alatne trake, te će pokazati i sakriti pogled koji se odnose na njih. Perspektive se mogu otvoriti klikom na Open Perspective gumb ili odabirom Window> Open Perspective. Neki pogledi koje ćete koristiti često uključuju Java, ispravljanje grešaka (debugging) i DDMS.

1.3. Naša prva aplikacija

Za početak stvaranja Android aplikacije, prebaciti na Java perspektivu i odabrati File> Izbornik> Android projekt. Time će se pokrenuti čarobnjak stvaranje aplikacija, i bit će zatraženo da se unesu meta-podatci o projekta u tri kategorije: Sadržaj, Cilj Razvoja, i Svojstva.

4

Nazovemo aplikaciju "DemoApp" i ostavimo Sadržaj sa svim zadanim vrijednostima. Poglavlje Cilj Razvoja definira verziju SDK. Za ovaj put, odaberemo API 4 (Android 1.6) jer će se izvoditi na širokom rasponu hardvera i API će nam omogućiti obradu različite razlučivosti ekrana. Ostatak polja se popuni automatski, te kliknemo na Finish. Nakon toga imamo osnovni "Hello World" program koji je gotovo spreman za rad na telefonu ili emulatoru. Prije nego što postavimo emulator i pokrenemo aplikaciju, objasnit ćemo standardno generirane sadržaj foldera:

1.3.1. AndroidManifest.xml fajl

AndroidManifest.xml sliku pruža metapodatke o našoj aplikaciji koje će Android OS koristiti da pokrene aplikaciju ispravno. Naziv programa, koji se koristi i za ikonu aplikacije i za naslovnicu, i ikona aplikacije su definirani pod Application atributes. Polje Ime zapravo ne sadrže ime, nego "@string/APP_NAME“. Stvarni string tekst je definiran u jednom od XML

5

Čarobnjak stvaranja aplikacije

datoteka koji se nalaze pod res/values mapom. Čarobnjak stvaranja aplikacija generira datoteku naziva strings.xml.

1.3.2. /res mapa

U /Res mapi je pohranjeno većina resursa aplikacije.. Glavni sadržaj kategorije uključuju drawables, layout, i values. Drawables su općenito bitmap slike u obliku. PNG datoteke. Layouts su gdje možete definirati svoje ekrane. Za prikaz XML za izgled na ekranu, kliknite main.xml karticu. Values su gdje možete definirati (u XML) svoje globalno korištene boje, dimenzije, stringove i stilove. Strings.xml datoteka vam omogućuje dodavanje i uređivanje vrijednosti za svoj projekt.

1.3.3. /gen mapa

Ovo je mjesto gdje kod je generiran za sve resurse definirane u /res mapi. Ovo je način kako možete pristupiti izgledu i kontrolama definiranim unutar kôda.

1.3.4. /src mapa

Src mapa sadrži sav izvorni koda, grupiran u paketima. Paketi su jednostavno tu da pomognu kategorizirati svoj izvorni kod u logične skupina sa kojima se moželako rukovati

6

1.3.5. /assets mapa

/assets mapa je mjesto za pohranu raznih datoteke koje trebate za pristup u kodu kao sirovih podataka. Sve datoteke u res mape imaju metode za učitavanje određene vrste, dok je jedini način učitavanja iz /assets programatski otvoriti kao datoteku.

1.4. Pokretanje i otklanjanje grešaka svoje prve aplikacije

Eclipse, zajedno s Android Developer Tools (alati za razvoj za android), nudi odlično okruženje za ispravljanje grešaka aplikacija. Za ispravljanje grešaka, morat ćete koristiti i Debugging i DDMS perspektive. Perspektiva ispravljanje grešaka će se koristiti za hod kroz kod, gledanje vrijednosti varijabli, i postavljanje prijelomnih tačaka. DDMS perspektiva će se koristiti za kontrolu emulatora, pogled teme i pregled dodjela memorije.

Budući da prvi put pokrenećemo aplikaciju, moramo stvoriti nešto što se zove konfiguracija pokretanja. Konfiguracija pokretanja su postavke koje Eclipse koristi za rad (ili ispravljanje) vaše aplikacije. Svaki program može imati više konfiguracija. Može se postaviti tako da se uvijek implementira i radi na priloženom telefon, a druga bi mogla biti postavljena za pokrenutanje u određenom emulatoru.

Za stvaranje konfiguracije pokretanja, odaberite DemoApp u Package Explorer, a zatim odaberite Run>Run iz glavnog menija. U sljedećem dijalogu, odabrati Android aplikaciju i kliknite OK. Emulator bi se trebao pokrenuti. Kada se emulator prvi put pokrene, može se pojaviti sa zaključanim ekranom, kliknite Menu kako bi vidjeli aplikaciju. Sada bi trebali vidjeti tekst "Hello World" na ekranu!

Naš sljedeći korak će biti da postavimo tačke prekida. Otvorimo MainActivity.java datoteku dvostrukim klikom u Package Explorer. Ona se nalazi pod /src> com.demo.demoapp. Dalje, na liniji koja sadrži:

dvaput kliknite na sivom stupcu s lijeve strane (gdje se vidi plavi krug na slici ispod). Ako ste bili uspješni, tamo sada bi trebao biti plav krug koji ukazuje na tačke prekida.

7

Sada se prebacimo na Debugging perspektivu odabirom Window>Open Perspective>Debug. Za ispravljanje grešaka, odaberemo Run> Debug.

Na kraju, LogCat će prikazati sve prijavne informacije koje dolaze iz emulatora. Za nastavak pokretanja aplikacije, možemo koristiti alatnu traku na Debug pogled (kao što se vidi na slici gore), ili odabrati isto iz Run menija. Odaberite Run>Resume da se program nastavi prikazivati.

8

2. Izrađivanje WINDOWS MOBILE aplikacija

2.1. O platformi

Windows Mobile 7 razvoj se obavlja pomoću .NET Frameworka. .NET Framework je softverski okvir izrađen od strane Microsofta za upotrebu u stvaranju Windows aplikacija. Programeri pišu aplikacije pomoću jednog od nekoliko jezika podržanih od. NET Framework, poput C#, a zatim se izvršava aplikacija unutar runtime okruženja koji se zove Common Language Runtime. Za Windows Phone 7, postoje dva različita razvojna pristupa koje možete poduzeti pri stvaranju vaše aplikacije.

Prvi pristup je koristiti Silverlight za Windows Phone. Silverlight je izvorno bio zamišljen kao način za programere za stvaranje bogatih internet aplikacija. Dobio je velik porast u tržišnom usvajanju u posljednjih nekoliko godina, potaknut uglavnom činjenicom da Netflix koristi Silverlight za streaming videa i NBC koristi Silverlight za online emitiranje Olimpijskih igara. Silverlight aplikacija kombinira deklarativno označavanje (tzv. XAML) za izgradnju korisničkog sučelja i kod napisan u. NET Framework jeziku za kontrolu ponašanja aplikacije. Ako razvijate aplikaciju pogonjenu podatcima za Windows Phone 7, vjerojatno biste trebali koristiti Silverlight.

Alternativno, možete koristiti XNA okvir za razvoj Windows Phone 7 aplikacije. XNA je Microsoftov okvir za razvoj igara i korišten je u posljednjih nekoliko godina u stvoranju i Windows i Xbox 360 aplikacija. Ako pravite igru za Windows Phone 7, vjerojatno ćete koristiti XNA okvir.

2.2. Početak

Počnimo od stvaranja sigurnog razvojnog okruženja. Trebat će vam Windows Vista ili Windows 7, i morate imati DirectX 10 grafičku karticu instaliranu na vašem računalu. Nakon provjere da li ispunjavaju ove zahtjeve, preuzmite razvojne alate. Paket uključuje:

Visual Studio 2010 Express za Windows Phone Windows Phone emulator Silverlight za Windows Phone XNA Game Studio 4,0

Nakon što ste instalirali razvojne alate na vašem sistemu, spremni ste za početak.

9

2.3. Otvaranje Visual Studio

Aplikacija koju ćete napraviti je jednostavna. Ona prikazuje jednostavno dugme koje možete dodirnuti. Kada ga dodirnete, dugme se kreće po ekranu telefona. Ovu ćemo aplikaciju razviti koristeći Silverlight za Windows Phone. To bi trebao trajati manje od 10 minuta.

Za početak, otvorite Microsoft Visual Studio 2010 Express za Windows Phone. Najlakši način da ga pronađete je otvoriti izbornik Start i počnite tipkati 'visual studio'. Aplikacija bi se trebala pojaviti na popisu rezultata pretraživanja, slično sljedećem:

Kliknite na Visual Studio 2010 za otvaranje razvojnog okruženja. Ako je ovo vaš prvi put otvaranja aplikacije, to može potrajati nekoliko minuta za početak jer će Visual Studio inicijalizirati neke postavke.

10

2.4. Izrada vaše aplikacije

Kada otvorite Visual Studio, dočekat će vas početna stranica aplikacije. Postoji mnogo sadržaja na ovoj stranici, uključujući i razvojne savjete, najnovije vijesti, i projekte srodnih aktivnosti. Korisno je ponekad pregledati sadržaje ovdje kako bi saznali više o platformi, ali za sada samo kliknite na "New Project ..." link u lijevom sidebaru. Dijaloški okvir će se pojaviti koji vas vodi kroz stvaranje svog novog projekta. Provjerite da li je "Windows Phone Application" odabrano kao predložak projekta. Zatim dajte svom projektu ime. Za ovaj put, preporučujem naziv projekta "Rotating_Button." Na kraju, potvrdite da je "Create directory for solution" odabrano. To pomaže organiziranju razvojnog truda. Vaše postavke bi trebale izgledati ovako:

Kliknite na "OK" da biste stvorili novi projekt.

11

2.4.1 Kretanje kroz UI Editor

Predložak koji ste odabrali vam daje potpuno funkcionalnu aplikaciju. Da biste je vidjeli u akciji, jednostavno pritisnite CTRL + F5 za kompajliranje aplikacije i pokretanje u Windows Phone emulatoru. Emulator se pokreće sa jednom stranicom koja sadrži naslov aplikacije i naslov stranice.

To zadano sučelje jednostavno neće biti od koristi za našu aplikaciju, pa ćemo joj napraviti neke izmjene. Visual Studio bi trebao otvoriti datoteku MainPage.xaml za uređivanje kada ste stvorili projekt. Ako ne, dvostruko kliknite ime datoteke u Solution Explorer da biste je otvorili.

Trebali bi vidjeti dupli ekran. Na jednoj strani razvojnog okruženja možete vidjeti kako će trenutna datoteka izgledati kada se aplikacija pokrene. To je dizajn način. Na drugoj strani imate XAML markup koji govori kako bi sučelje trebalo izgledati. Sve promjene koje napravite na jednoj strani će biti predstavljene na drugoj. To je slično WYSIWYG HTML uredniku poput Dreamweavera.

Prva stvar koju želite učiniti je izbrisati sve unutar izgleda, tako da možemo pružiti vlastitu oznaku. Trebali bi vidjeti Grid oznaku pod nazivom LayoutRoot. Izbrišite sve unutar ove oznake. Na kraju ostaje ovaj kod:

12

<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}"></Grid>

Pogled na dizajn bi trebao pokazati prazan ekran u ovom trenutku.

2.4.1. Izrada izgleda Vaše aplikacije

Sada je potrebno dodati sučelje vašoj aplikaciji. Naš program sastoji od jednog dugmeta koji će se rotirati oko rešetke. Rešetka je 2 × 2, pa kažemo da bi trebala imati dva reda i dva stupca. Promijenite svoje oznake izgleda rešetke na sljedeći način:

<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}"> <Grid.ColumnDefinitions>

<ColumnDefinition Width="*" /> <ColumnDefinition Width="*" />

</Grid.ColumnDefinitions> <Grid.RowDefinitions>

<RowDefinition Height="*" /><RowDefinition Height="*" />

</Grid.RowDefinitions></Grid>

2.4.2. Dodavanje dugmeta

Nakon što ste definirali izgled mreže, vrijeme je za stvaranje dugmeta koje će korisnici pritiskati. Želite dugme da za početak bude u gornjem lijevom okviru rešetke, tako da ćete reći da ide u red 0 i stupac 0. U XAML-u, govorite elementu da se smjesti na odgovarajuće mjesto unutar mreže proglašavajući element, a zatim dodjeljujući mu odgovarajući indeks redka i stupaca. Dodajemo dugme unutar rešetke koristeći sljedeće oznake:

<ButtonGrid.Column="0"Grid.Row="0"Content="Dodirnite me!"HorizontalAlignment="Stretch"VerticalAlignment="Stretch"

/>

To nam kaže da dugme treba pozicionirati u stupcu i retku 0, treba se proteže horizontalno i vertikalno unutar rešetke ćelije koju zauzima, i da treba imati tekst "Dodirnite me!". Kod vaše aplikacije bi trebao biti ovakav:

<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}"> <Grid.ColumnDefinitions>

13

<ColumnDefinition Width="*" /> <ColumnDefinition Width="*" />

</Grid.ColumnDefinitions> <Grid.RowDefinitions>

<RowDefinition Height="*" /><RowDefinition Height="*" />

</Grid.RowDefinitions><Button

Grid.Column="0"Grid.Row="0"Content="Dodirnite me!"HorizontalAlignment="Stretch"VerticalAlignment="Stretch"

/></Grid>

U ovom trenutku, možete pokrenuti svoj program i vidjeti da je vaš UI na mjestu. Baš kao i ranije, pritisnite CTRL + F5 za kompajliranje i pokretanje svog programa u Windows Phone emulator. Ako ste učinili sve ispravno, vidjet ćete dugme na svom emulatoru u gornjem lijevom ćošku.

14

Možete dodirnuti gumb tako da kliknete mišem, ali ništa se neće dogoditi. To ćemo popraviti dodajući neki kod za rukovanje događajem.

2.4.3. Dodavanje rukovanja događajem

Vratite se na Visual Studio i pobrinite se da imate MainPage.xaml otvoren u dizajnu/code modu. Morate dodati atribut rukovanja događajem na dugme koje ste kreirali. Izmjenite deklaraciju dugmeta, dodajući ManipulationStarted atribut. Provjerite jeste li dopustiti Visual Studiu da stvori funkciju rukovanja događajem za vas. Oznaka dugmeta sada bi trebala izgledati ovako:

<ButtonGrid.Column="0"Grid.Row="0"Content="Dodirnite me!"HorizontalAlignment="Stretch"VerticalAlignment="Stretch"ManipulationStarted="Button_ManipulationStarted"

/>

Sada, otvorite kod datoteke MainPage.xaml naziva MainPage.xaml.cs, koji možete pronaći u Solution Explorer klikom na strelicu pored MainPage.xaml.

Unutar MainPage.xaml.cs ćete vidjeti rukovatelj događajima koji je Visual Studio stvorio. Visual Studio ga je najvjerojatnije nazvao Button_ManipulationStarted, što je za potrebe ovog programa sasvim u redu. Promijenite svoju deklaraciju funkcije na sljedeće:

private void Button_ManipulationStarted(object sender, ManipulationStartedEventArgs e){

Button b = sender as Button;int col = Grid.GetColumn(b);int row = Grid.GetRow(b);if (col == row){

Grid.SetColumn(b, ++col % 2);

15

} else{

Grid.SetRow(b, ++row % 2);}

}

Prva stvar ta metoda radi je da stvara novu varijablu tipa Button i dodjeljuje referencu na pošiljatelja varijable. To je važno jer Button proizlazi iz UIElement i sljedećih nekoliko operacija zahtijevaju UIElement objekt kao parametar. Dalje, metoda dobiva indeks trenutnog stupca i redka pomoću statičke metode Grid class. Konačno, metoda koristi jednostavan algoritam kako bi se utvrdilo gdje da preseli dugme i mijenja indeks redka ili stupca prema potrebi. Ako su indeksi reda i stupca isti, onda treba promijeniti stupac. Ako su različiti onda treba promjeniti red. U svakom slučaju koristite drugu statičku metodu Grid klase da postavite redak ili stupac dugmeta. Odgovarajući indeks se određuje pomoću jednostavne matematike.

Sa tim smo završili aplikaciju.. Pritisnite CTRL + F5 za kompajliranje i pokretanje svoje aplikacije, a zatim pokušajte kliknuti na dugme. Vidjet ćete ga kako se krećepo mreži svaki put kad ga kliknete. Pokušajte koristiti kontrole emulatora da promijenite orijentaciju telefona i vidjet ćete da se prilagođava na sve bez problema.

16

3.Literatura

1. Android Application Development All in one for Dummies; 2. Sams Teach Yourself Android Application Development in 24 Hours (2nd Edition);

Lauren Darcey;3. Hello, Android; Ed Burnette4. Writing Mobile Code: Essential Software Engineering for Building Mobile

Applications: Essential Software Engineering for Building Mobile Applications; Ivo Salmre

17