kmom01: Vår första React Native app

Vi ska i detta kursmomentet ta en titt på hur vi utvecklar appar med hjälp av ramverken React Native och Expo. Vi tar en titt på båda ramverken och hur vi utvecklar med hjälp av TypeScript i React Native. Dessutom introduceras Lager-API:t som är med oss i kmom01-kmom06 och hur vi hämtar data från det API:t.

Såhär kan det se ut när vi är klara med kmom01:

(Detta är instruktionen för kursmomentet och omfattar det som skall göras inom ramen för kursmomentet. Momentet omfattar cirka 20 studietimmar inklusive läsning, arbete med övningar och uppgifter, felsökning, problemlösning, redovisning och eftertanke. Läs igenom hela kursmomentet innan du börjar jobba. Om möjligt – planera och prioritera var du vill lägga tiden.)

#Labbmiljön

(ca: 1 studietimme)

Det finns en längre beskrivning om kursens labbmiljö. Läs den om du är osäker på vad som skall göras, eller om detta är din första dbwebb-kurs.

Installera labbmiljön för kursen. TLDR har du node och npm installerat är det bara att tuta och köra.

Uppdatera sedan dbwebb-cli samt klona och initiera kursrepot.

# Gå till din katalog för dbwebb-kurser
dbwebb selfupdate
dbwebb clone webapp
cd webapp
dbwebb init

#Läsanvisningar

(ca: 6-10 studietimmar)

#Artiklar

Läs följande artiklar för att få bakgrunden till övningarna.

Läs artiklarna Core Components and Native Components och React Fundamentals för att bekanta dig med grunderna för React och React Native.

Läs dessutom Walkthrough för att utforska flödet för utveckling och driftsättning i Expo.

För att förstå ett viktigt begrepp inom JavaScript-ramverk komponenter är artikeln React Fundamentals en bra start.

#Video

1. Det finns en videoserie kopplat till kursen, titta på videos som börjar på 1.

Dessutom är nedanstående bra introduktioner till JavaScript ramverket React och till React Native som vi använder i denna kursen:

#Lästips

1. Läs översiktligt denna samling av “best-practices” för typografi på webben Typography Handbook. Spara den i dina bokmärken som en framtida referens.

#Git & GitHub

För kurspaketare introduceras Git och GitHub i denna kursen. Git är ett versionshanteringssystem för kod och GitHub är en webbplats där man kan ladda upp sitt Git-repo och använda extra tjänster. Om du inte har ett konto på GitHub gör följande steg nedan.

1. Bekanta dig kort med dokumentation på Gits hemsida. Där finner du referensinformation, en onlinebok om Git och ett antal korta videor som ger dig grunderna till vad Git och versionshantering handlar om.

2. Skaffa dig ett konto på GitHub. Du behöver det för att ladda upp och publicera ditt Git-repo. Det är gratis med konto och att ladda upp publika repon.

3. Ägna en stund åt att bekanta dig med webbplatser för GitHub. Du kan även kort och översiktligt kika på de guider och videor som finns för GitHub. Notera att de täcker så mycket mer än vad vi kommer jobba med i kursen så det kan räcka att du endast noterar att det existerar guider för hur man jobbar med GitHub.

Förutom ovanstående finns video-spellistan “Introduktion till git”:

#Övningar & Uppgifter

(ca: 6-10 studietimmar)

#Övningar

Gör följande övningar för att träna inför uppgifterna.

1. För att introduceras till eller repetera Git och Github jobba igenom guiden “Kom igång med Git och GitHub”. Denna guide introducerar dig till Git/GitHub, ett verktyg som är branchstandard för att versionshantera kod.

2. Läs igenom artikeln “Typografi i mobila enheter”. Spara koden i me/kmom01/typography.

3. Gör övningen “Introduktion till Lager-API:t” för att bekanta dig med Lager-API:t som vi kommer använda i kursen.

4. Gör övningen “En app i Expo och React Native”. Spara resultatet i me/lager.

#Uppgifter

Dessa uppgifter skall utföras och redovisas.

1. Gör uppgiften “Lager appen del 1”. Spara din kod i me/lager.

#Kontrollera din inlämning

Se till så att en länk till ditt GitHub-repo ingår som en del av din inlämning på Canvas. Länken ska vara på formen: https://github.com/emilfolino/lager-v4.git

Emil visar i nedanstående video hur man gör en inlämning i webapp kursen.

#Resultat & Redovisning

(ca: 1-2 studietimmar)

Läs instruktionen om hur du skall redovisa.

Se till att följande frågor besvaras i redovisningstexten. Redovisningstexten ska enbart lämnas in via Canvas.

• Är du sedan tidigare bekant med utveckling av mobila appar?
• Vad tycker du om utvecklingsmiljön med React Native och Expo jämfört med utvecklingsmiljön i tidigare dbwebb-kurser?
• Vilket är den viktigaste lärdomen du gjort om typografi för mobila enheter?
• Du har i kursmomentet hämtat data från ett API. Hur kändes detta?

TIL är en akronym för “Today I Learned” vilket leksamt anspelar på att det finns alltid nya saker att lära sig, varje dag. Man brukar lyfta upp saker man lärt sig och där man kanske hajade till lite extra över dess nyttighet eller enkelhet, eller så var det bara en ny lärdom för dagen som man vill notera.

• Vilken är din TIL för detta kmom?

#Revision history