Veebirakendused

Allikas: Lambda
mootor

Ainekood: ITI0205
Aeg: Sügis 2019
Varasem aine: ITV0110 Võrgurakendused 1
Link: http://www.lambda.ee/wiki/Veebirakendused Punkte: 6 EAP
Lektor: Martin Verrev
Kontakt: martin.verrev@taltech.ee
Olemas on ka 2018 aasta arhiiv koos kõigi eelmise aasta materjalidega.
Jooksva info edastamiseks on kursusel Slacki kanal Slacki kanaliga saab liituda kasutades seda linki.


Lisakaitsmine eksamisessiooni ajal

Kellel on veel esitamata 4. praktikumitöö või tegemata kontrolltöö saab seda esitada eksamisessiooni ajal teisipäeval 7. jaanuaril ICT majas algusega 14:00

Et siis praktikumitööd kaitsta või kontrolltööd teha, kirjuta Slackis õppejõule enda nimi ja kas soovid teha kontrolltööd, kaitsta praktikumi või mõlemat.

  • Praktikumide kaitsmine toimub teisipäeval 7. jaanuaril kell 14:00 arvutiklassis ICT-405
  • Kontrolltöö toimub teisipäeval 7. jaanuaril kell 16:00 auditooriumis ICT-315.


Praktikumide ja kontrolltööde tulemused

Praktikumi ja kontrolltöötulemusi saad vaadata siit Leiad oma nime tulbas "Kood" oleva üliõpilaskoodi kolme viimase numbri ja initsiaalide järgi. Kollasega on märgitud eelmisest aastast ülekantud punktid.

Kellel on kõik vajaminevad asjad, s.t. kohustuslikud praktikumid ja kontrolltöö tehtud, nende tulemused on kantud ka ÕISi.

Kui tunned et sealt on midagi puudu kirjuta õppejõule Slackis.

Aeg, koht, tulemus

Loeng igal neljapäeval kell 10:00-12:30 ruumis ICO-316 (IT Kolledžis 3. korrusel). Loengud on peamiselt pühendatud praktikumide seletamisele ja aeglasele, selgitustega osalisele ette-programmeerimisele. Teisisõnu, loengute mõte on aidata praktikume teha.


Praktikumid toimuvad eri gruppidele kolmel erineval ajal. Esimesel nädalal on juhendajaks Martin Verrev, järgmistel tuleb praktikumijuhendajaid juurde.

NB! Praktikumide eesmärgiks on teha ise ülesande kallal tööd, küsida juhendajalt probleemide korral abi ja esitada valmis või osaliselt valmis töid juhendajale. Praktikumides enamasti ei esitata üldist infot/materjale/näiteid kõigile vaatamiseks: selleks on loeng.

  • esmaspäeval kell 14:00 ruumis ICT-404 IAIB31
  • teisipäeval kell 14:00 ruumis ICT-403 IAIB32
  • neljapäeval kell 12:00 ruumis ICT-121 IAIB31, IAIB32, IAIB33

Kursus lõpeb hindelise arvestusega. Hinne sõltub kursuse jooksul tehtud praktikumide tulemustest (60%) pluss kursuse lõpus toimuva kontrolltöö tulemustest (40%).


Senised 2019. aasta loengud peaksid olema vaadatavad sellelt lingilt.


Varasemate aastate tulemuste arvestamine

  • Kui olete kuulanud ainet Võrgurakendused I rohkem kui aasta tagasi, siis kontrolltööle pääsemise eeltingimusena peate edukalt kaitsma kõik selle semestri kohustustlikud praktikumid 1-4, s.t. varasemaid tulemusi ei arvestata.
  • Kui kuulasite ainet 2018/19 aasta sügissemestril ja mõni praktikumitöö jäi esitamata nii et kontrolltööle ei pääsenud, siis eelmisel aastal kaitstud praktikume uuesti tegema ei pea, välja arvatud juhul kui soovite punktisummat tõsta.
  • Kui kuulasite ainet 2018/19 aasta sügissemestril ja pääsesite kontrolltööle s.t. kaitsesite ära kohustuslikud praktikumitööd, aga kogupunktisumma jäi alla 51 peate sellel semestril kontrolltöö tegemiseks kaitsma õigeaegselt 2. ja 4. praktikumi. Muud praktikumid teile kohustuslikud ei ole aga võite need teha kui soovite eelmise aasta punktisummat parandada.

Kursuse eesmärk

Veebirakenduste põhimõtted ja nende kirjutamise oskus nii brauseri kui serveri poolel. Konkreetsemalt:

  • Brauseri põhitehntoloogiad: html-i, CSS-i ja javascripti baasoskused.
  • Serveripoolse rakenduse kirjutamise põhimõtted,
  • cgi protokoll ja erinevate keelte (sh python, php, javascript, C) kasutamise ülevaade serverirakendustes
  • Pythoni ja php kasutamise esmased oskused.
  • node.js kasutamise sissejuhatus
  • Lihtsamad SQLi kasutamise oskused.

