fyp interim presentation
TRANSCRIPT
Real-time Coding InterfaceCasper LI Wai Kin (15022276D)
EIE4430 - Final Year Project Interim Presentation
Contents List1. Introduction
2. Server Side
3. Client Side
4. Upcoming Development
5. References
Introduction● A web application for people to do programming online.
● Mainly focus on the server-side operation instead of client-side operation.
● Example project for compilation test: Slamdunker Robot Project from EIE3106
● By adopting this web application, students do not have to set up the environment
with complicated steps before programming.
Server Side
Servers
● Bus Topology
● 6 Servers
● Connected by a switch
● Ubuntu Server 16.04
Functional Structure● Router can call to Compiler
machines via SSH and
OpenLDAP login.
● All machines share the same
storage in Storage machine.
● Web API for interconnecting
client applications to the
entire system.
The Router
+Ubuntu PHP
● Provide apache2 server with PHP 7 module
● Router function is done by setting up package forwarding in iptables
● Provide firewall
The OpenLDAP Server● Responsible for …
1. User signup
2. User delete
3. User login (authentication)
● A user account is a POSIX account in OpenLDAP database
● The POSIX accounts can be used to login Compiler machines and Storage
machines.
● Login Example to Compiler 1:
1. Router establish a SSH login to Compiler 1 by PHP script.2. Compiler 1 request the OpenLDAP server to authenticate the user.3. Login the user or reject the login.
The Storage
● All other machines mount this storage machine by NFS.
● Two mount points in all the other machines:
1. `/opt/CodeSpace` : Storing all required software, common libraries for all shared machines.
2. `/home/ldap` : Storing all home directories of the users.
● Permanent mounting
The Compilers● For handling heavy jobs of the system, such as compilation.
● Installed “CodeSourcery G++ Lite” for compiling program for MIPS chip.
● Access the storage to read the source codes for compilation.
Client Side
Client Side Frameworks / Libraries
+ +Webpack React Redux
+Material-UI
Webpack● JavaScript Module Bundler
● Separate large JavaScript file into many small pieces of JS files for development.
● Bundle all pieces of JS files to generate a minified JS file.
● Advantages:
➢ Good for modularize the JavaScript code -> Easy to maintain, extend and scale.
➢ Do not need to manage dependencies manually. Just import classes, objects, functions and variables
from other separated JS files on demand.
➢ An HTML file only load a single small bundled JS file. -> Fast loading speed
● Disadvantages:
➢ Setting the configuration file is difficult.
➢ Have to use webpack-dev-server to auto bundle the files for checking the modified results.
React● UI library - V in the MVC model
● Used with ECMAScript 2016 standard -> can use class and extend keyword in JS
● Component-oriented: HTML/JSX contained by component classes
○ Easy to maintain, extend and scale.
● Many open-source components on the internet.
○ One of the component library used in this project is Material-UI.
○ Editor component: react-ace from GitHub
● body tag in the HTML file only contain a div tag for react application to render
the entire UI. -> Code in the HTML file is so simple.
Webpack & React ExampleA Component Require LoginInputs Component
import React from ‘react’;import LoginInputs from ‘component/LoginInputs’;// ...
export default class LoginSection extends React.Component { constructor(props) { super(props); this.handleLoginBtnClicked.bind(this); }
handleLoginBtnClicked() { // Do some operation var username = this.refs.inputs.getUsername(); }
render() { render ( <div> <LoginInputs ref=“inputs”/> <RememberMe defaultVal={false}/> <Button onClick={this.handleLoginBtnClicked}/> </div> ); }}
component/LoginInputs.js
import React from ‘react’;
export default class LoginInputs extends React.Component { render() { render ( <form action=”action_page.php”> <table> <tr> <td>Username</td> <td><input type=”text” name=”username”></td> </tr> <tr> <td>Password</td> <td><input type=”password” name=”password”></td> </tr> </table> </form> ); }}
JSX
HTML
Redux● Manage global states and global data.
● Connect react components that is not the relationship of
parent and child.
● Calling an redux action can trigger single or multiple state
changes.
● Auto update the connected components according to the
data/state in the store
Material UI● A React component library implementing the Material UI design from Google.
● Interactive and Animated
● Many built-in components like: Dialog, Drop-down menu, toggle…
● Used only in the Code Editor Page and the Index Page
UI Flow Diagram
Upcoming Development● UI Improvement
● Control Panels / Admin Page
○ Add, delete users and change their information
● React Server-side Rendering with PHP by using React-PHP-V8Js
○ Speed up the the first load
References● Janssen, Cory, “What is a Bus Topology?”, Techopedia. [Online]. Available:
https://www.techopedia.com/definition/17045/bus-topology. [Accessed:
27-09-2016]
● Ubuntu, “Network File System (NFS)”. [Online]. Available:
https://help.ubuntu.com/lts/serverguide/network-file-system.html. [Accessed:
27-09-2016]
● OpenLDAP Foundation, “OpenLDAP, Main Page”. [Online]. Available:
http://www.openldap.org/. [Accessed: 27-09-2016]
● Webpack in Github, “webpack module bundler”. [Online]. Available:
https://webpack.github.io/. [Accessed: 27-09-2016]
References● callemall/material-ui from GitHub, “Material-UI: React Components that
Implement Google's Material Design.”. [Online]. Available:
http://www.material-ui.com/#/. [Accessed: 27-09-2016]
● securingsincity/react-ace from GitHub, “securingsincity/react-ace: React Ace
Component”. [Online]. Available:https://github.com/securingsincity/react-ace.
[Accessed: 07-01-2017]
● Facebook in Github, “A Javascript Library For Building User Interfaces | React”.
[Online]. Available: https://facebook.github.io/react/. [Accessed: 27-09-2016]
● eactjs/redux from GitHub, “Read Me · Redux”. [Online]. Available:
http://redux.js.org/. [Accessed: 07-01-2017]
References● reactjs/react-php-v8js from GitHub, “React-PHP-V8Js”. [Online]. Available:
https://github.com/reactjs/react-php-v8js. [Accessed: 07-01-2017]
END