Artikel top billede

(Foto: Computerworld)

Guide: Lav apps til mobilen

Sådan kommer du i gang med at udvikle dine egne apps til mobilen via Java-Script og React Native.

Af Kenneth Geisshirt, Alt om Data

Denne artikel er oprindeligt bragt på Alt om Data. Computerworld overtog i november 2022 Alt om Data. Du kan læse mere om overtagelsen her.

I 1995 var ideen om små scripts i en web-browser ny. Java var allerede et populært programmeringssprog til server-delen, og programmeringssproget til browseren kom naturligt til at hedde JavaScript. I dag bruges JavaScript ikke kun til små scripts i browsere, men sådan cirka alle steder. I Alt om DATA nr. 4 2019 har vi set, hvordan JavaScript kan bruges sammen med små microcontrollers som BBC micro:bit, men denne gang skal vi se, hvordan JavaScript kan bruges til udvikling af apps til mobiltelefoner.

React Native

Sammen med HTML og CSS er JavaScript dominerende teknologier til webapplikationer. Mens HTML og CSS bruges til indhold, bruges JavaScript til logikken i den kode, som afvikles i webbrowsere. Med web 2.0-bølgen flyttede mere logik fra server til browseren (klienten). Samtidig er JavaScript flyttet ind på serveren, hvor node.js ser ud til at vinde mere og mere indpas.

Der findes et utal af webbrowsere (Chrome, Edge, Opera, Firefox, Safari – bare for at næv-ne et par stykker) til alverdens styresystemer. Tidligere kunne der være problemer med nogle webapplikationer, men typisk virker enhver webapplikation og webside i alle browsere på alle styresystemer. Med andre ord, webudviklere skal kun skrive deres applikation en gang. Den store standardisering af HTML, CSS og JavaScript er nøglen!

I dag findes der primært to mobilplatforme: Android og iOS. De to platforme er meget forskellige. Konsekvensen er, at det er nødvendigt at udvikle og vedligeholde to apps, hvis du gerne vil dække begge platforme. Mange steder findes drømmen om at kunne nøjes med et programmeringssprog og dermed dække begge platforme på en gang.

Faktisk er det forsøgt flere gange i de sidste ti år at bygge et fælles udviklingsmiljø. Vi har set Cordova, NativeScript, React Native og Adobe AIR som alle benytter JavaScript. Er du mere til C# er Xamarin en mulighed. Et af de seneste forsøg er Flutter, som bygger på det mindre kendte programmeringssprog Dart.

I denne artikel ser vi på React Native, som er Facebooks bud på et fælles miljø. React Native er interessant, da det bygger ovenpå React. Kort fortalt er React et JavaScript-
bibliotek, som bruges til at bygge webapplikationer med. Så ikke nok med, at du let kan skrive din app til to forskellige mobilplatforme, du kan også dele komponenter med din webapplikation.

Der findes en del apps, som er skrevet vha. React Native. Af danske apps finder du bla. Tivoli og Dagens Pollental fra Astma- og Allergiforbundet. I det store udland har Khan Academy, BeerRate, Reddit og Good Reads valgt at bruge React Native til udvikling af apps.

Få værktøjerne på plads

Inden vi kan komme i gang med at skrive en mobil-app, skal vi have en række værktøjer på plads. Du kan bruge enten Windows, Linux eller MacOS som styresystem, mens du udvikler din app, men skal du afprøve din app på iOS, er du nødt til at bruge MacOS. Så er du MacOS-bruger, er det klart en fordel, at du installerer Apples udviklingsmiljø Xcode. React Native og Xcode har et kompliceret samliv. Ofte vil opdateringer til Xcode fra Apple betyde, at React Native ikke virker. Det betyder, at du bør være en smule påpasselig med at opdatere Xcode, før du er sikker på, at React Native er klar.

Med Xcode får du en iOS-simulator, som hjælper dig i at arbejde med React Native. Skal du afprøve din app på Android, kan du godt finde de enkelte komponenter (emulator og SDK) enkeltvis, men det er lettest at installere Android Studio. Android Studio understøtter både Windows, Linux og MacOS så er du ikke MacOS-bruger, kan du nøjes med at udvikle til Android.

Sagt på en anden måde: du kan godt lade være med at installere Xcode og Android Studio. Men så er du nødt til at have både en iPhone/iPad og et Android-baseret device til at teste med.

