Eesrakenduste arendamine 2018k

Lindistatud loengud saadaval SIIT YouTube'is

Vaata kodutööde seisu SIIN

Õpetaja: Romil Rõbtšenkov, romilr@tlu.ee
Testserver: lin2.tlu.ee (html, js), greeny.cs.tlu.ee (ssl)
Tunni näited: ~romil/ea17k

Ühendus Greeny'sse

Windows | VIDEO
- Tunneli loomise juhend
Mac OS | VIDEO

1. open Terminal app
2. write:

ssh university_username@lin2.tlu.ee -L 5555:greeny.cs.tlu.ee:80

3. then write TLU account password. Now you can access greeny from browser localhost:5555

4. open new tab in Terminal (cmd + t) and write:

ssh university_username@lin2.tlu.ee -L 2222:greeny.cs.tlu.ee:22

5. then write TLU account password

5. open FTP client (CyberDuck, FileZilla, Coda etc.) and connect to greeny via SFTP
    host:     127.0.0.1
    port:     2222
    username: YourGreenyUsername
    password: YourGreenyPassword

6. choose one Terminal tab and connect to greeny via ssh, write:
ssh YourGreenyUsername@greeny.cs.tlu.ee
7. then enter your Greeny username password
    ls             – to view files and folders in current path
    cd folderName - to enter folder
    cd ..          – to exit folder to previous path

Kodused tööd ja projektid

1. kodutöö
1. kodutöö
1. kodutöö
projekt

GitHub'i töövoog

Fork'i ülesande/projekti repositoorium (leiab https://github.com/eesrakenduste-arendamine-2018k/).
Clone'i see repositoorium enda arvutisse/serverisse ja määra repositooriumi URL kuhu edaspidi muudatusi salvestad.

git clone https://YOURUSERNAME@github.com/YOURUSERNAME/REPOSITORY.git

nt esimese iseseisva töö puhul:
git clone https://jukujuurika@github.com/jukujuurikas/1.ea-kodutoo.git

Lisa vajdusel oma nimi ja email repositooriumi omanikuks (Setting your username). Vajadusel hangi endale privaatne e-post @users.noreply.github.com lõpuga (https://github.com/settings/emails)

git config global user.name "Romil Robtsenkov"
git config global user.email romilrobtsenkov@users.noreply.github.com

Muuda faile ülesande lahendamiseks ja Commit'i iga olulisem muudatus, kasutades kahte käsku.

git add .

git commit -m "Added this functionality to the app"

Veendu, et kogu kood on Commit'itud.

git status

Push/sync'i muudatused GitHub'i.

git push origin

Ava pull request ülesande originaalses repositooriumis. Järgi üleasende esitamise tähtaega
Muudatusi ja täiendusi võib push'ida repositooriumisse, kuni ette antud kuupäevani.

Tagasisidet saab otse pull request'i millele ootan Sinupoolseid kommentaare/mõtteid/küsimusi. Võid julgselt avada pull request'i kohe kui hakkad kodutöö kallal tegelama ja siis kui hätta jääd võid esitada sinna küsimuse. Maini kommentaaris minu kasutajat @romilrobtsenkov siis jõuan sellele kiiremini vastata.

Nõuded

Need rakenduvad ka päris elus!

Peab järgma "head programmeerimise stiili"
- Muutujate nimed peavad kirjeldama muutujat ning peavad olema inglise keeles
- Funktsiooni nimi peab olema "lühike"
- Optimeeri koodi lugemiseks (real ~80 tähemärki)
- Projektide jaoks tuleb kasutada objektorienteeritud lähenemist
- Laenatud koodile tuleb viidata
Boonuspunktid:
- Loomingulisus (NB! nõuded peavad olema täidetud)

Kursus

1. loeng

Sissejuhatus
- Veebiprogrammeerimise aine kokkuvõte
- Arutleme, mis antud kursus endas hõlmab
Ajalugu
- ECMAScript
- iframe > XMLHttpRequest > AJAX
JS kasutusvaldkonnad
- Lehtede interaktiivseks muutmine (awwwards, cssdesignawards)
- Võrgu koormuse vähendamine
- AJAX
- Vormide valideerimine
- WebSocket (Chat)
- Mängud ja meelelahutus (threeJS)
- Brauserite lisateegid
JS piirangud
- Andmete kirjutamine serverisse
- Ligipääs andmebaasidele
- Ligipääs failisüsteemile
- Akende sulgemine
- Lõimtöötlus
- Ligipääs teistele veebilehtedele
- Browserite erinevused
Turvalisus
- JS koodile ligipääs
- window.opener näide (On the security implications of window.opener.location.replace() by julio)
Tunnis kasutatavad tööriistad
Javascript'is programmeerimine, näidisrakenduse loomine
- muutujad, funktsioonid, aeg, sündmuste kuulamine, dokumendi muutmine
1. kodutöö
Kohustuslik järgmiseks korrasks!
- Vaata kuidas ja mis järjekorras JS ning brauser koostööd teevad What the heck is the event loop anyway? by Philip Roberts
- Singleton muster Learning JavaScript Design Patterns by Addy Osmani