Udvikling af Mobilapps med React Native og VS Code

I en verden, hvor mobilapplikationer er blevet en uundværlig del af vores hverdag, er evnen til at udvikle dem mere værdifuld end nogensinde. Uanset om du er en erfaren udvikler eller en nysgerrig nybegynder, tilbyder kombinationen af React Native og Visual Studio Code en kraftfuld og fleksibel platform til at bringe dine app-idéer til live. React Native giver dig mulighed for at skrive kode én gang og udrulle den på tværs af både Android- og iOS-platformene, hvilket sparer dig tid og ressourcer. Visual Studio Code (VS Code) er på den anden side en letvægts, men utroligt kraftfuld kodeeditor, der er designet til at understøtte en bred vifte af programmeringssprog og frameworks, herunder React Native.

Hvor vi tidligere har udforsket enklere tilgange til app-udvikling, som f.eks. at skabe en Android-applikation med App Inventor 2 i forbindelse med Arduino- eller Raspberry Pi-projekter, tager vi nu skridtet videre. Med React Native, selvom det er mere komplekst at sætte op, åbner du døren til at skabe langt mere avancerede og professionelle applikationer med en ægte native følelse. Denne omfattende guide vil lede dig gennem hvert trin i installationen og konfigurationen, så du kan komme i gang med at bygge dine egne applikationer til begge de store mobile økosystemer.

Installation af Node.js: Fundamentet for React Native

Før vi kan dykke ned i React Native, er det afgørende at installere Node.js. Node.js er et JavaScript-runtime-miljø, der giver dig mulighed for at udføre JavaScript-kode uden for en webbrowser. Det er rygraden i mange moderne web- og mobiludviklingsværktøjer, herunder React Native, da det bruges til at køre udviklingsservere, bygge processer og administrere pakker.

For at installere Node.js på din Windows-computer er processen ligetil:

1. Besøg den officielle Node.js-hjemmeside (nodejs.org).
2. Download den anbefalede LTS (Long Term Support) version af installationsprogrammet til Windows.
3. Kør installationsprogrammet og følg trinene. Det er typisk tilstrækkeligt at acceptere standardindstillingerne.

Når Node.js er installeret, får du automatisk adgang til npm (Node Package Manager). npm er et kommandolinjeværktøj, der gør det muligt at installere, administrere og dele JavaScript-pakker og -biblioteker. Dette er afgørende for React Native, da det bruges til at installere alle de nødvendige afhængigheder og biblioteker til dit projekt.

Installation og Konfiguration af Android Studio: Din Android Udviklingsmotor

Selvom vi primært vil arbejde i VS Code, er Android Studio uundværlig for React Native-udvikling, da den indeholder de nødvendige Android SDK'er (Software Development Kits) og værktøjer til at kompilere og teste dine Android-applikationer, samt emulere virtuelle enheder.

Trin 1: Installation af Java Development Kit (JDK)

React Native og Android Studio kræver, at Java Development Kit (JDK) er installeret på dit system. Vi anbefaler at installere JDK 11, da det er en stabil og kompatibel version.

1. Download Java JDK 11 fra Oracles hjemmeside eller en anden pålidelig kilde (f.eks. OpenJDK).
2. Kør installationsprogrammet og følg instruktionerne.

Trin 2: Konfiguration af JAVAHOME Miljøvariabel

Efter installationen skal du konfigurere miljøvariablen JAVAHOME, så Android Studio og andre værktøjer kan finde din Java-installation.

1. Søg efter 'Miljøvariabler' i Windows søgefelt og vælg 'Rediger systemmiljøvariabler'.
2. Klik på knappen 'Miljøvariabler...'.
3. Under 'Systemvariabler', klik på 'Ny...'.
4. Indtast JAVAHOME som variabelnavn.
5. Indtast stien til din JDK 11-installation som variabelværdi. Typisk vil dette være noget i stil med C:\Program Files\Microsoft\jdk-11.0.17.8-hotspot</code> (stien kan variere afhængigt af din installation).
6. Klik 'OK' på alle vinduer for at gemme ændringerne.

Trin 3: Installation af Android Studio

Nu er det tid til at installere selve Android Studio.

