Symulator CyberBezpieczeństwa – dokumentacja

Spis odnośników

CyberSafe EDU Simulator — dokumentacja funkcjonalna i techniczna

1. Cel aplikacji

CyberSafe EDU Simulator to dwujęzyczna aplikacja edukacyjna PL/EN przeznaczona do nauki cyberbezpieczeństwa w szkole. Łączy interaktywne misje, scenariusze decyzyjne, tryb kampanii, pracę klasową, system osiągnięć, raportowanie, tryby nauczyciela i administratora oraz funkcje instalowalnej aplikacji PWA.

Aplikacja została zaprojektowana tak, aby mogła być używana zarówno indywidualnie przez ucznia, jak i w ramach pracy z klasą prowadzonej przez nauczyciela.

Główne założenia:

  • nauka cyberbezpieczeństwa przez praktyczne decyzje i symulacje;
  • brak wykonywania niebezpiecznych operacji na prawdziwym systemie;
  • 43 wbudowane misje systemowe;
  • pięć pakietów tematycznych;
  • trzy role: Uczeń, Nauczyciel, Administrator;
  • lokalne i serwerowe profile uczniów;
  • praca online i offline;
  • wersja polska i angielska;
  • raportowanie wyników;
  • możliwość tworzenia własnych scenariuszy i misji;
  • możliwość późniejszej integracji z innymi systemami szkolnymi przez API READ-ONLY.

2. Adres i główne pliki aplikacji

Docelowy adres aplikacji:

https://safe.komputerowka.pl

Najważniejsze pliki:

PlikFunkcja
1
index.html
landing page aplikacji
1
start.html
główny plik symulatora
1
manifest.webmanifest
manifest aplikacji PWA
1
service-worker.js
obsługa cache i działania offline
1
server/api.php
główny backend PHP
1
docs/opis-aplikacji.md
dokumentacja aplikacji
1
docs/api-statystyki.md
dokumentacja API statystycznego

Aplikacja jest przygotowana do działania przez serwer HTTP/HTTPS z obsługą PHP 8.x.


3. Role użytkowników

3.1. Uczeń

Uczeń może korzystać z aplikacji w dwóch modelach.

Profil lokalny

Profil działa bez obowiązkowego logowania.

Dane przechowywane lokalnie obejmują między innymi:

  • nazwę profilu;
  • XP;
  • ukończone misje;
  • historię prób;
  • najlepsze wyniki;
  • odznaki;
  • poziom ucznia;
  • kampanię;
  • Codzienne wyzwania;
  • Incydent dnia;
  • dane sezonowe;
  • ustawienia interfejsu;
  • preferencje dostępności;
  • Centrum zdarzeń.

Profil lokalny jest przechowywany przede wszystkim w

1
localStorage
.

Uczeń może również:

  • eksportować profil do pliku JSON;
  • importować profil z pliku JSON;
  • przenieść profil na inne urządzenie lub do innej przeglądarki;
  • połączyć profil z klasą za pomocą kodu klasy.

Konto serwerowe ucznia

Nauczyciel może utworzyć uczniowi pełne konto serwerowe.

Konto serwerowe umożliwia:

  • logowanie z innego komputera;
  • pobieranie postępu z serwera;
  • synchronizację XP;
  • synchronizację ukończonych misji;
  • synchronizację historii prób;
  • synchronizację odznak;
  • synchronizację Codziennych wyzwań;
  • synchronizację wyników Generatora incydentów;
  • pracę z klasą;
  • zmianę własnego hasła.

Konto ucznia jest przypisane do konkretnej klasy.


3.2. Nauczyciel

Panel nauczyciela jest chroniony loginem i hasłem.

Nauczyciel może:

  • tworzyć klasy;
  • edytować klasy;
  • generować kody klas;
  • przypisywać misje do klas;
  • ustalać poziom trudności;
  • blokować zestaw misji;
  • tworzyć własne zestawy misji;
  • korzystać z zestawów systemowych;
  • losować zestawy misji;
  • tworzyć konta uczniów;
  • blokować i odblokowywać konta uczniów;
  • przeglądać postęp uczniów;
  • analizować wyniki;
  • prowadzić Lekcję na żywo;
  • uruchamiać Tryb egzaminacyjny;
  • tworzyć drużyny;
  • konfigurować tablicę wyników;
  • przeglądać odznaki klasowe;
  • przeglądać rangi sezonowe;
  • tworzyć własne scenariusze;
  • tworzyć własne pięcioetapowe misje;
  • generować Raport PDF ucznia;
  • generować Raport PDF klasy;
  • eksportować wyniki do CSV i JSON.

3.3. Administrator

Administrator ma wszystkie uprawnienia nauczyciela oraz dodatkowe funkcje systemowe.

Administrator może:

  • utworzyć pierwsze konto administratora przy pierwszym uruchomieniu;
  • tworzyć konta nauczycieli;
  • blokować i odblokowywać nauczycieli;
  • przeglądać wszystkie klasy;
  • przeglądać dziennik audytu;
  • zarządzać backupem;
  • eksportować dane systemu;
  • importować backup;
  • eksportować konfigurację;
  • importować konfigurację;
  • zarządzać kluczami API;
  • unieważniać klucze API;
  • decydować, czy konkretny klucz API może zwracać dane identyfikujące uczniów.

4. Uwierzytelnianie i bezpieczeństwo kont

Backend korzysta z PHP.

