Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

553 views

Published on

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.

Published in: Software
  • Be the first to comment

  • Be the first to like this

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

  1. 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. 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. 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
  4. 4. Copyright © 2016 M/Gateway Developments Ltd Let’s Get Started…
  5. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 23. Copyright © 2016 M/Gateway Developments Ltd Ready to communicate with QEWD • Everything is now in place to use QEWD and ewd-client
  24. 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. 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. 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. 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. 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. 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. 30. Copyright © 2016 M/Gateway Developments Ltd Try it out • Reload index.html in browser
  31. 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
  32. 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. 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

×