WEBES ALKALMAZÁSOK TERVEZÉSE, FEJLESZTÉSÉNEK MENETE. Tarcsi Ádám, Horváth Győző

Átírás

1 WEBES ALKALMAZÁSOK TERVEZÉSE, FEJLESZTÉSÉNEK MENETE Tarcsi Ádám, Horváth Győző

2 2 Tervezés

3 Mi a Webtechnológia (Web Engineering)? 4 A szoftvertechnológia kiterjesztése webes alkalmazásokra. Több, mint csupán HTML és JavaScript A szoftverfejlesztés web-centrikus megközelítése. Kiváló minőségű, költség-hatékony web-es alkalmazások tervezéséhez, fejlesztéséhez, fejlődéséhez szükséges irányzatok, módszertanok alkalmazása.

4 Web Engineering kulcsterületei Szoftvertechnológia Követelmény elemzés Tervezés Fejlesztés Tesztelés Működtetés Karbantartás Web Engineering Hypermedia Információs struktúra leírása Navigáció Vizualizáció Használhatóság Ergonómia Eggyüttműködés Számítógépes hálózatok ISO/OSI rétegei Hatékonyság Biztonság Dr. Martin Gaedke Egyebek... Információs rendszerek Adatmodellezés RDBMS, XML Lekérdező nyelvek Üzleti folyamatok

5 Web-site vs. Web-alkalmazás Statikus / dinamikus Adatbázis Hagyományos (asztali) alkalmazás Web-site Statikus vagy statikus-szerű Dinamikus Nem szükséges / nem tipikus Nem implementálható asztali alkalmazásként Jellemző Authorizáció Nem jellemző Jellemző Bookmarking / search engine Tipikus, jellemző Szerver-oldali logika Nem jellemző Mindig Kliens-oldali logika Nem jellemző, de előfordulhat Web-alkalmazás Rendelkezik asztali alkalmazásokhoz hasonló funkcionalitásokkal Nem működik. Keresőmotorok számára irreleváns, feldolgozhatatlan Jellemzően Példa Híroldalak, (Wikipedia) Google Docs

6 Keretrendszer vs. Tartalomkezelő (CMS) Programozói készségek, érettségi szint az adott környezetben Web-es fejlesztés célja Tisztán tartalom megosztás Tartalommegosztás kevés fejlesztéssel Kezdő CMS CMS, de fejlesztés nem ajánlott Haladó CMS CMS / Framework Profi CMS CMS / Framework Szofisztikált funkciók, a tartalmi szempontok nem fontosak Projekt nem ajánlott Framework Framework

7 Összetettség, komplexitás Web alkalmazás kategóriák Ubiquitous Semantic Web Collaborative Social Web Workflow Based Transactional Interactive Portal Oriented Doc-Centric Idő 8 Egy összetett webalkalmazás több kategóriába is tartozhat!!!

8 Dokumentum-központú web-site-ok Web alkalmazások előzményei, kezdetleges webalkalmazások Statikus HTML dokumentumok Jellemző a manuális frissítés Előnyeik Egyszerű, Megbízható, Gyors válaszidő Hátrányaik A gyakori frissítés jelentősen megnöveli a karbantartás költségeit Mivel a frissítése nehézkes, nem nagyon automatizálható, gyakoriak az elavult tartalmak.

9 Interaktív & Tranzakcionális Interaktív Interaktív tartalmak: űrlapelemek, gombok,... Dinamikusan generált oldalak (felhasználói inputtól függően) Pl.: híroldalak Tranzakcionális Tartalom frissítése (CRUD) tranzakció Adatbázis használat jellemző Pl.: szállodai hotelfoglalás, online bank, vásárlás

10 Munkafolyamat-alapú alkalmazások Üzleti folyamat (business processes) alapú alkalmazások Nem szükségszerű a workflow motor Az alkalmazás felépítését, struktúráját az üzleti logika határozza meg Jellemzően web-szolgáltatás alapú Pl.: B2B, SOA alkalmazások

11 Kollaboratív & Social Web Együttműködésre épülő webalkalmazások Struktúrálatlan, együttműködő környezetek Személyek közötti kommunikáció mindenekfelett Pl: Wiki-k Social Web A WWW alapvetően anonim környezet Megosztás, közösségek térnyerése Mashup: alkalmazások közötti integráció Pl: Blog-ok, social bookmarking (del.icio.us)

