Materiaalit ​

Opintojakson sisältö ​

Full Stack -konsepti ​

Frontend ja Backend -käsitteet, FullStack-arkkitehtuurit. Opitaan ymmärtämään FullStack-ohjelmistokehityksen konseptin, joka kattaa sekä frontend- että backend-kehityksen. Opiskelija perehtyy keskeisiin teknologioihin, kuten JavaScript, TypeScript, ja osaa yhdistää nämä teknologiat kokonaisvaltaiseen sovelluskehitykseen sekä frontend- että backend-kehityksessä avulla.

Tietorajapintojen (API), tietokantojen ja protokollien hyödyntäminen ​

Opiskelija perehtyy API-rajapintojen, tietokantojen ja eri protokollien, kuten HTTP/HTTPS, REST ja JSON, käyttöön sekä oppii, miten näitä teknologioita hyödynnetään FullStack-sovelluksissa. Opitaan käyttämään relaatiotietokantoja (kuten PostgreSQL tai MySQL) ja SQL-kyselykieltä tiedon hallintaan huomioiden FullStack-kehityksen kokonaiskuva sekä ymmärretään tietokantarakenteiden suunnittelun perusteet.

Perusautentikaatio ja autorisointi (käyttäjien tunnistus ja käyttöoikeuksien hallinta) ​

Opitaan perusautentikaation ja autorisoinnin periaatteet, mukaan lukien käyttäjien tunnistus ja käyttöoikeuksien hallinta. Tässä yhteydessä käydään läpi erilaisia autentikointimenetelmiä (esim. OAuth, JWT) ja niiden toteutusta JavaScript-pohjaisessa ympäristössä.

FullStack-sovelluksen peruskomponentit ja rungon toteuttaminen ​

Opitaan suunnittelemaan ja toteuttamaan FullStack-sovelluksen peruskomponentit ja sovelluksen rungon. Tämä sisältää projektin rakenteen luomisen, palvelinpuolen logiikan toteuttamisen (Node.js ä ja TypeScriptillä) sekä käyttöliittymän kehittämisen (HTML, CSS, JavaScript/TypeScript).

Frontendin ja backendin välinen kommunikaatio ​

Opitaan, miten frontend ja backend kommunikoivat keskenään. Tässä osiossa käsitellään esimerkiksi HTTP-kutsuja, API-pyyntöjen käsittelyä sekä datan kulkua sovelluksen eri kerroksien välillä. Lisäksi tarkastellaan Edge-funktioiden hyödyntämistä, jotka mahdollistavat laskennan ja logiikan suorittamisen lähempänä käyttäjää vähentäen viivettä ja parantaen suorituskykyä.

Määrittely ja suunnittelu ​

Opitaan sovelluksen määrittely- ja suunnitteluprosessin perusteet, mukaan lukien käyttäjävaatimusten kerääminen, arkkitehtuurin suunnittelu ja teknologioiden valinta. Opiskelija harjoittelee sovelluksen määrittelydokumentaation laatimista ja projektin suunnittelua, mukaan lukien tietokantakaaviot ja API-suunnitelmat.

Asennettavat ohjelmistot ​

Node.js ​

Node.js on JavaScript koodin suorittamisen ympäristö muualla kuin verkkoselaimissa. Se mahdollistaa ohjelmoinnin JavaScriptillä alustariippumattomasti ja antaa pääsyn JavaScript koodilla esimerkiksi tiedostojärjestelmään tai verkkoliikenteeseen.

Noden mukana asentuvat npm ja npx, ne ovat noden komentorivityökaluja JavaScript pakettien eli kolmannen osapuolen koodikirjastojen hallintaan.

Git ​

Git on ohjelmistokehityksen yksi käytetyimmistä työkaluista versionhallinnassa. Se mahdollistaa muun muassa useamman koodarin työskentelyn sujuvasti samassa projektissa ja kaikki sinne laitettu koodi on automaattisesti varmuuskopioituna tallessa.

Gittiä ei pidä sekottaa GitHubiin tai GitLabiin, ne ovat palveluita repositorioiden (projektin koodipohja) ylläpitämiseen, säilyttämiseen ja projektin hallintaan. Git on työkalu jolla projektin koodit ja muut materiaalit lisätään näihin palveluihin.

VS Code ​

Opintojaksolla suositellaan vahvasti käyttämään koodieditorina Visual Studio Codea. Se on moderni, kevyt ja laajasti eri ohjelmointikieliä tukeva koodieditori. Kaikki opintojaksolla tehdyt esimerkit on tehty käyttämällä VS Codea ja kaikkia käytettyjä plugineja ei todennäköisesti ole saatavilla muille koodieditoreille.

