How to fixa och bygga en egen enkel app

Micke Kring
Micke Kring 2.6k visningar
14 minuters läsning

I dagarna har vi på Årstaskolan släppt två appar för Android och iOS – Tänktanken och Livsviktig Poesi. Jag har byggt bägge med samma verktyg och de funkar likadant.
Så nu kanske en del av er undrar hur det går till? Kanske vill ni också ha en enkel app? Det är det jag tänkte försöka bena ut här – hur jag gått tillväga.

Först kanske du ska fråga dig själv varför du ska ha en app? Speciellt så pass enkla appar som de som jag släppt. Kunde jag inte bara ha skapat en responsiv webbsajt i stället? Well, absolut. Och det är på samma gång också en webbsajt. Men det finns två huvudsakliga skäl till just ”appandet”. Det ena är pushnotiser. Att kunna pinga användarna när något nytt finns till den tingest som alltid finns med dem. Det andra, som är ännu större, är att eleverna upplever det som väldigt stort att kunna söka efter deras egna app i App Store eller Google Play. Det blir lite lite mer på riktigt. Webben (som i sajt) har de ju jobbat med sedan tusen år tillbaka.

Fortfarande intresserad? Då kör vi! Och nej, jag är ingen expert. Och ja, det finns tusen andra sätt att göra detta på och detta var ett sätt som löste det jag behövde. 🙂

OBServera att detta inte är en följ-från-punkt-ett-till-tio-manual, utan en guide och förklaring av de delar som behövs.

