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.
- Framework: React.js
- Meta Framework: Next.js, med app router och server komponenter
- Styling: TailwindCSS
- Code Formating: Prettier, med import-sort-plugin och tailwind-plugin
- Linting: ESlint, med inställningarna som Next.js kommer med
- Språk: Typescript
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
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
Fil som sätter ihop pussel bitarna
POST https://web.skola24.se/api/encrypt/signature| key | value |
|---|---|
Content-Type |
application/json |
X-Scope |
8a22163c-8662-4535-9050-bc5e1923df48 |
{
signature: "[schemaID]";
}POST https://web.skola24.se/api/get/timetable/render/key| key | value |
|---|---|
Content-Type |
application/json |
X-Scope |
8a22163c-8662-4535-9050-bc5e1923df48 |
{
}Bodyn måste inkluderas trots att den ska vara tom
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.
POST https://web.skola24.se/api/get/active/school/years| key | value |
|---|---|
Content-Type |
application/json |
X-Scope |
8a22163c-8662-4535-9050-bc5e1923df48 |
{
getTimetableViewerUnitsRequest: {
hostName: "[kommun - namn]".skola24.se;
}
checkSchoolYearsFeatures: false;
}POST https://web.skola24.se/api/services/skola24/get/timetable/viewer/units| key | value |
|---|---|
Content-Type |
application/json |
X-Scope |
8a22163c-8662-4535-9050-bc5e1923df48 |
{
getTimetableViewerUnitsRequest: {
hostName: [kommun - namn].skola24.se;
}
}POST https://web.skola24.se/api/render/timetable| key | value |
|---|---|
Content-Type |
application/json |
X-Scope |
8a22163c-8662-4535-9050-bc5e1923df48 |
{
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: "",
}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ö.
För hosting använder jag AWS 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.
Jag valde att bygga detta som ett projekt till kursen "teknik specialisering" (TEKTEK00S) länk till skolverkets hemsida
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.
-
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