PRODUKTRAPPORT FORORD

Transkript

1 PRODUKTRAPPORT FORORD Dette dokumentet gir en teknisk beskrivelse av Pris++, som er en Android applikasjon utviklet i forbindelse med hovedprosjekt ved HiOA. Denne rapporten tar for seg implementeringen av hele systemet. 1

2 INNHOLDSFORTEGNELSE Forord... 1 Implementering... 4 Prosjekt struktur : Applikasjon... 4 Java... 6 XML... 9 Hver enkelt del av programmet Introskjerm Hovedmeny Produkt funksjonalitet Produkter Produkt Detaljer Opprett Produkt Butikk Funksjonalitet Butikker Opprett Butikk Butikk Detaljer Pris Funksjonalitet Priser Skanner funksjonalitet Skan Barkode Handleliste Funksjonalitet Handleliste Handleliste Priser Kart Tilbudsavis Funksjonalitet Tilbudsavis Prosjekt struktur : Api Prosjekt struktur : Database

3 Vedlegg [A] - Kravspesifikasjon Forord Kort systembeskrivelse Logisk datamodell Funksjonelle og ikke funksjonelle krav Utviklingsmetode og prioriteringsrekkefølge Krav til dokumentasjon Hvilket utviklingsverktøy og teknologi som benyttes [B] - Use Case Beskrivelse [C] - Språk og teknologier Språk / Rammeverk / Utvidelser Dokumentasjon og prosjekthåndtering [D] - Kilder

4 IMPLEMENTERING Her skal jeg beskrive selve implementeringen av produktet, altså applikasjon, API og database. I denne fasen benyttet jeg alt som var planlagt i de foregående planleggingsfasene. PROSJEKT STRUKTUR : APPLIKASJON Android applikasjonen er bygd av flere ulike typer filer, som er delt opp i ulike mappesystemer og pakkesystemer. Java benyttes til å lage aktiviteter, adaptere, modeller, parsere og et interface mot serveren. XML brukes til å bestemme grafiske elementer, filer som holder verdier av ulike typer, og AndroidManifest.xml som inneholde essensiell informasjon om applikasjonen. Nedenfor er en liten oversikt over antall filer og grupperingen av dem. Filtype Antall Java 40 XML 32 4

5 Venstre: Her vises de fem ulike pakkene med all java filene. Høyre: Her er oppdelingen av de ulike ressursene. Drawable inneholder bilder og xml filer for grafiske elementer. Layout er xml filer som bestemmer hvordan de ulike aktivitetene ser ut. Raw inneholder lydfiler. Values inneholder ulike stiler og engelsk tekst. Values-nb inneholder tekst på norsk. 5

6 JAVA Fildiagram for de 5 ulike pakkene. 6

7 AKTIVITETER Denne pakken inneholder alle applikasjonens «Activity» filer. Disse aktivitetene er ansvarlig for brukergrensesnittet, og er koblet til en layout. I disse filene deklareres også alle knapper og får sin OnClickListener. Alle aktivitetene extends Activity, utenom MapActivity og CustomMapFragment. MapActivity extends FragmentActivity som benytter seg av CustomMapFragment som er en SupportMapFragment. Diagram som viser livssyklusen til en Android aktivitet[16]. [16] 7

8 ADAPTER Pakken inneholder adaptere som konverterer lister med data til en liste med Views, som vises gjennom UI. Vanlig ArrayAdapter er begrenset ved at den kun mapper tostring() til et view i rad layouten. Jeg benytter BaseAdapter, som lar meg lage en egendefinert adapter tilpasset mine data. Diagram hentet fra blogg[17]. SERVER INTERFACE Server interface pakken inneholder kun en fil, ServerInterface.java. Denne inneholder metoder for å hente data fra server. Metodene returnerer java objekter som representerer data parsed fra serverens JSON respons. Øverst i filen oppretter jeg stringer som inneholder URL til hver av php filene på serveren. SERVER INTERFACE MODEL Pakke med modell klasser. Her defineres klassens attributter, med set og get metoder SERVER INTERFACE PARSER Klassene i server_interface_parser er ansvarlige for å parse serverens respons fra API kallet. Her konverteres serverens JSON respons til et java objekt som vil være lettere å jobbe med når man skal prosessere og vise frem dataene. [17] 8

9 XML DRAWABLE Inneholder xml filer som setter rammene for hvordan et grafisk element skal se ut. Slik skal en knapp se ut: Setter form og farge. <shape xmlns:android=" android:shape="rectangle" > <solid android:color="#acd1e9" /> <stroke android:color="#6d929b" android:width="1dp"/> <corners android:bottomleftradius="5dp" android:bottomrightradius="5dp" android:topleftradius="5dp" android:toprightradius="5dp" /> </shape> Slik skal en knapp se ut når man trykker på den: Endrer fargen. <shape xmlns:android=" android:shape="rectangle" > <solid android:color="#dddd44" /> <stroke android:color="#000000" android:width="1dp"/> <corners android:bottomleftradius="5dp" android:bottomrightradius="5dp" android:topleftradius="5dp" android:toprightradius="5dp" /> </shape> Knappen til venstre blir trykket på, og endrer farge på ramme (stroke) til sort og innhold (solid) til gult. 9

10 LAYOUT Layoutene definerer den visuelle strukturen for brukergrensesnittet. Denne blir hentet inn i tilhørende activity fil : setcontentview(r.layout.activity_map); Jeg har hovedsakelig benyttet LinearLayout som arrangerer elementene i en enkel kolonne. Disse filene inneholder: TextView som inneholder tekst <TextView android:id="@+id/title_text" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:paddingbottom="8dp" android:paddingtop="8dp" android:text="@string/add_price_activity_title" android:textcolor="#ffffff" android:textsize="20sp" /> TextView er markert i rødt. 10

11 EditText som er felter for input av tekst. <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingright="5dp" android:singleline="true" /> EditText er markert i rødt. Knapper <Button android:id="@+id/button_select_store" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margintop="5dp" android:background="@drawable/button_selector" android:paddingbottom="7dp" android:paddingtop="7dp" android:text="@string/activity_add_price select_store" /> Hvordan knappene ser ut blir bestemt av :backround, som peker til xml filen i drawable som setter farger og form. Teksten blir satt av :text, som peker streng. 11

