Tredun ohjelmistokehittäjien kurssimateriaaleja
Tehtävänä on suunnitella prototyyppi fanikaupalle. Fanikauppa on ReactJS:llä toteutettava Single Page Application. Voit valita kaupan aiheen vapaasti. Kaupassa voidaan myydä esimerkiksi jonkin urheiluseuran tms. tuotteita.
Huom! Aloita uusi projekti käyttämällä vite-scriptiä!
Huom! Käytä vain sellaisia tuotekuvia, joiden käyttöehdot sallivat uudelleen käytön ja julkaisemisen (projekti käynnistetään Herokussa).
Kannattaa tutustua taulukko- ja oliomuotoistaen tilamuuttujien käsittelyyn ennen harjoituksen tekemistä:
Tuotteiden selailu
Käyttäjä voi selailla myynnissä olevia tuotteita. Tuotteista näytetään kuva, lyhyt nimi sekä kappalehinta (euroissa). Muista lisätä myös uniikki id sekä tuotetyyppi. Tuotelistaa pitää voida selata, sekä tutustua tuotteen tarkempiin tietoihin. Tarkemmat tuotetiedot voivat avautuvat otsikkoa klikkaamalla tai niin että kerrallaan näytetään vain yksi tuote ns. “karuselli”-tyylinen selaaminen. Voit siis itse valita millä tavoin tuotteiden selailu tapahtuisi. Pyri kiinnittämään huomiota sovelluksesi käytettävyyteen. Prototyypissä tulisi olla vähintään kolme tuotetta.
Tuotteita voisivat olla…
Tuotteiden lisääminen ostoskoriin
Kun käyttäjä haluaa lisätä tietyn tuotteen ostoskoriin, täytyy häneltä varmistaa myös kappalemäärä. Ostoskoriin lisätään haluttu määrä tuotetta ja kasvatetaan ostoskorin kokonaishintaa vastaavasti. Määrän voi totetuttaa +/- napeilla tai lomakekentällä.
Ostoskorin tyhjentäminen
Käyttäjä voi tyhjentää ostoskorin sisällön eli tyhjentää kaikkien lisättyjen tuotteiden määrät kerrallaan. Tällöin myös tilauksen kokonaishinta tyhjennetään.
Tilauksen vahvistaminen
Käyttäjä voi painaa nappia “Vahvista tilaus”. Käyttäjältä pyydetään tällöin yhteystiedot tilauksen lähettämistä varten. Vaaditut tiedot ovat nimi, sähköpostiosoite, puhelinnumero sekä osoite, johon paketti toimitetaan (katuosoite, postinumero, postitoimipaikka).
Mikäli kaikki tiedot on syötetty käyttäjälle näytetään yhteenveto ostostapahtumasta (listataan tilatut tuotteet, lopullinen hinta sekä osoite, johon paketti toimitetaan) ja kiitetään tilauksesta. Lopuksi kaikki henkilön sekä ostoskorin tiedot tyhjennetään.
Projektin siirtäminen portfolioon
Tee itsellesi github-pages repository (tavallinen public repo, jonka nimi on
Lisää fanikaupan vite.config.js tiedostoon seuraava rivi (jotta sivu osaa ladata .js sekä .css tiedostot oikeasta paikasta):
base: '/fanikauppa/',
Tee fanikaupasta build:
npm run build
Kopioi dist-kansion sisältö github-pages repoosi kansioon “fanikauppa”. Tee github-pages sivulle portfolion etusivu (index.html), ja linkkaa fanikauppasi siihen. Esim.
<!DOCTYPE html>
<html>
<body>
<h1>Portfolio</h1>
<a href="/fanikauppa/index.html">Fanikauppa (react)</a>
</body>
</html>
Palauta linkki live-versioon reposi read.me - kentässä sekä Teams:illa.
Huom Jos käytät react-router:ia, lisää myös BrowserRouter:iin basename:ksi “fanikauppa”, muuten routing ei toimi oikein:
<BrowserRouter basename='/fanikauppa'>
Alennus
Tuotteiden tilauksesta saa alennuksen kokonaissummasta seuraavan taulukon mukaan: