AlgoLab to darmowa aplikacja webowa do nauki algorytmiki w polskim pseudokodzie — taka, jakiej używamy na lekcjach informatyki i do przygotowań do matury. Działa w przeglądarce, bez instalacji. Edytujesz kod, a diagram blokowy rysuje się sam. Krok po kroku.

Czym jest AlgoLab?

AlgoLab to moje narzędzie stworzone z myślą o uczniach, studentach i każdym, kto chce zrozumieć algorytmy — nie tylko je zapamiętać. Aplikacja działa bezpośrednio w przeglądarce internetowej i nie wymaga żadnej instalacji ani rejestracji.

Kluczowa idea jest prosta: piszesz algorytm w pseudokodzie — takim samym, jaki znajdziesz w polskich podręcznikach do informatyki — a aplikacja automatycznie generuje z niego diagram blokowy. Możesz też działać odwrotnie: zbudujesz diagram z gotowych bloków, a pseudokod pojawi się sam.

Wszystko działa w czasie rzeczywistym, bez klikania „Odśwież” czy „Generuj”. Zmiana kodu = zmiana diagramu. I na odwrót.

Co potrafi AlgoLab?

✔ Edytor pseudokodu z podświetlaniem składni

Edytor rozumie polskie słowa kluczowe: czytaj, pisz, jeżeli, dopóki, dla, powtarzaj. Składnia jest podświetlana na bieżąco — słowa kluczowe, ciągi znaków, komentarze i operatory mają różne kolory, co znacznie ułatwia czytanie kodu.

✔ Dwukierunkowy diagram blokowy

Diagram generuje się automatycznie z każdej linii kodu. Bloki można przeciągać, edytować i łączyć ręcznie — po każdej zmianie kod aktualizuje się automatycznie. To unikalna funkcja, która pozwala zobaczyć strukturę algorytmu bez rysowania czegokolwiek na kartce.

Obsługiwane typy bloków:

• START / STOP (owale) — strukturalne punkty startowy i końcowy
• Operacja (prostokąt) — przypisania i obliczenia
• Wejście / Wyjście (równoległoboki) — czytaj i pisz
• Warunek (romb) — jeżeli i dopóki
• Pętla (sześciokąt) — dla...do
• Łącznik (okrąg) — do złożonych schematów

✔ Interpreter — uruchamianie kodu w przeglądarce

Algorytm możesz uruchomić bezpośrednio — bez żadnego serwera backendowego. Interpreter obsługuje zmienne, tablice, funkcje, pętle i warunki. Możesz podawać dane wejściowe, a wyniki pojawiają się natychmiast w panelu wyjścia.

✔ Wizualizator krok po kroku

Tryb wizualizacji pozwala wykonać algorytm krok po kroku — każda linia podświetla się podczas wykonywania, a w panelu widoczne są aktualne wartości wszystkich zmiennych. Idealne do debugowania i nauki.

✔ Zadania z automatyczną oceną

W aplikacji czeka 10 zadań algorytmicznych o rosnącym poziomie trudności (łatwe → średnie → trudne). Każde zadanie sprawdza się automatycznie — wystarczy kliknąć „Sprawdź rozwiązanie”. Dostępne są podpowiedzi i wzorcowe rozwiązania.

Co ważne: zadania można rozwiązywać na dwa sposoby — pisząc pseudokod lub układając diagram blokowy z gotowych klocków. Wyniki zadań zapisywane są lokalnie w przeglądarce.

✔ Gotowe przykłady

Na start dostępnych jest 6 gotowych algorytmów: silnia, ciąg Fibonacciego, sortowanie bąbelkowe, wyszukiwanie binarne, algorytm Euklidesa (NWD) i sprawdzanie pierwszości. Każdy możesz załadować jednym kliknięciem i od razu zobaczyć diagram.

Dla kogo jest AlgoLab?

AlgoLab powstał z myślą o:

• uczniach technikum i liceum — przygotowujących się do matury z informatyki,
• studentach pierwszego roku — uczących się podstaw algorytmiki i programowania,
• nauczycielach informatyki — do demonstracji algorytmów na lekcjach,
• każdym, kto zaczyna przygodę z programowaniem — polskie słownictwo usuwa barierę językową.

Technologia

AlgoLab to w 100% aplikacja front-endowa — działa wyłącznie w przeglądarce, bez serwera backendowego, bez baz danych, bez rejestracji. Wszystko napisane w czystym JavaScript (bez frameworków), HTML i CSS.

Pod maską znajduje się:

• własny lexer, parser i interpreter pseudokodu,
• własny renderer diagramów blokowych oparty na SVG,
• dwukierunkowy konwerter kod ↔ diagram (codegen.js),
• zapis postępu w localStorage przeglądarki.

Kod źródłowy dostępny jest publicznie na GitHubie: github.com/mmalmon/algolab

Jak uruchomić AlgoLab?

Wystarczy otworzyć adres w przeglądarce:

👉 master-homelab.pl/algolab

Brak rejestracji. Brak logowania. Brak instalacji. Działa na komputerze, laptopie i tablecie — wszędzie tam, gdzie jest nowoczesna przeglądarka (Chrome, Edge, Firefox).

Podsumowanie

AlgoLab to odpowiedź na potrzebę, którą widzę na co dzień jako nauczyciel informatyki: uczniowie rozumieją algorytmy lepiej, gdy mogą je zobaczyć w akcji. Diagram blokowy generowany automatycznie z kodu — i odwrotnie — to most między teorią a praktyką.

Jeśli uczysz się algorytmiki, przygotowujesz do matury lub po prostu chcesz zrozumieć, jak działa pętla czy rekurencja — wejdź i spróbuj. To zajmie mniej niż minutę.

W następnym artykule opisuję szczegółowo, jak korzystać z każdej funkcji AlgoLab — od edytora po zadania z automatyczną oceną.

➡ Przeczytaj instrukcję obsługi AlgoLab