This presentation is part 5 in the EWD 3 Training Course. It describes the first steps you should take when building a browser-based desktop QEWD application. This version of Part 5 is for anyone using QEWD on Linux or a Raspberry Pi.
8257 interfacing 2 in microprocessor for btech students
Â
EWD 3 Training Course Part 5b: First Steps in Building a QEWD Application
1. Copyright Š 2016 M/Gateway Developments Ltd
EWD 3 Training Course
Part 5 (b)
Building a QEWD Application
First Steps
(Using Linux or Raspberry Pi)
Rob Tweed
Director, M/Gateway Developments Ltd
Twitter: @rtweed
2. 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
3. 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
5. 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>
6. 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!
7. 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 Directory
ie where you started QEWD
8. 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/
9. Copyright Š 2016 M/Gateway Developments Ltd
QEWD URL mapping
http://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
10. 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>
11. 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
12. 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 that
Page DOM is ready
All JavaScript, CSS loaded
13. 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
14. 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:
15. 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
16. 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 ~/qewd
npm install ewd-client
17. 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
18. 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
19. 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
20. Copyright Š 2016 M/Gateway Developments Ltd
Using WebSockets
⢠QEWD relies on a standard module
named socket.io to provide WebSocket
support
⢠You must therefore load socket.io client-
side JavaScript library into the browser
21. 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 directory
created by socket.io at back-end
22. 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
23. Copyright Š 2016 M/Gateway Developments Ltd
Ready to communicate with QEWD
⢠Everything is now in place to use QEWD
and ewd-client
24. 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
25. 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 object
io is socket.io object
26. Copyright Š 2016 M/Gateway Developments Ltd
Try it out
⢠Reload index.html in browser
EWD has started successfully and
registered the application on QEWD
27. 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?
28. 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
29. 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 use
console.log('*** application registered and ready for us to start!!');
});
console.log('everything loaded!â);
EWD.start('demo1', $, io);
});
</script>
This is a demo!
</body>
</html>
30. Copyright Š 2016 M/Gateway Developments Ltd
Try it out
⢠Reload index.html in browser
31. 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
33. 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