12 VALUES Inneholder strings.xml, som setter alle strenger med navn og innhold. Den som ligger i values inneholder den engelske versjonen, og den som ligger i values-nb inneholder den norske versjonen. <string name="activity_store_details name">name:</string> <string name="activity_store_details street_name">street name:</string> <string name="activity_store_details zip_code">zip code:</string> <string name="activity_store_details latitude">latitude:</string> <string name="activity_store_details longitude">longitude:</string> <string name="activity_store_details opening_hours">opening hours:</string> <string name="activity_store_details save">save</string> <string name="activity_store_details create">create</string> <string name="activity_store_details get_location">get location usinggps</string> <string name="activity_store_details name">navn:</string> <string name="activity_store_details street_name">gatenavn:</string> <string name="activity_store_details zip_code">postnummer:</string> <string name="activity_store_details latitude">breddegrad:</string> <string name="activity_store_details longitude">lengdegrad:</string> <string name="activity_store_details opening_hours">åpningstider:</string> <string name="activity_store_details save">lagre</string> <string name="activity_store_details create">opprett</string> <string name="activity_store_details get_location">skaff GPSkoordinater.</string> På denne måten kan man legge til de språk man ønsker. Applikasjonen ser på enhetens språkinstilling og velger tilhørende values mappe hvis den finnes (eks. values-fr : Fransk, values-ja : Japansk), ellers blir strings.xml fra values benyttet. Jeg har valgt å lagre strengene i values mappen på engelsk, slik at hvis brukerens enhet ikke er instillt på norsk, vil språket bli satt til engelsk. 12

13 ANDROIDMANIFEST.XML Denne filen må alle android applikasjoner ha i rot-nivået på mappestrukturen. Manifest filen gir essensiell informasjon om applikasjonen til Android-enheten. Den inneholder Java package navn, som er en unik identifikasjon: <manifest xmlns:android=" package="com.steole.pris" android:versioncode="1" android:versionname="1.0" > Den deklarerer de ulike aktivitetene: <activity android:name="com.steole.pris.splashactivity" android:configchanges="screensize orientation" android:screenorientation="portrait" android:label="@string/main_menu_activity_title" > <intent-filter> <action android:name="android.intent.action.main" /> <category android:name="android.intent.category.launcher" /> </intent-filter> </activity> <activity android:name="com.steole.pris.mainactivity" android:configchanges="screensize orientation" android:label="@string/products_activity_title" > </activity> Den deklarerer de ulike tilatelsene (permissions) applikasjonen benytter seg av: <uses-permission android:name="android.permission.internet" /> <uses-permission android:name="android.permission.access_fine_location" /> <uses-permission android:name="android.permission.access_coarse_location" /> <uses-permission android:name="android.permission.access_network_state" /> <uses-permission android:name="android.permission.internet" /> <uses-permission android:name="android.permission.write_external_storage" /> <uses-permission android:name="com.google.android.providers.gsf.permission.read_gservices" /> Og den inneholder en API nøkkel hentet fra code.google.com/apis/console/ som trengs for å benytte google maps. <meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version" /> <meta-data android:name="com.google.android.maps.v2.api_key" android:value="aizbsydms3pj2c0agxu7jjchd2nqmwvu_l04uau" /> 13

14 HVER ENKELT DEL AV PROGRAMMET I denne delen vil jeg ta for meg hver enkelt del av applikasjonen. Der hver hovedfunksjonalitet starter, vil jeg vise strukturen i navigasjonen. INTROSKJERM Når bruker åpner applikasjonen, vises denne introskjermen og det spilles av en lydfil. Denne skjermen varer i ett sekund, før meny aktiviteten vises. songintro = MediaPlayer.create(SplashActivity.this, R.raw.intro); songintro.start(); 14

