Démarrage rapide : créer votre première application avec VS Code

S’applique à : Développeur

Installez l’extension SharePoint Embedded pour Visual Studio Code Pour créer un type de conteneur, configurer l’application propriétaire et la facturation, enregistrer le type de conteneur, créer des conteneurs et charger un exemple d’application à partir d’une vue guidée dans l’éditeur :

Obtenez l’extension à partir de la Place de marché Visual Studio

Utilisez l’extension SharePoint Embedded Visual Studio Code pour créer un type de conteneur standard pour votre première application. L’extension configure également l’application propriétaire, attache Azure facturation et inscrit le type de conteneur. Ensuite, vous créez un conteneur et exécutez un exemple d’application local.

Cet article démarre le parcours de génération. Pour obtenir des conseils supplémentaires sur la facturation, consultez Créer et configurer un type de conteneur.

Conseil

Vous préférez générer avec un agent de codage plutôt qu’une vue guidée ? Utilisez le serveur SharePoint Embedded MCP pour provisionner et gérer les ressources à l’aide du langage naturel.

Configuration requise

Avant de commencer, assurez-vous d’avoir les éléments suivants :

  • Visual Studio Code installé.
  • Accès administratif à un client Microsoft 365.
  • Un client avec SharePoint disponible.
  • Un abonnement et un groupe de ressources Azure auxquels votre compte peut accéder.
  • Autorisations de propriétaire ou de contributeur sur l’abonnement Azure.
  • Node.js et npm installés pour l’exemple d’application.
  • Autorisation d’accorder un consentement administrateur dans Microsoft Entra ID.

Importante

Vous devez avoir accès d’administrateur à un client Microsoft 365. Si vous n’avez pas de client, utilisez le programme Microsoft 365 pour les développeurs, l’expérience numérique client Microsoft ou une version d’évaluation de Microsoft 365 E3.

Installer l’extension

Installez l’extension à l’aide du bouton situé en haut de cet article ou dans l’éditeur :

  1. Ouvrez Visual Studio Code.
  2. Ouvrez Extensions à partir de la barre d’activité.
  3. Recherchez SharePoint Embedded.
  4. Sélectionnez Installer.
  5. Si l’extension est déjà installée, mettez-la à jour.
  6. Sélectionnez l’icône SharePoint Embedded dans la barre d’activité.

Connexion

  1. Dans la vue SharePoint Embedded, sélectionnez l’action de connexion.
  2. Utilisez un compte d’administrateur Microsoft 365.
  3. Terminez l’authentification dans le navigateur.
  4. Passez en revue les autorisations demandées.
  5. Sélectionnez Accepter pour accorder le consentement administrateur.
  6. Revenez à Visual Studio Code lorsque vous êtes redirigé.

Importante

Examinez attentivement l’invite de consentement. L’extension a besoin d’autorisations de locataire pour configurer les ressources de développement.

Capture d’écran de la vue de connexion à SharePoint Embedded dans Visual Studio Code.

Une fois que vous êtes connecté, l’extension affiche la vue d’accueil de SharePoint Embedded.

Capture d’écran de la vue d’accueil SharePoint Embedded dans Visual Studio Code après la connexion. La vue répertorie les actions pour créer un type de conteneur et charger un exemple d’application.

Créer un type de conteneur standard

Un type de conteneur définit la relation, les privilèges d’accès, la responsabilité de facturation et les comportements sélectionnés pour un ensemble de conteneurs SharePoint Embedded.

  1. Sélectionnez Créer un type de conteneur.
  2. Pour le mode de facturation, sélectionnez Standard.
  3. Entrez un nom de type de conteneur.
  4. Suivez les invites jusqu’à la fin de la création.

Capture d’écran de la zone de saisie Visual Studio Code invitant à entrer un nom de type de conteneur pendant le flux Create Container Type.

Utilisez un type de conteneur standard lorsque l’organisation propriétaire de l’application paie pour l’utilisation de SharePoint Embedded. Pour l’évaluation, choisissez la version d’évaluation. Pour la facturation client-locataire, choisissez l’option d’authentification directe, qui utilise la classification de directToCustomer facturation.

Créez ou sélectionnez l’application propriétaire

Chaque type de conteneur possède une application Microsoft Entra ID.

  1. Créez une nouvelle application Microsoft Entra ID ou sélectionnez un ID d’application existant.
  2. Si vous créez une nouvelle application, entrez son nom.
  3. Laissez l’extension configurer les paramètres de développement.

Capture d’écran de la zone de saisie de Visual Studio Code demandant un nom d’application Microsoft Entra ID lors de la création de l’application propriétaire pour le type de conteneur.

Attention

Si vous sélectionnez une application existante, l’extension met à jour la configuration de cette application. N’utilisez pas d’application de production pour ce démarrage rapide.

Pour le modèle, voir Architecture des applications SharePoint Embedded.

Configurer la facturation standard

