Super spletna klepetalnica

2. domača naloga pri predmetu Osnove informacijskih sistemov (navodila)

Opis naloge in navodila

Na GitHub je na voljo javni repozitorij https://github.com/lovre/klepet, ki vsebuje Node.js spletno klepetalnico predstavljeno na predavanjih in vajah. V okviru domače naloge ustvarite lastno kopijo repozitorija ter dopolnite obstoječo implementacijo spletne klepetalnice kot zahtevajo navodila. Domača naloga zahteva poznavanje GIT ukazov, HTML označb, CSS stilov, jezika JavaScript in Node.js tehnologije. Domača naloga ne zahteva veliko dela, a zahteva nekaj razmisleka. Pri delu natančno sledite navodilom!

Spletno povezavo na GitHub repozitorij podate kot https://github.com/{študent}/klepet, kjer {študent} predstavlja vaše GitHub uporabniško ime. Spletno povezavo na uveljavitev v GitHub repozitoriju podate kot https://github.com/{študent}/klepet/compare/{commit}, kjer je {commit} identifikator ustrezne uveljavitve. Le-tega pridobite na spletni strani GitHub repozitorija v zavihku Commits pod Code, kjer je vsaki uveljavitvi pripisan SHA identifikator (uporabite možnost Copy the full SHA).

Vzpostavitev okolja in repozitorija

Na GitHub z uporabo funkcije Fork ustvarite lastno kopijo repozitorija https://github.com/lovre/klepet v okviru katere boste opravljali domačo nalogo. Kopija repozitorija naj ostane javna in naj ohrani ime "klepet". Z uporabo podanih GIT ukazov v ukazni lupini razvojnega okolja Cloud9 vzpostavite lokalni repozitorij ter ustvarite veje razvoja zasebna, slike, youtube in dregljaj v okviru katerih boste reševali posamezne naloge. Na koncu vse spremembe uveljavite še v oddaljenem GitHub repozitoriju.

Kako naj rešujem?