15 HOVEDMENY Dette er meny aktiviteten som gir tilgang til all funksjonalitet. Hver knapp åpner en ny aktivitet (Avslutt stenger ned applikasjonen). Det benyttes en onclick for å bestemme hva som skjer når en knapp trykkes. public void onclick(view v) { if (v == mproductsbutton) { Intent productsintent = new Intent(this, ProductsActivity.class); startactivity(productsintent); } else if (v == mbarcodebutton) { launchbarcodescanner(); } else if (v == mexitbutton) { ondestroy(); finish(); System.exit(0); } 15

16 PRODUKT FUNKSJONALITET Produkter Liste med Produkter Opprett Produkt Produkt Detaljer Se Prisutvikling Oppdater Produkt 16

17 PRODUKTER Når man trykker på «Produkter» i menyen kommer man til denne skjermen. Her lastes automatisk 20 produkter og legges inn i listen. Når man skroller ned til bunnen av listen vises knappen «Last flere» som laster inn 20 flere produkter. Toppen av listen viser hvor mange produkter som ligger i databasen. Viser: Alle (49) private void manageloadbuttonvisibility() { if (mlastitemvisible && mcurrentdata!= null && mcurrentdata.getitems().size() < mcurrentdata.getallitemscount()) { mbuttonloadmore.setvisibility(view.visible); } else { mbuttonloadmore.setvisibility(view.invisible); } } Denne kodesnutten setter knappen usynlig, men når nederste element i listen vises, blir knappen synlig. Har man søkt på et produkt, kan man alltids trykke på «Alle» for å få tilbake den opprinnelige listen med alle produktene. 17

18 Trykker man på «På navn» vises en dialog hvor man kan skrive inn produktet man ønsker å finne. Det er laget slik at man kan skrive inn deler av navnet. Skriver man for eksempel «cola», får man opp alle produktene som inneholder cola. Her ser vi det er registrert to produkter. Hva man har søkt på og antall funn vises i toppen av listen. Har man ikke internett tilkobling når man forøker å vise data, vises en feilmelding i en «toast». Slik at brukeren får opplysning om hva som er feil. «Kan ikke skaffe data. Sjekk internett tilkobling og prøv igjen». public void run() { Toast.makeText(c, message, Toast.LENGTH_LONG).show(); } Varigheten på en slik melding er 3.5 sekund. Trykker man på et produkt i listen får man opp «Produkt Detaljer». 18

19 PRODUKT DETALJER Når man har funnet det produktet man ønsker å se på, får man opp «Produkt Detaljer». Her kan man endre på registrerte data (Navn, Beskrivelse og Barkode), og «Oppdatere:». Er oppdateringen vellyket får man opp en toast «Oppdatering vellykket». Om man ikke ønsker å skrive inn koden manuelt kan man trykke «Skan barkode», som åpner skanneren. Ønsker man å se hvordan prisene har utviklet seg for det valgte produktet trykker man på «Se prisutvikling». Da åpnes et grafisk vindu «Prisutvikling» som viser hvordan prisene har endret seg. De ulike butikkene er representert med ulike farger, og navnet på butikken vises i ruten. GraphViewSeries storeseries = new GraphViewSeries(storeName, new GraphViewSeriesStyle(Color.rgb(255*(i%2), 0, 255*(1-(i%2))), 3), graphviewdataarraylist.toarray(new GraphViewData[0])); graphview.addseries(storeseries); graphview.setshowlegend(true); graphview.setscalable(true); graphview.setlegendalign(legendalign.middle); graphview.setlegendwidth(400); Her settes dataene og egenskapene for visningen av GraphView. 19

20 OPPRETT PRODUKT Ønsker man å registrere et nytt produkt i databasen, går man inn på «Produkter» fra menyen (eller tilbake fra «Prisutvikling» eller «Produkt Detaljer») og trykker på «Pluss» knappen øverst til høyre. Da kommer man til «Opprett Produkt». Her skriver man inn Navn, Beskrivelse og Barkode. Trykker man på «Skan barkode» slipper man å skrive inn manuelt, og kan skanne barkoden på produktet. Her kreves det at når man registrerer et nytt produkt må både Navn og Barkode være skrevet inn. Beskrivelsen er frivillig. Forsøker man å registrere uten de nødvendige feltene får man opp en toast med tilhørende feilmelding. 20

21 BUTIKK FUNKSJONALITET Butikker Liste med Butikker Butikk Detaljer Opprett Butikk Oppdater Butikk Skaff GPS Koordinater 21

22 BUTIKKER «Butikker» fungerer på samme måte som «Produkter». Når man trykker på «Butikker» knappen i menyen, vises en liste med de 20 første butikkene i databasen. Antall butikker registrert i databasen. Trykker man «På navn» får man mulighet til å søke etter en butikk på navn, der man kan skrive hele eller deler av navnet. Trykker man på en butikk i listen åpnes «Butikk Detaljer» (beskrevet lengre ned). Har man ikke internett tilkobling vises en toast med feilmelding. Trykker man på [+] pluss knappen øverst til høyre åpnes «Opprett Butikk» aktiviteten. 22

23 OPPRETT BUTIKK Her skriver man inn data om butikken man skal registrere. Jeg har valgt å ha Navn, Gatenavn, Postnummer og Butikkjede som obligatoriske felt. Jeg mener dette er minstekravet til nødvendig informasjon, om dataene skal ha verdi. Jeg ønsker ikke å tvinge brukeren til å registrere breddegrad og lengdegrad da det finnes Android enheter uten GPS. Dette skjermbildet inneholder mange felter for input, og er derfor lengre enn de andre aktivitetene. Dette fører til at man må skrolle ned for å finne knappene, som ikke er helt optimalt. 23

24 Prøver man å trykke på feltene Breddegrad eller Lengdegrad vil man få opp en feilmelding: «Kan ikke settes manuelt, benytt knappen Skaff GPS koordinater». Jeg har gjort det slik, da jeg ønsker at GPS posisjonene skal være så nøyaktig som mulig, slik at butikk-ikonene blir plassert på riktig sted på kartet. Trykker man «Skaff GPS koordinater» sjekker applikasjonen om enhetens GPS er påslått, er den ikke det får man opp en dialog som spør om du ønsker å slå den på nå. Etter dette er utført vises en loadingdialog mens posisjonen hentes «Skaffer GPS posisjon..». public void onlocationchanged(location location) { } if (location.getaccuracy() < LOCATION_ACCURACY_METERS) { stoplocationupdates(); progressdialog.dismiss(); mlatitudeedit.settext("" + location.getlatitude()); mlongitudeedit.settext("" + location.getlongitude()); } Denne metoden setter Latitude og Longitude når treffsikkerheten på den eksakte posisjonen er innenfor 100 meter. 24

25 Når man skal velge butikkjede og postnummer får man opp lister med alternativer. Butikkjedene er hardkodet i aktiviteten og postnummer er hentet fra databasen. De ulike butikkjedene burde også vært hentet fra databasen, eller fra en xml fil, men jeg fikk ikke nok tid til å benytte en bedre løsning. Ved å sette butikkjede bestemmes også hvilket ikon som skal vises på kartet. I FoodChainListAdapter settes butikker, og navnet på ikonet. Ikonene ligger lagret på webserveren. public static final String[] sfoodchainlist = { "Rimi", "Joker", "Kiwi","Bunnpris", "Rema 1000", "Ultra", "Ica","Spar", "Coop Prix" }; public static final String[] sstoreiconnames = { "rimi.png", "joker.png", "kiwi.png", "bunnpris.png","rema_1000.png", "ultra.png", "ica.png", "spar.png", "coop_prix.png" }; Når man oppretter en butikk i ServerInterfacet: if (iconurl!= null) { iconurl = URLEncoder.encode(ICON_BASE_URL + iconurl, "UTF-8"); } Tanken bak postnummer er å ha muligheten for å implementere funksjonalitet for å søke på butikker på en gitt kode, på et senere tidspunkt. 25

26 BUTIKK DETALJER Trykker man på en butikk i listen (i aktiviteten Butikker) får man opp «Butikk Detaljer». Her kan man endre på informasjonen som er lagret. } else { mnameedit.settext(mstoremodel.getname()); mstreetnameedit.settext(mstoremodel.getstreetname()); mzipcodeedit.settext(mstoremodel.getzipcode()); if (mstoremodel.getlatitude()!= null) mlatitudeedit.settext("" + mstoremodel.getlatitude()); if (mstoremodel.getlongitude()!= null) mlongitudeedit.settext("" + mstoremodel.getlongitude()); if (mstoremodel.getfoodchaingroup()!= null) mfoodchaingroupedit.settext("" + mstoremodel.getfoodchaingroup()); if (mstoremodel.getopeninghours()!= null) mopeninghoursedit.settext("" + mstoremodel.getopeninghours()); } mpostid = mstoremodel.getpostid(); 26

27 PRIS FUNKSJONALITET Velg Butikk Priser Velg Produkt Opprett ny Pris Se Nåværende Pris 27

