Innovativa mobila tjänster och system. Green Wear

Transkript

1 Innovativa mobila tjänster och system Green Wear

2 Innehållsförteckning 1. Sammanfatting 2. System 2.1 Delsystem beskrivning modeller och databaser Serverstruktur 2.2 Delsystem beskrivning av mobil och klocka Allmän beskrivning mobil och wear enhet Kommunikationsbeskrivning för mobil Kommunikationsbeskrivning wear 2.3 Android 3. Design 3.1 Designmetodik (Webben, mobilen och klockan) 3.2 Vägledande designprinciper 3.4 Designprocess 4. Interaktion 4.1 Skärmflödesdesign 4.2 Förklaring av telefonens gränssnitt 4.3 Förklaring av weppapplikationens gränssnitt 4.3 Förklaring av klockans gränssnitt 4.4 Konceptuell design 5. Diskussion och slutsats 6. Referenser 7.Bilagor

3 1. Sammanfatting I kursen Innovativa mobila tjänster och system fick studenterna uppgiften att skapa ett system av minst tre skärmar varav en är android wear. De olika teknikerna som använts för att skapa tjänsten består av en webbapplikation (med tillhörande back end API samt front end del), en Android mobilapplikation och en Android Wear klocka. Utifrån detta har den här gruppen skapat ett system som ska hjälpa och motivera användaren att skapa ett mer hållbart samhälle genom att köpa bra varor som är ekologiska och lokalproducerade, den ska även vara ett hjälpmedel för användaren att bli bättre på återvinna och sopsortera. 2. System Systemet består av tre olika skärmar, en mobilapplikation, en webbapplikation och en koppling till Android Wear klockan. Dessa enheter kommunicerar med varandra genom ett API som finns på back end/serversidan. Med hjälp av detta API så skickas det ut information till dels mobilapplikationen och dels webbapplikationen. Det data som systemet ska hantera är: Vart användaren befinner sig, i butiken och vid sopstationen En lista över butikens aktuella bra val produkter. Exempelvis lokalproducerat, ekologiskt, KRAV eller Fairtrade märkt. Input från användaren på klockan och mobilen Poäng från alla de olika bra val som görs. Webbapplikation presenterar information och statistik Back end som uppdaterar information och statistik Notifikationer i form av erbjudanden av bra val produkter som pushas ut till klockan Den gemensamma informationen genom hela systemet utgår till största del från att den hämtar data från sensorer och användaren. Systemet ska med hjälp av Wifi triangulering bestämma en relativt precis position över var någonstans användaren befinner när han eller hon är i matbutiken. Detta för att kunna pusha ut relevanta erbjudanden om bra val produkter när användaren faktiskt är vid den motsvarande produkthyllan.

4 Vidare kan systemet utifrån sensordata och mobilens GPS kontrollera om användaren är på väg att sopsortera samt analysera hur sopsortering processen går till. Tanken är att i framtiden ska det finnas mer tekniskt utvecklade sopstationer som innehåller ett eget internt nätverk med koppling till varje kontainer som då kan kommunicera med Green Wear systemet. Syftet är då att kunna ge feedback till användaren i form av information som hjälper till att sopsortera på korrekt vis. Exempelvis kan användaren fråga systemet om hur man ska sortera värmeljus, och då ge information som tydligt visar i vilken container de olika delarna skall slängas. Målet med systemet är att användaren skall kunna få kontinuerlig feedback och information från att man befinner sig i butik till att man är på väg till sin sopstation för att återvinna. Mervärdet från denna typ av system är att användaren får möjligheten att reflektera över sina val. Statistik över vilka varor som köpts och hur bra det går att sopsortera. Denna typ av information i kombination med med konkret fakta som presenteras på webbapplikationen och mobilapplikation, skall uppmuntra till att få användaren att göra fler miljömedvetna val i framtiden. 2.1 Delsystem beskrivning modeller och databaser En viktig komponent som hanterar det mest av informationen i systemet är back end delen. Både webbapplikationen och mobilapplikationen hämtar och sparar data i denna serverdel. För 1 att göra detta har vi använts oss av Angular Fullstack som verktyg. Detta paket innehåller en rad olika ramverk som underlättar vid hantering av databaser och för att göra olika förfrågningar och hantera svaren. Ett enklare API har implementerats för att de olika delarna i systemet skall kunna kommunicera tillsammans. För att kunna spara data så kräver det en koppling till databasen. I detta fall har 2 MongoDB använts. Det är en dokumentbaserad databas som följer ett antal modeller eller 3 scheman som är kopplad till ett ramverk som heter Mongoose. 1 DaftMonk Generator Angular Fullstack MongoDB, Inc Licensed under MIT 2011