React Native består af en række værktøjer skrevet i JavaScript. Det kræver derfor, at du har mulighed for at afvikle JavaScript på din computer. Med andre ord, du er nødt til at installere node.js. Du kan downloade node.js her, og både Windows, Linux og MacOS er understøttet. Du skal være opmærksom på, at nyere versioner af React Native kræver node.js version 8.2.0 eller senere. I skrivende stund er version 10.15 den anbefalede version, så vælger du den, er du nogenlunde på sikker grund.

Med Xcode, Android Studio og node.js installeret, er du klar til at installere selve React Native-værktøjerne. Skal du ikke bruge nogle komponenter fra enten iOS eller Android, kan du bruge React Native i form af Expo (https://expo.io/). Installationen er meget let: kommandoen npm install -g expo-cli er alt, hvad der skal til. Du får muligvis en del advarsler under installationer, men jeg har ikke set, at de giver problemer senere.

Har du brug for visse platform-specifikke komponenter (Bluetooth er et eksempel), er du nødt til at bruge det rene React Native. Du kan installere det med kommandoen npm install -g react-native-cli. Denne artikel bruger Expo, men langt det meste vil være det samme.

Bruger du Visual Studio Code som editor, findes der en række udvidelser som er målrettet React Native, f.eks. React Native Tools.
I langt de fleste tilfælde bør du have Chrome installeret. Hvis du skal debugge din app, virker det primært sammen med Chrome.

Start på en app

Med Expo installeret, er du klar til at skrive din app. Det er egentlig meget let. Kommandoen expo init AoDNyheder vil generere skelettet til en app ved navn AoDNyheder. Du kan vælge forskellige skelettyper, og til denne artikel er “Blank” valgt. Skelettet indeholder alt det, som er krævet for at bygge og køre en app. Faktisk indeholder appen også en minimal app.

Det tager en rum tid at generere skelettet, men når du har fået genereret skelettet, er det bare med at komme i gang. Tiden afhænger både af, hvor hurtig din computer er, og hvor bred en netforbindelse, du har. Når skelettet er klar, kan du skifte til folderen med din app (cd AoDNyheder), og du kan starte hele udviklingssystemet op med kommandoen npm start. En ny tab åbnes i din browser. Se figur 1, 2 og 3

Figur 1: Når du starter udviklingssystemet op, sker der en masse i din terminal. Figur 1: Når du starter udviklingssystemet op, sker der en masse i din terminal.
Figur 2: Med Chrome kan du styre, hvordan du tester din app. Figur 2: Med Chrome kan du styre, hvordan du tester din app.
Figur 3: Den minimale app som automatisk genereres kan let afvikles i en iOS-simulator, men det er app uden meget funktionalitet. Figur 3: Den minimale app som automatisk genereres kan let afvikles i en iOS-simulator, men det er app uden meget funktionalitet.

Med udviklingssystemet kørende, kan  du vælge at starte en iOS-simulator eller Android-emulator. Du kan nu se, din app køre.

I filen App.js finder du din app. Eller rettere, du finder hovedfilen, idet du naturligvis kan lade din app sprede sig over mange flere filer. Når du gemmer en af filerne, vil din app automatisk blive bygget, pakket og sendt til en simulator eller device. Det vil sige, at du kan ændre små ting i brugergrænseflade og se, hvordan ændringerne kommer til at se ud – nærmest i real-tid. Det er absolut et af React Natives styrker, at der er mulighed for at eksperimentere så let.

Nyheder

Lad os forsøge os med at udvide den minimale app med lidt ikke-triviel funktionalitet. Magasinet Alt om DATA har et webside med nyheder og artikler. Fra https://www.altomdata.dk/feed er det muligt at få en oversigt over de seneste nyheder. Det er ikke et format, der er brugbart for mennesker, idet det kommer som i et XML-baseret format. Vores lille app kan hente denne oversigt og vise brugeren den. Når brugeren trykker på en af artiklerne, kan appen hente artiklen og vise den. Hvis du vil se den fulde app, finder du den her. Vores app består af to skærme: en skærm med oversigten og en skærm med den valgte artikel.

En app baseret på React Native bygger brugergrænsefladen op, som om det var en webside. Hver skærm er implementeret af en klasse i JavaScript, og vi kan implementere skiftet fra den ene skærm til den anden vha. tredjeparts-komponenten React Navigation. For at bruge denne komponent, er du nødt til at installere den først. Kommandoen npm install --save react-navigation er alt, hvad der skal til.

En klasse, som repræsenterer en skærm, skal nedarve fra React.Component. Hver instans/objekt af en klasse har egenskaber (properties eller ofte bare props) og tilstand (state). Værdien af props sættes af det objekt, som opretter det nye objekt. Vi kan bruge det til at fortælle skærmen, som viser en artikel, hvilken URL, artiklen kan findes på. Endvidere har klasserne altid metoden render(). Den er den metode, som genererer selve brugergrænsefladen.

Hvordan de to skærme er inkluderet i selve appen er vist i infoboks “Navigation”. Du kan se de to klassenavne (RenderList og ClickedItem).

Har du brug for at sætte noget op, når et objekt oprettes, kan du gøre det i metoden componentDidMount(). I boksen nedenfor kan du se, hvordan oversigtskærmens (RenderList) componentDidMount() ser ud. Det er værd at bemærke tre ting.

Hent oversigt

componentDidMount() {
fetch(‘https://api.rss2json.com/v1/api.json
?rss_url=https%3A%2F%2Fwww.altomdata.dk%2Ffeed’, {
method: ’GET’,
headers: {
Accept: ’application/json’,
’Content-Type’: ’application/json’,
}
})
.then((response) => response.json())
.then((responseJson) => {
return responseJson.items;
})
.then((newsItems) => {
this.setState({ dataSource: ds.cloneWithRows(newsItems) },
() => { this.setState({ loading: false }) });
});
}
Infoboks - Vis oversigt
render() {
return(
<View style = { styles.container1 }>
{
(this.state.loading)
?
(<ActivityIndicator size = “large”/>)
:
(<ListView style = {{ alignSelf: ‘stretch’ }}
dataSource = { this.state.dataSource }
renderRow = { (rowData) =>
<TouchableOpacity style = { styles.item }
activeOpacity = { 0.4 }
onPress = { this.clickedItemText.bind(this, rowData) }>
<Text style = { styles.text }>{ rowData.title }</Text>
</TouchableOpacity>
}
renderSeparator = {() =>
<View style = { styles.separator }/>
}
enableEmptySections = { true }/>
)}
</View>
);
}

Infoboks - “Navigation”
const AppNavigator = createStackNavigator({
List: { screen: RenderList },
Item: { screen: ClickedItem }
});
const AppContainer = createAppContainer(AppNavigator);
export default AppContainer;

Infoboks - “Vis artikel”
render() {
return(
<WebView style = { styles.container2 }
source={{uri: this.props.navigation.state.params.item.link }}
/>
);
}

For det første den udbredte brug af promises (se f.eks. https://javascript.info/promise-basics), som i dag er meget udbredt blandt JavaScript-udviklere. For det andet er der et lille trick. Websiden sender XML tilbage, men det er svært at håndtere i JavaScript. Ved brug af en ekstern tjeneste, er det muligt at få det oversat til JSON (JavaScript Object Notation), som er meget lettere at arbejde med. Sluttelig er det værd at bemærke, at objektets tilstand (this.setState()) sættes med resultatet.

I infoboks “Vis oversigt” kan du se, hvor oversigten vises. Metoden render() genererer brugergrænsefladen, og vi har her valgt at bruge ListView, som er en meget enkel liste. Som du kan se, vil den reagere, når du trykker på en række (onPress = { … }). Det beskriver, hvilken funktion, der kaldes, når du trykker.

Visning af en artikel samt nyhedsoversigten kan ses i både iOS-simulatoren og Android-emulator (iOS-versionen vist ovenfor). Visning af en artikel samt nyhedsoversigten kan ses i både iOS-simulatoren og Android-emulator (iOS-versionen vist ovenfor).

Selve visningen af en artikel udføres af klassen ClickedItem. Det er let, idet det overlades til WebView som komponent, der kan vise HTML/CSS (altså den centrale komponent af en webbrowser). I infoboks “Vis artikel” kan du se, hvordan metoden render() bruger den URL, som er sat som prop, til at hente og vise en artikel.

Afslutning

Denne artikel er et forsøg på at give dig en meget kort introduktion til React Native. Der er skrevet mange bøger om emnet, og du kan finde mange tutorials rundt om på internettet.

Et af de største kritikpunkter er, at React Native har en kopi af hele brugergrænsefladen i hukommelsen. For en kompleks app med mange skærme og meget funktionalitet kan det give problemer. Ingen bruger bliver glad, når en app lukkes ned af styresystemet pga. manglende hukommelse.

Desværre virker hele udviklingsmiljøet til tider en smule ustabilt. Det kan være nødvendigt at stoppe det og køre npm start igen.

Umiddelbart er det enhver programmørs drøm at kunne skrive en app én gang og bruge den på flere platforme. React Native (og Expo) indfrier det, men prisen kan være høj. Har du tidligere arbejde med JavaScript, kan React Native være din vej mod alverdens smartphones.