E-kauppa Reactilla

Aloitin työpajalla 15.4.2019 ja aiemman kokemuksen vuoksi pääsin nopeasti vauhtiin ja rakentamaan portfoliotani. Ensimmäisenä todellisena projektinani kehitän e-kauppapaikkaa nimeltä Tophat Whale. Aloitin kehitystyöt 29.4. Tarkoituksena on harjoitella React ja full-stack taitoja. Tässä esittelen valintojani joita projektissa jouduin tekemään.

Alku:

Käytin erinomaista create-react-app pakettia jonka saa npm:llä. Se sisältää hyvän alun omalle React projektille.

Ulkoasu:

Käytän Bootstrapin käteviä komponentteja ja tyylejä.
<button className="btn btn-danger mx-5">
Luo punaisen nappulan (btn btn-danger) jossa on isot marginaalit sivuilla (mx-5).

Yllä bootstrapin tyylejä käytetty navigointipalkin, lomakkeen ja onnittumisviestin näyttöön.

Logo:

Yhdistin inkscapella Googlen noto emojien valaan ja silinterihatun sivujen logoksi. Tällöin sain skaalautuvan svg:n käyttööni.

Favicon:

Loin sivujeni logosta kaikille laitteille sopivat iconit ynnä muut realfavicongenerator.net palvelulla. Tällöin esimerkiksi kun iPhone/Android käyttäjä laittaa omalle kotinäytölleen pikakuvakkeen sivulleni, on ikonina sivun logo. Sama pikkulogo näkyy mm. myös selaimen välilehdessä:

Data:

Päätin käyttää NoSQL dokumentti tietokantaa perinteisen relaatiotietokannan sijaan. MongoDB oli harkinnassa, mutta päädyin kuitenkin käyttämään Firebasea, jota olen muutama vuosi sitten kokeillut. Firebase on ilmainen pienille projekteille. Heillä oli tarjolla uudempi tietokantatuote Firebase Cloudstore, johon en tarkemmin tutustunut, vaan käytin vanhempaa Realtime Databasea. Käyttö on helppoa Node+React combolla. Tarkoituksena on tallettaa ainakin kaikki muuttuva data Firebaseen kuten tilaukset, tuotetiedot, käyttäjätilit ja palautteet. Tuotetiedot tulee kirjoitushetkellä vielä projektin sisällä olevasta tiedostosta.

Toiminnot:

Suunnittelin ensin sivulla olevan tietosivun, yhteydenottolomakkeen, tuotelistauksen, jokaiselle tuotteelle oman tuote sivun sisältäen lisätietoja ja zoomattavan kuvan, ostoskorin ja ostolomakkeen. Myöhemmin meidän valmentaja Arto Aitta ehdotti, että sivulla olisi kirjautuminen hallintatilille jolla voi katsella esimerkiksi tulleet tilaukset. Aion implementoida näiden lisäksi myös asiakastilit jolloin tuotteiden tilaaja voi tarkastella omia tilauksia ja tallentaa ostoskorin sisällön myöhemmäksi. Jos käyttäjä ei ole sisäänkirjattu, ostoskorin sisältö tallennetaan HTML5 localstoreen jolloin sivulta voi poistua ja ostoskori säilyy sessioiden välillä.

Kuvan zoomaus tuotesivulla:

Magnifier.js, react-magnifier ja https://www.w3schools.com/howto/howto_js_image_magnifier_glass.asp olivat harkinnassa. w3schoolsin ratkaisu oli ensin kokeilussa, mutta jostain syystä se toimi vain osittain. Vaihdoin react-magnifier komponenttiin jonka saa npm:n kautta. Se toimii.

Routing:

Käytin react-router-dom paketin BrowserRouter komponenttia tähän tapaan:

Tällä valitaan helposti mikä React komponentti näytetään millekin URL:lle. Viimeinen Route matchaa kaikkiin väärin kirjoitettuihin osoitteisiin jolloin voimme tehdä oman ”sivua ei löydy” sivun. /details/:id on dynaaminen URL, siihen sopisi esimerkiksi /details/123 jolloin 123 välitetään Details komponentille propsina niin voidaan näyttää oikean tuotteen tiedot. Tämä myös mahdollistaa suoran linkityksen tiettyihin tuotteisiin.

Hostaus:

