Préparer votre environnement de développement

  • S’applique à: ✅ Windows Admin Center, ✅ Windows Admin Center Preview

Commençons à développer des extensions avec le Windows Admin Center SDK ! Dans ce document, nous allons aborder le processus de mise en place et d’exécution de votre environnement pour créer et tester une extension pour Windows Admin Center.

Note

Vous découvrez le Windows Admin Center SDK ? En savoir plus sur les extensions pour Windows Admin Center

Tip

Créez un dossier pour stocker tous vos fichiers de développement d’extensions Windows Admin Center afin de réduire l’exécution des commandes.

Pour préparer votre environnement de développement, suivez les étapes suivantes :

Prérequis d’installation

Pour commencer à développer avec le SDK, téléchargez et installez les prérequis suivants :

Pour contourner la validation de signature qui se produit lors de l’installation de l’extension dans les versions de Windows Admin Center exécutées avec .NET 8, vous devez également basculer votre mode d’opération Windows Admin Center sur « Développement ». Pour configurer le mode de développement, vous devez :

  • Ouvrez le fichier appsettings.json de votre instance Windows Admin Center. Vous pouvez le trouver par défaut à C:\Program Files\WindowsAdminCenter\service\appsettings.json.
  • Modifiez le champ OperationMode sous la section WindowsAdminCenter/System pour lire « Développement » au lieu de « Production ».

Installez les dépendances globales

Ensuite, installez ou mettez à jour les dépendances nécessaires à vos projets en utilisant Node Gestionnaire de package. Installez ces dépendances globalement pour que tous les projets puissent y accéder.

npm install -g @angular/cli@20.3.25

npm install -g gulp
npm install -g typescript
npm install -g eslint
npm install -g @microsoft/windows-admin-center-sdk@latest

Note

Vous pouvez installer une version ultérieure de @angular/cli. Cependant, si vous installez une version supérieure à 20.3.25, vous voyez un avertissement lors de l’étape de compilation de gulp indiquant que la version locale de la CLI ne correspond pas à la version installée.

Préparer votre environnement pour le chargement indépendant

Après avoir créé votre extension, vous voulez la charger latéralement dans le Windows Admin Center pour les tester. Pour ce faire, effectuez les étapes suivantes, une seule fois, pour le répertoire de développement de votre extension :

  1. Ouvrez PowerShell en tant qu’administrateur et créez un répertoire de certificats : 
    New-Item -ItemType Directory -Path "C:<path>\certificate"
  2. Générez un certificat auto-signé en utilisant OpenSSL de Git : 
    & "C:\Program Files\Git\usr\bin\openssl.exe" req -x509 -newkey rsa:2048 -nodes -keyout C:\<path-to-extension-directory>\certificate\localhost.key -out C:\<path-to-extension-directory>\certificate\localhost.cert -days 365 -subj "/CN=localhost" -addext "subjectAltName=DNS:localhost"
  3. Importez le nouveau certificat dans votre Trusted Root : 
     Import-Certificate -FilePath "C:\<path-to-extension-directory>\certificate\localhost.cert" -CertStoreLocation "Cert:\LocalMachine\Root"
  4. Ouvre C:\Program Files\WindowsAdminCenter\Service\appsettings.json dans Visual Studio Code en tant qu’administrateur.
  5. Trouvez le corsSites tableau et ajoutez l’URL de chargement indépendant (le port 4200 est par défaut). 
     "CorsSites": [
   "https://localhost:4200"
 ]
  6. Trouvez le tableau CSPFrameAncestors et ajoutez l’URL de chargement latéral (4200 est le port par défaut). 
     "CSPFrameAncestors": [
   "'self'",
   ... existing entries ...
   "https://localhost:4200"
 ]
  7. Enregistrez le fichier, puis redémarrez le service Windows Admin Center dans votre fenêtre PowerShell administrateur en exécutant :
      Restart-Service WindowsAdminCenter

Important

Ces instructions font référence à des certificats auto-signés pour le développement et les tests. N’utilisez pas de certificats auto-signés sur les machines de production pour les charges de travail.

Chargement indépendant à l’aide d’un nom de domaine pleinement qualifié

Pour charger en parallèle votre extension Windows Admin Center à l’aide d’une URL qui inclut le nom de domaine complet (FQDN) de votre ordinateur, suivez ces étapes de configuration supplémentaires :

  1. Utilisez OpenSSL de Git pour générer un certificat auto-signé contenant les noms alternatifs des sujets pour les deux localhost et le FQDN : 
    & "C:\Program Files\Git\usr\bin\openssl.exe" req -x509 -newkey rsa:2048 -nodes -keyout C:\<path-to-extension-directory>\certificate\localhost.key -out C:\<path-to-extension-directory>\certificate\localhost.cert -days 365 -subj "/CN=localhost" -addext "subjectAltName=DNS:localhost,DNS:<FQDN>"
  2. Importez le nouveau certificat dans votre Trusted Root : 
     Import-Certificate -FilePath "C:\<path-to-extension-directory>\certificate\localhost.cert" -CertStoreLocation "Cert:\LocalMachine\Root"
  3. Mise à jour C:\Program Files\WindowsAdminCenter\Service\appsettings.json pour inclure les URL ayant l’origine FQDN : 
     "CorsSites": [
   "https://localhost:4200",
   "https://<FQDN>:4200"
 ],
 "CSPFrameAncestors": [
   "'self'",
   ... existing entries ...
   "https://localhost:4200",
   "https://<FQDN>:4200"
 ]
  4. Enregistrez le fichier, puis redémarrez le service Windows Admin Center dans votre fenêtre PowerShell administrateur en exécutant :
      Restart-Service WindowsAdminCenter

Étapes suivantes

Maintenant que votre environnement est préparé, vous êtes prêt à commencer à créer du contenu.

SDK - Kit de ressources de conception

Consultez notre Kit de ressources de conception - SDK Windows Admin Center. Ce kit de ressources est conçu pour vous aider à créer rapidement des extensions fictives dans PowerPoint à l’aide de styles, de contrôles et de modèles de page Windows Admin Center. Découvrez à quoi peut ressembler votre extension dans Windows Admin Center avant de commencer à coder.

  • Last updated on