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
Guttmann Krisztián

2 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

3 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

4 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() {} });

5 Osztálydiagram

6 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) { } });

7 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)

8 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=

9 WebSocket támogatottság

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

11 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)

12 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°

13 Web Szenzor hardver PIC18F2685 ENC28J60 (PHY, MAC)

14 Web Szenzor hardver

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

16 Web Szenzor szoftver

17 Köszönettel Guttmann Krisztián