28 PRISER Trykker man på knappen Priser i menyen, åpnes aktiviteten «Priser». Her er det to bokser, som gir mulighet for å velge en kombinasjon av butikk og produkt. Trykker man på «Velg butikk» / «Velg produkt» åpnes «Butikker» / «Produkter» aktiviteten seg, og der velger man fra listen. Når man har valgt en Butikk og Produkt kombinasjon kan man trykke på «Nåværende» knappen i Pris: boksen. Da lastes den nyeste prisen fra databasen. Er man i butikken og ser at nåværende pris ikke stemmer overens med den prisen som er på hylla, kan man skrive inn korrekt pris og trykke «Opprett ny». Den nye prisen overskriver ikke den gamle, men oppretter en ny med dato og klokkeslett. På denne måten kan man enkelt bruke prisdataene til å få en oversikt over hvordan prisene endres over tid. 28

29 SKANNER FUNKSJONALITET Når man trykker på «Skan Barkode» i menyen. Skan Barkode Produkt Detaljer Se Prisoversikt Oppdater Produkt 29

30 SKAN BARKODE Når man er i menyen og trykker på «Skan barkode» eller andre steder i applikasjonen hvor man skal skanne barkoder (Produkter : Filtrer på barkode, Opprett Produkt : Skan Barkode, Produkt Detaljer : Skan barkode) åpnes skanneren fra Zxing. Er ikke denne installert åpnes en dialog som spør om brukeren ønsker å installere denne nå. Trykkes det på ja, åpnes «Barcode Scanner : ZXING TEAM» rett i Google Play Store. private List<ResolveInfo> queryforavailableapps(intent intent) { PackageManager manager = getpackagemanager(); return manager.queryintentactivities(intent, 0); } Liste med applikasjoner som kan åpnes gjennom intent private void launchbarcodescanner() { Intent scanintent = new Intent("com.google.zxing.client.android.SCAN"); scanintent.putextra(mode, ONE_D_BARCODE_SCAN_MODE); if (queryforavailableapps(scanintent).size() > 0) { startactivityforresult(scanintent, REQUEST_CODE_SCAN); } else { malertdialog = MainActivity.showBarcodeScannerNotInstalledDialog(this); } } Prøver å åpne zxing scanner, er den ikke installert vises dialog for installasjon. 30

31 Slik ser «Barkode Scanner» ut. Den benytter seg av enhetens kamera, og leter etter mønsteret til en barkode. Finner den et produkt, hentes barkoden og returneres til Pris++ applikasjonen. Skanner man et produkt fra menyen sjekkes det om et produkt er registrert i databasen med denne barkoden. Finnes produktet vises «Produkt Detaljer» med skannet produkt. Ellers vises en toast som sier produktet ikke er registrert. Når man skanner produkter ellers (Produkter : Filtrer på barkode, Opprett Produkt : Skan Barkode, Produkt Detaljer : Skan barkode), legges barkoden i tekstfeltet. 31

32 HANDLELISTE FUNKSJONALITET Handleliste Legg til Produkter Sammenlign Totalsum Totalsum 32

33 HANDLELISTE Er man i menyen og trykker Handleliste åpnes denne aktiviteten. Denne øverste knappen «Legg til produkt i handleliste» åpner «Produkter» aktiviteten, hvor man velger ønsket produkt fra listen. Valgt produkt blir da lagt inn i Handlelisten, og man kan enten endre antall man skal kjøpe, eller slette den fra lista med [-] knappen. EditText er programmert slik at man kun kan registrere tall, dette gjør at det vanlige qwerty tastaturet blir byttet ut med et «Talltastatur». Dette gjør det enklere og mer brukervennlig. Man kan legge til så mange produkter man ønsker, og når man er ferdig trykker man på «Sammenlign totalsum». Dette vil åpne neste aktivitet «Handleliste Priser». 33

34 HANDLELISTE PRISER Denne listen viser hva totalsummen blir for alle produktene i handlelisten i de ulike butikkene. Listen vil kun vise butikker som har alle varene og registrert pris. Butikkene blir sortert fra billig til dyr. Ønsker man å handle i en av butikkene, kan man trykke på den i listen. Dette åpner «Butikk Detaljer» aktiviteten, slik at man kan finne GPS koordinater, addresse og åpningstider til valgt butikk. 34

35 KART Velger man «Kart» i menyen sjekker enheten om GPS er skrudd på. Er den ikke det vises en dialogboks som spør om bruker ønsker å aktivere GPS nå. Trykker bruker ja, åpnes enhetens instillinger «Plasseringstjenester». Her kan GPS-satellitter aktiveres. Når GPS er påskrudd, vises en loadingdialog «Skaffer GPS posisjon...». Denne kan brukeren avbryte om enheten ikke greier å innhente en nøyaktig GPS posisjon. 35

36 Når GPS-posisjon er innhentet vises enhetens plassering på kartet. Butikker som er registrert med en avstand innenfor 5km radius, vil vises på kartet med ikoner. Jeg har valgt å kun vise butikker innenfor en gitt radius, da dette kan spare brukeren for mobildata. Skalerer ned ikonet til riktig størrelse. if (bitmapdata!= null) { Bitmap bitmap = BitmapFactory.decodeByteArray(bitmapData, 0, bitmapdata.length); float scalefactor = getresources().getdisplaymetrics().densitydpi/240.0f; bitmap = Bitmap.createScaledBitmap(bitmap, (int)(bitmap.getwidth() * scalefactor), (int)(bitmap.getheight() * scalefactor), true); if (bitmap!= null) { final BitmapDescriptor bd =BitmapDescriptorFactory.fromBitmap(bitmap); if (bd!= null) { runonuithread(new Runnable() public void run() { marker.seticon(bd); } }); } } } 36

37 TILBUDSAVIS FUNKSJONALITET Tilbudsavis Velg Butikk PDF Visning Tilbudsavis 37

38 TILBUDSAVIS Velger man Tilbudsavis fra menyen vises en liste med butikkjeder. Når man velger en av butikkene vises deres tilbudsavis. String liststore = FoodChainListAdapter.sFoodChainList[which]; Intent i = new Intent(getApplicationContext(), SaleMagasineActivity.class); i.putextra("store", liststore); startactivity(i); Fra listen lages en string med butikk navn, denne strengen sendes gjennom et intent til aktviteten som skal vise pdf filen. Intent intent = getintent(); String liststore = intent.getextras().getstring("store"); I «Tilbudsavis» Aktiviteten hentes denne strengen, og åpner et WebView med fullstendig URL. 38

