Node.js -verkkosivu Osa 2: 7 vaihetta

2024 Kirjoittaja: John Day | [email protected]. Viimeksi muokattu: 2024-01-30 09:01

Tervetuloa OSAAN 2 !!

Tämä on osa 2 minun Node.js -verkkosivustosovelluksen opetusohjelmaan. Jaoin tämän opetusohjelman kahteen osaan, koska se erottaa ne, jotka tarvitsevat vain lyhyen esittelyn, ja ne, jotka haluavat täydellisen opetusohjelman verkkosivulla.

Käyn läpi sivustoni luomisen. Sinun voi olla erilainen, joten seuraa omaani ja opi käytetyt tekniikat. Kun valitset toisen HTML -mallin, kulku on vain hieman erilainen. Pidä tämä mielessä.

Vaihe 1: Sovellusrakenne

Joten sivustoni seuraa pikageneraattoria, mutta käytin ohjaustankoa jadeen sijasta. Jos pidät jadeista, mene siihen! Jade on lyhyt käden HTML ilman kaikkia hakasulkeita ja div: itä. Jos et ymmärrä, että haluat käydä YouTubessa ja katsoa joitain HTML -opetusohjelmia.

Pidän enemmän HTML -koodista ja ohjaustangoista, joten olen käyttänyt niitä paremmin. Luo Express -projekti ohjaustangolla suorittamalla express -komento.

ilmaista --hbs sovelluksen nimi

Jatka sitten osan 1 vaiheen noudattamista kaikkien keskiastioiden asentamisessa.

Express luo erittäin tarkan sovellusrakenteen ja erittäin hyödyllisen useimpien node.js -sovellusten noudattamaan tätä lomaketta hieman muunnelmin.

Oheisessa kuvassa näet erilaisia kansioita ja tiedostoja, alla yritän selittää nämä kaikki.

säiliö

Tämä kansio suoritetaan ensimmäisenä, kun node.js käynnistää palvelimesi. Se etsii www -tiedostoa ja seuraa tätä tiedostoa suoritettavaksi. Www -tiedosto käskee node.js: n käynnistämään palvelimen portissa 3000 (tämä voi muuttua melkein mihin tahansa) ja tekemään joitain muita asioita, kuten tapahtumien kuuntelijaa ja vastaavaa. Tärkeintä on portti, johon sovelluksesi on asennettu.

node_modules

Tässä kansiossa on ns. Middleware. Lähivälineet Haluan selittää lisäohjelmistona, joka helpottaa koodin tekemistä. Ne ovat pohjimmiltaan muita kirjastoja, joiden toiminnot on valmiiksi tarkoitettu käytettäväksi. Joitakin muita tähän projektiin käyttämiäni keskiastioita olivat Nodemailer, Passport, Nodemon, bycrypt ja muut.

julkinen

Kaikki sivustosi kuvat, CSS ja javascript menevät tähän. Verkkosivut käyttävät niitä suoraan.

reittejä

Nämä määrittävät reitit sivustollesi. Kuten kotisivu, kirjautumissivu ja muut.

näkymät

Kuten näette, näkymät ovat.hbs -tiedostoja tai.handlebars, molemmat toimivat vain kestää jonkin verran manipuloida app.js -tiedostoa. Nämä ovat ohjaustangosi html -sivut, jotka näytetään selaimessa. Asettelu on tärkein asettelutiedosto, ja joskus se on omassa asettelukansiossa. Pääasettelutiedosto kutsuu muita ohjaustangotiedostojasi ja näyttää ne, tämä on järkevämpää, kun sukellamme koodiin.

app.js

Tämä on tärkein sovellustiedosto, jota joskus kutsutaan palvelimeksi, riippuu vain asetuksista. Tässä tiedostossa on kaikki palvelimen kokoonpanot ja jopa joitakin erikoistoimintoja. Siitä tulee myös virheenkäsittelijä.

package.json

Tämä tiedosto on Expressin luoma ja kertoo npm: lle kaikki väliohjelmistot, joita haluat käyttää projektissasi. Kun olet suorittanut npm install, kaikki tässä tiedostossa kutsutut keskisovellukset asennetaan node_modules-kansioon.

Vaihe 2: Asenna malli