Hasła są:

  • hashowane za pomocą
    1
    password_hash()
    ;
  • sprawdzane za pomocą
    1
    password_verify()
    ;
  • niewysyłane w postaci jawnej do plików danych;
  • przechowywane wyłącznie w postaci bezpiecznych hashy.

Dodatkowe zabezpieczenia:

  • sesje PHP;
  • blokada logowania po kolejnych błędnych próbach;
  • zmiana hasła wymaga podania aktualnego hasła;
  • po zmianie hasła sesja jest unieważniana;
  • administrator nie ma stałego fabrycznego hasła;
  • pierwsza konfiguracja administratora jest jednorazowa;
  • katalogi
    1
    server/data/
    i
    1
    server/config/
    są chronione przez
    1
    .htaccess
    .

5. Pięć pakietów misji

Aplikacja zawiera 43 wbudowane misje systemowe podzielone na pięć pakietów.


5.1. Pakiet 1 — Fundamenty cyberbezpieczeństwa

Misje 1–19.

  1. Silne hasła
  2. Phishing
  3. Fałszywe logowanie
  4. Publiczne Wi‑Fi
  5. Malware
  6. Ransomware
  7. Aktualizacje
  8. Antywirus
  9. Socjotechnika
  10. Media społecznościowe i prywatność
  11. Ślad cyfrowy
  12. Bezpieczeństwo telefonu
  13. Uprawnienia aplikacji
  14. Kody QR
  15. Kopia zapasowa i zasada 3-2-1
  16. Uwierzytelnianie 2FA
  17. Incydent bezpieczeństwa
  18. Cyber Escape Room
  19. Misja finałowa

Pakiet 1 stanowi kurs podstawowy.

Ukończenie wszystkich misji 1–19 odblokowuje certyfikat kursu podstawowego.


5.2. Pakiet 2 — Codzienne zagrożenia

Misje 20–25.

  1. Deepfake i treści AI
  2. Oszustwa BLIK
  3. Bezpieczne zakupy online
  4. Bezpieczeństwo komunikatorów
  5. Fałszywe konkursy i giveawaye
  6. Cyberprzemoc i nękanie

Pakiet posiada osobną odznakę za ukończenie.


5.3. Pakiet 3 — Bezpieczeństwo urządzeń i sieci

Misje 26–31.

  1. Router domowy
  2. Smart Home i IoT
  3. USB i nośniki zewnętrzne
  4. Bezpieczeństwo chmury
  5. Szyfrowanie danych
  6. Bezpieczne usuwanie danych

Pakiet obejmuje zagadnienia związane z urządzeniami, siecią lokalną, IoT, nośnikami i ochroną danych.


5.4. Pakiet 4 — Zaawansowane cyberbezpieczeństwo

Misje 32–37.

  1. SIM swapping
  2. Makra i dokumenty Office
  3. Firmware / BIOS / UEFI
  4. Bezpieczeństwo AI i chatbotów
  5. Zaawansowana analiza incydentów
  6. Scamy inwestycyjne i kryptowalutowe

Pakiet jest przeznaczony do bardziej zaawansowanej analizy zagrożeń.


5.5. Pakiet 5 — Tożsamość i prywatność

Misje 38–43.

  1. Kradzież tożsamości
  2. Wyciek danych
  3. Doxxing i ujawnianie danych
  4. Oszustwa telefoniczne / vishing
  5. Bezpieczeństwo dokumentów i skanów
  6. Dane w formularzach i serwisach

Pakiet koncentruje się na ochronie danych osobowych i tożsamości cyfrowej.


6. Mechanika misji

Większość misji wykorzystuje zestaw interaktywnych sytuacji i decyzji.

System obsługuje:

  • pytania jednokrotnego wyboru;
  • scenariusze decyzyjne;
  • interaktywne symulacje;
  • raport po zakończeniu;
  • XP;
  • poziom trudności;
  • historię prób;
  • najlepszy wynik;
  • ostatni wynik;
  • synchronizację z kontem serwerowym;
  • wyniki w panelu nauczyciela.

7. Losowe warianty pytań

Aplikacja ogranicza możliwość uczenia się odpowiedzi na pamięć.

Przy kolejnych podejściach może być losowana:

  • kolejność pytań;
  • kolejność odpowiedzi;
  • sformułowanie pytania;
  • kontekst sytuacji.

Poprawna odpowiedź jest identyfikowana stabilnym identyfikatorem, a nie położeniem w interfejsie.

W misjach proceduralnych, w których kolejność etapów jest częścią materiału, kolejność etapów pozostaje stała.

Dotyczy to między innymi:

  • Ransomware;
  • reakcji na incydent;
  • Cyber Escape Room.

8. Poziomy trudności

Dostępne są trzy poziomy:

  • Łatwy;
  • Standardowy;
  • Trudny.

Nauczyciel może:

  • ustawić domyślny poziom;
  • ustawić poziom osobno dla konkretnej klasy.

Poziom trudności wpływa między innymi na:

  • próg zaliczenia;
  • dostępność podpowiedzi;
  • wymagany wynik.

9. System XP i poziomów

Uczeń zdobywa XP za wykonywanie misji i aktywności.

Poziomy stałe ucznia obejmują:

  • Cyberkadet;
  • Cyberobrońca;
  • Cyberanalityk;
  • Specjalista SOC;
  • Cyber Expert;
  • Cyber Master.

XP nie jest resetowane przy zmianie sezonu.


10. Odznaki indywidualne

Aplikacja posiada rozbudowany system odznak.