git clone (https://github.com/{študent}/klepet.git | [email protected]:{študent}/klepet.git)
git commit --allow-empty -m "Začetek dela na domači nalogi"
git checkout -b zasebna
git commit --allow-empty -m "Začetek dela na I. nalogi"
git checkout -b slike
git commit --allow-empty -m "Začetek dela na II. nalogi"
git checkout -b youtube
git commit --allow-empty -m "Začetek dela na III. nalogi"
git checkout -b dregljaj
git commit --allow-empty -m "Začetek dela na IV. nalogi"
git push --all

Kaj oddam na eUcilnici?

Spletno povezavo na ustvarjen GitHub repozitorij.

Repozitorij: https://github.com/{študent}/klepet

I. Hitra zasebna sporočila

Spletna klepetalnica omogoča pošiljanje zasebnih sporočil le izbranemu uporabniku z uporabo ukaza /zasebno. Dopolnite implementacijo tako, da se ob pritisku na vzdevek uporabnika kanala izpisanem na desni strani klepetalnice v vnosno polje za sporočila doda predloga /zasebno "{vzdevek}" , kjer je {vzdevek} vzdevek izbranega uporabnika. Za tem naj vnosno polje prevzame fokus spletne strani. Poleg tega poskrbite, da se miškin kazalec nad seznamom vzdevkov uporabnikov spremeni v kazalec za povezavo, dočim naj se ozadje trenutno izbranega uporabnika obarva sivo. Pri tem se zgledujte po implementaciji seznama kanalov na desni strani klepetalnice.

Kako naj rešujem?

Zahtevane spremembe implementirajte v predhodno ustvarjeni veji zasebna. Med delom lahko smiselno uveljavljajte spremembe v lokalnem in oddaljenem GitHub repozitoriju, dočim pa ob koncu spremembe uveljavite s sporočilom "Zaključek dela na I. nalogi". V ta namen v ukazni lupini razvojnega okolja Cloud9 uporabite (vsaj) podane GIT ukaze.

git checkout zasebna
...
git commit -a -m "Zaključek dela na I. nalogi"
git push origin zasebna

Kaj oddam na eUcilnici?

Spletno povezavo na zadnjo uveljavitev v GitHub repozitoriju v veji zasebna s sporočilom "Zaključek dela na I. nalogi", ki vključuje vse zahtevane spremembe.

I. naloga: https://github.com/{študent}/klepet/compare/{commit}

II. Deljenje slikovnih datotek

Dopolnite implementacijo spletne klepetalnice tako, da bo omogočala deljenje slikovnih datotek dostopnih preko spleta. V ta namen po vnosu sporočila uporabnika preverite ali le-to vsebuje povezave na slikovne datoteke. Predpostavite, da so to povezave, ki se začnejo z nizom http:// ali https:// ter končajo z nizom .jpg, .png ali .gif. V kolikor take povezave najdete poleg sporočila na kanalu dodajte ustrezno število HTML elementov <img> s povezavami na slikovne datoteke. Širina prikazanih slik naj bo 200px, dočim naj bodo 20px zamaknjene od levega roba. Pazite, da bodo slike prikazane tako pošiljatelju kot tudi prejemnikom.

Kako naj rešujem?

Zahtevane spremembe implementirajte v predhodno ustvarjeni veji slike. Med delom lahko smiselno uveljavljajte spremembe v lokalnem in oddaljenem GitHub repozitoriju, dočim pa ob koncu spremembe uveljavite s sporočilom "Zaključek dela na II. nalogi". V ta namen v ukazni lupini razvojnega okolja Cloud9 uporabite (vsaj) podane GIT ukaze.

git checkout slike
...
git commit -a -m "Zaključek dela na II. nalogi"
git push origin slike

Kaj oddam na eUcilnici?

Spletno povezavo na zadnjo uveljavitev v GitHub repozitoriju v veji slike s sporočilom "Zaključek dela na II. nalogi", ki vključuje vse zahtevane spremembe.

II. naloga: https://github.com/{študent}/klepet/compare/{commit}

III. Izmenjava YouTube posnetkov

Dopolnite implementacijo spletne klepetalnice tako, da bo omogočala enostavno izmenjavo in predvajanje YouTube posnetkov. V ta namen po vnosu sporočila uporabnika preverite ali le-to vsebuje povezave oblike https://www.youtube.com/watch?v={video}, kjer je {video} identifikator YouTube posnetka. V kolikor take povezave najdete poleg sporočila na kanalu dodajte ustrezno število HTML elementov <iframe src="https://www.youtube.com/embed/{video}" allowfullscreen></iframe> s povezavami na ustrezne YouTube posnetke. Širina in višina prikazov naj bosta 200px in 150px, dočim naj bodo 20px zamaknjeni od levega roba. Pazite, da bodo prikazi vidni tako pošiljatelju kot tudi prejemnikom.

Kako naj rešujem?

Zahtevane spremembe implementirajte v predhodno ustvarjeni veji youtube. Med delom lahko smiselno uveljavljajte spremembe v lokalnem in oddaljenem GitHub repozitoriju, dočim pa ob koncu spremembe uveljavite s sporočilom "Zaključek dela na III. nalogi". V ta namen v ukazni lupini razvojnega okolja Cloud9 uporabite (vsaj) podane GIT ukaze.

git checkout youtube
...
git commit -a -m "Zaključek dela na III. nalogi"
git push origin youtube

Kaj oddam na eUcilnici?

Spletno povezavo na zadnjo uveljavitev v GitHub repozitoriju v veji youtube s sporočilom "Zaključek dela na III. nalogi", ki vključuje vse zahtevane spremembe.

III. naloga: https://github.com/{študent}/klepet/compare/{commit}

IV. Pošiljanje dregljaja uporabniku

Dopolnite implementacijo spletne klepetalnice tako, da bo omogočala pošiljanje dregljaja, ki "zatrese" celotno vsebino spletne klepetalnice izbranega uporabnika. Na strani strežnika je funkcionalnost dregljajev že delno implementirana v okviru JavaScript funkcije obdelajDregljaj() v datoteki lib/klepetalnica_streznik.js. Pri delu natančno sledite naslednjim štirim korakom.

1. V mapo public/js dodajte JavaScript knjižnico za "tresenje" elementov spletne strani jrumble.js, ki jo prenesite iz spletnega mesta https://jackrugile.com/jrumble/. Spletni strani klepetalnice dodajte povezavo na JavaScript knjižnico jrumble.js ter pa navodilo za uporabo funkcionalnosti dregljajev kot Pošiljanje dregljaja: /dregljaj [vzdevek].
2. Dopolnite implementacijo klepetalnice na strani odjemalca tako, da se ob uporabi ukaza /dregljaj na kanal dregljaj kot atribut vzdevek posreduje vzdevek uporabnika, ki naj bi dregljaj prejel. Pošiljatelj dregljaja naj v primeru uspeha prejme sporočilo Dregljaj za {vzdevek}, kjer je {vzdevek} vzdevek prejemnika, sicer pa sporočilo Neznan ukaz.
3. Dopolnite implementacijo klepetalnice na strani odjemalca tako, da se bo ob prejetju sporočila na kanalu dregljaj "zatresla" vsebina spletne klepetalnice. V ta namen nad HTML elementom z identifikatorjem vsebina najprej uporabite JavaScript funkcijo jrumble(), nato pa pričnite s "tresenjem" z uporabo funkcije trigger('startRumble'). "Tresenje" ustavite z uporabo funkcije trigger('stopRumble'), ki naj se izvede sekundo in pol kasneje.
4. Dopolnite implementacijo klepetalnice na strani strežnika tako, da onemogočite pošiljanje dregljajev samemu sebi.

Kako naj rešujem?

Zahtevane spremembe implementirajte v predhodno ustvarjeni veji dregljaj. Med delom lahko smiselno uveljavljajte spremembe v lokalnem in oddaljenem GitHub repozitoriju, dočim pa ob koncu spremembe uveljavite s sporočilom "Zaključek dela na IV. nalogi". V ta namen v ukazni lupini razvojnega okolja Cloud9 uporabite (vsaj) podane GIT ukaze.

git checkout dregljaj
...
git commit -a -m "Zaključek dela na IV. nalogi"
git push origin dregljaj

Kaj oddam na eUcilnici?

Spletno povezavo na zadnjo uveljavitev v GitHub repozitoriju v veji dregljaj s sporočilom "Zaključek dela na IV. nalogi", ki vključuje vse zahtevane spremembe.

IV. naloga: https://github.com/{študent}/klepet/compare/{commit}

V. Združevanje sprememb v repozitoriju

Z uporabo GIT ukazov v ukazni lupini razvojnega okolja Cloud9 veje razvoja zasebna, slike, youtube in dregljaj združite v vejo master. Pri tem pazite, da samih vej ne izbrišete. Na koncu v repozitorij dodajte še Markdown datoteko avtorstvo.md, ki naj vsebuje podano vsebino.

Študent z vpisno številko _{vpisna}_ potrjujem, da sem __edini avtor__ oddane domače naloge.

Kako naj rešujem?

Zahtevane spremembe implementirajte v veji master. Med delom lahko smiselno uveljavljajte spremembe v lokalnem in oddaljenem GitHub repozitoriju, dočim pa ob koncu spremembe uveljavite s sporočilom "Zaključek dela na domači nalogi". V ta namen v ukazni lupini razvojnega okolja Cloud9 uporabite (vsaj) podane GIT ukaze.

git checkout master
...
git commit -a -m "Zaključek dela na domači nalogi"
git push origin master

Kaj oddam na eUcilnici?

Spletno povezavo na zadnjo uveljavitev v GitHub repozitoriju v veji master s sporočilom "Zaključek dela na domači nalogi", ki vključuje vse zahtevane spremembe.

V. naloga: https://github.com/{študent}/klepet/compare/{commit}