39 String GoogleDocs = " webview.setwebviewclient(new WebViewClient() public boolean shouldoverrideurlloading(webview view, String url) { progdailog.show(); view.loadurl(url); return true; public void onpagefinished(webview view, final String url) { progdailog.dismiss(); } }); webview.loadurl(googledocs + " + liststore + ".pdf"); Her vises tilbudsavisen til Rimi i WebView. Her er det mulighet for å zoome inn og ut, og bla mellom de ulike sidene. 12 siders pdf som tar fire sekunder å laste ned på min telefon. 39

40 PROSJEKT STRUKTUR : API API for kommunikasjon med databasen er bygd av 13 PHP filer, som er delt opp i fire ulike «typer», common, create, get og update. PHP filene inneholder MySQL spørringer for registrering, henting og oppdatering av data. 40

41 COMMON Denne filen inneholder informasjon for tilkobling til databasen, som alle andre filer inkluderer (forhindrer unødig duplisering av kode). <?php?> $mysqlserver = 'localhost'; $mysqlusername = 'steole'; $mysqlpassword = 'UMrLvjmuKtv6vtWA'; $mysqldatabasename = 'pris_database'; CREATE Create filene inneholder kode for å sette inn data i databasen. $insertstmt = "INSERT INTO Product (barcode, name, description) values". " ('". $escapedbarcode. "', '". $escapedname. "', ". $escapeddescription. ")"; $success = mysqli_query($con, $insertstmt); if ($success){ $out["product_id"] = mysqli_insert_id($con); } else{ $out["error_message"] = "Insert failed."; } 41

42 GET Get filene inneholder kode for å hente ut data fra databasen. if (is_null($name) && is_null($barcode)){ $selectstatement = "SELECT * FROM Product WHERE 1 ORDER BY name ASC LIMIT ". $escapedpage*$escapedpagesize. ",". $escapedpagesize; } else if (!is_null($name)){ $escapedname = mysqli_real_escape_string($con, $name); $selectstatement = "SELECT * FROM Product WHERE name LIKE '%". $escapedname. "%' ORDER BY name ASC LIMIT ". $escapedpage*$escapedpagesize. ",". $escapedpagesize; } else{ $escapedbarcode = mysqli_real_escape_string($con, $barcode); $selectstatement = "SELECT * FROM Product WHERE barcode = '". $escapedbarcode. "' ORDER BY name ASC LIMIT ". $escapedpage*$escapedpagesize. ",". $escapedpagesize; } $result = mysqli_query($con, $selectstatement); UPDATE Update filene inneholder kode for å oppdatere data som allerede er registrert i databasen. $updatestmt = "UPDATE Store SET name='". $escapedname. "', streetname='". $escapedstreetname. "', post_id=". $escapedpostid. ", latitude=". $escapedlatitude. ", longitude=". $escapedlongitude. ", foodchain_group=". $escapedfoodchaingroup. ", opening_hours=". $escapedopeninghours. ", icon_url=". $escapediconurl. " WHERE id=". $escapedid; $success = mysqli_query($con, $updatestmt); if ($success){ } else{ } $out["store_id"] = $id; $out["error_message"] = "Update failed."; 42

43 PROSJEKT STRUKTUR : DATABASE Liten forklaring på Fremmednøkkelbegrensning som blir nevnt lengre ned: Gjør det umulig å ha rader i en tabell som peker til slettede rader i en annen tabell. Databasen inneholder fire tabeller : POST - Tabellstruktur : Post Denne tabellen inneholder primærnøkkelen : id. Ingen fremmednøkklbegrensning er valgt. Disse dataene er lagret i phpmyadmin, og det er ikke mulig å opprette/endre/slette postnummer i applikasjonen. Man kan kun hente dataene. Relasjonsvisning: Post 43

44 PRICE Tabellstruktur : Price Eksempel på priser jeg har lagret i tabellen Price ved hjelp av Pris++ på min telefon. 44

45 Relasjonsvisning: Price Her er primærnøkkelen : id. Jeg har satt fremmenøkkelbegrensningen med: Produkt sin id, og Butikk sin id, slik sikrer man dataenes integritet. Dette betyr at man ikke kan slette et produkt eller en butikk, hvis det finnes en pris som er registrert i denne butikken eller med dette produktet. 45

46 PRODUCT- Tabellstruktur: Product Eksempel på produkter jeg har lagret i tabellen Product ved hjelp av Pris++ på min telefon. Relasjonsvisning : Product Primærnøkkel : id. Ingen Fremmednøkkelbegrensning satt. 46

47 STORE- Tabellstruktur : Store. Eksempel på butikker jeg har lagret i tabellen Store ved hjelp av Pris++ på min telefon. URL til ikonene blir satt når man velger «Butikkjede» (foodchain_group), i aktiviteten «Opprett Butikk». 47

48 Relasjonsvisning : Store Primærnøkkel : id. Her er det satt Fremmenøkkelbegrensning på post_id. Slik at man ikke kan slette et postnummer fra databasen, hvis det finnes en butikk med dette postnummeret registrert i databasen. 48

49 VEDLEGG [A] - KRAVSPESIFIKASJON KRAVSPESIFIKASJON Tittel: Pris++ Oppgave: Utvikle en Android applikasjon med tilhørende databasesystem. Periode: 1. Januar til 11. Juni. Prosjektgruppe: 27 Prosjektmedlem: Ole Almenning Stenhaug Veileder. Torunn Gjester, Høgskolelektor på Fakultet for teknologi, kunst og design Oppdragsgiver: Høgskolen i Oslo og Akershus Pilestredet 35, Oslo 49

50 Innholdsfortegnelse Forord... 1 Kort systembeskrivelse... 1 Logisk datamodell (hovedoppgave)... 2 Funksjonelle og ikke funksjonelle krav... 3 Utviklingsmetode og prioriteringsrekkefølge... 5 Krav til dokumentasjon... 5 Hvilket utviklingsverktøy og teknologi som benyttes

51 FORORD Dette dokumentet skal fungere som en rød tråd for gjennomføring av hovedprosjekt og er et av styringsdokumentene. I dette dokumentet er det beskrevet flere sider av produktet som skal utvikles, samt viktige deler av utviklingsprosessen som metodikk og enkelte rammebetingelser. KORT SYSTEMBESKRIVELSE En søkbar database som inneholder pris og registrert geografisk lokasjon på butikker. For at denne databasen skal gi verdi er det svært viktig hvilken metadata som registreres og hvordan dette så presenteres. For registrering av pris- og vareinformasjon skal det utvikles en Android applikasjon som brukerne kan benytte. For å gjøre det brukervennlig skal man for eksempel kunne skanne barkodene ved hjelp av mobilens kamera. Brukere kan altså registrere nye varer og systemet er dermed basert på brukernes egen innsats. 51