12 Portál-alapú webalkalmazások Minden egy helyen: egy belépési pontot ad a heterogén információk eléréséhez Index, Yahoo! CMS rendszerek Specifikus, tematikus portálok Üzleti portálok (Business, Enterprise portal): intranet Online piacterek: bookline, vatera Közösségi portálok adott közösségeknek: scn.sap.com

13 Mindenhonnan elérhető (Ubiquitous) webalkalmazások Testreszabott szolgáltatások, melyek bármilyen eszközről elérhetőek Human-Computer Interaction (HCI) kulcsfontosságú: Az egyes eszközök korlátai (képernyő méret, sávszélesség) Kontextusfüggő Jelenleg is fejlődő terület: Perszonalizáció Helyfüggő alkalmazások Multi-platform, HTML5 alkalmazások Pl.: Evernote, hvg.hu (tablet.hvg.hu, m.hvg.hu)

14 Szemantikus Web Tim Berners-Lee: Information on the Web should be readable to machines, as well as humans. Metaadatok és ontológiák használata a tartalom, információ leírására. Számítógépek számára is érthető tartalom. Pl.: dbpedia

15 16 Web Engineering

16 A web-alkalmazások építőkövei 17 Tartalom HTML dokumentumok, Multimédia állományok Navigációs struktúra (Hypertext) Felhasználói interfész

17 Szoftverfejlesztés tevékenységei Elvárások, követelmények elemzése és specifikáció Tervezés Implementálás, fejlesztés, kódolás Kipróbálás, validálás, tesztelés Szoftverevolúció: karbantartás, továbbfejlesztés

18 Kiegészítő tevékenységek Projekt menedzsment Verzió kezelés / verzió követés Erőforrás menedzsment Minőségbiztosítás Terméktámogatás Projekt értékelés, fejlesztési folyamat továbbfejlesztése

19 Feladatkörök 20 Megrendelő Szervezői, tervezői feladatok: rendszerszervezés, szoftver architect, projektvezetés, marketing, stb. Web-fejlesztés: kilens, szerver oldalon Web-design Adatbázis: adminisztráció, fejlesztés Tesztelés Üzemeltetés

20 21 Szoftverfolyamat-modellezés

21 Szoftverfolyamat modellek Vízesés Boehm féle spirál Gyors prototípus Inkrementális (evolúciós) Újrafelhasználás orientált (komponens alapú) V OMT (Object Modelling Technique) RUP (Rational Unified Process) Agilis módszerek: SCRUM, Extreme Programming (XP), Lean, stb.

22 Vízesés modell A probléma elemzése, meghatározása, követelmények felmérése Rendszerjavaslat kidolgozása Rendszerspecifikáció Logikai és fizikai tervezés Implementáció, megvalósítás Szoftvervalidáció, tesztelés Rendszerátadás és bevezetés Üzemeltetés és karbantartás

23 Vízesés modell Követelmények felmérése: igények, elvárások meghatározása, összefoglalása. Jelen állapot (helyzetfelmérés), probléma, elérendő cél definiálása. Rendszerjavaslat: Alternatívák, szükséges erőforrások, költségek megválaszolása, alapvető lépések a projektterv összeállításához. A rendszerjavaslat az első olyan dokumentum, amelyet a megrendelő megkap, melyből az eddig végzett munkát megítélheti, a fejlesztés perspektíváiról képet alkothat. Rendszerspecifikáció: rendszertervezőnek szól. Input-output típusok, fájlok definiálása, nagyvonalú rendszerterv (hardver és szoftveres), adatstruktúra, interfész-definíció. Döntések, azok bemutatása (pl.: vásárolt v. fejlesztett részek), stb. Logikai és fizikai tervek: szoftver és adatbázis. A lépések konkrét definiálása. Megvalósítási terv (idő, erőforrások, ember, pénzügyi források, hogyan érjük el a célokat) és rendszerterv elkészítése. Architektúra, hálózati topológia, funkcióspec., navigációs és oldal desing-ek, adatterv - DB diagram, osztálydiagrammok.

24 Vízesés modell Implementáció = megvalósítás Szoftvervalidáció = tesztelés Rendszerátadás (élesbe helyezés online) Üzemeltetés, karbantartás visszamutat a korábbi állapotokra.

25 Logikai és fizikai rendszerterv Logikai rendszerterv: a felmerült probléma megoldására kidolgozott működési-, szervezeti-, adat- és folyamatmodell, mely többféle eszközkörnyezetben megvalósítható módon, logikai szinten van megfogalmazva. Fizikai rendszerverv: egy logikai rendszerterv alapján több fizikai is készíthető más-más hardver/szoftver környezetre is tervezhető, megvalósítható. Konkrét eszközbázisra, adott környezetre épül.

