Configuration de React Native

Téléchargez les fichiers d'intégration React Native à l'adresse https://github.com/Crowdhandler/ch-react-native-integration/releases/download/1.0.0/ch-react-native-integration.zip et ajoutez le dossier « ch-react-native-integration » à votre projet.

1. Configurer le fournisseur CrowdHandler#

Importez CrowdHandlerProvider au niveau supérieur de votre application.

App.js

import { CrowdHandlerProvider } from './ch-react-native-integration';

Créez un objet au sein de votre application pour gérer les événements.

Ces événements sont déclenchés par CrowdHandler pour vous permettre de réagir en fonction de l'état.

Il y a 2 écouteurs d'événements obligatoires.

onWait() - Appelée lorsque CrowdHandler détecte qu'un utilisateur doit être redirigé vers l'écran de la salle d'attente

onRedirect() - Appelée lorsque CrowdHandler détecte qu'un utilisateur doit être redirigé vers l'écran que vous protégez.

Vous pouvez également utiliser deux autres écouteurs d'événements : onRequestStart() et onRequestEnd().

Ces méthodes sont appelées avant et après l'envoi de la requête CrowdHandler et permettent d'indiquer à l'utilisateur que le système est en cours d'exécution.

App.js

export default function App() {

    const CHEvents = {
        navigation: null, // holds the navigation stack so CrowdHandler can redirect the correct screens
        onWait: function (ch_response) { // required
            launchWaitingRoomScreen(ch_response);
        },
        onRedirect: function (ch_response) { // required
            redirectToScreen(ch_response);
        },
        onRequestStart: function () {}, //optional
        onRequestEnd: function () {} // optional
    };
...

et créer des fonctions pour gérer ces événements.

Nous définissons ici le nom de l'écran de la salle d'attente comme « CHWaitingRoom ».

Assurez-vous que ce nom corresponde à celui de l'écran figurant dans votre pile de navigation.

App.js

const launchWaitingRoomScreen = (ch_response) => {
    ch_response.navigation.navigate('CHWaitingRoom', { ...ch_response.screen_config });
}
const redirectToScreen = (ch_response) => {
    if(ch_response.referer === 'waiting_room') {
      ch_response.navigation.replace(ch_response.screen_config.redirect, ch_response.screen_config);
    } else {
      ch_response.navigation.navigate(ch_response.screen_config.redirect, ch_response.screen_config);
    }
}

Enveloppez votre application avec le composant CrowdHandlerProvider en lui transmettant comme props l'objet d'événement créé précédemment, CHEvents, ainsi que votre clé API publique. Vous pouvez également ajouter une valeur pour délai d'expiration en millisecondes. Ce paramètre indique à CrowdHandler de rediriger vers l'écran protégé en cas de délai d'expiration de l'API ou de requête trop lente. S'il n'est pas défini, la valeur par défaut est de 3 000 ms (soit 3 secondes).

App.js

<CrowdHandlerProvider
    timeout={3000}
    chEvents={CHEvents}
    apiKey={"04b39378b6abc3d4ee870824371646a9d1e157b1a7720821add4c260108ebd48"}>
    <NavigationStack/>
</CrowdHandlerProvider>

2. Ajoutez le WebView CrowdHandler à votre pile de navigation.#

Importez le composant CHWebView à l'endroit où vous créez votre pile de navigation

NavigationStack.js

import {CHWebView} from './ch-react-native-integration';

CHWebView est un composant qui renvoie un composant WebView et qui nécessite react-native-webview comme dépendance.

Pour installer react-native-webview, exécutez la commande suivante :

yarn add react-native-webview

ou

npm install --save react-native-webview

Pour plus d'informations sur react-native-webview, cliquez ici

https://github.com/react-native-webview/react-native-webview/blob/master/docs/Getting-Started.md

Dans votre pile de navigation, vous devrez créer un écran dédié à la « salle d'attente ». Définissez la propriété « name » sur la même valeur que celle que vous avez définie dans le <span>launchWaitingRoomScreen</span> Dans la fonction ci-dessus, nous l'avons définie sur CHWaitingRoom.

Importez le composant CHWebView et attribuez la propriété « component » de l'écran à ce compos ant.

NavigationStack.js

...
<Stack.Navigator>
    <Stack.Screen name="Home" component={HomeScreen}/>
    <Stack.Screen name="Details" component={ProductsScreen}/>
    <Stack.Screen name="ProductScreen" component={ProductScreen} />
    <Stack.Screen name="CHWaitingRoom" component={CHWebView} />
</Stack.Navigator>
...

3. Intercepter les clics de navigation#

Pour les pages que vous souhaitez protéger, vous devez intercepter l'action de navigation de l'utilisateur et vérifier auprès de CrowdHandler avant de lui afficher l'écran souhaité. Pour ce faire, importez le useCrowdHandler le contexte du fichier CrowdHandlerGatekeeper dans le composant d'écran qui gère les entrées de navigation.

ProductsScreen.js

import { useCrowdHandler } from "./ch-react-native-integration";

puis intégrer le contexte CrowdHandler dans le composant d'écran.

ProductsScreen.js

export const ProductsScreen = ({ navigation }) => {

    const crowdhandler_gatekeeper = useCrowdHandler();

    // pass a reference of navigation to the gatekeeper
    // this allows CrowdHandler to redirect the user to the correct screen
    crowdhandler_gatekeeper.setNavigation(navigation);
...

Ajoutez une fonction permettant de gérer le cas où un utilisateur clique sur un élément de navigation qui le redirige vers un écran que vous souhaitez protéger.

ProductsScreen.js

export const ProductsScreen = ({ navigation }) => {
    const crowdhandler_gatekeeper = useCrowdHandler();

    // pass a reference of navigation to the gatekeeper
    // this allows CrowdHandler to redirect the user to the correct screen
    crowdhandler_gatekeeper.setNavigation(navigation);

    const handleCheckWithCrowdHandler = async (product) => {
        if (product.slug || product.url) {
            await crowdhandler_gatekeeper.redirectOrWait(product);
        } else {
            navigation.navigate(product.redirect, product)
        }
    }
...

et ajoutez ce gestionnaire à l'événement onPress du bouton.

Crowdhandler permet de protéger les écrans en fonction du slug de la « salle d'attente » ou de l'URL que vous souhaitez protéger.

ProductsScreen.js

// A collection of products
// Minimum requirements are that they have the waiting room slug or URL to protect
// and a screen to redirect to
// Analogous to params that are sent to react-navigator and any
// params that are set here are sent to the navigator on redirect

const products = [
    {
        slug: '0MAID6M2iMjNW1WZs', // waiting room slug from crowdhander admin
        redirect: 'ProductScreen', // the screen to redirect to
        title: 'Hiking Boots',
        productID: 'pct_000112312'
    }, {
        url: 'https://example.com/products/protected/page', // URL to protect -  set in crowdhander admin
        redirect: 'ProductScreen',
        // the screen to redirect to
        title: 'Head Torch',
        productID: 'pct_030112552'
    }
]

{products.map((product) => {
    return (
        <Button
            key={product.productID}
            onPress = { () => {
                handleCheckWithCrowdHandler(product)} // send the data to check
            }
        >
        {product.title}
        </Button>
    )
})}
...

4. Mettre tout cela en pratique.#

Dans cette implémentation, lorsqu'un utilisateur appuie sur le bouton, la fonction ` handleCheckWithCrowdHandler()` est appelée, avec l'objet « produit » comme argument, c'est-à-dire :

{
		slug: '0MAID6M2iMjNW1WZs', // waiting room slug from crowdhander admin
    	redirect: 'ProductScreen', // the screen to redirect to
    	title: 'Hiking Boots',
    	productID: 'pct_000112312'
    }

CrowdHandler effectue ensuite une vérification en fonction de la propriété « slug » ou « url » de l'objet

Si l'utilisateur doit attendre onWait() l'événement défini dans App.js. Cette fonction est assurée par le launchWaitingRoom() gestionnaire, également défini dans App.js. L'écran CHWaitingRoom s'affiche et charge la salle d'attente.

Si l'utilisateur peut accéder à l'écran protégé onRedirect() est appelée et l'utilisateur est redirigé vers l'écran spécifié dans l'objet produit, dans ce cas Fiche produit