Általános információk

Óraszám

2 gyakorlat

Előfeltétel

Programozási technológiák 2.

Célkitűzés

A hagyományos asztali egyfelhasználós alkalmazásoktól továbblépve ebben a tárgyban a hallgatók megismerkedhetnek a kliens-szerver architektúrákkal, annak is egy igen népszerű ágával, a webes protokollokat és technológiákat használó alkalmazások fejlesztésével. A webes alkalmazások készítéséhez felhasználjuk a programozási technológiákon megismert modellezési eszközöket, és azokat webes környezetre ültetjük át. A tantárgy célja, hogy kiindulási ponttul szolgálhasson azok számára, akik modern webes alkalmazásokat szeretnének fejleszteni.

Környezet

Az órai munkákat igyekszünk webes környezetben felhőalkalmazások segítségével megoldani. Amennyiben ez nem lehetséges, ott a lokális gépeken telepített futtató- és fejlesztőkörnyezetek használjuk.

Számonkérés

Az értékelés összetevői

A félév során három beadandó elkészítése szükséges:

• Egy egyszerű feladat megoldása kizárólag szerveroldali technológiával.
  Határidő: 2015. november 1. éjfél
• Az előző feladatban generált weblapok használatának progresszív fejlesztése kliensoldali JavaScript segítségével.
  Határidő: 2016. január 10. éjfél
• Egy egyszerű feladat megoldása kliensoldali technológiákkal (egyoldalas alkalmazásként), szerveroldalon REST-es végpontok kialakításával.
  Határidő: 2016. január 10. éjfél

A feladatoknak az adatokat perzisztálniuk kell, azaz vagy fájlba, vagy adatbázisba kell lementeniük az adatokat.

1. beadandó

Első beadandóként egy kis webes alkalmazás elkészítése a cél szerveroldali technológiák segítségével. A feladatnak mininálisan tartalmaznia kell:

• legalább két modellt, egy-sok kapcsolatban
• legalább 1 űrlapot
• legalább 1 listázó oldalt
• legyen lehetőség új felvételére
• legyen lehetőség meglévő szerkesztésére
• legyen lehetőség meglévő törlésére
• legyenek benne csak hitelesítés után elérhető funkciók
• perzisztálás fájlba történjen

A formai követelményeknek megfelelően kell elkészíteni, dokumentálni és közzétenni. Az ott megfogalmazottakhoz képest a következő szempontoknak is teljesülnie kell:

Tesztelés

• A tesztesetek felsorolása továbbra is szükséges, ezek mellett automatikus tesztek is szükségesek. Nem kell teljeskörű tesztelés, a hallgató mutassa meg, hogy képes ilyen tesztek írására.
• Tesztelési környezet bemutatása a dokumentációban (mocha, chai, zombie, Selenium telepítése, tesztek futtatása)
• Egységtesztek: legalább 1 adatmodell tesztelése
• Funkcionális felületi tesztek: legalább 1 folyamat tesztelése
  1. VAGY: Selenium IDE használatával
  2. VAGY: zombie.js használatával

2. beadandó (opcionális)

Feladat a meglévő szerveroldali webalkalmazás progresszív fejlesztése a kliensoldalon, azaz olyan kliensoldali JavaScript kódok írása, melyek nélkül az alkalmazás továbbra is működőképes, de meglétükkel az alkalmazás használata kényelmesebb, gyorsabb, felhasználóbarátabb. Elvárások:

• legalább 4 funkció megléte, amiből
• legalább 2 AJAX-os funkció;
• kikapcsolt JavaScript mellett az 1. beadandót kapjuk vissza.

A fejlesztést ugyanabba a kódtárba kell végezni, amelyben a szerveroldali alkalmazás volt, természetesen külön commitként. Cloud9-on is ugyanabban a workspace-ben maradhatunk. A közzétételkor a Herokura a módosított applikációt kell feltenni.

A fejlesztést dokumentálni kell. A dokumentáció külön fejezetként kerüljön leírásra a korábbi dokumentáció végére, és a következő dolgokat tartalmazza funkciónként:

• a funkcióban érintett fájlok mind kliens- és szerveroldalon
• a funkció működésének, folyamatának szöveges leírása (mikor mi történik, milyen eseményekre hogyan reagál, melyik kódrészlet fut le, melyik függvény hívódik meg)
• valamelyik funkciónál 1 szekvenciadiagram a kiszolgálás folyamatáról

3. beadandó

Egy webes vastagkliens, azaz egyoldalas alkalmazás készítése Ember.js segítségével az utolsó beadandó. Feladatot illetően lehet a szerveroldali alkalmazásnak egy kliensoldali változata, de másik feladat is választható. A feladatnak mininálisan tartalmaznia kell:

• legalább két modellt, egy-sok kapcsolatban
• legalább 1 űrlapot
• legalább 1 listázó oldalt
• legyen lehetőség új felvételére
• legyen lehetőség meglévő szerkesztésére
• legyen lehetőség meglévő törlésére
• REST API végpont kialakítása
• szerveroldali perzisztálás fájlba

A formai követelményeknek megfelelően kell elkészíteni, dokumentálni és közzétenni. Az órai gyakorlatnak megfelelően ez új workspace-ek létrehozását jelenti Cloud9 oldalon, és a Github-on is külön kódtárba dolgozzunk. A dokumentációval kapcsolatos elvárások a formai követelményeknél írtaknak megfelelő (minden kell). A Heroku-n való közzététel opcionális.

Feladatötletek

A beadandók témáit a hallgatók hozzák. Néhány gondolatindító példa feladat:

1. Receptek és hozzávalók
2. Tantárgyak felvétele
3. Raktár bevételezés
4. Családi todo
5. Családi büdzsé
6. Névjegyek kezelése
7. Munkaidő nyilvántartás

Formai követelmények

Minden beadandóhoz értelemszerűen el kell készíteni a kódot, meg kell írni a dokumentációt, és az elkészült alkalmazást közzé kell tenni. A kód elkészítése a Cloud9 platformon javasolt. Az elkészült kódot egy publikus Github kódtárban kell tárolni. A dokumentáció a kódtár README.md állományában kerüljön megvalósításra Github Flavoured Markdown formátumban. Az elkészült feladatot a Heroku platformon kell közzé tenni.

A beadandó elkészítésének technikai részletei (Github, Heroku, CLoud9) a példa Github kódtárban találhatók.

A dokumentáció szerkezete

A dokumentáció felépítésével kapcsolatos elvárások alapvetően megfelelnek az előzménytárgyban megfogalmazott elvárásoknak, de ki is egészülnek a tárgy webes jellegének megfelelően. A következő segédanyagok használhatók ehhez:

• Az előzménytárgy dokumentációval kapcsolatos elvárásai
• A gyakorlatokon tervezéssel kapcsolatban elhangzott diák
• Webes alkalmazások tervezése, tervezési eszközök
• További hallgatói jegyzetek a különböző UML diagramokkal kapcsolatban

A diagramok elkészítéséhez bármilyen eszköz használható. Néhány ajánlat:

• nomnoml: sokféle diagramtípus
• js-sequence-diagrams: szekvenciadiagramok
• Lumzy: webes mockupkészítő eszköz
• LayoutIt: designtervekhez
• Bootswatch: designtervekhez

A dokumentáció a következő részeket tartalmazza:

• Követelményanalízis
• Tervezés
• Implementáció
• Tesztelés
• Felhasználói dokumentáció

Követelményanalízis

A követelmény feltárás során felmérik és összegyűjtik a megrendelt szoftverrel szemben támasztott felhasználói követelményeket, elemzik az alkalmazási szakterületet. Részei:

1. Követelmények összegyűjtése: a nyújtandó szolgáltatások ismertetése rövid, szöveges leírásként, sokszor felsorolásként jelenik meg.
   1. Funkcionális elvárások
   2. Nem funkcionális követelmények