26 Logikai tervezés A rendszer működési logikájának tervezése Folyamatok (funkciók) tervezése Adattervezés Felhasználói interfészek tervezése

27 Fizikai tervezés Adatterv Rendszerspecifikációk (fejlesztési, futtatási környezet) Szoftverarchitektúra (rétegek) A rendszer működésének elve Programspecifikációk funkciótervek I/O tervek, rendszer interfészek Biztonsági terv

28 Vízesés modell A következő fázis addig nem indulhat el, amíg az előző be nem fejeződött. Ez a modell akkor működik jól, ha a követelmények teljesen ismertek. Előny: Jól menedzselhető és ellenőrizhető. Minden fázisban jól definiált feladatok. Minden fázis jól dokumentálható. Előre jól definiálható követelmények esetén jól alkalmazható. Hátrány: Nagyon sok probléma csak az utolsó fázisban derül ki, így a javítás nagyon költséges. Korán kell jelentős döntéseket hozni, ez hibás döntésekhez vezethet. Nehéz a rendszert a fejlesztés közben változó követelményekhez igazítani. Sok dokumentációs munkát igényel.

29 Spirál modell megvalósíthatóság a rendszer követelményeinek meghatározása rendszertervezés, stb.

30 Spirál modell Determine goals, alternatives, constraints Evaluate alternatives and risks budget 4 budget 3 budget 2 budget 1 prototype 1 prototype 2 prototype 3 prototype 4 concept of operation Plan Develop and test

31 Spirál modell Előny: a kockázati tényezőkkel explicite számol. A spirális modellben nincsenek rögzített fázisok, és felölelhet más folyamatmodelleket is (vízesés, evolúciós, stb.). Hátrányai: a modell alkalmazása bonyolult, munkaigényes feladat; a párhuzamos foglalkoztatás csak a 3. szektorban lehetséges.

32 V modell Forrás:

33 Level of abstraction V modell system requirements system integration software requirements acceptance test preliminary design integration testing analyze and design detailed design component test test and integrate code and debug unit test time

34 V modell Egy módosított vízesés modell. Megkülönbözteti a fejlesztésen belül a konstrukciós és a tesztelési fázisokat. Definiálja a tesztelés szintjeit. Szemlélteti, hogy a tesztelési munka végigköveti a teljes fejlesztési folyamatot. Összefüggést tételez fel az egyes konstrukciós fázisok és az egyes tesztelési szintek között.

35 Gyors prototípus modell

36 Gyors prototípus modell Segíti a fejlesztő és a felhasználó kommunikációját. Főleg kisebb csoportoknál vált be. A teljes fejlesztési folyamatot általában nem fedi le, de jól alkalmazható kiegészítő módszerként.

37 Inkrementális (evolúciós)

38 Evolúciós modell Ki kell fejleszteni egy kezdeti implementációt (prototípust), azt a felhasználókkal véleményeztetni, majd sok-sok verzión át addig finomítani, amíg megfelelő nem lesz. Iterációs modellnek is nevezik. Objektum orientált fejlesztésben gyakran használják. Ez a modell a felhasználó kívánságait jobban kielégítő programot eredményez. A kis (< programsor) és közepes (<= programsor) rendszerek fejlesztéséhez ideális. Hátrányai: a folyamat nem látható; a rendszerek gyakran szegényesen strukturáltak; a gyors fejlesztés rendszerint a dokumentáltság rovására megy.

39 Újrafelhasználás orientált fejlesztés (komponens alapú) Komponenselemzés Követelménymódosítás Rendszertervezés újrafelhasználással Fejlesztés és integráció

40 Komponens alapú modell Előnye: lecsökkenti a kifejlesztendő részek számát, így csökkenti a költségeket és a kockázatot. Ez általában a kész rendszer gyorsabb leszállításhoz vezet. Hátrányai: akövetelményeknél hozott kompromisszumok elkerülhetetlenek, és ez olyan rendszerhez vezethet, ami nem felel meg a felhasználó valódi kívánságának.

41 Egyéb modellek, módszertanok Agilis XP extreme Programming SCRUM Lean MDA Model Driven Architecture MDD- Model Driven Design TDD Test Driven Design BDD Behaviour Driven Design...

