App udvikling

29. Jun 2023

Hvordan laver man en app? Et par gode råd inden du går igang.

Casper Panduro

Casper Panduro

Freelance web-entusiast | React, React Native og Laravel 🚀

Velkommen til denne dybdegående guide til appudvikling! Jeg arbejder som freelance app-udvikler og har en stor passion for at bringe app-ideer til live gennem React Native. I dette blogindlæg vil jeg dele nogle gode råd og erfaringer for at hjælpe dig på din rejse i app-udviklings-land.

Hvad vil det egentlig sige "at udvikle en app"?

App-udvikling er processen med at lave softwareapplikationer (apps), der kører på mobile enheder. Det involverer en række forskellige faser fra idé-generering og design til kodning, testning og når alt spiller max: lancering.

Nogle af de vigtige sprog, der bruges til appudvikling, omfatter Java, Swift, Kotlin og JavaScript - i mit tilfælde bruger jeg altid React Native, som er et JavaScript-baseret framework. Derfor vil jeg også komme lidt nærmere ind på hvad React Native er for en størrelse og hvorfor det er smart at bruge når det gælder udvikling af iOS og Android apps.

Hvad er React Native?

React Native er et open-source framework, der blev udviklet af Facebook. Det giver udviklere mulighed for at lave native apps til både Android og iOS-platforme ved hjælp af JavaScript og React. Så hvis man (lige som mig), kommer fra en javascript baggrund, så har React Native altså gjort det let som en leg at udvikle apps. Arg, okay - helt let er det heller ikke. Min erfaring siger mig at det tager mindst dobbelt så langt tid at udvikle/builde/teste funktioner i React Native, som det ellers ville have gjort i "normal" React.

Hvordan fungerer React Native så? Her er et totalt simpelt (og lidt idiotisk, men okay) eksempel:

import React from 'react';
import { Text, View } from 'react-native';

const HelloWorldApp = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
      }}>
      <Text>Hello, world!</Text>
    </View>
  )
}

export default HelloWorldApp;

I ovenstående kode laver jeg en ultra simpel "Hello, world!" app med React Native. Sådan!

Det fede ved at bruge React Native er at metodikken for at skrive koden er nærmest identisk med React, som man kan bruge til webbaserede software systemer. React er et utrolig populært frontend-javascript framework som bruges af millioner af udviklere rund omkring i verden - inklusiv mig.

Fordele ved at bruge React Native til appudvikling

Hvilke fordele kan der så være ved at benytte React Native spørger du. React Native har mange fordele og her er blot nogle af dem:

  1. Genbrug af kode

    Du kan skrive én kodebase og have den til at køre på både Android og iOS. Det er et kæmpe plus, der kan spare dig for meget tid. Hvis du er "traditionel" app-udvikler, så udvikler du hhv. en kodebase til iOS i Swift og en anden til Android i Java/Kotlin. Det undgår du ved at benytte React Native, da du kan compile din React Native kode til Swift og Java/Kotlin i build-processen! Fedt, fedt, fedt - ikk?

  2. Performance

    React Native apps kører lige så godt som native apps skrevet i Swift (iOS) eller Java/Kotlin (Android).

  3. Community Support

    Da det er open-source, er der et kæmpe community af udviklere, der konstant arbejder på at forbedre det og hjælpe hinanden. Der findes også et stort bibliotek af React Native komponenter, udviklet af andre udviklere, som du kan bruge i din kodebase - hvilket spare dig tid og sved på panden.

  4. God dokumentation Derudover så har React Native altså en rigtig god dokumentation, som man kan bruge som udvikler. Går du igennem dokumentationen, så vil du se at React Native har massere af UI elementer og funktioner som ellers kun er forbeholdt mobile devices. Du kan få adgang til kamera'et, bruge telefonens GPS, bruge face-id - ja det er nærmest fantasien som sætter grænser (og budgettet selvfølgelig).

API-forbindelser og hvorfor de er vigtige i app-udvikling

API'er (Application Programming Interfaces) lader din app kommunikere med andre software-services. For eksempel, hvis din app skal hente data fra en server, ville du bruge en API til at lave den forbindelse. Jeg bruger ofte Laravel som min backend til mine apps, da jeg kan udvikle et API med Laravel forholdsvist hurtigt og så ved jeg at det bare spiller maks.

