Ation Users Guide
User Manual:
Open the PDF directly: View PDF 
.
Page Count: 22
2018
Documentation
1
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
2
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-mvc-
designing/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.
3
• .\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.
4
2- IMPLEMENTATION
• .\app.js
1. //create an Express application
2. const express = require('express');
3. const app = express();
4.
5. //import middleware modules
6. const bodyParser = require('body-parser');
7.
8. //import mongoose module
9. const mongoose = require('mongoose');
10.
11. //point out client-side to middleware
12. app.use(express.static(__dirname+'/client'));
13.
14. //import json middleware parser
15. app.use(bodyParser.json());
16.
17. //creating a module for documents in each collection
18. Foundry =require('./models/main');
19. Block =require('./models/main');
20. Definition =require('./models/main');
21. Component =require('./models/main');
22.
23. // Connect to Mongoose
24. mongoose.connect('mongodb://localhost:27017/photonicsdb', { useNewUrlParser: true });
25. var db = mongoose.connection;
26.
27. // Routing
28.
29. // Setting a GET method to the index
30. app.get('/', (req, res) => {
31. res.send('Photonicsdb: please use /api/...');
32. });
33.
34. // GET method route for a collection of foundry documents
35. app.get('/api/foundries', (req, res) => {
36. Foundry.getFoundries((err, foundries) => {
37. if(err){
38. throw err;
39. }
40. res.json(foundries);
41. });
42. });
43.
44. // GET method route for a foundry document
45. app.get('/api/foundries/:_id', (req, res) => {
46. Foundry.getFoundryById(req.params._id, (err, foundry) => {
47. if(err){
48. throw err;
49. }
50. res.json(foundry);
51. });
52. });
53.
54. // POST method route for a foundry document
55. app.post('/api/foundries', (req, res) => {
56. var foundry = req.body;
57. Foundry.addFoundry(foundry, (err, foundry) => {
58. if(err){
59. throw err;
60. }
61. res.json(foundry);
5
62. });
63. });
64.
65. // PUT method route for a foundry document
66. app.put('/api/foundries/:_id', (req, res) => {
67. var id = req.params._id;
68. var foundry = req.body;
69. Foundry.updateFoundry(id, foundry, {}, (err, foundry) => {
70. if(err){
71. throw err;
72. }
73. res.json(foundry);
74. });
75. });
76.
77. // DELETE method route for a foundry document
78. app.delete('/api/foundries/:_id', (req, res) => {
79. var id = req.params._id;
80. Foundry.removeFoundry(id, (err, foundry) => {
81. if(err){
82. throw err;
83. }
84. res.json(foundry);
85. });
86. });
87.
88. //setting 3000 as the port the app uses to listen to requests
89. app.listen(3000);
90. console.log('Running on port 3000...');
• .\models\main.js
1. //import mongoose module
2. const mongoose = require('mongoose');
3. //defining ObjectId as a data type
4. var ObjectId = mongoose.Schema.Types.ObjectId;
5. //components collection schema
6. const componentSchema = mongoose.Schema({
7. name: String, type: {
8. type: String,
9. enum: ['parameter', 'function','status']}
10. });
11. //definitions collection schema
12. const definitionSchema = mongoose.Schema({
13. name: String,
14. function: String,
15. specifications: [String]
16. });
17. //blocks collection schema
18. const blockSchema = mongoose.Schema({
19. name: String,
20. status:{
21. type: String,
22. enum: ['active', 'obsolete']},
23. reference: {
24. type: String,
25. enum: ['PDK', 'paper', 'VLC']},
26. foundry: String,
27. class: String,
28. parameters: [String],
29. valuec: [String],
30. valueo: [String]
31. });
32. //foundries collection schema
6
33. const foundrySchema = mongoose.Schema({
34. name: String,
35. contact:String,
36. phone: String,
37. mail: String,
38. url:String
39. });
40.
41. // creating module for schema by passing document as argument
42. const Definition = module.exports = mongoose.model('Definition', definitionSchema);
43. const Component = module.exports = mongoose.model('Component', componentSchema);
44.
45.
46. //create a module assigining find function to GET method by passing callback argument
47. module.exports.getFoundries = (callback, limit) => {
48. Foundry.find(callback).limit(limit);
49. }
50.
51. //create a module assigining findById function to GET method by passing id and callback arguments
52. module.exports.getFoundryById = (id, callback) => {
53. Foundry.findById(id, callback);
54. }
55.
56. //create a module assigining create function to ADD method
57. module.exports.addFoundry = (foundry, callback) => {
58. Foundry.create(foundry, callback);
59. }
60.
61. //create a module assigning findOneAndUpdate function as an object and passing (document attributes:
attributes paths) arguments
62. module.exports.updateFoundry = (id, foundry, options, callback) => {
63. var query = {_id: id};
64. var update = {
65. name: foundry.name,
66. contact: foundry.contact,
67. phone: foundry.phone,
68. mail: foundry.mail,
69. url: foundry.url
70. }
71. Foundry.findOneAndUpdate(query, update, options, callback);
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
• .\client\app.js
1. // importing ngRoute directive to provide routing services
2. var myApp = angular.module('myApp',['ngRoute']);
3. //configuring routes by specifying bound controller and view
4. myApp.config(function($routeProvider){
5. $routeProvider.when('/', {
6. controller:'MainsController',
7. templateUrl: 'views/mains.html'
8. })
9. .otherwise({
10. redirectTo: '/'
11. });
12. });
7
• .\client\index.html
1. <!doctype html>
2. <!-- Bootstrap core CSS -->
3. <link href="views/css/bootstrap.min.css" rel="stylesheet">
4. <!-- Material Design Bootstrap -->
5. <link href="views/css/mdb.min.css" rel="stylesheet">
6. </head>
7. <body style="background-color:#E4E4E4;">
8. <!-- Navbar and navbar links -->
9. <nav class="navbar navbar-expand-lg bg-dark text-warning">
10. <a class="navbar-brand bg-dark " href="#/mains" style="width: 320px;">
11. <img src="views/logo/logo.svg" alt="">
12. </a>
13. <!-- Toggler for smaller screen sizes -->
14. <button class="navbar-toggler text-light" type="button" data-toggle="collapse" data-
target="#navbarPh" aria-controls="navbarPh" aria-expanded="false" aria-label="Toggle navigation">
15. <span data-feather="more-vertical" style="width: 23px; height: 23px;">
16. </span>
17. </button>
18. …
19. <!-- container for collapsing views by means of ngView that complements the ngRoute directive --
>
20. <div class="container">
21. <div class="row">
22. <div class="col-md-12 text-monospace">
23. <div ng-view></div>
24. </div>
25. </div>
26. </div>
27. </div>
28. <!-- Bootstrap core JavaScript-->
29. <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
30. <script>window.jQuery || document.write('<script src="views/scripts/jquery-
slim.min.js"><\/script>')</script>
31. <script src="views/scripts/popper.min.js"></script>
32. <script src="views/scripts/bootstrap.min.js"></script>
33. <!-- Angular core JavaScript -->
34. <script src="views/scripts/angular.js"></script>
35. <script src="views/scripts/angular-route.js"></script>
36. <!-- MDB core JavaScript -->
37. <script type="text/javascript" src="views/scripts/js/mdb.min.js"></script>
38. <!-- Routing provider and controllers -->
39. <script src="app.js"></script>
40. <script src="controllers/mains.js"></script>
41. <!-- ClipboardJS -->
42. <script src="views/scripts/clipboard.min.js"></script>
43. <script>
44. var clipboard = new ClipboardJS('.btn');
45. clipboard.on('success', function(e) {
46. console.log(e);
47. });
48. clipboard.on('error', function(e) {
49. console.log(e);
50. });
51. </script>
52. <!-- Icons -->
53. <script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
54. <script>
55. feather.replace()
56. </script>
8
• .\client\controllers\mains.js
1. var myApp = angular.module('myApp');
2. //Load services required by the core module
3. myApp.controller('MainsController', ['$scope', '$http', '$location', '$routeParams', function($scope,
$http, $location, $routeParams){
4. console.log('MainsController loaded...');
5. //Reference to application model (with scope) to create CRUD operations factory using http servic
e to generate HTTP requests
6. //Read all foundries
7. $scope.getFoundries = function(){
8. $http.get('/api/foundries').success(function(response){
9. $scope.foundries = response;
10. });
11. }
12. //Read foundry by id
13. $scope.getFoundry = function(){
14. var id = $routeParams.id;
15. $http.get('/api/foundries/'+id).success(function(response){
16. $scope.foundry = response;
17. });
18. }
19. //Create a foundry
20. $scope.addFoundry = function(){
21. console.log($scope.foundry);
22. $http.post('/api/foundries/', $scope.foundry).success(function(response){
23. window.location.href='#/foundries';
24. });
25. }
26. //Read a foundry by id and update it
27. $scope.updateFoundry = function(){
28. var id = $routeParams.id;
29. $http.put('/api/foundries/'+id, $scope.foundry).success(function(response){
30. window.location.href='#/foundry/'+id;
31. });
32. }
33. //Read a foundry by id and delete it
34. $scope.removeFoundry = function(id){
35. $http.delete('/api/foundries/'+id).success(function(response){
36. window.location.href='#/foundries';
37. });
38. }
39. }]);
• .\client\views\*.html
o mains.html
1. <!-- Call reading all foundries service from the controller-->
2. <div ng-init="getFoundries()">
3. <!-- Search within the read foundries documents-->
4. <input type="text" class="form-control" id="inlineFormInputGroupAll" ng-
model="q" placeholder="Keyword" aria-label="filter blocks" placeholder="Keyword">
5. …
6. <!-- Display the read documents by foundry scope | filter with reference to searched keywords-->
7. <div ng-repeat="foundry in foundries | filter : q">
8. …
9. <!-- Link to redirect to the foundry by id -->
10. <a href="#/foundry/{{foundry._id}}" class="btn btn-sm btn-lg btn-block btn-outline-
elegant btn-rounded waves-effect" role="button" aria-pressed="true">
11. More info
12. </a>
9
o foundry.html
1. <!-- Call reading a foundry service from the controller-->
2. <div ng-init="getFoundry()">
3. …
4. <!-- Call reading all the blocks service from the controller-->
5. <div class="collapse show" id="collapseBlock" ng-init="getBlocks()">
6. <!-
- Display the read blocks' documents by block scope | condition: match if the block foundry (from blo
cks collection) attribute with the block name attribute (from foundries collection)-->
7. <div ng-repeat="block in blocks" ng-if="block.foundry==foundry.name">
8. <!-- Link to redirect to the block by id -->
9. <h5>
10. <a href="#/block/{{block._id}}" class="badge badge-dark">{{block.name}}
11. </a>
12. …
13. <!-- Link to redirect to foundry editing view by id -->
14. <a href="#/foundry/edit/{{foundry._id}}" class="btn btn-warning btn-sm">
15. Edit
16. </a>
17. …
18. <!-- Link to display confirmation window for foundry deleting -->
19. <button type="button" class="btn btn-warning btn-sm" data-toggle="modal" data-
target="#fModal" data-backdrop="false">
20. Delete
21. </button>
22. …
23. <!-- Call deleting a foundry service from the controller-->
24. <button type="button" class="btn btn-warning" ng-
click="removeFoundry(foundry._id)">
25. Yes, delete !
26. </button>
- blocks.html, definitions.html and components.html follow the same pattern as
mains.html
- block.html definition.html and component.html follow the same pattern as
foundry.html
o addB.html
- Create a component:
1. <!-- Call create a component service upon submition -->
2. <form ng-submit="addComponent()">
3. …
4. <!-- Condition : when the component
name form is triggered, check box appears, if checked, display read components' documents | filter by
the form's content-->
5. <input type="checkbox" class="custom-control-input" id="customCheck1" ng-
model="checked">
6. <label class="custom-control-label" for="customCheck1" ng-
if="component.name">check matching components
7. </label>
8. <br>
9. <span ng-if="checked">
10. <select class="form-control mdb-color white-text border-0">
11. <option ng-
repeat="component in components | filter : component.name">{{component.name}}
12. </option>
13. </select>
14. </span>
10
- Define a class:
1. <!-
- Call read components service and display them in a selection form | filter by type attribute 'funct
ion' in the first form and 'parameter' in the second-->
2. <div ng-init="getComponents()">
3. <select class="form-control" ng-model="definition.function">
4. <option value="" disabled selected>
5. Choose a function
6. </option>
7. <option ng-
repeat="component in components | filter : {type: 'function'}" value="{{component.name}}">
8. {{component.name}}
9. </option>
10. </select>
11. </div>
12. …
13. <!-- Display the selected parameters in a table -->
14. <label class="justify-content-center align-items-center font-weight-bold">
15. Selected parameters
16. </label>
17. <table class="table table-sm">
18. <tbody>
19. <tr ng-repeat="specifications in definition.specifications">
20. <th scope="row">
21. {{$index+1}}
22. </th>
23. <td>
24. {{definition.specifications[$index]}}
25. </td>
26. </tr>
27. </tbody>
28. </table>
- The remaining of addB.html follows the same pattern as the mentioned
- addC.html and addF.html have the same content as addB.html with with the
exception of collapsing different tabs (“DEPHINE A CLASS” is collapsed instead of
“ADD A COMPONENT” in addC.html and “CREATE A BLOCK” in addB.html)
o edit_foundry.html
1. <!-
- Call update a foundry service upon submition, Call reading a foundry service from the controller --
>
2. <form ng-submit="updateFoundry()" ng-init="getFoundry()">
3. …
- Edit_block.html, edit_definition.html, edit_component.html and fill_block.html follow
the same pattern as mains.html
Installation
1. Install MongoDB (https://www.mongodb.com/download-center/community )
Install nodejs (https://nodejs.org/en/download/ ) and a bash command line
(https://gitforwindows.org/ )
2. Create database and log directories: create a new file “data” and then two files “data\db”
and “data\log”
3. Create a data store and collections for Dephine in MongoDB:
11
➢ With Robo 3T
i. Install ROBO 3T and run it
ii. Create a database “photonicsdb”
Figure 2 Create a database with ROBO 3T
iii. Create the collections “foundries”, “blocks”, “definitions”, “components”
Figure 3 Create a collection with ROBO 3T
➢ With mongo shell
i. Run mongod.exe with administrator priviliges (located by default in c:\program
files\MongoDB\server\3.6\bin)
Create a Database:
If a database does not exist, MongoDB creates the database when you first store data for that
database. As such, you can switch to a non-existent database and perform the following operation
in the mongo shell:
ii. use photonicsdb
The insertOne() operation creates both the database myNewDB and the collection
myNewCollection1 if they do not already exist.
Create a Collection:
If a collection does not exist, MongoDB creates the collection when you first store data for that
collection.
iii. db.foundries.insertOne( { x: 1 } )
12
db.blocks.insertOne( { x: 1 } )
db.definitions.insertOne( { x: 1 } )
db.components.insertOne( { x: 1 } )
4. Clone Dephine (copy/paste photonicsdb file with its content)
5. Git Bash in c:\photonicsdb
6. Run the command “node app”
7. Run Dephine on a browser on: http://localhost:3000
Notes:
• TypeError: $http.get(...). success is not a function: $http Success/Error methods (used
in .\client\controllers\mains.js) were deprecated starting from AngularJS 1.6.
Upgrading to any version following 1.5 will result in the mewntioned error.
• Supported browsers: Best viewed in Chrome (strongly recommended for mobile
use), runs also on Firefox, IE10+, Edge, Opera and Safari
• Potential issues on iOS mobile browsers: Delete confirmation, add dropdown,
zooming
13
3- UI/UX
➢ The navbar
The navbar has 4 links: foundries, blocks, library of classes, components and a
collapsible add. These lead to views where foundries’, blocks’, definitions’ and
components collection documents are displayed. The navbar has a toggler for smaller
screen sizes.
Figure 4 The navbar
Figure 5 Collapsible nav link
Figure 6 navbar toggler
➢ The views
• Home (Foundries)
Foundries’ collection documents are returned on cards, every card has
foundries’ attributes and a “more info” button leading to the single foundry view.
This view has a clipboard copy button and a search form.
14
Figure 7 Foundries view
• Foundry
Accessed foundry document is returned on a card with the foundry attributes,
also, documents from blocks collection belonging having the accessed foundry
name as an attribute will be displayed. This view has an Edit button leading to
edit_foundry view, a delete button to a delete confirmation window and a
clipboard copy button.
Figure 8 Foundry view
• edit_foundry
Returns a form prefilled with the foundry attributes that can be updated through
the submit button.
15
Figure 9 Edit foundry view
• Blocks
Blocks’ collection documents are returned on cards, every card has blocks’
attributes and a “more info” button leading to the single block view. This view
has a clipboard copy button, a search form, filtering blocks by foundry and by
class forms, the filtering by function form is meant to filter the classes form. Under
the forms, a count for the number of returned blocks, a show/hide classification
attributes on the cards and a switch slider (ON: show only “active” blocks, OFF:
show all).
Figure 10 Blocks view
16
• Block
Returns accessed block document on a card with the block attributes and the
assigned class document from definitions collection. The view has a clipboard
copy button, an Edit button leading to edit_block view, a Fill button to fill_block
view and a delete button to a delete confirmation window. (n.b. “Class bound
parameters” is an attribute of the class (definitions collection) while “Outstanding
parameters” is an attribute of the block itself (see .\models\main.js for the
complete model schemas).
Figure 11 Block view
17
• edit_block
Returns a form prefilled with the block attributes that can be updated through
the submit button. Hold <ctrl> for multiple selection of outstanding parameters,
<shift> for sequential selection and click back to deselect. Selected parameters
are shown under the submit button.
Figure 12 Edit block view
18
• fill_block
Displays the block view with forms to update values of parameters by index.
Figure 13 Fill block view
19
• Library of classes
Returns definitions’ collection documents on cards, every card has definitions’
attributes and a “more info” button leading to the single definition view. This view
has a search form and a filtering classes by function form.
Figure 14 Library of classes view
• Definition
Returns accessed class document displaying its attributes. This view has a
clipboard copy button, an Edit button leading to edit_definition view and a
delete button to a delete confirmation window
Figure 15 Definition view
• edit_definition
Returns a form prefilled with the definition attributes that can be updated
through the submit button. Hold <ctrl> for multiple selection of outstanding
parameters, <shift> for sequential selection and click back to deselect. Selected
parameters are shown under the submit button.
20
Figure 16 Edit definition
• Components
Returns components’ collection documents on cards. These are distinguished by
their function or parameter “type” attribute. Function components are used to
create (and filter) classes and parameters are used to create classes and blocks.
Foundries has component role in add view.
21
Figure 17 Components view
• Add/addf/addc/addb
Returns forms to create components documents on collection. A name for the
document is the only required attribute for creating the document. By starting to
type the name a checkbox appears, when checked a list of documents’ names
appears allowing to search within existing collection to avoid duplicates.
Figure 18 addc view