Förutsättningar och pris

  • En egenhostad (självinstallerad) WordPress-sajt. Det är här allt innehåll skapas. OBS att det inte funkar med wordpress.com, moobis.se eller liknande.  PRIS: 0-? kr
  • Ett Apple Developer-konto (för att publicera på App Store). PRIS: 99$ / år
  • Ett Google Developer-konto (för att kunna publicera på Google Play. PRIS: 25$ engångskostnad
  • Ett Reactor-konto hos Apppresser (där du bygger själva appen). PRIS: 49$ / mån
  • Ett PhoneGap-konto (där du skapar din build av din app för publicering). PRIS: 0 kr
  • En Mac (för att kunna skapa certifikat om du ska publicera själv) PRIS: För mycket 😉

Ett hett tips för att minska utgifterna (om du inte redan sitter på developer-konton hos Apple och Google är att snacka med er IT-avdelning. Vi samarbetade med våra grymma kollegor på SLK-IT som såg till att Livsviktig Poesi publicerades. Om ni gör detsamma så kanske just er grymma IT-avdelning kan fixa allt förutom konto hos Apppresser. Och då blir prisbilden lite annorlunda.

Men i denna genomgång går jag igenom hela processen, som just med Tänktanken-appen som jag själv publicerade, så ni får se hela flödet. Dock varnar jag redan nu för att jag inte kan beskriva saker in i minsta detalj, utan kommer hänvisa till de olika supportsidorna. Det blir mer en genomgång.

1. Vad är Tänktanken för typ av app?

Först och främst kanske jag skulle ta och beskriva vad just denna app är och gör för något.
Tänktanken är i grunden en podcast som ibland blir en talkshow. Inför SETT2015 – där vi körde live och liveströmmat – tyckte jag att det kunde vara lite trevligt att lansera en app i samband med detta där vi också körde livesändningarna med program för varje dag.

I appen kan du kolla in och lyssna på alla tidigare avsnitt och dela dessa. Det finns ett litet bildgalleri, en om-sida och sök. Och givetvis möjligheten att kunna skicka ut pushnotiser.

2. Egenhostad (egeninstallerad) WordPress-sajt

app1

Jag satte upp ett domännamn (eller rättare sagt en subdomän) och installerade WordPress på http://app.tanktanken.se
Den fungerar som en helt vanlig sajt och det är här allt innehåll hämtas.
Podavsnitten läggs in som inlägg och sidor skapas för bl a startsida och om-sida. När allt annat är uppsatt och appen är igång så är det här du kommer att jobba.
När någon delar ett ”inlägg” i appen så är det till denna webbsida som den hänvisar.

3. Reactor – Apppresser – din appbyggare

På https://apppresser.com/ skapade jag ett konto (första månaden gratis, så vill du bara testa vet du). I deras standardkonto (49$ / mån) kan du skapa 2 appar.

app2

Det är här vi kommer att bygga själva skalet till appen, dvs fixa utseendet, menyer, push och annat. Innehållet sköter vi ju som sagt i vår WordPress-sajt. I den (vår WordPress-sajt) installerar vi även ett plugin (tillägg) från Apppresser som sköter kommunikationen mellan vår WordPress-sajt och Reactor. För er som jobbat mycket med WordPress känner ni säkert igen er även här i Reactor, som också är uppbyggt på WordPress.

När du skapat din app i Reactor och öppnar den så möts du av en översikt samt en förhandsgranskning av din app.

app3

Exakt hur du bygger din app i Reactor finns i dokumentationen, men lite snabbt så handlar det om att skapa sidor, menyer och design.

Sidor

För att fortsätta mitt exempel med Tänktanken-appen så skapade jag en sida i Reactor för startsidan i appen. I bilden nedan ser du vilka möjligheter som finns. Eftersom jag vill att appen ska hämta så mycket som möjligt från min WordPress-sajt väljer jag ”Page from Site”-valet. Då hämtar den all information från en sida jag skapat i min egeninstallerade WordPress-installation.

Gällande listningen av podcast-avsnitten (som är inlägg på WordPress-sajten) väljer jag ”Media List”. Som ni ser finns det möjlighet att skapa fotogalleri, integration med Gravity Form (så du exempelvis kan ladda upp bilder från din telefon in i appen), eller custom text/html.

Anledningen till att jag vill att så mycket som möjligt hämtas från min WordPress-sajt är för att om det hamnar lokalt i appen, skulle vi behöva skicka uppdateringar så fort något ska ändras. Och det vill vi inte. En uppdatering till App Store tar ca 7-10 dagar att få godkänd.

app4

Menyer

Återigen, om du är van att jobba i WordPress är detta inget konstigt. Du får även möjligheten att välja ikoner för varje menyobjekt. Eftersom du kan skapa lösenordsinloggning till din app kan du också välja att visa menyobjekt baserat på om du är inloggad eller inte.

app6

Design

Nu kommer vi till det roliga. Att sätta sig egna lilla design på appen. Det finns än så länge (Reactor utvecklas hela tiden och är en rätt ny produkt) inte så mycket du kan förändra, men… Givetvis kan du peta in egen CSS vilket gör att du med hjälp av lite HTML och CSS ändå kan åstadkomma en hel del.

app7

När du känner dig nöjd är det bara till att hoppa tillbaka till ”app-vyn” och kolla hur den ser ut.

Certifikat för signering och push

Detta är nog det klurigaste att få till i det hela. Självklart är det klurigast att få till detta för iOS. Här behöver du och din Mac få sitta helt ostört, ha dokumentationen (finns videoinstruktioner) och följa dessa slaviskt till punkt och pricka. Även om du efter ett tag känner att du måste dricka något starkt för att lugna nerverna råder jag dig att låta bli.

app8

Du måste ha certifikat för push och även certifikat för signeringen av appen så att du kan publicera den på App Store. Samma procedur till Google Play tar 5 minuter. Men 95% av våra appar är nedladdade på iOS så det är bara att bita ihop.

app10

Jag lyckades med att skapa pushcertifikat och få push att funka när jag testade appen för iOS, men när jag skulle skapa nya för publiceringen, så funkade det inte (läs misslyckades jag). Så nu väntar jag på att uppdateringen av Tänktanken ska gå igenom för att se om jag lyckats igen. Som sagt var. Lugn o fin. Och följ instruktionerna.

4. Grafik

logo

Det som inte kommer färdigt är givetvis de grafiska bitarna. Du måste skapa en splash screen (introbilden när appen startar) och en logo (appikonen). Dessa ska ha specifika dimensioner, men allt det finns givetvis också i dokumentationen.

5. PhoneGap

Nu börjar vi känna oss klara med vår app och då är det dags att skicka hela alltet till PhoneGap som är en tjänst från Adobe som paketerar alla dina filer och certifikat till en .ipa (iOS) och .apk (Android) fil som du kan ladda upp till App Store respektive Google Play.

app9

Det du får göra först är att skapa en ny app i PhoneGap och lägga in dina cerifikat som du skapade tidigare. När det är klart lägger du in din PhoneGap auth token i Reactor. På så sätt knyts Reactor ihop med PhoneGap och du kan skicka allt från Reactor så att appen byggs i PhoneGap.

När du är klar med detta kan du ladda ned .ipa- och .apk-filerna och göra dig redo för publicering.

6. iTunes connect – publicering

Nu är det dags att skeppa allt jobb du lagt ned på din app. Och hålla tummarna för att Apple släpper igenom din app. Det är dock en del jobb kvar. Du måste skapa en logo och skärmdumpar till alla upplösningar både till iPhone och iPad som ska laddas upp. Dessutom ska information om appen skrivas in och du ska åldersklassificera appen.

app11

När du är klar så skickar du in detta. Du kommer få mail med uppdateringar om vad som händer, men det tar någonstans mellan 7-10 dagar att få den bedömd. Om du får avslag får du också en förklaring varför och hur du kan åtgärda. Tänktanken gick igenom direkt och det tog 6 dagar.

7. Google Play – publicering

Förfarandet på Google Play är i det stora hela ungefär likadant som för App Store, fast lite mindre kinkigt.

app12

Även här får du se till att fixa lite skärmdumpar och fylla i information om din app. Skillnaden är att appen är uppe efter 1-2 timmar. Ingen behöver godkänna den.

8. Ute på App Store – Google Play

Om nu allt gått din väg så har din app blivit godkänd och du kan vänta på alla miljoner människor som kommer installera din app. 🙂 Hittills har jag 112 nedladdningar av Tänktanken-appen på App Store och 7 på Google Play.

app13

 

Nu väntar jag som sagt på att uppdateringen av Tänktanken ska gå igenom där jag fixat bakgrundsaudio. Lite tufft att ha en podcastapp som slutar spela när skärmen släcks. 😉

9. Fortsätt publicera en massa (förhoppningsvis) bra innehåll

Nu när appen är publicerad är det, som jag skrev i början, i din WordPress-sajt som jobbet görs. Publicera inlägg, fixa sidor mm.

app14

Givetvis måste du ju berätta för världen att din app finns, men det är en helt annan artikel. 🙂 Och givetvis vill du ju gärna jobba vidare och snygga till din app. Kanske lite extra grafiska element? Nya funktioner?

Ett tips är att ta allting i lugn och ro. Googla (eller Binga) och läs på. Det är alltid 1 miljon andra som haft samma problem som dig. Och läs igenom och ha Reactors dokumentation framme. De täcker i stort sätt hela processen.

Lycka till och har ni frågor, ställ dem som vanligt i kommentarsfältet så fler får möjlighet att ta del av frågor och svar.

 

Dela den här artikeln
Följ:
Fixar och trixar med tekniska lösningar och mycket mer. Ser till att användarna förstår systemen och att systemen förstår användarna. Har mina rötter i musiken och kombinerar konstnärlighet med teknik.