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 Hallgató neve:Guttmann Krisztián Törzskönyvi száma:NIK-O-EI-06-028 Intézményi konzulens:Dr. Schubert.

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 Hallgató neve:Guttmann Krisztián Törzskönyvi száma:NIK-O-EI-06-028 Intézményi konzulens:Dr. Schubert."— Előadás másolata:

1 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 Óbudai Egyetem Neumann János Informatikai Kar Informatikai Rendszerek Intézet

2  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) Probléma felvetése

3  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

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

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

10 WebSocket támogatottság

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

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

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

17

18 Köszönöm a figyelmet


Letölteni ppt "HTML5 alapú fejlesztő és futtató környezet megvalósítása Hallgató neve:Guttmann Krisztián Törzskönyvi száma:NIK-O-EI-06-028 Intézményi konzulens:Dr. Schubert."

Hasonló előadás


Google Hirdetések