WEBES ALKALMAZSOK TERVEZSE ADATBZISOK A WEBEN Tarcsi dm
WEBES ALKALMAZÁSOK TERVEZÉSE (ADATBÁZISOK A WEBEN) Tarcsi Ádám, Horváth Győző
2 Témafelvetés
Témafelvetés � Miért olyan fontos az Internetes gazdaság manapság? � Mi is a web? � Hogyan tervezzek egy web alkalmazást? � Egyáltalán miért fontos egy módszertant követni? � Webes Startup-ok � Honnan tudhatom, hogy az ötletem jó-e? � Internet of Things � Big Data
Bevezetés, témakörök 4 Web szerepe, jelentősége Webes alkalmazások fejlesztésének módszertana � Lean � Design Thinking � Validálási módszerek Modern web alkalmazások Web stratégia Adatvezérelt web-alkalmazások, Big Data
Internet felhasználók száma, 2014 Régió Populáció (2014) Internet használók száma (2000. dec. 31. ) (2014. jún. 30) Penetráció Növekedés 2000 -2014 % Afrika 1, 125, 721, 038 4, 514, 400 297, 885, 898 26. 5 % 6, 498. 6 % 9. 8 % Ázsia 3, 996, 408, 007 114, 304, 000 1, 386, 188, 112 34. 7 % 1, 112. 7 % 45. 7 % Európa 825, 824, 883 105, 096, 093 582, 441, 059 70. 5 % 454. 2 % 19. 2 % Közel-Kelet 231, 588, 580 3, 284, 800 111, 809, 510 48. 3 % 3, 303. 8 % 3. 7 % Észak-Amerika 353, 860, 227 108, 096, 800 310, 322, 257 87. 7 % 187. 1 % 10. 2 % Közép- és Dél-Amerika 612, 279, 181 18, 068, 919 320, 312, 562 52. 3 % 1, 672. 7 % 10. 5 % Ausztrália és Óceánia 36, 724, 649 7, 620, 480 26, 789, 942 72. 9 % 251. 6 % 0. 9 % 7, 182, 406, 565 360, 985, 492 3, 035, 749, 340 42. 3 % 741. 0 % 100. 0 % Világ Forrás: http: //www. internetworldstats. com
Internetes gazdaság részesedése a GDP-ből, G 20 országokban, 2010 7
Networked Readiness Index, 2013 8
Trendek - Internet of Things, okos eszközök, szenzorok - 2014 -ben 3. 800 milliárd dollárt költünk IT-eszközökre (Gartner) - Cloud computing - Kontextus alapú alkalmazások + Augmented Reality + mesterséges intelligencia - Mobilitás - Üzleti social networking alkalmazások - Real time + In-memory computing + nagy mennyiségű adatok feldolgozása + web mining (évente 3 terabájtnyi adatot gyártunk fejenként) - Biztonság - 3 D nyomtatás - Okos gépek
Gartner TOP 10 IT trends 10
Gartner Hype Cycle 11
Internet of things Forrás: http: //www. bitport. hu/megoldasok/joevokep-mi-az-a-dolgok-internete-infografika
Internet Of Things 13
Szenzorok 14
Big data statisztikák 571 új weboldal keletkezik naponta minden egyes percben A 247 milliárd naponta elküldött e-mail 80%-a spam A Walmart havonta 45 millió online vásárló kattintási adatait elemezi azért hogy személyre szabott ajánlatokkal lássa el a látogatókat mellyel közel 15%-al növelték a sikeres vásárlási tranzakciók számát, 1 826 petabyte (1 826 000 terabyte) az az adatmennyiség melyet az internet naponta "megmozgat", Évente 3, 6 terrabájt adatot állítunk elő évente 2015 -re a Gartner előrejelzése szerint, A Cisco számításai szerint 2015 -re várhatóan megnégyszereződik a világ teljes internetforgalma és így eléri az éves 966 exabájtot, A 2014 -2015 közötti időszakban önmagában is 200 exabájtos növekedés várható ez több mint a 2010 -ben világszerte generált összes internet-forgalom, Egy exabájt adatmennyiség körülbelül 19 milliárd DVD-lemeznek felel meg és 75 -szöröse a 2000 -ben generált teljes - vezetékes és mobil - internetes adatforgalomnak,
Big Data statisztikák - Google A Google szerverei évente 1, 8 billió (1000 milliárd) keresést dolgoztak fel 2012 -ben (22 milliót 2000 -ben) 5, 1 milliárdot naponta Kétnaponta annyi információ keletkezik mint amennyi a civilizáció kezdete óta 2003 ig (Eric Schmidt, Google) A Youtube-ra percenként 100 órányi videót töltünk fel (egy éve ez még 72, még egy évvel korábban pedig még "csak" 48 óra volt)
Big Data - Facebook 699 millió a Facebookot naponta használók száma (2013 június) Egy átlagos napon 4, 5 milliárd lájk keletkezik Naponta 350 millió képet töltünk fel a Facebookra
Milyen gyors az Internet?
Milyen gyors az Internet? A twittet 22 perc alatt 226. 000 Twitter felhasználó osztotta tovább. A bejelentés percében 327. 452 üzenetet osztottak meg a felhasználók a Twitteren.
A legkedveltebb Facebook fotó Közel 4 millió felhasználó lájkolta a képet egy nap alatt!
Láthatatlan web az ún. Deep web
Közösségi média 22
23 http: //www. pinterest. com/pin/112097478197315059/
24 Webes architektúrák Történeti áttekintés
"Hagyományos" web-es architektúra Back End Kliens: Web böngésző Prezentációs Logikai Layer Adatbázis szerver Load Balancer Internet Kliens: Mobil böngésző / mobil kliens RDBMS Web szerver Viselkedés Java. Script Megjelnítés CSS Middleware Tartalom HTML / XML Front End Prezentációs szerver Alkalmazás szerver Web szerver Prezentációs szerver Alkalmazás szerver Adatbázis szerver XML DBMS Nagy kapacitású, összetett számításokat végző szerver
A kliens oldal Tartalom index. html Megjelenítés style. css Viselkedés jsframework. js custom. js
27 Web Engineering
Mi a Webtechnológia (Web Engineering)? 28 A szoftvertechnológia kiterjesztése webes alkalmazásokra. Több, mint csupán HTML és Java. Script 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.
Web Engineering kulcsterületei Szoftvertechnológia • Követelmény elemzés • Tervezés • Fejlesztés • Tesztelés • Működtetés • Karbantartás Számítógépes hálózatok • ISO/OSI rétegei • Hatékonyság • Biztonság Hypermedia Web Engineering © 1997 -2005 Dr. Martin Gaedke Egyebek. . . • Információs struktúra leírása • Navigáció • Vizualizáció • Használhatóság • Ergonómia • Eggyüttműködés Információs rendszerek • Adatmodellezés • RDBMS, XML, No. SQL • Lekérdező nyelvek • Üzleti folyamatok
Web-site vs. Web-alkalmazás Web-site Web-alkalmazás Statikus / dinamikus Statikus vagy statikus-szerű Dinamikus Adatbázis Nem szükséges / nem tipikus / "egyszerű" Jellemző Hagyományos (asztali) Nem implementálható alkalmazás asztali alkalmazásként Rendelkezik asztali alkalmazásokhoz hasonló funkcionalitásokkal Authorizáció Jellemző Nem jellemző Bookmarking / search Tipikus, jellemző engine Nem működik. Keresőmotorok számára irreleváns, feldolgozhatatlan Szerver-oldali logika Nem jellemző Mindig Kliens-oldali logika Nem jellemző, de előfordulhat Jellemzően Példa Híroldalak, (Wikipedia) Google Docs
Keretrendszer vs. Tartalomkezelő (CMS) Web-es fejlesztés célja Programozói készségek, érettségi szint az adott környezetben Tisztán tartalom megosztás Tartalommegosztás kevés fejlesztéssel Szofisztikált funkciók, a tartalmi szempontok nem fontosak Kezdő CMS, de Projekt nem fejlesztés nem ajánlott Haladó CMS / Framework Profi CMS / Framework
40 Webes alkalmazások tervezése
Tervezés 41
A web-alkalmazások építőkövei 42 Tartalom � HTML dokumentumok, � Multimédia állományok Navigációs struktúra (Hypertext) Felhasználói interfész
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
Szükséges ismeretek 44 Hálózati, szerver és kliens oldali megoldások (TCP/IP és HTTP protokoll és működése) WEB-es prezentációs megoldások (HTML nyelv, CSS), web-grafika WEB szerverek, böngészők, kliens oldali WEB programozás alapjai (pl. Java. Script) Adatbázis-kezelés (a relációs modell, adatmodellezés, SQL) Rendszerek közti adatkommunikáció „önleíró” dokumentum nyelven = XML (XML felépítése, használata, kapcsolódó technológiák érintőlegesen: DTD, XSL ill. XSLT) XML alapú adatbázisok (XML adattárolás alapjai, lekérdező nyelvek: XPath, XQuery) Multimédiás adatbázisok (nagy méretű multimédiás anyagok tárolása adatbázisokban, visszakeresés, hatékonyság) Programozási módszertan WEB programozás (módszerek, beágyazott script-nyelvek, PHP, . NET (ASP. NET), Java Web) Vállalati környezetre tervezett webes fejlesztői környezetek (pl. : . Net, Java EE) Multimédiás WEB programozás – bináris tartalmak (stream-ek, header, letöltés, feltöltés) Multimédiás WEB programozás – vektorgrafikus és programozott tartalmak (SVG, Flash) Informatikai biztonság (adatvédelem, kommunikációs vonalak védelme, védelem
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
Feladatkörök 46 Megrendelő � felhasználó Szervezői, tervezői feladatok: rendszervezé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
47 Web Engineering
Módszerek és a lépések… Agilis Vízesés
Vízesés-model
Waterfall vs. Agile
SCRUM
Extreme Programming
Lean Startup model Minimum Viable Product
Lean Model – v 2
A Webes alkalmazás-fejlesztés folyamata
Lean Startup és Design Thinking
Design Thinking Definition – Mi a probléma? Research – Saját elvárások? Mik lehetnek mások elvárásai? Hogyan oldják meg? Mik okoznak nehézséget? Mik a kielégítetlen igények? (Érzések, benyomások, elvárások gyűjtése, listázása szintentizálás) Ideation – Fogalmazzunk meg egy lehetséges megoldást. (Clusterezzük a listát, majd definiálunk egy ideális usert - POV) Prototyping – Készítsünk néhány prototípust! Testing Implementing
Tech Startup vs. Lean Startup vs. Design Thinking model 65
Lean Startup model Minimum Viable Product
Lean Startup Model
Lean Design Thinking
Persona http: //www. thorvaldursveinn. com/wp-
User stories, Job Stories 73
User Story map 74
Lean Canvas 75
Lean Canvas 76
Szkenáriók, (user) Roles 77 The users are divided into groups (by roles). Groups are defined by the available functions and permissions. Description of a User group : Name of the Role Registered. User Description: Registered user. The full functionality of the application is only available for users in this group. Profile data: oid, user. Name, password, email Super-group: User Sub-group: - Related usecases: Login, Album show, Search, New Album, Uploade Image, Create a Slideshow, Delete Album, Log out Objects – Read permission Album, Picture Objects – Update permission Album, Picture
Use case diagram 78
Use Case – példa – táblázatos verzió Title New album Goal Create new album Prerequisite User should be registered and logged in Postconditio Album created successfully n Proccess 1. Obligatory data from user: title, description, author (automatic). 2. Optional data: 3. Create album (database)
4. Planning, Design Planning of the user flow, design, database, code, content, SEO strategy etc. Architecture Plan, Navigation Plan, Site Structure, Process Flow Business Process Model, Activity Diagram, Data Model, Design Plans, Template, Wireframe, Mockup, Prototype Marketing plan,
Architectúra terv
Site Structure, Navigációs terv
Process Flow
Business Process Model
Activity diagram
Adatmodell
Sketch, Mockup, Wireframe, Prototype
Design terv Design elemek: Logo, Fontok, Színek, … Style Guides Arculati terv
Design Template
5. Fejlesztés: � Adatbázis � Szerver- és kliens oldal Design: � Struktúra: HTML, � Design: CSS Tartalom Technikai tesztelés
6. Beta Launch Tesztelésre, validálásra Offline prototípus
7. Mérés, tesztelés, validálás Tesztelési módszerek, tesztelési terv Validálás: piac, célközönség Visszajelzések elemzése
8. Indítás Online alkalmazás
9. Karbantartás és üzemeltetés Karbantartási terv Support
95 Webes vállalkozás indítása
Ötlettől a vállalatig 96 Ötlet Koncepció Kutatás, fejleszté s Prototípu s Termékesíté s Piacravitel Növekedés
Innováció 97 Az innováció definíciója az Oslo kézikönyv 2005. végi 3. kiadása alapján: Az innováció új, vagy jelentősen javított termék (áru vagy szolgáltatás) vagy eljárás, új marketing-módszer, vagy új szervezési-szervezeti módszer bevezetése az üzleti gyakorlatban, munkahelyi szervezetben, vagy a külső kapcsolatokban Zseniális ötletek és egyszerű ötletek. Az első ötlet szerepe. - Nagyon sokszor nem ez lesz majd a végén a nyerő. � Kill your darling, "minden 10. jön be"…
Alapfogalmak 98 Startup: jelentős növekedési potenciállal, a skálázható üzleti modellel rendelkező, tudásintenzív vállalkozás.
Számonkérés 99 Összetett webalkalmazás folyamatos fejlesztése az ismertetett módszertant követve .
- Slides: 80