5 En schema modell som hanterar de olika produkterna/varorna som användaren köper. I dagsläget utgår de från en simpel struktur som endast innehåller namnet och priset. Dessa varor är de som sedan sparas i det digitala kvittot. Denna modell hanterar det digitala kvittot som ska kunna referera till vilka produkter som användaren har köpt. Den skapar då en array av objekt som följer modellen för produkter. Det ska även finns information om vilken butik som användaren har handlat i samt kunna beräkna den totala summan.

6 Detta schema beskriver modellen för vilken data som Miljöstationerna bör innehålla. Det behövs en plats så att de kan placeras på ut på en karta. Ett namn för de olika sopstationerna samt kategorierna för vilka typer av containrar som användaren kan använda för att återvinna. Till exempel; brännbart, kartong, batterier med flera. Förutom att kunna hantera inloggningsuppgifter för de olika användarna så ska det även finns information kopplad till dels varje digitalt kvitto och dels vilken poäng och nivå som användarens avatar har.

7 2.1.1 Serverstruktur För att serversidan skall kunna utnyttja olika modeller och metoder så skapas olika end points för varje modell som behövs. I detta fall har det skapats en för products, receipts samt stations. Dessa end points blir som ett API som då innehåller dels ett schema och dels controllers kopplat till just det schemat. API:et används sedan genom hela systemet och innehåller exempelvis metoder för att skapa, uppdatera och ta bort data. Ett exempel på en controller följer nedan: Det som denna controller gör är att den hittar alla kvitton för en användare och därefter så fyller den (populates) modellen för kvitton med produkter. Vidare så bygger mycket av strukturen på det som Angular Fullstack direkt skapar åt oss. Många av de underliggande funktionerna och metoderna genereras automatiskt. 2.2 Delsystem beskrivning av mobil och klocka Allmän beskrivning mobil och wear enhet Det mobila systemet består av en android applikation som hämtar och skriver till serverns databas. Det som sparas på databasen är kvitton, inköpslistor, sopsorterings data och användarens val för att sedan låta servern bearbeta data och skapa statistik. Wear enheten kommer användas till att presentera aktiva val som användaren kan göra. Denna data kommer sparas för att kunna berarbeta på serversidan. Servern kommer då dela ut poäng till användaren.

8 2.2.2 Kommunikationsbeskrivning för mobil För att kunna kommunicera med servens databas krävdes det att integrera ett öppet API som 4 heter Retrofit. Retrofit kan förvandla ditt REST API till ett Java interface. Sedan med hjälp av RestAdapter klassen kan man generera och implementera vårt gränssnitt. Gränssnittet för att hämta data från databasen. Tack vare hur schemamodellen från serversidan byggdes behövs det endast hämta en lista på alla kvitton. Varje kvitto har referenser till produkter som kommer hämtas av på samma gång. Detta tack vara Retrofit smarta API. När man har definierat gränssnittet var det dags att bygga klassen med adressen till databasen och gränssnittet. 4 Licensed under Square 2013

9 Som nästa steg skulle man implementera gränssnittet till en fungerande funktion. I detta exempel använder vi oss av callback metoden vid hämtning av data. Att använda sig av callback metoden har ett antal fördelar så som att hämtningen sker parallellt med huvudprocessen. En annan fördel är att den har en inbyggd felhanterare som man kan konstruera efter applikationens behov. För att kunna spara undan den data som man fått från serven behövs det först definiera klasser som kan representera den exakta strukturen som finns i databasen. När det är klart kommer Retrofit att hantera resten Kommunikationsbeskrivning wear För att wear enheten ska kunna presentera data som den mobila enheten har hämtat, måste det skapas först en notifikation som man paketerar all data i. När det är klart behövs det någon typ av trigger som skickar iväg notifikationen

