Aller au contenu principal
Version: 0.0.5 (latest)

Utilisation basique

Apprenez les bases de l'utilisation de Mini-Zoe dans votre application React Native.

Concept de base​

Mini-Zoe fonctionne avec deux éléments principaux :

  1. Le composant <MiniZoe /> - L'interface visuelle de l'assistant
  2. Le store VoiceRecognitionStore - Pour contrĂ´ler l'affichage et les messages

Configuration minimale​

Voici la configuration la plus simple pour démarrer :

import React from 'react';
import { View } from 'react-native';
import { MiniZoe } from '@blueshork/mini-zoe';

function App() {
  return (
    <View style={{ flex: 1 }}>
      {/* Votre contenu */}

      <MiniZoe enabled={true} />
    </View>
  );
}

Afficher Mini-Zoe​

Méthode 1 : Navigation​

La méthode navigate() est utilisée pour indiquer à l'utilisateur qu'il navigue vers une nouvelle page :

import { VoiceRecognitionStore } from '@blueshork/mini-zoe';

// Dans votre gestionnaire de navigation
function goToProfile() {
  // Naviguez vers la page
  navigation.navigate('Profile');

  // Affichez Mini-Zoe avec le nom de la page
  VoiceRecognitionStore.navigate('Profil');
}

Méthode 2 : Message personnalisé​

La méthode show() permet d'afficher Mini-Zoe avec n'importe quel message :

import { VoiceRecognitionStore } from '@blueshork/mini-zoe';

// Lors d'une action utilisateur
function handleLogin() {
  // Votre logique de connexion
  loginUser();

  // Confirmez Ă  l'utilisateur
  VoiceRecognitionStore.show('Bienvenue sur l\'application !');
}

Masquer Mini-Zoe​

Automatiquement​

Par défaut, Mini-Zoe se masque automatiquement après 2,5 secondes. Vous pouvez modifier cette durée :

<MiniZoe
  enabled={true}
  autoHideDuration={3000} // 3 secondes
/>

Manuellement​

Vous pouvez Ă©galement masquer Mini-Zoe manuellement Ă  tout moment :

import { VoiceRecognitionStore } from '@blueshork/mini-zoe';

// Masquer immédiatement
VoiceRecognitionStore.hide();

Exemples pratiques​

Exemple 1 : Feedback de navigation​

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { MiniZoe, VoiceRecognitionStore } from '@blueshork/mini-zoe';

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer
      onStateChange={(state) => {
        // Récupérer le nom de la route actuelle
        const currentRoute = state?.routes[state.index]?.name;

        // Afficher Mini-Zoe lors de chaque navigation
        if (currentRoute) {
          VoiceRecognitionStore.navigate(currentRoute);
        }
      }}
    >
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>

      <MiniZoe enabled={true} />
    </NavigationContainer>
  );
}

Exemple 2 : Feedback d'action​

import React from 'react';
import { View, Button } from 'react-native';
import { VoiceRecognitionStore } from '@blueshork/mini-zoe';

function SettingsScreen() {
  const handleSave = () => {
    // Sauvegarder les paramètres
    saveSettings();

    // Confirmer Ă  l'utilisateur
    VoiceRecognitionStore.show('Paramètres sauvegardés !');
  };

  const handleReset = () => {
    // RĂ©initialiser
    resetSettings();

    // Informer l'utilisateur
    VoiceRecognitionStore.show('Paramètres réinitialisés');
  };

  return (
    <View>
      <Button title="Sauvegarder" onPress={handleSave} />
      <Button title="RĂ©initialiser" onPress={handleReset} />
    </View>
  );
}

Exemple 3 : Messages d'erreur​

import { VoiceRecognitionStore } from '@blueshork/mini-zoe';

async function handleFormSubmit(data) {
  try {
    await submitForm(data);
    VoiceRecognitionStore.show('Formulaire envoyé avec succès !');
  } catch (error) {
    VoiceRecognitionStore.show('Erreur lors de l\'envoi du formulaire');
  }
}

Bonnes pratiques​

À faire​

  • Utilisez navigate() pour les changements de page
  • Utilisez show() pour les confirmations d'actions
  • Gardez les messages courts et clairs
  • Adaptez la durĂ©e d'affichage selon le message

À éviter​

  • Afficher Mini-Zoe trop frĂ©quemment (risque de saturation)
  • Utiliser des messages trop longs
  • Afficher plusieurs messages simultanĂ©ment
  • Oublier de tester avec le Text-to-Speech activĂ©

Gestion de l'état​

Mini-Zoe gère automatiquement son état d'affichage. Vous n'avez pas besoin de gérer manuellement la visibilité dans votre composant.

// ❌ Pas besoin de faire ça
const [showMiniZoe, setShowMiniZoe] = useState(false);

// âś… Utilisez directement le store
VoiceRecognitionStore.show('Message');

Prochaines étapes​