Yritin käyttää Github-pages palvelua, mutta sinne menevät muutokset näyttävät tulevan voimaan hitaammin ja minulla oli erinäisiä ongelmia palveluun liittyen. Palvelu on suunniteltu staattisille sivuille jolloin tuotteiden dynaamiset URL:it eivät toimi valitsemallani router ratkaisulla. Myös kuvien näyttämisessä oli ongelmia. Siirsin hostingin firebasen ilmaiseen hostingiin, jolloin kaikki toimii niin kuin pitää.

Tietoturva:

Käyttäjien salasanat pitää tallentaa suolattuna tiivisteenä, mikä on vielä työn alla tätä kirjoittaessa. Firebasen api avaimet on eristetty .env tiedostoon jota ei pushata githubiin. Ne saadaan applikaatiossa käyttöön dotenv kirjastolla: require('dotenv').config() ja päästään lukemaan process.env.FIREBASE_API. HTTPS on hostingissa oletuksena käytössä jolloin on turvallisempaa syöttää mm. salasanoja.

Mikko Översti

Keskiviikko: Future Talent 2019

Perjantaina 25.1. Digitalents Academy suuntasi Finlandia-talolle CGI-konsultointiyhtiön järjestämään Future Talent-rekrytointitapahtumaan. CGI on IT- ja liiketoimintakonsultoinnin palveluyhtiö, joka toimii 74 000 työntekijän voimin yli 40’ssä maassa. CGI Suomessa työntekijöitä löytyy 3700, joiden työtehtävät vaihtelevat ohjelmistokehityksestä asiakaspalveluun. Yritys on palkittu Top Employer-sertifikaatilla jo kuudetta vuotta peräkkäin.

Edessämme siintää Finlandia-talo, jonka takana bussi toisensa jälkeen tyhjenee matkustajista. Väkeä on paljon ja sitä on tullut Helsingin ulkopuoleltakin. Heti aamusta riittää hälyä ja vaikka kaikki saavumme paikalle hieman eri aikoihin, löydämme toisemme ennalta sovitulta paikalta pääovien tuntumasta. Aluksi käymme yhdessä läpi päivän ohjelmaa ja aikatauluja. Vaikka nälkäisimpien mahat kurnivat jo ja kahvihammasta kolottaa yhdellä jos toisellakin, on hyvä kerrata käytännön asioita.

Vihdoin matkaan! Ensin haemme nimillämme varustetut passit tiskiltä ja viemme takkimme naulakoihin. Matka jatkuu yläkertaan, jossa punaiset valot loistavat ja aamupala on katettuna pitkille pöydille, joista saa itse valita lautaselleen mitä haluaa. Syömme rauhassa ja ihastelemme kuinka miljööseen on jaksettu panostaa. Meitä lähestyy naisihminen CGI:n henkilöstöpuolelta, joka toivottaa meidät tervetulleeksi. Kerromme hänelle keitä olemme sekä lyhyesti työpajatoiminnastamme. Kauaa emme kuitenkaan ehdi jutella kun nainen jatkaa matkaansa. Pian on myös Perttu Pölösen puheenvuoro, ja suuntaamme kohti auditoriota.

Perttu on keksijä, futuristi ja säveltäjä. Hän pitää inspiroivan puheenvuoron kuinka uusi, jännittävä aikakausi on alkamassa. Vaikka on vielä aamu, on auditoriossa paljon porukkaa. Onneksi olemme Finlandia-talossa, jotta kaikki varmasti näkevät ja kuulevat hyvin. Auditorion ilme on samanlainen kuin muuallakin tänä päivänä. Erilaisia, pääsääntöisesti punaisen sävyisiä, valoteoksia on heijastettu seinille ja kattoon.

Eye of the Tigerin pärähtäessä soimaan tietää, että nyt alkaa tapahtua. Silloin joko auditoriossa tai pienemmällä lavalla on aloittamassa puhuja. Pienellä lavalla puheenvuoroja pitävät CGI:n omat työntekijät, jotka kertovat omista osastoistaan. Kun lavalla ei ollut ketään puhumassa, tunnelmaa oli nostattamassa CGI:n oma DJ.

