Category: Web-kehitys
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…
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…
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…
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…

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 ,…

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…

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ää…

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ä…

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…

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…