<Projekt Innowacje 2023/2024 – Zimowa Przygoda z Nuxt i Firebase/>

10 lutego 2024
📁 Edukacja
Paweł Rutkowski
Projekt Innowacje 2023/2024 – Zimowa Przygoda z Nuxt i Firebase

W zimowym semestrze roku akademickiego 2023/2024 miałem przyjemność i zaszczyt poprowadzić kolejną edycję Projektu Innowacje na Politechnice Łódzkiej. Tym razem wyruszyliśmy w fascynującą podróż przez świat Nuxt 3 – meta-frameworka Vue, który otwiera drzwi do zaawansowanych architektur aplikacji webowych. Obserwowanie, jak studenci przechodzą od podstawowego Vue.js do pełnoprawnego frameworka z file-based routingiem i zaawansowanymi możliwościami, było dla mnie niezwykłym doświadczeniem.

Technologie i narzędzia

Stack technologiczny, który wybrałem dla tej edycji, obejmował:

  • Nuxt 3 – tryb SPA, file-based routing, auto-imports
  • Firebase – Authentication, Firestore Database, Storage, hosting
  • Pinia – zarządzanie stanem aplikacji
  • Vuetify – Material Design i komponenty UI
  • i18n – wielojęzyczność aplikacji
  • Git Flow – profesjonalny workflow w zespole

Program i kluczowe obszary

Nuxt w trybie SPA

Pierwsze spotkania poświęciłem zrozumieniu różnic między SSR (Server-Side Rendering) a CSR (Client-Side Rendering). W tym projekcie zdecydowałem się na wykorzystanie Nuxt w trybie SPA (Single Page Application), co pozwoliło nam skupić się na budowie bogatego interfejsu użytkownika bez narzutu związanego z zarządzaniem serwerem renderującym. Dzięki temu jako mentor mogłem dostosowywać tempo nauki do umiejętności studentów oraz świadczyć indywidualną pomoc w przypadku napotkanych problemów. Studenci musieli nauczyć się myśleć o strukturze katalogów Nuxt – od /pages dla automatycznego routingu, przez /composables dla reużywalnej logiki, po /server dla API routes. Obserwowanie, jak odkrywają te koncepcje i pokonują kolejne wyzwania architektoniczne, było dla mnie ogromną satysfakcją.

Git Flow i praca zespołowa

Dużą uwagę poświęciłem profesjonalnemu workflow w kontroli wersji. Jestem głęboko przekonany, że umiejętność współpracy w zespole poprzez właściwe zarządzanie kodem źródłowym jest fundamentalna w dzisiejszej branży IT. Studenci nauczyli się strategii branchingowej z feature branches, release branches i hotfix branches, a także przeprowadzania code review i rozwiązywania konfliktów w kodzie. Te umiejętności są kluczowe w prawdziwej pracy zespołowej, a obserwowanie, jak studenci komunikują się ze sobą podczas rozwiązywania konfliktów, pokazało mi, jak cenna jest wymiana wiedzy i doświadczeń w naszej społeczności.

Firebase jako backend

Firebase był dla wielu studentów pierwszym kontaktem z backendem jako usługą. Pracowaliśmy nad autentyfikacją (email/hasło, Google Sign-In, resetowanie hasła, role użytkowników) oraz Firestore Database w środowisku NoSQL – kolekcje, dokumenty, real-time listeners i Security Rules. Ta ostatnia część – deklaratywne definiowanie reguł bezpieczeństwa – okazała się jednym z największych wyzwań dla uczestników. Widok, jak studenci przechodzą od myślenia o backendzie jako o własnym serwerze do rozumienia cloud-first approach, był fascynujący i przypomniał mi, jak ważne jest otwieranie nowych perspektyw w edukacji.

State management i wielojęzyczność

Pinia służyła nam do globalnego zarządzania stanem. Studenci uczyli się organizować stores w logiczne moduły i decydować, kiedy stan powinien być globalny, a kiedy lokalny. Ta część projektu wymagała od nich myślenia architektonicznego i zrozumienia, jak strukturyzować aplikację, aby była skalowalna i łatwa w utrzymaniu.