Przykładowe osiągnięcia:

  • Pierwszy krok;
  • Cyber Strażnik;
  • Cyber Analityk;
  • Strażnik kont;
  • Łowca manipulacji;
  • Pogromca malware;
  • Strażnik prywatności;
  • Mistrz odporności;
  • Cyber Escaper;
  • Egzamin zdany;
  • Perfekcyjna piątka;
  • Nie poddawaj się;
  • Cyber Master;
  • Strażnik codziennych zagrożeń;
  • Strażnik urządzeń i sieci;
  • Cyberanalityk zaawansowany;
  • Strażnik tożsamości;
  • Mistrz kampanii;
  • Tydzień czujności.

11. Certyfikat ukończenia

Certyfikat odblokowuje się po ukończeniu misji 1–19.

Certyfikat zawiera między innymi:

  • nazwę ucznia;
  • średni wynik;
  • datę ukończenia;
  • poziom XP;
  • stabilny numer certyfikatu.

Certyfikat jest przygotowany do:

  • wydruku;
  • zapisania jako PDF.

12. Tryb kampanii

Tryb kampanii Operacja CyberSafe prowadzi ucznia przez wszystkie 43 misje.

Kampania jest podzielona na siedem rozdziałów:

  1. Pierwszy alarm
  2. Ochrona cyfrowego środowiska
  3. Operacja Odporność
  4. Codzienne zagrożenia
  5. Urządzenia i sieć
  6. Strefa eksperta
  7. Tożsamość na celowniku

Kampania wykorzystuje istniejące wyniki misji.

Nie tworzy osobnej kopii postępu.

Funkcje:

  • odblokowywanie kolejnych rozdziałów;
  • pasek postępu;
  • status zablokowany / aktywny / ukończony;
  • przycisk Kontynuuj operację;
  • integracja z profilami lokalnymi i serwerowymi.

13. Codzienne wyzwanie

Uczeń otrzymuje jedno wyzwanie dziennie.

System obsługuje:

  • deterministyczne wyzwanie na konkretny dzień;
  • możliwość zdobycia nagrody tylko raz dziennie;
  • XP;
  • bieżącą serię;
  • najlepszą serię;
  • liczbę ukończonych wyzwań;
  • odznakę za serię siedmiu dni;
  • synchronizację z kontem serwerowym.

14. Incydent dnia

Na dashboardzie ucznia znajduje się karta Incydent dnia.

Jest to szybka, jednopytaniowa sytuacja cyberbezpieczeństwa.

Funkcje:

  • nowy incydent każdego dnia;
  • trzy warianty odpowiedzi;
  • natychmiastowa informacja zwrotna;
  • wyjaśnienie;
  • historia prób;
  • statystyka poprawnych odpowiedzi;
  • zapis do Centrum zdarzeń;
  • niezależność od Codziennego wyzwania.

15. Generator losowych incydentów

Generator buduje dynamiczny incydent z kilku niezależnych elementów.

Może losować:

  • punkt wejścia ataku;
  • typ zagrożenia;
  • objaw;
  • zagrożony zasób;
  • właściwą reakcję.

Uczeń wybiera pierwsze działania w odpowiedniej kolejności.

Generator zapisuje:

  • liczbę prób;
  • najlepszy wynik;
  • historię ostatnich incydentów;
  • statystyki profilu.

16. Rangi i sezony

System sezonowy działa niezależnie od stałego XP.

Sezony są kwartalne:

  • Q1;
  • Q2;
  • Q3;
  • Q4.

Punkty sezonowe są resetowane przy rozpoczęciu nowego sezonu.

Stałe XP, misje i odznaki nie są resetowane.

Rangi sezonowe:

  • Rekrut;
  • Cyber Zwiadowca;
  • Obrońca;
  • Analityk;
  • Incident Responder;
  • Cyber Elita;
  • Mistrz Sezonu.

Aplikacja zapisuje historię poprzednich sezonów.


17. Klasy

Nauczyciel może tworzyć klasy.

Każda klasa może zawierać:

  • nazwę;
  • kod klasy;
  • zestaw misji;
  • poziom trudności;
  • ustawienia blokowania misji;
  • uczniów;
  • konfigurację tablicy wyników.

Uczeń może dołączyć do klasy za pomocą kodu.


18. Zestawy misji

Nauczyciel może tworzyć zestaw klasy na kilka sposobów:

  • ręczny wybór misji;
  • losowanie misji;
  • gotowy zestaw systemowy;
  • zapisany wcześniej zestaw własny.

Dostępne są zestawy odpowiadające pakietom tematycznym.


19. Wyniki uczniów i analityka

Panel nauczyciela zawiera podsumowanie wyników uczniów.

Dostępne dane obejmują między innymi:

  • procent realizacji;
  • liczbę ukończonych misji;
  • XP;
  • ostatnią aktywność;
  • najlepsze wyniki;
  • liczbę prób;
  • datę ukończenia;
  • historię aktywności.

Analityka klasy obejmuje:

  • ranking;
  • średni postęp;
  • średni wynik;
  • liczbę prób;
  • najmocniejsze obszary;
  • słabsze obszary;
  • wyniki według misji;
  • analizę kompetencji.

Brak danych nie jest zastępowany szacowaniem.


20. Lekcja na żywo

Nauczyciel może uruchomić aktywną misję dla całej klasy.

