LiU-ITN-TEK-A--13/063--SE
Implementation och design av en
hybrid mobilapplikation med
native känsla, åt
rekryteringsföretaget Skill
Jens Lund
Per Velander
LiU-ITN-TEK-A--13/063--SE
Implementation och design av en
hybrid mobilapplikation med
native känsla, åt
rekryteringsföretaget Skill
Examensarbete utfört i Medieteknik
vid Tekniska högskolan vid
Linköpings universitet
Jens Lund
Per Velander
Handledare Erik Berglund
Examinator Camilla Forsell
Upphovsrätt
Detta dokument hålls tillgängligt på Internet – eller dess framtida ersättare –
under en längre tid från publiceringsdatum under förutsättning att inga
extra-ordinära omständigheter uppstår.
Tillgång till dokumentet innebär tillstånd för var och en att läsa, ladda ner,
skriva ut enstaka kopior för enskilt bruk och att använda det oförändrat för
ickekommersiell forskning och för undervisning. Överföring av upphovsrätten
vid en senare tidpunkt kan inte upphäva detta tillstånd. All annan användning av
dokumentet kräver upphovsmannens medgivande. För att garantera äktheten,
säkerheten och tillgängligheten finns det lösningar av teknisk och administrativ
art.
Upphovsmannens ideella rätt innefattar rätt att bli nämnd som upphovsman i
den omfattning som god sed kräver vid användning av dokumentet på ovan
beskrivna sätt samt skydd mot att dokumentet ändras eller presenteras i sådan
form eller i sådant sammanhang som är kränkande för upphovsmannens litterära
eller konstnärliga anseende eller egenart.
För ytterligare information om Linköping University Electronic Press se
förlagets hemsida
http://www.ep.liu.se/
Copyright
The publishers will keep this document online on the Internet - or its possible
replacement - for a considerable time from the date of publication barring
exceptional circumstances.
The online availability of the document implies a permanent permission for
anyone to read, to download, to print out single copies for your own use and to
use it unchanged for any non-commercial research and educational purpose.
Subsequent transfers of copyright cannot revoke this permission. All other uses
of the document are conditional on the consent of the copyright owner. The
publisher has taken technical and administrative measures to assure authenticity,
security and accessibility.
According to intellectual property law the author has the right to be
mentioned when his/her work is accessed as described above and to be protected
against infringement.
For additional information about the Linköping University Electronic Press
and its procedures for publication and for assurance of document integrity,
Sammanfattning
På senare tid har användadet av smartphones blivit allt vanligare och idag har cirka 60% av svenska befolkningen kopplat upp sig mot internet med en smartphone, samtidigt som försäljningen av mobilapplikationer ökar. I strävan efter att nå ut till en större kundkrets söker företag sätt att sprida information via mobilapplikationer. Men då kunderna använder sig av olika typer av enheter krävs plattformspecifika applikationer för att kunna nå ut till alla. Detta för med sig högre kostnader och längre utvecklingstider. En mer kostnads- och tidseffektiv lösning är att göra en hybridapplikation, vilket är en applikation som man kan ladda ner från marknadsplatserna och är skriven i HTML, JavaScript och CSS.
Examensarbetet utfördes hos rekryteringsföretaget Skill som verkar inom Data/IT och har därför som mål att ligga i teknikens framkant. Skill hade ett behov av en plattformsoberoende mobilapplikation, där jobbkandidater enkelt skulle kunna ansöka om lediga tjänster.
Syftet med denna rapporten är att undersöka möjligheter och brister hos ramverken Pho-negap samt jQuery Mobile vid skapandet av en hybridapplikation. Vi har studerat om man med dessa ramverk kan skapa en plattformsoberoende mobilapplikation som känns native, men även om det finns riktlinjer från marknadsplatserna som gör det svårt att göra just detta. Under projektet fick vi bättre insikt i den problematik som kan uppstå vid utveckling av en plattformsoberoende mobilapplikation. Efter att vi analyserat resultatet kom vi fram till att det är möjligt att skapa en applikation som känns native, dock måste avgränsningar göras utifall applikationen skall vara plattformsoberoende.
Abstract
The usage of smartphones have recently increased and today approximately 60% of the swedish population have been connected to the internet with a smartphone, while sales of mobile appli-cations is growing. In striving to reach out to a larger clientele companies are searching ways to distribute information through mobile applications. Although, as customers uses different types of devices, plattformspecific applications is required to reach out to everyone. This leads to higher costs and longer development time. A more cost and time efficient solution is to make a hybrid application, which is an application that you can download from the marketplaces and is written in HTML, JavaScript and CSS.
The master thesis was done at the recruitment company Skill, which is working with the Computer and IT industry and therefore aim to be at the forefront of technology. Skill had a need for a crossplatform mobile application, where job candidates easily could apply for vacant positions.
The purpose of this report is to investigate the possibilities and shortcomings of the frame-works Phonegap and jQuery Mobile during the creation of a hybrid application. We studied whether it is possible to create a crossplatform mobile application that feels native with these frameworks, but also if there are guidelines from the marketplaces that makes it hard to develop a plattform independent application. During the project we gained insight in the problematics that might occur when developing a plattform independent application. After analyzing the results our conclusion is that it is possible to create an application that feels native, but sacrifices has to be done in case the application should be plattform independent.
Innehållsförteckning
1 Inledning 4 1.1 Bakgrund . . . 4 1.2 Syfte . . . 4 1.3 Avgränsningar . . . 4 1.4 Frågeställning . . . 5 1.5 Företaget . . . 5 1.5.1 Skill . . . 5 1.5.2 Noc Webbyrå . . . 5 1.5.3 Millnet . . . 5 1.5.4 Exeo . . . 5 1.5.5 Arbetsförmedlingen . . . 5 1.6 Språkbruk . . . 6 2 Utförande 7 2.1 Arbetsmetod . . . 7 2.2 Målgrupp . . . 7 2.3 Kravspecifikation . . . 7 2.4 Verktyg . . . 8 2.4.1 Ramverk . . . 82.4.1.1 Phonegap - Apache Cordova . . . 8
2.4.1.2 jQuery Mobile . . . 8 2.4.1.3 jQuery . . . 8 2.4.2 Plugins . . . 9 2.4.2.1 iScrollView . . . 9 2.4.2.2 PushPlugin . . . 9 2.4.2.3 EmailComposer . . . 9 2.4.2.4 Energize . . . 9 2.4.3 Pushnotistjänster . . . 9
2.4.3.1 Google Cloud Messaging . . . 10
2.4.3.2 Apple Push Notification Service . . . 11
2.5 Design . . . 12 2.5.1 Design av applikationen . . . 12 2.5.1.1 Lediga jobb . . . 12 2.5.1.2 Inställningar . . . 12 2.5.1.3 Om oss . . . 13 2.5.1.4 Tips . . . 13 2.5.1.5 Detaljerad jobb vy . . . 14 2.5.1.6 Ansöka jobb . . . 14 2.5.1.7 Startinställningar . . . 15 2.5.1.8 Sociala medier . . . 15 2.5.2 Design av komponenter . . . 17 2.5.2.1 Navigationsfält . . . 17 2.5.2.2 Expanderbara element . . . 17 2.5.2.3 Checklistor . . . 18 2.5.2.4 Knappar . . . 18 2.5.3 Design av databas . . . 19
3 Resultat 20 3.1 Nativekänsla . . . 20 3.2 Plattformsoberoende . . . 21 3.2.1 Skärmanpassning . . . 21 3.2.2 CSS-baserade övergångar . . . 22 3.2.3 Bakåtknapp . . . 22 3.2.4 Pushnotiser . . . 23 3.2.5 Email . . . 23 3.3 Marknadsplatsernas krav . . . 23 4 Slutsats 25 5 Diskussion 26 6 Fortsatt arbete 27 Referenser 28
1
Inledning
Den här rapporten är resultatet av ett examensarbete på Medieteknik vid Linköpings Universitet. Examensarbetet är utfört hos rekryteringsföretaget Skill, vars huvudkontor finns i Linköping, men har även kontor i Norrköping, Jönköping samt Stockholm. Under examensarbetet utveckla-des en mobilapplikation till operativsystemen Android samt iOS.
1.1
Bakgrund
Vid utveckling av en mobilapplikation ställs det hårda krav på applikationen för att få publiceras på marknadsplatser såsom Apples App-store eller Googles Google-play [1]. Förutom att applika-tionen inte får innehålla några tydliga fel så ska den följa de riktlinjer som angivits angående design samt bete sig som en nativeapplikation [2]. Det är inte ovanligt att applikationer blir underkända och därmed måste utvecklaren göra ändringar för att möta kraven [3].
Idag annonserar företaget om sina lediga tjänster på hemsidan www.skill.se och det är via hemsidan kandidater ansöker om tjänster. Då företagets målgrupp har ett högt tekniskt kunnan-de och ständigt söker nya sätt att kommunicera har företaget uttryckt ett behov av att öka sin tillgänglighet. Företaget vill därför erbjuda kandidaterna ett nytt, enkelt och attraktivt sätt att ansöka om lediga tjänster via mobilen.
1.2
Syfte
Syftet med examensarbetet är att genom utveckling av en mobilapplikation åt rekryteringsfö-retaget Skill, förstå de krav som ställs på mobilapplikationer på App-store samt Google-play. Att undersöka om det är möjligt att med ramverken jQuery Mobile och Phonegap skapa en plattformsoberoende mobilapplikation som uppfyller marknadsplatsernas krav skall även vara del av arbetet. Det krävs därför att applikationen utvecklas med åtanken att uppfattas som en nativeapplikation för användaren. Samtidigt skall företagets önskemål göras hörda för att uppnå de förväntningar som ställs på applikationen. Det är dock viktigt att upptäcka och undvika önskemål som kan påverka applikationens användbarhet negativt eller strider mot marknadsplatsernas riktlinjer.
1.3
Avgränsningar
Examensarbetets fokus var att undersöka ramverken Phonegap och jQuery Mobile till enheterna Android samt iOS, liknande ramverk och enheter kommer därför inte att behandlas närmare i rapporten. Något användartest har ej genomförts, utan vår samt företagets uppfattning har legat till grund som utvärdering av applikationen. Mer om dessa avgränsningar samt funktioner som ej implementerats finns att läsa om i kapitlet diskussion (5).
1.4
Frågeställning
• Kan man med ramverken jQuery Mobile samt Phonegap skapa en mobilapplikation som känns native för användaren?
• Kan man med ramverken jQuery Mobile samt Phonegap skapa en mobilapplikation som är plattformsoberoende?
• Finns det riktlinjer från marknadsplatserna App-store samt Google-play som gör det svårt för mobilapplikationer att vara plattformsoberoende?
1.5
Företaget
Under examensarbetet blev fler företag än just Skill involverade i projektet. I denna sektion finns korta beskrivningar av samtliga involverade företagen.
1.5.1 Skill
Skill är ett rekryteringsföretag som verkar inom IT och teknikområdet. Företaget grundades 1997 och har sin verksamhet främst i Linköping men även i Norrköping, Stockholm och Jönköping. De rekryterar både direkt till fasta tjänster samt hyr ut personal till sina kunder. De arbetar även med marknadsundersökningar, huvudsakligen inom den offentliga sektorn [4].
1.5.2 Noc Webbyrå
Noc är en webbbyrå som skapar webbplatser åt företag och är de som har hand om Skills hemsida. Det kan därför vara viktigt att nämna Noc då delar av applikationen behöver kommunicera med de befintliga tjänster som finns idag [5].
1.5.3 Millnet
Millnet är ett företag anlitat av Skill som har fått i uppgift att sköta deras CV-databas. Millnet startade sin verksamhet år 2000 och har kontor i Mjärdevi i Linköping. Även Millnet har en viktig roll i examensarbetet då applikationen behöver kommunicera med Millnets tjänster[6].
1.5.4 Exeo
Exeo är ett företag med serverhallar i Motala samt Linköping. På Exeos servrar kommer ett fåtal filer behövas exekveras med direkt koppling till applikationen [7].
1.5.5 Arbetsförmedlingen
Sveriges största förmedlare av arbeten är den statliga myndigheten arbetsförmedlingen. Flera av de tjänster som Skill annonserar placeras även på arbetsförmedlingens hemsida genom den CV-databasen Millnet tillhandahåller [8].
1.6
Språkbruk
Detta stycket innehåller korta förklaringar till ord som används i rapporten.
• Nativeapplikation - En mobilapplikation som är programmerad i ett specifikt språk tillhö-rande enheten, till exempel Objective-C för iOS eller Java för Android.
• Webbapplikation - En webbapplikation är en applikation som ofta är skriven i HTML, JavaScript och CSS samt är tillgänglig på webben.
• Hybridapplikation - En hybridapplikation är en kombination av en nativeapplikation och en webbapplikation, normalt sätt skriven i HTML, JavaScript och CSS samt paketerad som en nativeapplikation.
2
Utförande
I detta stycket presenterar vi vårt arbetssätt, vilka verktyg som använts samt slutproduktens design.
2.1
Arbetsmetod
Då det krävdes en utförlig förstudie tillsammans med en planeringsrapport samt prototypskapan-de initialt i projektet, startaprototypskapan-de projektet enligt prototypskapan-den sekvensiella arbetsmetoprototypskapan-den vattenfallsmetoprototypskapan-den [9]. Under de första veckorna testades samt studerades funktionaliteten noggrant hos olika ram-verk som kunde lämpa sig väl för projektet. Tidigt i projektet utvecklades stora delar av de funktioner som med största sannolikhet skulle användas senare i projektet, för att tidigt kunna utvärderas och därmed välja de rätta ramverken. Under utförandefasen av projektet övergick metoden till en agil arbetsmetod [10], inspirerat utav Scrum [11]. Under denna fas agerade examensarbetets handledare på Skill som en produktägare och verktyg såsom behovslista för produkt (eng. Product Backlog), uppgiftslista för sprint (eng. Sprint Backlog), sprint-tavla (eng. Task Board) samt demonstrationsmöte av sprint (eng. Sprint Demonstration) användes flitigt.
2.2
Målgrupp
Skill rekryterar främst inom IT/Teknik, en bransch där det råder kompetensbrist [12]. De personer som ofta är intressanta för Skills kunder är civilingenjörer mellan 25 och 35 år gamla med god datorvana. På grund av denna kompetensbrist riktar sig snarare Skill mot studerande än arbetssökande. Statistik från SCB (Statistiska Centralbyrån) visar att personer inom denna målgrupp också är de personer som använder sin mobil eller smartphone för att koppla upp sig mot internet mest [13].
2.3
Kravspecifikation
I samarbete med handledaren från Skill utarbetades en kravspecifikation med funktioner som bör implementeras till applikationen samt önskemål som skulle implementeras i mån av tid. Listan prioriterades sedan av handledaren för att bestämma vilken ordning funktionerna skulle implementeras. Att se en lista med lediga jobb, kunna läsa mer samt ansöka om ett specifikt jobb fick en hög prioritet, eftersom företagets huvudsakliga syfte med applikationen var att informera fler personer om lediga jobb och få in fler ansökningar. Pushnotiser fick likaså en hög prioritering, där önskemålet innefattade att kunna få notiser om nya jobb, men även kunna ställa in sina egna preferenser för att få notiser som faktiskt passar användaren. Detta fick en hög prioritering eftersom det ansågs kunna öka användningen av applikationen, men även öka nativekänslan. Företaget önskade även att man via applikationen skulle kunna sprida nyheten om ett jobb via mail samt sociala medier såsom Facebook och Twitter. Även detta ansågs bidra till en större nyhetsspridning samt öka chansen att nå ut till rätt arbetssökande, då användaren av applikationen skulle kunna tipsa en vän om jobbet. Att kunna läsa mer om företaget Skill och deras medarbetare samt att få tips på hur man hittar rätt jobb var även det något som de gärna
2.4
Verktyg
Under projektets gång använde vi oss av flera olika ramverk, plugins samt pushnotistjänster för att applikationen skulle fungera som önskat. I detta stycke har förklarar vi kortfattat om de olika verktygen vi har använt.
2.4.1 Ramverk
För att applikationen ska kunna använda sig av nativefunktioner som till exempel pushnotiser, samt att få hjälp med grafiska komponenter och händelser så användes ramverken PhoneGap och jQuery Mobile.
2.4.1.1 Phonegap - Apache Cordova
Phonegap eller Cordova som det också kan kallas är ett utvecklingsramverk med öppen källkod som används för att bygga plattformsoberoende mobilapplikationer med hjälp av HTML, CSS och JavaScript [14]. Ramverket som är skrivet i JavaScript tillåter utvecklaren att använda sig av nativefunktioner i mobilen som t.ex. accelerometer, geografisk positionering och pushnoti-ser. Med hjälp av Phonegap kan man utveckla applikationer till bland annat iPhone, Android, BlackBerry samt webOS enheter [15]. Phonegap är ett relativt nytt ramverk då det skapades i oktober 2011 av företaget Nitobi som senare blev uppköpt av Adobe ett år senare [14]. Eftersom Phonegap är ett relativt nytt ramverk så kommer det ständigt nya uppdateringar med nya egenskaper och funktioner som underlättar för användaren att skapa en nativekänsla.
2.4.1.2 jQuery Mobile
jQuery Mobile är ett ramverk baserat på jQuery och HTML5 [16]. Ramverket skapades i augusti 2011 för att underlätta utveckling av mobila webbapplikationer med hjälp av jQuery [17]. jQuery Mobile är skapat för att fungera på en stor varietet av mobiler och tablets. jQuery Mobiles bibliotek inkluderar flertalet verktyg som har kommit till användning för projektet, till exempel verktygsfält, listor, formulär samt CSS-baserade övergångar.
2.4.1.3 jQuery
jQuery är ett JavaScript-bibliotek som gör det lättare och snabbare att modifiera CSS och HTML. I jQuery kan man t.ex. manipulera HTML-dokumentet eller hantera händelser och animering [18]. En studie med de en miljon främsta sidorna på nätet kunde man se att 91.2% av de som använde sig av ett JavaScript-bibliotek använde jQuery [19].
2.4.2 Plugins
För att vissa funktioner i applikationen skulle fungera som önskat så var vi tvungna att använda oss av några plugins. Nedan beskriver vi kortfattat om de olika plugins som har använts under projektets gång.
2.4.2.1 iScrollView
För att applikationen skulle få en scroll med nativekänsla så installerades iScrollView. iScrollView är ett jQuery Mobile-plugin som gör det möjligt för användaren att scrolla i olika innehåll i appli-kationen likt den scroll som finns i många nativeapplikationer [20]. Den främsta anledningen att vi använder oss av denna plugin är för att kunna ha fasta titelfält och navigationsfält när man scrollar i applikationen.
2.4.2.2 PushPlugin
För att kunna skicka pushnotiser till applikationen så använde vi oss av pluginen PushPlu-gin. PushPlugin är utvecklat till Phonegap för att med iPhone- och Android-enheter kunna ta emot pushnotiser [21].
2.4.2.3 EmailComposer
När man klickar på en emailadress i applikationen på en iOS-enhet så dirigeras man normalt sätt till mailapplikationen på mobilen. För att detta inte skall hända så installerade vi EmailComposer som är en Phonegap-plugin som gör det möjligt att skicka mail utan att bli dirigerad bort från applikationen [22].
2.4.2.4 Energize
För att iOS- och Android-enheter skall kunna detektera ett dubbelklick på skärmen och då zooma på sidan, förekommer en fördröjning i klickeventet då mobilen väntar på ett andra klick. Då vår applikation ej använder denna zoomfunktion ville vi eliminera fördröjningen eftersom det kan snabba upp klickevent med upp till 300ms [23]. Med hjälp av JavaScript-filen Energize försvinner fördröjningen.
2.4.3 Pushnotistjänster
För att skicka ut pushnotiser till en mobil krävs dels en server men även en integration med en tredjepartstjänst. Till Android används Google Cloud Messaging [24] och till iOS används Apple Push Notification Service [25]. Till examensarbetet användes pushnotiser för att tipsa om nyligen uppladdade jobb som passar användaren.
2.4.3.1 Google Cloud Messaging
Google Cloud Messaging (GCM) är en tjänst av Google som hanterar pushnotiser till enheter. Figur 1 illustrerar kommunikationen mellan de tre inblandade parterna, Android-enheten, GCM samt den server notisen skall skickas från.
Figur 1:GCM flödesschema.
1. Android-enheten skickar ett sender id som är unikt för enheten samt application id som är det unika id:et för vår applikation, till GCM-servern.
2. GCM-servern svarar då med ett unikt registration id till Android-enheten. 3. Därefter skickas registration id från Android-enheten till vår server. 4. Slutligen sparas registration id i en databas för användning.
(a) När en pushnotis skall skickas, skickar vår server registration id samt ett meddelande till GCM.
2.4.3.2 Apple Push Notification Service
Apple Push Notification Service (APNS) är Apples motsvarighet till GCM. Kommunikatio-nen sker på ett liknande sätt, vilket illustreras i figur 2.
Figur 2:APNS flödesschema.
1. iOS-enheten skickar ett App-ID samt en Provisioring Profile till APNS för att tillåta push. 2. APNS-servern skickar en device token till enheten.
3. iOS-enheten skickar vidare device token till vår server.
4. När servern mottagit device token från iOS-enheten sparas den i en databas för vidare användning.
2.5
Design
I detta stycke förklarar vi hur applikationen är uppbyggd när det gäller databasen, applikationens innehåll samt hur de olika komponenterna är designade.
2.5.1 Design av applikationen
Applikationen är uppdelad i fyra olika sidor som användaren kan navigera mellan med hjälp av navigationsfältet. Sidorna som man kan navigera mellan är Lediga jobb, Inställningar, Om oss och Tips. När man klickar på ett jobb på Lediga jobb-sidan så skickas man till en detaljerad vy för det jobbet man har klickat på. Det finns även en vy som enbart syns första gången man besöker applikationen, på denna sidan får användaren göra startinställningar för pushnotiser.
2.5.1.1 Lediga jobb
Lediga jobb-sidan är startsidan för applikationen och där alla jobb listas i en listvy. Varje ele-ment i listan har företagets logotyp samt en beskrivning av jobbet. Beskrivningen av jobbet innehåller en titel på annonsen, datumet annonsen är utlagd, vilken typ av tjänst samt område tjänsten gäller, se figur 3.
Figur 3:Lediga jobb
2.5.1.2 Inställningar
På Inställningar-sidan kan användaren ställa in från vilken placering, område och vilken upp-dragstyp användaren vill ha pushnotiser om. Med hjälp av ett reglage kan man välja om man vill tillåta att pushnotiser ska skickas till mobilen eller ej. Användaren ställer in vilka typer av jobb de vill följa genom att markera respektive checkruta, se figur 4. Genom att klicka på knappen Spara ändringarskickas användarens inställningar till databasen.
