webové aplikace - mendelulysek/data/wa/prezentace10.pdf · –angular 2 + native script nebo react...
TRANSCRIPT
![Page 1: Webové aplikace - MENDELUlysek/data/wa/prezentace10.pdf · –Angular 2 + Native Script nebo React Native •Místo HTML se používají jiné/XML značky pro vytvoření nativního](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec56f96c82f0c182427b0f5/html5/thumbnails/1.jpg)
Webové aplikace
Komunikace server-server, další JS frameworky,
Hybridní aplikace, jiné využití JS, HTML5 a nová API
Připravil: Ing. Jiří Lýsek, Ph.D.
Verze: 30. 4. 2019
![Page 2: Webové aplikace - MENDELUlysek/data/wa/prezentace10.pdf · –Angular 2 + Native Script nebo React Native •Místo HTML se používají jiné/XML značky pro vytvoření nativního](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec56f96c82f0c182427b0f5/html5/thumbnails/2.jpg)
Komunikace obencě
• Komunikace server-server - často se
využívá v e-commerce
– platební brány
– splátkové společnosti
– analytika
– mapové API (geolokace)
– …
strana 2
![Page 3: Webové aplikace - MENDELUlysek/data/wa/prezentace10.pdf · –Angular 2 + Native Script nebo React Native •Místo HTML se používají jiné/XML značky pro vytvoření nativního](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec56f96c82f0c182427b0f5/html5/thumbnails/3.jpg)
Protokoly
• REST
– Stejný princip jako pro klient-server u
SPA/mobilních aplikací
• Přímé volání URL
– REST bez pravidel
• XML-RPC
• SOAP
strana 3
![Page 4: Webové aplikace - MENDELUlysek/data/wa/prezentace10.pdf · –Angular 2 + Native Script nebo React Native •Místo HTML se používají jiné/XML značky pro vytvoření nativního](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec56f96c82f0c182427b0f5/html5/thumbnails/4.jpg)
Otevření souboru
• PHP funkce fopen(),
file_get_contents() apod. umí otvírat i
vzdálené soubory
– někdy je zakázáno
• POZOR! neplést s include "http://..."
– vložení a spuštění jako PHP!!!
• cizí kód se spustí na vašem serveru!!!
– nebezpečné a zakázané
strana 4
Tohle je důvod, proč nedělat
index.php?inc=file.php a
include($_GET['inc']);
![Page 5: Webové aplikace - MENDELUlysek/data/wa/prezentace10.pdf · –Angular 2 + Native Script nebo React Native •Místo HTML se používají jiné/XML značky pro vytvoření nativního](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec56f96c82f0c182427b0f5/html5/thumbnails/5.jpg)
cURL
• Knihovna pro síťovou komunikaci s
danou URL
– může realizovat GET, POST …
– je to PHP plugin
• ne vždy je k dispozici
strana 5
Když to jde, povolit v
php.ini
![Page 6: Webové aplikace - MENDELUlysek/data/wa/prezentace10.pdf · –Angular 2 + Native Script nebo React Native •Místo HTML se používají jiné/XML značky pro vytvoření nativního](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec56f96c82f0c182427b0f5/html5/thumbnails/6.jpg)
XML-RPC
• Založeno na XML, daná syntaxe
• Knihovna, ale dá se realizovat i na
základě generování XML souborů
– je to PHP plugin
• ne vždy je k dispozici
strana 6
![Page 7: Webové aplikace - MENDELUlysek/data/wa/prezentace10.pdf · –Angular 2 + Native Script nebo React Native •Místo HTML se používají jiné/XML značky pro vytvoření nativního](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec56f96c82f0c182427b0f5/html5/thumbnails/7.jpg)
XML-RPC příklad - server
function randomNumber($name, array $params) {
return rand(0, $params[0]);
}
$request = file_get_contents("php://input", false);
$server = xmlrpc_server_create();
xmlrpc_server_register_method($server, "getRand",
"randomNumber");
$response = xmlrpc_server_call_method($server, $request,
null);
xmlrpc_server_destroy($server);
header("Content-Type: text/xml");
echo $response;
strana 7
Načtení HTTP
těla bez
frameworku
![Page 8: Webové aplikace - MENDELUlysek/data/wa/prezentace10.pdf · –Angular 2 + Native Script nebo React Native •Místo HTML se používají jiné/XML značky pro vytvoření nativního](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec56f96c82f0c182427b0f5/html5/thumbnails/8.jpg)
XML-RPC příklad - klient
$url = "…";
$request = xmlrpc_encode_request("getRand", [100]);
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $request);
$data = curl_exec($ch);
curl_close($ch);
$response = xmlrpc_decode($data);
header("Content-type: text/plain");
echo $response;
strana 8
Parametr
![Page 9: Webové aplikace - MENDELUlysek/data/wa/prezentace10.pdf · –Angular 2 + Native Script nebo React Native •Místo HTML se používají jiné/XML značky pro vytvoření nativního](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec56f96c82f0c182427b0f5/html5/thumbnails/9.jpg)
XML-RPC request
<?xml version="1.0" encoding="iso-8859-1"?>
<methodCall>
<methodName>getRand</methodName>
<params>
<param>
<value>
<int>100</int>
</value>
</param>
</params>
</methodCall>
strana 9
Parametr
Metoda
![Page 10: Webové aplikace - MENDELUlysek/data/wa/prezentace10.pdf · –Angular 2 + Native Script nebo React Native •Místo HTML se používají jiné/XML značky pro vytvoření nativního](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec56f96c82f0c182427b0f5/html5/thumbnails/10.jpg)
XML-RPC response
<?xml version="1.0" encoding="iso-8859-1"?>
<methodResponse>
<params>
<param>
<value>
<int>24</int>
</value>
</param>
</params>
</methodResponse>
strana 10
Výstup
![Page 11: Webové aplikace - MENDELUlysek/data/wa/prezentace10.pdf · –Angular 2 + Native Script nebo React Native •Místo HTML se používají jiné/XML značky pro vytvoření nativního](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec56f96c82f0c182427b0f5/html5/thumbnails/11.jpg)
SOAP
• Také založeno na XML, ale
robustnější
• Služba je popsána WSDL, které je
uloženo v registru služeb
– nepovinné
• Knihovna v PHP nabízí třídu
SoapClient a SoapServer
– je to PHP plugin
• ne vždy je k dispozici
strana 11
![Page 12: Webové aplikace - MENDELUlysek/data/wa/prezentace10.pdf · –Angular 2 + Native Script nebo React Native •Místo HTML se používají jiné/XML značky pro vytvoření nativního](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec56f96c82f0c182427b0f5/html5/thumbnails/12.jpg)
SOAP
strana 12
![Page 13: Webové aplikace - MENDELUlysek/data/wa/prezentace10.pdf · –Angular 2 + Native Script nebo React Native •Místo HTML se používají jiné/XML značky pro vytvoření nativního](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec56f96c82f0c182427b0f5/html5/thumbnails/13.jpg)
SOAP příklad - server
class NumberGenerator {
function generate($max) {
return rand(-$max, $max);
}
function generatePositive($max) {
return rand(0, $max);
}
}
$server = new SoapServer(null,
array("uri" => "generator"));
$server->setClass('NumberGenerator');
$server->handle();
strana 13
![Page 14: Webové aplikace - MENDELUlysek/data/wa/prezentace10.pdf · –Angular 2 + Native Script nebo React Native •Místo HTML se používají jiné/XML značky pro vytvoření nativního](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec56f96c82f0c182427b0f5/html5/thumbnails/14.jpg)
SOAP příklad - klient
$url = "…";
$client = new SoapClient(null, [
'location' => $url,
'uri' => 'generator',
'trace' => 1
]);
echo $client->generate(100);
echo "<br />";
echo $client->generatePositive(50);
strana 14
![Page 15: Webové aplikace - MENDELUlysek/data/wa/prezentace10.pdf · –Angular 2 + Native Script nebo React Native •Místo HTML se používají jiné/XML značky pro vytvoření nativního](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec56f96c82f0c182427b0f5/html5/thumbnails/15.jpg)
Další JS frameworky (mimo Vue)
• React + Flux/Redux
• Angular (historicky AngularJS)
• Backbone
• Knockout
• Ember
• Open UI 5 (SAP UI)
strana 15
![Page 16: Webové aplikace - MENDELUlysek/data/wa/prezentace10.pdf · –Angular 2 + Native Script nebo React Native •Místo HTML se používají jiné/XML značky pro vytvoření nativního](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec56f96c82f0c182427b0f5/html5/thumbnails/16.jpg)
Hybridní aplikace
• jeden kód pro mobilní zařízení i web
– alespoň jeho větší část
• 2 cesty
– obalení webové aplikace do nativního
balíku, simulace UI
– zpřístupnění API zařízení do JS, nativní
UI
• používá známé a dostupné
technologie
strana 16
![Page 17: Webové aplikace - MENDELUlysek/data/wa/prezentace10.pdf · –Angular 2 + Native Script nebo React Native •Místo HTML se používají jiné/XML značky pro vytvoření nativního](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec56f96c82f0c182427b0f5/html5/thumbnails/17.jpg)
strana 17
![Page 18: Webové aplikace - MENDELUlysek/data/wa/prezentace10.pdf · –Angular 2 + Native Script nebo React Native •Místo HTML se používají jiné/XML značky pro vytvoření nativního](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec56f96c82f0c182427b0f5/html5/thumbnails/18.jpg)
strana 18
![Page 19: Webové aplikace - MENDELUlysek/data/wa/prezentace10.pdf · –Angular 2 + Native Script nebo React Native •Místo HTML se používají jiné/XML značky pro vytvoření nativního](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec56f96c82f0c182427b0f5/html5/thumbnails/19.jpg)
Hybridní aplikace - cesta 1.
• Obalení webové aplikace
– spustí se v upraveném prohlížeči na
zařízení
– volnější přístup, více "webové"
• statické soubory umístěny v zařízení (práce s
API)
• aplikace umístěná na webu
– Apache Cordova/PhoneGap
– nemá plný přístup k zařízení
strana 19
![Page 20: Webové aplikace - MENDELUlysek/data/wa/prezentace10.pdf · –Angular 2 + Native Script nebo React Native •Místo HTML se používají jiné/XML značky pro vytvoření nativního](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec56f96c82f0c182427b0f5/html5/thumbnails/20.jpg)
Hybridní aplikace - cesta 1.
• Obalení webové aplikace
– Existují JS+CSS systémy simulující grafiku
a chování nativních GUI
• Stále používáme HTML, CSS a JS
– Material design -> Angular Material
– Angular + Ionic framework
strana 20
Něco jako
Bootstrap
![Page 21: Webové aplikace - MENDELUlysek/data/wa/prezentace10.pdf · –Angular 2 + Native Script nebo React Native •Místo HTML se používají jiné/XML značky pro vytvoření nativního](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec56f96c82f0c182427b0f5/html5/thumbnails/21.jpg)
Hybridní aplikace - cesta 2.
• Nativní aplikace napsaná pomocí JS
– Práce s nativním API přes JS
– Angular 2 + Native Script nebo React
Native
• Místo HTML se používají jiné/XML značky
pro vytvoření nativního UI
• CSS jen částečně
strana 21
![Page 22: Webové aplikace - MENDELUlysek/data/wa/prezentace10.pdf · –Angular 2 + Native Script nebo React Native •Místo HTML se používají jiné/XML značky pro vytvoření nativního](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec56f96c82f0c182427b0f5/html5/thumbnails/22.jpg)
Vue
• NativeScript Vue
– https://nativescript-vue.org
– Aplikace "Playground"
• Vuetify
– https://vuetifyjs.com
– Simulace Material design
strana 22
![Page 23: Webové aplikace - MENDELUlysek/data/wa/prezentace10.pdf · –Angular 2 + Native Script nebo React Native •Místo HTML se používají jiné/XML značky pro vytvoření nativního](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec56f96c82f0c182427b0f5/html5/thumbnails/23.jpg)
PWA – Progressive web apps
• Kombinace webové aplikace a mobilní
aplikace
– Vlastnosti
• Nezávislost na konektivitě
– Offline chování pomocí tzv. "service workerů"
– Lokální úložiště
• App like
– Instalace, ikona, push notifikace...
– Manifest soubor
strana 23
![Page 24: Webové aplikace - MENDELUlysek/data/wa/prezentace10.pdf · –Angular 2 + Native Script nebo React Native •Místo HTML se používají jiné/XML značky pro vytvoření nativního](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec56f96c82f0c182427b0f5/html5/thumbnails/24.jpg)
Node JS
• Obecný JavaScript interpret
– https://nodejs.org/
– Často jako backend nebo pro příkazovou
řádku
– V8 engine (z Chrome)
– NPM a https://npmjs.org
strana 24
![Page 25: Webové aplikace - MENDELUlysek/data/wa/prezentace10.pdf · –Angular 2 + Native Script nebo React Native •Místo HTML se používají jiné/XML značky pro vytvoření nativního](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec56f96c82f0c182427b0f5/html5/thumbnails/25.jpg)
Node JS
• Frameworky pro backend
– http://nodeframework.com/
• Příklady
– Express
• Minimalistický, podobný Slimu
– Adonis
• Podobný Laravelu
strana 25
![Page 26: Webové aplikace - MENDELUlysek/data/wa/prezentace10.pdf · –Angular 2 + Native Script nebo React Native •Místo HTML se používají jiné/XML značky pro vytvoření nativního](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec56f96c82f0c182427b0f5/html5/thumbnails/26.jpg)
Realtime komunikace
• Websocket
– V PHP z podstaty nelze realizovat
• Knihovny pro Node JS
– Socket.io
• https://socket.io/
• Dostupná implementace i pro Android
– Firebase messaging
• Protože Android zařízení jiné sockety na
pozadí ukončí...
strana 26
![Page 27: Webové aplikace - MENDELUlysek/data/wa/prezentace10.pdf · –Angular 2 + Native Script nebo React Native •Místo HTML se používají jiné/XML značky pro vytvoření nativního](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec56f96c82f0c182427b0f5/html5/thumbnails/27.jpg)
JavaScript v mikrokontrolérech
• Interpret JavaScriptu v integrovaném
obvodu
– Espruino
• Samostatný hardware
• NodeMCU - firmware
– Tessel
strana 27
![Page 28: Webové aplikace - MENDELUlysek/data/wa/prezentace10.pdf · –Angular 2 + Native Script nebo React Native •Místo HTML se používají jiné/XML značky pro vytvoření nativního](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec56f96c82f0c182427b0f5/html5/thumbnails/28.jpg)
HTML5 a nová API
• nové prvky a atributy
– hlavně formuláře a sémantické značky
• history API, file API, canvas, WebGL,
audio, video, WebSocket, LocalStorage,
WebWorkers…
– stále nové rozšíření
– poměrně nízko-úrovňové
• někdy nutné používat knihovny/frameworky
strana 28
![Page 29: Webové aplikace - MENDELUlysek/data/wa/prezentace10.pdf · –Angular 2 + Native Script nebo React Native •Místo HTML se používají jiné/XML značky pro vytvoření nativního](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec56f96c82f0c182427b0f5/html5/thumbnails/29.jpg)
Checkpoint
• Je lepší XML-RPC, SOAP nebo
REST?
• Lze pomocí PHP fce include načíst
soubor ze vzdáleného serveru?
• Co má hybridní aplikace společné s
webovou aplikací?
strana 29
![Page 30: Webové aplikace - MENDELUlysek/data/wa/prezentace10.pdf · –Angular 2 + Native Script nebo React Native •Místo HTML se používají jiné/XML značky pro vytvoření nativního](https://reader034.vdocuments.mx/reader034/viewer/2022042219/5ec56f96c82f0c182427b0f5/html5/thumbnails/30.jpg)
Ukončení předmětu
• Zkouška
– Teoretická (bez internetu) + praktická
část (s internetem)
• Projekt
– Splněné zadání z prvního odstavce!
• Známka
– 50% projekt
– 50% zkouška
– Minimálně polovinu bodů z každého
strana 30