Funkcje:

  • wybór klasy;
  • wybór misji;
  • uruchomienie lekcji;
  • automatyczne odświeżanie statusów;
  • status oczekuje / w trakcie / ukończona;
  • tryb skupienia;
  • blokowanie innych misji;
  • odblokowywanie misji;
  • reset wyniku wybranego ucznia;
  • zakończenie lekcji;
  • baner aktywnej lekcji u ucznia.

21. Tryb egzaminacyjny

Nauczyciel może uruchomić egzamin dla klasy.

Konfiguracja obejmuje:

  • czas egzaminu;
  • liczbę zadań;
  • próg zaliczenia;
  • losowanie pytań;
  • wybór klasy.

W trakcie egzaminu:

  • działa licznik czasu;
  • F1 i podpowiedzi są wyłączone;
  • próba jest zapisywana po stronie serwera;
  • wyniki egzaminu są przechowywane osobno od zwykłych misji.

Nauczyciel widzi:

  • wynik;
  • liczbę poprawnych odpowiedzi;
  • zaliczenie / niezaliczenie;
  • czas wykonania;
  • datę przesłania.

22. Odznaki klasowe

Klasa może wspólnie zdobywać osiągnięcia.

Przykłady:

  • Wspólny start;
  • Klasa bez phishingu;
  • Mistrzowie 2FA;
  • Backup Crew;
  • Klasa 85+;
  • Misja wykonana wspólnie;
  • Aktywna cyberklasa;
  • Codzienni obrońcy.

Odznaki klasowe są wyliczane automatycznie.

Widoczny jest również procent postępu do zdobycia odznaki.


23. Tablica wyników klasy

Nauczyciel może włączyć lub wyłączyć ranking.

Dostępne metryki:

  • punkty sezonowe;
  • XP;
  • procent ukończenia zestawu.

Tryby prywatności:

  • anonimowy pseudonim;
  • samo imię;
  • pełna nazwa.

Uczeń widzi tylko ranking swojej klasy.

Interfejs zawiera:

  • podium TOP 3;
  • pełną tabelę klasy.

24. Tryb drużynowy

Nauczyciel może utworzyć zespoły 2–4 osobowe.

Funkcje:

  • nazwa zespołu;
  • skład zespołu;
  • przypisanie wspólnej misji;
  • status członków;
  • wynik zespołu;
  • wspólny postęp.

Zadanie drużynowe jest ukończone, gdy wykonają je wszyscy członkowie.

Dane drużyn są przechowywane po stronie serwera.


25. Bank scenariuszy nauczyciela

Nauczyciel może tworzyć pojedyncze własne przypadki.

Scenariusz zawiera:

  • tytuł;
  • kategorię;
  • poziom trudności;
  • opis sytuacji;
  • pytanie;
  • cztery odpowiedzi;
  • poprawną odpowiedź;
  • wyjaśnienie.

Scenariusz można:

  • zapisać;
  • edytować;
  • duplikować;
  • usunąć;
  • przypisać do jednej lub wielu klas.

Uczeń widzi tylko scenariusze przypisane do jego klasy.

Poprawna odpowiedź nie jest wysyłana uczniowi przed oceną.


26. Edytor własnej misji

Nauczyciel może utworzyć pełną własną misję złożoną z pięciu sytuacji.

Każda sytuacja zawiera:

  • opis;
  • pytanie;
  • cztery odpowiedzi;
  • poprawną odpowiedź;
  • wyjaśnienie;
  • liczbę punktów.

Misja zawiera:

  • tytuł;
  • opis;
  • poziom trudności;
  • próg zaliczenia;
  • przypisanie do klas.

Wynik jest obliczany po stronie serwera.

Własne misje są przechowywane osobno od 43 misji systemowych.


27. Raport PDF ucznia

Uczeń może wygenerować raport swoich wyników.

Nauczyciel może wygenerować raport wskazanego ucznia.

Raport obejmuje między innymi:

  • dane ucznia;
  • klasę;
  • XP;
  • poziom;
  • postęp misji;
  • najlepsze wyniki;
  • liczbę prób;
  • odznaki;
  • punkty sezonowe;
  • Codzienne wyzwania;
  • Generator incydentów;
  • najmocniejsze wyniki;
  • obszary do dalszej pracy;
  • szczegółową tabelę misji.

Raport jest przygotowany do wydruku w formacie A4.

PDF powstaje przez systemowe okno:

Drukuj → Zapisz jako PDF


28. Raport PDF klasy

Nauczyciel lub administrator może wygenerować raport zbiorczy klasy.

Raport zawiera:

  • nazwę klasy;
  • kod klasy;
  • nauczyciela;
  • liczbę uczniów;
  • średni postęp;
  • liczbę uczniów, którzy ukończyli zestaw;
  • łączną liczbę prób;
  • średni wynik;
  • analizę misji;
  • analizę kompetencji;
  • odznaki klasowe;
  • ranking sezonowy;
  • szczegółową tabelę uczniów.

Raport działa w PL/EN i jest przygotowany do wydruku A4.


29. Powiadomienia toast

Aplikacja wykorzystuje spójny system krótkich komunikatów.

Typy:

  • sukces;
  • informacja;
  • ostrzeżenie;
  • błąd.

Toast jest krótkim komunikatem ekranowym.

Ważne informacje mogą być dodatkowo zapisane do Centrum zdarzeń.


30. Centrum zdarzeń

Każdy profil posiada historię ważnych wydarzeń.

Przykładowe wpisy:

  • ukończenie misji;
  • zdobycie odznaki;
  • awans rangi;
  • wynik egzaminu;
  • Codzienne wyzwanie;
  • import profilu;
  • przypisanie do drużyny.