52 LOGISK DATAMODELL Figuren over illustrerer følgende: Øverst til venstre er databasen som er tenkt i MySQL eller tilsvarende. I midten er PHP som tar seg av kontakt med databasen. Nederst er mobilapplikasjonen (Android) som benytter JSON mot PHP. Øverst til høyre er HTML for å kunne lage nettside som presenterer informasjon fra databasen. Her vurderes det også å opprette en administrasjonsmulighet for innholdet i databasen. 52

53 FUNKSJONELLE OG IKKE FUNKSJONELLE KRAV FUNKSJONELLE KRAV All brukere skal kunne søke etter informasjon i databasen, som da skal vises i applikasjonen. Alle brukere skal kunne opprette og oppdatere data i databasen. Ved registrering av ny butikk, skal man trykke på en knapp i applikasjonen for å hente lengde og breddegrader (GPS posisjon). Det skal kunne benyttes en barkode-skanner for å skanne varer Skanner man en vare som allerede er i databasen, skal man få opp en oversikt over priser i de ulike kjedene, og en statistisk oversikt (gjerne grafisk) over prisutviklingen. Brukeren skal kunne lage en handleliste, og få en oversikt over hvilken butikk som gir lavest totalpris på disse varene i mobilapplikasjonen Brukeren skal kunne få opp et kart med sin posisjon, og oversikt over butikker i nærområdet Brukeren skal kunne se butikkenes tilbudsavis i mobilapplikasjonen En nettside som enkelt presenterer aggregerte data fra databasen Innlogging i applikasjon. Ha et administrasjonssystem for å administrere registrert data 53

54 IKKE-FUNKSJONELLE KRAV Kildekoden skal være ryddig, strukturert, kommentert og optimalisert Applikasjon utvikles i JAVA og XML Databasekommunikasjon skal skrives i PHP Databasespørringer skal benytte MySQL JSON skal benyttes for å overføre data til og fra Android enhet. Programmering skal gjøres på engelsk God responstid på mobilapplikasjonens lokale aktiviteter, i snitt under 0,5 sekund God responstid på mobilapplikasjonen ved spørring i databasen, i snitt under 1 sekund er ønskelig Koden skal være objektorientert Applikasjonen skal fungere på både mobil og nettbrett med ulike skjermoppløsninger Enkelt og intuitivt brukergrensesnitt, som krever minimal veiledning for brukeren. Farger i applikasjonen skal ha god kontrast, og tilrettelagt fargeblinde. Applikasjonen skal ha flere språk (Norsk, Engelsk) Databasemodellen skal ha normalform. Databasedesign skal være oversiktelig Ved bruk av applikasjonen, skal funksjonene (hente, opprette, oppdatere data) ha lavt mobildatabruk. Applikasjonen skal gi brukeren informasjon og feilmeldings dialoger, når dette er naturlig. 54

55 UTVIKLINGSMETODE OG PRIORITERINGSREKKEFØLGE Det skal benyttes smidig utvikling i dette prosjektet, da benyttes enten «scrum» eller «extreme programming». Dette er utviklingsmetodikk som er bra i forhold til å kunne løse eventuelle endringer, noe som forventes å blir aktuelt for denne type hovedoppgave hvor det er en ide og funksjoner som hovedsakelig er gjengelig i starten. Kjernen i systemet er databasen og mobilapplikasjonen, dette blir dermed det som er tenkt utgangspunkt for den første sprinten. Prioritering utover dette avgjøres fortløpende ved gjennomføring, og hvor det som er vist under logisk datamodell med en mengde funksjonalitet er tenkt gjennomført som del av denne hovedoppgaven. KRAV TIL DOKUMENTASJON Som en del av prosjektet skal det dokumenteres underveis. Prosessdokumentasjon er en vesentlig del av prosjektet og hva som skal leveres ved prosjektets avsluttning. HVILKET UTVIKLINGSVERKTØY OG TEKNOLOGI SOM BENYTTES Eclipe IDE med ADT plugin, siste versjon. Java versjon 1.7 (7) PHP 5.5 JavaScript (JSON) MySQL Windows 8.1 eller Ubuntu på utviklingsmaskinene 55

56 [B] - USE CASE BESKRIVELSE SE PRODUKTER Aktør: Bruker Mål: Se produkter Oppsummering: Se liste med produkter fra databasen. Pre-betingelser: Det er registrerte produkter i databasen. Android enheten har internett tilkobling. Hendelsesforløp: 1. Bruker velger «Produkter» i hovedmeny. 2. Får automatisk opp liste med produkter FILTRER PRODUKTER ETTER NAVN Aktør: Bruker Mål: Filtrere produkter på navn Oppsummering: Filtrere produktene i listen på navn Pre-betingelser: Det er registrerte produkter i databasen. Android enheten har internett tilkobling. Hendelsesforløp: 1. Bruker velger «Produkter» i hovedmeny. 2. Trykker på knappen «På navn» 3. Skriver inn hele eller deler av navnet han ønsker filtrere på 4. Får automatisk opp liste med produkter FILTRER PRODUKTER ETTER BARKODE Aktør: Bruker Mål: Filtrere produkter på barkode Oppsummering: Filtrere produktene i listen på barkode Pre-betingelser: Det er registrerte produkter i databasen. Android enheten har internett tilkobling. Android enheten har installert Zxing Barcode Scanner Hendelsesforløp: 1. Bruker velger «Produkter» i hovedmeny. 2. Trykker på knappen «På barkode» 3. Er ikke Zxing installert, åpnes dialogboks som spør om bruker vil installere den nå. 4. Zxing åpnes, og bruker skanner ønsket barkode 5. Får automatisk opp liste med produkt med denne barkoden FJERN FILTRERING : PRODUKT Aktør: Bruker Mål: Vise alle produkter i listen Oppsummering: Fjerne filtreringen som er gjort. Pre-betingelser: Det er allerede filtrert på enten navn eller barkode Android enheten har internett tilkobling. Hendelsesforløp: 1. Bruker har filtrert på navn eller barkode. 2. Trykker på «Alle». 3. Filtrering fjernes, og listen vises automatisk. 56

