Moderni Web-sovelluskehitys – Osa4 Vercel julkaisu

Kun luodaan uusi FullStack projekti, kannattaa tietysti kehitettävät koodit tallentaa versionhallintaan talteen. Github on varmasti suosituin tällainen versionhallintapalvelu, jossa paljon julkaistaan Open Source projekteja avoimesti ja…
Read More

Moderni Web-sovelluskehitys – Osa3 Next.js 13 Tietovisa

Johdanto Tässä osassa tutustutaan Next.js 13 kehykseen, joka on viimeisin versio suositusta React-pohjaisesta web-sovelluskehityskehyksestä. Next.js 13 tarjoaa joukon innovatiivisia ominaisuuksia ja työkaluja, jotka tekevät web-sovellusten…
Read More

Moderni Web-sovelluskehitys – Osa2

Prisma ja Postgresql tietokanta yhdessä Prisma on ORM-työkalu (Object Releational Mapping), jonka avulla tietokantojen käsittely omasta koodista helpottuu paljon. Se tavallaan piilottaa tietokantojen SQL-kielen kysely…
Read More

Moderni Web-sovelluskehitys Next.js, React, Prisma ja PostgreSQL työkalujen avulla – Osa1

Web-sivujen kehitys alkoi 1990-luvun alussa, kun Tim Berners-Lee kehitti World Wide Webin ja sen perustekniikat, kuten HTTP-protokollan ja HTML-kielen. Aluksi web-sivut olivat yksinkertaisia ja sisälsivät…
Read More

Laulava kukkaruukku – 3D maailma web-sivulle

Tervetuloa virtuaalimaailmaan jossa iloinen kukkaruukku laulelee. Virtuaaliset maailmat ja 3D- mallinnukset alkavat olemaan tätä päivää. Virtuaalilasien kautta pääsee tutustumaan vaikkapa satojen vuosien päähän menneisyyteen ,…
Read More

Full stack projekti – osa5 – HTTPS-salaus käyttöön

Kun julkaistaan websovellus palveluksi Internettiin, täytyy ottaa käyttöön HTTPS protokolla ja SSL-varmenne. Tällöin voidaan varmistaa, että websivuille syötetyt tiedot liikkuvat turvallisesti salattuna liikenteenä. Ja voidaan…
Read More

Full stack projekti – osa4 – Koodit palvelimelle

Seuraavaksi siirretään koodit palvelimelle, jotta saadaan websovellus toimimaan internetistä käsin. Tiedostojen siirtämisen voi tehdä joko niin, että käytetään “git clone“-komentoa. Tai toinen tapa on siirtää…
Read More

Full stack projekti – osa3 – React käyttöliittymä

React:n avulla voidaan helpommin luoda web-käyttöliittymiä. Periaatteena on pilkkoa isot sivut pienempiin osiin, uudelleen käytettäviksi komponenteiksi. React -komponentti on pala koodia, joka kuvaa jotain tiettyä…
Read More

Full stack projekti – osa2 – Kirjautuminen

Homma lähtee luonnollisesti liikkeelle siitä, että tehdään uusi github repositorio, projektia varten. GitHub Desktop:n avulla saadaan omalle paikalliselle kehityskoneelle, luotua kansio, tähän uuteen juuri github…
Read More

Full stack projekti – osa1 – Palvelimen asennus

Tehdään seuraavaksi hieman pidempi Full stack web-sivusovellus projekti. Edetään web-sivu kehityksessä eteenpäin ja aletaan miettimään, miten saadaan oma “web-app” eli verkkosovellus julkaistua internettiin, jotta käyttäjät…
Read More