42 Tervezési eszközök

43 CASE eszközök Computer-Aided Software Engineering Követelményspecifikáció: grafikus rendszermodellek, üzleti és domain Elemzés/tervezés során: adatszótár kezelése, mely a tervben található egyedekről és kapcsolataikról tartalmaz információt; felhasználói interfész generálását egy grafikus interfész-leírásból, melyet a felhasználóval együtt készíthetünk el.; a terv ellentmondás mentesség vizsgálata Implementáció során: automatikus kódgenerálás (Computer Aided Programming - CAP);verziókezelés Szoftvervalidáció során: automatikus teszt-eset generálás, tesztkiértékelés, -dokumentálás Szoftverevolúció során: forráskód visszafejtés (reverse engineering); régebbi verziójú programnyelvek automatikus újrafordítása újabb verzióba.

44 CASE eszközök Automatikus dokumentumgenerálás; Projektmenedzsment támogatás (ütemezés, határidők figyelése, erőforrás-tervezés, költéségés kapacitásszámítás, stb. ) A CASE-eszközök korai pártolói azt jósolták, hogy a szoftverek minőségében és a termelékenységben nagyságrendi javulást okoznak ezek az eszközök, de valójában csak 40% körüli a javulás.

45 46 Web site tervezés

46 Web Site tervezés Információ gyűjtés 2. Tervezés 3. Tartalom és design 4. Fejlesztés 5. Tesztelés, minőségi ellenőrzés / Üzembehelyezés 6. Karbantartás

