EWD 3 Training Course Part 5a: First Steps in Building a QEWD Application

EWD 3 Training Course Part 5a: First Steps in Building a QEWD Application
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
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
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
Copyright © 2016 M/Gateway Developments Ltd Let’s Get Started…
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>
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!
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
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/
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
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 that Page 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: – C:qewdnode_modulesewd-clientlibprotoewd-client.js • to: – C:qewdwwwewd-client.js cd qewd npm 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 C:qewdwwwewd-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 WebSocket support • 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 directory created 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 object io is socket.io object
Copyright © 2016 M/Gateway Developments Ltd Try it out • Reload index.html in browser EWD has started successfully and registered 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 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>
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 • C:qewdwwwdemo1app.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

Check these out next

EWD 3 Training Course Part 5a: First Steps in Building a QEWD Application

Recommended

More Related Content

Slideshows for you(20)

Similar to EWD 3 Training Course Part 5a: First Steps in Building a QEWD Application(20)

More from Rob Tweed(14)

Recently uploaded(20)

EWD 3 Training Course Part 5a: First Steps in Building a QEWD Application