ewd 3 training course part 5b: first steps in building a qewd application
TRANSCRIPT
Copyright © 2016 M/Gateway Developments Ltd
EWD 3 Training CoursePart 5 (b)
Building a QEWD ApplicationFirst Steps
(Using Linux or Raspberry Pi)
Rob TweedDirector, M/Gateway Developments Ltd
Twitter: @rtweed
Copyright © 2016 M/Gateway Developments Ltd
Pre-requisites• Node.js installed• Database & Node.js interface installed and
running:– Caché & cache.node– GT.M & NodeM– Redis & ewd-redis-globals
• QEWD installed and running• At least a basic text editor available• These steps are covered in Part 4 of this course
Copyright © 2016 M/Gateway Developments Ltd
Assumptions in this tutorial• Linux & Caché, GT.M or Redis• QEWD installed in ~/qewd
– eg /home/ubuntu/qewd• Default HTTP configuration for Express
– ie not SSL / HTTPS• ewd-xpress port = 8080 • IP address of QEWD machine:
– 192.168.1.100• Change paths etc accordingly for your set-up
Copyright © 2016 M/Gateway Developments Ltd
Let’s Get Started…
Copyright © 2016 M/Gateway Developments Ltd
Create new application
• Create new directory:– ~/qewd/www/demo1
• Create index.html file– ~/qewd/www/demo1/index.html
<html> <head><title>Demo QEWD application</title>
</head> <body> This is a demo!
</body> </html>
Copyright © 2016 M/Gateway Developments Ltd
Try loading in browser• http://192.168.1.100:8080/demo1/index.html
• Should display:
• If so, QEWD successfully fetched your index.html file from ~/qewd/demo1/index.html– How did it know to do that?
This is a demo!
Copyright © 2016 M/Gateway Developments Ltd
Web Server Root Path
• Look in:– ~/qewd/node_modules/qewd/lib/master.js
• Around line 95:var config = {
managementPassword: params.managementPassword || 'keepThisSecret',serverName: params.serverName || 'ewd-xpress',port: params.port || 8080,poolSize: params.poolSize || 1,webServerRootPath: params.webServerRootPath || process.cwd() + '/www/',no_sockets: params.no_sockets || false,qxBuild: qx.build,ssl: params.ssl || false,cors: params.cors || false,masterProcessPid: process.pid,database: params.database,errorLogFile: params.errorLogFile || false,mode: params.mode || 'production',…etc
cwd = Current Working Directoryie where you started QEWD
Copyright © 2016 M/Gateway Developments Ltd
Web Server Root Path
• Look in:– ~/qewd/node_modules/qewd/lib/master.js
• Around line 95:var config = {
managementPassword: params.managementPassword || 'keepThisSecret',serverName: params.serverName || 'ewd-xpress',port: params.port || 8080,poolSize: params.poolSize || 1,webServerRootPath: params.webServerRootPath || process.cwd() + '/www/',no_sockets: params.no_sockets || false,qxBuild: qx.build,masterProcessPid: process.pid,database: params.database,errorLogFile: params.errorLogFile || false,mode: params.mode || 'production',bodyParser: params.bodyParser || false
};
So in our case,http://192.168.1.100:8080/
maps to C:\qewd/www/
Copyright © 2016 M/Gateway Developments Ltd
QEWD URL mappinghttp://192.168.1.100:8080/{applicationName}/{pageName}
maps to
~/qewd/www/{applicationName}/{pageName}
So:
http://192.168.1.100:8080/demo1/index.html
maps to
~/qewd/www/demo1/index.html
Copyright © 2016 M/Gateway Developments Ltd
Detect that the page is ready<html>
<head><title>Demo QEWD application</title>
</head> <body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script><script>
$(document).ready(function() {console.log('everything loaded!’);
});</script>This is a demo!
</body> </html>
Copyright © 2016 M/Gateway Developments Ltd
Detect that the page is ready<html>
<head><title>Demo QEWD application</title>
</head> <body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script><script>
$(document).ready(function() {console.log('everything loaded!’);
});</script>This is a demo!
</body> </html>
Load jQuery from CDN site
Could use local installation
Copyright © 2016 M/Gateway Developments Ltd
Detect that the page is ready<html>
<head><title>Demo QEWD application</title>
</head> <body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script><script>
$(document).ready(function() {console.log('everything loaded!’);
});</script>This is a demo!
</body> </html>
jQuery function detects thatPage DOM is ready
All JavaScript, CSS loaded
Copyright © 2016 M/Gateway Developments Ltd
Try it out
• Reload the URL in the browser– Click Reload button
• To see output from console.log:– In Chrome, open menu
• Developer Tools
Copyright © 2016 M/Gateway Developments Ltd
Try it out
• Reload the URL in the browser– Click Reload button– In JavaScript console, you’ll now see:
Copyright © 2016 M/Gateway Developments Ltd
Make the page dynamic
• Communicate with QEWD back-end• To do this, need to use another EWD 3
module:– ewd-client
• Client-side JavaScript file / module• Provides the secure APIs to communicate between
a browser or React Native mobile device and the ewd-xpess back-end
Copyright © 2016 M/Gateway Developments Ltd
Make the page dynamic
• Install ewd-client:– Open Command Prompt Window
• Then copy the file:– ~/qewd/node_modules/ewd-client/lib/proto/ewd-client.js
• to:– ~/qewd/www/ewd-client.js
cd ~/qewdnpm install ewd-client
Copyright © 2016 M/Gateway Developments Ltd
Loading ewd-client<html>
<head><title>Demo QEWD application</title>
</head> <body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="/ewd-client.js"></script>
<script>$(document).ready(function() {
console.log('everything loaded!’);});
</script>This is a demo!
</body> </html>
Loads it from ~/qewd/www/ewd-client.js
Copyright © 2016 M/Gateway Developments Ltd
Check that it loads
• Reload index.html in browser• Click the Sources tab in the Developer
Tools window
Successfully loaded
Copyright © 2016 M/Gateway Developments Ltd
Using WebSockets
• In this demo we’ll use WebSockets as the means of communication between browser and the QEWD back-end
• We could use Ajax instead– WebSockets are faster and more flexible– Ajax may be more scalable at high-end
• ewd-client normalises the two transports so it’s easy to switch between the two
Copyright © 2016 M/Gateway Developments Ltd
Using WebSockets
• QEWD relies on a standard module named socket.io to provide WebSocketsupport
• You must therefore load socket.io client-side JavaScript library into the browser
Copyright © 2016 M/Gateway Developments Ltd
Loading socket.io<html>
<head><title>Demo QEWD application</title>
</head> <body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/ewd-client.js"></script><script>
$(document).ready(function() {console.log('everything loaded!’);
});</script>This is a demo!
</body> </html>
Loads it from a virtual directorycreated by socket.io at back-end
Copyright © 2016 M/Gateway Developments Ltd
Check that it loads
• Reload index.html in browser• Click the Sources tab in the Developer
Tools window
Successfully loaded
Copyright © 2016 M/Gateway Developments Ltd
Ready to communicate with QEWD
• Everything is now in place to use QEWD and ewd-client
Copyright © 2016 M/Gateway Developments Ltd
Starting ewd-client
• EWD.start() function– Creates the client environment
• Everything protected within a closure– Establishes a web socket connection to the QEWD
back-end– Registers the client application with QEWD
• Will examine this step in more detail later
• Must not be invoked until everything has been loaded into the browser’s DOM
Copyright © 2016 M/Gateway Developments Ltd
Starting ewd-client<html>
<head><title>Demo QEWD application</title>
</head> <body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script><script src="/socket.io/socket.io.js"></script><script src="/ewd-client.js"></script><script>
$(document).ready(function() {console.log('everything loaded!’);
EWD.start('demo1', $, io);
});</script>This is a demo!
</body> </html>
Safe to start within $(document).ready() function
‘demo1’ is our application name$ is jQuery objectio is socket.io object
Copyright © 2016 M/Gateway Developments Ltd
Try it out
• Reload index.html in browser
EWD has started successfully andregistered the application on QEWD
Copyright © 2016 M/Gateway Developments Ltd
Ensuring that EWD is safe to use
• EWD.start() takes time to complete and involves several round-trips between client and back-end
• How do we know when it’s completed and safe for us to begin communicating between client and back-end?
Copyright © 2016 M/Gateway Developments Ltd
ewd-registered Event
• When EWD.start() completes, it emits an event:– ewd-registered
• This can be used to safely commence user functionality of application
Copyright © 2016 M/Gateway Developments Ltd
Handling the ewd-registered event<html>
<head><title>Demo QEWD application</title>
</head> <body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script><script src="/socket.io/socket.io.js"></script><script src="/ewd-client.js"></script><script>
$(document).ready(function() {
EWD.on('ewd-registered', function() {// OK the app is now ready for useconsole.log('*** application registered and ready for us to start!!');
});
console.log('everything loaded!’);EWD.start('demo1', $, io);
});</script>This is a demo!
</body> </html>
Copyright © 2016 M/Gateway Developments Ltd
Try it out
• Reload index.html in browser
Copyright © 2016 M/Gateway Developments Ltd
Tidy up the page
• Bad practice to have in-line JavaScript within HTML pages– Move to a separate JavaScript file
• ~/qewd/www/demo1/app.js
Copyright © 2016 M/Gateway Developments Ltd
Revised application files<html>
<head><title>Demo QEWD application</title>
</head> <body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script><script src="/socket.io/socket.io.js"></script><script src="/ewd-client.js"></script><script src=”app.js"></script>
<div id=”content”>Content goes here
</div></body>
</html>
$(document).ready(function() {EWD.on('ewd-registered', function() {
// EWD app code goes here});
EWD.start('demo1', $, io);});
index.html
app.js
Copyright © 2016 M/Gateway Developments Ltd
Now we’re ready to begin
• Use these index.html and app.js files as templates for other applications– Creates the basic environment needed for all
your hand-crafted QEWD applications