FRIGO- Produktoversigt
Så er vi startet på vores projekt. Dette er den første PBI, jeg har skulle lave, som i sin enkelthed går ud på at lave en React Native. I første PBI, er den første skærm; “Oversigt over produkter, med tilhørende modal”, som i fremtiden skal kunne; “tilføje til kurv”.
React Native Cli
- Oprettet første React Native App med CLI og ikke Expo
- Opdateret Ruby og CocoaPods til Pakkefiler til IOS
- Installeret ny version af Android til Android Studio.
Template og Git
- Hentet et REPO med filer til Projektet, da der findes firmastandarder
- Tilpasset VS Code til Azure Git
TypeScript
- Arbejdet med .ts og .tsx filer
- Lavet interfaces med strongly typing (alla C# klasser)
- Lidt som Java => Bedre, hurtigere og hjælper med fejlfinding.
Working with data
- Har brugt hardcoded data, for at designe app.
- Lavet et Fetch() kald til DB på ekstern computer, for test.
- Funktion til at filtrer på “Category” og tilføje til liste.
Components
- ProductScreen
- Header
- ProductList
- ProductDetail
- ProductModal
Hooks
- UseState
- Til at åbne/lukke Modal
- UseReducer
- For at holde styr på antal vare i kurv
Props
- Har sent forskellige props fra parent/child components, fx. en void() eller en “Title” som skulle sættes mv.
Styles
- Samlet alle delte styles og fonts i en .ts fil.
- Importeret Google “Inter” font.
Evaluering
Det har været en rigtig god øvelse. Det er nyt for mig at ikke at bruge Expo, hvillket gav mig en hel dags ekstra arbejde at implementere. Jeg har også prøvet at anvende <Modal> for første gang, men det var lige til, når man læste dokumentationen og fandt de forskellige Props.
Jeg har for første gang forstået alt hvad jeg har kodet, ligesom jeg har været i stand til at sammensætte alt det indlærte. Til at løse opgaven, har jeg brugt kodemateriale fra tidligere opgaver, samt læst lidt på stackoverflow.com ved specifikke problemer og spurgt de erfarne udviklere. Jeg har forsøgt at skrive kommentarer til det hele, således det kan overdrages til ny udvikler.
Litteratur:
-
- Sidemandsoplæring og tidligere læringsmaterialer. => Kan desværre ikke linke til Repo.
- https://reactnative.dev/docs/environment-setup
PBI - Userstory