Les types de conteneurs Standard nécessitent une facturation Azure. L’extension associe la facturation à l’aide d’un abonnement Azure et d’un groupe de ressources auxquels votre compte peut accéder.

  1. Sélectionnez un abonnement Azure.
  2. Sélectionnez un groupe de ressources.
  3. Attendez que l’extension enregistre le fournisseur de ressources Microsoft.Syntex et joigne la facturation.

Si vous ignorez la configuration de la facturation ou si vous ne disposez pas des autorisations Azure requises, l’arborescence indique Facturation non configurée. Pour terminer l’installation ultérieurement, cliquez avec le bouton droit sur le type de conteneur. Sélectionnez ensuite Joindre la facturation.

Enregistrer le type de conteneur localement

Vous devez inscrire le type de conteneur dans le locataire consommateur pour que votre application puisse créer des conteneurs ou accéder au contenu.

  1. Après la création, suivez l’invite pour inscrire le type de conteneur dans le locataire local.
  2. Si l’invite n’est pas visible, cliquez avec le bouton droit sur le type de conteneur, puis sélectionnez Enregistrer.
  3. Passez en revue les autorisations.
  4. Accordez le consentement de l’administrateur dans le navigateur.
  5. Revenir à Visual Studio Code.

L’inscription configure les autorisations que l’application propriétaire peut utiliser sur les conteneurs du type de conteneur.

Capture d’écran de l’extension SharePoint Embedded invitant à inscrire le type de conteneur sur le locataire local, avec l’action d’inscription mise en surbrillance.

Créer votre premier conteneur

  1. Dans l’arborescence SharePoint Embedded, développez votre type de conteneur.
  2. Cliquez avec le bouton droit sur Conteneurs.
  3. Sélectionnez Créer un conteneur.
  4. Entrez un nom de conteneur.
  5. Vérifiez que le conteneur apparaît dans l’arborescence.

Un conteneur est l’unité de stockage de base et la limite de sécurité dans SharePoint Embedded.

Capture d’écran de l’arborescence SharePoint Embedded dans Visual Studio Code. Un type de conteneur est développé, le nœud Conteneurs est cliqué avec le bouton droit et la commande Créer un conteneur est sélectionnée.

Capture d’écran de la zone de saisie de Visual Studio Code demandant un nom de conteneur.

Charger un exemple d’application

  1. Dans la vue SharePoint Embedded, sélectionnez Charger l’exemple d’application.
  2. Choisissez un exemple SharePoint Embedded.

Capture d’écran de la vue d’accueil de l’extension SharePoint Embedded avec l’action Charger l’exemple d’application sélectionnée pour générer une structure d’exemple d’application.

  1. Passez en revue l’avertissement sur les secrets de texte brut locaux.
  2. Si vous êtes invité à créer une clé secrète client, sélectionnez OK pour le développement local.
  3. Laissez l’extension remplir le fichier de configuration du runtime.

Importante

L’exemple de configuration est destiné au développement uniquement. Il stocke les secrets d’authentification en texte brut sur votre ordinateur local.

Exécuter l’exemple d’application

Ouvrez un terminal et exécutez l’exemple d’application à partir de l’exemple de répertoire généré.

cd [your-path]\SharePoint-Embedded-Samples\Custom Apps\boilerplate-typescript-react
npm run start

L’exemple commence :

  • Une application cliente React.
  • Un serveur d’applications Azure Functions.

Attendez que les deux sorties de la console s’affichent.

Ensuite :

  1. Ouvrir http://localhost:8080le .
  2. Connectez-vous avec le même compte d’administrateur Microsoft 365.
  3. Sélectionnez Conteneurs sur la page d’accueil.
  4. Créez des conteneurs et chargez des fichiers à partir de l’exemple d’interface utilisateur.

Remarque

Le démarrage initial peut prendre plusieurs minutes, tandis que les dépendances s’installent et que les deux applications s’accumulent.

Résoudre les problèmes de démarrage

Symptôme Vérifier
Conflit de port L’application essaie le port disponible suivant lorsque le port 8080 est utilisé.
Échec des dépendances Exécutez npm install, puis exécutez npm run start à nouveau.
Erreur d’authentification Vérifiez que l’application Microsoft Entra ID contient les URI de redirection attendus.
Accès refusé Vérifiez que l’inscription et le consentement de l’administrateur ont réussi.
Facturation non configurée Vérifiez que vous disposez des autorisations de propriétaire ou de contributeur sur l’abonnement Azure sélectionné, puis utilisez Attacher la facturation.

Nettoyer

Une fois le test terminé :

  1. Retirez les conteneurs de test dont vous n’avez plus besoin.
  2. Passez en revue les ressources de facturation Azure que vous avez créées pour ce guide de démarrage rapide.
  3. Supprimez les exemples de secrets locaux qui ne sont plus nécessaires.

Étapes suivantes

En savoir plus sur les options de type de conteneur dans Créer et configurer un type de conteneur.

  • Last updated on