Aller au contenu principal

Développement Local

Configuration Initiale​

1. Cloner le Repository​

git clone https://github.com/user/momentscollectifs.git
cd momentscollectifs

2. Installer les Dépendances​

# Frontend
cd front-dedicaces
npm install

# Video Generator
cd ../dedicace-generator
npm install

3. Configurer Supabase Local​

cd back-dedicaces

# Installer Supabase CLI
npm install -g supabase

# Démarrer Supabase
npx supabase start

Après le démarrage, noter les informations affichées :

  • API URL: http://localhost:54321
  • Anon key: eyJ...
  • Service role key: eyJ...

4. Configurer les Variables d'Environnement​

Frontend​

// front-dedicaces/src/environments/environment.ts
export const environment = {
  production: false,
  supabaseUrl: 'http://localhost:54321',
  supabaseKey: 'eyJ...', // Anon key de supabase start
  stripeKey: 'pk_test_...',
  generatorUrl: 'http://localhost:5001'
};

Video Generator​

# dedicace-generator/.env
PORT=5001
NODE_ENV=development
SUPABASE_URL=http://localhost:54321
SUPABASE_SERVICE_KEY=eyJ... # Service role key

Démarrage des Services​

Terminal 1 : Backend Supabase​

cd back-dedicaces
npx supabase start

# Vérifier le statut
npx supabase status

Terminal 2 : Frontend Angular​

cd front-dedicaces
npm start

Frontend accessible sur : http://localhost:4200

Terminal 3 : Video Generator​

cd dedicace-generator
npm run dev

API accessible sur : http://localhost:5001

Terminal 4 : Landing Page (optionnel)​

cd landing-page-kazadedicate
python -m http.server 8000

Landing accessible sur : http://localhost:8000

Accès aux Outils​

Supabase Studio​

URL : http://localhost:54323

Interface graphique pour :

  • Visualiser/éditer les données
  • Gérer l'authentification
  • Voir les logs
  • Tester les requêtes SQL

Mailhog (Emails)​

URL : http://localhost:54324

Capture les emails envoyés (invitations, confirmations).

Base de Données​

Appliquer les Migrations​

cd back-dedicaces
npx supabase db push

Créer une Nouvelle Migration​

# Après avoir modifié le schéma dans Studio
npx supabase db diff --schema public -f nom_migration

Reset de la Base​

npx supabase db reset

Seed Data (Données de Test)​

-- back-dedicaces/supabase/seed.sql

-- Créer un utilisateur test
INSERT INTO auth.users (id, email)
VALUES ('00000000-0000-0000-0000-000000000001', 'test@example.com');

-- Créer un événement
INSERT INTO product (name, description, created_by, date_event)
VALUES ('Test Event', 'Description', '00000000-0000-0000-0000-000000000001', '2024-06-01');

-- Créer des messages
INSERT INTO product_items (product_id, participant_name, message_media, message_type)
VALUES
  (1, 'Jean', '<p>Hello World!</p>', 'TEXT'),
  (1, 'Marie', '<p>Test message</p>', 'TEXT');

Debug​

Frontend (Angular)​

DevTools​

  1. Ouvrir Chrome DevTools (F12)
  2. Onglet "Sources" pour le débogage
  3. Onglet "Network" pour les requêtes
  4. Extension Angular DevTools

Logs NGXS​

// app.config.ts (dev only)
import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin';

export const appConfig: ApplicationConfig = {
  providers: [
    // ...
    importProvidersFrom(
      NgxsLoggerPluginModule.forRoot({
        disabled: environment.production
      })
    )
  ]
};

Backend (Supabase)​

# Voir les logs
npx supabase logs

# Logs d'une fonction spécifique
npx supabase functions logs invite-participate

Video Generator​

# Mode debug avec logs détaillés
DEBUG=* npm run dev

Tests Manuels​

Créer un Compte Test​

  1. Aller sur http://localhost:4200/inscription
  2. S'inscrire avec un email
  3. Vérifier l'email dans Mailhog (http://localhost:54324)
  4. Confirmer et se connecter

Tester le Flux Complet​

  1. Créer un événement dans le dashboard
  2. Inviter un participant (email de test)
  3. Vérifier l'invitation dans Mailhog
  4. Soumettre un message en tant que participant
  5. Générer la vidéo depuis le dashboard

Tester l'API Video Generator​

# Health check
curl http://localhost:5001/health

# Créer une présentation test
curl -X POST http://localhost:5001/create_presentation \
  -H 'Content-Type: application/json' \
  -d '{
    "title": "Test",
    "pages": [
      {"id": 1, "type": "text", "content": "<p>Hello</p>", "author": "Test"}
    ]
  }'

Problèmes Courants​

Port déjà utilisé​

# Trouver le processus
lsof -i :4200

# Tuer le processus
kill -9 <PID>

Supabase ne démarre pas​

# Reset complet
npx supabase stop
docker system prune -f
npx supabase start

Erreur CORS​

Vérifier que les origins sont configurées :

// dedicace-generator/main.js
app.use(cors({
  origin: ['http://localhost:4200', 'http://localhost:3000']
}));

FFmpeg non trouvé​

# macOS
brew install ffmpeg

# Ubuntu
sudo apt install ffmpeg

# Vérifier
ffmpeg -version

IDE Setup (VS Code)​

Extensions Recommandées​

// .vscode/extensions.json
{
  "recommendations": [
    "angular.ng-template",
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "bradlc.vscode-tailwindcss",
    "formulahendry.auto-rename-tag"
  ]
}

Configuration​

// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "typescript.preferences.importModuleSpecifier": "relative",
  "tailwindCSS.includeLanguages": {
    "html": "html",
    "typescript": "javascript"
  }
}