Funkcje:

  • licznik nieprzeczytanych;
  • filtrowanie;
  • oznaczanie jako przeczytane;
  • oznaczanie wszystkich jako przeczytane;
  • usuwanie przeczytanych wpisów.

Historia jest ograniczona do 250 najnowszych wpisów na profil.


31. Pomoc i F1

Aplikacja posiada pełne Centrum Pomocy.

Pomoc zawiera:

  • wyszukiwarkę;
  • kategorie dla ucznia;
  • kategorie dla nauczyciela;
  • kategorie dla administratora;
  • opis kont;
  • opis misji;
  • rozwiązywanie problemów;
  • opis nowych modułów.

Klawisz

1
F1
otwiera pomoc kontekstową dotyczącą aktualnego ekranu lub misji.


32. Dostępność

Aplikacja posiada panel dostępności.

Opcje:

  • większy tekst;
  • wysoki kontrast;
  • ograniczenie animacji;
  • wyraźniejszy fokus;
  • obsługa klawiatury.

Skróty i zachowania:

  • 1
    Alt+A
    — panel dostępności;
  • 1
    Tab
    /
    1
    Shift+Tab
    — przechodzenie między elementami;
  • 1
    Enter
    /
    1
    Spacja
    — aktywacja;
  • 1
    Escape
    — zamknięcie modala;
  • 1
    F1
    — pomoc.

Aplikacja respektuje:

1
prefers-reduced-motion

Ustawienia są przechowywane lokalnie.


33. Wersja PL/EN

Aplikacja posiada jeden wspólny kod dla języka polskiego i angielskiego.

Nie istnieje osobny

1
start-en.html
.

Język można zmienić:

  • na landing page;
  • w symulatorze.

Wybór jest zapamiętywany w

1
localStorage
.

Tłumaczenia obejmują:

  • interfejs;
  • wszystkie 43 misje;
  • panele;
  • pomoc;
  • komunikaty dynamiczne;
  • raporty;
  • pytania egzaminacyjne;
  • moduły nauczyciela;
  • moduły administratora;
  • daty i locale;
  • wybrane metadane strony.

34. Import i eksport profilu lokalnego JSON

Profil lokalny można przenieść do pliku JSON.

Format posiada identyfikator:

1
CyberSafeLocalProfile

Eksport obejmuje między innymi:

  • ID profilu;
  • nazwę;
  • XP;
  • misje;
  • wyniki;
  • odznaki;
  • historię;
  • Codzienne wyzwania;
  • sezony;
  • Generator incydentów;
  • ustawienia.

Import:

  • waliduje strukturę;
  • pokazuje podsumowanie;
  • ostrzega przed konfliktem ID;
  • wymaga świadomego potwierdzenia zastąpienia profilu.

Mechanizm nie importuje kont serwerowych.


35. Backup administratora

Administrator może utworzyć pełny backup danych systemowych.

Backup może obejmować:

  • konta;
  • klasy;
  • postęp;
  • zestawy misji;
  • egzaminy;
  • lekcje;
  • drużyny;
  • scenariusze nauczyciela;
  • własne misje;
  • wyniki;
  • ustawienia;
  • dane API.

Przed pełnym importem system tworzy kopię awaryjną bieżącego stanu.

Plik importu jest walidowany.

Operacja jest zapisywana w dzienniku audytu.


36. Eksport i import konfiguracji

Administrator może osobno eksportować konfigurację bez danych wynikowych uczniów.

Pozwala to przenosić ustawienia systemu bez przywracania pełnego backupu.


37. API statystyczne READ-ONLY

Aplikacja posiada API przeznaczone do późniejszej integracji z:

  • LMS;
  • dziennikiem elektronicznym;
  • dashboardem szkolnym;
  • innym systemem raportowym.

API jest tylko do odczytu.

Nie pozwala:

  • zmieniać kont;
  • zmieniać klas;
  • zmieniać wyników;
  • uruchamiać egzaminów;
  • modyfikować konfiguracji.

Podstawowe zasoby:

  • podsumowanie systemu;
  • lista klas;
  • statystyki klasy;
  • statystyki ucznia.

Autoryzacja:

1
X-CyberSafe-API-Key

lub:

1
Authorization: Bearer <klucz>

Klucze:

  • są generowane w panelu administratora;
  • mają sekret pokazywany tylko raz;
  • są zapisywane na serwerze jako SHA-256 hash;
  • mogą być unieważnione.

Domyślnie API nie musi zwracać nazw uczniów.

Może stosować anonimowe identyfikatory

1
anon_...
.

Każda odpowiedź zawiera informacje typu:

  • 1
    schema_version
    ;
  • 1
    app_version
    ;
  • 1
    generated_at
    .

Dokumentacja znajduje się w:

1
docs/api-statystyki.md


38. PWA — instalowalna aplikacja

CyberSafe EDU może działać jako Progressive Web App.

Pliki:

  • 1
    manifest.webmanifest
    ;
  • 1
    service-worker.js
    ;
  • 1
    assets/icon-192.png
    ;
  • 1
    assets/icon-512.png
    .

Po pierwszym uruchomieniu przez HTTPS aplikację można zainstalować na urządzeniu.

Użytkownik może uruchamiać ją podobnie do zwykłej aplikacji.


39. Tryb offline-first

Po pierwszym uruchomieniu online Service Worker zapisuje kluczowe zasoby w cache.

