Database & WebShop

Simpel App til bestilling af pizza 

Pizza App version 1

Video som viser koden til pizza-browser, bestil knap, sum antal&pris.

• Pizza App - version 1 - VIDEO

Selve koden fra AppLab

• Pizza App - version 1 - KODEN

Opgave 1a

• Kør selve app'en og undersøg.

  • Hvilke funktioner er der?

  • Hvad mangler der?

  • Link til dokument med manglende funktioner  (udfyldes og deles med klassen)

Opgave 1b

• Undersøg koden 

  • Se evt. video med koden

  • Undersøg koden

Opgave 1c

• Udvid app’en

  • App’en har to knapper til at navigere. Kun den ene knap virker.

  • Ændre programmet, så man kan lede begge veje gennem pizzaerne

  • Hvad sker der, når man kommer til den sidste pizza?

Pizza App version 2

Video som viser koden til bestillingskurv.

• • Pizza App - version 2 - VIDEO (14:20)

Opgave 2 - udbyg app med bestillingsliste (kurv)

Inspiration: 

• Video version2 (ovenfor)

• Processing lists  (4:20) - Hvordan man går gennem alle elementer i en liste.

Lav følgende tilføjelser/ændringer:

• Tilføje en bestillingsside, hvor alle pizzanavne kan vises i et textarea.
  Der er to knapper: tøm og betal.
  Den sidste knap gør ikke noget lige nu.

• Tilføje en liste, som skal indeholde numrene på alle bestilte pizzaer.
  Tilføj nummer når der trykkes på Bestil.
  Tøm listen når der trykkes på Tøm.

• Tilføje en knap VisBestilling, som hopper til bestillingssiden.

• Tilføje en funktion som opdaterer indholdet af bestilingssiden.
  Brug pattern Update Screen, og video Processing Lists.

• Tilføje knap Tilbage på bestillingssiden

• Tilføje en funktion som kan beregne den totale pris på pizzaer i kurven.  Video fra ca. 9:00.
  Anvend den til at opdatere total pris på forsiden.

Pizza App version 2

Hvis din egen app driller for meget, så er her en frisk start

• Pizza App version 2 KODE

Pizza App version 3 (database)

• Pizza App version 3 VIDEO  (4:38)

Opgave 3

• Se video og indfør ændringerne i din app.

• Indtast flere pizzaer i databasen

• Test app grundigt.

Opgave 4

Datamodellen skal udvides med billeder.

• Tilføj kolonne til databasen. Feltet skal indeholde URL til billederne.

• Brugerfladen skal opdateres så billederne vises

• Test app grundigt.

Pizza App version 3

Hvis din egen app driller for meget, så er her en frisk start

• Pizza App version 3 KODE

Videoer

• Databaser: Part 1 - Creating Records: youtu.be/d8ByCh-BouQ 

• Databaser: Part 2 - Data Viewer: youtu.be/RZlHfbtO2C4 

• Intro til java-objekter: youtu.be/ZunUF_WGMb4 

Opgave 5

• Rutediagram: Program Øl (øvelse 8.2 ovenfor)

• Rutediagram: Tænd en lampe (øvelse 8.3 ovenfor)

• Rutediagram: Tænd ølkøleren (øvelse 8.5 ovenfor)

Opgave 6

I grupper/par: Diskussion af hvilken process en pizzaordre skal gennemgå.

• Tegn et rutediagram over brugernes vej gennem systemet, når der bestilles pizza.

• Lav papir-prototyper, som støtte til processen.

Logbog

Indsæt i din logbog:

• Rutediagram

• Billeder af prototyper

Efter ovenstående kursus kender du begreberne:

• JavaScript Object  med navngivne egenskaber og værdier (named properties and values)

• Database

• Tabel med rækker (record eller row) og kolonner (column)

• Unik ID (unique id)

• Kommandoer: createRecord, readRecord, deleteRecord, updateRecord

• Callback function, synkron programmering vs asynkron programmering

Opgave 7

I grupper/par: Diskussion af hvilke datafelter der er relevante for en pizzabestilling.

• Lav liste med datafelter: navn og type (tekst, tal, link, ...)

• Justér eventuelt prototyper undervejs

Fælles opfølgning

Vælg opgave 8 A eller 8 B.

Opgave 8 A - Ordrehåndtering

Ny funktion

• Ordrehåndtering - kunder kan sende bestilling og betale

Design og realisering

1. Lav prototype og/eller rutediagram. I kiggede på dette i opgave 6, men skal evt gentænkes!?

2. Lav liste med datafelter. Hvilke oplysninger skal man gemme om en ordre? (se evt. opgave 7)

3. Opret databasetabellen ordrer i systemet

4. Lav koden til håndtering af knappen Bestil (eller hvad den nu hedder) og oprettelse af ny ordre i databasen.

5. Når betalingen er gennemført, skal ordrens status opdateres til Betalt.

Tips: Sådan gemmer man en liste (kurv) i databasen.

Opgave 8 B - Administration af pizzaer

Ny funktion

• Forside med valg mellem menu og administration (adgangskode?)

• Administrations side - pizzamanden kan tilføje, slette og ændre pizzalisten (i app).

Design og realisering

• Lav prototype og/eller rutediagram

• Lav koden til håndtering af forside og administrationsside, samt oprette nye pizzaer i databasen.

• Lav koden til at ændre pizzaer i databasen.

Database kommandoer

Opgave 10 - selve testen

• Hvem tester hvilke apps og hvornår? Planlægges i klassen.

Nødplan: Brug Pizza App version 8, som testobjekt.

Pizza App version 8