Chrome ​

Tämä verkkoselain todennäköisesti löytyy jo useimmilta valmiiksi. Jos ei niin hae googlesta chrome, mene latauslinkkiin, lataa ja asenna uusin versio.

Chromea ja sen kehittäjän työkaluja käytetään opintojakson aikana paljon.

Muita verkkoselaimia voi käyttää jos haluaa varmistua että web-sovellus toimii oletetusti muilla selaimilla, mutta varsinainen devaaminen tehdään käyttäen Chromea.

Arviointi ​

arviontikriteerit pepistä

Arviointiasteikko H-5

tyydyttävä (1-2) ​

Opiskelija ymmärtää full stack –sovelluksen osa-alueet. Opiskelija kykenee ohjatusti toteuttamaan yksinkertaisia full stack –sovelluksia valituilla teknologioilla.

hyvä (3-4) ​

Opiskelija osaa monipuolisesti hyödyntää eri full stack-tekniikoita sekä toteuttaa itsenäisesti full stack –sovelluksia tehtävänannon mukaisesti.

kiitettävä (5) ​

Opiskeljia kykenee itsenäisesti toteuttamaan haastavia full stack –sovelluksia valitsemillaan tekniikoilla. Opiskelijan tuottamissa full stack –sovelluksissa on tarkoituksenmukainen arkkitehtuuri, joka palvelee tuotetun ohjelman ylläpidettävyyttä ja jatkokehitystä.

Arvosanan muodostuminen ​

Opintojaksokokonaisuuden arvosana muodostuu arviontikriteerien perusteella tehtäväkohtaisesti jaoteltuihin pisteisiin.

Opintojakson pisteytys

Tehtävät ​

Viikkotehtävät ​

Opintojaksolla toteutetaan 7kpl tehtäväsarjoja jotka palautetaan Moodleen, suoritusaikaa tehtävillä on keskimäärin n. viikon verran. Tehtävät tulee palauttaa Moodleen annetun määräjäajan sisällä.

Tästä tehtävät-sivulle

Vaihtoehtoinen suoritustapa ​

Opintojakso on mahdollista suorittaa henkilökohtaisen projektin kautta, tästä lisää infoa myöhemmin!

Henkilökohtainen raportti ​

Opintojakson lopussa palautetaan henkilökohtainen raportti. Arvionti hyväksytty/hylätty.

Luennot ​

Luento 1 - Intro ​

Sisältö ​

• Opintojakson perusasiat, arviontiperusteet ja tehtävät
• Työkalut: VSCode, Git, GitHub
• Työelämän käytänteet versionhallinnassa, code review ja pull request (github)
• Dynaamisesti vs. staattisesti tyypitetyt ohjelmointikielet

Harjoitukset yhdessä ​

1. Varmistetaan että kaikilla on tarvittavat em. ohjelmistot asennettuna
2. GitHub, kaikki opintojakson tehtävät palautetaan github repositorioina. Luo käyttäjä tai käytä jo olemassaolevaa käyttäjätiliä (käyttäjätilin voi tehdä myös opiskelijatunnuksilla)
3. Harjoitellaan ratkaisemaan merge conflict, hyvin yleinen asia mikä tulee vastaan kun useampi koodari tekee koodia samaan code-baseen (projektin koodiin).

VSCoden sisäänrakennetun versionhalintatyökalun käyttöohje

Git CheatSheet

# Vaihda oma GitHubin tarjoama vaihtoehtoinen sähköposti tähän
git config --global user.email "26164588+käyttäjänimi@users.noreply.github.com"

# Vaihda oma GitHubin tarjoama vaihtoehtoinen sähköposti tähän
git config --global user.email "26164588+käyttäjänimi@users.noreply.github.com"

https://education.github.com/git-cheat-sheet-education.pdf

Perehtyminen TypeScriptiin ​

https://www.typescriptlang.org/

Miksi TypeScript on paljon käytetty työelämässä? Verrataan staattisesti ja dynaamisesti tyypitettyjä ohjelmointikieliä:

Dynaamisesti tyypitetyt ohjelmointikielet esim.

• Python
• JavaScript
• PHP

Karkea yleistys:

• Nopea koodata
• Virheherkkä
• Kehitysnopeus hidastuu projektin edetessä

Staattisesti tyypitetyt ohjelmointikielet esim.

• Java
• C#
• C++
• C
• Kotlin
• Rust
• Swift
• TypeScript

