Matias Kauranen, Juhani Koski, Antti Kurkinen, Arttu Kääriäinen
Tietotekniikan tutkinto-ohjelma (Oamk)
(IN00CT06-3003 | TVT21SPO)
React WebProject on web-ohjelmoinnin sovellusprojekti. WebProject on Oamkin toisen vuoden ensimmäinen projekti, jossa syvennytään web-ohjelmoinnin maailmaan. Projektimme aiheena toimivat maailmanlaajuiset lämpötilat ja hiilidioksidiarvot, joiden dataa visualisoidaan ohjelmassa Chart.js-kirjaston avulla. Tavoitteena oli ryhmätyönä luoda web-sovellus, joka sisältäisi vuosituhansien ajalta lämpötilamuutoksia sekä hiilioksidipäästöjen muuttumista. Muita oppimistavoitteita oli mm. sovellus testausta ( Mocha & Chai) ja Kanban-prosessi.
Sivulle haluttiin luoda olennaiset web-ominaisuudet: responsiivinen UI, asiakas voi luoda käyttäjätunnuksen (kuva 2), kirjautua sisään ja muokata visualisointeja. Jokainen projektiryhmän jäsen toimi projektissa Full Stack-kehittäjänä, työstäen sekä selain- että palvelinpuolta.
KUVA 1. Käyttöliittymän etusivu. Vasemmalla avattava navigointipalkki jolla voi vaihtaa visualisointeja.
Ensimmäinen näkymä käyttäjälle on kotisivu. Kotisivulta näkyy sivupalkissa eri visualisoinnit (kuva 1), joissa graafien avulla havainnollistetaan lämpötilojen sekä hiilioksidiarvojen muutosta. Valikosta painamalla käyttäjä voi saada yksityiskohtaisia graafeja haluamastaan datasta. Jokaisessa visualisoinnissa on graafi, joka vaihtelee vaatimuksien mukaan viivakaaviosta rengaskaavioon. Kaavion nimipainiketta painamalla voi valita, mitä osaa graafista haluaa nähdä tai piilottaa.
Käyttäjä voi luoda uuden käyttäjätunnuksen rekisteröitymällä Rekisteröidy-sivulla. Rekisteröitymisen jälkeen sisään kirjautumalla voi tarkastella omia visualisointeja. Käyttäjä voi halutessaan myös poistaa oman käyttäjätunnuksensa.
KUVA 2. Käyttöliittymän rekisteröinti sivu. Ylhäällä navigointipalkki jolla voi suunnistaa sovelluksessa vaivattomasti.
Projektimme tekstieditorina käytettiin Visual Studio Codea, jossa pääohjelmointikielenä toimi JavaScript. Nettisivu luotiin JavaScriptin React-kirjastolla, joka soveltuu erinomaisesti käyttöliittymien kehitykseen. Tietokanta datalle luotiin MySQL:llä, joka saatiin käyttöön Express Node.js-palvelimella. GitHub oli tärkeä työkalu versionhallintaan ja projektinhallintatyökalujen käyttöön ja se mahdollisti Kanban-prosessin käytön projektissa. Rajapinnan ja sovelluksen testauksessa käytettiin Mochaa, Chaita, ja React-Testing-Librarya.
KUVA 3. Käyttöliittymän visualisointisivu, jossa näkyy visualisoinnit V1 ja V2. Vasemmasta "Menu" painikkeesta avataan sivupalkki (kuva 1).
Linkki projektin sivulle - Sivustolla voi tutustua käyttöliittymään, valikkorakenteeseen ja tyyliin. Valitettavasti GCP (Google Cloud Platform) ongelmien vuoksi visualisoinnit eivät piirry web-versiossa, mutta paikallisesti ne toimivat erinomaisesti (Katso Demovideo).
Tarvitset: Uniserver, Visual Studio Code, Tietokanta
KUVA 4. Kuvassa näkyy mihin kansioon tietokanta tiedosto pitää laittaa ja miten se ladataan Uniserverille.
Kun Tietokanta on asennettu laita se päälle, tee uusi käyttäjä tietokannalle (Oletus käyttäjä on user: climate, password: climate, nämä löytyy config.js)
Sitten avaa repository Visual Studio Codessa. Tarvitset kaksi terminaalia: toisen palvelimelle, toisen sovellukselle.
Palvelin terminal: cd server, npm install, npm run devStart.
Sovellus terminal; npm install, npm start.
Sovellus on nyt käytettävissä osoitteessa http://localhost:3000/ TAI https://climate.stelti.com/ (Ei tarvitse sovellus terminaalia)
Valitettavasti käyttäjän luonti ei toimi paikallisesti.
V1 Globaalit historialliset pintalämpötilapoikkeamat tammikuusta 1850 alkaen Kuvaus & data
V2 Pohjoisen pallonpuoliskon 2 000 vuoden lämpötilan rekonstruktio Kuvaus , Data , Koko tutkimus
V3 Ilmakehän CO2-pitoisuudet Mauna Loan-mittauksista alkaen vuodesta 1958 Kuvaus , Data
V4 Etelämanner jääydin-arkistot ilmakehän hiilidioksidisuhteista yhdistettynä Mauna Loan-mittauksiin Kuvaus , Data
V5 Vostok jääytimen-hiilidioksidimittaukset vuosilta: 417160–2342 Kuvaus , Data
V6 Jääytimen 800 000 vuoden yhdistelmätutkimus CO2-mittauksista Kuvaus , Data
V7 Maapallon lämpötilan kehitys viimeisen kahden miljoonan vuoden aikana Kuvaus , Data, Data2
V8 Hiilioksidipäästöt maiden mukaan Kuvaus , Data , Lähde , Lähteen kuvaus
V9 Hiilidioksidipäästöt sektoreittain Kuvaus , Data
V10 Ihmisten evoluutio ja aktiviteetit Data