57 REGISTRER PRODUKT Aktør: Bruker Mål: Registrere nytt produkt Oppsummering: Registrere nytt produkt i databasen. Pre-betingelser: Android enheten har internett tilkobling. Det finnes ikke et produkt i databasen med denne barkoden. Hendelsesforløp: 1. Bruker velger «Produkter» i hovedmeny. 2. Trykker på knappen «+» 3. Fyller inn feltene Navn, Beskrivelse (frivillig), Barkode. 4. Ønsker bruker å skanne barkoden, trykkes «Skan barkode» 5. Trykker på «Opprett» 6. En toast vises, som sier om registreringen var vellykket eller ikke. SE BUTIKKER Aktør: Bruker Mål: Se butikker Oppsummering: Se liste med butikker fra databasen. Pre-betingelser: Det er registrerte butikker i databasen. Android enheten har internett tilkobling. Hendelsesforløp: 1. Bruker velger «Butikker» i hovedmeny. 2. Får automatisk opp liste med butikker FILTRER BUTIKKER ETTER NAVN Aktør: Bruker Mål: Filtrere butikker på navn Oppsummering: Filtrere butikkenee i listen på navn Pre-betingelser: Det er registrerte butikker i databasen. Android enheten har internett tilkobling. Hendelsesforløp: 1. Bruker velger «Butikker» i hovedmeny. 2. Trykker på knappen «På navn» 3. Skriver inn hele eller deler av navnet han ønsker filtrere på 4. Får automatisk opp liste med butikker FJERN FILTRERING : BUTIKK Aktør: Bruker Mål: Vise alle butikker i listen Oppsummering: Fjerne filtreringen som er gjort. Pre-betingelser: Det er allerede filtrert på navn Android enheten har internett tilkobling. Hendelsesforløp: 1. Bruker har filtrert på navn. 2. Trykker på «Alle». 3. Filtrering fjernes, og listen vises automatisk. 57

58 REGISTRER BUTIKK Aktør: Bruker Mål: Registrere ny butikk Oppsummering: Registrere ny butikk i databasen. Pre-betingelser: Android enheten har internett tilkobling. Må ha GPS om butikk skal registreres med gps posisjon. Hendelsesforløp: 1. Bruker velger «Butikker» i hovedmeny. 2. Trykker på knappen «+» 3. Fyller inn feltene Navn, Gatenavn, Postnummer, Butikkjede, Åpningstider (frivillig), GPS koordinater (frivillig) 4. Ønsker bruker å registrere med gps posisjon, trykker han på «Skaff GPS koordinater». 5. Er ikke GPS aktivert, vises dialog som spør om han ønsker å gjøre dette nå. 6. Trykker på «Opprett» 7. En toast vises, som sier om registreringen var vellykket eller ikke. OPPRETT PRIS Aktør: Bruker Mål: Registrere ny pris i databasen. Oppsummering: Lagre en ny pris, med kombinasjon av butikk og produkt. Pre-betingelser: Produkt og Butikk må være registrert fra før. Android enheten har internett tilkobling. Hendelsesforløp: 1. Trykker på «Priser» i hovedmenyen. 2. Trykker på «Velg butikk», da åpnes listen med butikker. 3. Velger butikken prisen hører til i listen. 4. Trykker på «Velg produkt», da åpnes listen med produkter. 5. Velger produktet prisen hører til i listen. 6. Skriver inn prisen i feltet «Pris» 7. Trykker «Opprett ny», prisen lagres automatisk med dato og tidspunkt, slik at det blir mulig å se prisutvikling, og får melding om prisen ble registrert eller ikke. SE PRIS Aktør: Bruker Mål: Finne ut hva prisen er på et produkt i gitt butikk. Oppsummering: Se nåværende pris, med kombinasjon av butikk og produkt. Pre-betingelser: Pris må være registrert med gitt Produkt og Butikkr. Android enheten har internett tilkobling. Hendelsesforløp: 1. Trykker på «Priser» i hovedmenyen. 2. Trykker på «Velg butikk», da åpnes listen med butikker. 3. Velger butikken prisen hører til i listen. 4. Trykker på «Velg produkt», da åpnes listen med produkter. 5. Velger produktet prisen hører til i listen. 6. Trykker «Nåværende», og nyeste registrerte pris vises i «Pris» feltet. 58

59 SKAN BARKODE Aktør: Bruker Mål: Finne ut om et produkt er registrert i databasen, og vise informasjon om det. Oppsummering: Skanne barkode med enhetens kamera, er produktet registrert vises detaljer om Produktet, er det ikke registrert vises «Produkt er ikke registrert». Pre-betingelser: Android enheten har internett tilkobling. Hendelsesforløp: 1. Trykker på «Skan Barkode» i hovedmenyen. 2. Er ikke Zxing installert, åpnes en dialog som spør bruker om han ønsker installere det nå. 3. Skanneren åpnes, og bruker skanner barkode. 4. Barkoden blir sjekket opp mot databasen. 5. Er produktet registrert vises registrerte data om produktet. 6. Er produktet ikke registrert, vises «Produktet er ikke registrert». ÅPNE GOOGLE MAPS KART. Aktør: Bruker Mål: Åpne kart, som viser butikker i nærheten. Oppsummering: Vise Google Maps med butikker innenfor 5km med butikkens logo plassert på Butikkens GPS posisjon. Pre-betingelser: Android enheten har internett tilkobling. Android enheten har GPS. Hendelsesforløp: 1. Trykker på «Kart» i hovedmenyen. 2. Er ikke GPS påslått, åpnes en dialog som spør bruker om han ønsker aktivere det nå. 3. Applikasjonen finner brukerens GPS posisjon. 4. Google Maps åpnes med brukerens plassering i midten, og butikkene vises på kart. SE BUTIKKENS TILBUDSAVIS Aktør: Bruker Mål: Vise ønsket butikks tilbudsavis, for å finne ukens kupp. Oppsummering: Laste ned tilbudsavis i PDF format på enheten fra ønsket butikkjede. Pre-betingelser: Android enheten har internett tilkobling. Butikkens tilbudsavis finnes på server. Hendelsesforløp: 1. Trykker på «Tilbudsavis» i hovedmenyen. 2. Det vises en liste med butikkjeder, og brukeren velger en av dem. 3. PDF filen lastes inn i WebView gjennom Google Docs på enheten. 4. Kan bla frem og tilbake i avisen med piler [<-] og [->] 5. Kan zoome inn og ut, med knapper [-] og [+], eller dobbeltklikke på skjermen. AVSLUTT Aktør: Bruker Mål: Avslutte applikasjonen Oppsummering: Avslutte applikasjonen Pre-betingelser:Pris++ er startet Hendelsesforløp: 1. Trykker på «Avslutt» i hovedmenyen. 59

