Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

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

Hasonló előadás


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

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

2  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 Futtató környezet tervezése

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  WebSocket API (RFC szabvány)  Korszerű böngészők támogatják Szerver oldal  Saját webszerver  Python HTTP Szerver  (Korábban Chunked Response)

8 WebSocket implementáció Kérés  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== Válasz  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  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) Elosztott architektúra (Mesh-up)

12  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  new (Application.extend({ init: function() { /* konstruktor */ this.base(); }, toggleLED0: function() { /* XMLHTTPRequest háttérben */ /* */ } }))();http://server.com?led0=ON Web Szenzor szoftver

16

17 Köszönettel Guttmann Krisztián


Letölteni ppt "HTML5 alapú fejlesztő és futtató környezet megvalósítása Guttmann Krisztián."

Hasonló előadás


Google Hirdetések