FYP Interim Presentation

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