Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/balazshevesi/nar-slutar-lektionen
⏰ En webapp för att ha koll på när lektionen slutar/börjar. Utnyttjar skola24as API
https://github.com/balazshevesi/nar-slutar-lektionen
aws-amplify cors eslint frontend-development next-js prettier react-js react-server-components skola24 tailwind-css time-keeping typescript web-development
Last synced: 23 days ago
JSON representation
⏰ En webapp för att ha koll på när lektionen slutar/börjar. Utnyttjar skola24as API
- Host: GitHub
- URL: https://github.com/balazshevesi/nar-slutar-lektionen
- Owner: balazshevesi
- License: mit
- Created: 2023-09-18T10:05:20.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-05T10:13:36.000Z (10 months ago)
- Last Synced: 2024-11-11T19:41:24.129Z (3 months ago)
- Topics: aws-amplify, cors, eslint, frontend-development, next-js, prettier, react-js, react-server-components, skola24, tailwind-css, time-keeping, typescript, web-development
- Language: TypeScript
- Homepage: https://när-slutar-lektionen.net
- Size: 7.63 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
när-slutar-lektionen.net ⏳
"När slutar lektionen?" är den vanligaste frågan man ställer i skolan. Detta är ett svar
---
OBS att inte alla scheman fungerar korrekt eftersom att vissa skolor väljer att inte använda skola24s tjänster trots att de har köpt in de.
# Innehåll
- [Tech Stack](#-tech-stack)
- [Server Komponenter](#-server-komponenter)
- [Hosting](#-hosting)
- [Skola24s API](#-skola24as-api)
- [CORS](#-CORS)
- [Projektplan och rapport](#-projektplan-och-rapport)
- [Framtid](#-projektplan-och-rapport)
# 🧑💻 Tech Stack
## Production
- **Framework:** [React.js](https://react.dev/)
- **Meta Framework:** [Next.js](https://nextjs.org/), med app router och server komponenter
- **Styling:** [TailwindCSS](https://tailwindcss.com/)
## Development
- **Code Formating:** [Prettier](https://prettier.io/), med [import-sort-plugin](https://www.npmjs.com/package/@trivago/prettier-plugin-sort-imports) och [tailwind-plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss)
- **Linting:** [ESlint](https://eslint.org/), med inställningarna som Next.js kommer med
- **Språk:** [Typescript](https://www.typescriptlang.org/)
# 🖥 Server komponenter
Appen utnyttjar server komponenterna i next.js 14s app router. All data fetching sker med hjälp av de. Det är bara de interaktiva grejerna som är [klient komponenter](https://react.dev/reference/react/use-client)
# 👾 Skola24as API
Skola24as API är odkumenterad så jag var tvungen att "reverse-engeneer"a delar av den. Detta gjorde jag med Chrome Dev Tools och Thunder Client (liknar Postman).
Här är min implementation av API anropen:
[Mapp med util funktioner för att hämta pussel bitarna](src/utils/scheduleFetching)
[Fil som sätter ihop pussel bitarna](src/app/[kommun]/[skola]/[schema-id]/fetchSchedule.ts)
## [1. Först behöver man hämta en "signatur"](src/utils/scheduleFetching/getSignature.ts)
### Endpoint
```http
POST https://web.skola24.se/api/encrypt/signature
```
### Headers
| key | value |
| -------------- | -------------------------------------- |
| `Content-Type` | `application/json` |
| `X-Scope` | `8a22163c-8662-4535-9050-bc5e1923df48` |
### Body
```js
{
signature: "[schemaID]";
}
```
## [2. Sedan behöver man hämta en "key"](src/utils/scheduleFetching/getKey.ts)
### Endpoint
```http
POST https://web.skola24.se/api/get/timetable/render/key
```
### Headers
| key | value |
| -------------- | -------------------------------------- |
| `Content-Type` | `application/json` |
| `X-Scope` | `8a22163c-8662-4535-9050-bc5e1923df48` |
### Body
```js
{
}
```
Bodyn _måste_ inkluderas trots att den ska vara tom
### OBS
Denna request fungerar _inte_ med en javascripts fetch, man behöver axios eller något annat. Jag vet inte exakt varför, men jag misstänker att det har med headers att göra.
## [3. Sedan behöver man hämta "schoolyear"](/src/utils/scheduleFetching/getSchoolYear.ts)
### Endpoint
```http
POST https://web.skola24.se/api/get/active/school/years
```
### Headers
| key | value |
| -------------- | -------------------------------------- |
| `Content-Type` | `application/json` |
| `X-Scope` | `8a22163c-8662-4535-9050-bc5e1923df48` |
### Body
```js
{
getTimetableViewerUnitsRequest: {
hostName: "[kommun - namn]".skola24.se;
}
checkSchoolYearsFeatures: false;
}
```
## [4. Sedan behöver man hämta "unitGuid"](/src/utils/scheduleFetching/getUnitGuidFromSkola.ts)
### Endpoint
```http
POST https://web.skola24.se/api/services/skola24/get/timetable/viewer/units
```
### Headers
| key | value |
| -------------- | -------------------------------------- |
| `Content-Type` | `application/json` |
| `X-Scope` | `8a22163c-8662-4535-9050-bc5e1923df48` |
### Body
```js
{
getTimetableViewerUnitsRequest: {
hostName: [kommun - namn].skola24.se;
}
}
```
## [5. Sedan är det dags att hämta schemat](src/app/[kommun]/[skola]/[schema-id]/fetchSchedule.ts)
### Endpoint
```http
POST https://web.skola24.se/api/render/timetable
```
### Headers
| key | value |
| -------------- | -------------------------------------- |
| `Content-Type` | `application/json` |
| `X-Scope` | `8a22163c-8662-4535-9050-bc5e1923df48` |
### Body
```js
{
renderKey: "[key ifrån steg 2]",
selection: "[signatur ifrån steg 1]",
scheduleDay: "[vecko dag, representerad av en siffra]",
week: "[vecka]",
year: "[år]",
host: "[kommun namn]".skola24.se,
unitGuid: "[unitGuid, ifrån steg 4]",
schoolYear: "[schoolYear, ifrån steg 3]",
startDate: null,
endDate: null,
blackAndWhite: false,
width: 125,
height: 550,
selectionType: 4,
showHeader: false,
periodText: "",
privateFreeTextMode: false,
privateSelectionMode: null,
customerKey: "",
}
```
# 🤮 CORS
Om man försöker anropa Skola24as api ifrån webläsaren så kommer man få CORS error, så man är tvungen att göra anropen i en annan miljö.
# 🛜 Hosting
För hosting använder jag [AWS amplify](https://aws.amazon.com/amplify/), med _nästan_ default inställningarna för next.js, jag har bara bytt build imagen till "Amazon Linux:2023 image" och laggt till " - nvm use 18" i build commands. Jag har gjort de ändringarna eftersom den inte ville bygga annars.
# 📚 Projektplan och rapport
Jag valde att bygga detta som ett projekt till kursen "teknik specialisering" (TEKTEK00S) [länk till skolverkets hemsida](https://www.skolverket.se/undervisning/gymnasieskolan/laroplan-program-och-amnen-i-gymnasieskolan/gymnasieprogrammen/program/gymnasieingenjor---vidareutbildning-i-form-av-ett-fjarde-tekniskt-ar;jsessionid=532015DC21C3C52A0D018832804C8BA9?url=-996270488%2Fsyllabuscw%2Fjsp%2Fsubject.htm%3FsubjectCode%3DTEK%26courseCode%3DTEKTEK00S%26lang%3D%26tos%3Dgy&sv.url=12.189c87ae1623366ff3738d9#anchor_TEKTEK00S)
[Läs projektplanen](https://docs.google.com/document/d/1rBdQZsH2nr4DTf1uHy5NT9x7SsOZKTwEdwRVmA8y-Uo/edit?usp=sharing)
[Läs rapporten](https://docs.google.com/document/d/1pqbqXavDd5imzPtROEYdAQcy4M8G9sKpvyfnodd--x8/edit?usp=sharing)
OBS att jag försökte skriva rapporten med lite enklare språk så att även de som inte är insatta i programmering ska fatta.
# 🔮 Framtid
- [ ] Kanske kötta upp reklamer om sidan blir mer populär
- [ ] Kanske bygga ut mitt eget schema vy grej
- [ ] Kanske göra källkoden lite finare, t.ex. lägga till types där det är any