Voit luoda kaiken HTML -koodin alusta tai käyttää mallia. Olen käyttänyt mallia tälle sivustolle. Muita sivustoja, joita olen auttanut kehittämään, olen koodannut alusta alkaen. Valinta on sinun, tämä vaihe selittää mallin asettelun.

Verkkosovellukseni käyttää bootstrap -mallia, joka tekee loistavan CSS: n. Löydät malleja käymällä tällä sivustolla. Kuten edellä edellisessä vaiheessa todettiin, kaikki tarvittavat css-, js- ja img -tiedostot ovat julkisen kansion alla. Nämä tiedostot saavat sivuston näyttämään paremmalta kuin pelkkä teksti ja sen, miten kuvia käytetään sivustolla.

Jotta ohjaustangon mallinnustyyli toimisi mallin kanssa Sivut on jaettu kahteen osaan. Ensimmäinen on se, mitä kutsutaan "ulkoasuksi". Asettelu on ominaisuuksia, jotka haluat näkyvän kaikilla sivustosi verkkosivuilla. Minun tapauksessani tämä on otsikko, jossa on navigointipalkki, ja alatunniste, joka sisältää ylimääräisiä navigointi- ja näyttökappaleita.

Asettelutiedosto ja muut ohjaustiedostot ovat näkymät -kansiossa. Käyn läpi yksinkertaisemman asettelun pikageneraattorista, jota käytit aiemmin konseptin toimivuuden näyttämiseen, niin voit nähdä koodini ja verrata niitä.

Express -luotu layout.handlebars -tiedosto

{{title}} {{{body}}}

Todellinen ohjaustangon taika on ohjaustangossa {{title}} ja {{{body}}}. Joten nämä kaksi toimivat eri tavalla {{title}} on muuttuja, joka välitetään index.js -tiedostosta reiteillä, kun se on lähetetty malliin, joka näytetään. Tunniste {{{body}}} ottaa reitin js -tiedoston renderöintitoiminnossa kutsutun. Meidän tapauksessamme index.js: ssä on tämä rivi:

res.render ('index', {title: 'Express', count: userCount});

Tämä kutsuu "hakemistotiedostoksi" mitä koskaan käytät, jade, ohjaustanko ja niin edelleen, joten meidän tapauksessa index.handlebar.

Express -luotu index.handlebar

{{title}}

Tervetuloa {{title}}

Index.handlebars -tiedosto välitetään muuttujan tavoin tunnisteelle {{{body}}} ja näytetään verkkosivullasi.

Näin voit saada verkkosivustostasi staattisen osan ja muuttuvan osan. Tämä tekee ylä- ja alatunnisteista mukavia, koska sinun ei tarvitse tehdä koko sivua uudelleen, kun lataat uutta sivua, vain osa tiedoista muuttuu.

Vaihe 3: Yhteydenottolomake

Liitin yhteydenottolomakkeen verkkosivulleni, jotta kuka tahansa voisi lähettää sähköpostia sivustolleni sähköpostilla, jossa on kysymyksiä tai kommentteja.

Tässä yhteydenottolomakkeessa käytettiin npm-keskisovellusta, jonka nimi on Node Mailer.

Node Mailerin asentaminen

Jos haluat asentaa node-mailerin, sinun on vain suoritettava alla oleva koodi ylätason tiedostossasi, tässä tapauksessa myapp.

sudo npm asenna nodemailer

Asennuksen jälkeen sinun on määritettävä muutamia asioita app.js -tiedostoosi.

Ensimmäinen on vain riippuvuus, tämä kertoo solmulle, että aiomme käyttää tätä väliohjelmistoa.

var nodemailer = vaatia ('nodemailer');

Toinen on kuljettajamme, kuljettajaa käytetään yhteyden muodostamiseen sähköpostipalvelimellesi, minun tapauksessani gmail.

// Kuljettaja käytti gmail -tiliä

