HTML5 alapú fejlesztő és futtató környezet megvalósítása

Az előadások a következő témára: "HTML5 alapú fejlesztő és futtató környezet megvalósítása"— Előadás másolata:

1 HTML5 alapú fejlesztő és futtató környezet megvalósítása
Óbudai Egyetem Neumann János Informatikai Kar Informatikai Rendszerek Intézet HTML5 alapú fejlesztő és futtató környezet megvalósítása Hallgató neve: Guttmann Krisztián Törzskönyvi száma: NIK-O-EI Intézményi konzulens: Dr. Schubert Tamás

2 Probléma felvetése OOP alapú webes fejlesztőkörnyezet hiánya
Fix, eseményvezérelt kommunikáció hiánya a böngésző és a szerverek között Kliensek (böngészők) terhelésének hiánya (szerverek tehermentesítése) Böngészőkre írt összetett alkalmazások nem jellemzőek (célalkalmazások, célhardverek)

3 Futtató környezet tervezése
OOP alapú HTML5 alkalmazás fejlesztés Alapvető vezérlők megvalósítása, átlátható osztálydiagramm Fix eseményvezérelt kapcsolat a web szerver és a böngésző között Elosztott arhitektúrájú kliens (Mesh-up) Rendszer demonstrációja Web Szenzor hardver illetve szoftver segítségével

4 OOP alapú HTML5 web alkalmazás
Osztály fogalmának bevezetése nyelvbe a JavaScript prototype property tulajdonságának segítségével extend függvény megvalósítása

5 OOP alapú HTML5 web alkalmazás
function A() {} function B() {} B.prototype = new A; X = new B; var MyClass = Class.extend({ init: function() { }, prop1: 10, method1: function() {} });

6 Osztálydiagram

7 Folyamatjelző vezérlő
3 db HTML DIV Elem CSS3 stíluslap JavaScript kód var Progressbar = Div.extend({ init: function(p) { }, value: { get: function() { }, set: function(value) { } });

8 Fix, eseményvezérelt, kétirányú kommunikáció
Kliens oldal Szerver oldal WebSocket API (RFC szabvány) Korszerű böngészők támogatják Saját webszerver Python HTTP Szerver (Korábban Chunked Response)

9 WebSocket implementáció
Kérés Válasz GET /ws HTTP/1.1 Host: pmx Upgrade: websocket Connection: Upgrade Sec-WebSocket-Version: 6 Sec-WebSocket-Origin: Sec-WebSocket-Extensions: deflate-stream Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw== HTTP/ Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=

10 WebSocket támogatottság

11 Elosztott architektúra (Mesh-up)
Honlap egy forrásból Webalkalmazás több forrásból

12 Elosztott architektúra (Mesh-up)
A kívánt elosztott architektúrát a Same Origin Policy szabály ellehetetlenítené. (Ajax kérések, WebSocket felépítés) Megoldás: CORS (Cross-Origin Resource Sharing) Pl.: Access-Control-Allow-Origin: * (bármely domainről érkező kérés elfogadása)

13 Elosztott architektúra (Mesh-up)
HTTP/ OK Date: Sat, 24 Mar :49:31 GMT Content-type: text/plain Access-Control-Allow-Origin : * Pragma: no-cache Connection: Keep-Alive Content-Length: 5 25 C°

14 Web Szenzor hardver PIC18F2685 ENC28J60 (PHY, MAC)

15 Web Szenzor hardver

16 Web Szenzor szoftver new (Application.extend({ init: function() { /* konstruktor */ this.base(); }, toggleLED0: function() { /* XMLHTTPRequest háttérben */ /* */ } }))();

17 Web Szenzor szoftver

18 Köszönöm a figyelmet