Ation Users Guide
User Manual:
Open the PDF directly: View PDF .
Page Count: 22
Download | |
Open PDF In Browser | View PDF |
2018 Documentation CONTENTS 1- design pattern ............................................................................................................................................................ 2 2- Implementation .......................................................................................................................................................... 4 3- UI/UX ............................................................................................................................................................................ 13 Figure 1 MVC architecture. ..................................................................................................................................................... 2 Figure 2 Create a database with ROBO 3T ............................................................................................................................ 11 Figure 3 Create a collection with ROBO 3T ........................................................................................................................... 11 Figure 4 The navbar .............................................................................................................................................................. 13 Figure 5 Collapsible nav link .................................................................................................................................................. 13 Figure 6 navbar toggler ......................................................................................................................................................... 13 Figure 7 Foundries view ........................................................................................................................................................ 14 Figure 8 Foundry view ........................................................................................................................................................... 14 Figure 9 Edit foundry view .................................................................................................................................................... 15 Figure 10 Blocks view ............................................................................................................................................................ 15 Figure 11 Block view ............................................................................................................................................................. 16 Figure 12 Edit block view ...................................................................................................................................................... 17 Figure 13 Fill block view ........................................................................................................................................................ 18 Figure 14 Library of classes view........................................................................................................................................... 19 Figure 15 Definition view ...................................................................................................................................................... 19 Figure 16 Edit definition ........................................................................................................................................................ 20 Figure 17 Components view ................................................................................................................................................. 21 Figure 18 addc view .............................................................................................................................................................. 21 1 1- DESIGN PATTERN Overview The web application follows an MVC (Model-view-controller) object-oriented architecture bridging scopes between client and server-side: the model defines data logic (model schemas, constraints, paths), the view interprets the outcome of the UI scripts while the controller provides factories projecting the model into the view. Figure 1 MVC architecture. source: https://www.oreilly.com/library/view/spring-mvcdesigning/9781787126398/graphics/B03070_02_01.jpg Code distribution ➢ Server-side • .\app.js The gateway of the web application, partaking in the runtime environment by means of dependencies deployment. Mainly establishing the API by allocating data variables defined in the model and setting methods upon which the controller can operate the model. • .\models\main.js Introduces data structures in model schemas containing paths for attributes, constraints and data types that meet requirements set by eventual manipulations. ➢ Client-side • .\client\app.js The primary node of the UI that provides routing by binding routing services to view templates and their respective controller. • .\client\index.html The frontend gateway of the UI: The main -constant- view, managing UI scripts and pointing out to cascading views. • .\client\controllers\mains.js Where factories operate services out of pre-established methods. CRUD (Create, Read, Update, Delete) services are defined on different levels on with .\app.js, .\models\main.js and .\client\app.js and deployed from here. 2 • .\client\controllers\views\*.html These are adjacent views cascading out of .\client\index.html where every collection/document’s display is formatted Development technological set ➢ MEAN stack MongoDB as data store, Express as a web framework, AngularJS as a frontend focused framework and Nodejs as a runtime environment. ➢ Dependencies - Body-parser: An Express middleware module, here used for object/JSON conversion involved in handling http requests. - Mongoose: Interface for modeling MongoDB based data. - jQuery: A JavaScript library used by the API especially for CRUD operations handling events. 3 2- IMPLEMENTATION • 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54. 55. 56. 57. 58. 59. 60. 61. 4 .\app.js //create an Express application const express = require('express'); const app = express(); //import middleware modules const bodyParser = require('body-parser'); //import mongoose module const mongoose = require('mongoose'); //point out client-side to middleware app.use(express.static(__dirname+'/client')); //import json middleware parser app.use(bodyParser.json()); //creating a module for documents in each collection Foundry =require('./models/main'); Block =require('./models/main'); Definition =require('./models/main'); Component =require('./models/main'); // Connect to Mongoose mongoose.connect('mongodb://localhost:27017/photonicsdb', { useNewUrlParser: true }); var db = mongoose.connection; // Routing // Setting a GET method to the index app.get('/', (req, res) => { res.send('Photonicsdb: please use /api/...'); }); // GET method route for a collection of foundry documents app.get('/api/foundries', (req, res) => { Foundry.getFoundries((err, foundries) => { if(err){ throw err; } res.json(foundries); }); }); // GET method route for a foundry document app.get('/api/foundries/:_id', (req, res) => { Foundry.getFoundryById(req.params._id, (err, foundry) => { if(err){ throw err; } res.json(foundry); }); }); // POST method route for a foundry document app.post('/api/foundries', (req, res) => { var foundry = req.body; Foundry.addFoundry(foundry, (err, foundry) => { if(err){ throw err; } res.json(foundry); 62. 63. 64. 65. 66. 67. 68. 69. 70. 71. 72. 73. 74. 75. 76. 77. 78. 79. 80. 81. 82. 83. 84. 85. 86. 87. 88. 89. 90. }); }); // PUT method route for a foundry document app.put('/api/foundries/:_id', (req, res) => { var id = req.params._id; var foundry = req.body; Foundry.updateFoundry(id, foundry, {}, (err, foundry) => { if(err){ throw err; } res.json(foundry); }); }); // DELETE method route for a foundry document app.delete('/api/foundries/:_id', (req, res) => { var id = req.params._id; Foundry.removeFoundry(id, (err, foundry) => { if(err){ throw err; } res.json(foundry); }); }); //setting 3000 as the port the app uses to listen to requests app.listen(3000); console.log('Running on port 3000...'); • 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 5 .\models\main.js //import mongoose module const mongoose = require('mongoose'); //defining ObjectId as a data type var ObjectId = mongoose.Schema.Types.ObjectId; //components collection schema const componentSchema = mongoose.Schema({ name: String, type: { type: String, enum: ['parameter', 'function','status']} }); //definitions collection schema const definitionSchema = mongoose.Schema({ name: String, function: String, specifications: [String] }); //blocks collection schema const blockSchema = mongoose.Schema({ name: String, status:{ type: String, enum: ['active', 'obsolete']}, reference: { type: String, enum: ['PDK', 'paper', 'VLC']}, foundry: String, class: String, parameters: [String], valuec: [String], valueo: [String] }); //foundries collection schema 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54. 55. 56. 57. 58. 59. 60. 61. const foundrySchema = mongoose.Schema({ name: String, contact:String, phone: String, mail: String, url:String }); // creating module for schema by passing document as argument const Definition = module.exports = mongoose.model('Definition', definitionSchema); const Component = module.exports = mongoose.model('Component', componentSchema); //create a module assigining find function to GET method by passing callback argument module.exports.getFoundries = (callback, limit) => { Foundry.find(callback).limit(limit); } //create a module assigining findById function to GET method by passing id and callback arguments module.exports.getFoundryById = (id, callback) => { Foundry.findById(id, callback); } //create a module assigining create function to ADD method module.exports.addFoundry = (foundry, callback) => { Foundry.create(foundry, callback); } //create a module assigning findOneAndUpdate function as an object and passing (document attributes: attributes paths) arguments module.exports.updateFoundry = (id, foundry, options, callback) => { var query = {_id: id}; var update = { name: foundry.name, contact: foundry.contact, phone: foundry.phone, mail: foundry.mail, url: foundry.url } Foundry.findOneAndUpdate(query, update, options, callback); } 62. 63. 64. 65. 66. 67. 68. 69. 70. 71. 72. 73. 74. //create a module assigining remove function by passing id argument 75. module.exports.removeFoundry = (id, callback) => { 76. var query = {_id: id}; 77. Foundry.remove(query, callback); 78. } ➢ Client-side • 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 6 .\client\app.js // importing ngRoute directive to provide routing services var myApp = angular.module('myApp',['ngRoute']); //configuring routes by specifying bound controller and view myApp.config(function($routeProvider){ $routeProvider.when('/', { controller:'MainsController', templateUrl: 'views/mains.html' }) .otherwise({ redirectTo: '/' }); }); • .\client\index.html 1. 2. 3. 4. 5. 6. 7. 8. 9.