Pizzabestilling - video 1
Denne vejledning i at lave en app til pizzabestilling følger videoen herunder, som instruktionerne er hentet fra med henvisning til tidspunkter i videoen.
​
App'en griber pizzabestilling an på denne måde:
-
Kunden kan bladre igennem de pizzaer restauranten sælger ved at klikke på to pile-knapper. (Se skærmbilledet på videoen)
-
Man skal kunne bestille nogle pizzaer, se antal bestilte pizzaer og se den samlede pris.
-
App’en skal kunne holde øje med hvad kunden har bestilt (hvordan kunden også kan se hvad der er bestilt kommer i video 2).
​
Hvis din pizza-app er designet på en anden måde, kan det være en større udfordring at anvende de løsninger der er brugt i disse videoer.
00:45. Omdøb screen1 til main.
Lav en label øverst til overskriften med højden 40 px, bredden 320 px (ligesom skærmen), teksten ”Vælg en pizza”, centrer teksten og gør teksten større. Baggrundsfarven er sort (HEX: #000000) og teksten er hvid (HEX: #ffffff).
01:42. Tilføl to labels, som skal vise information om den valgte pizza, nemlig navn og pris. Disse labels får beskrivende id (lblPizzaNavn og lblPris), fordi de skal kunne ændres i koden, når brugeren vælger næste pizza, og navnene derfor være lettere at genkende for programmøren. Begge labels har bredden 200 px.
02:25. Indsæt en knap med teksten Bestil pizza, id ”butBestil” og baggrundsfarve rgb(26, 188, 156) til bestilling af den valgte pizza.
02:43. Nedenunder knappen skal man kunne se hvor mange pizzaer man har bestilt og hvor meget de tilsammen har kostet. Anbring en label med teksten Antal og id lblAntal og endnu en label med teksten Samlet pris og id lblSamletPris.
03:20. Nu skal der laves to høje knapper i hver side af skærmen til at navigere mellem de forskellige pizzaer. Bredden er 40 px og højden er 410 px. Slet knapteksterne og vælg pile-ikoner passende til frem og tilbage knapper. Knappernes id’er er butVenstre og butHojre.
​
Kodning (logiklaget)
04:45. Skift til kodevisning og til Variables for at gøre klar til at opbevare de data der skal bruges. Vi får behov for en liste med variable, som vi kan gemme pizzanavnene i. Variabelnavnet pizzanavne er uden anførselstegn, men selve pizzanavnene på højresiden af lighedstegnet er med anførselstegn fordi de er tekster.
05:15. Tilføj endnu en liste til at gemme priserne, som er heltal uden anførselstegn.
05:37. For at finde ud af hvilken pizza der skal vises på skærmen, oprettes en variabel der kan pege på det rette nummer i listen. Når variablen er 0, peger den på skinkepizzaen (lister starter med nummer 0).
05:52. Tilføj en hændelsesprocedure (en onEvent -blok) til Højre-knappen. Du kan finde onEvent -blokken øverst i UI controls og angive id’et til butHojre.
06:16. For at gå videre til den næste pizza, når brugeren klikker på butHojre, skal variablen pizzanr, som gemmer nummeret på den aktuelle pizza, tælles én op. Træk den tredje øverste blok (en tildelingsblok) i Variables over i Linje 5.
Indtast pizzanr på venstresiden, som skal gemme nummeret på den næste pizza. Skift til Math og træk en plus operator over på højresiden af lighedstegnet i Linje 5 for at beregne det nye pizzanummer der skal peges på.
06:30. Indtast pizzanr på højresiden af lighedstegnet men før plusset. Den gemmer nummeret på den nuværende pizza der bliver vist. Indtast 1 efter plus for at beregne nummeret på den næste pizza.
​
06:35. Når vi har nået den sidste pizza (Pepperoni) på listen , skal vi sørge for at starte forfra. . Det gør vi med en IF-sætning.
06:45. Indsæt en ’større end’ operator fra Math .
06:55. Indtast pizzanr på venstreside af > og træk en minus-operator over på højresiden til beregning af nummeret på den sidste pizza på listen.
07:00. Nummeret på den sidste pizza beregnes som listens længde minus 1, fordi lister i javascript begynder med nummer 0. Træk blokken str.length over på højresiden af > og indtast pizzaNavne i stedet for str.
07:25. Indsæt en blok til opdatering af variablen pizzanr og sæt den lig 0, så der peges på den første pizza igen (skinke).
07:35. For at brugeren kan se at der sker noget, skal der vises noget tekst om den valgte pizza her på de to labels. Fordi det skal ske hvad enten der klikkes på butHojre eller butVenstre, opretter vi en funktion, som kan genbruge koden. Træk derfor en funktion over og giv den navnet visPizza.
07:55. Træk en setText over i funktionen visPizza, angiv id til lblPizzaNavn og slet ”text”. Indtast derefter pizzaNavne[pizzaNr] (bemærk kantparenteser omkring pizzaNr), som gemmer navnet på den valgte pizza med det nummer.
08:25. Det samme med prisen. Træk endnu en setText over i funktionen visPizza og angiv id til lblPris, slet ”text” og indtast pizzaPriser[pizzanr].
08:50. Nu mangler vi kun at lave et funktionskald til visPizza oppe fra hændelsesproceduren for knappen buthojre. Træk funktionskaldet ind fra kategorien Functions og indtast visPizza. Det betyder, at når pizza-tælleren er blevet opdateret, skal den valgte pizza vises.
09:05. Test at det virker.
​
Billeder af hver pizza er ikke en del af prototypen i videoen. Hvis du ønsker at der skal vises et billede af hver pizza, kan du følge vejledningen her. Bagefter kan du fortsætte med videoen.
09:20. Nu vil vi gerne have at man kan bestille en pizza. Lav først en onEvent til knappen butBestil.
09:45. Erklær variablen antalBestilte og giv den startværdien 0.
09:53. Når man så klikker på knappen Bestil pizza skal variablen antalBestilte blive den værdi den har i forvejen plus 1 (forøges med 1).
10:05. Den samlede pris skal også opdateres, så vi erklærer en variabel samletPris og initialiserer den ligeledes til 0.
10:20. Variablen samletPris skal opdateres hver gang der bestilles en pizza. Derfor trækkes den tredje øverste blok over i hændelsesproceduren. samletPris (på venstresiden af lighedstegnet) tildeles den værdi den havde forvejen plus prisen på den aktuelle pizza, som vi kan referere med pizzapriser[pizzanr].
10:40. Nu har vi fået opdateret antallet af pizzaer og den samlede pris på dem. Så skal vi bare have det vist i brugerfladen. Der kan vi bruge den funktion visPizza vi allerede har, så den kalder vi her igen med et funktionskald til visPizza.
10:55. Vi skal sørge for at koden også opdaterer de to labels nedenunder. Træk to setText kommandoer mere over i funktionen og angiv id’er og tekster som vist herunder i Linje 16 og 17.
Test at det virker.