Kursusel eeldatakse elementaarsete programmeerimisoskuste olemasolu: nende puudumisel ei ole võimalik kursust läbida.

Julgustuseks loe seda väikest juttu

NB! Selle kursuse eesmärgiks ei ole keeruliste frameworkide, transpilerite ja pakkimisvahendite jms tehnokeskkonna õppimine: kõik need vajavad alustehnoloogiate kasutamise oskust, millele kursus ongi pühendatud.


Senised 2019. aasta loengud peaksid olema vaadatavad sellelt lingilt.


NB! Ei ole mingit garantiid, et loengud jäävad üles mitmeks kuuks või et kõik loengud võrku ilmuvad.

Praktilised tööd

Kursusel on neli kohustuslikku praktilist ẗööd ja üks vabatahtlik praktiline töö. Iga töö annab 0-12 punkti. Hilinenud tööd annavad poole punktidest. Töid võib (ja on soovitav) esitada enne tähtaega.

NB!

  • Kui sinu praktikum on õigeaegselt arvestatud, siis saad täiendusi esitada ühel korral kuni nädalalani enne järgmise praktikumi tähtaega, ilma pooli punkte kaotamata.
  • Kui sinu praktikum ei ole õigeaegselt arvestatud, siis on sul esitamiseks aega veel kolm nädalat peale tähtaega (välja arvatud neljas ja viies praks), aga selliselt hilinenud praks annab ainult pooled punktid.
  • Üle kolme nädala hilinenud praks annab edukal arvestamisel ainult üheainsa punkti.
  • Oma tööd saad arvestuseks esitada ainult oma rühma praksi ajal. Kui sa ei ole üheski rühmas, siis on aeg vaba. Lihtsalt nõu ja abi saad küsida ka teistel aegadel.

Kõik tööd tuleb esitada ise TTÜ arvutiklassis: emailiga saadetud töid ei vaadata. Kasutada võib nii klassi arvuteid kui oma arvutit, brauser ja operatsioonisüsteem on vabalt valitavad. Tööde presenteerimiseks tuleb kasutada ülikooli serverit dijkstra: kõiki prakse vaatavad õppejõud ainult sealt serverist. Kindlasti loe dijkstra serveri kasutamise õpetust.

Kursuse edukaks läbimiseks peavad kõik kohustuslikud praktilised tööd - neli esimest - olema tehtud.

Lehtede kujundamise ja stiili osas lähtu sellest juhendist.

Ülesanded:

1. ülesanne: HTML ja server

Detailid: Prax 1: html põhioskused.

Tähtaeg 16-20 septembri nädal, vastavalt sinu praktikumirühmale.

2. ülesanne: Memory-mäng

Ülesandeks on realiseerida brauseris jooksev Memory mäng kasutades sellesk HTMLi ja javascripti, vastavalt järgmistele nõuetele:

Prax 2: javascript ja css.

Tähtaeg 15-19 oktoobri nädal, vastavalt sinu praktikumirühmale..

3. ülesanne: Memory mängu mälu ehk serverirakendus pythoni cgi-na

Ülesandeks on realiseerida serveris memory mängu tulemuste ja poolikute mängude salvestamine ja nende kuvamine veebis.

Prax 3: python ja cgi.

Tähtaeg 6-10 novembri nädal, vastavalt sinu praktikumirühmale.

4. ülesanne: mini-twitter ehk andmebaasiga serverirakendus