10 Vår applikation kommer använda sig av triangulation för att fastställa positionen inomhus. Detta fungerar genom att det finns fasta wifi access punkter som man använder sig av för att tilldela enhetens position inomhus.på detta sätt kan man bygga ett koordinatsystem där man kan hämta positionen till de två närmaste wifi access punkter. När man har identifierat vart dessa wifi access points befinner sig inomhus kan man börja beräkna längden på en sida av triangel med hjälp av vinklar och längder av triangeln som bildas av det två referens punkter och själva mobila enheten. Denna tekniken har används sedan år 1615 till att beräkna avståndet till land på skeppet. 2.3 Android Applikationen grunden bygger på fragment som skapas av Mainactivity. Fragment är ett visuellt element som hanteras av en activity. En activity kan består av fler fragments samtidigt. Applikationen har en huvud klass som heter Mainacticity. Mainacticity skapar och håller reda på en Navigationsdrawerfragmet. Navigationsdrawerfragmet är ett sidomeny där användaren kan navigera sig genom applikationens innehåll. Sidomeny håller reda på vilket meny val användare har gjort för att sedan meddela Mainacticity att skapa det respektive fragment som sedan presenteras åt användaren. (Se bilaga Klassdiagram för Android applikation) 3. Design 3.1 Designmetodik (Webben, mobilen och klockan) Den innovativa mobila teknologin har idag förändrat våra liv med allt fler tjänster inte minst bland webbaserade tjänster och applikationer. Idag lever vi i ett samhälle där nytänkande och nya kunskaper blir allt viktigare, där den mobila teknologin underlättar vår vardag och förändrar våra liv och också underlättar nya inlärningsprocesser hos människan. Dessutom har tillväxten av den snabba utvecklingen av den trådlösa tekniken skapat nya möjligheter överallt.

11 Designmetodik är ett sätt om hur man ska designa ett projekt genom att strukturera upp arbetet för att vetta var man ska börja och hur man ska avsluta med arbetet. Detta gör man genom att lägga upp arbetet del för del där exempelvis man analyserar användare, användningssituation och uppgift. Sedan specificerar olika krav på användande av projektet exempelvis hur allting hänger samman och hur man ska gå till väga (i detta fall hur Webben ska jobba med mobilen och hur mobilen i sin tur ska jobba med klockan ). Det tas sedan fram en prototyp som är väl designat och som underlättar för att ta fram den färdigställda produkten/tjänsten. Efter prototypen är klar så görs många tester för att få fram ett 5 bra resultat på hur den verkliga produkten/tjänsten ska täcka de olika behoven. 3.2 Vägledande designprinciper Vi har skapat en applikation som jobbar med tre skärmar. Designen är väldigt fin, enkel och lekfull med en grön färg på menyerna och en ljusgrå färg som bakgrund som vår grupp tyckte skulle passa bra till vår applikation. Vi ville inte skapa en komplicerat design som skulle kunna stöta bort en användare, utan att designen skulle vara mjuk och fånga många användare. Applikation är väldigt bra då den är mer formad som ett spel där applikationen använder en avatar (isbjörnen) som mår bättre av ett köp som innehåller miljömärkta varor. Applikationen är formad så att man samlar på sig poäng vid varje köp vilket gör att man lockar nya kunder. Sedan finns en klient sida som kunderna kan se kvitto och även statistik på alla köp de gjort via applikationen. Det används också olika guidelines för exempelvis android och webb som en standard för menyer och sidor. Det är viktigt hur en applikation är formad och vad det erbjuder. därav vår applikation som erbjuder kunden en enkel, trygg och modern funktionalitet. En lockande utseende som tilltalar kunden. En applikation som innehåller animationer och liknande är viktiga eftersom dessa kan ge kunden en meningsfull feedback som hjälper till och klargör olika resultat av dess handlingar. Vår applikation innehåller olika standard guidelines som hjälper till och underlättar var användaren exempelvis befinner sig och hur denne ska ta sig runt inom applikationen eller webbsidan. 3.4 Designprocess En designprocess kan man tillämpa på olika områden som rör budskap, processer, tjänster eller miljöer. Det handlar om en modell för bearbetning med design inom produktionsutveckling där modellen ingår i företagets utvecklingsprocess för att uppnå ett framgångsrikt resultat med hjälp av designprocessen. 5 Från en förläsning på Chalmers