Offline mogą działać między innymi:

  • 43 misje;
  • kampania;
  • Incydent dnia;
  • Generator incydentów;
  • profile lokalne;
  • XP;
  • odznaki;
  • Centrum zdarzeń;
  • dostępność;
  • PL/EN;
  • raport ucznia;
  • import/eksport profilu.

Dla wcześniej użytego konta serwerowego aplikacja może przechowywać lokalny snapshot roboczy.


40. Kolejka synchronizacji offline

Zmiany wykonywane bez Internetu trafiają do kolejki w

1
IndexedDB
.

Przykładowy przebieg:

  1. uczeń loguje się online;
  2. aplikacja zapisuje lokalny snapshot;
  3. Internet zostaje utracony;
  4. uczeń wykonuje misję;
  5. wynik zostaje zapisany lokalnie;
  6. aplikacja pokazuje liczbę oczekujących zmian;
  7. Internet wraca;
  8. aplikacja próbuje automatycznie zsynchronizować dane;
  9. po sukcesie kolejka jest opróżniana.

Status połączenia może pokazywać:

  • Online;
  • Offline;
  • Synchronizacja;
  • Zsynchronizowano.

Użytkownik może również wywołać synchronizację ręcznie.


41. Funkcje wymagające połączenia online

Niektóre moduły zależą od wspólnych danych serwera.

W pełni online działają przede wszystkim:

  • panel nauczyciela;
  • panel administratora;
  • tworzenie klas;
  • konta serwerowe;
  • Lekcja na żywo;
  • egzaminy zarządzane przez nauczyciela;
  • tablica klasy;
  • drużyny;
  • backup serwerowy;
  • API statystyczne;
  • pobieranie nowych scenariuszy nauczyciela;
  • pobieranie nowych własnych misji nauczyciela.

42. Landing page

Plik:

1
index.html

Landing page zawiera:

  • opis aplikacji;
  • przycisk uruchamiający
    1
    start.html
    ;
  • informacje o misjach;
  • informacje dla ucznia;
  • informacje dla nauczyciela;
  • podstawowe informacje o funkcjach;
  • favicon;
  • metadane SEO;
  • Open Graph;
  • obsługę wersji PL/EN;
  • responsywny wygląd.

43. Interfejs użytkownika

Styl aplikacji:

  • ciemne tło;
  • estetyka cyber / SOC;
  • neonowe akcenty;
  • glassmorphism;
  • animowane elementy;
  • responsywne karty;
  • toast notifications;
  • płynne przejścia;
  • tryb pełnoekranowy;
  • dźwięki interfejsu generowane lokalnie.

Aplikacja jest dostosowana do:

  • komputerów;
  • laptopów;
  • tabletów;
  • telefonów.

44. Dźwięki interfejsu

Aplikacja może generować krótkie dźwięki interfejsu bez zewnętrznych plików audio.

Dźwięki można wyłączyć.

Ustawienie jest przechowywane lokalnie.


45. Pełny ekran

Aplikacja posiada przycisk przełączający interfejs w tryb pełnoekranowy, jeśli przeglądarka obsługuje Fullscreen API.


46. Struktura frontendowa

Główne moduły JavaScript:

PlikOdpowiedzialność
1
js/app.js
główna logika aplikacji i widoków
1
js/missions.js
definicje misji
1
js/profiles.js
profile, XP, osiągnięcia
1
js/storage.js
warstwa przechowywania lokalnego
1
js/auth.js
role, logowanie, klasy, panel użytkownika
1
js/i18n.js
tłumaczenia PL/EN
1
js/help.js
F1 i Centrum Pomocy
1
js/difficulty.js
poziomy trudności
1
js/exam.js
tryb egzaminacyjny
1
js/campaign.js
kampania
1
js/daily.js
Codzienne wyzwanie
1
js/daily_incident.js
Incydent dnia
1
js/seasons.js
rangi i sezony
1
js/class_badges.js
odznaki klasowe
1
js/leaderboard.js
tablica klasy
1
js/teams.js
tryb drużynowy
1
js/incident_generator.js
generator incydentów
1
js/student_report.js
raport ucznia
1
js/class_report.js
raport klasy
1
js/admin_backup.js
backup administratora
1
js/admin_api.js
zarządzanie API
1
js/local_profile_transfer.js
import/eksport profilu
1
js/notifications.js
toasty i Centrum zdarzeń
1
js/accessibility.js
dostępność
1
js/question_variants.js
losowe warianty pytań
1
js/teacher_scenarios.js
Bank scenariuszy nauczyciela
1
js/custom_missions.js
Edytor własnych misji
1
js/offline.js
PWA, status sieci i kolejka synchronizacji
1
js/landing.js
interakcje landing page

Główne arkusze stylów:

  • 1
    css/style.css
    ;
  • 1
    css/landing.css
    .

47. Backend PHP

Głównym punktem backendu jest:

1
server/api.php

Backend obsługuje między innymi:

  • sesje;
  • logowanie;
  • tworzenie kont;
  • klasy;
  • synchronizację postępu;
  • wyniki;
  • egzaminy;
  • Live Lesson;
  • zestawy misji;
  • drużyny;
  • własne scenariusze;
  • własne misje;
  • backup;
  • konfigurację;
  • API statystyczne;
  • synchronizację danych ucznia.

48. Dane serwerowe

Dane są przechowywane bez klasycznej bazy SQL — w plikach JSON.

