Automatisera testutskick av React Native-appar

På PiJa använder vi Travis CI för våra automatiska byggen.

Följande är en komplett guide för att sätta upp automatiserade utskick av testversioner för både iOS och Android vid varje ny commit mot develop branchen.

Steg 1 - Manuella testutskick med Crashlytics Beta

Bli medlem på Fabric.io och skapa en ny organisation.

Installera bundler http://bundler.io/

Installera Fabric och Crashlytics

iOS
Android
  • Starta android studio
  • Ladda ner och installera android studio pluginent från Fabric.
  • Öppna ditt project och starta Fabric pluginet
  • Välj ditt project i Fabric pluginet och välj organisation
  • Följ instruktionerna för Crashlytics
  • När Crashlytics har installerats i din android app klicka på build alternativet och "Generate Signed APK..."
  • Välj appen och fortsätt till nästa steg
  • Skapa en ny keystore. (exempel på detta: <Projekt namn>/android/keystores/release.keystore)

Skapa en APK i android studio

  • Logga in med lösenorden som du precis har skapat och skapa en release APK.

Skapa en APK med react native

  • Skapa en global gradle fil i sökvägen user/.gradle/gradle.properties
  • I gradle.properties filen skapar du 2 variabler "PROJEKTNAMN_STORE_PASS=lösenord för din keystore" och "PROJEKTNAMN_ALIAS_PASS=lösenord för release alias"
  • När filen har sparats så ska gradle.properties (Global Properties) finnas i ditt projekt i android studio under "Gradle Scripts"
  • Öppna sedan build.gradle och skapa "signingConfigs" efter "splits"
signingConfigs {
  release {
    if (project.hasProperty('PROJEKTNAMN_STORE_PASS')) {
      storeFile file('../keystores/release.keystore')
      storePassword PROJEKTNAMN_STORE_PASS
      keyAlias 'release'
      keyPassword PROJEKTNAMN_ALIAS_PASS
    }
    if (System.getenv("TRAVIS")) {
      storeFile file('../keystores/release.keystore')
      storePassword System.getenv("ANDROID_KEYSTORE_PASS")
      keyAlias 'release' keyPassword System.getenv("ANDROID_ALIAS_PASS")
    }
  }
}
  • Kör sedan "react-native run-android --variant=release" i roten på ditt projekt i terminalen.

Gör ett utskick

  • När en release apk har skapats gå sedan in i Fabric pluginet och välj ditt projekt som  du har skapat.
  • Dra in release APK filen </p>

Steg 2 - Förenkla byggena med Fastlane

Skapa en testgrupp för de automatiska utskicken med fastlane på Fabric.io
  • Gå till Fabric.io och välj antingen iOS eller Android projektet
  • Klicka på Beta sedan manage groups och skapa din testgrupp. Notera alias i små bokstäver.
  • Skapa 2 stycken Gemfiles: android/Gemfile ios/Gemfile
  • I Båda gemfilerna ska det finnas:
source "https://rubygems.org"
gem "fastlane"

Kör sedan

  • "bundle install"
iOS
Android
  • Gå till roten av ditt projekt i terminalen
  • Gå till android mappen
  • Initisiera Fastlane med "bundle exec fastlane init" 2 filer skapas: Fastfile och Appfile
  • Öppna Fastfile och ändra på raden där det står crashlytics under lane :beta till:

Skapa en .env fil under fastlane mappen. Denna fil ska inte committas till versionshantering Lägg till

CRASHLYTICS_API_TOKEN=organisationens_api_token
CRASHLYTICS_BUILD_SECRET=organisationens_build_secret

Öppna Fastfile och skapa en beta lane

desc "Submit a new Beta Build to Crashlytics Beta"
lane :beta do
gradle(task: "clean assembleRelease")
crashlytics(
  groups: "aliaspåtestgrupp"
)
end
  • Testa om det funkar genom att köra kommandot "bundle exec fastlane beta" i terminalen

Steg 3 - Köra Fastlane beta på Travis CI

  • Skapa en travis.yml fil
  • Skapa 2 nya filer: travis/android.sh travis/ios.sh
  • I android.sh filen ska det stå:
#!/bin/bash

if [[ $TRAVIS_BRANCH == 'develop' ]]
then
  (cd android && bundle exec fastlane android beta)
fi
  • I ios.sh ska det stå:
#!/bin/bash

if [[ $TRAVIS_BRANCH == 'develop' ]]
then
  (cd ios && bundle exec fastlane ios travisbeta)
fi
iOS
Android
  • Under install: (i android delen) i din travis.yml fil
- gem install bundler
- "(cd android &amp;&amp; bundle install --path vendor/bundle)"
  • Skapa en rad som heter script: och under den raden skriv:
- 'if [ "$TRAVIS_PULL_REQUEST" = "false" ]; then bash ./travis/android.sh; fi'
Föregående

Varför använda Yarn som pakethanterare?

## Varför skall man använda Yarn som pakethanterare? Yarn skapades av Facebooks utvecklare då de ansåg att npm hade en del brister. Npm och Yarn är båda pakethanterare för JavaScript och de uppfyller nästan samma funktion. Trots stora likheter, då Yarn är byggt på npm, så finns det en del som skiljer dem åt. Prestandan är enligt Yarns skapare ett av de stora problemen med npm. Enligt tester är Yarns medelhastighet ungefär 4,7 gånger snabbare än npm 4. Efter npms uppdatering till version 5 är racet mycket närmare men Yarn har fortfarande övertaget, tack vare att Yarn kör parallella installationer medan npm installerar paket för paket sekventiellt. Yarn använder också sig av låsfiler som ser om dina paket redan är installerade och om dina paket har rätt version. Detta löser problemet med “it works on my machine”. Yarn sparar även alla installerade paket lokalt vilket gör att det inte kräver en internetanslutning vid nästa installation då det installerar paketet direkt från hårddisken. Ett välkänt problem med npm var att olika användare kan ha olika paketversioner trots samma package.json-fil. Som nämnt tidigare har Yarn löst detta genom skapa lås-filer som låser paketens version och de garanterar därför att man får en exakt likadan node_modules struktur oavsett operativsystem eller annat som kan påverka. Yarn har även förbättrat kodsäkerheten vid installation av paket. Vid varje installation kontrolleras koden med checksums innan den körs för att upptäcka eventuella fel. I npms version 5 lades det till liksom i Yarn en låsfil som standard när man kör installationer av paket i ditt projekt. Målet med npms låsfil är detsamma som Yarns: att få en likadan node_modules struktur, trots tidigare problem med att låsfilen baserades på vilka paket som installerats vilket gjorde att “optionalDependencies” inte alltid kom med i låsfilen. Detta har dock fixats i den senaste versionen av npm (5.6) och funkar nu likvärdigt med Yarns låsfil. Eftersom att Yarn är byggt ovanpå npm så är i princip alla npm-paket kompatibla. Det verkar dock vara problem med ett fåtal paket som då istället får installeras via npm. Trots att Yarn är nyare och därför mindre beprövat så är Yarn ett väldigt bra alternativ. Npm och Yarn är båda bra pakethanterare, men eftersom Yarn kan göra allt som npm kan och därtill har en större kodsäkerhet i paketen som sparas och dessutom gör jobbet snabbare, så har Yarn ett betydande övertag. https://www.npmjs.com https://yarnpkg.com/lang/en