60 [C] - SPRÅK OG TEKNOLOGIER SPRÅK / RAMMEVERK / UTVIDELSER JAVA Java er et objektorientert programmeringsspråk skapt av James Gosling. I løpet av november 2006 valgte Sun Microsystems å frigi Javakoden som åpen kildekode. Java er det primære programmeringsspråket for utvikling av Android. Ved lansering var java det eneste støttede språket, men nå finnes det flere å velge i mellom. Java er det språket jeg har best kjennskap til, og har benyttet i faget «Innføring i App utvikling». XML XML (Extensible Markup Language) er et universelt og utvidbart markeringsspråk. XML organiserer data ved hjelp av en hierarkisk struktur, i tekstformat. Dette blir filer som er leselig for både maskiner og mennesker, der «tagger» beskriver hva innholdet er. I Android utvikling benyttes det til flere ting, blant annet Manifest, Layout, Strings, Styles og Drawable. PHP PHP er et dynamisk tolket programmeringsspråk som hovedsakelig brukes til å utvikle dynamiske nettsider. I mitt prosjekt har jeg laget et «php API» for kommunikasjon mellom applikasjon og database, for å opprette, oppdatere og hente data. MYSQL Brukes til lagring av data i databasen. SQL står for Structured Query Language, som kan kan oversettes til «Strukturert Spørringespråk». Språket inneholder mange sett med kodeord og syntaks for å lage disse spørringene, som brukes til å hente eller lagre data i databasen. Mange programmeringsspråk kan koble til MySQL-databaser, og PHP er en av disse. MySQL er et av verdens mest brukte open source database databaseadministrasjonssystem, som jeg har benyttet før og det ble dermed det naturlige valget. JSON JSON (JavaScript Object Notation) er en tekstbasert struktur for sending av data. I mitt prosjekt sender php api et en JSON respons til applikasjonen. Applikasjonen parser JSON response, som gjør at jeg kan konvertere response til et Java objekt som er lettere å jobbe med. GOOGLE PLAY SERVICES LIBRARY Dette er et bibliotek som gjør det mulig å benytte seg av et bredere spektrum av funksjonalitet laget av Google. Ved å integrere denne pakken kan jeg få tilgang til å implementere Google Maps i applikasjonen. GRAPH VIEW LIBRARY GraphView er et Android bibliotek utviklet av Jonas Gehring. Biblioteket gjør det mulig å skape fleksible og pene diagrammer i Android applikasjoner. Jeg bruker GraphView til å generere et diagram som viser prisutviklingen til en valgt vare. 60

61 ZXING ZXing (Zebra Crossing) er et open-source bibliotek utviklet av Sean Owen. Dette er et 1D/2D barkode prosesserinngs bibliotek skrevet i Java. Zxing brukes til å hente barkoden fra produkter brukeren skanner med kameraet på sin Android enhet. Jeg benytter ikke biblioteket, men åpner applikasjonen via et intent. UTVIKLINGSVERKTØY ECLIPSE MED ADT PLUGIN Eclipse er et flerspråklig IDE (Integrated development environment), som har støtte for programvareutvidelser (plugins). Sammen med ADT (Android Developer Tools) utvidelsen blir Eclipse et avansert utviklingsmiljø for utvikling av Android applikasjoner. PHPDESIGNER8 phpdesigner8 er en kjapp og god PHP IDE (støtter også andre språk som HTML, CSS, JavaScript). En av de bedre editorene for PHP jeg har prøvd, så jeg velger også å benytte den i programmering av mitt API. DOKUMENTASJON OG PROSJEKTHÅNDTERING MICROSOFT OFFICE Microsoft Office er en stor programvarepakke, med mange ulike programmer og verktøy tilpasset kontorbruk. Under utvikling av styringsdokumenter og avsluttende rapport har jeg benyttet tre av programmene. Word for tekstbehandling, Visio for å opprette diagrammer og Excel for tabeller. PAINT.NET Paint.Net er et gratis bilderedigerings programvare for Windows. Har mye funksjonalitet, som gjør det til et sterkt verktøy. TRELLO Trello er et verktøy for organisering av prosjekter, i form av lister. De ulike listene gjør det enkelt å se hva som skal gjøres, hvilke oppgaver jeg holder på med og det som er ferdig. Hver oppgave blir representer som kort. Disse kortene kan flyttes opp og ned på listen, slik at jeg oversikt over hvilken prioritet hver enkelt oppgave har. Når et kort går fra en tilstand til en annen, flyttes det enkelt over til neste liste. For hvert kort kan man legge ved bilder og filer, hyperlinker og sjekklister. DROPBOX Dropbox er en «file hosting service» som tilbyr sky-lagring, synkronisering og programvare på klient. Dropbox har vært mitt lagringssted for alle dokumenter, bilder, skisser og diagrammer gjennom hele prosjektet. GITHUB GitHub er et webhotell for software prosjekter som benytter versjonshåndteringssystemet Git. Under hele utviklingsprosessen har jeg lastet opp prosjektkoden, slik at jeg har en backup i tilfelle noe skulle skje. 61

62 [D] - KILDER [1] Ambysoft Inc : Copyright Scott W. Ambler [2] C2.com : User Generated Content [3] Ambysoft Inc : Copyright Scott W. Ambler [4] Kåre Sorteberg : Høgskolen i Østfold [5] John Carter : Databasedesign.co.uk [6] Juhani Lehtimaki : androiduipatterns.com [7] Riitta Hellman m.fl : Karde As, Tellu AS, Norsk Regnesentral [8] Yosuke Tanaka : Color Universal Design Organization [9] Wikipedia.org [10] issuu Frode Eika Sandnes : Universitetsforlaget [11] Google : developer.android.com [12] Doug Lowe : dummies.com [13] Site Ground [14] Wikipedia.org [15] Jonas Gehring [16] Google : developer.android.com [17] yaozhifeng : CSDN.net 62