Zupełnie nowy plan lekcji w Opanuj Frontend 3

Cześć, z tej strony Przemek - zaraz opowiem Ci o zmianach, które wdrożyliśmy dla najbardziej zabieganych uczestników naszych szkoleń, a konkretnie:

• Nowym planie lekcji w Opanuj Frontend 3 🫨
• Technicznych aspektach migracji danych 🛠️

Nowy format lekcji - dla łatwiejszego śledzenia postępów 📈

W ubiegłym tygodniu pracowałem nad aktualizacją naszego szkolenia, która pozwoli uczyć się nowoczesnego frontendu w zgodzie z planem dnia każdego studenta.

To efekt feedbacku, jaki otrzymaliśmy w poprzednich dwóch edycjach:

💬 Genialny kurs, ale brakuje mi czasu - lekcje są przeogromne!

Jak zaadresowaliśmy ten feedback?

W oparciu o istniejące moduły, tematy i harmonogram, wdrożyliśmy zupełnie nowy układ lekcji. Działaliśmy w zgodzie z programistyczną zasadą SRP, czyli Single Responsibility Principle.

Wcześniej nasze lekcje przypominały rozdziały w podręcznikach - otwierając jedną z nich uczyłeś się o dwóch, trzech a może nawet czterech zagadnieniach. Od teraz każda lekcja dotyczy dokładnie jednego wątku, który omawiamy od początku do końca.

W trzeciej edycji mamy dla was aż 58 lekcji o nowoczesnym frontendzie, które można oznaczać jako ukończone w łatwiejszy sposób. Możesz uczyć się w krótszych okienkach czasowych i wrzucać Opanuj Frontend pomiędzy jedzenie, pranie, gotowanie i czas dla rodziny.

Długie godziny przed komputerem są passe - stawiamy na łatwiejszy model nauki dostosowany do zabieganego uczestnika naszych szkoleń 🙌

Techniczna wyzwania nowego planu lekcji 🛠️

Nasza platforma integruje ze sobą setki programistów, więc od teraz każdy - niezależnie od tego, czy dołączył, czy dopiero planuje dołączyć - może już pracować z nowym planem lekcji. Oznacza to również, że musieliśmy go dostosować do osób, które były w 30, 60, 80 albo 100% całej drogi do ukończenia szkolenia.

Założenie było proste - wszystkie przerobione przez studenta wątki powinny być oznaczone jako ukończone, niezależnie od tego, gdzie znajdują się w nowym planie.

Zadania wydaje się proste - potrzebujemy dwóch endpointów:

• Pierwszy, do sprawdzania aktualnych postępów uczestnika
• Drugi, do aktualizacji postępów wg nowego planu lekcji

Zaczynamy analizy publicznego API platformy Circle. Znajdujemy endpoint do aktualizowania postępów, ale endpointu do sprawdzania statusu... nie ma.

Oficjalnie nie ma, bo w samej aplikacji widać pasek postępu, a DevToolsy Chrome ujawniają, że aplikacja używa "Internal API" do pobierania tych danych:

Zaczynamy zabawę 😎 Wiedząc, że jako zalogowany użytkownik możemy z poziomu przeglądarki pobierać postępy uczestników, możemy przygotować skrypt uruchamiany w konsoli przeglądarki, korzystający z wewnętrznego API platformy. Ten skrypt będzie pobierał te same dane co aplikacja, tyle, że na potrzeby naszej migracji.

Eksport uczestników do CSV, for each student, fetch progress. Mamy to!

Kolejny krok? Rozbudowanie tego samego skryptu o aktualizację progressu. Tutaj nie powinno być problemów, bo endpoint znajduje się w publicznym API. Kolejne minuty w edytorze, rozbudowa skryptu, i...

CORS ERROR 🙅 Przeglądarka wykonuje dodatkowe zapytanie sprawdzając, czy API pozwoli na call z tzw. origina naszej platformy. Samo API nie ma ustawionych nagłówków CORS (!), więc nasz skrypt przestaje działać. Koniec zabawy?

Pytamy pewnego wirtualnego asystenta:

No oczywiście! Proxy server w Node - kilka minut z Cursorem, stawiamy prosty serwer do komunikacji z Public API Circle, wywołujemy go z przeglądarki - działa!

Finalnie, pozostało nam jedynie przemapowanie lekcji na nowy układ kursu, wykonanie migracji dla testowego użytkownika a następnie dla wszystkich, którzy do tej pory wzięli udział w naszym szkoleniu i... gotowe!

To jak, masz ochotę sprawdzić nasz nowy plan w akcji? Zapraszamy do O:FE 3!