12 Vår designprocess gick ut på att skapa en fin och väl designat applikation som ska underlätta för användaren att hitta rätt sorts miljö erbjudanden i en butik. Vi började från en utgångspunkt där vi skissade applikationen eftersom ett behov av detta fanns bland studenter och miljömedvetna personer som inte riktigt har orken att göra något åt det. Efter en del diskussion inom gruppen och med olika förslag på applikationen så kom vi fram till att skapa applikationen Green Wear/Green web som ska tilltala efterfrågan. Applikationen hjälper till att hitta olika erbjudanden som är miljömärkta i en butik då man passerar dessa varor i butiken. Vidare kan applikationen hjälpa användaren att bli mera motiverade att exempelvis sop sortera på rätt sätt i stället för att kasta allt i brännbart. Det leder till att användaren belönas med poäng i ett poängsystem som visar hur duktig och noggrann denne är på att sop sortera och panta. Sedan vidareutvecklades det valda förslagen hos de olika gruppmedlemmarna och ett avslutande förslag presenterades, testades och utvärderades och när det inte upptäcktes några osäkerheter kunde produktionsprocessen sättas igång. Därefter började produktionen som följs av en uppföljning och en utvärdering. 4. Interaktion 4.1 Skärmflödesdesign Systemets tre delar är gjorda så att de har olika syften men att de samtidigt hör ihop. Klockan är en enhet med en liten skärm som är till för att visa notifikationer till användaren. Den ska interagera med användaren vid rätt tillfälle och inte vara störande. Applikationen på telefonen ska däremot verka som ett verktyg för användaren att lägga till egen information, söka och se data som systemet samlat in. Det är mer krävande för användaren att använda telefonen men samtidigt ger den ett större mervärde. Webbapplikationen är till för att kunna visa mer fakta, både det systemet samlat ihop om användaren och fakta som ska visas i utbildande syfte. Exempelvis olika länkar till artiklar, dokumentärer och liknande. Det skulle kunna vara fakta så som att återvinna en aluminiumburk 6 sparar tillräckligt mycket energi för att ha på en TV i tre timmar. Sådan här information är tänkt att motiviera användarna och ge ett mervärde för dom att använda webbapplikationen. 6 EARTHECO

13 4.2 Förklaring av telefonens gränssnitt Applikationen på telefonen består av först en sida som visar användarens avatar och poängen i form av en mätare. Dessa visas först då de här elementen är mest relevanta för användaren och något som hen kan titta på för att få en snabb överblick utan att behöva bläddra till andra sidor i applikationen. Systemet ger användaren poäng när den pantar, sopsorterar och handlar bra varor som gynnar miljön. Poängen visas på mätaren, och om den är fylld får användaren en belöning i form av en miljökupong som den kan använda i matbutiker för att köpa bra varor, miljökupongen används genom att man trycker på mätaren och då kommer matkupongen att visas över hela skärmen. Mätaren räknas därför som en viktig del av systemet och ligger på framsidan för att fungera som en sporre för användarna. Användare får snabbare en överblick av att titta på en mätare än att 7 endast se siffror. Sedan har vi en avtar i form av en isbjörn som ska representera användaren. Isbjörnen kommer även den att gynnas av att användaren samlar ihop mer poäng. Den kan exempelvis få större isflak eller på annat sätt bli belönad. 7 WMG 2014

14 Högst upp i vänstra hörnet finns en knapp som leder till en en sidomeny. Sidomenyn är placerad på vänster sida Menyn är platt där alla fem val finns direkt i menyn utan undermenyer. Det är gjort då det endast finns fem olika val och att en djup meny därför inte är nödvändig. Det användaren kan göra i telefonen är att skriva en handelslista,hitta sopstationer på en karta, se statistik av sin egen förbrukning och se äldre kvitton. 4.3 Förklaring av weppapplikationens gränssnitt Hemsidan är väldigt enkel med få funktioner. En utveckling av systemet hade inneburit en mer avancerad hemsida. Hemsidans layout liknar appen med en klassisk meny överst. Förstasidan visar användarens avatar och poängmätaren. I senaste versionen finns det en sida till som visar statistik och ger användaren möjlighet att titta bland äldre kvitton. Hemsidan är tänkt som en förlängning av telefonen och ska visa mer och tydligare statistik än vad som går att gestalta på en telefon. Det är även tänkt att den ska visa liknande fakta som kan vara intressant för användaren.