Her er et simpelt eksempel på, hvordan du kan bruge en API med React Native:

import React, { useEffect, useState } from 'react';
import { View, Text } from 'react-native';

const App = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(json => setData(json))
      .catch((error) => console.error(error))
  }, []);

  return (
    <View>
      <Text>{data ? data.title : 'Loading...'}</Text>
    </View>
  );
};

export default App;

I ovenstående eksempel bruger vi fetch funktionen til at hente data fra en API.

Forståelsen af Redux og dens betydning

Redux er et state management bibliotek, der gør det nemmere at håndtere state i din app. Her er et simpelt eksempel på, hvordan du kan bruge Redux i en React Native app:

import { createStore } from 'redux';
// This is a reducer - a function that takes a current state value and an action object describing "what happened", and returns a new state value.
function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case 'counter/incremented':
      return { value: state.value + 1 }
    case 'counter/decremented':
      return { value: state.value - 1 }
    default:
      return state
  }
}
let store = createStore(counterReducer);
store.dispatch({ type: 'counter/incremented' })

I dette eksempel laver vi en simpel tællerapp, hvor vi bruger Redux til at håndtere staten. Den helt store fordel ved at bruge Redux er at du beholder state globalt i din app, således at den ikke skal videregives via Props. I stedet kan du nøjes med at hente dit state ind hvor du ønsker at bruge dens, samt dispatch'e actions, som ændrer dit state globalt set. For mig at se er en state-management bibliotek (som Redux) et must-have i ethvert React projekt - også React Native projekter. Det gør altså bare dit liv som udvikler meget nemmere og du sikre dig at alt data centraliseres i app'en. Derudover bliver app'en nemmere at vedligeholde.

Omkostninger ved at lave en app

Omkostningerne ved at udvikle en app kan variere meget afhængigt af en række faktorer som kompleksitet, antal platforme, designkrav og så videre.

Ved at bruge React Native kan du potentielt spare en masse omkostninger, da du kun skal skrive koden én gang til både iOS og Android.

Men når det er sagt, så er det altså ikke billigt at få udviklet en app - især ikke hvis den tilbyder kompleks funktionalitet for brugeren. Jeg vil naturligvis gerne give et tilbud på din app idé, såfremt du skulle have behov for udvikling af en app.

Tidsrammen for appudvikling

En simpel app kan tage et par uger, mens en mere kompleks app kan tage flere måneder. Igen kan React Native hjælpe med at reducere tiden, da du kan genbruge koden på tværs af platforme. Du skal dog forvente at det væsentlig mere komplekst at udvikle apps fremfor f.eks. websites.

Hvornår og hvordan du kan få hjælp til udvikling af din app

Hvis du føler, at du har brug for hjælp til at udvikle din app, er du ikke alene. Jeg har masser af erfaring med React Native og vil være glad for at hjælpe dig med at bringe din idé til live.

Det er også ekstremt vigtigt at du sparre med en udvikler når du tænker i funktioner til din app. En app-udvikler kan hurtigt fortælle dig omkring hvilke funktioner som er tidskrævende, dyre og så kan vi "app-udviklere" altså også nogle gange komme på nogle idéer til app'en, som du måske ikke selv havde tænkt over. Så hiv fat en i app-udvikler når du skal udvikle dine idéer til app'en.

Fordelene ved sparring med en app-udvikler

Jeg gentager. At have en erfaren app-udvikler til at sparre med under udviklingsprocessen, idéfasen og implementeringsfasen kan være utrolig værdifuldt. Jeg tilbyder naturligvis rådgivning og support under hele processen, fra ideen til udviklingen og endda support efter lanceringen.

Jeg håber, at du finder disse oplysninger nyttige på din rejse til app-udvikling, hvad enten du er udvikler som jeg eller en potentiel kunde.

Hvis du har nogen spørgsmål, eller hvis du er interesseret i at arbejde sammen, er du altid velkommen til at kontakte mig på cp@codebypanduro.dk eller give mig et kald på +45 22 62 34 62.

Held og lykke med dit fremtidige app-projekt!