Karkea yleistys:

• Hitaampi koodata
• Vähemmän virheitä
• Kehitysnopeus hidastuu vähemmän projektin edetessä kuin dynaamisesti tyypitetyillä ohjelmointikielillä

Huomaa että monet dynaamisesti tyypitetyt kielet mahdollistavat ns. tyyppivihjeiden käyttämisen! Esim. uudemmat Python versiot.

Luento 2 - TypeScript ​

Luento 2 liittyvät tehtävät, tehtäväsarja 1

• Uuden TypeScript projektin aloittaminen
• TypeScriptin perusteet ja työkalut
• Sovelluskehykset ja TypeScript

Lisäksi luennolla perehdytään verkkoselaimen rajapintojen hyödyntämiseen käyttäen TypeScript ohjelmointikieltä.

• Lukemista aiheeseen liittyen Kickstart Your TypeScript Setup kirjan osa 1

Hyödyllisiä linkkejä:

• Ilmainen TypeScript tutoriaali https://www.typescripttutorial.net/
• Kätevä työkalu javaScript/TypeScript koodin reaaliaikaiseen suorittamiseen: https://runjs.app/

Luento 3 - React ​

Luentoon liittyvät tehtävät, tehtäväsarja 2

Tavoite ​

• Ymmärretään suunnittelun ja määrittelyn merkitys ohjelmistoprojekteissa käytettävissä olevien resurssien puitteissa
• Opitaan hyödyntämään Reactia sekä muita 3. osapuolen palveluita/kirjastoja tehokkaasti sekä ymmärretään näiden hyödyntämisen merkitys ohjelmistokehityksessä

Suunnitellaan ja toteutetaan yksinkertainen FullStack-sovellus ​

Perehdyttiin käyttöliittymän suunnittelun vaiheisiin tutustumalla seuraavaan Figma-prototyyppiin:

https://www.figma.com/design/pJK0f6X8XvZ59xHCVs99wM/Consumption-Guide?node-id=0-1

Stack ​

React

• TypeScript, nodejs, vite
• Tutustutaan komponenttikirjastoihin ja CSS frameworkeihin, esim. MUI, shadcn, styled-components, TailWind
• React-komponenttien tilanhallinnan perusteet

Tästä Reactin perusteisiin

npm create vite@latest sovelluksen_nimi_tähän

npm create vite@latest sovelluksen_nimi_tähän

code sovelluksen_nimi_tähän

code sovelluksen_nimi_tähän

npm install
npm run dev

npm install
npm run dev

Luento 4 - FullStack ​

Jatketaan edellisen luennon React-peliprojektia, otetaan käyttöön backend.

Supabase ​

• Tutustutaan supabase-palveluun
• Datan mallintaminen määrittelyn pohjalta

Luennolla: ​

Luotiin taulu supabase-projektissa uusi tietokantatauku "ranking":

• Asennettiin react-projektiin supabase-client https://supabase.com/docs/reference/javascript/introduction

• Lisää tarvittavat tiedot omasta supabase-projektista (ks. API Docs supabase-projektissa) tiedostoon /src/supabase_client.ts

import { Database } from './supabase_types';
// ...koodia...
const supabase = createClient<Database>(supabaseUrl, supabaseKey);

import { Database } from './supabase_types';
// ...koodia...
const supabase = createClient<Database>(supabaseUrl, supabaseKey);

React-router ​

Otettiin käyttöön React-router: https://reactrouter.com/en/main/start/tutorial

Luento 5 - TypeScript Backend ​

Luento 4 & 5 sisältävät yhteisen tehtäväsarjan

Perehdytään eri taustajärjestelmäratkaisuihin NodeJs:n kanssa

• Tietokannat & ORM:it
• REST-rajapinnat & RPC
• Edge-funktiot

Luento 6 - Backend Services ​

Luennolla 6 käytiin läpi hono.dev kirjaston ominaisuuksia

• Middlewaret, kuten esim. basicAuth
• ORM:n käyttäminen

Luennolla 6 tehdyt koodit löytyvät täältä: https://github.com/MatiasHiltunen/full_stack_1_luento_6

Luento 7 - Autentikaatio ja autorisointi ​

Perehdytään tuotantovalmista projektia muistuttavaan koodipohjaan ja katsotaan miten autentikaatio ja autorisointi saadaan toteutettua supabase-backendin ollessa käytössä.

Luennolla 7 käytettävä koodipohja löytyy täältä: https://github.com/MatiasHiltunen/luento_7