Przejdź do treści

Pierwsze uruchomienie aplikacji

Checklist przed uruchomieniem

Upewnij się że masz: - ✅ Sklonowane oba repozytoria (portal + API) - ✅ Zainstalowane zależności (npm install + dotnet restore) - ✅ Uruchomione lokalne usługi (docker-compose up -d) - ✅ Skonfigurowane pliki environment - ✅ Wykonane migracje bazy danych

Krok 1: Uruchom backend

cd masaku-api/docker

# Uruchom lokalne usługi (SQL, Azurite, MailHog)
docker-compose up -d

# Sprawdź status
docker-compose ps

# Przejdź do projektu API
cd ../Masaku.API

# Uruchom API
dotnet run

Weryfikacja: - API dostępne na: http://localhost:5000 - Swagger UI: http://localhost:5000/swagger - Sprawdź logi - powinny być bez błędów

Krok 2: Uruchom frontend

W nowym terminalu:

cd masaku-portal

# Uruchom dev server
npm start

# Alternatywnie z HMR
npm run start:hmr

Weryfikacja: - Aplikacja dostępna na: http://localhost:4200 - Compilation successful - Brak błędów w konsoli przeglądarki

Krok 3: Pierwsze logowanie

  1. Otwórz przeglądarkę: http://localhost:4200
  2. Kliknij "Login" / "Zaloguj się"
  3. Zostaniesz przekierowany do Azure AD B2C
  4. Uwaga: W środowisku lokalnym możesz mieć problem z autoryzacją jeśli nie masz odpowiednich credentials

Workaround dla lokalnego developmentu

Jeśli nie masz dostępu do Azure AD B2C:

Opcja A: Mock authentication (development mode) 

// W src/app/app.module.ts - dodaj dla developmentu
providers: [
  {
    provide: AuthService,
    useClass: MockAuthService // Zaimplementuj mock service
  }
]

Opcja B: Poproś team lead o testowe credentials - Login: test.user@masaku.com - Password: [poproś o dostęp]

Krok 4: Sprawdź podstawowe funkcje

Dashboard

  • Przejdź do Dashboard
  • Sprawdź czy ładują się statystyki
  • Sprawdź console - brak błędów 404 lub 500

Budżety

  1. Przejdź do Budżety → Budżety osobiste
  2. Kliknij "Dodaj budżet"
  3. Wypełnij formularz
  4. Zapisz
  5. Sprawdź czy budżet pojawił się na liście

Klienci

  1. Przejdź do Klienci
  2. Kliknij "Dodaj klienta"
  3. Wypełnij formularz (NIP, nazwa, adres)
  4. Zapisz
  5. Sprawdź walidację NIP

Krok 5: Sprawdź DevTools

Browser DevTools (F12)

Console: - Brak błędów 404, 500 - Brak błędów TypeScript - Ostrzeżenia można ignorować

Network: - API calls do http://localhost:5000/api/* - Status 200 lub 201 dla udanych requestów - Sprawdź Response w przypadku błędów

Redux DevTools (jeśli zainstalowane): - Sprawdź NGXS state - Obserwuj actions podczas operacji

Backend Logs

Sprawdź terminal gdzie działa dotnet run: - Request logs (GET, POST, PUT, DELETE) - SQL queries (w Debug mode) - Brak ERROR ani CRITICAL logs

Krok 6: Testowanie emaili

  1. Wykonaj operację która wysyła email (np. rejestracja, reset hasła)
  2. Otwórz MailHog: http://localhost:8025
  3. Sprawdź czy email się pojawił
  4. Sprawdź treść i formatowanie

Krok 7: Sprawdź bazę danych

W DBeaver: 

-- Sprawdź czy tabele zostały utworzone
SELECT TABLE_NAME
FROM INFORMATION_SCHEMA.TABLES
WHERE TABLE_TYPE = 'BASE TABLE';

-- Sprawdź dane testowe
SELECT * FROM Users;
SELECT * FROM Budgets;
SELECT * FROM Clients;

Krok 8: Hot reload testing

Frontend hot reload

  1. Edytuj plik src/app/app.component.html
  2. Zapisz
  3. Sprawdź czy przeglądarka auto-odświeżyła (HMR)

Backend hot reload

  1. Zatrzymaj dotnet run
  2. Uruchom dotnet watch run
  3. Edytuj plik controllera
  4. Zapisz - API powinno się automatycznie zrestartować

Typowe problemy przy pierwszym uruchomieniu

Frontend nie startuje

# Wyczyść node_modules
rm -rf node_modules package-lock.json
npm cache clean --force
npm install

# Sprawdź wersję Node
node --version  # Powinno być >= 16.x

# Sprawdź czy port 4200 jest wolny
lsof -ti:4200 | xargs kill -9

Backend nie startuje

# Sprawdź czy SQL Server działa
docker ps | grep sql

# Sprawdź connection string w appsettings.Development.json
cat Masaku.API/appsettings.Development.json | grep ConnectionStrings

# Reset bazy
cd docker
docker-compose down -v
docker-compose up -d

CORS errors

Jeśli widzisz błędy CORS w konsoli przeglądarki: 

Access to XMLHttpRequest at 'http://localhost:5000/api/...'
from origin 'http://localhost:4200' has been blocked by CORS policy

Sprawdź Masaku.API/Startup.cs: 

services.AddCors(options =>
{
    options.AddPolicy("Development",
        builder => builder
            .WithOrigins("http://localhost:4200")
            .AllowAnyMethod()
            .AllowAnyHeader()
            .AllowCredentials());
});

Cannot authenticate

  1. Sprawdź Azure AD B2C configuration w environment.ts
  2. Sprawdź czy redirect URI jest poprawny
  3. Użyj mock authentication dla developmentu

Baza danych jest pusta

# Uruchom migracje Liquibase
cd masaku-api/Sql/Liquibase
liquibase update

# Lub pozwól API automatycznie wykonać migracje przy starcie

Weryfikacja końcowa

✅ Backend działa na http://localhost:5000 ✅ Frontend działa na http://localhost:4200 ✅ Możesz się zalogować ✅ Dashboard się ładuje ✅ API calls działają (sprawdź Network tab) ✅ Możesz dodać budżet/klienta ✅ Baza danych zawiera dane ✅ MailHog odbiera emaile

Gratulacje! 🎉 Środowisko jest gotowe do pracy.

Dalsze kroki

Dalsze zasoby