Finlandia-talo on täynnä CGI:n eri osastojen ständejä, joissa alansa ammattilaiset kertovat osaamisalastaan ja projekteistaan. Ständien lisäksi tapahtumassa on paljon muutakin aktiviteettia. Paikalle on tuotu Tesla, jota pääsee koeajamaan, jos on ilmoittautunut etukäteen. Tapahtumassa on myös erilaisia työpajoja, joihin olisi pitänyt myöskin ilmoittautua etukäteen. Kun DT Academy ilmoittautui tapahtumaan mukaan, olivat työpajat valitettavasti jo täyttyneet innokkaista osallistujista. Se ei kuitenkaan haittaa menoa ja tekemistä löytyy, sillä esimerkiksi JavaScript Battleen saa osallistua ilmoittautumattakin.

Battlen palkintona on työpaikka ja senioritason kompensaatio CGI:ltä. Mukaan kannattaa osallistua vaikka vaan kokeilumielessäkin. Battlessa testataan nimensä mukaan JavaScriptin osaamista, eikä haasteen sisällöstä saa kertoa ulkopuolisille. Onhan kyseessä kovat panokset!

Yksi suosiota herättävä kohde on tietoturvaan keskittyvä pakohuone. Pakohuoneeseen ilmoittaudutaan 2-4 hengen ryhmissä paikan päällä. Mekin koitamme onneamme, mutta suosionsa takia pakohuoneen varauslista on jo täyttynyt yksittäisiä paikkoja lukuunottamatta. Onneksi ilmainen lounas piristää mieltä, vaikkei kenenkään maailma esteisiin kaadukaan. Idea kuitenkin jää kytemään, josko jossain vaiheessa pääsisimme porukalla johonkin pakohuoneeseen…

Lounaan jälkeen kokoonnumme taas yhdessä keskustelemaan päivästä ja loppupäivän ohjelmasta. Tämän jälkeen saa itse valita jääkö vielä tapahtumaan vai siirtyykö viikonlopun viettoon. Meitä on molempiin juniin ja porukka hajaantuu omien menojensa mukaan.

Mieleen jää myös ständi, jonka pöydälle on asetettu kulho täynnä suklaapatukoita. Viereen asetettu infografiikka kertoo patukoiden suosiosta, osallistujien sukupuoli- ja ikäjakauman sekä hymyilyprosentin. Suklaa ja statistiikat ovat selkeä homma, mutta meitä kiinnostaa miten kaikki toimii pinnan alla. Kun uskallamme lähestyä ständin vetäjiä, he kertovat mielellään sovelluksen toiminnasta. Googlen kasvojentunnistus-APIa hyödyntäen Pythonilla ohjelmoitu sovellus kerää tilastoja ja päivittää niitä reaaliajassa viereiselle näytölle. Pääsemme myös itse kokeilemaan sovellusta ja sovellus tunnistaa sukupuolen oikein, eikä ikäkään heitä paljoa. Lisäksi saamme valitsemamme suklaapatukat, joten hymyprosentti tosielämässä on ainakin korkealla.

Unohtaa ei saa myöskään Digidinoa, jonka näkee tapahtumassa lyllertämässä väkijoukon seassa tai lepäilemässä opastekylttiä vasten. Monet ottavat dinon kanssa kuvia, emmekä mekään halua jäädä siitä paitsi. Lähestymme jännittyneinä tuota hirmuliskoa, mutta pelko on turhaa ja dino osoittautuu vallan mukavaksi kaveriksi. Saammekin napattua yhteiskuvan muistoksi. Muistoksi löytyy myös Digidino-tarroja ja -heijastimet tapahtuman infotiskiltä.

Vuosittain järjestettävässä Future Talent-tapahtumassa CGI etsii opiskelijoiden, alasta kiinnostuneiden ja vastavalmistuneiden keskuudesta uusia nuoria osaajia. Nuorille tarjotaan 4-6 kuukauden mittaista Future Talent-harjoittelua mm. robotiikan, ohjelmistokehityksen, pilvipalveluiden ja analytiikan parissa. Harjoittelun päätteeksi on tarkoituksena työllistyä yritykseen vakituiseksi työntekijäksi. Itse rekrytoinnin ohella tapahtumassa oli mahdollisuus tutustua yrityksen toimintaan työpajojen ja puheenvuorojen kautta, verkostoitua henkilöstön kanssa ja vaikkapa kokeilla osaamistaan JavaScript Battlen parissa.

Terveisin Blogitiimi