01 Goals
Project Goals
- Established a sustainable data integration system.
- Combined AI technology to predict various sustainable development goals and assist with manual annotation.
The Challenge
When introducing the new system to well-established educational institutions, there may be resistance to adoption due to varying levels of responsibility among different units. Therefore, in the design, I adopted a multi-module system architecture to facilitate hierarchical management by various units and encourage administrative staff to use the system.
02 Overview
Project Overview
Meeting the diverse stakeholder needs
- Requirements for NTHU to external presentation: Official website needs to be optimized for SEO, UI/UX design, loading speed, and designed to be cross-screen and multilingual.
- Requirements for the Regional Innovation Center to oversee and integrate all campus data: The RIC is responsible for managing the sustainability business of the entire campus and providing a "management platform" and "content management system" to complete related business.
- Requirements for colleges and administrative units to submit projects and integrate data: The "management platform" assists each unit in completing project submissions and data reporting.
- Requirements for professors to annotate research: Using AI to assist professor in annotating research and reducing their workload.
03 Functions
Core Functions
1. Official Website and Admin CMS
This system module mainly manages the facade of Tsing-Hua Sustainability, including the publication of events and news. Administrators can use the CMS to update the information and synchronize it to the official website.
2. Sustainability Project System and Unit CMS
All colleges and administrative units can upload sustainable projects from their CMS. These data will be displayed on the homepage of the website and serve as important materials for sustainable evaluation.
3. Unit Sub-site System
Each unit can quickly build its own dedicated sustainability website and customize sustainability classifications to showcase different views on SDGs
4. Professor Research System
Provides AI-assisted labeling of research for teachers. These results will be aggregated and analyzed to gain real-time insights into the sustainability direction of the school's research efforts.
5. AI Labeling System
We collect research data from Scopus and internal sources that have been annotated, and use deep learning techniques to train a predictive model for sustainability goals. The input data is research English abstracts, and the output is the probability values for each goal.
6. THE、STARS Reporting System
The administrator CMS allows for schema settings and assigning specific questions to units for completion, these data can then be summarized back to the system.
7. Sustainability Certificate System
Choose a sustainable goal, read the pledge, and finally sign electronically to complete the online sustainability certificate.
04 System Design
System Design
There are multiple functional modules in the system, and it is important to pay attention to the decoupling and scalability of each module, including the planning of front-end components and the management of API design for each backend service.
For server deployment, Nuxt and Flask Fastapi will each build their own server services, and Nginx is needed to act as a Proxy Server.
1. Frontend
Choose the SSR Nuxt framework to optimize SEO.
API encapsulation
Unified management of axios instances, setting up interceptors before and after requests. Based on different entities, API modules are created for unified export and import.
Modularization of SCSS styles
Uniform repetitive components and theme styles are imported into main.scss for global style invocation.
Vuex
Store data or user information that is repeatedly used by multiple components in Session Storage to reduce redundant API calls.
Pagination / Infinite Scroll
To optimize user experience, we use Skeleton Loading on pages that require waiting for data to load, and use infinite scroll to make data loading smoother.
i18n
Introduce i18n and create a multilingual website.
Utils & Services Management
Modularize the utils and services used by multiple modules (such as the file upload service), and provide them for functional calls on the required pages.
Web performance optimization
- Nginx set caching
- Webpack Plugin Uglify, reducing the size of chunks after building
2. Backend
Compared to other Python frameworks, FastAPI strictly defines the schema specifications, making API maintenance easier. It can also automatically generate Swagger API and comes with built-in asynchronous features to improve backend performance.
API Design
Ensure that the API follows Restful design principles and maintains good scalability.
Modularization of Common Functionality
Modularize some common functionalities and external service modules, providing global calls to the backend.
Caching Strategy
Some pages require presenting overall statistical data. As this data is not real-time, it can be cached first, and then re-statistic refreshed after expiration.