2. Szakterületi fogalomjegyzék: ha vannak speciális fogalmak, akkor ezeket itt lehet összegyűjteni és magyarázni.
3. Használatieset-modell
   1. Szerepkörök: lista rövid leírással
   2. Használati eset diagramok: a szerepkörök és az elérhető funkiók kapcsolatát jelenítik meg, ha kell, akkor esetenként rövid magyarázó szöveggel.
   3. Folyamatok pontos menete: legalább 1 folyamat kifejtése.

Tervezés

1. Architektúra terv
   1. komponensdiagram
   2. Oldaltérkép
   3. Végpontok
2. Felhasználóifelület-modell
   1. Oldalvázlatok
   2. Designterv (nem kell, elég a végső megvalósítás kinézete)
3. Osztálymodell
   1. Adatmodell
   2. Adatbázisterv
   3. Állapotdiagram
4. Dinamikus működés
   1. Szekvenciadiagram

Implementáció

1. Fejlesztői környezet bemutatása
2. Könyvtárstruktúrában lévő mappák funkiójának bemutatása

Tesztelés

Tesztesetek felsorolása: milyen eseteket próbált végig a hallgató.

Felhasználói dokumentáció

1. A futtatáshoz ajánlott hardver-, szoftver konfiguráció
2. Telepítés lépései: hogyan kerül a Githubról a célgépre a program
3. A program használata

A beadandók értékelése

• A beadandók értékelése 1-5-ig történik.
• A bemutatás személyesen történik a gyakorlatvezetőknél, a gyakorlatvezetők által meghatározott kéthetes intervallumban.
• A beadandókat határidőre kell elkészíteni.
• Késés esetén minden hét késés 1 jegy levonást jelent.
• A beadandókat Github projektként kell elkészíteni, a dokumentációt a projekt readme fájljában kell megadni GFM formátumban.

Jegyszerzés feltételei

• Részvétel a gyakorlatok legalább 75%-án (maximum 3 hiányzás)
• Elfogadott 1. és 3. beadandó
• Kérdőív kitöltése

Értékelés

• Az elfogadott beadandók átlagából adódik a félév végi jegy.
• A 2-es érdemjegyhez legalább 2-esre megírt kötelező beadandók szükségesek.

Gyakorlatok

Segédanyagok, dokumentációk

Elektronikus tananyag

• Bevezetés a kliens- és szerveroldali webalkalmazások készítésébe (elektronikus tananyag)
• Webadatbázis-programozás (elektronikus tananyag, PHP alapokon, de a tervezés, az MNV-minta bemutatása és a kliensoldali fejlesztés része itt is aktuális)

Ember.js források

• Ember.js libraryk node_modules mappája

Horváth Győző gyakorlatai

Cloud9: file upload, majd kitömörítés: tar -zxvf gyak4.tar.gz

• 4. gyakorlat végi pillanatkép (1. kurzus)
• 4. gyakorlat végi pillanatkép (2. kurzus)
• 5. gyakorlat végi pillanatkép (1. kurzus)
• 5. gyakorlat végi pillanatkép (2. kurzus)
• 6. gyakorlat végi pillanatkép (1. kurzus)
• 6. gyakorlat végi pillanatkép (2. kurzus)
• 7. gyakorlat végi pillanatkép (1. kurzus)
• 7. gyakorlat végi pillanatkép (2. kurzus)
• 10. gyakorlat végi pillanatkép (1. kurzus)
• 10. gyakorlat végi pillanatkép (2. kurzus)
• 11. gyakorlat végi pillanatkép (1. kurzus)
• 11. gyakorlat végi pillanatkép (2. kurzus)
• 12. gyakorlat végi pillanatkép (1. kurzus)
• 12. gyakorlat végi pillanatkép (2. kurzus)
• 13. gyakorlat végi pillanatkép (1. kurzus)
• 13. gyakorlat végi pillanatkép (2. kurzus)
• 13. gyakorlat végi pillanatkép (REST API szerver)

Oktatók

Tárgyfelelős

Horváth Győző

Gyakorlatvezetők

• Horváth Győző
• Kereszti Krisztián
• Kereszti Zalán
• Visnovitz Márton