Neljanda praktikumi ülesandeks on ehitada mini-twitter (vaata [saiti](https://www.twitter.com/) ja [wikipediat](https://en.wikipedia.org/wiki/Twitter)) kasutades selleks PHP-d ja MySQL-i.

Prax 4: andmebaasiga serverirakendus php-s.

Tähtaeg 2-8 detsembri nädal, vastavalt sinu praktikumirühmale.

5. ülesanne: trips-traps-trull ehk node.js rakendus

5. praktikumitöö ei ole arvestuse saamiseks kohustuslik, kuid annab ikkagi kuni 12 punkti, ehk tegemata jätmine annab kokku vastavalt vähem.

Ülesanne on ehitada võimalikult lihtsalt kahe inimese trips-traps-trull mäng node.js abil.

Prax 5: serverirakendus node.js abil.

Tähtaeg 9.-13. detsembri nädal, vastavalt sinu praktikumirühmale.

Vajalikud tööriistad

Oma arvutiga töö tegemiseks peab seal olema vähemalt

  • Programmeerimiseks sobiv tekstiredaktor (väldi IDE-sid!) soovitavalt siit loetelust: Notepad++, brackets, atom, vs code, sublime text, scite
  • Mozilla Firefox ja Google Chrome
  • Windowsil putty või mõni sarnane sisselogimis-proge (Linuxil piisab ssh käsust). Hea erivariant Puttyst on kitty, mis laseb kasutajatunnuse ja parooli meelde jätta, et ei peaks igakord uuesti sisestama.
  • Windowsil winscp (vaata konfimisest!) või mõni sarnane failide-üleslaadimis-proge (linuxil ja macil piisab scp käsust)

Tehnoloogiateemad ja materjale lugemiseks

Allpool on toodud olulisemad ja valik täiendavaid materjale põhilistele tehnoloogiateemadele kursuses.

HTML põhioskused

Loe ja proovi läbi (st vaja põhimõtted selgeks õppida):

Vanemates tutorialites toodud markup on reeglina endiselt pädev, v.a. xhtml ja päised: sina kasuta html5 standardit (päises <!DOCTYPE html>) ja ignoreeri xml teemat html-s.

Lisaks olulist:

Keerulisemat:

CSSi põhioskused

Lugeda ja proovida läbi (st vaja põhimõtted selgeks õppida):

Abiks on tutvuda heade tutorialidega järgmistel teemadel:

Häid praktilisi soovitusi kujundusest css-ga:

Vingeid graafilisi canvas+webgl asju:

Javascripti põhioskused

Seejärel loe läbi ja proovi järgi selles järjekorras:

NB! Selle tulemusena on sul baasettekujutus javascripti keelest, aga mitte reaalsest kasutusest (seda vaatame järgmises loengus).

Javascripti kasutamine brauseris: alustuseks on hea vaadata põhjalikku näidete loetelu

ja tingimata lugeda sinna juurde teegijuhendeid:

Javascripti ja css-i teegid: uurime veidi kõige populaarsemaid universaalseid teeke

  • jquery javascripti teek dom-ga manipuleerimiseks ja ajaxiks
  • underscore funktsionaalsed pisivahendid
  • bootstrap css + javascript, widgetid jne
  • react facebooki kapitaalne teek / pool-framework keerukamate kasutajaliideste tegemiseks

Vaata Google toredaid demosid.

Veebirakenduse optimeerimine mobiilile

Täiendavalt spetsiifilisematest teemadest:


Cgi töötlemine eri keeltes (C, python, bash, java, ...)

Kõigepealt loe ja proovi tingimata ise läbi teha: pythoni cgi-d dijkstra serveris: kiire sissejuhatus

Seejärel vaata hulka näiteid, mille täpsem seletus antakse loengus.

Tutvu linuxi shelli elementaarsete käskudega siit alustades ja selle lühiõpetusega jätkates. Iga käsu juures on abiks man, näiteks man ls. Huvi korral googelda lisaks.


Seejärel loe neid materjale CGI protokollist ja CGI programmidest serveris:

ning siis vaata lisaks loengus tehtud/proovitud lihtsaid cgi programminäiteid eri keeltes.

Cgi jaoks on olemas ka nö rfc-standard, mille lugemine on aga pisut vaevarikas (nagu enamikel standarditel) ja üldjuhul on praktilisem lugeda hoopis ülaltoodud õpetusi ja vaadata näiteid.

Python ja näiteid kasutamisest serverirakendustes

Hea mõte on paralleelselt teha lahti Pythoni interpretaator ja katsetada kõrvale asju otse Pythoni käsureal. Kui su masinas Pythonit pole, siis installeeri! Kasulikke asju lisaks:


Ajax ehk serveriga andmevahetus otse javascriptist

Lisaks võib abi olla:

NB:

  • Vanade IE-de erivariante ei ole mingit mõtet kasutada.
  • Ajaxiga avatud urlilt võib tulla mis iganes tekst (ei pea olema xml).

Serverirakendused PHP-s, näited


SQL

Loe selles järjekorras:

SQL serverirakendustes

Harilikud tutorialid ja tähelepanekud:

Sessioonid, cookied, sisselogimine, autentimine, web storage

Mõned lingid:

node.js sissejuhatus

node.js on süsteem serverirakenduste kirjutamiseks javascriptis. Ta on ehitatud chrome javascripti mootori peale ja lisab sinna hulgem kasulikke teeke, veebiserveri jne.

Vaata:

Dijkstras on node olemas programmina nodejs ja versioon on praeguseks uuendatud. npm on samuti olemas ja ei vaja ruuduõigusi.

Aga, hea mõte on kõigepealt installeerida omaenda arvutisse node.js ja alustada katsetamist:

  • [1] Õpetused node baasmoodulite kohta

Veebiserveri ehitusest ja konfigureerimisest

Kõigepealt tutvu või tuleta meelde http protokolli põhimõtteid:

Veebiserverist paremaks arusaamiseks tasub veidi eksperimenteerida pisikese veebiserveriga.

Enimkasutatav veebiserver Apache:

Apache konfigureerimisest:

Pärit leheküljelt "http://lambda.ee/w/index.php?title=Veebirakendused&oldid=17843"