> ## Documentation Index
> Fetch the complete documentation index at: https://devdocs.xbox.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Code source et bonnes pratiques - Winter Starfall

> Téléchargez le code source du jeu de démonstration PlayFab Winter Starfall et parcourez des exemples de code illustrant les bonnes pratiques pour les scénarios de connexion des joueurs et d'achat dans le jeu.

# Code source et scénarios dans Winter Starfall

Ce tutoriel contient des instructions pour télécharger et exécuter le code source de Winter Starfall, ainsi qu'une présentation des exemples de code illustrant les bonnes pratiques pour les scénarios de connexion et d'achat.

## Téléchargement du code source

### Prérequis

* Installer Node JS
* Installer Visual Studio Code

### Configuration pour le développement local

1. Téléchargez le code source depuis [GitHub](https://github.com/PlayFab/winter-starfall).
2. Dans VS Code, ouvrez le dossier `/website` et choisissez d'installer toutes les extensions recommandées.
3. Dans le répertoire `/website`, exécutez npm install pour installer toutes les dépendances.
4. Utilisez `npm run dev` pour démarrer le site. Sélectionnez le lien proposé pour afficher le site.

### Informations d'identification Azure

Pour mettre à jour les secrets AZURE\_CREDENTIALS, exécutez cette commande dans l'interpréteur de commandes du portail Azure :

`az ad sp create-for-rbac --name "VanguardOutrider2" --role contributor --scopes /subscriptions/YOUR_SUBSCRIPTION_ID/resourceGroups/YOUR_RESOURCE_GROUP_NAME --json-auth`

## Flux de connexion

Le flux d'authentification des joueurs dans Winter Starfall comporte deux étapes : l'appel de connexion et les fonctions post-connexion, qui servent à obtenir les informations du joueur auprès du service et à le placer au bon endroit de l'histoire.

### Authentification des joueurs

Pour la partie connexion, le fichier [use-login.ts](https://github.com/PlayFab/winter-starfall/blob/main/website/src/hooks/use-login.ts) définit une fonction wrapper TypeScript qui gère les différentes méthodes d'authentification disponibles pour les joueurs.

Les lignes 144 à 169 définissent la fonction de rappel pour la connexion avec une adresse e-mail et appellent les fonctions post-connexion si la connexion réussit.

```typescript theme={null}
const onLogin = useCallback(() => {
    setIsLoading(true);
    setLoginMethodInProgress("email");

    dispatch(siteSlice.actions.loginSteps(loginEventCount));

    ClientLoginWithEmailAddress({ Email: data.email, Password: data.password })
        .then(result => {
            dispatch(siteSlice.actions.login(result));
            dispatch(siteSlice.actions.loginStepsAdvance());
            // Track logins from returning users
            trackEvent({ name: "Returning User", properties: {} });
        })
        .then(() => {
            return postLoginFunctions();
        })
        .then(() => {
            setIsLoading(false);
            navigate(routes.Explore());
        })
        .catch(problem => {
            dispatch(siteSlice.actions.loginStepsReset());
            onError(problem);
        })
        .finally(() => dispatch(siteSlice.actions.loginStepsReset()));
}, [ClientLoginWithEmailAddress, data.email, data.password, dispatch, navigate, onError, postLoginFunctions]);
```

Le jeu propose 3 méthodes récupérables d'authentification des joueurs : e-mail, Google et Facebook, afin que les comptes des joueurs ne soient jamais perdus. Pour plus d'informations, consultez [Bonnes pratiques de connexion](/fr/services/playfab/identity/player-identity/login/login-basics-best-practices).

### Après la connexion : obtention des données du joueur

Une fois le jeton de sécurité récupéré, il est utilisé pour exécuter les fonctions post-connexion afin d'obtenir l'état de jeu enregistré.

Les lignes 340 à 378 définissent **postLoginFunctions**, qui appelle diverses API Economy et PlayFab Services pour charger le bon emplacement dans l'histoire, les objets d'inventaire, la monnaie, etc. en fonction du joueur.

```typescript theme={null}
return new Promise<void>((resolve, reject) => {
    ClientGetTitleData({ Keys: TITLE_DATA_KEYS_ALL })
        .then(result => {
            dispatch(siteSlice.actions.titleData(result));
            dispatch(siteSlice.actions.loginStepsAdvance());
            loadScripts();
        })
        .then(() =>
            EconomySearchItems({
                Count: SEARCH_ITEMS_MAX_COUNT,
                Filter: "type eq 'currency' or type eq 'catalogItem'",
            })
        )
        .then(result => {
            dispatch(siteSlice.actions.catalog(result.Items));
            dispatch(siteSlice.actions.loginStepsAdvance());
        })
        .then(() => EconomyGetInventoryItems({ Count: SEARCH_ITEMS_MAX_COUNT }))
        .then(result => {
            dispatch(siteSlice.actions.inventory(result.Items));
            dispatch(siteSlice.actions.loginStepsAdvance());
        })
        .then(() => ClientGetUserData({ Keys: USER_DATA_KEYS_PLAYER_ALL }))
        .then(result => {
            dispatch(siteSlice.actions.userDataPlayer(result));
            dispatch(siteSlice.actions.loginStepsAdvance());
        })
        .then(() => ClientGetUserReadOnlyData({ Keys: USER_DATA_KEYS_READONLY_ALL }))
        .then(result => {
            dispatch(siteSlice.actions.userDataReadOnly(result));
            dispatch(siteSlice.actions.loginStepsAdvance());
        })
        .then(() => {
            resolve();
        })
        .catch(problem => {
            dispatch(siteSlice.actions.loginStepsReset());
            reject(problem);
        });
});
```

* D'abord, `ClientGetTitleData` obtient la clé secrète nécessaire à tous les appels d'API
* Ensuite, `EconomySearchItems` recherche dans le catalogue les types monnaie et objet
* Ce résultat sert d'entrée à `EconomyGetInventoryItems` pour renvoyer les objets d'inventaire du joueur
* Enfin, `ClientGetUserData` récupère la valeur qui stocke l'emplacement dans l'histoire dans les données du joueur.

## Flux d'achat

À certains moments du jeu, le joueur a la possibilité d'acheter et de vendre des objets d'inventaire dans la boutique. Le flux d'achat est implémenté dans une autre fonction wrapper. Dans le fichier [use-store.ts](https://github.com/PlayFab/winter-starfall/blob/main/website/src/hooks/use-store.ts), les lignes 40 à 69 affichent la boutique correspondant à l'emplacement où se trouve le joueur et la remplissent avec les objets à vendre en effectuant une recherche dans le catalogue.

```typescript theme={null}
export function useEconomyStoreSingle(storeName: string): IEconomyStoreSingleResults {
    const dispatch = useDispatch();
    const store = useSelector((state: AppState) => state.site.stores).find(store =>
        store.AlternateIds?.find(friendlyId => friendlyId.Type === FRIENDLYID && friendlyId.Value === storeName)
    );
    const { isLoading, error, setError, EconomyGetItem } = usePlayFab();

    useEffect(() => {
        if (!is.null(store) || isStoreLoading) {
            return;
        }

        isStoreLoading = true;

        EconomyGetItem({
            AlternateId: { Type: FRIENDLYID, Value: storeName },
        })
            .then(results => {
                dispatch(siteSlice.actions.storeAdd(results.Item as PlayFabEconomyModels.CatalogItem));
            })
            .catch(setError)
            .finally(() => {
                isStoreLoading = false;
            });
    }, [EconomyGetItem, dispatch, setError, store, storeName]);

    return {
        error,
        isLoading,
        store,
    };
}
```

`EconomyGetItem` est défini dans [use-playfab.ts](https://github.com/PlayFab/winter-starfall/blob/main/website/src/hooks/use-playfab.ts) aux lignes 423 à 446, où l'API PlayFab Economy `GetItems` est utilisée pour effectuer une recherche dans le catalogue et renvoyer des objets.

```typescript theme={null}
const EconomyGetItems = useCallback(
        (request: PlayFabEconomyModels.GetItemsRequest): Promise<PlayFabEconomyModels.GetItemsResponse> => {
            const date = startRequest("EconomyApi", "GetItems", request);

            return new Promise((resolve, reject) => {
                PlayFab.EconomyApi.GetItems(request, (result, problem) => {
                    endRequest(date, problem, result);

                    if (!is.null(problem)) {
                        return reject(problem);
                    }

                    if (result.code !== 200) {
                        return reject(formatPlayFabNon200Error(result));
                    }

                    return resolve(result.data);
                }).catch(reason => {
                    catchRequest(reject, reason);
                });
            });
        },
        [catchRequest, endRequest, startRequest]
    );
```

Lorsqu'un achat est effectué, un appel à l'API `PurchaseInventoryItems` est réalisé. Celui-ci est défini dans [use-playfab.ts](https://github.com/PlayFab/winter-starfall/blob/main/website/src/hooks/use-playfab.ts) aux lignes 540 à 565.

### Vente d'objets

Le flux de vente illustre comment utiliser CloudScript basé sur Azure Functions pour étendre les fonctionnalités du système Economy.

[SellItem.cs](https://github.com/PlayFab/winter-starfall/blob/main/azure-functions/SellItem.cs) définit la fonction CloudScript qui s'exécute lors de la vente d'un objet.

Aux lignes 49 à 61, l'API `GetTitleData` de PlayFab est utilisée pour renvoyer le multiplicateur de la boutique et calculer le prix de vente.

```csharp theme={null}
 // Get your sell multiplier
var titleData = await PlayFabFunctions.GetTitleDataAsync(player, new List<string> { TitleDataKeys.Multipliers }, log);
var sellMultiplier = JsonConvert.DeserializeObject<Multipliers>(titleData[TitleDataKeys.Multipliers])?.sell ?? 1;
```

La fonction CloudScript est ensuite appelée aux lignes 161 à 187 de [use-store.ts](https://github.com/PlayFab/winter-starfall/blob/main/website/src/hooks/use-store.ts).

```typescript theme={null}
export function useEconomyStoreSell(): IEconomyStoreSellItemResults {
    const { isLoading, error, setError, CloudScriptExecuteFunction, EconomyGetInventoryItems } = usePlayFab();
    const dispatch = useDispatch();

    const onSell = useCallback(
        (itemId: string, amount: number) => {
            return new Promise<void>((resolve, reject) => {
                CloudScriptExecuteFunction({
                    FunctionName: "SellItem",
                    FunctionParameter: {
                        ItemId: itemId,
                        Amount: amount,
                    },
                })
                    .then(() => EconomyGetInventoryItems({ Count: SEARCH_ITEMS_MAX_COUNT }))
                    .then(data => {
                        dispatch(siteSlice.actions.inventory(data.Items));
                        resolve();
                    })
                    .catch(issue => {
                        setError(issue);
                        reject(issue);
                    });
            });
        },
        [CloudScriptExecuteFunction, EconomyGetInventoryItems, dispatch, setError]
    );
```

<Note>
  Pour exécuter Winter Starfall localement, vous aurez besoin d'un compte Azure pour prendre en charge les fonctions CloudScript. Vous pouvez [vous inscrire pour obtenir un compte Azure gratuit](https://azure.microsoft.com/pricing/purchase-options/azure-account?msockid=1dec68fa155462cb2baa7ca6147963d7), puis suivre les instructions ci-dessus pour réinitialiser correctement les informations d'identification Azure.
</Note>

## Voir aussi

* Flux de connexion
  * [Documentation sur la connexion des joueurs](/fr/services/playfab/identity/player-identity/login)
* Flux d'achat
  * [Documentation d'Economy V2](/fr/services/playfab/economy-monetization/economy-v2/overview)
  * Pour en savoir plus sur Economy V2, vous pouvez également essayer le [tutoriel du jeu d'artisanat](/fr/services/playfab/economy-monetization/economy-v2/tutorials/craftingGame/game-context), qui porte sur la création d'un exemple de jeu utilisant les fonctions de boutique et d'inventaire.


## Related topics

- [Vue d'ensemble du jeu de démonstration PlayFab Winter Starfall](/fr/services/playfab/demo-game/overview.md)
- [Vanguard Outrider (hérité)](/fr/services/playfab/demo-game/legacy-vanguard-outrider.md)
- [Bonnes pratiques](/fr/services/xbox-services/develop/best-practices/index.md)
- [Bonnes pratiques Insights](/fr/services/playfab/data-analytics/legacy/insights/best-practices.md)
- [Bonnes pratiques et liste de contrôle de lancement](/fr/services/playfab/multiplayer/servers/best-practices.md)