Koolituse eesmärk: Osalejad õpivad praktiliste ja lihtsate tööriistade abil looma kaasaegseid ning professionaalse välimusega veebilehti.
Koolituse lõputööna valmistavad osalejad e-poe laadse lahenduse, sest just e-pood sisaldab endas enamiku veebilehtedele vajalikest funktsionaalsustest. Olgu tegemist lihtsa maandumislehe või keerukama lahendusega, kus tuleb meeles pidada külastaja tehtud valikuid (nt ostukorvi lisatud tooted), hõlmab e-pood endas lisaks ka mitmesuguseid vorme ja interaktiivseid elemente.
Näidisprojekti leiab siit: https://nuxt-demo.klipper.ee/
Kursus annab kindluse ja oskused astuda esimene tõsisem samm veebiarenduse karjääris või pakkuda oma teenuseid vabakutselisena.
Sihtrühm ja eelteadmised: Koolitusele on oodatud kõik, kellel olemas veebiarenduse algteadmised ja kes soovivad oma oskusi viia järgmisele tasemele.
Osalejale tuleb kasuks:
- Esmane kokkupuudu Node.js-ga või huvi seda töös rakendada;
- Kogemus Google Sheets’i või mõne analoogset Google’i teenusega;
- Esmane kokkupuude JavaScrptiga;
- Omada ideed, mille võiks koolituse käigus praktilise tööna valmistada.
Õppevahendid: Osalejal läheb vaja töötava mikrofoni ja kaameraga arvutit, soovitavalt lisaekraani ning stabiilset internetiühendust.
Arvutil peavad olema õigused Node.js v22 ja Git rakenduse installeerimiseks ja seadistamiseks.
Neil, kellel puudub vajalik arvuti on võimalik seda rentida kokkuleppel BCS Koolitusega. Palume sellest koolitusettevõtet eelnevalt teavitada.
Programm:
Sessioon 1 (4ak)
Ajagraafik: 16:00 – 19:15
Koolituse sissejuhatus:
- Koolituse eesmärkide, ülesehituse ja oodatavate tulemuste tutvustus.
Veebiarenduse lühiajalugu:
- Põhilised verstapostid veebiarenduse arengus.
- Kaasaegsete tehnoloogiate ja raamistike ülevaade. Sissejuhatus Nuxt.js maailma:
- Miks kasutada Nuxt.js ja mis on selle eelised?
- Ülevaade kursusel valmistatava projekti ülesehitusest ja eesmärkidest.
Sessioon 2 (4ak)
Ajagraafik: 16:00 – 19:15
Nuxt.js projekti loomine:
- Arenduskeskkonna seadistamine.
- Esmane projekti struktuuri ja failisüsteemi ülevaade.
- Põhifunktsioonide tutvustus (server-side rendering, routing jms).
Tailwind CSS-i paigaldamine ja seadistamine:
- Tailwind CSS-i lisamine Nuxt.js projektile.
- Konfiguratsioonifailide seadistamine ja demo-stiilide rakendamine.
Praktiline töö:
- Loo oma Nuxt.js projekt ja paigalda sellele Tailwind CSS.
Sessioon 3 (4ak)
Ajagraafik: 16:00 – 19:15
Maandumislehe valmistamine:
- Kujundusprintsiibid ja parimad praktikad maandumislehe loomisel.
- Struktuuri, sisu ja disaini elementide paigutus.
JavaScript ja Vue.js kasutamine:
- Põhiteadmised JavaScripti funktsioonidest ja Vue.js reaktiivsuse lisamisest (olekuhaldus).
- Näited interaktiivsete elementide lisamiseks (nupu klikkimised, dünaamilised andmed jms).
Praktiline töö:
- Loo esialgne maandumisleht, kasutades interaktiivseid komponente Vue.js abil.
Sessioon 4 (4ak)
Ajagraafik: 16:00 – 19:15
Google Sheets API integreerimine:
- API võtmete ja volituste seadistamine.
- Andmete pärimine Google Sheets-ist ja dünaamilise sisu kuvamine.
Praktilised ülesanded:
- Loo demo lahendus, kus veebileht hangib ja kuvab andmeid Google Sheetsist.
- Arutelu võimalikest väljakutsetest ja nende lahendamisest.
Sessioon 5 (4ak)
Ajagraafik: 16:00 – 19:15
Kontaktvormi loomine:
- Vormielementide paigutus ja disaini parimad tavad.
- Andmete valideerimine (sisestuskontroll, nõutud väljad, jne).
- reCAPTCHA integreerimine turvalisuse tagamiseks.
Nodemaileri seadistamine:
- Nodemaileri konfigureerimine, et kontaktvormi andmed saaks turvaliselt e-posti teel edastada. Alternatiivina ka e-kirja sisu salvestamine hoopis Google Sheeti.
Praktiline töö:
- Loo ja testi oma kontaktvormi, lisades nii valideerimise kui ka e-posti teavitamise
Sessioon 6 (4ak)
Ajagraafik: 16:00 – 19:15
Versioonihalduse sissejuhatus:
- Git ja GitHub põhitõed: miks ja kuidas versioonikontroll töötab.
- Parimad praktikad arenduse juhtimiseks ja koostööks. Projekti sidumine GitHubiga:
- Esimese commit’i tegemine, branch’ide loomine.
- Näpunäited koodi haldamiseks ja dokumenteerimiseks.
Praktiline töö:
- Loo ühendus oma Nuxt.js projekti GitHubiga ja sooritavad esmased commit’id.
- Grupiarutelu ja kogemuste jagamine.
Sessioon 7 (4ak)
Ajagraafik: 16:00 – 19:15 Teemad ja tegevused:
Netlify platvormi tutvustus:
- Netlify võimalused ja konto loomise protsess.
- Automaatse juurutamise seadistamine: GitHubi ja Netlify integreerimine.
Lõplik projekt:
- Veebiprojekti tehniline testimine ja viimistlemine.
- Koodi lõplik kinnitamine GitHubis, tagasiside ja küsimuste-vastuste sessioon.
Kokkuvõte:
- Kokkuvõte ja edasised soovitused.
- Osalejate tagasiside kogumine.
Lisaks, läbi praktiliste ülesannete saab koolituse käigus osalejale selgeks:
- Kuidas tekivad veebilehe jaoks värvid ja kuidas neid samu erinevaid värve kombineerides luua igakord unikaalne veebileht.
- Kuidas kasutada veebilehel pilte (mobiili- ja SEO-sõbralikult).
- Kuidas rakendada ikoone (vabavaralisi). Ei pea ise ikoone kujundama.
- Kuidas salvestada kasutaja seadeid nii et kui ta lehele tagasi tuleb, siis leht mäletab eelnevaid seadeid (näiteks ostukorvi lisatud tooted).
- Kuidas kasutada API-sid. Tehakse läbi praktilise ülesandena Google Sheets API näitel.
Google Sheets on selle kursuse raames kasutusel andmebaasina. Näiteks andmed toodete kohta: hind, laoseis jmt.
Õppemeetodid: Veebiõpe, praktilised harjutused, iseseisev töö, arutelu, grupitöö.
Õppetöös saab osaleda liitudes koolitusega läbi veebikeskkonna Zoom.
Veebinarid toimuvad õhtuti 16:00 – 19:15
Koolituse maht on 28 tundi sh 14 tundi praktilisi harjutusi koolituskeskkonnas.
Hindamismeetod: Praktiliste harjutuste sooritamine ja lõpuprojekt.
Hindamiskriteerium: Õpiväljundite saavutamist hinnatakse läbi tagasisidestatud koolikeskkonnas sooritatud praktiliste tööde ja lõpuprojekti koostamise, milleks on e-poe laadne lahendus.
Koolituse lõpetamine: Koolituse lõpetaja saab tunnistuse kui sooritab kõik koolituse jooksul antud praktilised harjutused ja koostab lõpuprojekti. Osalejatele, kes õpiväljundeid saavutanud ei ole väljastatakse soovi korral tõend koolitusel osalemise kohta.
Hind sisaldab: Materjale
Õppekavarühm: 0613 Tarkvara ja rakenduste arendus ning analüüs.
Outline: