Aller au contenu principal

Installation de l'Onboarding - Guide étape par étape

✅ Ce qui a été créé​

1. Entités et modèles (Fait ✅)​

  • business_type.dart : Enum avec 16 types de métiers artisanaux
  • user_profile.dart : Mis à jour avec businessType, businessName, hasCompletedOnboarding
  • user_profile_model.dart : Mis à jour pour la sérialisation/désérialisation

2. Onboarding UI (Fait ✅)​

  • onboarding_flow_page.dart : Flow complet en 3 étapes
    • Welcome screen avec présentation de l'app
    • Sélection du type de métier (16 options)
    • Nom du business (optionnel)

3. Intégration dans les paramètres (Fait ✅)​

  • Nouvelle section "Type d'activité" dans les paramètres
  • Affichage du métier actuel avec emoji

4. Documentation (Fait ✅)​

  • README.md : Guide complet d'utilisation
  • ONBOARDING_DATABASE.md : Documentation SQL
  • INSTALLATION.md : Ce fichier

🚀 Étapes d'installation​

Étape 1 : Mettre à jour la base de données Supabase​

Action : Exécuter le SQL suivant dans Supabase

  1. Aller sur Supabase Dashboard
  2. Sélectionner votre projet
  3. Aller dans Database → SQL Editor
  4. Coller et exécuter le code suivant :
-- Ajouter les nouvelles colonnes à la table user_profiles
ALTER TABLE user_profiles
ADD COLUMN IF NOT EXISTS business_type TEXT,
ADD COLUMN IF NOT EXISTS business_name TEXT,
ADD COLUMN IF NOT EXISTS has_completed_onboarding BOOLEAN DEFAULT false;

-- Créer les index pour améliorer les performances
CREATE INDEX IF NOT EXISTS idx_user_profiles_business_type
ON user_profiles(business_type);

CREATE INDEX IF NOT EXISTS idx_user_profiles_onboarding
ON user_profiles(has_completed_onboarding);

-- Ajouter une contrainte CHECK pour valider le business_type
ALTER TABLE user_profiles
ADD CONSTRAINT check_business_type CHECK (
  business_type IS NULL OR
  business_type IN (
    'patisserie', 'boulangerie', 'traiteur', 'chocolaterie',
    'ongles', 'coiffure', 'esthetique', 'massage', 'barbier',
    'couture', 'fleuriste', 'photographe', 'maquilleuse',
    'tatoueur', 'bijouterie', 'autre'
  )
);

Vérification :

-- Vérifier que les colonnes existent
SELECT column_name, data_type
FROM information_schema.columns
WHERE table_name = 'user_profiles'
  AND column_name IN ('business_type', 'business_name', 'has_completed_onboarding');

Étape 2 : Intégrer l'onboarding dans le flow d'authentification​

Où ? Dans votre page de splash/auth (probablement lib/features/auth/... ou main.dart)

Code à ajouter :

import 'package:kazacalendar_mobile/features/onboarding/presentation/pages/onboarding_flow_page.dart';
import 'package:kazacalendar_mobile/features/settings/data/repositories/settings_repository_impl.dart';

// Dans votre méthode de vérification d'auth
Future<void> _checkAuthAndOnboarding() async {
  final user = SupabaseConfig.client.auth.currentUser;

  if (user == null) {
    // Utilisateur non connecté → Redirect vers login
    Navigator.of(context).pushReplacementNamed('/login');
    return;
  }

  // Vérifier si l'onboarding est complété
  final repository = SettingsRepositoryImpl(SupabaseConfig.client);
  final profile = await repository.getUserProfile();

  if (profile == null || profile.hasCompletedOnboarding != true) {
    // Onboarding non complété → Redirect vers onboarding
    if (mounted) {
      Navigator.of(context).pushReplacement(
        MaterialPageRoute(
          builder: (context) => const OnboardingFlowPage(),
        ),
      );
    }
  } else {
    // Onboarding complété → Redirect vers la page principale
    if (mounted) {
      Navigator.of(context).pushReplacementNamed('/main');
    }
  }
}

Exemple complet (Splash Screen) :

class SplashPage extends StatefulWidget {
  const SplashPage({super.key});

  @override
  State<SplashPage> createState() => _SplashPageState();
}

class _SplashPageState extends State<SplashPage> {
  @override
  void initState() {
    super.initState();
    _initialize();
  }

  Future<void> _initialize() async {
    // Attendre 2 secondes (animation de splash)
    await Future.delayed(const Duration(seconds: 2));

    if (!mounted) return;

    final user = SupabaseConfig.client.auth.currentUser;

    if (user == null) {
      Navigator.of(context).pushReplacementNamed('/login');
      return;
    }

    // Vérifier le profil et l'onboarding
    try {
      final repository = SettingsRepositoryImpl(SupabaseConfig.client);
      final profile = await repository.getUserProfile();

      if (profile == null || profile.hasCompletedOnboarding != true) {
        // Onboarding requis
        Navigator.of(context).pushReplacement(
          MaterialPageRoute(
            builder: (context) => const OnboardingFlowPage(),
          ),
        );
      } else {
        // Tout est bon, aller sur la page principale
        Navigator.of(context).pushReplacementNamed('/main');
      }
    } catch (e) {
      // En cas d'erreur, rediriger vers login
      Navigator.of(context).pushReplacementNamed('/login');
    }
  }

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: CircularProgressIndicator(),
      ),
    );
  }
}

Étape 3 : Ajouter la route de l'onboarding​

Où ? Dans votre fichier de routes (probablement main.dart ou app.dart)

routes: {
  '/': (context) => const SplashPage(),
  '/login': (context) => const LoginPage(),
  '/onboarding': (context) => const OnboardingFlowPage(), // ← AJOUTER
  '/main': (context) => const MainPage(),
  // ... autres routes
}

Étape 4 : (Optionnel) Gérer les utilisateurs existants​

Choix 1 : Forcer tous les utilisateurs à passer par l'onboarding

UPDATE user_profiles
SET has_completed_onboarding = false;

Choix 2 : Marquer les utilisateurs existants comme ayant complété l'onboarding

UPDATE user_profiles
SET
  has_completed_onboarding = true,
  business_type = 'autre' -- Type par défaut
WHERE created_at < NOW() - INTERVAL '1 day';

Étape 5 : Tester l'onboarding​

  1. Créer un nouveau compte :

    • Déconnectez-vous de l'app
    • Créez un nouveau compte
    • Vérifiez que l'onboarding s'affiche

  2. Compléter les 3 étapes :

    • Welcome screen → Cliquer sur "Continuer"
    • Business type → Sélectionner un métier → "Continuer"
    • Business name → Remplir (ou pas) → "Terminer"

  3. Vérifier dans Supabase :

    SELECT
      first_name,
      last_name,
      business_type,
      business_name,
      has_completed_onboarding
    FROM user_profiles
    WHERE email = 'votre-test-email@example.com';

  4. Vérifier dans les paramètres :

    • Aller dans Paramètres
    • Section "Profil"
    • Voir "Type d'activité" avec l'emoji et le label du métier sélectionné

🎨 Personnalisation (Optionnel)​

Changer les couleurs de l'onboarding​

Modifier dans onboarding_flow_page.dart :

// Ligne ~187 : Gradient du welcome screen
gradient: LinearGradient(
  colors: [
    AppTheme.accentColor, // ← Votre couleur primaire
    AppTheme.accentColor.withOpacity(0.7),
  ],
)

Ajouter/Retirer des métiers​

  1. Ajouter dans l'enum (business_type.dart) :
menuisier('menuisier', 'Menuiserie', '🪚', 'Créations en bois'),
  1. Mettre à jour la contrainte SQL :
ALTER TABLE user_profiles
DROP CONSTRAINT check_business_type;

ALTER TABLE user_profiles
ADD CONSTRAINT check_business_type CHECK (
  business_type IS NULL OR
  business_type IN (
    'patisserie', ..., 'menuisier' -- ← Ajouter
  )
);

Modifier les étapes de l'onboarding​

Dans onboarding_flow_page.dart, modifier le PageView :

PageView(
  children: [
    _buildWelcomePage(),
    _buildBusinessTypePage(),
    _buildBusinessNamePage(),
    _buildYourCustomPage(), // ← Nouvelle étape
  ],
)

🔍 Troubleshooting​

L'onboarding ne s'affiche pas​

Cause possible : Les colonnes n'existent pas dans user_profiles

Solution :

SELECT * FROM user_profiles LIMIT 1;
-- Vérifier si les colonnes business_type, business_name, has_completed_onboarding existent

Erreur "Constraint violation"​

Cause : Le business_type sauvegardé ne correspond pas aux valeurs autorisées

Solution :

-- Voir la contrainte actuelle
SELECT con.conname, pg_get_constraintdef(con.oid)
FROM pg_catalog.pg_constraint con
WHERE conname = 'check_business_type';

L'onboarding s'affiche en boucle​

Cause : has_completed_onboarding ne passe pas à true

Solution :

  • Vérifier les RLS policies sur user_profiles
  • Vérifier que l'utilisateur a les permissions d'update
  • Ajouter des logs dans _completeOnboarding()

📊 Données collectées​

Les données suivantes sont collectées pendant l'onboarding :

ChampTypeObligatoireExemple
business_typeString✅ Oui'patisserie'
business_nameString❌ Non'Pâtisserie Sophie'
has_completed_onboardingBoolean✅ Ouitrue

🎯 Prochaines étapes​

  1. Test en production : Tester avec des vrais utilisateurs
  2. Analytics : Tracker combien d'utilisateurs complètent l'onboarding
  3. Dialog de modification : Implémenter le dialog pour modifier le type de métier depuis les paramètres
  4. Personnalisation automatique : Adapter la terminologie dans toute l'app selon le BusinessType

✅ Checklist d'installation​

  • SQL exécuté dans Supabase
  • Vérification des colonnes en BDD
  • Code d'intégration dans splash/auth ajouté
  • Route /onboarding ajoutée
  • Test avec un nouveau compte
  • Vérification dans Supabase que les données sont sauvegardées
  • Vérification dans les paramètres que le métier s'affiche

📞 Support​

En cas de problème :

  1. Vérifier les logs de l'app
  2. Vérifier les logs Supabase
  3. Consulter README.md et ONBOARDING_DATABASE.md
  4. Contacter l'équipe de développement

Bravo ! L'onboarding est maintenant installé ! 🎉