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

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


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


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


Let’s Get Started…


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>


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!


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


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/


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


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>




</head> <body>




</body> </html>

Load jQuery from CDN site

Could use local installation




</head> <body>




</body> </html>

jQuery function detects thatPage DOM is ready

All JavaScript, CSS loaded


Try it out

• Reload the URL in the browser– Click Reload button

• To see output from console.log:– In Chrome, open menu

• Developer Tools


Try it out

• Reload the URL in the browser– Click Reload button– In JavaScript console, you’ll now see:


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


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


Loading ewd-client<html>


</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


Check that it loads

• Reload index.html in browser• Click the Sources tab in the Developer

Tools window

Successfully loaded


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


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


Loading socket.io<html>


</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>



</body> </html>

Loads it from a virtual directorycreated by socket.io at back-end


Check that it loads

• Reload index.html in browser• Click the Sources tab in the Developer

Tools window

Successfully loaded


Ready to communicate with QEWD

• Everything is now in place to use QEWD and ewd-client


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


Starting ewd-client<html>


</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>


EWD.start('demo1', $, io);


</body> </html>

Safe to start within $(document).ready() function

‘demo1’ is our application name$ is jQuery objectio is socket.io object


Try it out

• Reload index.html in browser

EWD has started successfully andregistered the application on QEWD


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?


ewd-registered Event

• When EWD.start() completes, it emits an event:– ewd-registered

• This can be used to safely commence user functionality of application


Handling the ewd-registered event<html>


</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);


</body> </html>


Try it out

• Reload index.html in browser


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


Revised application files<html>


</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


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

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

Software

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