Page tree
Skip to end of metadata
Go to start of metadata

Denna sida beskriver de steg som krävs för att skapa appen för en kund som inte tidigare har appen.


Interna förutsättningar:

  • En mac för att hantera iOS appen som är preppad för appskapande
  • Github konto med rättigheter
  • Kunden har skapat google developer konto och bjudit in BRP's Android konto som admin
  • Kunden har skapat Apple developer konto och bjudit in BRP's iOS konto som admin samt godkänt eventuella avtal
  • Åtkomst till TeamCity
  • Åtkomst till Ionic(keepass)
  • Photoshop rekommenderas för att hantera logo/splash
  • Kunden har ett ärende i Zendesk med ikon, splash osv.


  1. Hämta kundens logga, splash och funktionsbild ifrån appärendet.
  2. Kontrollera att storleken på logon är 1024x1024. Spara som icon.png
  3. Kontrollera att storleken på splashbilden är 2732x2732. Spara som splash.png
  4. Öppna mappen där Github repot finns (Finder - brpapp - brands) och gå till undermappen brands.
  5. Kopiera mappen appdemo och byt namn på mappen till kundens shortname.
  6. Ersätt filerna icon.png samt splash.png i den nyskapade mappen.
  7. Skapa appen för Android genom följande steg
    1. Logga in på play.google.com/apps/publish/ och välj kundens konto. 
    2. Tryck på skapa program och ange namnet på appen.
    3. Ange kort och fullständig beskrivning. Ta info ifrån andra kunders appar vid behov.
    4. Ladda upp loggan i 512x512 storlek(justera storleken på 1024 loggan).
    5. Skapa en identifier på formatet se.brpsystems.shortname (Obs, denna anges aldrig i Play store utan Google fattar när appen laddas upp första gången)
  8. Skapa identifiers för Apple genom följande steg
    1. Logga in på developer.apple.com och välj kundens konto. Tryck sedan på menyvalet Certificates, Identifiers & Profiles mitt på sidan.
    2. Gå till fliken identifiers och skapa en ny identifier. Välj App IDs som typ och ange BRP App som description. Välj Bundle ID av typen Explicit och ange se.brpsystems.shortname som id. Inga capabilities behöver anges.
    3. Tryck på Continue och sedan Register för att spara.
    4. Öppna Xcode och välj menyvalet preferences. Under fliken account välj bolaget i listan och tryck på manage certificates. Tryck på pilen bredvid plus-knappen och välj iOS Distribution. Ett certifikat skapas nu som används för signering av appen.
    5. Återgå till webbsidan och välj profiles i vänstermenyn; skapa en ny profile genom + tecknet. Välj att profilen är av typen App Store under distribution.
    6. Välj den identifier som tidigare skapades. Välj sedan det certifikat som ska användas för signeringen och gå vidare. Ange ett provisioning namn enligt se.brpsystems.shortname och spara. Välj download och ladda ner profilen som har skapats.
    7. Gå till appstoreconnect.apple.com (se till att du är på kundens konto!) och tryck på My Apps.
    8. Skapa en ny app genom att trycka på + tecknet och välj New App.
    9. Välj plattformen iOS.
      1. Company name - Bolagsnamnet
      2. Namn - Appens namn i appstore
      3. Språk - Appens huvudspråk
      4.  Bundle ID - den identifier som tidigare valts
      5. SKU - se.brpsystems.shortname
  9. Logga in på Ionic och skapa en ny app.
  10. Notera appens id som exempelvis finns under namnet uppe till vänster när appen är vald i Ionic.
  11. Öppna Visual Studio Code och editera appens huvudfärg i filen _colors.scss under Primary - Base. Notera att färgen ska anges med hexkod. Får inte vara vit och/eller väldigt ljus.
  12. Öppna filen config.json och fyll i följande information
    1. appID är det id som appen har fått i Ionic enligt tidigare steg
    2. name är appens namn, exempelvis TryggaFitness
    3. configAndroid är appens id hos Google. Anges på sättet se.brpsystems.shortname .
    4. configIdIos är appens id hos Apple. Anges på sättet se.brpsystems.shortname .
  13. Nu ska vi förbereda för funktionen Pushnotiser. Följ instruktionen här: https://docs.google.com/document/d/1ZSuCRp6ZoEtHr_twRG-lZ5ElKRqs48Qtd_QCnhZQxJc/edit#heading=h.5kktkxcs42nc
  14. Spara filerna som har editerats och öppna Github Desktop. Tryck på knappen fetch origin. OBS! Se till att bara brandingfilerna pushas. Om fler filer finns i listan med gul ikon i Github Desktop och dessa inte ska pushas, markera dem och högerklicka samt välj Discard. Skriv in vad som har gjorts t.ex. "Branding FS Katrineholm" i summary fältet nere till vänster och tryck på knappen "Commit to master". Välj sedan push för att skicka iväg brandingen till Github.
  15. Logga in på http://tc.brplocal/viewType.html?buildTypeId=BrpTestOnCommit_OnCommitApp_DeployApp och tryck på knappen "Run" ute till höger. Fyll i shortname och versionsnummer som skapas genom att ande ÅÅÅÅ.MMDD.X där X är löpnummer som nollställs varje dag. Tryck sedan på Run Build knappen. Exempel:
     
  16. När bygget i TeamCity är klart och har fått resultatet "Success" går det att hitta i Ionic.
  17. Starta Xcode och välj menyvalet Xcode - Preferences.
  18. Under fliken Accounts välj kundens bolag i listan och tryck på manage certificates. Om något certifikat lyser vitt i listan är det giltigt och finns på den nuvarande macen. Skippa då nästa steg.
  19. Om certifikat saknas, tryck på pilen bredvid plus-tecknet och välj iOS Distribution. Då genereras ett nytt certifikat och sparas på macen.
  20. Logga in på developer.apple.com och välj kundens konto. Välj Certificates, Identifiers & Profiles. Gå till menyvalet Profiles. Tryck på appens profile och välj menyvalet edit till höger om nytt certifikat har skapats annars kan profilen laddas ner direkt. I fallet där certifikatet ska ändras, exempelvis till det nyskapade certet, så markeras det i listan över certifikat och välj save. Ladda sedan ner profilen.
  21. Exportera certifikatet till format p12. Detta gör du genom att öppna keychain, markera certifikatet och välj exportera. Döp om  certifikatet och sätt samma lösenord som för BRP's applekonto. Bekräfta med inloggningslösenordet för datorn.
  22. Gå tillbaka till Ionic och välj Package samt undermenyn Certificates för appen.
  23. Välj Add Profile och döp den till valfritt namn, type ska vara production.
  24. Under iOS fliken ange följande:
    1. App Development/Store Certificate - välj p12 certifikatet som tidigare exporterades
    2. Certificate password - ange det lösenord som sattes för certifikatet när det exporterades
    3. Provisioning profile - välj den profile som tidigare laddades ner
  25. Byt flik till Android och ange följande:
    1. Keystore file - välj android keystore filen som är densamma för alla kunder. Finns i brandsmappen med namnet keystore.
    2. Keystore Password - lösenordet enligt keepass.
    3. Key Alias - brpkey
    4. Key Password - lösenordet enligt keepas. Obs! Se textrutan i keepass för lösenordet till denna.
  26. Välj save för att spara profilen.
  27. Välj menyvalet Builds under Package i Ionic.
  28. Välj New package build och tryck på den version och den typ(Android eller iOS) som ska byggas
    1. Om Android. Ange target platform till Android och build type till Release samt den security profile som tidigare skapades. Tryck sedan på Package build.
    2. Om iOS. Ange target platform Xcode10, build type App store och den security profile som tidigare skapades. Tryck sedan på Package build.
  29. Välj sedan Package build för att Ionic ska börja bygga appen. Det tar en stund innan den har byggt klart och den kan bara bygga en variant av appen åt gången.
  30. När bygget för respektive platform är klart så kan filen laddas ner. Ladda ner både filen för Android samt filen för iOS.
  31. Starta application loader ifrån Xcode genom att gå till menyvalet Xcode - Open developer tool - Application loader. Välj iOS filen som nyss laddades ner och fortsätt i dialogrutorna. Välj security profile när det efterfrågas och fortsätt. Invänta att appen har laddats upp till Apple(kan ta en stund).
  32. För att skapa screenshots till Android gör enligt följande
    1. Kör kommandot ./gradlew brandApp -Pshortname=*SHORTNAME*
    2. Kör kommandot ./gradlew npm_run_ionic_–_serve
    3. En webbläsare kommer öppnas där appen simuleras. Välj menyvalet View - Developer - Developer Tools.
    4. I högerfönstret, välj application och clear storage. Tryck på knappen Clear site data enligt följande bild:
    5. Ladda om sidan så att rätt information visas.
    6. Välj Galaxy S5 som emuleringsenhet.
    7. Ta fyra screenshots; gruppträningsvyn, filtreringsvyn, menyn i inloggad läge samt bokningsdialogen i inloggat läge. Om Mac används kan screenshots tas genom att trycka CMD+Space och söka efter screenshots. Bilderna sparas på skrivbordet.
  33. För att skapa screenshots till iOS gör enligt följande
    1. Kör kommandot ./gradlew setupIosScreenshots -Pshortname=*SHORTNAME* -Pver=*VERSIONSNUMMER* och invänta att detta steg blir färdigt.
    2. Starta Xcode och välj open och öppna Xcode-projektet som skapades i och med tidigare kommando. Det återfinns under brpapp/platforms/ios/appnamn.xcodeproj
    3. Högst upp där det står iPhone Xr välj iPhone Xs Max(6,5")
    4. Tryck på play-knappen för att starta simulatorn
    5. Ta fyra screenshots; gruppträningsvyn, filtreringsvyn, menyn i inloggad läge samt bokningsdialogen i inloggat läge. Screenshots tas genom att trycka CMD+S och sparas direkt på skrivbordet. Tryck CMD+K om det är problem att fylla textfälten för anv/lösenord.
    6. Repetera steg C,D,E för iphone 8 Plus(5.5"), samt enbart en bild på gruppaktivitetsvyn för iPad Pro 2nd gen och iPad Pro 3rd gen.
    7. Ladda upp screenshotsen på sidan där de efterfrågades.
    8. Tryck på knappen save högst upp på sidan
  34. Logga in på appstoreconnect och välj kundens konto. Välj appen som tidigare skapades och som har status prepare for submission.
    1. Under app information ange privacy policy url enligt dokumentationen (länk till kundens bokningsregler på kundwebben)
    2. Scrolla ner och välj category helath & fitness
    3. Under pricing and availability, välj 0 USD (Free) och tryck på Save
    4. Välj versionen under iOS App och ladda upp screenshots LÄNK
    5. Fyll i Description med beskrivande text
    6. Ange lämpliga keywords
    7. Ange kundens hemsida som support url
    8. Under build välj den version som ska användas för appen
    9. Tryck på edit vid rating och ange none/no på samtliga alternativ och tryck done
    10. Ange BRP Systems YYYY under copyright och justera versionen till versionumret på builden
    11. Skapa en testanvändare i kundens system med e-post text@example.com och sätt ett lösenord
    12. Ange Anders som kontaktperson, se LÄNK
    13. Ange uppgifterna och kryssa i sign-in required om den inte är markerad
    14. Kontrollera att automatically release this version är ikryssad och tryck på save
    15. Tryck på submit for review
    16. Välj no på samtliga tre alternativ och tryck submit
    17. Appen är nu inskickad till Apple
  35. Fyll i uppgifter på Play store
    1. Gå till sidan https://play.google.com/apps/publish/ och välj kundens konto
    2. Välj fliken butiksuppgifter och ladda upp de screenshots som tagits i steg 39
    3. Ladda upp funktionsbild
    4. Under kategori ange Typ - Appar och Kategori - Hälsa och fitness
    5. Under e-post ange anläggningens e-postadress
    6. Sekretesspolicy - ange enligt dokumentation LÄNK och spara alla uppgifter
    7. Kontrollera att det finns en grön checkbox i vänstermenyn för butiksuppgifter, annars gå igenom vad som saknas.
    8. Välj appversioner i vänstermenyn
    9. Tryck på Hantera under produktionskanal och välj sedan skapa version
    10. Om fråga kommer upp om man vill skydda appnyckeln, välj nej
    11. Under Android App Bundles ladda upp appfilen som laddades ner ifrån Ionic
    12. Kontrollera att versionsnumret är korrekt då detta läses ifrån app-filen
    13. Ange vad som är nytt i "Vad är nytt i den här versionen?", exempelvis "Första version" och tryck på spara för att spara
    14. Kontrollera att det finns en grön checkbox i vänstermenyn för appversion, annars gå igenom vad som saknas
    15. Välj innehållsklassificering i vänstermenyn och tryck fortsätt
    16. Ange samma mailadress som tidigare angavs och välj appkategorin "Hjälmedel, produktivitet, kommunikation eller övriga"
    17. Svara nej på frågorna och tryck på spara längst ner. Tryck sedan på beräkna åldersgräns.
    18. Tryck på tillämpa innehållsklassificering.
    19. Kontrollera att det finns en grön checkbox i vänstermenyn för innehållsklassificering, annars gå igenom vad som saknas
    20. Välj priser och distribution i västermenyn
    21. Kontrollera att appen är satt som gratis
    22. Välj samtliga länder genom att kryssa i rutan vid "tillgängligt"
    23. Scrolla ner och svara på om appen innehåller annonser
    24. Scrolla ner och godkän riktlinjer för innehåll samt USA's exportlagar och tryck på spara
    25. Kontrollera att det finns en grön checkbox i vänstermenyn för priser och distribution, annars gå igenom vad som saknas
    26. Välj appinnehåll i vänstermenyn och tryck på börja
    27. Välj målgrupp över 18 och tryck på nästa
    28. Svara nej på tilltalande för barn och tryck på nästa. Tryck på skicka på nästkommande sida.
    29. Kontrollera att det finns en grön checkbox i vänstermenyn för appinnehåll, annars gå igenom vad som saknas.
    30. Välj appversioner i vänstermenyn och tryck på redigera versionen under produktionskanal
    31. Scrolla längst ner och välj granska.
    32. På nästkommande sida välj Starta Produktionslanseringen. Bekräfta detta i rutan som kommer upp.
    33. Appen är nu inskickad till Play Store.


  • No labels