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.