Tämä oli en­sim­mäi­nen React-pro­jek­ti­ni, jo­ten ha­lusin nou­dat­taa yri­tyk­sen an­ta­mia mää­ri­tyk­siä par­haa­ni mu­kaan. Mää­ri­tel­mä si­säl­si vi­su­aa­li­sen suun­ni­tel­man so­vel­luk­sen ul­koa­sus­ta sekä lis­tan toi­min­to­ja, joi­ta so­vel­luk­ses­ta tuli löytyä.

Aloi­tin pro­jek­tin suun­nit­te­le­mal­la so­vel­luk­sen ra­ken­teen ja työ­jär­jes­tyk­sen mah­dol­li­sim­man hy­vin – huo­lel­la suun­ni­tel­tu on puo­lik­si teh­ty! Sen jäl­keen koo­da­sin so­vel­luk­sen run­gon ja ul­koa­sun, kos­ka tie­sin nii­den ole­van mi­nul­le kai­kis­ta hel­poim­pia teh­tä­viä. Vii­mei­sek­si to­teu­tin toi­min­nal­li­suu­det. Niis­sä oli­kin pal­jon uut­ta opit­ta­vaa, mut­ta on­nek­si sain neu­vo­ja ja tie­toa par­hais­ta käy­tän­nöis­tä muu­an ys­tä­väl­tä­ni, joka on ko­ke­nut React-koodari.

On­nis­tuin si­säl­lyt­tä­mään so­vel­luk­seen kaik­ki toi­vo­tut omi­nai­suu­det ja ul­koa­sus­ta­kin tuli var­sin ku­van mu­kai­nen. 🙂 Täs­tä on siis hyvä jat­kaa ke­hi­tys­työ­tä. So­vel­luk­sen toi­seen ver­sioon tu­lee toi­vot­ta­vas­ti pal­jon sel­lais­ta, joka täs­tä en­sim­mäi­ses­tä raa­ka­ver­sios­ta jäi pois: ho­ver-efek­tit, la­jit­te­lu toi­sin päin, hie­nos­tu­neem­pi lo­mak­keen va­li­doin­ti ynnä muu­ta jännittävää.

So­vel­luk­sen kes­kei­siä si­säl­tö­jä ja toiminnallisuuksia

• Lis­ta si­säl­tää 20 sa­tun­nais­ta osallistujaa. 
  • Ni­met, säh­kö­pos­tio­soit­teet ja pu­he­lin­nu­me­rot on haet­tu erääs­tä APIsta.
  • ID-nu­me­rot on ge­ne­roi­tu eräs­tä kir­jas­toa käyttämällä.
• Käyt­tä­jä voi li­sä­tä uu­den osal­lis­tu­jan lo­mak­keen avulla. 
  • Vain ne käyt­tä­jät li­sä­tään, joil­la on kel­vol­li­nen nimi, säh­kö­pos­tio­soi­te ja puhelinnumero.
• Käyt­tä­jä voi muo­ka­ta ha­lua­maan­sa ri­viä nap­saut­ta­mal­la kynä-kuvaketta.
• Käyt­tä­jä voi pois­taa ha­lua­man­sa ri­vin nap­saut­ta­mal­la roskakori-kuvaketta.
• Käyt­tä­jä voi jär­jes­tää lis­tan nap­saut­ta­mal­la ha­lua­man­sa sa­rak­keen otsikkoa.