47 1. Információgyűjtés 48 Igényfelmérés: több lépcsőben, funkcionális igények felmérésével marketing- és stratégiai célok meghatározása Előzetes árajánlat Domain név és tárhely (

48 2. Tervezés I. 49 Anyagbeszerzés I. Adat, funkcionális, navigációs terv készítése

49 2. Tervezés II. 50 Technológiai és megrendelői döntések Statikus vs. dinamikus (PHP,.NET, Java, stb.) oldal Adatbázis vs. fájl tárolás Ki tartja karban az oldalakat: megrendelő, készítő vagy rendszergazda, stb. Saját oldal (sablon) vs. keretrendszer vs. tartalomkezelő rendszer Tárhely-szükséglet tervezés Árajánlat

50 3. Tartalom és design 51 Marketing-terv készítése Arculat-terv, logótervek készítése Feladatok meghatározása Sablon készítése Döntés a design-ról

51 52 Presentation Model

52 53 Presentation Model - Mockup

53 54 Web-site tervezés - sablon

54 4. Fejlesztés 55 Anyagbeszerzés II. További oldalak elkészítése (sablon) Fejlesztés Szerver oldali kód Kliens oldali kód

55 5. Tesztelés, értékelés 56 Tesztelés Mérések értékelése Javítások, amennyiben szükségesek Üzembe helyezés Karbantartási terv Jótállás Karbantartás Support

56 6. Karbantartás 57 Javítások Üzemeltetési feladatok

57 58 Web alkalmazás tervezése

58 Modern Web Alkalmazások evolúciós modellje 59 Üzleti elvárások Követelmény analízis / Igényfelmérés Tervezés Megvalósítás, fejlesztés Tesztelés, értékelés Offline prototípus Üzembehelyezés Leállítás Üzemeltetés, karbantartás Online webalkalmazás

59 WebML Development Processes 60 Requirement analysis (use case, business process models) Application design (data model, hypertext model presentation, site structure) Data design Hypertext design Implementation (Database and Web application) Testing and evaluation (testing, measuring, code generation ) Deployment, maintenance and evolution (Conceptual model changes)

60 Specifikáció 61 4 jellemző leírási, jelölési módszer Forgatókönyv, szkenáriók leírása jellemzően mondatos, vagy egyszerű táblázatos leírás: megrendelők számára jól érthető Részletes, felsorolás-szerű leírás Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével, stb. Formális specifikáció: matematikai képletekkel leírt specifikáció a weben nem nagyon használt

61 Tervezési szempontok 62 követelmények összegyűjtése szerepkörök, használati esetek, folyamatok meghatározása oldalfunkciók adatokkal oldaltérkép (site struktúra) oldalvázlatok készítése adatbázis tervezése designtervek készítése

62 Példa: albumkezelő web-alkalmazás 63 Célunk egy olyan webalkalmazás készítése, amely lehetővé teszi fényképalbumok készítését, megtekintését, publikálását.

63 Követelmény-analízis 64 Pontosan milyen oldalak lesznek? Milyen adatok jelenjenek meg az oldalakon? Hogyan nézzenek ki ezek az oldalak? (sablon) Milyen összefüggésben vannak ezek az oldalak? (oldaltérkép) Hogyan azonosítom a felhasználókat, hogyan különböztetem meg, hogy kinek milyen albumai vannak? (azonosítás, autentikáció) Általában: milyen műveleteket és oldalakat érhetnek el az azonosítatlan és azonosított felhasználók? (szerepkörök, autorizálás) Mik az egyes oldalak adatigényei? (modell felépítése, körvonalazása) Milyen struktúrában, hogyan tároljuk az adatokat? (adatbázis) Milyen eszközök támogatottak? (asztali böngésző, mobil kliensek)

64 Szerepkörök 65 A felhasználókat csoportokba osztjuk. A csoportok határozzák meg az elérhető funkciókat, jogosultságokat. Felhasználói csoport leírása: Szerepkör neve: Leírás: Profil adatok: Super-group: Sub-group: Kapcsolódó usecase: Objektumok olvasási joggal Objektumok módosítási joggal RegisztráltUser Regisztrált felhasználó. Az alkalmazás teljes funkcionalitása csak ebbe a csoportba tartozó felhasználók számára érhető el. oid, username, password, User Nincs Login, Bemutató megtekintés, Keresés, Bemutató információk lekérése, Új bemutató, Kép feltöltés, Bemutató szerkesztése, Kép törlése, Bemutató törlése, Kedvencnek jelöl Bemutato, Kep Bemutato, Kep

65 Use case használati eset diagram 66

66 Activity diagram - 1. Használati eset, folyamat leírása

67 Használati eset táblázatos leírás Cím Cél Új bemutató készítése Új bemutató album készítése. Előfeltétel Csak regisztrált felhasználó (RegisztráltUser) tud új bemutatót készíteni. Utófeltétel A bemutató mentése sikeres. Folyamat leírása Az alábbi lépések végrehajtása szükséges: 1. Az alábbi adatokat kell a felhasználónak kötelezően megadnia egy új bemutató készítésekor: cím, leírás, szerzo (automatikus). 2. Opcionális adatok: nincs 3. Bemutató mentése

68 Activity diagram - 2. Használati eset, folyamat leírása, architektúrára hivatkozással. User Application Server Database Initial Request Send Form Input Credentials Accept Credentials Verify Credentials Select Home Page Elaborate Page Index of Home Pages Default Home Page List Serve Request Receive Home Page

69 70 Business Process Model (BPM)

70 Oldalak és funkciók tervezése 71 Főoldal Hivatkozás a bejelentkezésre és a regisztrálásra 10 legnépszerűbb bemutató listája Album adatai: indexkép, címe, leírása, hányszor tekintették meg Funkciók: egy bemutatóra kattintva betöltődik a bemutató Egy véletlenszerűen kiválasztott album vetítése Bemutató megtekintése Bemutató adatai...

71 Adatbázis tervezés 1. Cél meghatározás, a feladat: Meghatározzuk a tárolandó adatok körét, az adatbázis használatának módját, az elvégzendő részfeladatokat. 2. Logikai (koncepcionális) adatmodell készítése 3. Fizikai adatmodell készítése 4. Táblák meghatározása: Az összegyűjtött információkat témakörökre, táblákra bontjuk (normalizálás). Kerülni kell a többszörös adatbevitelt, de minden szükséges adatot tárolni kell. 5. A táblák mezőinek meghatározása, funkcionális függőségek megállapítása 6. Kapcsolatok felállítása a táblák között 7. Teszt változat elkészítése, a terv finomítása 8. Üzembehelyezés 9. Karbantartás

72 73 Adatmodell

73 74 Adatmodell

74 75 Site structure hypertext model

75 76 Presentation: Mock-up

76 77 Design, ebből a sablon

77 Irodalom 78 Gerti Kappel, Birgit Pröll, Siegfried Reich, Werner Retschitzgger: Web Engineering, John Wiley &Sons, Sven Casteleyn, Florian Daniel, Peter Dolog, Maristella Matera: Engineering Web Applications, Springer, 2009 Horváth Győző, Tarcsi Ádám, Menyhárt László: Többrétegű webes alkalmazások fejlesztése, ELTE, 2012 Dr. Johanyák Zsolt Csaba: Szoftvertechnológia előadás, KF, 2010