Bygg en app En handbok som lär dig hur du bygger, redigerar och publicerar din egna mobila applikation (app). OpenRatios CMS guide v.8.6 (Education edition) Denna handbok är producerad och utgiven av OpenRatio och skyddas enligt lagen om upphovsrätt. Författare: Ruben Rivera Omslag, formgivning och layout: Sabine Hourani Copywriter: Ella Molin, Michael Weinstock, Jef Leyssens Telefon: +46 8 559 25 040 E-post: info@openratio.com Webb: http://openratio.com/
Att bygga en app Innehållsförteckning Förord 7 Innan du börjar 8 Bakgrund 10 När apparna tog världen med storm!...10 Vad är en app?... 11 Plattformar... 12 Genomslag och prognoser för apparna... 13 Företagsutveckling 14 Bortglömd företagsutveckling... 14 Att tjäna pengar på appar...16 Lär dig att välja och välj bort... 16 Så vad blir lösningen?...17 Programmeringsspråk 18 Varför olika programmeringsspråk?... 19 Utvecklingsverktyg 20 SDK...20 IDE... 21 Mer om de ledande operativsystemen... 21 Cross Platform Development Tool (CPT)... 22 App factories (appfabriker)... 23 Source code translators (källkodsöversättare)... 24 Runtime Environments (körning)... 25 Web-to-native wrappers (webb till inhemsk paketerare)... 25 JavaScript frameworks (JavaScript skelett)...26 Tillläggsinformation...27 CPT och kategori...27 Varning!...27 Planering 28 Del 1 : Less is more...28 Del 2 : Designa utifrån begränsningarna...29 4
Att bygga en app Del 3 : Designa och designa om...29 Del 4 : Testa, testa, testa!...30 Del 5 : Sätt en deadline...30 Marknadsplatser 32 Apple App Store... 32 Google Play... 34 Privata Appstores... 35 Reklam i appar 36 Mobila annonsnätverk...36 Sponsring...37 Gratis- och betal-versioner av din app...37 Mobilwebb & plattformar 38 Hur används webben?...38 En mobil webapp för alla plattformar... 39 Några av fördelarna... 40 Checklistor 42 Planering... 42 Inför lanseringen... 43 Utvärdera din marknadsföring...44 Utvecklarkonton 46 D-U-N-S...47 Apple... 48 Google Play...50 Att använda CMS:et 53 Grundinformation 54 Redigera bilder före uppladdning... 54 Inloggning... 56 Hemskärm...57 Redigera din information...58 Information om din app... 59 Moduler 60 Din app och hemskärmen...60 Dashboard...61 Mobilwebb-simulatorn...63 5
Att bygga en app Moduler... 64 Rich text pages... 65 Basic pages...67 Embed code...68 Events...69 F acebook...70 Flickr...71 Picture galleries...72 Links...73 Contact...74 RSS...75 Basic Youtube...76 Staff... 77 YouTube (Channels)...78 Hierarkier och träd-diagram...79 Listvyer...80 Listvyer...83 Datamappad listvy - teori... 84 Datamappad listvy - praktik...85 Scrollviews...86 Koppla ihop Datamappad listvy & Scrollviews...88 Karta...88 Design & övrig information 90 Appinformation...90 Design... 94 Val av mall... 94 Färgtema...96 Ikoninställningar...97 Bakgrundsinställningar...98 Ordna moduler...99 Typsnitt... 100...102 Information OpenRatio behöver...105 Publicering till egna konton...105
Förord Istället för att använda en dator för att surfa på nätet har det blivit mer och mer populärt att använda mobiltelefoner eller surfplattor. Flera länder rapporterade att under 2014 så hade mobilen gått om datorn som accesspunkt till nätet. Denna trend har resulterat i att det blivit allt viktigare för företag att skapa mobilvänliga versioner av sina sidor, eller skapa appar för att tillfredställa sina kunders behov. Denna manual lär dig hur du bygger, redigerar och publicerar en app med OpenRatios CMS. Den innehåller även information och tips som är användbara under processen, samt användbara marknadsstrategier och fel som bör undvikas. Lycka till! 7
Innan du börjar Innan du börjar Vi på OpenRatio har ämnat att göra vårt verktyg så intuitivt och enkelt som möjligt och ändå ge dig möjligheten att redigera din app på detaljnivå. Den här handboken är designad för att hjälpa dig bygga din app så smidigt och effektivt som möjligt. Här hittar du allt du behöver veta för att kunna jobba i vårt CMS, strategier innan & efter du lanserar din app och tips & relevant information som vi har samlat in under våra produktionsoch utvecklingsfaser. Allt för att du ska undvika att göra onödiga misstag när du väl börjar bygga din app! CMS CMS står för Content Management System och är enkelt uttryckt ett innehållshanteringssystem för att förenkla utveckling av ens applikation. Användaren behöver alltså inte kunna kodning, utan sköter det via ett WYSIWYG gränssnitt (What you see is what you get).? WYS IWYG 8
Innan du börjar I den här handboken kommer vi att visa hur du bygger en applikation. Vi går igenom varje steg i OpenRatios CMS, samt teorier, historik och allt annat du behöver veta om applikationsutveckling. Vi berör endast mycket snabbt verktyg som krävs för att uvveckla mer avancerade appar meddels programmering. Om du vill lära dig mer om API:er och avancerade funktioner kan du gå en av våra tvådagarskurser eller surfa in på: http://developers.openratio.com. 9
Bakgrund Bakgrund Appar upplever idag samma hype som webbsidor i slutet på 90-talet. Många frågar oss om vad som man bör tänka på när man skapar en app. Det är bäst att vi börjar från början. I det här kapitlet lär du dig: - Apparnas historia och bakgrund - Vad en app är - Vilka plattformar som finns - Hur apparnas framtid ser ut När apparna tog världen med storm! Sedan Apple introducerade sin Iphone 2007 har mobiltelefonimarknaden inte varit sig lik. Innan fokuserade man på megapixlar, hur mycket mobilerna rymde, och hur små de kunde bli. Detta har förändrats drastiskt, och idag är det istället utvecklarverktyg och marknadsplatserna för appar som står i centrum. Några år senare har denna marknad fullkomligt exploderat 10
Bakgrund Innan Iphone lanserades var tillverkarnas strategi att lansera en mobilmodell för varje typ av användare. En för musikälskaren, en för fotografen, en för dem som såg sin telefon som en modeaccessoar - alla med specialfunktioner för att attrahera en specifik målgrupp. Istället för att producera ännu en nischmobil, skapade Apple en skärm med en meny som användaren själv fick bestämma över. En så kallad vägg med appar, som gav användaren möjlighet att anpassa den enligt sina egna önskemål. Ett halvår senare gjorde Apple det möjligt för utvecklare att distribuera sina appar i App Store. Idag har app-marknaden fullkomligt exploderat, och prognoserna för smartphones pekar alltjämt spikrakt uppåt. Vad är en app? App är en förkortning för applikation, det vill säga ett program. Den här handboken fokuserar på ett program man installerar i sin smartphone eller surfplatta, men själva begreppet kan även omfatta program i datorer och i andra elektroniska apparater. En app kan vara allt från spel & underhållning, till kommunikationsverktyg, platsbaserade tjänster och varumärkesbyggare praktiskt taget vad som helst! En app kan vara nativ, vilket innebär att den utvecklats för en specifik plattform och då har skrivits i ett specifikt programmeringsspråk som på ett optimalt sätt kan utnyttja maskinvaran. På så sätt kan appen ha direkt åtkomst till maskinvarans inbyggda funktionaliteter, såsom en kamera eller ett gyroskop. Detta resulterar i bättre precision och hastighet, samt även access till vissa funktioner som inte går att anropa på andra sätt. En app kan även vara webb-baserad, vilket innebär att den är ett internetbaserat program som nås via en webbrowser. Det finns även hybridappar som kombinerar nativa funktioner med webbfunktionalitet. Möjligheten att ladda ner appar fanns redan innan Apples App Store, men det var i och med lanserandet av App Store och dess enkla & smidiga gränssnitt + möjligheten för utvecklare att sälja sina appar direkt via smartphones, som nedladdningsyran av appar satte igång. 11
Bakgrund Plattformar Appar som byggs och installeras (till skillnad från att köras i en webbläsare) måste vara skrivna specifikt för ett operativsystem. Det finns ett flertal operativsystem för smartphones, och i skrivandets stund är de två ledande produkterna Apples ios och Googles Android. Det finns naturligvis andra operativsytem, t.e.x RIMs BlackBerry OS och Microsoft s Windows Phone, men dessa har totalt mindre än 10 % av marknaden.* *Siffror från IDC smartphone OS Q1 share 2013 ios och BlackBerry OS är båda operativsystem som kommer från hårdvarutillverkare och som endast används i deras egna produkter. Android och Windows Phone tillhandahålls av mjukvarutillverkare, och används även av andra hårdvarutillverkare genom licensiering. Appar skrivs av programmerare i olika programmeringsspråk, specifika för varje operativsystem. När en app skrivs från grunden i ett programmeringsspråk så är den låst mot ett visst plattform. Någon form av översättning krävs alltid för att den ska kunna användas av ett flertal system. Vi presenterar olika lösningar på detta problem längre fram i denna guide. Apple App Store Google Play WP Marketplace Blackberry App World 12
Bakgrund Genomslag och prognoser för apparna Under 2010 laddades det ner ca 5 miljarder appar till smartphone, 2011 var siffran uppe i 25 miljarder nerladdade appar och 2012 hela 64 miljader. Analysbyrån Gartner spår* att omsättningen för 2014 kommer att landa på hela 185 miljarder dollar - det motsvarar ett mindre lands BNP. Något som är värt att tänka på när det kommer till dagens appmarknad är att majoriteten av smartphones som används är Androider, och även om betalningsviljan är lägre hos android-användare så är den större marknaden totalt sett mest lönsam. För att se det i retrospektiv så har det historiskt sett har ios-konsumenterna som vart villigare att betala för appar - nio av tio betalappar som laddades ner 2010 var genom Apples App Store. Även om Android är marknadsledande globalt sett kan regionala skillnader ibland göra det mer lönsamt att utveckla en app för iphone, sett till världsmarknaden så är Sverige befolkat av early adopters, som gärna lägger en stor del av sin disponibla inkomst på mobiltelefoner och kringutrsustning såsom appar. Konkurrensen bland kommersiella appar är stenhård med tusentals appar som släpps varje dag. Den marknad som först var som en guldrusch börjar nu mogna. Många företag kan idag när de tillfågas svara att de ser behov av att ha ett flertal appar inom en snar framtid. Trender såsom Mobile first, Second screen, Big data och öppna Api:n samverkar i just detta nu för att skapa möjligheter för utvecklare och varumärken. De största hindren är som alltid vad kalaset kan tänkas kosta och rädsla eller osäkerhet inför det som är nytt. Därför är det av yttersta vikt att du har din strategi klar innan du sätter igång och skapar en app. 2010: 5 M appar 2011: 25 M appar 2012: 64 M appar 2013: 102 M appar 2014: 139 M appar *http://www.gartner.com/newsroom/id/2592315 13
Företagsutveckling Företagsutveckling Hur lönsamt är det att utveckla appar, och hur mycket kan man egentligen tjäna på det? Det finns ett flertal aspekter som är avgörande för att kunna förutsäga om en app är en bra investering. I det här kapitlet lär du dig: - Om företagsutveckling och appar - Vad du kan tjäna på att utveckla en app - Den mest kostnadseffektiva lösningen när du producerar en app Bortglömd företagsutveckling Frågan är ofta inte hur man tjänar pengar på appar, utan vad ett företag har att tjäna på en app. Vi talar då om företagsutveckling i ett nytt sammanhang. Problemet är att man i det digitala landskapet ibland glömmer bort att tänka i termer som företagsutveckling och affärsmål. Alltför många sveps iväg av hypen att göra sin egen app eftersom alla andra gör det. Fundera gärna på om det finns möjlighet för dig att göra appar som andra företag gladeligen betalar dig för eftersom apparna löser deras interna, eller, externa kommunikationsproblem. Undersök företagets behov och svara på företagets grundläggande frågor kring objektiv - hur, vad, var, vilken målgrupp, till vilken nytta, och vilka affärsmål som ska uppnås. Utifrån denna synvinkel kan det hända att en annan marknadsföringskanal är mer relevant att använda än en app. Frågan är ofta inte hur man tjänar pengar på appar, utan vad ett företag har att tjäna på en app 14
Företagsutveckling Exempel på hur företag kan vinna på en ökad närvaro i smartphones kan man ta del av Googles senaste undersökningar*, som visar att 94 % av smartphones-användare söker lokal information på sina smartphones. Utav dessa 94 % använde 70 % informationen för att ringa företagen, 66 % för att besöka företagen. 90 % av samtliga använde informationen inom 24 timmar. Detta indikerar tydligt hur väsentligt det är att ha en bra beskrivning av företaget tillgängligt via en app eller en mobil hemsida, och vilken potential och genomslagskraft detta har när det kommer till effektiv marknadsföring. 94% gjorde en lokal sökning 70% ringde företaget 66% besökte företaget 90% använde infon inom 24h Vi märker att många företag utmanar och utvecklar företagets affärsmodell, struktur och rutiner alldeles för lite. De flesta företag är konservativa och för fokuserade på sina produkter och tjänster. Att ständigt utvärdera, utmana och utveckla affärsmodellen är idag lika viktigt och nödvändigt som att utveckla produkterna. Tips från Google själva på vad man bör fråga sig är t.ex.: - Hur ändrar mobilt vårt värde erbjudande (value proposition)? - Hur inverkar mobilt våra digitala destinationer? - Anpassar sig vår organisation till mobilt? - Hur bör vår marknadsföring anpassa sig till mobilt? - Hur kan vi återkoppla till en multi-skärms publik? *http://www.themobileplaybook.com/en-us/ 15
Företagsutveckling Lär dig att välja och välj bort Idag smälter närvaron på nätet samman med vårt dagliga liv mer än det någonsin gjort tidigare, och de digitala kanalerna verkar sömlöst med varandra. Våra valmöjligheter för oss som företag att kommunicera, marknadsföra och sälja vårt budskap och våra produkter har ökat både i mångfald och i komplexitet. Att tjäna pengar på appar Det innebär att det är essentiellt att utveckla en strategi som maximerar företagets digitala exponering som stöder de övergripande målen oavsett om det är genom att utveckla en app, eller genom ett annat alternativ. Är du en av många som är ute efter att tjäna svindlande summor på appar? Då bör du vara medveten om att det finns en utbredd mytbildning kring den ekonomiska potentialen i att lansera en app. För att kunna få ett realistiskt begrepp om hur mycket du skulle kunna tjäna på din app är det vitalt att först göra en uträkning baserad på appens potential. Om man gör ett antagande att det finns 500 000 Iphones på den svenska marknaden (vilket var fallet 2010), och att var tjugonde användare skulle köpa din app, kan vi skönja följande resultat: Priset på din app: 7 SEK Apples del av kakan (30%): 2.10 SEK Intäkt per såld app: 4.90 SEK Total intäkt per 25,000 sålda appar: 122 500 SEK (före vinstskatt) Där har du potentialen för din 7 kronors-app på svenska marknaden under förutsättningen att du kan få 5 % av I phone-användarna i Sverige att ladda ner din app. Siffran i sig är bra, men långt ifrån en mindre förmögenhet, speciellt om man räknar med mannatimmar. Skulle man nu lägga 3 månaders utvecklande på appen motsvarar detta en typisk lön för en anställd på snabbmatskedja. En annan viktig siffra man bör ha i minnet är att snittkompensationen 2011 var 682 USD per utvecklare. Men andra undersökningar visar också att 25 st (!) utvecklare drog in hälften av alla inkomster 2012.* * http://www.theregister.co.uk/2012/12/04/top_25_app_devs_earn_half_of_revenue/ 16
Företagsutveckling Så vad blir lösningen? Ofta måste kostnaden för en app hållas nere för att det ska vara värt att utveckla den. Om ditt mål med appen är att dra in pengar behöver du hitta en kostnadseffektiv lösning som resulterar i vinst på investerat kapital. En lösning är att försöka sänka produktionskostnaden. Genom att använda ett Cross Platform Development Tool (CPT) - såsom OpenRatios CMS - sänks genast kostnaden för utveckling drastiskt. Att utveckla en app i ett CPT kan jämföras med att skapa en webbsida genom en tjänst som Wordpress, vilket är väldigt kostnadseffektivt jämfört med att skapa den manuellt. Vi kommer att förklara närmre vad ett CPT är och hur det fungerar i kommande kapitel. Ett annat sätt företag löser problem på är att anpassa sina produkter till en global marknad snarare än endast en lokal marknad. Detta är dock inte en självklar lösning i alla lägen. Det kan vara viktigt att hålla i minne att företag har möjlighet att finansiera en app genom andra vägar än intäkter. Om en app kan ses som stärkande för ett varumärke eller som ett marknadsföringsverktyg behöver appen inte nödvändigtvis bära upp sin egen kostnad. Istället kan företaget lägga kostnaden för appen i sin marknadföringsbudget eller liknande vilket kan göra att det finns pengar för appen. 17
Programmeringsspråk Programmeringsspråk För att få ett program att utföra funktioner använder man sig av programmeringsspråk. Dagens programmerare använder sig mestadels av något som kallas för högnivåspråk. I det här kapitlet lär du dig: - Vad högnivåspråk är - Vad lågnivåspråk är - Skillnaden mellan låg- och högnivåspråk I datorernas begynnelse programmerade man genom att skapa kort med hål i (s.k. hålkort) för att få datorn att förstå vad den skulle göra. Allteftersom datorkraften utvecklades uppfanns minnen och hårddiskar för att sedan bli allmänt tillgängliga. Detta innebar att funktionerna som hålkorten tillhandahöll nu kunde göras elektroniska genom att man skrev dem i ett programmeringsspråk. På 50 70-talet använde man sig av så kallat lågnivåspråk, språk med låg abstraktionsnivå som kan sägas vara maskinnära eller hårdvarunära. Däremot var de inte så praktiska att använda för människor som var tvugna att instruera maskinerna i detalj. Idag skrivs de flesta datorprogram med vad vi kallar för högnivåspråk, vilket är namnet på programspråk som har en förhållandevis hög abstraktionsnivå. Högnivåspråk är uppbyggda på ett sätt som är mer förståeligt för en programmerare. Exempel på högnivåspråk är Java och Ruby. 18
Programmeringsspråk Varför olika programmeringsspråk? På grund av att lågnivåspråk måste vara precist för att det ska fungera är det mer tidsödande, och det krävs en avancerad programmerare för att kunna utnyttja den tillgängliga hårdvaran bättre och effektivare än med högnivåspråk där en kort rad kod kan instruera en maskin att utföra komplexa uppgifter. I och med att högnivåspråk inte förstås av datorer, kompileras (översätts) de antingen i utvecklingsmiljön eller i bakgrunden av maskinen som kör koden till maskinspråk. Under 50-70-talet, då man använde sig av lågnivåspråk, tog det för mycket processorkraft för att kunna kompilera eller köra kod i realtid. Dagens avancerade teknologi, och datorer med avsevärt starkare processorer, har resulterat i att högnivåspråk är nästintill standard när det kommer till programmering. Lågnivåspråk används nästan enbart för att programmera komponenter som t.ex. mikrochips. Maskinspråk Lågnivåspråk Högnivåspråk Det är egentligen inte rimligt att jämföra hög- och lågnivåspråk med varandra, då gränsen mellan de två är subjektiv. Men för att ge en enkel förklaring kan man säga att ju längre tid det tar för en programmerare att programmera en viss funktion, desto lägre nivå är det på programmeringsspråket. Skalan ändras dessutom beroende på tid och person. Ett exempel är C-språken som räknandes som högnivåspråk av de allra flesta programmerarna under 90-talet, medan de nu räknas som antingen låg- eller högnivåspråk beroende på vilken programmerare man frågar. 19
Utvecklingsverktyg Utvecklingsverktyg Trots att denna handbok fokuserar på OpenRatios CMS för att skapa, publicera och redigera appar, kan det vara intressant att få information om andra tillgängliga alternativ. För att få bästa resultat när du skapar en app från grunden, är det ultimata tillvägagångssättet att använda de olika plattformstillverkarnas egna utvecklingsmiljöer. Det är ett tidsödande alternativ, i och med att du som programmerare måste skriva om appen i varje plattforms programmeringsspråk, men det är det enda sättet om du vill optimera din app för varje plattform. Alla slutprodukter är alltid en avvägning mellan tiden du spenderar och slutresultatet, detta är något du tar ställning till vid val av utvecklings plattform och val av programmeringsspråk. I det här kapitlet går vi igenom: - Software Development Kit & Integrated Development Environment - Information om de ledande operativsystemen - Cross Platform Development Tools - Tekniska lösningar SDK För att du ska kunna programmera en app behöver du tillgång till plattformens Software Development Kit (SDK). Ett SDK innehåller de komponenter du behöver för att skapa en app, såsom bibliotek med koder, kompilerare och stödfiler. SDKn som kommer från OS-tillverkare är oftast gratis p.g.a. att företaget som äger plattformen vill att programmerare ska använda deras plattform för att skapa program och därmed öka deras attraktionskraft. En SDK som kommer från ett företag som förenklar din programmering mot en plattform är däremot oftast kostnadsbelagt. 20
Utvecklingsverktyg IDE En viktig komponent i processen när du utvecklar en app är en så kallad IDE (Integrated Development Environment). En IDE fungerar som en utvecklingsmiljö för appen och det är där du skriver din app. Ibland ingår det en IDE i ditt SDK, men vanligtvis måste du införskaffa rekommenderat IDE separat. När du laddat ner ditt SDK och det IDE som rekommenderas och/eller erbjuds, kan du inleda programmeringen av din app i det språk/de språk som stöds av plattformen. Mer om de ledande operativsystemen Företag : SDK: IDE: Kostnad: Programming language: Stöder: Apple ios SDK Xcode IDE Gratis* Objective-C C, C++, Objective-C++, Java, AppleScript, Python and Ruby *Även om Xcode är gratis behöver man betala 99 USD för en utvecklarlicens Företag: SDK: IDE: Kostnad: Programming language: Stöder: Google Google Android SDK Eclipse IDE (recommended) Open source Java C, C++ Android har också en NDK (Native Development Kit), med denna kan man utveckla specifika delar av ens app i C/C++ för ökad prestanda av vissa slags appar Företag: SDK: IDE: Kostnad: Programming language: Stöder: Windows Windows Phone 8 SDK Visual Studio IDE (rekommenderas) 5,000-150,000 SEK C# (+ XAML) eller Html5 + JavaScript (alternativt alla i symbios) XAML i samband med VB.NET och C++t Windows erbjuder också en fri version av sin IDE som heter Visual Studio Express, liknande deras betal-ide, men med begränsingar. 21
Utvecklingsverktyg Som ni sett stöder de tre största operativsystem C++, men då man i de flesta fall måste koda funktioner manuellt är detta inte att rekommendera. I jämförelse behöver man bara skriva enstaka rader med kod om appen är skapad i det språk som är optimalt för operativsystemet man använder. Det är viktigt att understryka att det inte finns ett magiskt språk som fungerar bäst i alla situationer, varje språk har både sina för- och nackdelar. Med mycket kunnande kan man skriva det mesta i t.ex. C++, men om man besitter den kunskapsnivån är det vanligtvis mer effektivt att lära sig ett nytt språk eller att använda sig av ett Cross Platform Development Tool (CPT). Cross Platform Development Tool (CPT) Ett CPT är ett verktyg som gör det möjligt att skapa en app som stöds av/kan porteras till olika plattformar, istället för att vara tvungen att skrivas om till varje enskild plattform. Ett CPT är ett tidseffektivt alternativ, både när du skapar appen, och även senare, när du vill uppdatera din app. Med ett CPT kan du spara åtskilliga timmars programmering genom att uppdatera alla plattformar på samma gång. C Nackdelen med att använda ett CPT, i jämförelse med att programmera din app separat för varje plattform med det specifika programmeringsspråk som plattformen stödjer, är att kvalitén försämras. Vad du väljer är en avvägningsfråga - har du tiden och kapitalet att skapa och uppdatera din app enskilt för varje plattform? Beroende på din nuvarande kunskapsnivå finns det en mängd olika valmöjligheter när det gäller CPTn, det finns otaliga i dagsläget, och det skapas ständigt nya. Vi kommer inte att gå igenom alla CPTn, utan istället förklara de olika tekniska tillvägagångssätten som finns för att sedan gå vidare och presentera de främsta inom varje kategori. P T Om du vill läsa mer om CPTn* kan du hitta mer information på http://www.visionmobile.com som måntligen skriver om utvecklarnas situation. http://www.visionmobile.com/product/developer-economics-2013-the-tools-report/ 22
Utvecklingsverktyg Tekniska lösningar en kort översikt App factories (appfabriker) Används av ickeutvecklare. Appar görs visuellt och utan kod. Source code translators (källkodsöversättare) Tar plattformsoberoende källkod och översätter det till inhemsk kod eller direkt till maskinkod. Runtimes (körning) En miljö som kör funktionerna och lyfter ut de från den underliggande plattformen. Web-to-native wrappers (webb till inhemsk paketerare) Använder sig av HTML & JavaScript med paketerad i ett nativt skal som gör att den kör som en inhemsk app. JavaScript frameworks (JavaScript skelett) JavaScript moduler som erbjuder tidsbesparing vid utveckling av användargränssnitt och andra komponenter - Med dessa slags CPTs så får man fram s.k. webb-apps (app i webbläsare) Ett CPT tillhandahåller tidseffektiva och nischade lösningar för att portera appar och beroende på ditt val av CPT kan du skapa en mer eller mindre avancerad app. Härnäst går vi nu igenom generella för- och nackdelar med CPTn. Tänk på att nedanstående produkter varierar i kvalité och det är upp till dig att tänka kritiskt och bedöma produkterna utifrån din egen utgångspunkt och perspektiv. App factories (appfabriker) Om du har datorvana, men inte är en programmerare, är App factories ett bra alternativ, då de oftast använder färdiga mallar. Det är oftast möjligt att lägga till databas-sökningar och koppla till andra tjänster, men för att lägga till mer avancerade funktioner måste man ha större kunskap i programmering. Fördelar 99% av befolkningen kan göra sin egna app Visuellt och är lätt att skaffa sig en överblick över slutresultat Väldigt låg instegtröskel Nackdelar Mer avancerade funktioner är oftast svåra att implementera. Eftersom porteringen går från visuellt till kod finns det större risk för sämre prestanda. Man är begränsad till funktionerna som tjänsten erbjuder och har begränsad tillgång till källkoden* *OBS! Det är viktigt att läsa på kontrakten, ifall du senare vill migrera appen senare utan källkod så är detta en omöjlighet. Riktar sig mot: icke-programmerare 23
Utvecklingsverktyg Appfabriker OpenRatio Wix Mobile Tiggzi Spot Specific Game Salad Red Foundry openratio.com mobile.wix.com tiggzi.com spotspecific.com gamesalad.com redfoundry.com Source code translators (källkodsöversättare) För dig som redan är en erfaren programmerare inom C/C++ etc., är Source Code Translators ett bra alternativ då du inte behöver lära dig helt nya, eller snarlika språk för specifika plattformar. C-språken används redan för att göra appar och program, och att översätta dessa resulterar ofta i en väldigt bra slutprodukt. Ofta använder man sig av element av runtime i samband med Source Code Translators. Fördelar För den som redan kan C/C++ eller dylika programmeringsspråk slipper man lära sig ett nytt språk. Bra prestanda och optimerad kod. Att skapa avancerade appar och spel är relativt lätt för den som kan programmera i språken som stöds. Nackdelar Hög instegströskel (man måste kunna programmera). Längre programmeringstid jämfört med t.ex App factories. Riktar sig mot: programmerare Source code translators (källkodsöversättare) Titianium Eqela Marmalade XMLVM http://www.appcelerator.com/titanium/titanium-studio/ eqela.com madewithmarmalade.com xmlvm.org 24
Utvecklingsverktyg Runtime Environments (körning) En Runtime teknologi fungerar enkelt beskrivet som en tolk. I Runtimes kan du som en programmerare skriva i t.ex. C++, vilket sedan översätts till det specifika språk den eftersökta plattformen förstår. Runtimes verkar som ett slags tolkningslager mellan koden och enheten i realtid. Runtimes har i princip samma för- och nackdelar som Source Code Translators och de används ofta tillsammans. Riktar sig mot: programmerare Runtime environments (körning) Adobe Air Corona AppMobi Unity Appcelerator Xamarin adobe.com/se/products/air.html coronalabs.com appmobi.com unity3d.com/unity appcelerator.com xamarin.com Web-to-native wrappers (webb till inhemsk paketerare) Web-to-Native-Wrappers är ett idealiskt verktyg för dig som redan kan HTML, JavaScript och CSS. Med dessa CPTn behöver du inte lära dig ännu ett programmeringsspråk, utan du kan skriva i t.ex. HTML, och sedan översätts det till den specifika appens kod. Fördelen är att en större del av befolkningen redan kan programmera i html och att språken utvecklas kontinuerligt för att utföra mer och mer avancerade funktioner. Fördelar Om du kan bygga en hemsida kan du nu även bygga en app Lägre instegtröskel (då fler programmerare kan html än C-språk). Programmeringen blir mer exakt än färdiga lösningar där du skapar visuellt. Nackdelar Mindre precist än programmera i C/C++. I och med att html körs i ett skal av app-kod, tar den direkta kompileringen prestanda vilket kan få appar att uppfattas som mer långsamma. Riktar sig mot: webb-utvecklare 25
Utvecklingsverktyg Exempel på Web-to-Native-Wrappers: Phonegap Build Uxebi Sencha Mosync (wormhole) build.phonegap.com uxebu.com sencha.com mosync.com JavaScript frameworks (JavaScript skelett) JavaScript används för att ge hemsidor interaktivitet och med JavaScripts moduler sparar du tid vid webbutveckling. När du använder JavaScript Frameworks programmerar du i HTML och JavaScript och resultatet blir en webb-app. Kör du den via en webb-to-native wrapper så har du en fått en native app istället. Fördelar Återigen slipper man lära sig ett annat språk, kan du html är det relativt lätt att lära sig detta system. Biblioteken med funktioner gör att man snabbt kommer igång med mindre kodning överhuvudtaget. Nackdelar Inte samma prestanda som att koda specifikt till olika plattformar Är mer av bibliotek som underlättar kodning, men mycket måste göras själv. Riktar sig mot: webb-utvecklare JavaScript frameworks (JavaScript skelett) jquery Mobile Sencha Touch DHTMLX Touch Zepto JS jquerymobile.com sencha.com/products/touch dhtmlx.com/touch zeptojs.com 26
Utvecklingsverktyg Tillläggsinformation Nu när du har en överblick över de olika teknologiska nischerna så kan det vara på sin plats att förklara vissa detaljer med ingående: Bara för att en viss CPT hör till en viss teknologisk nisch så betyder det ej att den är likvärdig en annan i samma nisch. Hur väl den passar just dina behov är något du själv måste ta ställning till - Du väljer verktyg utefter ditt behov av kvalité och funktionalitet. CPT och kategori Om du har testat någon av CPTn som vi gått igenom så kan du ha funderingar på om ett visst verktyg verkligen hör till den nishen som den är kategoriserad under. Alla dessa verktyg utvecklas, förfinas och ändras. Vissa uppköp sker inom branschen och vettiga funktioner växer fram. Listan som sammanställdes i de tidigare sidorna kategoriserade verktygen efter deras primära nish, även om detta kan komma att ändras allteftersom. Varning! Detta har sagts tidigare, men det är viktigt att betona återigen. En app kan vara ett tekniskt mästerverk men ÄNDÅ bli avslagen avv App Store. Det är viktigt att gå igenom Apples riktlinjer då det är allmänt känt att de är väldigt petiga (jämfört med Google) om vad som blir godkänt eller ej. En av de absolut vanligaste anledningen till avslagning är att appen inte tillför värde till användaren! * https://developer.apple.com/app-store/review/guidelines/ * https://play.google.com/about/developer-content-policy.html
Planering Planering Med facit i hand vet vi att hemsidor är här för att stanna, och att det krävs en väl genomtänkt plan för att man ska kunna dra nytta av dem inom företaget. Samma princip gäller utvecklingen av din app. I det här kapitlet går vi igenom: - Designa utifrån begränsningarna - Designa och designa om - Testa, testa, testa! - Sätt en deadline Del 1 : Less is more När du skapar en app är förarbetet det som tar längst tid och som, från ett strategiskt perspektiv, är mest komplicerat. Det är vanligt att vilja inkludera så många funktioner och detaljer som möjligt, men det är väldigt sällan det som ger bästa möjliga slutresultat. Det är viktigt att fokusera på de komponenter som utgör grunden i appen och inte haka upp sig på onödiga teknikaliteter och överflödiga element. Detta innebär att du istället kan fokusera på de nödvändiga funktionerna och försäkra dig om att kvalitén är i världsklass. Om du har för många funktioner och detaljer i din app kommer kvalitén att bli lidande och slutprodukten kommer inte att vara användarvänlig. Man skulle kunna säga att en bra app ska kännas för simpel less is more. 28
Planering Del 2 : Designa utifrån begränsningarna Det är stora skillnader mellan att skapa en app och att skapa en webbsida. En smartphone har avsevärt mindre skärm, långsammare uppkoppling & processor och ett mindre minne än en dator. Dessutom måste appen vara designad efter skärmstorleken, vilket i sin tur innebär att det inte får plats med lika många saker på skärmen på samma gång. På en exemplarisk app ska man kunna utföra den viktigaste funktionen med en eller två knapptryckningar helst ska det räcka med: 1 Att starta appen 2 Att trycka på en knapp för att göra det man vill 3 Att stänga ner appen Om du strävar efter att möta dessa parametrar, och vill bygga en app som är lättanvänd, men fortfarande innehåller allt, så bör du vara beredd på att lägga ner en hel del tid på processen. Tänk på t.ex. ios ändringen på kameran mellan v.4 -> v.5. Kameran länkades direkt på låst skärm. Och i.o.m. ändringen mellan v.6 -> v.7 så lades snabblänkar till ficklampa, miniräknare och mycket mycket mer. Allt för snabbhetens och enkelhetens skull, och på den banan har det fortsatt. Del 3 : Designa och designa om När du har fullbordat den övergripande designen är det dags att inleda det tekniska, själva implementeringen. Redan i ett tidigt skede så kommer de tekniska begränsningarna att göra sig påminda, appen kommer t.ex. stängas ned av systemet om du använder för mycket av det begränsade minnet. Det är även vanligt att märka att saker och ting tar för lång tid, när allt väl är på plats. Ofta används en app mindre än en minut åt gången, så det är avgörande att appen är snabb. Bortsett från att vara snabb, ska en bra app även vara enkel att använda, utföra de funktioner den utlovar och samtidigt vara snygg och snabb att ladda ner. Löser du denna ekvation så ha du skapat en app i världsklass! 29
Planering Del 4 : Testa, testa, testa! En väl testad app är en väl fungerande app. I dagens marknad finns det två stora OS. På den ena sidan Apple med ett fåtal olika Iphone-modeller med processorkraften som är största skillnadnad mellan modellerna (samt på senare tid, skärmstorleken). Det gör att det är relativt enkelt att skriva appar som fungerar väl på samtliga Iphone-modeller. För att vara effektiv både när det kommer till tid och kostnad, är det smart att testa din app på samtliga modeller innan du lanserar din app. En bra app ska starta snabbt, vara snabb och enkel att använda Andra smartphones, i synnerhet Androids, har olika skärmstorlek, olika upplösningar, olika mycket minne, snabbare eller långsammare processorer och fungerar olika beroende på hur tillverkaren har valt att tolka specifikationen. Dessa faktorer komplicerar utvecklingen av din app. Det är omöjligt att garantera att en app kommer att fungera på samtliga modeller, men OpenRatios system är designat för att fungera optimalt på så många olika skärmstorlekar som möjligt detta kallas för en responsive design. Det är viktigt att du testar hur appen ser ut nativt (via förhandsvisningsapparna) då det alltid (!) kommer att finnas skillnader mellan emulatorn (som visar hur appen ser ut via webbläsaren!) och slutprodukten så det är fortfarande viktigt att testa! Del 5 : Sätt en deadline Det kan vara av stor vikt att du sätter en deadline för när appen ska vara färdig att användas. Tänk på att det alltid finns en risk för att appen blir nekad av app store och i sådana fall behöver omarbetas och skickas in igen när det gäller ios-appar. Annat som kan hända är att du behöver skapa ett nytt utvecklarkonto för en app eller en kund vilket också kan dra ut på tiden. OpenRatio kan ibland också få in många uppladdningar av appar samtidigt vilket gör att din app placeras i kö varvid det tar ytterligare lite tid att få upp appen. 30
Marknadsplatser Marknadsplatser Varje marknadsplats har sina egna regler och riktlinjer för vad som får publiceras. I det här kapitlet går vi igenom de viktigaste riktlinjerna för de två största marknadsplatserna: - Apple App Store - Google Play Apple App Store Apple App Store är en mycket användar-anpassad marknadsplats, och du kan vara säker på att apparna är fria från spyware, fungerar bra och har ett bra upplägg. Som programmerare bör man däremot vara medveten om att Apple App Store är den marknadsplats som är mest rigid och har längst ledtid för godkännande av appar utav alla marknadsplatser, (ca 1-2 veckor). På grund av Apples rutiner, och att de inte vill att konsumenter ska associera företagets produkter med en dålig upplevelse, har de en omfattande lista på vad som måste följas och går igenom varje app grundligt innan den godkänns och publiceras. Om du väljer att publicera dina apparna genom OpenRatios utvecklar-id, innebär detta att du inte behöver följa Apples lista på regler minutiöst. Det räcker om du fyller i App-info (mer info om detta senare i senare kapitel) så utförligt som möjligt när du skapar appen, samt följer nedanstående regler. 32
Marknadsplatser Lista på vad som ej är godkänt hos Apple: Apple godkänner inte appar som är för simpla: En Om oss -app godkänns inte rakt av, den måste innehålla mer, t.ex. produkter och tjänster Man får ej felstava teknisk jargong. Ska du göra teknisk beskrivning, se till att den stämmer. Ingeting som låter våldsamt accepteras App som innehåller erotisk eller sexuellt innehåll App som inte är underhållande eller användbara på något sätt Upp till Apple att bestämma, tex finns det flertalet appar på virtuella tändare. App som lovar mer än vad den håller Appen ska kunna göra det som skrivits i beskrivningen du angett App som uppmuntrar till konsumtion av alkohol eller tobak Appen ska inte uppmuntra till detta, men att ha en lek med virtuell öl funkar t.ex. App som är för lik, andra, redan publicerade appar Återigen upp till Apple, finns olika appar av virtuella tändare, men av olika märken App som uppmuntrar till våld, blodsgjutelse, rasism eller kommunism Ju dyrare du prissatt din app, desto grundligare undersökning blir det När du har gått igenom att allt stämmer och sedan lämnat in appen är det bara att vänta. Ledtiden är beräknad till ungefär fem arbetsdagar, men det kan ibland ta upp till tre veckor beroende på hur du har prissatt den ju dyrare pris, desto grundligare undersökning. Apple har medgett att de har vissa gråa områden gällande riktlinjerna, men att det är enbart riktlinjer och att det faktiskt är upp till Apple att godkänna din app eller ej. Det är återigen viktigt att betona: Ifall din app skulle bli nekad så kommer vi göra vårt yttersta för att få den godkänd, men det är Apple som har det slutgiltiga ordet på om en app blir godkänd eller ej. Vill du läsa mer om Apple App Stores riktlinjer? https://developer.apple.com/app-store/review/guidelines/ * https://play.google.com/about/developer-content-policy.html 33
Marknadsplatser Google Play Google Play fungerar under förutsättningen att om användaren inte tycker om en app, laddar han/hon inte ner den. Google ser därför ingen anledning till att neka en app på grund av att den inte tillför något värde eller ett specifikt användningsområde. Även om Google har ökat sin säkerhet avsevärt under det senaste året, kan företagets appar ibland uppfattas som ogenomtänkta och innehålla spyware. Det positiva med Googles regler och rutiner är att det resulterar i en kort ledtid när det kommer till publiceringen av appar som i genom- snitt tar 1-2 timmar. En annan anledning till att Google har en snabb process är att det finns mer än 1400 smartphones som använder Android, och Google är medvetna om att det är svårt att producera en app som fungerar perfekt på alla olika enheter och därför måste uppdateras ofta. Tilläggas bör att Google kan välja att avlägsna en app om en användare är missnöjd och klagar på den. Utöver dessa skillnader är Googles riktlinjer väldigt lika Apples. Lista på vad som ej är godkänt hos Google Play:. Appar som innehåller erotisk eller sexuellt innehåll Appar som uppmuntrar till konsumtion av alkohol eller tobak Appar som uppmuntrar till våld, blodsgjutelse, rasism eller kommunism Man kan säga att medan Apple lägger ansvaret på dig som utvecklare att göra en bra produkt lägger Google ansvaret på dig som användare att välja om du vill ha produkten. Det gäller ändå att dubbelkolla ifall appen blir som du vill att den ska bli, med tanke på att Google inte kommer att säga till dig om det är något gravt fel på appen och innehållet. I linje med Googles syn på appar, är Android-appar (till skillnad från ios-appar) också tillåtna att publiceras på flera olika marknadsplatser utöver Google Play. GetJar är en populär nerladdningssajt för den asiatiska marknaden och Amazon är populär för den amerikanska marknaden. Till detta tillkommer ett stort antal andra marknadsplatser (även om Google Play fortfarande den största av de alla). Vill du läsa mer om Google plays riktlinjer? *https://play.google.com/about/developer-content-policy.html Vill du läsa mer om Apple App Stores riktlinjer? *https://developer.apple.com/app-store/review/guidelines/ 34
Privata Appstores Både Apple och Google tillåter att man lanserar appar via webb-nerladdning. För Apple så kräver det att man har ett såt kallat Enterprise -konto och i Google så kan man lansera appen från sitt vanliga utveklingskonto på sådant sätt. Det finns flera för- och nackdelar, om vi börjar med fördelarna så har vi dessa: - Man slipper ledtid på appen (ingen genomgång på vare sig innehåll eller andra slag genomförs. - Man har en intern butik för egna företaget som blir perfekt om man inte vill att alla ska ha åtgång till ens appar. Nackdelar: - Apparna kan ej lanserar på appstores (isf. få man införskaffa ett till publikt utvecklarkonto). - Vissa telefoner är låsta till att bara ladda ner publika appar (kund kan ställa in detta, men glöms oftast bort). - Kan ej ta betalt för appen. Beroende på vad man vill använda sin app till, så är detta en mer, eller mindre optimal lösning. Vill man lansera sin app privat, så kontakta kursläraren för detta.. 35
Reklam i appar Reklam i appar Det finns en rad olika sätt som du kan tjäna pengar på en app. Idag har både utvecklare och utgivare insett den finansiella potentialen i appar. Det uppenbara sättet att tjäna pengar på din app är att sälja den, men du kan även välja att skapa en gratis app och istället tjäna pengar på reklam i appen. I det här kapitlet lär vi oss om: - Mobila reklamnätverk - Sponsring - Gratis- och betalversioner av din app Mobila annonsnätverk Ett av de enklaste och minst komplicerade sätten att tjäna pengar på reklam i din app är att använda mobila reklamnätverk, t.ex. InMobi och Ad-mob. Nätverk som dessa erbjuder enkla integrationer med appar vilket gör det möjligt att erhålla inkomsten nästan omedelbart. Den enda nackdelen med att använda sig av mobila reklamnätverk är att CPMsatsen (Cost Per Mille eller Cost per Thousand Impressions) är låg, och om du är en oerfaren och okänd utvecklare blir inte inkomsten särskilt hög till att börja med. Naturligtvis blir inkomsten högre allteftersom din app/dina appar växer i popularitet. OpenRatios CMS kommer snart att stödja införsel av reklam i apparna, men observerar att detta inte finns i nuvarande system! Möjligheten finns också att använda sig av ett premium eller rik media reklamnätverk såsom Greystripe eller Widespace. Ett sådant reklamnätverk hjälper dig att både fånga och behålla intresse från dina 36
Reklam i appar användare, då reklamen är väldigt iögonfallande och därmed genererar fler antal klick och högre CPM. Nackdelen är att den här typen av reklam tar upp mer bandbredd för slutanvändaren och att dessa nätverk tenderar att endast arbeta med kända varumärken och kända publicister. Börja med det system som passar dig bäst Sponsring Om du vill försäkra dig om att få hög avkastning på din gratisapp är det bästa sättet att införskaffa en sponsor. Fördelen med att skapa en app för en annonsör är att det är relativt okomplicerat att integrera annonsörens märke i appen. Baksidan är att appen måste passa perfekt med märket och att det lätt blir en dyrbar och komplicerad affär, men andra ord är detta alternativ inte att rekommendera för amatörutvecklare. Gratis- och betal-versioner av din app Du kan erbjuda både en gratis- och en betal-version av din app. Detta hjälper dig att underhålla gratisversionen utan att behöva bekymra dig om appens avkastning. På detta sätt kan du involvera ett reklamnätverk utan att behöva dränera dina resurser. Det lönar sig att undersöka valmöjligheterna och utveckla en förståelse för alla för- och nackdelar innan du väljer de eller det reklamalternativ som passar bäst för din app. *Om du vill aktivera reklam i din app så tillhandahåller OpenRatio stöd för reklamnätverket Widespace, detta kräver att du har öppnat ett konto hos Widespace för att kunna koppla samman din app med ditt reklamkonto, samt att du blir godkänd av Widespace som annonsör. 37
Mobilwebb och plattformar Mobilwebb & plattformar Om du som företag inte har tid eller resurser att utveckla en nativ app finns det ännu ett alternativ som gör det möjligt för dig att vara synlig på smartphones en mobil webbapp. I det här kapitlet går vi in på hur webben används idag och du lär dig om mobila webbappar: - Hur används webben? - En mobil webbapp för alla plattformar Hur används webben? Dagens mobilanvändare förväntar sig att det ska finnas en app för varje tänkbart ändamål. Appar börjar användas som sökkanaler parallellt med sökmotorer som Google när människor snabbt vill hitta en lösning. Företagen har börjat inse detta och placerar därför appar i app stores - och ser till att de får en hög ranking och därmed blir funna. En nativ app är ett högst relevant verktyg för en konsument som är motiverad nog att ta sig tid att ladda hem appen. Konsumenter som däremot inte är säkra på vad för slags lösning de är ute efter, eller endast vill surfa på webben, kommer fortfarande att söka efter och landa på webbsidor. Appar börjar användas som sökkanaler parallellt med webben 38
Mobilwebb och plattformar Enligt Google säger 57 % av mobila konsumenter att de inte rekommenderar ett företag som inte har en mobilanpassad hemsida och 40 % har vid något tillfälle vänt sig till en konkurrent efter en dålig upplevelse med en illa anpassad hemsida. Företag som inte anpassar sin webbnärvaro till det mobila riskerar att förlora kunder. En mobil webapp för alla plattformar På grund av den konstant ökade efterfrågan på mobila appar har behovet av kompetens inom produktionen av appar ökat enormt. Kostnaderna för att utveckla en avancerad nativ app är dock fortfarande relativt stora. Som vi har gått igenom i föregående kapitel är CPTn ett bra alternativ för att sänka kostnaderna, ett annat alternativ är mobila webbappar. De moderna mobila webkit-webbläsarna är HTML5 kompatibla och har tillgång till en Web SQL-databas i browsern. Detta gör det möjligt, att med hjälp av Web SQL, skriva program i JavaScript, som sedan kan användas när internet inte är tillgängligt. Detta är kritiskt för en mobil app. De har även en relaterad funktion som kallas för cache manifest. Genom denna funktion kan webbsidan där programmet ligger beskriva vilka filer som ska lagras lokalt på mobilen. Vanligtvis lagrar man bilder, HTML, CSS och JavaScript-filer allt annat hämtas från servern. Detta gör det möjligt för en användare som är offline att öppna en websida, t.ex. från ett bokmärke i den mobila webbläsaren, eftersom den då är automatiskt sparad. I kombination med Web SQL innebär detta att webbsidor kan fungera nästan lika bra som en app, med många av dess grundfunktioner, men sällan använda sig av mer avancerade hårdvarufunktioner såsom accelerometer. När en app görs i OpenRatios CMS så skapas en mobil-webbversion i molnet. På lekmannaspråk skulle man kunna säga att detta är en hemsida som är gjord för att passa det minsta tekniska formatet som finns idag - en mobiltelefon.mobil-webbappen är responsiv, vilket innebär att innehållet skalas upp för att kunna visas även på större format, såsom en platta. Däremot ser det inte lika bra ut på t.ex. en laptop då denna har en horizontell skärm och även mycket högre skärmupplösning. 39
Mobilwebb och plattformar En utvecklare kan koppla ihop en webb-app med en vanlig hemsida så att besökare från mobiltelefoner och plattor omdirigeras till webb-appen istället för den regulära hemsidan. Detta görs genom att utvecklaren klistrar in en Javascript-kodsekvens vilken möjlliggör för igenkänning av den programvara som används. OpenRatio kan hjälpa till att göra detta mot en avgift (observera att koden tillhandahålls kostnadsfritt på www.openratio.com/handledning) Var medveten om att en responsiv mobil webb-app inte är att likställa med en responsiv webbsida, även om appen villar på en sida på internet. En responsiv webbsida är istället ofta en stor och mycket informationstyngd HTLM5 webb-sida som besitter möjligheten att skala ner sitt innehåll för att passa på olika mobila skärmstorlekar. Detta görs genom att bilder, rubriker och textinnehåll på sidan struktureras om eller förminskas. Några av fördelarna Utveckling av mobila webbappar har ett antal olika fördelar framför att utveckla varje version av applikationen separat: Man sänker drastiskt både utvecklings- och underhållskostnaderna då applikationen uppdateras på servern som den hämtades ifrån. Man undviker forcerad distribution (och eventuellt godkännande) via en specifik app store. Hela eller delar av applikationen kan användas i en vanlig webbläsare 40
41
Checklistor Checklistor Marknadsföring är en av de viktigaste komponenterna i processen av att skapa och lansera en app. Det är något du måste arbeta aktivt med hela tiden, både inför och efter lanseringen. Du måste nå ut till potentiella kunder så att de vet att din app finns, så att de kan välja att ladda ner den. I detta kapitel ger vi dig checklistor och tips för varje skede av processen. Planering Din app är ett varumärke och varje varumärke behöver en identitet. Namnet, loggan, ikonen och beskrivningen av din app är alla viktiga aspekter av ditt varumärkes identitet. När du väljer namn på din app är det viktigt att undvika ord som lätt felstavas och att försäkra dig om att vanliga felstavningar och synonymer är inkluderade i dina sökord. Din ikon bör vara relevant och kommunicera vilken typ av app det är. Samtidigt ska den motivera användare till att vilja ladda ner just din app. En kort, koncis och relevant beskrivning av din app är A och O; inled med att i en mening beskriva vad din app gör och vilka de viktigaste funktionerna är. App recensioner är ett av de bästa sätten att få värdefull och positiv marknadsföring utan att behöva investera något kapital. I din beskrivning är det klokt att citera positiva recensioner, och om du är i en situation där någon ska recensera din app professionellt är det viktigt att du försäkrar dig om att de har all relevant information de behöver. 42
Checklistor Inför lanseringen Det är stenhård konkurrans i app-världen, och med över miljonen appar på både App Store och Google Play är det otroligt viktigt att du marknadsför din app så att den inte försvinner i den eviga ström av nya appar som oavbrutet lanseras. Om du lyckas att få ett stort antal användare en kort tid efter lanseringen innebär detta att din app hamnar på topp listorna, och väl där kommer användare att hitta - och förhoppningsvis ladda ner den utan att du behöver investera i riktad marknadsföring. Innan du började bygga din app bestämde du dig förmodligen för vad appen ska göra. Nu är det dags att tänka på din nisch ur en annan synvinkel och för att göra det är det essentiellt att du frågar dig själv följande: Har din app massmarknadspotential? Är det en specifik grupp av människor du försöker nå? Vilken åldersgrupp fokuserar du på? Vilken typ av media är intressant för den här målgruppen, (webbsidor, bloggar, tidningar och artiklar etc)? Informationen du får genom att ställa dessa frågor är användbar både när du ska estimera hur mycket du kommer att tjäna på din app och vilka medier du ska fokusera din marknadsföring på. En annan essentiell aspekt är konkurrensen och hur stor marknadsdel dina konkurrenter har. När det handlar om företags-appar är de vanligtvis gratis, men om du vill sälja din app är det som regel klokt att börja med ett högre pris än du hade tänkt dig. Då har du möjligheten att marknadsföra kampanjer där priset antingen sänks, eller appen är gratis, under en viss period. Detta kommer att ge din app mer uppmärksamhet och dina användare mer motivation att ladda ner just din app. Med appar precis som med mycket annat så kommer kvalitet oftast före kvantitet -en app behöver vara good enough för att slutkonsumenten ska överväga att ladda hem den och sedan interagera med den. 43
Checklistor Fokusera på dina existerande kunder och kontakter genom att länka till App Store eller din mobila webbsida på din hemsida och i dina nyhetsbrev/email kampanjer. Länka till din app i andras reklam-appar. Synkronisera din marknadsföring med annan PR som du genomför, detta maximerar effekten av båda eventen. Undersök och utvärdera vilka kanaler du vill kommunicera genom inom Social Media. Generellt är Twitter, Facebook, LinkedIn och YouTube intressanta när det kommer till marknadsföring av appar. Anpassa dina e-mail kampanjer för mobila användare, var selektiv när du väljer bilder och försäkra dig om att länkarna i utskicken går till mobilvänliga webbsidor. Utvärdera din marknadsföring Vi har tidigare påpekat vikten av att utvärdera de olika stadierna av produktionen, lanseringen och marknadsföringen av din app. Det här är några viktiga saker att tänka på när du utvärderar din marknadsföring. För att få en realistisk bild på vad en annonskampanj genererar är det viktigt att spåra vilken del av försäljningen av din app som var ett direkt resultat av din kampanj. Marknadsföring handlar förstås inte bara om försäljning, det är viktigt att vara medveten om att en stor del av marknadsföring är att bygga ditt varumärke. Om en konsument känner igen ditt varumärke, är det större chans att denne köper din produkt, än om de inte känner igen varumärket. 44
Att bygga en app Utvecklarkonton Om man vill släppa appar utvecklade i OpenRatios system under eget namn eller vill börja utveckla appar genom programmering så kommer du behöva ett utvecklarkonto hos dom olika plattformstillverkarna. Vi kommer i detta kapitel att beskriva hur man går tillväga så att man nu enkelt kan införskaffa ett konto hos Apple & Google samt all praxis runt omkring. Om en app är lanserad under t.ex. någon av OpenRatios utvecklarkonton och man sedan vill ändra utgivare till sitt införskaffade konto, så går det alldeles utmärkt hos både Apple och Google. Dock ska man vara medveten om att all information innan bytet skedde kommer stanna kvar hos ursprungs-utvecklaren: Apple App Store Kommentarer som redan getts till appen försvinner Betyg försvinner också Säljsiffror stannar kvar hos ursprungs-kontot.. Google Play Apple erbjuder utvecklarkonton för studerande utan avgift. 46
Utvecklarkonton D-U-N-S Tidsåtgång: Pris: Länk: ca 1-4 arbetsdagar ca 250-500 kr exkl. moms http://www.dnbsweden.se/sv/informationssidor/kontakt/kontakt/ Duns är ett globalt organisationsnummer som tillhandahålls av D&B. Detta organisationsnummer är också ett krav för att skapa ett utvecklarkonto under företagsnamn hos Apple, och som används av Google för att underlätta utbetalningar ifall man laddat upp betalappar (det är dock inte ett krav från deras sida). Om D-U-N-S D-U-N-S Number är ett globalt identifikationsnummer som tilldelas av D&B och står för Data Universal Numbering System. Alla företag inklusive filialer och arbetsställen som finns i D&Bs databas som idag innehåller mer än 200 miljoner företag har ett D-U-N-S Number. För alla företag som har ett organisationsnummer, går det att få fram ett eget unikt DUNS nummer. D&B erbjuder två leveransalternativ på DUNS nummer: Alternativ 1: Normal leveranstid 3 arbetsdagar Kostnad: 250 kr exkl. moms per styck ELLER Alternativ 2:* Expressleverans, inom 24 timmar *(gäller arbetsdagar, helgdagar räknas inte in) Kostnad: 350 kr exkl. moms per styck och leverans För att skicka in en ansökan så besöker man http://www.dnbsweden.se/sv/informationssidor/kontakt/kontakt/ och fyller i ärendefältet Beställ D-U-N-S Nummer 47
Utvecklarkonton Apple Tidsåtgång: Pris: Länk: ca 1 arbetsdag ca 808-2400 kr ink moms (årlig avgift) https://developer.apple.com/programs/ios/ Apple erbjuder tre olika typer av utvecklarkonton. Både företag och individer skriver upp sig för olika kontotyper eftersom dessa har olika behov och användningsområden. Bra att veta innan vi börjar med Apple är att enskilda firmor räknas som individer och ej som företag av Apple. Detta betyder att app-säljaren är namnet på dig som privatperson. Vill du använda dig av Apples egna utvecklarverktyg så krävs det att du kör en mac (detta är enbart för dig som vill utveckla i Objective-C). Individ För den som är en individ eller enskild firma. Rättigheter: Den som skapat kontot är den enda som har tillåten till Apples programresurser Bra att veta: Appar släpps under namnet på den som äger kontot på App Store. Kostnad: 99 USD (808 kr enligt Apples växelkurs). Företag/Organisation För företag, organisationer av olika slag eller samriskföretag Rättigheter: Du kan lägga till ett flertal utvecklare som har tillgång till ditt kontos resurser Bra att veta: Om appar utvecklas av en byrå, så kan man lägga till dessa som under-leverantörer och på så sätt få eget namn på appen och ditt företagsnamn står som säljare på appstore Kostnad: 99 USD (808 kr enligt Apples växelkurs). Företag/Organisation - Enterprise* För företag, organisationer av olika slag eller samriskföretag Rättigheter: Du kan enbart skapa appar som lanseras utanför App Store direkt till medarbetares mobila enheter. Bra att veta: Enbart för den som vill skapa appar som säljs in-house, alltså till egna medarbetare. Vill man lansera appar till allmänheten behöver man lägga till ett vanligt organisationskonto. Kostnad: 299 USD (2400 kr enligt Apples växelkurs) Länk: https://developer.apple.com/programs/ios/enterprise/ 48
Utvecklarkonton Innan du börjar: Om du ska använda dig av företagskonton, så se till ha ditt D-U-N-S nummer tillgängligt. Ett tillval när man ska skapa utvecklarkonton är att skapa ett nytt apple-id. Vare sig man är individ eller företag så är det en bra idé att skapa ett alternativt apple-id än det nuvarande för att undvika att blanda in företagets konto med din personliga. Se till att ha all tillgänglig företagsinformation framme (För individkonto så fyller man i sin egen information) Ett kontokort kopplat till företaget (man har endast möjlighet att betala via kontokort eller banköverföring som tar längre tid i svenska Appstore) När du fyllt i all information så processas all information, och du bör få 1-2 stycken e-mail från Apple. 1 Välkommnar dig och ditt nya apple-id 2 Välkommnar dig som utvecklare och ger dig möjlighet att ladda ner Apples SDK. När du väl införskaffat ett utvecklarkonto så kan vi ladda upp appar som du gjort via OpenRatio under ditt egna namn. Det vi behöver för det är: Ditt apple-id och ditt lösen. Självklart använder vi oss inte av denna information mer än för att ladda upp appar när du begär det och uppdateringar p.g.a. OS-ändringar. Observera: Uppladdning av appar tar relativt lång tid att utföra (cirka 2 timmar för kvalificerad personal). Se därför till att du skickar med all nödvändig information (beskrivning, appnamn, splashschreen, ikon-bild och all annan möjlig information). Denna information kan ej ändras som informationen i appen (som sker i realtid), utan appen måste då återuppladdas. En återuppladdning ingår i studieerbjudande i tillägg till ursprungsuppladdningen till varlfri appstore. 49
Utvecklarkonton Google Play Tidsåtgång: Pris: Länk: under en timme ca 168 kr ink moms (årlig avgift) https://play.google.com/apps/publish/signup Det är något lättare att skapa ett utvecklarkonto på Google än hos Apple. Dels p.g.a att dom har enbart ett slags utvecklarkonto och dels p.g.a. att dom begär mycket mindre information. Rättigheter: Appar laddas upp under utvecklarnamnet du har väljer (inget organisationsnummer behövs). Innan du börjar: Välj ett utvecklarnamn som inte används av någon annan (förslagsvis samma som du har i Apple) Ha din e-post, webbside URL och telefonnummer tillgängligt. Ha ett kontokort kopplat till företaget tillgängligt Skapa gärna en e-post specifikt kopplat till utvecklarkontot då OpenRatio behöver tillgång till denna för att ladda upp. När du fyllt i all information så processas all information och du kan nu logga in på samma länk där du anmälde dig. När du väl införskaffat ett utvecklarkonto så kan vi ladda upp appar som du gjort via Open- Ratio under ditt egna namn. Det vi behöver för det är: E-posten du registrerade utvecklarkontot på och ditt lösen. Självklart använder vi oss inte av denna information mer än för att ladda upp appar när du begär det och uppdateringar p.g.a. OS-ändringar.. 50
51
Att använda CMS:et
Grundinformation Grundinformation Redigera bilder före uppladdning OpenRatios CMS är, med tanke på dess automationsnivå, lättanvänt. Dock så behöver innehållet i din app vara i linje med de specifikationer som presenteras nedan. Vi rekommenderar också att du utför viss redigering av dina bilder eftersom slutanvändaren kommer att lägga märke till varje detalj i dem. För att se en bilds pixeldimensioner och dess filstorlek, högerklicka (CTRL+klicka på en Mac) på den för att se dess info. Du kan använda bilder i formaten JPEG/JPG, eller PNG med en filstorlek på upp till (max) 2 MB. Totalt kan du använda upp till 50 MB för din app. App-logotypen behöver vara 1024x1024 pixlar. Detta är den bild som kommer representera appen i app stores. Bakgrundsbilder behöver ha en ratio på 3:5. Detta då standarden för smartphones och paddor är vertikal porträttorientation snarare än horizontell landskapsorientation. De bör vara i minst 600x1000 pixlar men får gärna vara större. Håll i minne att en bakgrundsbild bör vara så neutral som möjligt för att kontrastrera innehållet i förgrunden snarare än stjäla fokus. Bilder som du använder i modulerna i CMS:et bör vara minst 500 pixlar i bredd. Höjden kan variera eftersom dessa bilder även kan användas som banners. App-ikoner (appens knappar) behöver ha en storlek på 128x128 pixlar, vara i PNG-format och ha en transparent mask. Du kan finna ett stort utbud av app-ikoner på iconfinder.com (tänk på att ikonerna kan vara licensskyddade.) Du kan ladda upp modulikoner av olika färg och stolekt. Det viktiga är att fromatet är.png och att måtten är exakt fyrkantiga. Du kan även ändra färg på ikoner inne i CMS:et men var medveten om att den färg du väljer läggs över den färg som redan förekommer ( dvs en blå ikon som du lägger röd färg på blir gul). Se till att alla de ikoner du använder har samma färg (eller samma gråskala om de är svartvita) innan du laddar upp dem ifall du önskar ändra deras färg i CMS:et. För att redigera bilderna efter specifikationerna vi just nämnt kan du använda ett gratis online-program som Pixlr eller Gimp, eller betala för program som Pixelmator eller Photoshop. 54
Grundinformation I de flesta bildbehandlingsprogram kan du själv beskära bilden genom att använda beskärningsverktyget, cropping-tool, vars symbol ser ut så här Beskärningsverktyget är oftast förinställt på fri hand vilket kan göra att det är svårt att definiera exakt det antal pixlar du vill att beskärningsområdet ska ha. Börja därför med att låsa beskärningsverktyget så att det automatiskt beskär bilden i de dimensioner du önskar. Du gör detta genom att skriva in dimensionerna i de två rutorna avsedda för detta ändamål som du ser när du valt beskärningsverktyget. Sedan behöver du bara välja den del av bilden du vill beskära. Avancerat: Du behöver inte oroa dig för upplösninge eftersom mobila enheter skalar bilden beroende på dess individuella pixeldensitet. Så det spelar ingen roll om en bild är på 72 ppi eller 300 ppi. Endast det totala antalet pixlar är vad som är viktigt. Vad händer med bilder som du laddar upp? I skrivande stund bör man testa en app på ca 180 olika mobila enheter för att stödja 90% av alla tillgängliga format. Detta gäller såklart inte enbart skärmmått utan också andra kriterier som ram-minne och operativsystem som krävs för att en app sla fungera optimalt. För att dina bilder ska passa smartphone-formaten så bra som möjligt skalar OpenRatios system dina bilder automatiskt. Bilderna skalas automatisk om till ration 3:5 vid uppladdning (vilket är ett format som passar de flesta smartphones och plattor) och vidare så anpassar systemet även dina bilder så att de passar den specifika skärmen de visas i, detta innebär att bilderna ankras på enhetens översta vänstra hörn och förstoras för att undvika att någon del av enhetens skärm ej får någon bakgrundsbild. Detta leder ibland till att bilden ibland beskärs på botten för att passa enhetens skärm (eftersom det finns otroligt många skärmstorlekar att välja mellan så är detta bästa praxis). Vi rekommenderar att du namsätter och sparar dina bilder i separat folder innan du börjar bygga din app. Att hålla ordning och reda på din komponenter hjälper dig i appbyggandet både nu och senare vid uppdateringar.! Extra Skärmbild på dina app-bilder Denna kapitel fokuserar på OpenRatios CMS. Om du eftersöker mer generell information om att arbeta med bilder, API-dokumentation etc, så kan du finna detta på: www.openratio.com/handledning 55
Grundinformation Inloggning Det är enkelt att logga in i OpenRatios CMS. Öppna din uppdaterade webb-läsare (undvik att använda Internet Explorer) och gå till den adress som du fått av OpenRatio, oftast är det http://beta.openratio.com eller http:// platform.openratio.com. Där anger du din e-post adress i första fältet, och abcde i andra fältet. Du kan ändra ditt lösenord och annan information när du är inloggad. Login-vyn 56
Grundinformation Hemskärm När du har loggat in kommer du till OpenRatios hemskärm. Där kan du se ditt namn/företagsnamn längst uppe i vänstra hörnet. När du skapar appar dina appar kan du alltid hitta dem på din hemskärm. Din hemskärm 57
Grundinformation Redigera din information För att redigera din profil trycker du helt enkelt på Redigera profil. Här kan du lägga till eller ändra information som inte stämmer eller saknas. Om allting stämmer behöver du bara ändra det generiska lösenordet du automatiskt blev tilldelad, sedan sparar du informationen genom att trycka på spara konto. För att komma tillbaka till hemskärmen trycker du på OpenRatios logotyp som du hittar högst upp i vänstra hörnet. Redigera din profil 58
Grundinformation Information om din app Nu ska vi börja bygga din app! När du är tillbaka på hemskärmen trycker du på Lägg till ny app, där du fyller i din start-information om din app/mobila hemsida. Det ENDA som behövs i startskedet är namnet på appen! Här följer en noggrann genomgång av varje fält: Applikationsnamn: Namnet på din app (obligatoriskt) E-post: Denna ska användas av din kollega, eller person som ska kunna redigera appen (utöver dig) Lösenord: Kopplat till e-postadressen ovan Bekräfta Lösenord: Skriv in lösenordet igen för att se till att det blev rättstavad Klientlogin: E-post och lösen är enbart för klient-login, alltså om du vill att någon annan person ska ha tillgång till att kunna redigera informationen (alltså ej designen) i din app via edu-app.openratio.com. 59
Grundinformation Moduler I detta kapitel visar vi de funktioner CMS:et kan användas för, Modul för Modul. Din app och hemskärmen Du hittar menyn på hemskärmen och kommer att se följande val: Publicera: Här publicerar du manuellt din app till den/de marknadsplats/er du valt i ett tidigare skede. - mejla ruben@openratio för att säkerställa att du vill ladda upp din app Radera: Här kan du radera din app. Observera att när du väl har raderat din app så går den inte att få tillbaka. Redigera app-info: Här redigerar du fullständiga appinformationen för uppladdnind Gå till CMS: Här lägger du till funktioner och innehåll i din app. Se i mobilt webb: Visar ungefärligt hur appen kommmer att se ut i en webbläsare. Se i mobiltelefon: Visar ungefärligt hur appen kommer att se ut i webbläsaren i en telefon. Se i platta: Visar ungefärligt hur att se i webbläsaren i en tablet/platta. "Hemskärm och rullmeny" 60
Grundinformation Dashboard När du klickar på CMS kommer du till första sidan som kallas för Dashboard och är röd markerad. Det här är din översiktssida där du kan se vad din app innehåller. Du kan även skicka push notifikationer till dina användare från den här sidan. För att lägga till innehåll i din app trycker du på knappen som heter Lägg till..., (det finns även en genväg till denna funktion på fliken Innehåll ). Du har valet att lägga till flera innehållssidor i varje sektion/funktion, och du kan även kategorisera de olika sidorna som du vill. I Dashbord ser du även hur mycket innehåll varje sektion innehåller. "Dashboard - utan moduler 61
Grundinformation "Dashboard - med moduler 62
Grundinformation Mobilwebb-simulatorn Medan din app skapas kan du se hur den kommer att se ut som mobilwebb-version i simulatorförnstret till höger på skärmen (d.v.s. om man öppnar din app via telefonens webbläsare). Var medveten om att simulatorn är ett online-verktyg som visar resultatet för HTML5, och din app kommer att se annorlunda ut som nativ version. För att kunna se se appen mer som den ser ut när den är nedladdad, se kapitlet Preview. Simulatorn kommer nu att visa den eller de moduler du skapat som knappar på den simulerade iphone-skärmen. Du kan klicka för att öppna och visa innehåll i simulationen och kan även scrolla mellan innehåll där så är möjligt. Bredvid knappen Simulera nu finns en meny där du kan förhandsgranska din app online. Genom att klicka på något av valen Se i mobilt webb, Se i mobiltelefon eller Se i platta öppnas webb-appen i ett separat fönster. Det första valet visar den mobila webb-appen i ett vanligt webbläsarfönster. Här kan du själv minska storleken på fönstret för att skapa den formatöverblick du önskar. De övriga två valen visar appen simulerad i en iphone respektive en ipad. Samtliga tre val ger dig tillgång till en webbadress då de öppnas i ett nytt fönster. Detta kan vara användbart då du kan dela med dig av länken till kollegor eller kunder så de kan titta på appen och ge dig feedback medan du bygger den. De första 6 tecknen i webbadressen är också det som kallas din apps slugline, vilket är en unik kod som används för att identifiera din app (se kapitlet om förhandsvisning). Bästa praxis är att använda sig av simulatorn för att få en överblick för ens app, men att alltid se detaljerna på sin förhandsvisningsapp (se kapitlet om förhandsvisning). *observera att i skrivande stund (7/11-2014) så går programmerarna igenom simulatorkoden, vilket gör att den inte alltid fungerar optimalt. 63
Att bygga en app Moduler Du finner samtliga moduler under Lägg till innehåll. Vi kommer att gå igenom strukturen för CMSet, och översiktligt på varje modul och dess funktionalitet. Glöm inte att spara efter att du lagt till innehåll i en modul, annars går allt arbete till spillo! 64
Moduler Rich text pages Rich Text -redigeraren fungerar utmärkt för att skapa informationsrika avsnitt så som företragspresentationer eller produktbeskrivningar. Modulen behåller all formatering så som kursivering eller hyperlänkar när du klistrar in en text i textfältet. Var medveten om att den alltså även behåller sådant som radavstånd och linjebredd, så om du tar en text från en hemsida kan det hända att texten tar upp en för stor yta för att på ett snyggt sätt kunna passa till appen, vilket medför att du själv måste ändra i html-koden. Redigeraren ger dig även möjlighet att ändra typsnitt, färg och storlek på din text. Den är även HTMLkompatibel om du väljer att strukturera din text i HTML. Du kan i denna modul förutom text även välja att ladda upp en header, en bakgrundsbild, eller både och. Bakgrundsbilden skalas automatiskt till ration 3:5, men CMS:et finjusterar också bilden för den device bilden visas på. Om du väljer att inte ladda upp en bild kommer modulen att behålla din apps temafärg (du kan välja att ändra din temafärg i designdelen, grundinställningen är grå). Om du fyller i rutan skicka push notifiering kommer din nativa version av appen vara inställd på att skicka en notis till användare som laddar ner appen och accepterar att ta emot push-meddelanden. Vi rekommenderar att du avvaktar med att använda denna funktion tills dess att din app lanserats, såvida du inte har en strategisk tanke med att de ges ett meddelande första gången de använder appen. Så fort som du lagt till en modul kan du klicka på hemskärmen för att se modulen och lägga till nya. Avancerat: Du kan även göra ditt eget klickbara telefonnr i denna modul, genom att skriva tel:+ följt av numret i URL fältet under Add/edit link i redigeraren. Du kan ovkså byta ut tel mot sms för att öppna sms-appen, eller mailto för att öppna mejl-klienten. Felsökning: Skulle inte länkarna fungera, gå in i html-editorn och säkerställ att koden stämmer mot ovan (i vissa fall så ersätts av &qout; som är html-motsvarigheten av ). 65
Moduler Rich Text Editor. 66
Moduler Basic pages Basic pages är en mindre avancerad version av textredigeraren. Här kan du skapa enklare sidor med text och lägga till både header och bakgrundsbilder. Du kan däremot inte ändra typsnittet eller använda HTML funktionaliteten. Simple pages är bra om du är nöjd med appens genomgående typsnitt. Man kan säga att simple pages motsvarar en skrivmaskin, medan rich pages motsvarar en dator. En bra funktion med denna modul är att den rensar all formatering om du klippt och klistrat innehåll från en hemsida. Simple pages. 67
Moduler Embed code Embed code (är tillsammans med blanka sidor) något mer avancerat än färdiga mallar. Både nybörjare och avancerade utvecklare kan använda den för flertalet funktionaliteter. Här kan du bädda in kod som innehåller t.ex. videoklipp, kartor, bokningssystem, positionering osv. Du kan införskaffa dessa koder från källor som Google, video-siter och större företag som har utvecklat kod för diverse funktioner. Sök efter embed code eller iframe och klipp och klistra, alternativt bygg din egen kod. Du kan även lägga till text och ändra layout in Embed code, detta måste dock redigeras i HTML. Avancerade användare kan skapa sin egen HTML-kod med inline CSS och/eller Javascript. Embed Code. 68
Moduler Events I Events kan du lägga till kommande event. Du kan även lägga till en header och en bakgrundsbild för ditt event. Denna sektion används för kommande arrangemang som du vill marknadsföra, samtidigt visar du gästerna all nödvändig info som tid, plats och karta. Events. 69
Moduler Facebook Här kan du länka till din eller ditt företags Facebook profil. Du väljer vad den här sektionen ska heta själv, men vi rekommenderar att du helt enkelt kallar den för Facebook. Du kommer att få RSS flöden från din Facebook sida, vilket innebär att användare kan se inlägg som du och ditt Facebook-nätverk lämnar. Vilken facebook-sida som helst kan användas, under förutsättning att sidans ägare har skapat ett användarnamn för sidan under Basic information i sina Facebook-inställningar. Klipp in sidans URL (t.ex. http://www.facebook.com/openratio) i modulen. Tänk på att adressen ska inledas med http och inte https (om du behöver så ta bort s -et.) Facebook. 70
Moduler Flickr Om du har ett Flickr konto kan du länka till det här, vilket innebär att din app kommer åt dina foton på Flickr. Allt du behöver göra är att skriva in ditt Flickr-användarnamn och döpa ditt album. Flickr. 71
Moduler Picture galleries Om du inte har, eller vill använda, ett Flickr konto för dina bilder så kan du istället välja att använda dig av Picture galleries. När du lägger till den här sektionen så kan du välja att visa dina bilder antingen som en slide-show eller som ett album. När du laddar upp flera bilder samtidigt tar det längre tid än annars så ha tålamod. Se till att alla bilder är i JPG/JPEG eller PNG-format och var för sig är under 2 MB i storlek. Om endast en bild är felaktig så kommer hela processen att hänga sig. Observera att det är viktigt att göra en bra avvägning mellan pixelstorlek och hur många MB en bild är. I de allra flesta fallen så fungerar t.e.x. en 500 kb bild lika bra som en 2 MB bild. Bildgallerier 72
Moduler Links I den här sektionen kan du till exempel länka till dina partners och till din Facebook-sida. Du kan välja att öppna hemsidorna du länkar till i själva appen, eller att öppna den i ett nytt fönster i en webbläsare. Tänk på att länka till en responsiv hemsida för bästa användarupplevelse. Links. 73
Moduler Contact Här kan du lägga till dina eller ett företags kontaktuppgifter. Information du lägger in, såsom mejladresser eller telefonnummer, är klickbara. Om du använder en telefon kan du alltså klicka på ett nummer för uppringning eller för att skicka ett mejl. Lägg till ditt eller företagets namn. Adress som öppnas upp i karta om användaren väljer det. E-post som är klickbar för att direkt skickas till mejlklienten. Telefonnummer också den klickbar för snabb uppringning. Hemsida som är klickbar för snabb åtkomst. På beskrivning kan du välja att lägga din egna beskrivning av företaget, man redigerar i Rich Text Editor och har rätt så mycket valmöjligheter. Du kan lägga till en bakgrundsbild för att utsmycka sidan och har du flertalet kontaktuppgifter/adresser så lägger du bara till nytt innehåll - användarna kommer då direkt till kartan för att välja själva den filial som är närmst dem. Kontakt. 74
Moduler RSS RSSer är ett bra sätt att insamla nyheter från en extern leverantör. Viktigt att veta i detta sammanhang är att rss-er skickas ut och tas emot i XML-format, och att nyhetssidor lägger in en rubrik och en kort sammanfattning om nyheten. Är man intresserad av att läsa hela nyheten måste man länkas till ursprungs-hemsidan. Detta görs för att nyhetsleverantörerna både vill trumma ut nyheterna som de har på sin sajt men samtidigt också vill få besökarna att komma dit. Liknande kan man tänka om man är bloggare och vill få ut sina senaste inlägg. Då får man rubriken och en kort sammanfattning - denna funktionalitet finns inbyggd i de flesta bloggsystemen och wordpress. RSS. 75
Moduler Basic Youtube YouTube är i dagsläget den mest populära siten där man kan ladda upp, dela och se på videofilmer. Här lägger du till enskilda videofilmer, till skillnad från i Vimeo sektionen, där du lägger till hela ditt bibliotek. För att lägga till en videofilm väljer du namn på din film och klistrar sedan in URL-adressen till videon du vill lägga till. Notera att på grund av arkitekturen så ser den mobila webb versionen och native versionen olika ut. I den mobila webb versionen visas filmen omedelbart i en svart ram och i native versionen visas filmen med alla YouTubes funktioner. Youtube video. 76
Moduler Staff Här fyller du i dina/dina medarbetares uppgifter, för att dina användare enkelt ska kunna kontakta dig/dina medarbetare. Även här kan användaren klicka på alla uppgifter och du kan lägga till så många medar- betare du vill. Du har även möjligheten att välja i vilken ordning dina medarbetare läggs i listan och alla bilder får automatiskt samma storlek. Om du har en stor mängd medarbetare är det en bra idé att skapa kategorier för dina slutanvändares bekvämlighet, t.ex. sälj, kundsupport, tekniskt support etc. Medarbetare. 77
Moduler YouTube (Channels) Denna sektion har samma grundfunktionalitet som Vimeo-sektionen, och du lägger helt enkelt till hela ditt YouTube-bibliotek när du anger ditt användarnamn. Ytterligare en funktion för denna modul är att du istället för användarnamn kan välja att ange ett sökord och definiera om sökningen ska begränsas till kanaler som innehåller sökordet (välj channel ) eller till individuella videos som innehåller sökordet (välj search ). På så sätt kan du välja att skapa en egen kanal i form av ett flöde utifrån ett ämne du tycker är intressant. Youtube kanal. 78
Moduler Hierarkier och träd-diagram Avsnitten som förklaras hädanefter kommer att vara något mer avancerade. Vi kommer därför att snabbt göra en avstickare, och gå igenom terminologi för hierarkier och listor för att underlätta det abstrakta tänkandet och sedan skapa listor. Hierarkiska listor utgörs av en, eller, flera topp-nivå noder (kallad förälder/parent). Och varje nod kan ha en nod under sig (kallad barn/child) eller var så kallad slutnod. Lättaste sättet att förställa sig detta är se listor som ett träd-diagram, varje steg nedåt är en ny nivå i hierarkin (se bild nedan). En nod: är ett objekt i en lista En förälder (-nod): är en nod med bar/children och kan klickas vidare Ett barn (-nod): Är en nod som har en förälder Öppen nod: är en nod med barn, och första nivån av barn syns när man klickar denna (beroende på nivån av hierarki på ens lista så kan man namnge en nod på sådant sätt) Slutnod: är en nod utan barn, alltså så långt man kan klicka sig in i en lista 79
Moduler Listvyer En viktig del i OpenRatios CMS, är att skapa listor för att tillåta segmentering av närliggande ämnen i de olika sektionerna. För att skapa en lista är det optimalt att tänka till i förväg hur innehållsstrukturen ska se ut i ens app. För att underlätta tankeprocessen på denna något abstrakta del så kommer jag ta till ett exempel. Exempel: Företag X Företag X har kontor över hela Sverige, och varje kontor har samma avdelningar. Avdelningarna ser ut som sådan: 1. Kundsupport 2. Teknisk support 3. Press-tjänst. Vi vill alltså skapa en sektion som heter Kontakt (nivå 1), när man trycker denna så ska man komma till en lista som visar de olika kontoren (nivå 2) -> för att sedan klicka på kontoret -> som visar de 3 olika avdelningarna (nivå 3) -> som i sin tur visar sin specifika information (nivå 4). För att göra detta så börjar vi med att säga att vi till systemet att vi ska ha en lista genom att utgå från mallen ListView. Denna mall kommer säga att allt efter denna kommer att sättas in i en lista. Det är viktigt att skilja på en mall som du fyller information i direkt (en enkel vy) och en element-container som i sig inte fylls i med objekt, utan tar sin information från efterföljande noder såsom denna (exempel på dessa är listvyer, karta och data-mappade listvyer). 80
Moduler Med detta sagt, så skapar vi nu en listvy på lägg till ny sektion, och de enda valen vi har tillgängliga är dessa: 1.Titeln på listan Denna kommer att dyka upp på listans header 2.Sökbar När denna funktion är helt implmenterad på klienterna, kommer man som appanvändare kunna söka efter objekt i denna lista ifall den är ibockad 3.Listbakgrund Kunna ladda upp bild som blir bakgrund på listan Med denna listvy så kan vi nu trycka på + på både vänster alternativt höger sida av topp fliken, klickar vi på pluset till vänster, så skapar vi en förälder-nod, och nuvarande vy blir omvandlad till barn. Och klickar vi till höger, så skapar vi slutnoder som alltså fyll med den specifika informationen som man vill att användaren ska ha (alternativt lägger till en barnlistvy). Föräldernod (Vänster plus-flik) Ifall du trycker på vänstra pluset så skapar du ännu en topp-hierarki i listan. Det betyder att istället för att ha en lista som pekar till slutnoder, så får du nu en lista som pekar till ännu en lista (ännu en nivå i hierarkin) Det som händer i praktiken är att en exakt likadan vy skapas, alltså en element-container, som säger att en lista kommer hädanefter. Och den första vyn du skapade har nu omvandlats till en barnnod, och du kan nu specificera föräldern. Detta görs i en dropdownmeny som nu dykt upp i original vyn. Slutnod (Höger plus-flik) Ifall du trycker på högra pluset så skapar du en slutnod. Ett objekt som ska populera din lista och ha all nödvändig information. T.ex. en Rich Text-sida som innehåller all nödvändig information angående kontoren/avdelningen. eller ännu en nivå nedåt i listan. Du måste alltid koppla en nod till en förälder, om detta inte görs så kommer den inte att dyka upp i en lista. Detta görs sedvanligt i en dropdown-meny där man specificerar förälder-nod. Om vi har följt stegen ovan framöver, så bör vi ha 4 nivåer i vår hierarki: Kontakt -> Kontor -> Avdelningar -> Slutobjekt Kontakt: Skapas när vi klickar lägg till en ny sektion och la till en mall listvy Kontor: Läggs till genom att klicka på högerplusflik för att lägga till ännu en list-nivå nedåt. Avdelningar: Är den sista list-nivån som skapas Slutobjekt: Är t.ex. en Rich text sida, eller annan slutnod som vi fyller med information. 81
Moduler Så här ser vyn ut när vi lagt till första vyn i listan (Bild på sida 80). När vi vill utöka listan till att stödja 4 olika nivåer, så måste vi jobba oss nedåt i hierarkin. och skapa barn-noder till förälder-noden vi precis skapade. För att göra det klickar vi på pluset till höger. När det är gjort så bör du få en vy som på bilden till höger. Eftersom denna lista är ett barn till första modulen vi skapade. Så kan vi nu välja att lägga till flera innehållsobjekt (representeras av knappen att vi nu kan lägga till innehåll i mallen listvy, detta kunde vi inte göra när vi skapade först)! En förälder-nod kan ha flera barn, men en barn-nod kan enbart ha en förälder. Nu är det dags att lägga till sista listvymallen. Vi döper denna till avdelningar, eftersom det är här vi kommer lägga till dom olika avdelningarna i Företag X För att gå över stegen igen: Fliken längst till vänster är enbart en element-container, och säger att en lista bör skapas av efterföljande objekt. Listan med kontor tas från fliken lista kontor, och när man klickat in sig där, kommer vi till objekten som vi fyller i på fliken avdelningar. 82
Moduler Listvyer Vi har nu skapat alla listvyer, och ska börja populera dessa med slutnoder. I detta exempelfall så väljer jag att lägga till mallar av typen Rich text. Så här ser vyn ut när jag fyller innehåll, och väljer också att föräldern är Kundsupport. Skulle jag inte välja föräldernod, så kommer inte detta innehåll att dyka upp i listan, då den inte förstår var den ska visas. I appen så blir det så att man klickar på sektionen kontakt, denna visar då en lista på städer, klickar man på en av städerna kommer dom olika avdelningarna fram, och slutligen, klickar man på någon av dessa så dyker medarbetare upp. Nu är det bara upp till dig att populera listan med innehåll! 83
Moduler Datamappad listvy - teori Om man har ett större företag eller tycker att det är roligt med databaser och har ofantligt mycket information som man inte vill överföra manuellt (såsom beskrivet i tidigare avsnitt), så kan man alltid koppla sin app till en extern informationskälla. Komplexiteten på en data-mappad listvy är inte mycket högre än en vanlig listvy för appskaparen, dock måste man ha tillgång till extern informationskälla i form av json eller XML (som i sig är komplext att skapa) Json och XML är språk, eller rättare sagt standards, som bär med sig information som i detta fall ska presenteras i din app. Json är lättare och används mestadels av appar, medans XML innehåller oftast mer information och är tyngre (med lättare och tyngre, menas i detta fall hur stora filerna är som ska överföras). För att datamappa en listvy måste du då ha en källa som ska datamappas, samt att strukturen på dessa ska vara korrekt. För att en automatiskt genererad lista ska kunna skapas så vill du då mappa den översta hierarkiska nivån. I XML så gör dess inneboende uppbyggnad att den börjar direkt med att nämna den översta nivån, för att sedan gräva sig nedåt i hierarkin. I Json så måste man dock skapa en övergripande kategori, en så kallad array som det kallas, innan man kan datamappa och skapa en automatiskt genererad lista. För att ni ska kunna testa detta, så tillhandahålls här två olika informationskällor, en Json och en XML, båda mappningsbara: Json (med array): http://itunes.apple.com/search?media=movie&entity=movie&attribute=movieterm&limit=10&term=iron%20man&country=us XML: http://www.meritmind.se/xml Låt oss börja! 84
Moduler Datamappad listvy - praktik Vi börjar som alltid med att lägga till sektion, i detta fall väljer vi mallen datamapped list view och får en vy som den nedan (se bild på sidan innan). Steg 1 är att lägga till källa som listan ska hämta din information ifrån (i fallet nedan så väljer vi att använda oss av Jsonkällan specificerad tidigare), och klickar på extern källa/external source -fliken på höger sida, klickar i att det är av typen Json, klistrar in den relevanta källan, och klickar på knappen ladda/ load Vi har nu sagt vart appen ska ta sin information ifrån. Steg 2 är att specificera hur listvyn ska se ut! Det gör vi genom att klicka på den fortfarande ospecificerade list-cell representationen och fyller i informationen: List data source/list datakällan: Var i informationskällan ska den börja bygga listan ifrån? Vi ska alltid specificera den sökvägen som innehåller informationen som vi vill bygga listan ifrån. Vi vill komma åt toppen av hierarkin, i detta fall blir det: För exemplet vi har så är sökvägen: /results Vi har sedan tre olika fält vi fyller i för en vanlig standard/default lista och sökvägarna som jag använt mig av i detta exempel: Den första är titeln: /results[]/trackname Den andra är beskrivningen: /results[]/shortdescription Den tredje är en bild-resurs: /results[]/artworkurl100 På så sätt har vi nu sagt att varje cell i listvyn ska innehålla titel, beskrivning och en bild på vänster sida. Med detta sagt, så har vi nu sagt till system hur listan ska se ut, och var den hämtar listan. Nu måste vi säga vad som ska hända vad som händer när man trycker på en faktiskt list-cell. Vi vill att när man trycker list-cellen, så ska den gå in djupare, och visa relevant information för cellen. I detta fall så väljer vi åtgärden/action: Gå till modul, som öppnar upp en vy innehållandes information om cellen vi precis gick ifrån. Men vi har fortfarande inte specificerat hur denna vy ska se ut, och detta är något vi måste göra, genom att bygga vår egna slut-nod. Spara listvyn som du precis gjort och gå vidare till nästa steg. 85
Moduler Scrollviews När ingen av dom färdiga mallar räcker till, eller man vill bygga en sektion som ska fungera med en extern källa så lägger man till en mall av typen Scrollviews, detta är en typ där man själv bygger upp dom olika delarna som ska synas. Denna kan antingen göras dynamiskt (kopplad till en extern källa) eller statisk (genom att fylla i med information som man fyller i själv). Tips! Om du inte kan din datakällas datareferens, så klickar du på pluset på höger sidan om fältet. Detta öppnar din datakälla så att du kan säga vilken typ av information du ska använda dig av! Detta är giltigt överallt där extern datakälla används. Vi kommer i detta exempel att göra en scrollview-mall som vi kopplar till en extern källa (samma informationskälla som vi kopplade den datamappade listvyn till i tidigare a).! Vi börjar då med att fylla i den externa källans URL i external data source för att säga att vi hämtar informationen därifrån (se datamapped listview för steg för steg dokumentation). Vi väljer sedan att bygga vår vy, och hur den ska se ut, detta är HELT upp till dig, och beroende på vad källan innehåller för information. I detta fall har vi kopplat till en källa som erbjuds av Itunes, och är en filmdatabas. Därför kommer jag ett utnyttja informationen i denna för att fylla i relevant information. De verktygen jag kan jobba med är dessa: Label: Är ren text, som jag kan definiera storleken på fonten på, och vilken font denna ska ha. Link: Utöver font, storlek på font, så kan jag också specificera länk-url på denna. Button: En knapp, som kan utför en åtgärd när denna trycks på Image: En bild som visas Web View: En URL som visas i modulen Embed Code: Om du vill ha en funktion som utförs i denna sektion För att bygga denna vy, så ser jag till att klicka på dom verktygen jag vill använda mig av, jag kan alltid dra och ändra placering på dessa i senare läge, men som alltid så är det bra att ha en grundidé av hur strukturen kommer att se ut. Viktigt att förstå är 1. Att när du kopplar malltypen Scrollview på detta sätt, så bygger du en egen mall, och för varje nytt objekt i datakällan, så kommer systemet att skapa en likadan vy med dom mallarna du specifierat. 2, det är också viktigt att förstå att den vyn du ser i mitten på själva vyn, är en redeigerad representation av det dy bygger. I telefoner så kommer dessa att se snyggare ut! 86
Moduler Här nedan har du varje vy jag använt mig av steg för steg Label: Där har jag valt att kopplat till namnet på filmen, och förstora storleken på fonterna så att dom motsvarar en titel Image: Där tar jag det största möjliga bildkällan som finns i den externa källan, som i det här fallet motsvara en 100px stor bild, eftersom detta inte är särskilt stort, så kommer bilden i dit fall att vara gryning. Label: under rubriken och texten så skulle jag som användare vilja ha en lång beskrivning på filmen, label löser detta, och jag behåller den mindre storleken som label kommer med per automatik för att passa som löptext. Link: Nu har jag som kund någorlunda bestämt mig om jag vill se denna film eller inte, men jag ser till att koppla till länk, så att kunden i ifråga kan se en trailer till filmen. Observera att valen jag gjort ovan bestäms av informationen som den externa källan har, och vad jag vill visa i appen. Denna källa innehåller väldigt mycket mer information som jag inte utnyttjat. 87
Moduler Koppla ihop Datamappad listvy & Scrollviews Nu när du skapat och sparat båda listan och vyn, så går du tillbaka till listvyn. För att koppla ihop dessa två, så trycker du på knappen action: och väljer Go to module (nederst till höger), på drop-down menyn så borde du se den Scrollview som du precis skapat. Tryck på den, spara och testa din egna modul i telefonen! Karta Karta fungerar på liknande sätt som en listvy, det är också en element-container som tar sin information från efterföljande noder. För att skapa en kart vy, lägger du helt enkelt till en sektion och väljer mallen map/karta. Du skapar sedan slutnoder innehållandes adressfält. Dessa adresser kommer sedan att automatiskt bli punkter i en karta. Karta som används beror på vilket operativsystem användaren använder. Ifall det är en ios enhet, så används Apple-maps, är det en Android så blir det Google maps, osv. Det är viktigt att tänka på att detta enbart fungerar med mallar som innehåller specifika adressfält, såsom t.ex. Contact/ kontakter. I bilden till höger så visas ett exempel på hur en sådan karta kan komma att se ut på en Iphone när vi väl skapat denna. 88
89 Moduler
Design & övrig information Design & övrig information Appinformation Med alla modulerna avklarade kommer vi att fortsätta med nödvändig information som behövs vid uppladdning av appen. Sedan tidigare har vi lagt i appens namn och klientlogin. Nu ska vi gå vidare till app-info och fylla i resterande information! Plattform:Välj vilka plattformar du vill att din app ska supporta. Klicka i Android, iphone och Mobilt Webb som ingår i kursen. Beskrivning: Beskrivningen är viktig då det du anger här är vad potentiella användare kommer se när de hittar din app på marknadsplatserna. Vi rekommenderar att du lägger lite tid på att undersöka l iknande appars beskrivningar i app stores och utgå från dessa för att öka chansen att även din beskrivning blir godkänd. Tänk på att denna text (till skillnad från innehållet i appen) är sökbar på nätet och kan ses av sökrobotar, så använd ord som du tror att dina användare kommer att använda när de söker på nätet. Slutligen behöver texten vara tillräckligt detaljerad, samt tillräckligt konsistent med appens faktiska innehåll för att den ska kunna bli godkänd. Nyckelord: Ange upp till fem relevanta nyckelord som beskriver din app. Varje ord ska vara åtskilt med komma och mellanrum Primär och sekundär kategori: Då användare använder sökfilter då de söker i app stores kan det vara bra att placera appen i rätt kategori så att rättmågrupp av användare kan hitta den. Du kan även välja att placera den i en underkategori så att den kan hittas av användare som gör en mer specifik sökning. Placerar du den endast i en huvudkategori så konkurrerar du med fler appar men ger appen möjlighet att ses av fler. Definierar du den även dess underkategori så konkurrerar du mot färre appar men endast användare som gör en specifik sökning kommer att ha möjlighet att mötas av din app. App-logotyp: Här laddar du upp bilden du vill använda som ikon för din app. Apple kräver att bilden ska vara i ett större format, 1024x1024 pixlar. Startbild för appen: Här laddar du upp bilden du vill använda som startbild eller splashscreen, d.v.s. den bild som visas på vissa hårdvarumodeller när appen laddas. Denna bild blir även automatiskt huvudbakgrund för innehållet i appen. Du har i ett senare skede av processen möjlighet att ändra din bakgrundsbild inne i CMS:ets designdel, och du kan även lämna bakgrunden tom på alla eller enbart specifika sidor av din app. För optimalt resultat bör bilden vara minst 640x960 pixlar. För att spara din information trycker du på Spara applikationen, och sen kan du gå tillbaka till hemskärmen genom att klicka på OpenRatios logotyp. 90
91 Design & övrig information
Design & övrig information Här kan du se de olika stegen i uppladdning av bilder som du kommer att gå igenom. Kom ihåg att du måste markera den delen av bilden du vill använda. Om du enbart laddar upp bilden och sedan trycker använd bild, kommer det inte att fungera, (se bild 2 och 4). 1 2 3 92