student research project management system · §justification on design and front-end architecture...

Student Research Project Management System

COMP8755

Supervised by

Dr Peter Strazdins

Euikyum Yang (u6435883)

[email protected]

Research School of Computer Science

Australian National University

Roadmap

§ Motivation

§ Project Scope

§ Contract Process Flow

§ Justification on Design and Front-End Architecture

§ System Overview

§ Front-End Overview

§ Highlights

§ Reference

Motivation

§ Project Scope



§ System Overview


§ Highlights

Motivation

§ A constant number of students go through the “Uncertain Admin Process” every semester, and the number will grow

2016 S2 2019 S2

17 104

600%

Motivation

§ Unreliable communication methods (e.g. Email, Handed-in contract at CECS Office)

§ Sometimes the contract is lost

Contract ?

Motivation

§ Hardly to keep track of the process

§ Each stage of the process tends to delay

DELAYED

Motivation

§ A constant number of students go through the “Uncertain Admin Process” every semester, and the number will grow

§ Unreliable communication methods (e.g. Email, Handed-in contract at CECS)

§ Sometimes the contract is lost

§ Hardly to keep track of the process

§ Each process tends to have a time latency

§ The whole process takes a long timebecause of these reasons

Project Scope

§ Motivation



§ System Overview


§ Highlights

Project Scope

§ Front-End of the application

§ UI/UX based on Human Computer Interaction(HCI) Practice

Contract Process Flow

§ Motivation

§ Project Scope


§ System Overview


§ Highlights

Contract Process Flow

Contract Process FlowStates of the Contract during the process

Justification on Design and

Front-End Architecture

§ Motivation

§ Project Scope


§ System Overview


§ Highlights

Size of the application: Small - Medium

Multiple Functions

Data Traffic

Connection between an application and server’s back-end

Time to deliver: 3-4 Months

ONE SEMESTER LIMITED TIME TECHNOLOGY SHOULD BE EASY TO LEARN

Scalability

POTENTIAL GROWTH OPEN FOR EXTENSION

Front-EndImplementation

Comparison

§JavaScript?

§Or using Framework like Angular?

JavaScript§ Freedom of implementing whatever

architecture I want and need

§ Flexible in manipulation of web-page

§ Possible combinations with JS Libraries (e.g. jQuery)

§ Spend more time to implement functions

Angular

§ Based on Typescript which is a syntactical superset of JavaScript

§ Component based structure

§ Automation in the framework

§ Makes the application more manageable

§ MVC Pattern Framework

UI FrameworkComparison

§ Responsive Design

§ Quality Documentation

§ Compatible across the browsers

§ Focused on UX

§ Modern look

§ Optimized for Angular

System Overview

§ Motivation

§ Project Scope




§ Highlights

System Overview

Front-End Overview

§ Motivation

§ Project Scope



§ System Overview

§ Highlights

Front-End Overview Angular Structure

App Module

Route

A Component

HTML CSS TypeScript

B Component

HTML CSS TypeScript

...

Service(HTTP)

Front-End OverviewHeader

Side Navigation

Body

Code Example

§ Divided from the top level

§ <app-someapp></app-someapp>

§ <router-outlet></router-outlet>

Front-End Overview Contract Form

Code Example

§ *ngIf – Angular HTML manipulation and many more!

§ {{}} – Enables JavaScript

Code Example

§ <mat-something> is part of Angular Material UI Framework!

§ Got tag specified Manipulation

Code Example

§ Form Group

§ Form Validation Check

Form Group

FormControl

Element Validator

Front-End Overview Contract Management

Code Example

§ Panel Header information is retrieved from the Back-End

Code Example

§ Angular Material Grid System


§ Examiner Nomination Dialog

§Branching the form with contract’s state and examiner’s nomination

Code Example

Highlights

§ Motivation

§ Project Scope



§ System Overview


Dynamic Form

Elements Form

Form Elements Base File

§ Separation of the form generation and the contents of the form

ReferenceAlca, M., 2016. Vanilla javascript vs. frameworks and li-braries — finding a good balance. https://hashnode.com/post/ vanilla-javascript-vs-frameworks-and-libraries-finding-a-good-balance-civ1zfus90pphdc53q8vtakz5

Bulatovych, D. Choosing a tech stack for the full-cycle web application development. https://yalantis.com/blog/tech-stack-for-web-app-development/

Consortium, W. W. W., 1991. First mention of html tags on the www-talk mailing list. http://lists.w3.org/Archives/Public/www-talk/1991SepOct/0003.html

Gimeno, A., 2018. The deepest reason why modern javascript frameworks exist. https://medium.com/dailyjs/ the-deepest-reason-why-modern-javascript-frameworks-exist-933b86ebc445

Google. Angular material. https://material.angular.io/

Lett, J., 2019. What are the pros and cons of using bootstrap in web development? https://bootstrapcreative.com/pros-cons-using-bootstrap-web-development/

Normand, E., 2017. Why do we use web frameworks? https://lispcast.com/ why-web-frameworks/

ReQtest, 2018. Requirements analysis – understanding the basics. https://reqtest.com/ requirements-blog/requirements-analysis/

Tognazzini, B., 2014. First principles of interaction design. https://asktog.com/atc/ principles-of-interaction-design/

Zietel, M., 2018. Bootstrap or material design? what is better for angular 6? https://www.futurum.tech/blog/index.php/2018/06/04/ bootstrap-or-material-design-what-is-better-for-angular-6/

Any Questions?

student research project management system · §justification on design and front-end architecture...

Documents