Home » Apps » Guide: Lav apps til mobilen
Guide: Lav apps til mobilen

Guide: Lav apps til mobilen

Share

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.

Se også:  4 i test - de bedste gratis Windows 10-apps

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.

TAGS
apps
javascript
programmering

DEL DENNE
Share

Seneste Tech test
Seneste konkurrencer

Mest populære
Populære
Nyeste
Tags

Find os på de sociale medier

Modtag dagligt IT-nyhedsbrev

Få gratis tech-nyheder i din mail-indbakke alle hverdage. Læs mere om IT-UPDATE her

Find os på FaceBook

Alt om DATA

Lautrupsgade 7,
DK-2100 København Ø
Telefon: 33 91 28 33
redaktion@altomdata.dk

Datatid TechLife

Lautrupsgade 7,
DK-2100 København Ø
Telefon: 33 91 28 33
redaktion@datatid.dk

Audio Media A/S

CVR nr. 16315648,
Lautrupsgade 7,
DK-2100 København Ø
Telefon: 33 91 28 33
info@audio.dk
Annoncesalg / Prislister:
Lars Bo Jensen: lbj@audio.dk Telefon: 33 74 71 16
Annoncer: Medieinformation


Alt om DATA, Datatid TechLife  © 2019
Privatlivspolitik og cookie information - Audio Media A/S