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 13: Putting Everything so far into Practice using QEWD

473 views

Published on

This presentation is Part 13 of the EWD 3 Training Course. It pulls together everything we've covered in the previous 12 lessons in a worked example QEWD application

Published in: Software
  • Be the first to comment

  • Be the first to like this

EWD 3 Training Course Part 13: Putting Everything so far into Practice using QEWD

  1. 1. Copyright © 2016 M/Gateway Developments Ltd EWD 3 Training Course Part 13 Putting everything so far into practice in QEWD Rob Tweed Director, M/Gateway Developments Ltd Twitter: @rtweed
  2. 2. Copyright © 2016 M/Gateway Developments Ltd Let’s put it all into practice • Try cutting and pasting the following example code • Then try running it!
  3. 3. Copyright © 2016 M/Gateway Developments Ltd Where your files go: a reminder • Windows & Caché: – Front-end HTML, JavaScript, CSS files: • C:qewdwww{applicationName} – eg: – c:qewdwwwdemo1index.html – c:qewdwwwdemo1app.js – Back-end QEWD handler functions: • C:qewdnode_modules{application}.js eg: – C:qewdnode_modulesdemo1.js
  4. 4. Copyright © 2016 M/Gateway Developments Ltd Where your files go: a reminder • Linux & Raspberry Pi: – Front-end HTML, JavaScript, CSS files: • ~/qewd/www/{applicationName} – eg: – ~/qewd/www/demo1/index.html – ~/qewd/www/demo1/app.js – Back-end QEWD handler functions: • ~/qewd/node_modules/{application}.js eg: – ~/qewd/node_modules/demo1.js
  5. 5. Copyright © 2016 M/Gateway Developments Ltd Simple Login Example • index.html <html> <head> <title>Demo ewd-xpress application</title> <link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" /> </head> <body> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script> <script src="/socket.io/socket.io.js"></script> <script src="/ewd-client.js"></script> <script src="app.js"></script> <table id="loginForm"> <tr> <td>Username:</td> <td><input type="text" id="username" /></td> </tr> <tr> <td>Password:</td> <td><input type="password" id="password" /></td> </tr> <tr> <td colspan="2"> <button id="loginBtn">Login</button> </td> </tr> </table> <br /><br /> <button id="testBtn">Click Me</button> </body> </html>
  6. 6. Copyright © 2016 M/Gateway Developments Ltd Simple Login Example • Front-end: – app.js $(document).ready(function() { EWD.log = true; EWD.on('ewd-registered', function() { EWD.on('error', function(responseObj) { toastr.error(responseObj.message.error); }); EWD.on('intermediate', function(responseObj) { toastr.info('Intermediate response: ' + responseObj.message.date); }); $('#testBtn').on('click', function(e) { var message = {type: 'testButton'}; EWD.send(message, function(responseObj) { if (!responseObj.message.error) toastr.info(JSON.stringify(responseObj.message)); }); }); $('#loginBtn').on('click', function(e) { var username = $('#username').val(); if (username === '') { toastr.error('You must enter a username'); return; } var password = $('#password').val() if (password === '') { toastr.error('You must enter a password'); return; } var message = { type: 'login', params: { username: username, password: password } }; EWD.send(message, function(responseObj) { if (!responseObj.message.error) $('#loginForm').hide(); }); }); }); EWD.start('demo1', $, io); });
  7. 7. Copyright © 2016 M/Gateway Developments Ltd Simple Login Example • back-end: – demo1.js function checkLogin(username, password) { // hard-coded version for now if (username !== 'rob') return {error: 'Invalid username'}; if (password !== 'secret') return {error: 'Invalid password'}; return {ok: true}; } module.exports = { handlers: { login: function(messageObj, session, send, finished) { if (session.authenticated) { finished({error: 'You are already logged in!'}); return; } var username = messageObj.params.username; if (username === '') { finished({error: 'You must enter a username'}); return; } var password = messageObj.params.password; if (password === '') { finished({error: 'You must enter a password'}); return; } var status = checkLogin(username, password); if (status.ok) { session.authenticated = true; finished({ok: true}); } else { finished({error: status.error}); } }, testButton: function(messageObj, session, send, finished) { if (!session.authenticated) { finished({error: 'You are not yet logged in!'}); return; } send({ type: 'intermediate', foo: 'bar', date: new Date().toString() }); finished({ ok: 'testButton message was processed successfully!' }); } } };
  8. 8. Copyright © 2016 M/Gateway Developments Ltd Add logout and more sophistication
  9. 9. Copyright © 2016 M/Gateway Developments Ltd Login Example v2 • Index.html <html> <head> <title>Demo ewd-xpress application</title> <link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" /> </head> <body> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script> <script src="/socket.io/socket.io.js"></script> <script src="/ewd-client.js"></script> <script src="app.js"></script> <table id="loginForm"> <tr> <td>Username:</td> <td><input type="text" id="username" /></td> </tr> <tr> <td>Password:</td> <td><input type="password" id="password" /></td> </tr> <tr> <td colspan="2"> <button id="loginBtn">Login</button> </td> </tr> </table> <br /><br /> <button id="testBtn">Click Me</button> <br /><br /> <button id="logoutBtn">Logout</button> </body> </html>
  10. 10. Copyright © 2016 M/Gateway Developments Ltd Login Example v2 • app.js $(document).ready(function() { EWD.log = true; // hide the login form until its safe for user to log in $('#loginForm').hide(); $('#logoutBtn').hide(); EWD.on('ewd-registered', function() { EWD.on('error', function(responseObj) { toastr.error(responseObj.message.error); }); EWD.on('intermediate', function(responseObj) { toastr.info('Intermediate response: ' + responseObj.message.date); }); $('#testBtn').on('click', function(e) { var message = {type: 'testButton'}; EWD.send(message, function(responseObj) { if (!responseObj.message.error) toastr.info(JSON.stringify(responseObj.message)); }); }); $('#loginBtn').on('click', function(e) { var username = $('#username').val(); if (username === '') { toastr.error('You must enter a username'); return; } var password = $('#password').val() if (password === '') { toastr.error('You must enter a password'); return; } var message = { type: 'login', params: { username: username, password: password } }; EWD.send(message, function(responseObj) { if (!responseObj.message.error) { $('#loginForm').hide(); $('#logoutBtn').show(); } }); }); $('#logoutBtn').on('click', function(e) { EWD.disconnectSocket(); }); EWD.on('socketDisconnected', function() { toastr.info('You have been logged out'); setTimeout(function() { // reload index.html so a clean new session begins location.reload(); }, 1000); }); // safe for user to login now so reveal the form $('#loginForm').show(); }); EWD.start('demo1', $, io); });
  11. 11. Copyright © 2016 M/Gateway Developments Ltd Login Example v2 • demo1.js function checkLogin(username, password) { // hard-coded version for now if (username !== 'rob') return {error: 'Invalid username'}; if (password !== 'secret') return {error: 'Invalid password'}; return {ok: true}; } module.exports = { handlers: { login: function(messageObj, session, send, finished) { if (session.authenticated) { finished({error: 'You are already logged in!'}); return; } var username = messageObj.params.username; if (username === '') { finished({error: 'You must enter a username'}); return; } var password = messageObj.params.password; if (password === '') { finished({error: 'You must enter a password'}); return; } var status = checkLogin.call(this, username, password); if (status.ok) { session.authenticated = true; session.timeout = 3600; session.updateExpiry(); finished({ok: true}); } else { finished({error: status.error}); } }, testButton: function(messageObj, session, send, finished) { if (!session.authenticated) { finished({error: 'You are not yet logged in!'}); return; } send({ type: 'intermediate', foo: 'bar', date: new Date().toString() }); finished({ ok: 'testButton message was processed successfully!' }); } } }; Update session timeout & expiry
  12. 12. Copyright © 2016 M/Gateway Developments Ltd Login Example v2 • demo1.js function checkLogin(username, password) { // hard-coded version for now if (username !== 'rob') return {error: 'Invalid username'}; if (password !== 'secret') return {error: 'Invalid password'}; return {ok: true}; } module.exports = { handlers: { login: function(messageObj, session, send, finished) { if (session.authenticated) { finished({error: 'You are already logged in!'}); return; } var username = messageObj.params.username; if (username === '') { finished({error: 'You must enter a username'}); return; } var password = messageObj.params.password; if (password === '') { finished({error: 'You must enter a password'}); return; } var status = checkLogin.call(this, username, password); if (status.ok) { session.authenticated = true; session.timeout = 3600; session.updateExpiry(); finished({ok: true}); } else { finished({error: status.error}); } }, testButton: function(messageObj, session, send, finished) { if (!session.authenticated) { finished({error: 'You are not yet logged in!'}); return; } send({ type: 'intermediate', foo: 'bar', date: new Date().toString() }); finished({ ok: 'testButton message was processed successfully!' }); } } }; Note: using call so this is the context inside checkLogin()
  13. 13. Copyright © 2016 M/Gateway Developments Ltd Login Example v2 • demo1.js function checkLogin(username, password) { var status = this.db.function({ function: 'login^security', arguments: [username, password] }); if (status == 1) return {ok: true}; return {error: 'Invalid login attempt}; } module.exports = { handlers: { login: function(messageObj, session, send, finished) { if (session.authenticated) { finished({error: 'You are already logged in!'}); return; } var username = messageObj.params.username; if (username === '') { finished({error: 'You must enter a username'}); return; } var password = messageObj.params.password; if (password === '') { finished({error: 'You must enter a password'}); return; } var status = checkLogin.call(this, username, password); if (status.ok) { session.authenticated = true; session.timeout = 3600; session.updateExpiry(); finished({ok: true}); } else { finished({error: status.error}); } }, testButton: function(messageObj, session, send, finished) { if (!session.authenticated) { finished({error: 'You are not yet logged in!'}); return; } send({ type: 'intermediate', foo: 'bar', date: new Date().toString() }); finished({ ok: 'testButton message was processed successfully!' }); } } So we could invoke a legacy Mumps/Cache function to handle the login
  14. 14. Copyright © 2016 M/Gateway Developments Ltd Login Example v2 • demo1.js function checkLogin(username, password) { var auth = new this.documentStore.DocumentNode('authentication'); if (!auth.$(username).exists return {error: 'Invalid username'}; if (auth.$username.$('password').value === password) return {ok: true}; return {error: 'Invalid password}; } module.exports = { handlers: { login: function(messageObj, session, send, finished) { if (session.authenticated) { finished({error: 'You are already logged in!'}); return; } var username = messageObj.params.username; if (username === '') { finished({error: 'You must enter a username'}); return; } var password = messageObj.params.password; if (password === '') { finished({error: 'You must enter a password'}); return; } var status = checkLogin.call(this, username, password); if (status.ok) { session.authenticated = true; session.timeout = 3600; session.updateExpiry(); finished({ok: true}); } else { finished({error: status.error}); } }, testButton: function(messageObj, session, send, finished) { if (!session.authenticated) { finished({error: 'You are not yet logged in!'}); return; } send({ type: 'intermediate', foo: 'bar', date: new Date().toString() }); finished({ ok: 'testButton message was processed successfully!' }); } } }; Or we could access an Authentication document

×