Aktualna struktura zawiera między innymi:

  • 1
    server/data/api_keys.json
    ;
  • 1
    server/data/audit.json
    ;
  • 1
    server/data/classes.json
    ;
  • 1
    server/data/custom_mission_results.json
    ;
  • 1
    server/data/custom_missions.json
    ;
  • 1
    server/data/exam_attempts.json
    ;
  • 1
    server/data/exam_results.json
    ;
  • 1
    server/data/exams.json
    ;
  • 1
    server/data/lessons.json
    ;
  • 1
    server/data/mission_sets.json
    ;
  • 1
    server/data/progress.json
    ;
  • 1
    server/data/scenario_results.json
    ;
  • 1
    server/data/teacher_scenarios.json
    ;
  • 1
    server/data/teacher_settings.json
    ;
  • 1
    server/data/teams.json
    .

Dane uwierzytelniające:

1
server/config/credentials.php


49. Ochrona katalogów serwerowych

Katalogi zawierające dane posiadają pliki:

  • 1
    server/.htaccess
    ;
  • 1
    server/config/.htaccess
    ;
  • 1
    server/data/.htaccess
    .

Ich zadaniem jest ograniczenie bezpośredniego dostępu HTTP do wrażliwych plików.


50. Dziennik audytu

Operacje administracyjne mogą być zapisywane w:

1
server/data/audit.json

Dziennik może rejestrować między innymi:

  • działania administratora;
  • import backupu;
  • eksport backupu;
  • zarządzanie kontami;
  • operacje konfiguracyjne.

51. Dane lokalne

Przeglądarka może wykorzystywać:

localStorage

Do lekkich danych lokalnych, takich jak:

  • profile lokalne;
  • język;
  • ustawienia UI;
  • preferencje dostępności;
  • dźwięki;
  • część postępu lokalnego.

IndexedDB

Do bardziej złożonych danych offline, przede wszystkim:

  • kolejki synchronizacji;
  • lokalnych danych wymagających późniejszej synchronizacji.

Cache Storage

Wykorzystywany przez Service Worker do przechowywania plików PWA.


52. Service Worker

1
service-worker.js
odpowiada za:

  • cache plików aplikacji;
  • uruchamianie aplikacji bez sieci;
  • obsługę aktualizacji cache;
  • usuwanie starszych cache;
  • dostarczanie zasobów PWA.

Service Worker wymaga bezpiecznego kontekstu HTTPS.

Wyjątkiem do testów jest

1
localhost
.


53. Mechanizm startowy

Aplikacja posiada ekran inicjalizacji.

Aby zapobiec trwałemu zawieszeniu interfejsu:

  • ekran startowy posiada mechanizm awaryjnego zamknięcia;
  • błędy pojedynczych modułów nie powinny trwale blokować całej aplikacji;
  • mechanizm tłumaczeń nie powinien reagować rekurencyjnie na własne zmiany DOM;
  • Service Worker sprawdza aktualizację przy starcie.

54. Prywatność danych

Założenia prywatności:

  • API domyślnie może działać bez nazw uczniów;
  • ranking klasy może używać pseudonimów;
  • nauczyciel decyduje o widoczności tablicy klasy;
  • hasła nie są przechowywane jawnie;
  • dane lokalne pozostają w przeglądarce użytkownika;
  • pełne dane klasowe wymagają autoryzacji po stronie serwera.

55. Responsywność

Interfejs został zaprojektowany dla różnych rozdzielczości.

Obsługiwane są:

  • desktop;
  • laptop;
  • tablet;
  • telefon.

Elementy interfejsu dostosowują:

  • liczbę kolumn;
  • wielkość kart;
  • menu;
  • panele;
  • formularze;
  • tabele;
  • modale.

56. Wymagania techniczne

Minimalne założenia środowiska:

  • serwer HTTP/HTTPS;
  • PHP 8.x;
  • możliwość zapisu danych przez PHP do wymaganych plików JSON;
  • nowoczesna przeglądarka obsługująca JavaScript;
  • HTTPS dla PWA i Service Workera.

Zalecane przeglądarki:

  • Chrome;
  • Edge;
  • Firefox;
  • współczesne przeglądarki mobilne.

Nie zaleca się uruchamiania aplikacji przez:

1
file://

ponieważ wtedy część serwerowa nie będzie działać.


57. Wdrożenie

Typowy układ wdrożenia:

  1. rozpakować aplikację na serwerze;
  2. upewnić się, że PHP 8.x działa;
  3. sprawdzić prawa zapisu katalogów wymaganych przez backend;
  4. wejść na
    1
    index.html
    ;
  5. przejść do
    1
    start.html
    ;
  6. utworzyć pierwsze konto administratora;
  7. utworzyć nauczycieli;
  8. skonfigurować klasy;
  9. uruchomić aplikację przynajmniej raz online, aby PWA zapisała zasoby;
  10. opcjonalnie zainstalować aplikację jako PWA.

58. Aktualizacja PWA

Po podmianie plików na serwerze przeglądarka może przez krótki czas posiadać starszy cache.

W razie problemów można:

  • wykonać
    1
    Ctrl+F5
    ;
  • odświeżyć cache z poziomu ustawień aplikacji;
  • wyczyścić dane witryny;
  • ponownie uruchomić aplikację online.

Service Worker usuwa starsze cache zgodnie z aktualną konfiguracją aplikacji.


59. Raportowanie i eksport danych

Dostępne mechanizmy eksportu:

  • CSV wyników klasy;
  • JSON wyników;
  • Raport PDF ucznia;
  • Raport PDF klasy;
  • eksport profilu lokalnego JSON;
  • pełny backup administratora;
  • eksport konfiguracji;
  • API READ-ONLY.