1. Download Android Studio-installationsprogrammet fra den officielle Android Developer-hjemmeside.
2. Kør installationsprogrammet. Følg instruktionerne, og sørg for at installere de nødvendige SDK-komponenter, når du bliver bedt om det. Vælg 'Standard' installation, da den inkluderer de mest almindelige pakker.

Trin 4: Konfiguration af ANDROIDHOME Miljøvariabel

Ligesom med Java, skal du definere ANDROIDHOME for at pege på din Android SDK-installation.

1. Åbn 'Miljøvariabler' igen (som beskrevet ovenfor).
2. Under 'Systemvariabler', klik på 'Ny...'.
3. Indtast ANDROIDHOME som variabelnavn.
4. Indtast stien til din Android SDK-installation som variabelværdi. Typisk er dette C:\Users\DITBRUGERNAVN\AppData\Local\Android\Sdk (erstat DITBRUGERNAVN med dit faktiske brugernavn).
5. Klik 'OK' på alle vinduer.

Trin 5: Opsætning af Virtuelle Enheder med AVD Manager

For at teste dine applikationer uden en fysisk enhed, kan du bruge Android Virtual Devices (AVD'er).

1. Åbn Android Studio.
2. På velkomstskærmen (eller via 'File' -> 'Settings' -> 'Appearance & Behavior' -> 'System Settings' -> 'Android SDK'), klik på 'Configure' og derefter 'AVD Manager'.
3. Her kan du definere og oprette virtuelle enheder (emulatoer) med forskellige skærmstørrelser, Android-versioner og hardwarekonfigurationer. Vælg en Pixel-enhed og en nyere Android API-niveau for en god start.

Vigtig Bemærkning: Installationen og konfigurationen af Android Studio samt korrekt funktion af virtuelle enheder kan være afhængig af installationen af Android SDK, Java SDK og Gradle. Sørg altid for at kontrollere, at versionerne er kompatible. Fejl her er en almindelig kilde til frustration, så dobbelttjek dine stier og versioner omhyggeligt.

Installation og Konfiguration af Visual Studio Code: Dit Udviklingsmiljø

Nu hvor fundamentet er på plads, er det tid til at installere dit primære udviklingsværktøj: Visual Studio Code.

1. Download Visual Studio Code-installationsprogrammet fra den officielle VS Code-hjemmeside (code.visualstudio.com).
2. Kør installationsprogrammet og følg instruktionerne. Det er en hurtig og nem proces.

Når softwaren er installeret, skal du tilføje de udvidelser (extensions), der er nødvendige for udvikling med React Native i VS Code. Disse udvidelser forbedrer din produktivitet med syntaksfremhævning, autokomplettering, debugging-værktøjer og meget mere.

1. Åbn VS Code.
2. Klik på Extensions-ikonet i venstre sidebjælke (eller tryk Ctrl+Shift+X).
3. Søg efter og installer følgende udvidelser:
   • React Native Tools (Microsoft): Giver en række værktøjer til at debugge og køre React Native-apps.
   • ES7 React/Redux/GraphQL/React-Native snippets (dsznajder): Tilbyder nyttige kode-snippets for hurtigere udvikling.
   • Prettier - Code formatter (Esben Petersen): Hjælper med at formatere din kode konsistent.
   • Hvis du planlægger at bruge TypeScript (anbefales stærkt), kan du også installere specifikke TypeScript-udvidelser, selvom VS Code har indbygget understøttelse.

Oprettelse af et React Native Projekt: Dit Første Skridt

Med alle værktøjer på plads, er du klar til at oprette dit første React Native-projekt. Dette er spændende, da det er her, magien begynder.

1. Opret en ny mappe et passende sted på din computer, f.eks. C:\Projects\React Native. Denne mappe vil indeholde dit React Native-projekt.
2. Åbn denne mappe i VS Code (via 'File' -> 'Open Folder...').
3. Åbn VS Codes integrerede terminal (via 'Terminal' -> 'New Terminal' eller Ctrl+Shift+`). Sørg for, at terminalen peger på din nyoprettede mappe.
4. I terminalen skal du indtaste følgende kommando for at initialisere et nyt React Native-projekt. Erstat CustomApp med navnet på din applikation:

npx react-native@latest init CustomApp

Denne kommando bruger npx (Node Package Execute) til at køre den seneste version af React Native CLI (Command Line Interface) uden at skulle installere den globalt. Den vil oprette en ny mappe med navnet CustomApp (eller hvad du nu valgte) og populere den med de grundlæggende filer og mapper, der udgør et React Native-projekt.

Når projektet er initialiseret, skal du navigere ind i projektmappen og installere de nødvendige afhængigheder med Yarn. Yarn er en pakkehåndtering, der ligner npm, men ofte er hurtigere og mere pålidelig. Hvis du ikke har Yarn installeret, kan du installere det globalt med npm:

cd CustomAppnpm install -g yarnyarn install

Efter at afhængighederne er installeret, kan du starte React Native-udviklingsserveren:

npx react-native start

Denne kommando starter Metro Bundler, som er React Natives JavaScript-bundler. Den kompilerer din JavaScript-kode og serverer den til din enhed eller emulator. Du vil se en terminal, der viser, at Metro Bundler kører. Lad denne terminal være åben.

For at køre applikationen på en Android-emulator eller -enhed, åbn en ny terminal i VS Code (mens Metro Bundler kører i den første terminal) og kør:

npx react-native run-android

Hvis du har en Android-emulator kørende via AVD Manager, vil appen automatisk blive installeret og startet der. Alternativt kan du trykke 'a' i Metro Bundler-terminalen for at køre den på en Android-emulator/enhed.

Visning af Applikationen på en Android Enhed: Test på Rigtig Hardware

At teste din applikation på en rigtig Android-telefon kan give en mere realistisk fornemmelse af ydeevne og brugeroplevelse. Her er hvordan du får din app til at køre på din fysiske enhed:

1. Aktivér Udviklerindstillinger: På din Android-telefon, gå til 'Indstillinger' (Settings). Rul ned og find 'Om telefonen' (About phone) eller 'Om enheden' (About device). Tryk gentagne gange på 'Build-nummer' (Build number) (normalt 7 gange), indtil du ser en besked om, at 'Udviklerindstillinger er aktiveret'.
2. Aktivér USB-debugging: Gå tilbage til 'Indstillinger', søg efter 'Yderligere indstillinger' (Additional settings) eller 'System', og find 'Udviklerindstillinger' (Developer options). Rul ned og find 'USB-debugging' (USB debugging), og aktiver det. Dette giver dig mulighed for at installere applikationer via USB-porten.
3. Tilslut din enhed: Tilslut din Android-telefon til din computer via et USB-kabel. Sørg for at acceptere 'Tillad USB-debugging'-prompten på din telefon, når den vises.
4. Verificer enhedsforbindelse: Du kan kontrollere, om din enhed er korrekt detekteret og konfigureret, ved at åbne en terminal (ikke den med Metro Bundler, men en ny) og køre kommandoen:

adb devices

Du bør se din enheds id opført. Hvis ikke, skal du muligvis installere de korrekte USB-drivere til din telefonmodel.

Når din enhed er korrekt konfigureret, og du har USB-debugging aktiveret, skal du blot genstarte applikationen (ved at køre npx react-native run-android i en ny terminal, eller ved at trykke 'a' i Metro Bundler terminalen), så vil den blive downloadet og installeret på din enhed.

Du er nu i stand til at udvikle og installere din applikation på en enhed eller emulator. Hvis du har svært ved at installere en simulator, eller hvis du ikke har en fysisk enhed, kan du også overveje at bruge online-værktøjer som CodeSandBox til at teste din applikation, selvom en lokal opsætning er at foretrække for seriøs udvikling.

APK-generering: Gør Din App Klar til Distribution

Når din applikation er blevet grundigt testet og valideret på en simulator eller en rigtig enhed, er det næste skridt at generere en APK-fil (Android Application Package). En APK-fil er det format, der bruges til at distribuere og installere Android-applikationer. Det er den fil, du vil give til brugere eller uploade til Google Play Butik.

Før du genererer APK'en, er det en god praksis at kontrollere, at SDK-versionen (API-niveauet) i din android/build.gradle-fil stemmer overens med den ønskede målplatformversion:

Åbn filen android/build.gradle (den der ligger direkte under android-mappen, ikke den i app-mappen) og tjek compileSdkVersion og targetSdkVersion:

buildscript { ext { buildToolsVersion = "33.0.0" minSdkVersion = 21 compileSdkVersion = 33 targetSdkVersion = 33 ndkVersion = "23.1.7779620" } repositories { google() mavenCentral() } dependencies { classpath("com.android.tools.build:gradle:7.3.1") classpath("com.facebook.react:react-native-gradle-plugin") }}

Sørg for, at disse versioner er opdaterede og kompatible med den Android-version, du målretter mod. Du kan finde de nyeste API-niveauer på Android Developers hjemmeside.

For at generere APK-filen skal du navigere til android-mappen i din projektmappe via terminalen i VS Code (sørg for at du er i roden af dit CustomApp-projekt først):

cd android./gradlew assembleRelease

Denne kommando vil starte Gradle-buildprocessen, som vil kompilere din applikation og generere en optimeret og signeret APK-fil. Den færdige APK-fil vil typisk blive fundet i android/app/build/outputs/apk/release/.

Det er også muligt at rydde op i kompileringen før en ny build-generering med kommandoen:

./gradlew clean

Dette kan være nyttigt, hvis du oplever uforklarlige byggefejl, da det fjerner midlertidige byggefiler.

Ændring af Applikationsikon: Giv Din App et Personligt Præg

Applikationsikonet er den første ting, brugerne ser, og det er afgørende for din apps branding. Standardikonet er generisk, så du vil sandsynligvis erstatte det med dit eget.

Applikationsikonerne findes i android/app/src/main/res/-mappen, opdelt i forskellige mipmap-mapper baseret på skærmtæthed:

• mipmap-hdpi
• mipmap-mdpi
• mipmap-xhdpi
• mipmap-xxhdpi
• mipmap-xxxhdpi

For at erstatte applikationens standardikoner skal du oprette ikoner af forskellige størrelser, der passer til hver af disse mapper. Dette kan gøres nemt med værktøjer som IconKitchen (findes online), som lader dig uploade et enkelt billede og genererer alle nødvendige ikonformater og -størrelser.

Når du har downloadet IconKitchen-Output-mappen, kan du kopiere indholdet af dens res-mappe til din projekts android/app/src/main/res/-mappe og erstatte de eksisterende mipmap-mapper.

Bemærk: Hvis du ændrer filnavnet på ikonet, skal du også opdatere referencen til det i AndroidManifest.xml-filen, som typisk ligger i android/app/src/main/. Se efter android:icon="@mipmap/iclauncher" og ændr iclauncher til dit nye filnavn.

React Native: Bedste Praksis for Effektiv Udvikling

Inden for programmering er der ofte flere måder at opnå det samme resultat på. Erfaringen viser dog, at gode vaner og bedste praksis kan forbedre effektiviteten, læsbarheden og vedligeholdelsen af din kode markant. Her er nogle anbefalinger for React Native-udvikling:

• Tilføj TypeScript: Brug TypeScript i dit React Native-projekt. Det er et superset af JavaScript, der tilføjer statisk typning. Dette forbedrer kodelæsbarheden, hjælper med at fange fejl under udviklingen (før de bliver runtime-fejl) og giver bedre autokomplettering i din editor.
• Brug Responsive Styles: Design dine komponenter med responsive styles, der tilpasser sig forskellige skærmstørrelser og -retninger. Brug Dimensions API og PixelRatio til at beregne størrelser dynamisk.
• Anvend Platform-Afhængige Styles: Nogle gange har Android og iOS subtile forskelle i designprincipper. Brug Platform.select fra React Native til at anvende platform-specifikke styles eller komponenter, når det er nødvendigt.
• Foretræk Funktionelle Komponenter: Med introduktionen af React Hooks er funktionelle komponenter blevet den foretrukne måde at skrive React-komponenter på. De er ofte mere koncise, lettere at teste og bedre for performance end klassekomponenter.
• Opret et Tema: Definer et centralt tema i din applikation, hvor du specificerer farver, typografi, afstande og andre grænsefladestile. Dette sikrer konsistens på tværs af appen og gør det nemt at foretage globale designændringer.
• Definer Brugerstier: Før du koder, skal du nøje definere de forskellige brugerstier og -flows i din applikation. En klar forståelse af, hvordan brugerne interagerer med din app, vil guide din arkitektur og komponentstruktur.

Anvendelsesmuligheder: Hvad Kan Du Bygge?

Med dine nyerhvervede færdigheder i React Native er mulighederne nærmest uendelige. Du kan skabe avancerede mobilapplikationer til en bred vifte af formål. Nogle spændende anvendelsesområder inkluderer:

• Interaktion med IoT-enheder: Udvikl Android- eller iOS-applikationer, der kan kommunikere med tilsluttede objekter baseret på platforme som Raspberry Pi, ESP32, ESP8266 og andre mikrocontrollere. Forestil dig en app, der styrer dine smarte hjemmeenheder, modtager data fra sensorer, eller interagerer med robotter.
• Bygning af en Bluetooth-terminal: Et konkret eksempel er at skabe en Bluetooth-terminal på Android, der kan sende og modtage data fra Bluetooth Low Energy (BLE) enheder, såsom et Arduino-projekt med et Bluetooth-modul. Dette åbner op for en verden af DIY-projekter og specialiserede kontrolapps.
• Forretningsapplikationer: Skab interne værktøjer, der forbedrer effektiviteten i din virksomhed, f.eks. lagerstyring, ordrebehandling eller feltarbejdsapps.
• Sociale medier og kommunikation: Udvikl apps, der forbinder mennesker, deler indhold eller faciliterer kommunikation.
• Spil: Selvom React Native ikke er et dedikeret spiludviklingsframework, kan det bruges til at bygge enklere spil eller apps med spil-lignende elementer.

Fremtiden for mobiludvikling er lys, og med React Native har du et kraftfuldt værktøj i hånden til at forme den. Dyk ned i koden, eksperimenter, og lad din kreativitet flyde frit!

Ofte Stillede Spørgsmål (FAQ)

Er React Native gratis at bruge?

Ja, React Native er et open source-framework, hvilket betyder, at det er helt gratis at bruge til både personlige og kommercielle projekter. De værktøjer, vi har dækket, som Visual Studio Code, Node.js og Android Studio, er også gratis.

Kan jeg bygge iOS-apps med Windows?

Du kan skrive og udvikle React Native-kode på en Windows-maskine, der er beregnet til både Android og iOS. Dog, for at kompilere og signere iOS-applikationer og køre dem på en iOS-simulator eller en fysisk iPhone, kræves der en macOS-maskine (en Mac) og Xcode. Dette er en begrænsning fra Apples side, ikke React Native.

Hvad er forskellen mellem npm og Yarn?

Både npm (Node Package Manager) og Yarn er pakkehåndteringer for JavaScript. De udfører stort set den samme funktion: at installere og administrere projektets afhængigheder. Historisk set var Yarn hurtigere og mere pålidelig end npm, men npm har i de senere år indhentet meget af dette forspring. Valget mellem dem er ofte et spørgsmål om personlig præference eller teamets standard.

Hvorfor skal jeg bruge en emulator/simulator frem for en fysisk enhed?

Emulatorer og simulatorer er gode til hurtig test under udvikling, da de starter hurtigt og giver dig mulighed for at teste på forskellige skærmstørrelser og Android-versioner uden at have flere fysiske enheder. De er dog ikke perfekte. Fysiske enheder giver en mere nøjagtig repræsentation af ydeevne, batteriforbrug og hardwareinteraktion, hvilket er vigtigt for den endelige test.

Min applikation starter ikke på enheden/emulatoren. Hvad skal jeg gøre?

Dette er en almindelig udfordring. Tjek først, at Metro Bundler kører i en terminal. Sørg for, at din enhed har USB-debugging aktiveret og er korrekt tilsluttet (brug adb devices). Prøv at rydde Gradle-cachen med ./gradlew clean i android-mappen og derefter genstarte applikationen. Tjek også din VS Code-terminal for eventuelle fejlmeddelelser, da de ofte giver et hint om problemet.

Hvad er fordelene ved React Native sammenlignet med native udvikling?

De primære fordele ved React Native er cross-platform kompatibilitet (skriv én kodebase for Android og iOS), hurtigere udviklingstid, genbrug af kode, og at det bruger JavaScript, som mange udviklere allerede kender. Native udvikling (f.eks. med Java/Kotlin for Android eller Swift/Objective-C for iOS) giver dog potentielt bedre ydeevne for meget komplekse apps, mere direkte adgang til platformsspecifikke API'er og de nyeste OS-funktioner, så valget afhænger af projektets specifikke behov.

Hvis du vil læse andre artikler, der ligner Udvikling af Mobilapps med React Native og VS Code, kan du besøge kategorien Mobiludvikling.