Wielojęzyczność aplikacji z @nuxtjs/i18n obejmowała lazy loading tłumaczeń, locale routing i language switcher. Dzięki temu studenci mogli stworzyć aplikacje dostępne dla szerszego grona użytkowników, co jest nieocenioną wartością w dzisiejszym globalnym świecie technologii.

Projekt finalny

Studenci stworzyli kompletne aplikacje webowe zawierające moduł użytkowników z rejestracją, logowaniem (email i Google), resetowaniem hasła i systemem ról, pełny CRUD dla dwóch typów encji z paginacją, wyszukiwaniem i real-time updates, panel administracyjny, wielojęzyczność (minimum dwa języki) oraz responsive design z Vuetify.

Wyzwania

Główne wyzwania, z którymi musieliśmy się zmierzyć, obejmowały złożoność architektoniczną – przejście z prostego Vue na ustrukturyzowany framework nuxtowy wymagało zmiany sposobu myślenia o strukturze aplikacji. Asynchroniczność, czyli praca z danymi w czasie rzeczywistym i synchronizacja stanu, była kolejnym obszarem, który wymagał czasu i cierpliwości. Firebase Security Rules, czyli deklaratywne definiowanie reguł bezpieczeństwa, okazało się jednym z najtrudniejszych elementów, ponieważ wymagało zmiany sposobu myślenia o bezpieczeństwie aplikacji. Git Flow w praktyce pokazał, że prawdziwe konflikty wymagają komunikacji i kompromisów w zespole, co jest nieocenioną lekcją dla przyszłych inżynierów.

Osobiste refleksje

Obserwowanie procesu nauki moich podopiecznych i widok, jak pokonują kolejne wyzwania programistyczne, był dla mnie ogromną satysfakcją. Progresja od Vue do Nuxt okazała się naturalnym krokiem dla studentów, choć krzywa uczenia była stroma i wymagała więcej czasu na praktyczne przykłady. Firebase pokazał im, jak budować aplikacje cloud-first bez własnego backendu, a Git Flow nauczył praktycznej współpracy w zespole.

Jestem głęboko przekonany, że uczestnictwo w tego typu projektach przynosi ogromne korzyści nie tylko w kontekście nauki konkretnych technologii, ale przede wszystkim w rozwijaniu myślenia jak inżynierowie – przekładania wymagań biznesowych na architekturę techniczną i świadomego podejmowania decyzji o trade-offach. W dziedzinie programowania współpraca i wymiana wiedzy powinny stanowić fundament naszej branży, a Projekt Innowacje jest doskonałym przykładem tego, jak można to osiągnąć.

Podsumowanie

Zimowa edycja Projektu Innowacje 2023/2024 pokazała, że studenci nauczyli się nie tylko konkretnych technologii, ale przede wszystkim myślenia jak inżynierowie – przekładania wymagań biznesowych na architekturę techniczną i świadomego podejmowania decyzji o trade-offach. Ograniczenia darmowego tier Firebase czasem frustrowały, a niektóre projekty były zbyt ambitne – lekcja priorytetyzacji była trudna, ale potrzebna i nauczyła studentów, jak ważne jest realistyczne planowanie w projektach technologicznych.

Chciałbym podziękować wszystkim studentom, którzy wzięli udział w tej edycji, za ich zaangażowanie, ciekawość i determinację w pokonywaniu kolejnych wyzwań. Dziękuję również organizatorom Projektu Innowacje na Politechnice Łódzkiej za możliwość dzielenia się wiedzą i doświadczeniem z młodymi programistami. Zapraszam wszystkich zainteresowanych technologiami webowymi do eksplorowania Nuxt i Firebase – to fascynujące narzędzia, które otwierają drzwi do zaawansowanych aplikacji webowych.

Linki

Udostępnij artykuł:

Paweł Rutkowski

Paweł Rutkowski

Full-stack developer, przedsiębiorca i pasjonat nowych technologii.

📚 Powiązane Posty

Inne artykuły, które mogą Cię zainteresować