15

16 4.3 Förklaring av klockans gränssnitt Klockan är ett litet föremål och interaktionen med den är begränsad, touchscreen och röstkommando är det som används idag. Vår applikation består av ett flertal notifikationer som alla har ett liknande gränssnitt. En notifikation visar en textruta med information, användaren kan sedan svara genom att swipea till vänster för att visa en ny sida till höger som visar olika alternativ. När användaren kommer in till en butik och valt att ta emot notifikationer kommer det dyka upp notifikationer när användaren är i närheten av en vara som är relevant. Om användaren skrivit in en inköpslista kommer de matvarorna visas, annars syns endast tips på varor som är bra för miljön. Notifikationen visar namnet på varan, under kan det eventuellt stå ett miljöbra alternativ istället för det användaren tänkt köpa. För att ta bort notifikationen drar användaren till höger och trycker på ok. 4.4 Konceptuell design Systemets idé är att hjälpa att upplysa användaren om hur vårt sätt att leva påverkar miljön. Isbjörnen ska göra att applikationen får en känsla av att vara mer personlig och lekfull vilket är gjort för att få användaren att uppskatta systemet. Känslan ska vara att det är isbjörnen som ger råd och interagerar med användaren och det ska hela tiden uppmuntra användaren. Tanken är att det inte ska finnas några krav som gör att det kan kännas jobbigt att använda systemet. 5. Diskussion och slutsats Under projektets gång har en del punkter i den tidigare kravspecifikationen flyttats om och förändrats en aning. Fokus med projeket var att ta fram ett system fungera på tre olika skärmar där vi ville få in ett helhetstänk som gör att användaren blir mer miljömedveten och framförallt får möjlighet att reflektera. Mätbara mål 1. Statistik om användarna köper bra varor i högre utsträckning efter att de börjat använda systemet. 2. Statistik om användarna sopsorterar och pantar i högre utsträckning efter att de börjat använda systemet. 3. Utvärdera om användaren upplever att den har bidragit till ett mer hållbart samhälle. Projektmålen anser vi har uppfyllts men vissa ändringar som blev nödvändiga eftersom det var ont om tid och svårt att planera för små problem som uppstod. Den tekniska implementationen blev uppfylld men i mindre omfattning än väntat och i stället lades fokus på att utveckla visionen och ta fram en prototyp som visar på konceptet i stort. Systemet består nu av en webbapplikation som är väldigt simpel och innehåller endast den mest väsentliga informationen såsom statistik och digitala kvitton över användarens inköp. En vidareutveckling av denna är att

17 kunna visa på fakta i kombination med statistiken så att användaren får ett mervärde av att använda webbsidan. Mobilapplikationen är den som är mest utvecklad och innehåller de funktioner och design som vi satte upp som mål från början av projektet. Någon utvärdering eller användartest av systemet utfördes inte då det tyvärr in fanns tid för det utan det är något som behöver genomföras för att ta nästa steg i processen. Uppdelningen av arbetet mellan projektets medlemmar gick smidigt och alla bidrog med det de var kapabla till utifrån den tid som de var villiga att lägga ner. Det var svårt att förutse att vissa problem skulle ta längre tid att lösa än andra, därför blev det något av ett stopp i utvecklingsprocessen under en period. Sammanfattningsvis blev projektet lyckat i avseende på den tid som vi lade ner och den kunskap som vi inom gruppen hade. Laborationen innehöll många moment som var väldigt användbara när sedan projektarbetet skulle utföras och det hade varit att föredra att den var genomförd innan projektet drog i gång. Främst för att det blir enklare att hålla en bra kommunikation mellan varandra i projektgruppen samtidigt som det blir lättare att förstå problem och hjälpas åt.

18 6. Referenser DaftMonk 2012 Generator Angular Fullstack Github angular fullstack (Hämtad ). EarthEco, 2015, Did you Know? Some interesting facts about the environment MongoDB, Inc (Hämtad ). Licensed under MIT (Hämtad ). Licensed under Square (Hämtad ). From Wikipedia, the free encyclopedia (Hämtad ). Från en förälsning på Chalmers (Hämtad ) WMG every seo strategy needs infographics/ (Hämtad )

19 7.Bilagor Bilaga klassdiagram android applikation.