60. Zakres bezpiecznej symulacji

CyberSafe EDU jest aplikacją edukacyjną.

Nie wykonuje rzeczywistych:

  • ataków sieciowych;
  • infekowania urządzenia;
  • szyfrowania prawdziwych plików;
  • modyfikacji systemu operacyjnego;
  • przejmowania kont;
  • zmian routera;
  • operacji destrukcyjnych.

Wszystkie tego typu działania są przedstawiane w formie kontrolowanej symulacji, scenariusza lub decyzji edukacyjnej.


61. Najważniejsze możliwości aplikacji — skrót

CyberSafe EDU Simulator oferuje obecnie:

  • 43 misje;
  • 5 pakietów;
  • PL/EN;
  • profile lokalne;
  • konta serwerowe;
  • klasy;
  • XP i poziomy;
  • odznaki;
  • certyfikat;
  • trzy poziomy trudności;
  • losowe warianty pytań;
  • kampanię;
  • Codzienne wyzwanie;
  • Incydent dnia;
  • Generator incydentów;
  • sezony i rangi;
  • odznaki klasowe;
  • ranking klasy;
  • tryb drużynowy;
  • Lekcję na żywo;
  • tryb egzaminacyjny;
  • Bank scenariuszy nauczyciela;
  • Edytor własnych misji;
  • Raport PDF ucznia;
  • Raport PDF klasy;
  • toasty;
  • Centrum zdarzeń;
  • Centrum Pomocy i F1;
  • tryb dostępności;
  • import/eksport profilu JSON;
  • backup administratora;
  • import/eksport konfiguracji;
  • API statystyczne READ-ONLY;
  • PWA;
  • instalację aplikacji;
  • tryb offline-first;
  • kolejkę synchronizacji IndexedDB;
  • automatyczną synchronizację po odzyskaniu Internetu;
  • responsywny interfejs;
  • tryb pełnoekranowy;
  • lokalnie generowane dźwięki interfejsu.

62. Struktura projektu

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
/
├── index.html
├── start.html
├── manifest.webmanifest
├── service-worker.js
├── README.txt
│
├── assets/
│   ├── favicon.svg
│   ├── icon-192.png
│   └── icon-512.png
│
├── css/
│   ├── landing.css
│   └── style.css
│
├── js/
│   ├── accessibility.js
│   ├── admin_api.js
│   ├── admin_backup.js
│   ├── app.js
│   ├── auth.js
│   ├── campaign.js
│   ├── class_badges.js
│   ├── class_report.js
│   ├── custom_missions.js
│   ├── daily.js
│   ├── daily_incident.js
│   ├── difficulty.js
│   ├── exam.js
│   ├── help.js
│   ├── i18n.js
│   ├── incident_generator.js
│   ├── landing.js
│   ├── leaderboard.js
│   ├── local_profile_transfer.js
│   ├── missions.js
│   ├── notifications.js
│   ├── offline.js
│   ├── profiles.js
│   ├── question_variants.js
│   ├── seasons.js
│   ├── storage.js
│   ├── student_report.js
│   ├── teacher_scenarios.js
│   └── teams.js
│
├── server/
│   ├── .htaccess
│   ├── api.php
│   ├── config/
│   │   ├── .htaccess
│   │   └── credentials.php
│   └── data/
│       ├── .htaccess
│       ├── api_keys.json
│       ├── audit.json
│       ├── classes.json
│       ├── custom_mission_results.json
│       ├── custom_missions.json
│       ├── exam_attempts.json
│       ├── exam_results.json
│       ├── exams.json
│       ├── lessons.json
│       ├── mission_sets.json
│       ├── progress.json
│       ├── scenario_results.json
│       ├── teacher_scenarios.json
│       ├── teacher_settings.json
│       └── teams.json
│
└── docs/
    ├── api-statystyki.md
    └── opis-aplikacji.md

63. Podsumowanie

CyberSafe EDU Simulator jest kompletną platformą edukacyjną do nauki cyberbezpieczeństwa, która łączy:

  • interaktywne treści dydaktyczne;
  • grywalizację;
  • pracę indywidualną;
  • pracę klasową;
  • pracę drużynową;
  • ocenianie;
  • raportowanie;
  • zarządzanie użytkownikami;
  • własne materiały nauczyciela;
  • bezpieczeństwo kont;
  • działanie offline;
  • instalację PWA;
  • integrację przez API.

Architektura pozostaje stosunkowo lekka: frontend HTML/CSS/JavaScript, backend PHP 8.x i pliki JSON zamiast klasycznej bazy danych. Dzięki temu aplikację można wdrożyć na typowym hostingu obsługującym PHP bez konieczności utrzymywania oddzielnego serwera baz danych.

error: Treść jest chroniona !!

Arnold Basiński

Komputerowka.pl

Versja: 1.0.1

komputerówka.pl | Radość programowania

Napisz wiadomość

Smok Heighwaya | Klasówki i Kartkóki online
Krzywa Hilberta | Kartkówki i Klasówki online
Dywan Sierpińskiego | Kartkówki i Klasówki online
Drzewo Pitagorada | Kartkówki i Klasówki online
FRaktale Juli | Klasówki i Kartkówki online
Zbiór Mandelbrota | Klasówki i kartkówki online
Trojkat Sierpińskiego | Kartkówki i klasówki online
Płatek Kocha | Kartkówki i klasówki online