Alle Kan Kode UI/UX

Viser en blok hvor der er designet en brugergrænseflade til en app

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.

  1. Design principper, Onsdag d. 15 januar kl 20.00
  2. Flow og Wireframes, Tirsdag d. 21 januar kl 20.00
  3. Prototyping del 1, Tirsdag d. 28 januar kl 20.00
  4. Prototyping del 2, Tirsdag d. 4 februar kl 20.00
  5. Igang med SwiftUI, Tirsdag d. 11 februar kl 20.00
  6. Data i SwiftUI, Tirsdag d. 11 februar kl 20.00
  7. Data i SwiftUI del 2, Tirsdag d. 25 februar kl 20.00
  8. Første byggedag i SwiftUI, Tirsdag d. 3 marts kl 20.00
  9. Udvidet log ind view (byggedag 2) i SwiftUI, Tirsdag d. 10 marts kl 20.00
  10. Swift UI
  11. Swift UI
  12. Opsætning af server, vi skal bruge til at have et backend system
  13. Forretningslogik 1
  14. Forretningslogik 2
  15. Udviklingsmiljø til Android / Flutter udvikling
  16. Flutter
  17. Flutter
  18. Flutter
  19. Flutter
  20. Flutter
  21. Flutter
  22. Flutter
  23. Forretningslogik 1 i dart
  24. Forretningslogik 2 i dart
Antal lektioner: 24
Første lektion: 15.01.2020 - 20:00
Sidste lektion:

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…

Læs mere »

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…

Læs mere »

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…

Læs mere »

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…

Læs mere »

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…

Læs mere »

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…

Læs mere »

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…

Læs mere »

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….

Læs mere »

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….

Læs mere »

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…

Læs mere »

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…

Læs mere »

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…

Læs mere »

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…

Læs mere »

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…

Læs mere »

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…

Læs mere »

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…

Læs mere »

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…

Læs mere »

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…

Læs mere »

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…

Læs mere »

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…

Læs mere »

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…

Læs mere »

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å…

Læs mere »

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…

Læs mere »
>