OmatSisällöntuottajanaToteuttajanaYksin toteutetut

Koi­ra­ker­hon ki­sa­si­vut

Suo­riu­duin niin hy­vin en­sim­mäi­ses­tä har­joi­tus­työs­tä­ni, että ha­lusin jat­kaa React-tai­to­je­ni ke­hit­tä­mis­tä. Edel­li­ses­tä poi­ke­ten kek­sin nyt hark­ka­työn ai­heen ja si­säl­lön ko­ko­naan itse: So­vel­lus on ku­vit­teel­li­sen koi­ra­ker­hon ki­sa­si­vus­to. Lop­pu­tu­lok­ses­ta tuli hie­no ko­ko­nai­suus, jos­sa yh­dis­ty­vät edel­li­sen työn toi­min­not täy­den­net­ty­nä uusil­la sekä itse suun­nit­te­le­ma­ni ul­koa­su.

Tou­hu­tas­sut

5/2019 – 6/2019
Roo­li: React de­ve­lo­per / web de­sig­ner / si­säl­lön­tuot­ta­ja
Koo­di Git­Hu­bis­sa
Demo He­ro­kus­sa

Van­hal­le poh­jal­le uut­ta

Täs­sä pro­jek­tis­sa ha­lusin laa­jen­taa en­sim­mäis­tä React-pro­jek­tia­ni. Edel­li­nen työ­ni si­säl­si vain osal­lis­tu­ja­lis­tan ja sii­hen liit­ty­viä toi­min­to­ja, mut­ta täs­tä so­vel­luk­ses­ta pää­tin teh­dä isom­man ko­ko­nai­suu­den – enem­män sel­lai­sen, joka voi­si oi­keas­ti­kin olla tuo­tan­nos­sa. Sik­si kek­sin so­vel­luk­sel­le taus­tan ja ai­heen: Ku­vit­teel­li­nen koi­ra­ker­ho on ai­keis­sa jär­jes­tää kil­pai­lut, ja niis­tä tie­do­te­taan ja nii­hin il­moit­tau­du­taan tä­män so­vel­luk­sen kaut­ta. Ai­heen var­jol­la pys­tyin luon­te­vas­ti käyt­tä­mään so­vel­luk­ses­sa joi­ta­kin Reac­tin omi­nai­suuk­sia, jot­ka oli­vat mi­nul­le en­nes­tään vie­rai­ta, sekä kir­jas­to­ja, joi­hin ha­lusin pe­reh­tyä. Sain myös li­sät­tyä toi­min­nal­li­suuk­sia, jot­ka so­pi­vat hy­vin so­vel­luk­sen ai­hee­seen.

En­sim­mäi­ses­sä React-pro­jek­tis­sa­ni mi­nua jäi häi­rit­se­mään eri­tyi­ses­ti muu­ta­ma asia: ul­koa­su oli tosi an­kea ja al­keel­li­nen (vaik­ka­kin oh­jeen mu­kai­nen), vir­he­vies­tit näy­tet­tiin pon­nah­dusik­ku­nois­sa ja mo­nia ai­van yk­sin­ker­tai­sia­kin käy­tet­tä­vyyt­tä pa­ran­ta­via asioi­ta puut­tui, ku­ten esi­mer­kik­si ho­ver-efek­tit. Täs­sä toi­ses­sa työs­sä ha­lusin käyt­tö­liit­ty­mäs­tä ja käy­tet­tä­vyy­des­tä pal­jon pa­rem­mat. Suun­nit­te­lin ul­koa­sun ra­ken­tei­neen, vä­ri­pa­let­tei­neen ja kir­ja­sin­tyyp­pei­neen so­vel­luk­sen tee­maan so­pi­vik­si ja lop­pu­tu­lok­ses­ta tu­li­kin mie­les­tä­ni oi­kein kiva. 🙂

Jos ha­luai­sin jat­ko­ke­hit­tää tätä so­vel­lus­ta, li­säi­sin tä­hän ai­na­kin kir­jau­tu­mi­sen ja eri käyt­tä­jä­roo­le­ja, tie­to­kan­nan sekä pari “si­vua” li­sää, joil­la oli­si ku­va­gal­le­ria ki­sois­ta ja tu­los­lis­tat. Voi­sin myös teh­dä “si­vu­jen” ra­ken­teis­ta hie­man mo­ni­mut­kai­sem­mat ja näyt­tä­väm­mät, ja li­sä­tä si­vuil­le ku­vi­tus­ku­via. Mah­dol­li­ses­ti kak­kos­ver­sio il­mes­tyy­kin tu­le­vai­suu­des­sa, kos­ka opis­ke­len täl­lä het­kel­lä full stac­kia.

 

So­vel­luk­sen kes­kei­siä si­säl­tö­jä ja toi­min­nal­li­suuk­sia

  • So­vel­lus si­säl­tää kak­si “si­vua”: etusi­vun ja il­moit­tau­tu­mis­si­vun.
  • Pie­nem­mil­lä näy­töil­lä pää­va­lik­ko muut­tuu ham­pu­ri­lais­va­li­kok­si.
  • So­vel­lus skaa­lau­tuu kai­ken­ko­koi­sil­le näy­töil­le.

Etusi­vu

  • Si­vun ylä­osas­sa on suu­ri he­ro­ku­va, jon­ka pääl­lä on teks­ti.
  • Käyt­tä­jä voi mää­rit­tää oi­kean kil­pai­lu­luo­kan syöt­tä­mäl­lä ar­von nu­me­ro­kent­tään.

Il­moit­tau­tu­mis­si­vu

  • Käyt­tä­jä voi li­sä­tä uu­den osal­lis­tu­jan lo­mak­keen avul­la.
    • 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 pu­he­lin­nu­me­ro.
  • Si­vul­la näy­te­tään kak­si osal­lis­tu­ja­lis­taa, jois­ta kum­pi­kin si­säl­tää vii­si sa­tun­nais­ta osal­lis­tu­jaa.
    • Ni­met ja säh­kö­pos­tio­soit­teet on haet­tu kah­des­ta eri APIs­ta.
    • ID-nu­me­rot on ge­ne­roi­tu eräs­tä kir­jas­toa käyt­tä­mäl­lä.
  • Käyt­tä­jä voi muo­ka­ta ha­lua­maan­sa ri­viä nap­saut­ta­mal­la kynä-ku­va­ket­ta.
  • Käyt­tä­jä voi pois­taa ha­lua­man­sa ri­vin nap­saut­ta­mal­la ros­ka­ko­ri-ku­va­ket­ta.
  • Käyt­tä­jä voi jär­jes­tää lis­tan nap­saut­ta­mal­la ha­lua­man­sa sa­rak­keen ot­sik­koa.

Ha­luat­ko tie­tää li­sää?