Student Research Project Management System · §Justification on Design and Front-End Architecture...
Transcript of Student Research Project Management System · §Justification on Design and Front-End Architecture...
![Page 1: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/1.jpg)
Student Research Project Management System
COMP8755
Supervised by
Dr Peter Strazdins
Euikyum Yang (u6435883)
Research School of Computer Science
Australian National University
![Page 2: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/2.jpg)
Roadmap
§ Motivation
§ Project Scope
§ Contract Process Flow
§ Justification on Design and Front-End Architecture
§ System Overview
§ Front-End Overview
§ Highlights
§ Reference
![Page 3: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/3.jpg)
Motivation
§ Project Scope
§ Contract Process Flow
§ Justification on Design and Front-End Architecture
§ System Overview
§ Front-End Overview
§ Highlights
![Page 4: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/4.jpg)
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%
![Page 5: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/5.jpg)
Motivation
§ Unreliable communication methods (e.g. Email, Handed-in contract at CECS Office)
§ Sometimes the contract is lost
Contract ?
![Page 6: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/6.jpg)
Motivation
§ Hardly to keep track of the process
§ Each stage of the process tends to delay
DELAYED
![Page 7: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/7.jpg)
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
![Page 8: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/8.jpg)
Project Scope
§ Motivation
§ Contract Process Flow
§ Justification on Design and Front-End Architecture
§ System Overview
§ Front-End Overview
§ Highlights
![Page 9: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/9.jpg)
Project Scope
§ Front-End of the application
§ UI/UX based on Human Computer Interaction(HCI) Practice
![Page 10: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/10.jpg)
Contract Process Flow
§ Motivation
§ Project Scope
§ Justification on Design and Front-End Architecture
§ System Overview
§ Front-End Overview
§ Highlights
![Page 11: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/11.jpg)
Contract Process Flow
![Page 12: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/12.jpg)
Contract Process FlowStates of the Contract during the process
![Page 13: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/13.jpg)
Justification on Design and
Front-End Architecture
§ Motivation
§ Project Scope
§ Contract Process Flow
§ System Overview
§ Front-End Overview
§ Highlights
![Page 14: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/14.jpg)
Size of the application: Small - Medium
Multiple Functions
Data Traffic
Connection between an application and server’s back-end
![Page 15: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/15.jpg)
Time to deliver: 3-4 Months
ONE SEMESTER LIMITED TIME TECHNOLOGY SHOULD BE EASY TO LEARN
![Page 16: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/16.jpg)
Scalability
POTENTIAL GROWTH OPEN FOR EXTENSION
![Page 17: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/17.jpg)
Front-EndImplementation
Comparison
§JavaScript?
§Or using Framework like Angular?
![Page 18: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/18.jpg)
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
![Page 19: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/19.jpg)
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
![Page 20: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/20.jpg)
UI FrameworkComparison
§ Responsive Design
§ Quality Documentation
§ Compatible across the browsers
§ Focused on UX
§ Modern look
§ Optimized for Angular
![Page 21: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/21.jpg)
System Overview
§ Motivation
§ Project Scope
§ Contract Process Flow
§ Justification on Design and Front-End Architecture
§ Front-End Overview
§ Highlights
![Page 22: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/22.jpg)
System Overview
![Page 23: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/23.jpg)
Front-End Overview
§ Motivation
§ Project Scope
§ Contract Process Flow
§ Justification on Design and Front-End Architecture
§ System Overview
§ Highlights
![Page 24: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/24.jpg)
Front-End Overview Angular Structure
App Module
Route
A Component
HTML CSS TypeScript
B Component
HTML CSS TypeScript
...
Service(HTTP)
![Page 25: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/25.jpg)
Front-End OverviewHeader
Side Navigation
Body
![Page 26: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/26.jpg)
Code Example
§ Divided from the top level
§ <app-someapp></app-someapp>
§ <router-outlet></router-outlet>
![Page 27: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/27.jpg)
Front-End Overview Contract Form
![Page 28: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/28.jpg)
Code Example
§ *ngIf – Angular HTML manipulation and many more!
§ {{}} – Enables JavaScript
![Page 29: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/29.jpg)
Front-End Overview Contract Form
![Page 30: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/30.jpg)
Code Example
§ <mat-something> is part of Angular Material UI Framework!
§ Got tag specified Manipulation
![Page 31: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/31.jpg)
Front-End Overview Contract Form
![Page 32: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/32.jpg)
Code Example
§ Form Group
§ Form Validation Check
Form Group
FormControl
Element Validator
![Page 33: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/33.jpg)
Front-End Overview Contract Management
![Page 34: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/34.jpg)
Code Example
§ Panel Header information is retrieved from the Back-End
![Page 35: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/35.jpg)
Front-End Overview Contract Management
![Page 36: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/36.jpg)
Code Example
§ Angular Material Grid System
![Page 37: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/37.jpg)
Front-End Overview Contract Management
![Page 38: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/38.jpg)
Front-End Overview Contract Management
§ Examiner Nomination Dialog
![Page 39: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/39.jpg)
§Branching the form with contract’s state and examiner’s nomination
Code Example
![Page 40: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/40.jpg)
Highlights
§ Motivation
§ Project Scope
§ Contract Process Flow
§ Justification on Design and Front-End Architecture
§ System Overview
§ Front-End Overview
![Page 41: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/41.jpg)
Dynamic Form
Elements Form
Form Elements Base File
§ Separation of the form generation and the contents of the form
![Page 42: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/42.jpg)
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 mod- ern 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/
![Page 43: Student Research Project Management System · §Justification on Design and Front-End Architecture §System Overview §Front-End Overview §Highlights. Project Scope §Front-End of](https://reader035.fdocuments.in/reader035/viewer/2022071019/5fd2e0f0907b7306d771a0ec/html5/thumbnails/43.jpg)
Any Questions?