RobertShev/kursus

Kursuse kirjeldus ja viited vajalikele materjalidele

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öö
• 2. kodutöö
• 3. kodutöö
• projekt

GitHub'i töövoog

1. Fork'i ülesande/projekti repositoorium (leiab https://github.com/eesrakenduste-arendamine-2018k/).
2. 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

1. 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

1. 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"

1. Veendu, et kogu kood on Commit'itud.

git status

1. Push/sync'i muudatused GitHub'i.

git push origin

1. Ava pull request ülesande originaalses repositooriumis. Järgi üleasende esitamise tähtaega
2. 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

1. Sissejuhatus
   • Veebiprogrammeerimise aine kokkuvõte
   • Arutleme, mis antud kursus endas hõlmab
2. Ajalugu
   • ECMAScript
   • iframe > XMLHttpRequest > AJAX
3. JS kasutusvaldkonnad
   • Lehtede interaktiivseks muutmine (awwwards, cssdesignawards)
   • Võrgu koormuse vähendamine
   • AJAX
   • Vormide valideerimine
   • WebSocket (Chat)
   • Mängud ja meelelahutus (threeJS)
   • Brauserite lisateegid
4. JS piirangud
   • Andmete kirjutamine serverisse
   • Ligipääs andmebaasidele
   • Ligipääs failisüsteemile
   • Akende sulgemine
   • Lõimtöötlus
   • Ligipääs teistele veebilehtedele
   • Browserite erinevused
5. Turvalisus
   • JS koodile ligipääs
   • window.opener näide (On the security implications of window.opener.location.replace() by julio)
6. Tunnis kasutatavad tööriistad
7. Javascript'is programmeerimine, näidisrakenduse loomine
   • muutujad, funktsioonid, aeg, sündmuste kuulamine, dokumendi muutmine
8. 1. kodutöö
9. 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

Materjalid ja tööriistad

Tunnis kasutatavad rakendused

• Visual Studio Code
• koodi valideerimine ESLint / JavaScript Standard Style
• debug:
  • Chrome Developer Tools
    • Official debugging tutorial
    • õpetus JavaScript Diagnosis
  • Firefox Developer Edition

Kohustuslik materjal

Välja toodud tundide loetelu juures vastavalt igale tunnile.

Soovituslik lugemine

• Kliendipoolsed veebirakendused
• Google JavaScript Style Guide
• JavaScript Garden
• Mozilla's Introduction to Object-Oriented Javascript
• Mozilla Developer Network
• Learn JavaScript
• w3schools
• Front-end Job Interview Questions
• JavaScript Best Practices
• JavaScript Patterns
• Learning Advanced JavaScript slides
• The JavaScript Interpreter, Interpreted (video)
• Classical Inheritance in JavaScript
• Partial Application in JavaScript
• Learning JavaScript Design Patterns
• JS: The Right Way
• Code School
• Javascript Trail Map
• How To Learn JavaScript Properly
• Superhero.js
• Teach Yourself to Code

PHP meeldetuletus

• PHP Coding Style Guide
• Veebirakenduste loomine PHP ja MySQLi abil
• PHP with MySQL Essential Training

HTML/CSS/JS sandbox'id

• JS Bin
• CodePen
• JSFiddle

Git

• Become a git guru.

Litsents

Käesolev leht ja kõik teised https://github.com/veebiprogrammeerimine-2015s materjalid on Creative Commons Attribution 4.0 International Litsensiga.