Weitere ähnliche Inhalte Ähnlich wie EWD 3 Training Course Part 5a: First Steps in Building a QEWD Application (20) Kürzlich hochgeladen (20) EWD 3 Training Course Part 5a: First Steps in Building a QEWD Application1. Copyright © 2016 M/Gateway Developments Ltd
EWD 3 Training Course
Part 5 (a)
Building a QEWD Application
First Steps
(Using Windows & Caché)
Rob Tweed
Director, M/Gateway Developments Ltd
Twitter: @rtweed
2. Copyright © 2016 M/Gateway Developments Ltd
Pre-requisites
• Node.js installed
• Caché installed and running
• cache.node installed
• 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
• Windows & Caché
• QEWD installed in C: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:
– C:qewdwwwdemo1
• Create index.html file
– C:qewdwwwdemo1index.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 C:qewddemo1index.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:
– C:qewdnode_modulesqewdlibmaster.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:
– C:qewdnode_modulesqewdlibmaster.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
C:qewd/www/{applicationName}/{pageName}
So:
http://192.168.1.100:8080/demo1/index.html
maps to
C: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:
– C:qewdnode_modulesewd-clientlibprotoewd-client.js
• to:
– C:qewdwwwewd-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 C:qewdwwwewd-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
• C:qewdwwwdemo1app.js
32. 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
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