Skip to content

⏰ En webapp för att ha koll på när lektionen slutar/börjar. Utnyttjar skola24as API

Notifications You must be signed in to change notification settings

balazshevesi/nar-slutar-lektionen

Repository files navigation

"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

Production

Development

🖥 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

👾 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

Fil som sätter ihop pussel bitarna

Endpoint

POST https://web.skola24.se/api/encrypt/signature

Headers

key value
Content-Type application/json
X-Scope 8a22163c-8662-4535-9050-bc5e1923df48

Body

{
  signature: "[schemaID]";
}

Endpoint

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

{
}

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.

Endpoint

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

{
  getTimetableViewerUnitsRequest: {
    hostName: "[kommun - namn]".skola24.se;
  }
  checkSchoolYearsFeatures: false;
}

Endpoint

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

{
  getTimetableViewerUnitsRequest: {
    hostName: [kommun - namn].skola24.se;
  }
}

Endpoint

POST https://web.skola24.se/api/render/timetable

Headers

key value
Content-Type application/json
X-Scope 8a22163c-8662-4535-9050-bc5e1923df48

Body

{
  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, 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

Läs projektplanen

Läs rapporten

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