Alle Kan Kode UI/UX
Dette er sæson 2020 af Alle Kan Kode, og denne sæson fokuseres vi på selve brugergrænsefladen og brugeroplevelsen, og ikke bare på iOS men også på Android.
Vi vil udvikle en simpel app der skal løse den funktion at man plukker en vare til en ordre på et lager. Men vi vil gøre det på en sådan måde at vi fokuserer primært på brugeroplevelsen af plukke processen, og mindre på hvilket system vores app skal tale sammen med.
Og fordi man sjældent vil se en iPhone blive brugt som en plukke terminal på et lager, da disse tidligere har kørt Windows Mobile og i stigende omfang kører Android, ja så vil vi både udvikle denne plukke app så den kan afvikles på iOS men også Android.
Vi starter med at fokuserer på brugergrænsefladen, og implementerer denne efterfølgende ved hjælp af SwiftUI, og senere bygger vi så samme app i Flutter og Dart.
I denne sæson lærer du derfor både at se se app udvikling ud fra brugergrænsefladen og bruger oplevelsen, prototyping af brugergrænsefladen, og senere at implementere dette på flere platforme.
Det forventes at give os en masse udfordringer, både fordi vi skal tvinge os selv til at se udviklingen fra en anden vinkel, men også fordi at SwiftUI og Flutter er meget nye teknologier.
Flutter blev lanceret i starten af 2019, og SwiftUI blev lanceret i Juni 2019.
Undervisningsformen
Der undervises med en times live undervisning hver uge i planlagte 24 uger, og du vil få det maksimale ud af det hvis du ud over undervisningstimen, investerer 2-3 timers egen tid i at lære og eksperimentere.
Hvad kræver det af udstyr
Du skal have en Mac computer der afvikler MacOS 10.15 Catalina, for at kunne deltage på SwiftUI delen. Til Android udviklings delen kræves der en computer der enten afvikler Windows, Linux eller MacOS.
Det er en fordel at have en iPhone der afvikler iOS 13, og hvis du vil eksperimentere med Android på en fysisk enhed er det en fordel at have en sådan telefon. Jeg er ikke sikker på skrivende stund om der vil være krav til hvilken version af Android der afvikles, men jeg forventer at en af de nyere versioner som Android 9 eller 10 vil være en fordel.
Under vejs skal vi arbejde med det visuelle design. Til dette kan du anvende forskellige typer software, hvilken du anvender er op til dig selv. Det handler ikke om at vi skal være gode til at bruge et bestemt stykke design software, men det handler om det at designe en god brugeroplevelse i en app.
Lektionsplan
Følgende lektioner er planlagt, men vil blive tilpasset under vejs i forløbet hvis vi har brug for dette, derfor vil der løbende blive skrevet datoer på listen.
- Design principper, Onsdag d. 15 januar kl 20.00
- Flow og Wireframes, Tirsdag d. 21 januar kl 20.00
- Prototyping del 1, Tirsdag d. 28 januar kl 20.00
- Prototyping del 2, Tirsdag d. 4 februar kl 20.00
- Igang med SwiftUI, Tirsdag d. 11 februar kl 20.00
- Data i SwiftUI, Tirsdag d. 11 februar kl 20.00
- Data i SwiftUI del 2, Tirsdag d. 25 februar kl 20.00
- Første byggedag i SwiftUI, Tirsdag d. 3 marts kl 20.00
- Udvidet log ind view (byggedag 2) i SwiftUI, Tirsdag d. 10 marts kl 20.00
- Swift UI
- Swift UI
- Opsætning af server, vi skal bruge til at have et backend system
- Forretningslogik 1
- Forretningslogik 2
- Udviklingsmiljø til Android / Flutter udvikling
- Flutter
- Flutter
- Flutter
- Flutter
- Flutter
- Flutter
- Flutter
- Forretningslogik 1 i dart
- Forretningslogik 2 i dart
Lektioner
Design Principper
I denne første lektion af Alle Kan Kode sæson 2020, skal vi lære om grundlæggende design principper. Vi ønsker at designe vores app uden at vi skal være begrænset af…
Flow og Wireframes
Vi tager de næste skridt i UI/UX design, og arbejder os i denne lektion hen til en metode vi kan identificere brugerens oplevelser og med det i baghånden kan begynde…
Formularer i Flutter
Om det er en login formular, eller indstillinger til din app, så vil du skulle kunne håndtere indtastninger af data. Flutter har et helt formular system som vi kan anvende…
Http i flutter
Hvordan anvender vi Http protokollens muligheder for kommunikation med webservices i flutter. Det skal vi lære i denne lektion. Asynkron afvikling af kode Når kode skal kommunikere med en server…
JSON i flutter
Vi har lært at bruge JSON i Swift, så vi i SwiftUI kunne kommunikere med en server. Nu skal vi lære hvordan JSON håndteres i flutter, og det er noget…
Prototyping del 1
Hvordan ved man at man er på rette spor med en app ide? Man prøver det selvfølgelig af, men hvordan prøver man det af når man ikke har en kørende…
Prototyping del 2
I anden del af prototyping bygger jeg en prototype ud fra de wireframes der blev lavet i del 1. Det er her hvor teori og paktik smelter sammen, og det…
Igang med SwiftUI
Der er en ny stjerne i byen. SwiftUI, så dagens lys til WWDC 2019, og det er et fantastisk framework som kan bruges til at bygge brugergrænseflader til Apples platform….
Data i SwiftUI
Skærmbilleder skal vise data, og skal kunne tage imod data fra brugeren. Og derfor skal vi i denne lektion lære hvordan man kan binde data og brugergrænseflade sammen i SwiftUI….
Data i SwiftUI del 2
I sidste lektion tog vi hul på hvordan man kan bruge en model type i SwiftUI, vi så på simple typer, og i denne lektion skal vi lære om de…
Første byggedag i SwiftUI
Efter nogle indledende lektioner, hvor vi har lært om basis SwiftUI, skal vi nu igang med at bygge vores prototype i SwiftUI. Men først er der lige et objekt vi…
Udvidet log ind View i SwiftUI
På Byggedag 2 i SwiftUI skal vi se på hvordan vi kan håndtere det log ind view som blev bygget i forrige lektion. Det skal nemlig kunne kaldes fra alle…
SwiftUI bygget med små bidder
I byggedag 3 med SwiftUI skal vi bygge videre på vores app. Vi er kommet til at bygge flere stumper sammen til det der skal blive til det view hvor…
Fejl løsning i SwiftUI – Byggedag 4
I forrige lektion sluttede vi af med at have en situation i vores app som ikke helt gav mening. Og sådan er der mange fejlbeskeder i SwiftUI der kan kaste…
Server til SwiftUI projektet
Det er tid til at vi skal have en server op at stå som vi kan teste vores UI op mod. Derfor har jeg forberedt en lidt anderledes lektion hvor…
Integrationer del 1
I forrige lektion fik vi opsat den server vi skal have vores app brugergrænseflade til at tale sammen med. I denne lektion skal vi have defineret alle de api kald…
Integrationer del 2
I forrige lektion fik vi identificeret og afprøvet de integrationer der skal kodes for at få vores brugergrænseflade til at tale sammen med den webshop vi har installeret på vores…
Klar til Android og Flutter
Det er blevet tid til at tage de første skridt ind i Androidernes verden. Ikke fordi vi skal droppe Swift, Apple eller iOS, men fordi du skal lære at du…
De første Flutter trin
Vi har fået installeret Android Studio i forrige lektion, og nu skal vi i gang med at træde vores første trin i Android studio med Flutter udvikling. Gennemgang af Android…
En flutter sluppert
Ja den er god nok. Vores sluppert vender tilbage. Denne gang er det bare en flutter som vi skal bruge til at bygge vores sluppert app i. Android Studio og…
Dart for Swift udviklere
Ikke dart som i det spil der helst skal spilles med en kold fadøl i den ene hånd, og en dartpil i den anden hånd, men Dart som i programmeringssproget…
Navigation i Dart og Flutter
De fleste apps har flere skærmbilleder. I Swift bruger vi Segue i UIKit og i SwiftUI bruger vi et NavigationLink til at styre navigation mellem skærmbilleder. Men hvad gør vi…
ListViews i Flutter
Det mest brugte view i iOS er et UITableView, eller slet og ret en List i SwiftUI, og det er ikke anderledes på Android platformen, så selvfølgelig har Flutter også…
Data i flutter apps
Data eller State i apps har vi lært a lave i SwiftUI, og uanset hvilken app vi skal lave så er det noget vi skal kunne, også når vi bruger…