The new administraion site makes it possible to create and manage course memos.
The course information project (KIP) is an initiative at KTH that was launched in 2018 to improve the quality and availability of information about KTH:s courses. The background to the project is, among other things, that it was difficult for the student to find information about the courses and even more difficult to compare information about several courses. The reason for the problems is scattered course information in several places and that there is no uniformity or assigned places for the course information. The project takes measures to consolidate course information into two locations and to present the information in a manner that is uniform for KTH. The student should find the right information about the course, depending on their needs. The result of the project is a public course site where the correct course information is collected and presented uniformly. Also, a tool is developed for teachers to enter and publish course information. Eventually, this will lead to the student making better decisions based on their needs, and it will also reduce the burden on teachers and administration regarding questions and support for the student.
Kurs-pm-data-admin-web
is a microservice to save course memos data by sending it to kurs-pm-data-api
. It uses React
, MobX
, and is based on https://github.com/KTH/node-web.
🏠 Homepage
Course memos servise can be used by teachers, course responsibles and examiners to create a more detailed overview of a course. To simplify work, default values and course syllabus information are provided in memo. User can create a new course memo, save it as a draft and publish it as well as user can edit already published course memos to keep students updated with last changes in course memo.
Application is fetching/saving data from/to https://github.com/KTH/kurs-pm-data-api.
- https://github.com/KTH/kurs-pm-data-api
- https://github.com/KTH/kurs-pm-web
- https://github.com/KTH/node-web
- Node.js 18
Because OICD library is compatible only with node 12.0.0 or > 14.2.0
Secrets during local development are stored in a gitignored .env
file (env.in
can be used as template for your .env
file). More details about environment variable setup and secrets can be found in confluence.
First time you might need to use options --ignore-scripts
because of npm resolutions:
npm install
You might need to install as well:
npm install cross-env
npm install concurrently
Start the service on http://localhost:3000/kursinfoadmin/kurs-pm-data/:courseCode.
npm run start-dev
Choose to Create a new memo http://localhost:3000/kursinfoadmin/kurs-pm-data/BB2290/
Choose to edit published memo http://localhost:3000/kursinfoadmin/kurs-pm-data/published/BB2290/
Editor to fill in course memo http://localhost:3000/kursinfoadmin/kurs-pm-data/BB2290/BB229020191-1
Preview course memo http://localhost:3000/kursinfoadmin/kurs-pm-data/BB2290/BB229020191-1/preview
BB229020191-1
är memoEndPoint which is used as a bookmark for a course memo even if its data changed, draft is created, published, edited an so on.
It's possible to use debugging options available in Visual Studio Code
Add a file launch.json
to .vscode
directory :
- Microsoft
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Debug kurs-pm-data-admin-web",
"program": "${workspaceFolder}\\app.js",
"envFile": "${workspaceFolder}\\.env",
"env": {
"NODE_ENV": "development"
}
}
]
}
- Mac, Unix and so on
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Debug kurs-pm-data-admin-web",
"program": "${workspaceFolder}/app.js",
"envFile": "${workspaceFolder}/.env",
"env": {
"NODE_ENV": "development"
}
}
]
}
Secrets and docker-compose are located in cellus-registry.
Used:
npm run start
npm run test
Run concurrently
npm run start-dev
npm run cypress:open
Copy docker-compose.yml.in
to docker-compose.yml
and make necessary changes, if any.
docker-compose up
Status:
To monitor status: http://localhost:3000/kursinfoadmin/kurs-pm-data/\_monitor
To see branch information: http://localhost:3000/kursinfoadmin/kurs-pm-data/\_about
To see more detailed behaviour in project used application insights: f.e., kursinfo-web-stage-application-insights-kthse
The deployment process is described in Build, release, deploy. Technical details, such as configuration, is described in How to deploy your 🐳 application using Cellus-Registy and 🔧 How To Configure Your Application For The Pipeline.
ansible-vault edit secrets.env
Password find in gsv-key vault. More information you can find in confluence.
KURS_PM_DATA_API_URI=http://localhost:3001/api/kurs-pm-data
KURS_PM_DATA_API_KEY=[generated in kurs-pm-data-admin-api key for admin page]
KURS_INFO_API_URI=https://api-r.referens.sys.kth.se/api/kursinfo
KURS_INFO_API_KEY=[generated in kursinfo-api key for public pages, just for image displaying and selling text]
REDIS_URI=[redis connection string, azure]
OIDC_APPLICATION_ID=<FROM ADFS>
OIDC_CLIENT_SECRET=<FROM ADFS>
OIDC_TOKEN_SECRET=<Random string>
SESSION_SECRET=[generate session secret]
SESSION_KEY=kurs-pm-data-admin-web.pid
APPLICATIONINSIGHTS_CONNECTION_STRING=[Azure, Application insights, connection string, can be found in Overview]
/* Connection Properties of UG Rest Api to fetch names of course staff */
UG_REST_AUTH_API_TOKEN_URI=https://<LOGIN_HOST>/adfs/oauth2/token
UG_REST_AUTH_CLIENT_ID=<FROM AZURE KEYVAULT>
UG_REST_AUTH_CLIENT_SECRET=<FROM AZURE KEYVAULT>
UG_REST_API_URI=https://<UG_URL>
UG_REST_API_SUBSCRIPTION_KEY=<FROM AZURE INTEGRAL OR KEYVAULT>
IMPORTANT! If @tinymce/tinymce-react is updated then a self-hosted version of TinyMce might need an update as well
- "@tinymce/tinymce-react": "^3.13.0",
- TinyMce version: 5.10.3
In tinymce
catalog located tinymce api
- it makes the load of editors faster and more robust
- Download TinyMCE Dev Package (.zip). Read about it https://www.tiny.cloud/docs/general-configuration-guide/advanced-install/#self-hostedinstall
- Unzip TinyMCE Dev Package and go to
js/tinymce
- Copy all folders into tinymce folder, EXCEPT
langs
folder.langs
includes customized Swedish translations/texts.
Translations for swedish translations located in tinymce > langs > sv_SE.js
It was customized:
'Header 4': 'Rubrik 4'
was changed toHeading: 'Rubrik'
Paragraph: 'Avsnitt'
was changed to'Body text': 'Brödtext'
To make this changes viable, in the configuration of block_formats was changed to:
block_formats: 'Body text=p;Heading=h4',
and define language
if it is Swedish it will be: sv_SE
In js > app > util > editorInitConf.js
defined content_css: '/kursinfoadmin/kurs-pm-data/static/app.css'
It uses local parsed app.css (from local node-web.scss).
Configuration is in js > app > util > editorInitConf.js
const table = {
table_default_attributes: {
border: '0',
},
table_default_styles: {},
content_css: '/kursinfoadmin/kurs-pm-data/static/app.css',
}
const editorConf = language => ({
menubar: false,
toolbar_mode: 'wrap',
toolbar_sticky: true,
plugins: [
'advlist autolink autoresize lists link charmap preview anchor',
'searchreplace visualblocks code fullscreen',
'table paste code help wordcount',
],
...table,
language,
toolbar1: `code | undo redo | formatselect | bold italic underline subscript superscript charmap |
searchreplace | link | fullscreen `,
toolbar2: `bullist numlist outdent indent | table | removeformat | help`,
block_formats: 'Body text=p;Heading=h4',
tinymceScriptSrc: '/kursinfoadmin/kurs-pm-data/static/tinymce/tinymce.min.js',
})
toolbar_sticky: true
is to make editor meny to be on top of editor if it's longer then screan.toolbar_mode: 'wrap'
. Wrap toolbar into two rows.toolbar1
andtoolbar2
defines which buttons to display on 1st and 2nd rows.content_css
is needed mostly to style tables and fontsblock_formats
user can create only Paragraphs and headers-h4 inside editor.table_default_styles
is to cancel default styles of tablestable_default_attributes
is to make border invisible viaborder: '0'
language
is needed only for Swedish translations: sv_SE. Otherwise it is 'null'.tinymceScriptSrc
path to a local TinyMce js file
To be able to run desktop Linux apps(Ansible Vault or other) on Windows 10 and be able to use Bash commands or tools with and/or plan to deploy to a Linux server or use Docker containers from VSCode we need Linux distribution (ie. Ubuntu) running on the Windows Subsystem for Linux (WSL). Latest version of Windows allows us to do that by installing WLS 2. Here is everything you need to do to get there.
- Install Windows Subsystem for Linux (WSL), including a Linux distribution (like Ubuntu) and make sure it is running in WSL 2 mode.(https://docs.microsoft.com/en-us/windows/wsl/install)
- Install the Microsoft Terminal app to start exploring your newly-installed Ubuntu.(https://www.microsoft.com/sv-se/p/windows-terminal/9n0dx20hk701?activetab=pivot:overviewtab)
- Change in VSCode in Terminal settings your default shell to wsl.
Now you are able to use Bash commands or tools.
👤 KTH
- Website: https://kth.github.io/
- Github: @KTH