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.5 (Education edition) Denna handbok är producerad och utgiven av OpenRatio och skyddas enligt lagen om upphovsrätt. Uppdateringar publiceras på www.openratio.com/handledning 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/ Skype: openratio Att bygga en app Innehållsförteckning Förord7 Innan du börjar 8 Bakgrund10 När apparna tog världen med storm!�����������������������������������������������������������������������������������������10 Vad är en app?�������������������������������������������������������������������������������������������������������������������������������� 11 Plattformar������������������������������������������������������������������������������������������������������������������������������������12 Genomslag och prognoser för apparna������������������������������������������������������������������������������������� 13 Företagsutveckling14 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åk18 Varför olika programmeringsspråk?������������������������������������������������������������������������������������������19 Utvecklingsverktyg20 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 4 Att bygga en app Planering 28 Del 1 : Less is more����������������������������������������������������������������������������������������������������28 Del 2 : Designa utifrån begränsningarna��������������������������������������������������������������29 Del 3 : Designa och designa om�����������������������������������������������������������������������������29 Del 4 : Testa, testa, testa!�����������������������������������������������������������������������������������������������������������30 Del 5 : Sätt en deadline��������������������������������������������������������������������������������������������������������������30 Marknadsplatser Apple App Store���������������������������������������������������������������������������������������������������������������������������32 Google Play���������������������������������������������������������������������������������������������������������������������������������� 34 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 Checklistor42 Planering�������������������������������������������������������������������������������������������������������������������������������������� 42 Inför lanseringen�������������������������������������������������������������������������������������������������������������������������� 43 Utvärdera din marknadsföring���������������������������������������������������������������������������������������������������44 Utvecklarkonton46 D-U-N-S������������������������������������������������������������������������������������������������������������������������������������������47 Apple��������������������������������������������������������������������������������������������������������������������������������������������� 48 Google Play����������������������������������������������������������������������������������������������������������������������������������50 Att använda CMS:et Grundinformation 54 Redigera bilder före uppladdning���������������������������������������������������������������������������������������������� 54 Inloggning�������������������������������������������������������������������������������������������������������������������������������������56 Hemskärm�������������������������������������������������������������������������������������������������������������������������������������57 Redigera din information������������������������������������������������������������������������������������������������������������58 Information om din app���������������������������������������������������������������������������������������������������������������59 5 Att bygga en app Moduler Din app och hemskärmen�����������������������������������������������������������������������������������������������������������60 Dashboard��������������������������������������������������������������������������������������������������������������������������������������61 Simulatorn������������������������������������������������������������������������������������������������������������������������������������63 Moduler����������������������������������������������������������������������������������������������������������������������������������������� 64 Rich text pages����������������������������������������������������������������������������������������������������������������������������65 Simple pages���������������������������������������������������������������������������������������������������������������������������������67 Embed code����������������������������������������������������������������������������������������������������������������������������������68 Events��������������������������������������������������������������������������������������������������������������������������������������������69 Facebook���������������������������������������������������������������������������������������������������������������������������������������70 Flickr������������������������������������������������������������������������������������������������������������������������������������������������71 Picture galleries����������������������������������������������������������������������������������������������������������������������������72 Links�����������������������������������������������������������������������������������������������������������������������������������������������73 Contact������������������������������������������������������������������������������������������������������������������������������������������74 Newsletter subscription��������������������������������������������������������������������������������������������������������������75 Coupons�����������������������������������������������������������������������������������������������������������������������������������������76 Staff������������������������������������������������������������������������������������������������������������������������������������������������ 77 Twitpic��������������������������������������������������������������������������������������������������������������������������������������������78 RSS�������������������������������������������������������������������������������������������������������������������������������������������������79 Youtube Video������������������������������������������������������������������������������������������������������������������������������80 YouTube Channels������������������������������������������������������������������������������������������������������������������������81 Design & övrig information Appinformation���������������������������������������������������������������������������������������������������������������������������� 84 Design�������������������������������������������������������������������������������������������������������������������������������������������88 Val av mall������������������������������������������������������������������������������������������������������������������������������������88 Färgtema���������������������������������������������������������������������������������������������������������������������������������������90 Ikoninställningar���������������������������������������������������������������������������������������������������������������������������91 Bakgrundsinställningar��������������������������������������������������������������������������������������������������������������92 Ordna moduler�����������������������������������������������������������������������������������������������������������������������������93 Typsnitt����������������������������������������������������������������������������������������������������������������������������������������� 94 �������������������������������������������������������������������������������������������������������������������������������������������������������96 Information OpenRatio behöver �����������������������������������������������������������������������������������������������99 Publicering till egna konton�������������������������������������������������������������������������������������������������������99 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. 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! Ruben Rivera Utbildningsansvarig på OpenRatio 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 W Y S I W Y G 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. Mer detaljerad information, samt handledning och video finns publicerat på www.openratio.com/handledning. 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. 10 ” Några år senare har denna marknad fullkomligt exploderat 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 det 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, och nuförtiden finns även operativsystem baserade på HTML. 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 5% av marknaden (10 % av marknaden 2013).* *Siffror från IDC smartphone OS Q1 share 2014 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 12 Blackberry App World 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. Enligt siffrorna för 2013 (102 miljarder nerladdningar) så verkar prognosen stämma väl. 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 majoriteten av alla appar är utvecklade för dessa. Däremot har konsumenter historiskt sätt vart villigare att betala för iOS appar - nio av tio betalappar som laddades ner 2010 var genom Apples App Store. Så även om Android är marknadsledande globalt sett kan regionala skillnader ibland göra det mer lönsamt att utveckla en app för iPhone. Med detta sagt så ökade Google Play sin omsättning flerfaldigt under 2013 och har nu gått om Apple i både app-nerladdningar och inkomst från appar sett till världen (tänk på att stora regionala skillander finns, Sverige är historiskt sett som iOS-land). 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 mdr appar 2011 : 25 mdr appar 2012: 64 mdr appar 2013: 102 mdr appar 2014: X mdr appar 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örmånga har 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 en app eftersom detta löser deras (ofta) interna problem. 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. 14 Frågan är ofta inte hur man tjänar pengar på appar, utan vad ett företag har att tjäna på en app” 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 har sökt 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 produkten. 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. 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. Att tjäna pengar på appar Ä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 skatt) 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 McDonalds-lön. En annan 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. 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 helt plöstligt “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 : Apple SDK:iOS SDK IDE:Xcode IDE Kostnad: Gratis* Programming language: Objective-C Stöder: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:Google SDK: Google Android SDK IDE:Eclipse IDE (recommended) Kostnad:Open source Programming language: Java Stöder: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:Windows SDK:Windows Phone 8 SDK IDE:Visual Studio IDE (rekommenderas) Kostnad: 5,000 - 150,000 SEK Programming language: C# (+ XAML) eller Html5 + JavaScript (alternativt alla i symbios) Stöder:XAML i samband med VB.NET och C++t Alpha 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 sena- re, 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. 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. Om du vill läsa mer om CPTn kan du hitta mer information på http://www.openratio. com/handledning under “Vision Mobile”. 22 C P T 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 openratio.com Wix Mobile mobile.wix.com Apperyappery.io Spot Specific spotspecific.com Game Salad gamesalad.com Red Foundry 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 appcelerator.com/titanium/titanium-studio/ Eqelaeqela.com Marmalade madewithmarmalade.com XMLVM 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 adobe.com/se/products/air.html Coronacoronalabs.com AppMobi appmobi.com Unityunity3d.com/unity Appcelerator appcelerator.com Xamarin 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 build.phonegap.com Uxebi uxebu.com Sencha sencha.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 jquerymobile.com Sencha Touchsencha.com/products/touch DHTMLX Touch dhtmlx.com/touch Zepto JSzeptojs.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. Den absolut vanligaste anledningen till avslagning är att appen inte tillför värde till användaren. 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. 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 och bortsett från att Iphone 5 och uppåt är längre än sina föregångare så skiljer designen sig inte så mycket i övrigt (processorkraften är största skillnaderna mellan modellerna). 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 ” En bra app ska starta snabbt, vara snabb och enkel att använda tid och kostnad, är det smart att testa din app på samtliga modeller innan du lanserar din app. 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, se sista sidan) 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 När du har gått igenom att allt stämmer och sedan lämnat “ Ju dyrare du prissatt din app, desto grundligare undersökning blir det 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? http://stadium.weblogsinc.com/engadget/files/app-store-guidelines.pdf 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, med hästlängder). 34 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. 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. 38 ” Appar börjar användas som sökkanaler parallellt med webben 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 webb-appversion i molnet, vilken är direkt överblickbar. 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. Webb-appen ä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 vilar 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. Apple App Store Google Play Det har historiskt sett varit väldigt svårt att överföra appar från ett utvecklarkonto till ett annat, men Apple lanserade (till slut) denna funktion under sommaren 2013. Det betyder att dom två största app-affärerna nu tillåter att en app byter ägare. Allt som allt, tar det ca en arbetsvecka att införskaffa utvecklarkonto och D-U-N-S nummer. Är man ett större företag tar det oftast än längre tid då firmatecknare måste godkänna kontot (och det är oftast inte samma person som införskaffar kontot). Apple erbjuder utvecklarkonton för studerande utan avgift. 46 Utvecklarkonton D-U-N-S Tidsåtgång: ca 1- 4 arbetsdagar Pris: ca 250-500 kr exkl. moms Länk: 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/Om/databasen/DUNS_Number/ “Beställ D-U-N-S® Nummer” 47 Utvecklarkonton Apple Tidsåtgång: ca 1 arbetsdag Pris: ca 808-2400 kr ink moms (årlig avgift) Länk: 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. 49 Utvecklarkonton Google Play Tidsåtgång: under en timme Pris: ca 168 kr ink moms (årlig avgift) Länk: 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 appar. 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 OpenRatio 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 (png rekommenderas) med en filstorlek på upp till 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 kan även 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 även ladda upp färgade app-ikoner. 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ösningen 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 ska 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ät- ! ter 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. Skärmbild på dina app-bilder Extra 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 (Se gärna filmexempel på hur du gör härifrån på www.openratio.com/handledning) 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://edu.openratio.com (om du gått kurs) eller http://reseller.openratio.com (om du på annat sätt införskaffat ett konto). 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 är den informationen som OpenRatio senare kommer att använda sig av när din app publiceras på de olika marknadsplatserna. Här följer en noggrann genomgång av varje fält: Applikationsnamn: Namnet på din app E-post: E-postadressen fylls enbart om du vill att en kund eller medarbetare ska kunna logga in på appen och ändra i innehållet (men inte designen) Lösenord: Lösenordet gäller enbart för e-posten ovan Bekräfta Lösenord: Skriv in ditt lösenord 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 ”Lägg till 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 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” (eller gå direkt till sista sidan på denna bok. 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). Observera! i.o.m att större ändringar har implementerats i den nativa koden (för iOS och Android) så är simulatorn något missvisande för tillfället. Att se apparna i förhandsvisningsapparna rekommenderas fram till april 2014. 63 Att bygga en app Moduler Du finner samtliga moduler under “Lägg till innehåll”. Vi går igenom varje modul och dess funktionalitet i samma ordning som de visas i rullgardinsmenyn. Glöm inte att spara efter att du lagt till innehåll i en modul, annars gåt allt arbete till spillo! “Modules”. 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. 65 Moduler “Rich Text Editor”. 66 Moduler Simple pages Simple 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 den mest avancerade av alla sektionerna och 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. 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 CSS och/eller Javascript (inbedded). “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. Formateringen kan göras exakt hur du vill tack vare att du kan använda HTML i innehållsdelen “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.) Observera att formatteringen på flöden följer din apps genomgående formatering! “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. Du kan välja hur du presenterar dina bilder (om dom är grupperade, eller alla på en vy). “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 sidor, din Facebook-sida eller vad som helst. 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 75 Moduler Coupons* I den här sektionen har du möjligheten att erbjuda dina läsare erbjudanden i form av kuponger. I det första fältet som heter ”Titel”, skriver du namnet på ditt erbjudande. Själva erbjudandet består av en bild, och du kan beskriva erbjudandet på din bild i t.ex. Photoshop. Du väljer själv under vilken period ditt erbjudande är synligt på appen när du lägger till start- och slut-datum. Dessa datum kan du förstås redigera. Du kan även välja hur många gånger din kupong kan användas under fältet som heter ”gräns”, (på bilden heter detta fält ”beloppsgräns”). När någon klickar på din kupong så blir den ”förbrukad”, så det är viktigt att informera dina användare om detta, och att de måste visa upp erbjudandet för kassören. Det är även viktigt att komma ihåg att kupongen inte fungerar för mobil webb, utan enbart för appar (eftersom vi använder mobila enhetens ID för att se om en kupong är förbrukad eller ej). “Kuponger”. 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 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. Det finns flera olika sätt att presentera “flödet”. Öppna i appen: Öppnar flödet i appen Öppna utanför appen: Öppnar webbsidan där informationen kommer ifrån Behandla informationen (text): Tar texten från flödet och presenterar den enbart som text Du kan också välja att ha beskrivning på flödet Full: Full beskrivning betyder att upp till tre rader med beskrivning kommer i listvyn En rad: En rad beskrivning kommer under titeln Ingen: Bara titeln på rss:en dyker upp Anledningen till att så många olika sätt att presentera flödena finns tillgängliga är att rss:en oftast är gjorda på icke optimala sätt, därför kan man välja mellan valen beskrivna ovan för att se till att åtminstone ett sätt att se flödena är tillgängliga. 78 Moduler “RSS”. 79 Moduler Youtube Video 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. Filmklippet kommer då att visas som en klickbar ruta på din telefon. “Youtube video”. 80 Moduler YouTube Channels* Här lägger du 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”. 81 Moduler Push notiser Pushnotiser kan som sagt i tidigare kapitel skickas via “dashboarden” detta kommer då att skicka ett meddelande till att användare av din app (ifall dom godkänt att dom vill ha meddelanden). Observera att meddelande-fälten är låsta till max 100 tecken, det finns flera anledningar till detta: - iOS kan ta emot max 256 karaktärer, och android 4000 karaktärer. Dock så kan app-användaren välja hur pushnotiser visas. - Per automatik så visas upp till 120 tecken längst upp i toppen för iOS användare. - Sedan måste man ha i åtanke att vissa bokstäver (arabiska t.ex) räknas som två karaktärer. Med åtanke på anledningarna ovan så har vi begränsat utskicken till 100 bokstäver iställer för att vissa användare ska mottaga push, medan andra (iOS-användare) inte tar emot dom. Alternativ: Du kan alltid välja att skicka pushmeddelanden från RTF-modulen eller dylikt. Då skickas titeln som meddelande, och du kan välja att lägga in vidare information i brödtexten! 82 Moduler 83 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 + webb eller iPhone + webb 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. 84 Design & övrig information 85 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 86 Design & övrig information 4 5 87 Design & övrig information Design Vi ska nu gå igenom alla de olika designval man kan göra på CMSet. Notera att ”Tablist” och ”Tiles” fungerar på olika sätt samt att appen som du ser i simulatorn inte alltid ser ut som det kommer att göra i en smartphone/platta, beroende på vilken plattform du använder. Val av mall Första gången du går in i sektionen ”Designa din app”, klickar du på “ändra tema” för att ändra ditt tema. Det är per automatik “Tiles 4x4” Tablist: En tablist är en vanlig lösning för att presentera appinnehåll. I en sådan hamnar dina fyra första knappfunktioner i en mörkgrå lista längst ned i appen. Den första modulen öppnas automatiskt när din splashscreen försvinner (splash screen används endast av Appleprodukter) och de resterande funktionerna kan du använda genom att antingen trycka på respektive knapp eller knappen ”More” som är placerad längst ned till höger (denna tillkommer om det finns fler än 4 moduler) och vilken tar dig till dina resterande moduler som nu visas som en listning. Tile 3x3 Med undantag för tablist är alla teman skapade i tiles-format. Om du väljer detta tema kommer dina funktioner att visas som “kakelbitar”. Om du väljer 3x3 kommer tre funktioner att läggas till på höjden och tre på bredden. Om du har mer än nio funktioner kommer de att läggas till med samma struktur på nästa sida i din app. OpenRatios CMS har inga begränsningar på hur många funktioner du kan lägga till, men som vi nämnt tidigare rekommenderar vi att du inte lägger till för många funktioner, då du riskerar att överskrida telefonens 88 Design & övrig information RAM-minne och användarens tålamod. Det är ett känt faktum att användare mestadels använder appens primära funktioner. Tile 3x4 På en sida som har 3x4 ”Tiles” läggs en ny rad till på höjden och det totala antalet ”Tiles” på en sida blir 12. Tile 4x1 Om du väljer detta alternativ kommer du att få fyra funktioner i rad på botten av skärmen. Tile 4x2 När du väljer detta alternativ får du två rader på bredden rader med fyra funktioner på varje rad. “Välja tema”. 89 Design & övrig information Färgtema Möjligheten att själv kunna bestämma över din apps färgkomposition är en av de största designfördelarna med OpenRatios CMS. Experimentera gärna med olika alternativ innan du väljer ditt slutgiltiga färgtema. Om du gör en app för ett större bolag finns det oftast redan fastsatta färgval som man måste följa, se till att ta reda på dessa. Om du använder en färgkod (HEX code) får du exakt den färg du vill ha. Färgkoder kan du få fram genom att använda pipettverktyget i ditt bildbehandlingsprogram och sedan välja att visa färger (”show colors” eller liknande). Koden följer detta mönster: #c56e77. Observera att du inte ska skriva in kodens numertecken (#) i OpenRatios CMS utan bara bokstäver och siffror (t.ex. c56e77). “Färgschema.” 90 Design & övrig information Ikoninställningar Nästa är att välja en genomgående ikonstil för dins funktioner. Du kan välja mellan fyra färdig mallar med olika stil ar, När du genomfört ändringarna, tillåt bilderna lite tid för att prorageras. Du kan vid vilket tillfälle som helst ladda upp egna ikoner och frångå de färdiga designade-ikonoerna. Dessa ska isåfall vara 128x128 pixlar i .png-format med en transparant bakgrund. Anledningen till transparansen är att du kan då välja att sätta färg på både ikonen och den transparanta ytan (eller välja att ha den transparant). Tips: När du valt en specific symbol för en modul, så kommer denna alltid att sammankopplas med denna, enda sättet att ändra detta är att återuppladda en annan ikon isåfall (dom färdiga ikon-mallarna finns på www.openratio.com/handledning ifall du behöver dessa). Dina modulikoner finns i en box under mallarna som du ser på bilden nedan, du laddar upp nya genom att klicka på dom. Den automatiska färgsättningen är en vit ikon med grå bakgrund. Om du hat valt en av “Tiles-teman” så kommer du att kunna ändra färgsättningen av både din ikon och bakgrund. “Ikon val.” 91 Design & övrig information Bakgrundsinställningar I denna sektion kan du välja opaciteten (genomskinlighet) på dina ikoners bakgrund. OpenRatios CMS är automatiskt inställt på 90 % opacitet, men du kan välja mellan 0-100 % opacitet i native appar (i mobila hemsidor så fungerar inte genomskinlighet på samma sätt). Precis som i ”Ikoninställningar” fungerar ”Bakgrundsinställningar” endast om du har valt ett ”Tiles-tema”. När du från början redigerade din app blev du automatiskt tilldelad en vit splashscreen och bakgrundsbild. Om du vill ändra din bakgrundsbild så kan du göra det i denna sektion genom att klicka på den och ladda upp en ny. “Bakgrunds-val” 92 Design & övrig information Ordna moduler I den här sektionen kan du välja i vilken ordning du vill ha dina moduler/ikoner i rutan som heter ”Aktiva moduler”. Om du vill inaktivera en modul/ikon kan du enkelt dra den till rutan som heter ”Inaktiva moduler”, och vice versa om du vill aktivera en inaktiverad modul/ikon. Förändringar du gör i CMS:et slår igenom direkt hos användaren, både de som surfar in på din mobil app och de som laddat hem en nativ version. I det senare fallet kan telefonens cache-minne dock göra att användare som har appen öppen kan behöva logga ut och sedan in igen för att uppdateringen ska slå igenom. “Arrangera moduler.” 93 Design & övrig information Typsnitt Detta är den sista sektionen i designen av din app. Du kan välja mellan en rad olika typsnitt och det typsnitt du väljer kommer att vara genomgående för hela appen. Du kan ändra en specifik sektions typsnitt med hjälp av en RTF-redigerare. Observera att typsnittsändringar enbart propageras (skickas vidare) till iOS, i mobilt webb använder sig CMSet enbart av typsnittet “Tahoma”. Du ser alltså inte ändringen förrän du tittar på appen i din telefon eller på din platta. (Android stöder per automatik enbart Roboto typsnitt) “Fonter.” 94 Design & övrig information Förhandsvisning Då din app kommer att få olika utseende på olika typer av hårdvara är det viktigt att förhandsgranska den på de hårdvarumodeller du tror att den mest kommer att användas på. För att se hur en app ser ut nativt redan innan den har publicerats till en app store kan du använda en av OpenRatios förhandsvisningsappar. Ladda helt enkelt ner appen “OpenRatio Edu” du hittar appen för iOS och android här: iOS: länk mejlas till er (öppna länk i er iphone) Android: (mejlas till er) När förhandsvisningsappen är nedladdad, öppna den och skriv in “slugline” för den app du vill titta på. På en Iphone behöver du även skriva in lösenordet “openratio” pga Apples säkerhetsrutiner. Du finner din apps slugline i CMS:et genom att öppna ett av alternativen i simulatorn; antingen “Se i mobilt webb” eller “se i platta”. I det fönster som öppnas upp står din slugline de första sex tecknen i adressfältet, t.ex. http://upi3dc.openratio.mobi/previewer). Det är stor chans att du vill ändra på någonting i din app i CMS:et och sedan förhandsgranska förändringen i förhandsvisningsappen. På grund av mobilens cache-minne behöver du ibland logga ut ur förhandsappen och sedan logga in igen för att förändringen ska ha gått igenom. Vi rekommenderar starkt att du använder förhandsvisningsappen noga för att titta igenom din app innan den går till publicering. Design eller innehåll som ser konstigt ut fördröjer uppladdningsprocessen såväl för OpenRatios personal i kompileringsprocessen såväl som för appstore-personal, vilket kan fördröja publiceringsprocessen avsevärt. 96 Design & övrig information Publicering Vi rekommenderar att du gör en sista genomgång av din app innan du meddelar oss att du önskar publicera den i nativa versioner. Har du fyllt i varje fält som är markerat med en asterisk med text eller bild? Är din app-ikon exakt 1024x1024 pixlar? Är app-beskrivningen korrekt och tillräckligt beskrivande? Inkonstistens i appen leder till längre ledtider. Var medveten om att när appen väl är publicerad så kan du inte ändra hursomhelst i app-infon. Detta gäller,keywords, app-ikonen och startbilden under “Redigera din apps innehåll” (och även den beskrivande texten, såvida appen inte ligger på ditt eget konto). Endast OpenRatios personal kommer att kunna utföra sådana ändringar, oavsett om appen laddats upp till ett av dina utvecklarkonton eller ett av våra. Ändringar måste också utföras genom att appen laddas upp på nytt, vilket OpenRatio tar en avgift för. Data på hur många gånger appen blivit nedladdad och rekommendationer påverkas inte av att uppladdningen sker igen, men appens användare får ett meddelande där de får välja att uppdatera appen till den nya versionen. Huruvida de verkligen gör så är tyvärr ingenting som apputvecklare kan påverka. När appen har blivit inskickad till en app store och väntar på att godkännas avråder vi från att du gör någonsomhelst ändring i den. Om t.ex. Apple-anställa ser innehållet i en app förändras medan de tittar på den är risken stor att de anser att den är felaktig och ej godkänner den. 98 Design & övrig information Information OpenRatio behöver När du är nöjd med din app och vill publicera den, klicka på “Publicera” i rullgardinsmenyn på hemskärmen. Skicka samtidigt ett mejl till michael@openratio.com för att verifiera att du vill publicera appen. Inkludera följande i mejlet: -Appens namn (rekommenderas ej överstiga 12 bokstäver). -Vilket språk/marknad appen ska publiceras för -Om den ska vara gratis för nedladdning, eller, om inte, vilken prisklass den ska ligga i. -Vilka app stores du önskar få den uppladdad till. -En App-URL (hemsideadressen till ditt företag eller din kunds företag) så slutanvändare kan skickas vidare. Appen publiceras i ett av OpenRatios utvecklarkontonamn; dvs, Pay for buzz eller Appvenue. Publicering till egna konton Om du önskar få appen uppladdad till ett eller flera utvecklarkonton som du själv äger behöver du även inkludera detta i mejlet. Du behöver också skicka med ditt utvecklar-id samt lösenord för varje konto. När det gäller Apple behöver du exportera ditt utvecklarcertifikat till OpenRatio, alternativt låta oss skapa ett certifikat som vi sedan exporterar till dig. När det gäller Android behöver en utvecklare på OpenRatio bli tillaggd till ditt konto. OpenRatio kommer skicka dig kontaktuppgifter till den som kommer kompilera din app när vi har tagit emot ditt mejl. OpenRatio’s personal kontrollerar appen för att säkerställa att allt ser rätt ut och utför sedan den sista kompileringen för hand innan appen skickas in till de app stores du har valt. Vi har valt att inkludera detta i vår service då vi erfarit att det sänker det antal appar som ej blir godkända och alltså måste gå igenom hela processen igen, vilket i slutändan gör oss till en effektivare appfabrik. Denna process sker alltid oavsett om din app publiceras till ett av våra utvecklarkonton eller ett av dina. Den tid det tar beror dels på hur många uppladdningar de olika app store har att utföra och dels på hur många uppladdningar vi själva har. Du kan alltid kontakta oss och fråga om när vi beräknar att din app är uppe. Lycka till och tack för att du använder vår produkt! mvh /Teamet på OpenRatio 99 Noteringar
© Copyright 2024