var transporter = nodemailer.createTransport ({palvelu: 'gmail', auth: {type: 'OAuth2', käyttäjä: '[email protected]', clientId: '139955258255-a3c6ilqu6rtocigde7cbrusicg7j00eh.apps.googleusercontec.com: 'Q775xefdHA_BGu3ZnY9-6sP-', refreshToken: '1 / 0HfdzyzW3FmnDPqeYkv19_py6zWgMCOqI9DSZ9kQWfc', accessToken: 'ya29. GlvDBGA2Z_coEKjQOnXAnBLbTB0wQmS-sARqNGC3V2UATiywNb34IhFq4d7UQvhTobE6pi83-FB2-OvMWjC-mk-EKPMYmwxFe9AOZ7mY6kurYyQ7e1Mu8m8INxg7'}})

jos käytät nodemaileria toisen sähköpostipalvelimen kanssa, katso täältä ohjeet ja ohjeet.

Muutama asia muuttuu henkilöstä toiseen: user, clientId, clientSecret. refreshToken ja accessToken.

Käyttäjätunnuksesi on sähköpostiosoite, jota haluat käyttää. Tein uuden, jonka nimi on sama kuin sivustoni.

ClientId, clientSecret, refreshToken ja accessToken on löydettävä Google -tilisi kautta.

Jos tarvitset lisää apua, voit seurata tätä videota täältä.

Kun kaikki nämä kentät on täytetty, lisäämme viestimme tiedot.

Seuraavaksi meidän on vahvistettava, että kaikki lomakkeemme kentät on syötetty ja että ne ovat kelvollisia vastauksia.

// Express Validatorapp.use (expressValidator ({errorFormatter: function (param, msg, value) {var namespace = param.split ('.'), Root = namespace.shift (), formParam = root; while (namespace.length) {formParam + = '[' + namespace.shift () + ']';} return {param: formParam, msg: msg, value: value};}}));

Meidän on nyt saatava tiedot verkkosivullamme olevasta yhteydenottolomakkeesta ja lähetettävä viesti.

// Lähetä yhteyshenkilöltä Lähetä -painike, sinun on luotava kotisivu onnistumisviestillä lähetetylle lomakkeelle. = req.body.name; var email = req.body.email; var phone = req.body.phone; var message = req.body.message; var mailOptions = {// luo tietoja, joita käytetään lähetettäessä viestiä: ' Automaattinen sähköposti ', osoitteeseen:' [email protected] ', aihe:' Verkkosivuston yhteydenottolomake: ' + nimi, teksti:' Olet saanut uuden viestin verkkosivustosi yhteydenottolomakkeesta. / N / n ' +' Tässä ovat tiedot: / n / nNimi: ' + nimi +' / n / nSähköposti: ' + sähköposti +' / n / nPuhelin: ' + puhelin +' / n / nViesti: / n ' + viesti} transporter.sendMail (mailOptions, function (err, res) {if (err) {console.log ('Error');} else {console.log ('Email Sent');}}) res.render ('index'); // render uusi kotisivu, katso miten tämä tehdään onnistumisviestillä, kuten uloskirjautumissivu})

Salama

Flashia käytetään viestien näyttämiseen toimenpiteiden jälkeen. Tämä näkyy, kun lähetät lomakkeen tai et kirjoita kenttää oikein.

Asenna flash aivan kuten muut npm -väliohjelmistot.

sudo npm asenna connect-flash

var flash = vaatia ('connect-flash'); // oli flash -toiminto näytettäväksi näytön viesteissä

// Yhdistä Flashapp.use (flash ());

Ota käyttöön flash, joka lähettää ja päivittää verkkosivun viestejä. Nämä ovat viestejä, jotka sanovat esimerkiksi menestystä tai tietoja on syötetty väärin.

// Global Vars

app.use (function (req, res, next) {res.locals.success_msg = req.flash ('success_msg'); res.locals.error_msg = req.flash ('error_msg'); res.locals.error = req.flash ('virhe'); res.locals.user = req.user || null; next ();});

Jotkut tarvitsevat flashiin liittyviä muuttujia.

Sieltä löydät yhteydenottolomakkeen.

Vaihe 4: Kirjautumissivu

Tämä oli vain jotain, jonka halusin nähdä voisinko tehdä ja ehkä käytän sitä tulevaisuudessa. Halusin vain selittää koodin sellaisena kuin se on git -arkistossani.

Joten tämä osa käyttää vielä muutamia npm keskiastioita. Asenna seuraava alla olevien komentojen avulla.

npm asenna passi && npm asenna passi-paikallinen && npm asenna bcryptjs

&&: n avulla voit suorittaa useita komentoja yhdellä rivillä.

Kirjautuminen ja käyttäjät

Sinun on luotava login.js- ja user.js -tiedosto reittikansion alle. Tämän avulla voidaan luoda käyttäjä, joka tallennetaan tietokantaamme, ja antaa käyttäjän kirjautua sisään tarkistamalla tietokannan.

user.js

var express = vaatia ('express'); var reititin = express. Router (); var passi = vaatia ('passi'); var LocalStrategy = vaatia ('passi-paikallinen'). var Käyttäjä = vaatia ('../ models/user'); // Rekisteröi reititin.get ('/register', function (req, res) {res.render ('register');}); // Rekisteröi käyttäjä router.post ('/register', function (req, res) {var name = req.body.name; var email = req.body.email; var username = req.body.username; var password = req.body.password; var password2 = req.body.password2; // Validation req.checkBody ('name', 'Name is required'). notEmpty (); req.checkBody ('email', 'Email is required')).notEmpty (); req.checkBody ('sähköposti', 'Sähköposti ei kelpaa'). isEmail (); req.checkBody ('käyttäjänimi', 'Käyttäjätunnus vaaditaan'). notEmpty (); req.checkBody (' salasana ',' Salasana vaaditaan '). notEmpty (); req.checkBody (' salasana2 ',' Salasanat eivät täsmää '). virheet) {res.render ('register', {virheet: virheet});}} {var newUser = new User ({name: name, email: email, username: username, password: password}); User.createUser (newUser, function (err, user) {if (err) thro err; console.log (user);}); req.flash ('success_msg', 'Olet rekisteröitynyt ja voit nyt kirjautua sisään'); res.redirect (' /Kirjaudu sisään'); } });

Katkotaan tämä kappale kerrallaan

Sisällytämme ensin kaikki tarvittavat välikaupat ja sitten mallitiedostomme, joka selitetään alla. Reititämme rekisteritunnisteesta ja näytämme rekisterin ohjaustangon tekstin. Sitten tulee tärkeä toiminto. Näiden avulla voimme rekisteröidä uuden käyttäjän tietokantaamme. Toiminto tarkistaa, että kaikki kentät ovat kelvollisia ja että ne sisältyvät lomakkeeseen, jos ei, se pyytää niitä. Seuraavaksi se tarkistaa virheet, ja jos virheitä ei tapahdu, se luo uuden käyttäjän annetuilla tiedoilla. Sitten se ohjaa kirjautumissivulle, jolloin voit kirjautua sisään.

login.js

var express = vaatia ('express');

var reititin = express. Router (); var passi = vaatia ('passi'); var LocalStrategy = vaatia ('passi-paikallinen'). var Käyttäjä = vaatia ('../ models/user'); /* HANKI käyttäjäluettelo. */// Kotisivu router.get ('/', function (req, res) {res.render ('login');}); pass.use (uusi LocalStrategy (funktio (käyttäjätunnus, salasana, tehty) {User.getUserByUsername (käyttäjätunnus, toiminto (err, user) {if (err) heittää virhe; if (! user) {return done (null, false, { viesti: 'Tuntematon käyttäjä'});} User.comparePassword (salasana, käyttäjä.salasana, funktio (err, isMatch) {if (err) heittää virhe; if (isMatch) {return done (null, user);} else { return done (null, false, {message: 'Invalid password'});}});}};})); pass.serializeUser (toiminto (käyttäjä, valmis) {valmis (nolla, käyttäjätunnus);}); pass.deserializeUser (function (id, done) {User.getUserById (id, function (err, user) {done (err, user);});}); router.post ('/login', pass.authenticate ('paikallinen', {successRedirect: '/', failedRedirect: '/login', failFlash: true}), function (req, res) {res.redirect ('/ kojelauta ');}); router.get ('/logout', function (req, res) {req.logout (); req.flash ('success_msg', 'Olet kirjautunut ulos'); res.redirect ('/kotisivu');});

module.exports = reititin;

Sisällytämme ensin kaikki tarvittavat välikaupat ja sitten mallitiedostomme, joka selitetään alla. Reititämme kirjautumistunnisteesta ja näytämme kirjautumistangon tekstin. Käytämme sitten joitakin passitoimintoja ottaaksemme syötetyn käyttäjänimen ja salasanan ja tarkistaaksemme ne tietokantaamme. Käytämme myös salattua salasanaa, joka voi tehdä kirjautumisesta hieman hidasta vadelmapi: llä. Selitän tämän tarkemmin seuraavaksi. Käyttäjätunnuksen ja salasanan vahvistamisen jälkeen sinut ohjataan etusivulle, joka näyttää koontinäytön, kun asetamme tämän indeksitiedostoomme. Lisäämme tähän myös mahdollisuuden kirjautua ulos.

Kuten aiemmin mainitsin, meidän on myös luotava malli tietokannan tarkistamiseksi.

Tämä tehdään luomalla kansio sovellusten pääkansiosi alle. Tässä kansiossa tarvitaan myös user.js -tiedosto.

malli/user.js

var mongoose = vaatia ('mongoose');

var bcrypt = vaatia ('bcryptjs'); // Käyttäjäkaava var UserSchema = mongoose. Schema ({käyttäjänimi: {type: String, index: true}, salasana: {type: String}, sähköposti: {type: String}, nimi: {type: String}}); var User = module.exports = mongoose.model ('Käyttäjä', UserSchema);

module.exports.createUser = function (newUser, callback) {

bcrypt.genSalt (10, function (err, salt) {bcrypt.hash (newUser.password, salt, function (err, hash) {newUser.password = hash; newUser.save (backback);});}); } module.exports.getUserByUsername = function (käyttäjätunnus, takaisinsoitto) {var query = {username: username}; User.findOne (kysely, takaisinsoitto); } module.exports.getUserById = function (id, callback) {User.findById (id, callback); } module.exports.comparePassword = toiminto (ehdokassalasana, tiiviste, soittopyyntö) {bcrypt.compare (ehdokassalasana, tiiviste, funktio (err, isMatch) {if (err) heittää virhe; soittopyyntö (null, isMatch);}); }

Tässä mallissa hahmotellaan, miltä käyttäjäparametrit näyttävät ja miten pääsemme niihin. Mainitsin aiemmin, että salamme salasanamme. tämä on niin, että kenenkään salasanaa ei tallenneta tietokantaan rikkomuksen sattuessa. Salasanat hajautetaan käyttämällä keskilaitteiden bcrypt-koodia.

Vaihe 5: Liikennelaskuri

Halusin nähdä kuinka monta yksilöllistä käyttäjää vieraili verkkosivullani ja laskea "osumat". Tähän on monia tapoja, selitän, miten tein sen.

Tämä seuraa mongodb -kokoelmaa seuratakseni, kuinka monta käyttäjää on käynyt sivullani ja kuinka monta kertaa jokainen yksittäinen kävijä vieraili.

Koska olemme jo puhuneet mongoDB: n perustamisesta, en käy sitä uudelleen.

Sinun on ehkä lisättävä kaksi kokoelmaa tietokantaasi kääntääksesi. Tätä varten voit joko asentaa RoboMongon, jos käytät käyttöliittymää, mutta jos käytät päätöntä vadelmapiä, kuten minä, nautit seuraavista komennoista.

Mongon kuori

Jos haluat muokata db -tiedostoa, hakea tietoja tai luoda kokoelman, tarvitset mongo -kuoren ilman päätä.

Juosta

mongo

Tämä avaa kuoren.

Lisää kokoelma

Minun tapauksessani tietokantaa kutsutaan loginappiksi, voit nimetä sen mitä haluat.

käytä nimeäsi_db

Tarvitsemme kokoelman, joka sisältää kaikki sivustollamme vierailevien käyttäjien IP -osoitteet.

db.creatCollection ("ip")

Seuraavaksi luomme kokoelman, joka laskee sivustomme ainutlaatuiset osumat. Tämä alustetaan tunnuksella ja laskulla, joka alkaa nollasta.

db.createCollection ("count", {id: "hit counter", count: 0})

Seuraa IP -osoitteita

Tätä varten vedämme käyttäjien IP -osoitteet, kun he vierailevat kotisivullamme, lisäämme lukumääräämme ja tallennamme heidät vertaamaan niitä myöhemmin.

Meidän on luotava joitain malleja mongoosimalliemme tallentamiseksi ja lisättävä koodi kotisivumme.js -tiedostoon.

Luomme count.js ja ip.js ja tallennamme ne mallikansioon.

Ip.js -tiedosto on vain malli IP -osoitteellemme

var mongoose = vaatia ('mongoose'); // paketinkäsittelijä mongolle

// Laske kaava var IpSchema = mongoose. Schema ({ip: {type: String,}, count: {type: Number,}}); var Ip = module.exports = mongoose.model ('Ip', IpSchema);

Kotisivumme soittaa count.js: lle aloittaakseen osumien seurannan. Tämä tehdään alla kuvatulla tavalla.

//Homepagerouter.get('/ ', function (req, res) {publicIp.v4 (). Then (ip => {Public_ip = ip; console.log ("ipv4:"+ Public_ip); // =>' 46.5.21.123 '}); publicIp.v6 (). Sitten (ip => {console.log ("ipv6" + ip); Public_ip = ip; // =>' fe80:: 200: f8ff: fe21: 67cf ' });

Count.getCount (kokoelma, ipc, Public_ip, function (count) {

}); count = db.collection ('count'). findOne ({id: "hit counter"}, function (err, count) {userCount = count.count; res.render ('kotisivu', {count: userCount}); }); });

Tämä tapahtuu aina, kun joku menee kotisivullemme, tässä tapauksessa theinternet.onthewifi.com/homepage.

Se tarkistaa käyttäjän IP -osoitteen, ip4 tai ip6, ja tallentaa sitten arvon, johon se lähettää sen osoitteeseen count.get.collection, joka on count.js -tiedostoon tallennettu toiminto.

Tarkastettuaan käyttäjän ainutlaatuisuuden se palauttaa ja lähettää laskenta -arvon kotisivulle ohjaustangon muuttujana.

Count.js -tiedosto on seuraava.

//count.jsvar mongo = vaatia ('mongodb'); // tukee tietokantaa var mongoose = need ('mongoose'); // paketinkäsittelijä mongo mongoose.connect ('mongodb: // localhost/loginapp'); var db = mongoose.connection; var Ip = vaatia ('../ models/ip'); // Count Schema var CountSchema = mongoose. Schema ({id: {type: String,}, count: {type: Number,}}); var Count = moduuli.exports = mongoose.model ('Count', CountSchema); module.exports.getCount = function (count, ipc, Public_ip, callback) {// count on test, callback isfunction ipc.findOne ({ip: Public_ip}, function (err, iptest) {if (! iptest) // add uusi IP -osoite, jos sitä ei ole tietokannassa, ja päivityslaskuri {var new_ip = new Ip ({ip: Public_ip, count: 1}); db.collection ('ip'). save (new_ip); // lisää uusi IP -osoite tietokanta count.update (// päivitä osumalaskuri {id: "osumalaskuri"}, {$ inc: {count: 1}})} else // päivitä tietty IP -laskuri nähdäksesi, kuka käy eniten {ipc.update ({ip: Public_ip}, {$ inc: {count: 1}})}}); }

Tämä luo laskumallin ja.getCount -funktion.. GetCount -toiminto tarkistaa tietokannasta käyttäjien IP -osoitteen ja jos se löytää sen, toiminto lisää kyseisen käyttäjän määrää, ei osumalaskuria. Jos käyttäjien IP -osoitetta ei kuitenkaan löydy, se luo uuden kokoelmaobjektin käyttäjien ip: n kanssa ja lisää osumalaskuria yhdellä.

Tämä palautetaan ja näytetään verkkosivulle.

Siellä on se ip -seurantaosumalaskuri.

Vaihe 6: Blogi

Yritän tällä hetkellä kehittää blogia, joka keskittyy kiinnostuksiini ohjelmistoista, älykkäistä kodeista ja Polaroideista. Joten tein blogiosion. Blogi käyttää staattisia html -sivuja ja ohjaustankoa. Tutkittuani parempia tekniikoita bloggaamisen helpottamiseksi olen sittemmin suunnitellut verkkosivuni uudelleen hugon avulla. Hugo on staattinen html -generaattori. Puhun tästä lisää alla mainitussa opetusohjelmassa.

Vaihe 7: Valmis

Siellä voit mennä syvälliseen opetusohjelmaan minun node.js -verkkosivustollani, joka on paikallisesti isännöidyt vadelmapi. Jos sinulla on kysymyksiä tai kommentteja, jätä ne alle.

Toivottavasti tästä on apua muillekin.

Jos haluat erilaisen lähestymistavan tähän sivustoon käyttämällä staattista web -sivugeneraattoria hugoa, katso toinen opetusohjelma (tulossa pian).