HoloLens (1ère génération) et Azure 308 : notifications inter-appareils


Notes

Les tutoriels Mixed Reality Academy ont été conçus pour les appareils HoloLens (1re génération) et les casques immersifs de réalité mixte. Nous estimons qu’il est important de laisser ces tutoriels à la disposition des développeurs qui recherchent encore des conseils pour développer des applications sur ces appareils. Notez que ces tutoriels ne sont pas mis à jour avec les derniers ensembles d’outils ou interactions utilisés pour HoloLens 2. Ils sont fournis dans le but de fonctionner sur les appareils pris en charge. Il y aura une nouvelle série de tutoriels qui seront publiés à l’avenir qui démontreront comment développer pour HoloLens 2. Cet avis sera mis à jour avec un lien vers ces tutoriels lorsqu’ils sont publiés.


final product -start

Dans ce cours, vous allez apprendre à ajouter des fonctionnalités Notification Hubs à une application de réalité mixte à l’aide d’Azure Notification Hubs, de tables Azure et de Azure Functions.

Azure Notification Hubs est un service Microsoft, qui permet aux développeurs d’envoyer des notifications Push ciblées et personnalisées à n’importe quelle plateforme, toutes alimentées dans le cloud. Cela peut permettre aux développeurs de communiquer avec les utilisateurs finaux, ou même de communiquer entre différentes applications, selon le scénario. Pour plus d’informations, consultez la pageAzure Notification Hubspage.

Azure Functions est un service Microsoft, qui permet aux développeurs d’exécuter de petits éléments de code, « fonctions », dans Azure. Cela permet de déléguer le travail au cloud, plutôt que votre application locale, ce qui peut avoir de nombreux avantages. Azure Functions prend en charge plusieurs langages de développement, notamment C#, F#, Node.js, Java et PHP. Pour plus d’informations, consultez la Azure Functionspage.

Les tables Azure sont un service cloud Microsoft, qui permet aux développeurs de stocker des données non SQL structurées dans le cloud, ce qui le rend facilement accessible n’importe où. Le service dispose d’une conception sans schéma, ce qui permet l’évolution des tables en fonction des besoins, et est donc très flexible. Pour plus d’informations, consultez la pageTables Azure

Après avoir terminé ce cours, vous disposez d’une application de casque immersif de réalité mixte et d’une application PC de bureau, qui sera en mesure d’effectuer les opérations suivantes :

  1. L’application PC de bureau permet à l’utilisateur de déplacer un objet dans l’espace 2D (X et Y), à l’aide de la souris.

  2. Le déplacement d’objets au sein de l’application PC sera envoyé au cloud à l’aide de JSON, qui sera sous la forme d’une chaîne, contenant un ID d’objet, un type et des informations de transformation (coordonnées X et Y).

  3. L’application de réalité mixte, qui a une scène identique à l’application de bureau, reçoit des notifications concernant le déplacement d’objets, du service Notification Hubs (qui vient d’être mis à jour par l’application PC de bureau).

  4. Lors de la réception d’une notification, qui contiendra l’ID d’objet, le type et les informations de transformation, l’application de réalité mixte applique les informations reçues à sa propre scène.

Dans votre application, il vous suffit de savoir comment intégrer les résultats à votre conception. Ce cours est conçu pour vous apprendre à intégrer un service Azure à votre Project Unity. Il s’agit de votre travail d’utiliser les connaissances que vous obtenez de ce cours pour améliorer votre application de réalité mixte. Ce cours est un didacticiel autonome, qui n’implique pas directement d’autres Mixed Reality Labs.

Prise en charge des appareils

Cours HoloLens Casques immersifs
Réalité mixte - Azure - Cours 308 : Notifications inter-appareils ✔️ ✔️

Notes

Bien que ce cours se concentre principalement sur Windows Mixed Reality casques immersifs (VR), vous pouvez également appliquer ce que vous apprenez dans ce cours pour Microsoft HoloLens. À mesure que vous suivez le cours, vous verrez des notes sur les modifications que vous devrez peut-être utiliser pour prendre en charge HoloLens. Lorsque vous utilisez HoloLens, vous pouvez remarquer un écho lors de la capture vocale.

Prérequis

Notes

Ce didacticiel est conçu pour les développeurs qui ont une expérience de base avec Unity et C#. Sachez également que les prérequis et les instructions écrites de ce document représentent ce qui a été testé et vérifié au moment de l’écriture (mai 2018). Vous êtes libre d’utiliser le logiciel le plus récent, comme indiqué dans l’article d’installation des outils , mais il ne doit pas être supposé que les informations de ce cours correspondent parfaitement à ce que vous trouverez dans un logiciel plus récent que ce qui est répertorié ci-dessous.

Nous vous recommandons le matériel et le logiciel suivants pour ce cours :

Avant de commencer

  • Pour éviter de rencontrer des problèmes de création de ce projet, il est fortement suggéré de créer le projet mentionné dans ce didacticiel dans un dossier racine ou proche (des chemins d’accès de dossier longs peuvent provoquer des problèmes au moment de la build).
  • Vous devez être propriétaire de votre portail de développement Microsoft et de votre portail d’inscription d’application, sinon vous n’aurez pas l’autorisation d’accéder à l’application dans le chapitre 2.

Chapitre 1 : Créer une application sur le Portail des développeurs Microsoft

Pour utiliser le service Azure Notification Hubs , vous devez créer une application sur le portail des développeurs Microsoft, car votre application doit être inscrite afin qu’elle puisse envoyer et recevoir des notifications.

  1. Connectez-vous au Portail des développeurs Microsoft.

    Vous devez vous connecter à votre compte Microsoft.

  2. Dans le tableau de bord, cliquez sur Créer une application.

    create an app

  3. Une fenêtre contextuelle s’affiche, où vous devez réserver un nom pour votre nouvelle application. Dans la zone de texte, insérez un nom approprié ; si le nom choisi est disponible, une coche apparaît à droite de la zone de texte. Une fois que vous avez un nom disponible inséré, cliquez sur le bouton Réserver le nom du produit en bas à gauche de la fenêtre contextuelle.

    reverse a name

  4. Avec l’application maintenant créée, vous êtes prêt à passer au chapitre suivant.

Chapitre 2 : Récupérer vos nouvelles informations d’identification d’application

Connectez-vous au portail d’inscription d’application, où votre nouvelle application sera répertoriée et récupérez les informations d’identification qui seront utilisées pour configurer le service Notification Hubs dans le portail Azure.

  1. Accédez au portail d’inscription d’application.

    application registration portal

    Avertissement

    Vous devez utiliser votre compte Microsoft pour vous connecter.
    Il doit s’agir du compte Microsoft que vous avez utilisé dans le chapitre précédent, avec le portail des développeurs Windows Store.

  2. Vous trouverez votre application dans la section Mes applications . Une fois que vous l’avez trouvé, cliquez dessus et vous serez redirigé vers une nouvelle page contenant le nom de l’application et l’inscription.

    your newly registered app

  3. Faites défiler la page d’inscription pour rechercher votre section Secrets d’application et le SID de package pour votre application. Copiez les deux pour une utilisation avec la configuration du service Azure Notification Hubs dans le chapitre suivant.

    application secrets

Chapitre 3 - Configurer le portail Azure : créer un service Notification Hubs

Avec les informations d’identification de vos applications récupérées, vous devez accéder au portail Azure, où vous allez créer un service Azure Notification Hubs.

  1. Connectez-vous au portail Azure.

    Notes

    Si vous n’avez pas encore de compte Azure, vous devez en créer un. Si vous suivez ce tutoriel dans une situation de salle de classe ou de laboratoire, demandez à votre instructeur ou à l’un des spécialistes de l’aide pour configurer votre nouveau compte.

  2. Une fois connecté, cliquez sur Nouveau dans le coin supérieur gauche, puis recherchez Notification Hub, puis cliquez sur Entrée.

    search for notification hub

    Notes

    Le mot Nouveau peut avoir été remplacé par Créer une ressource, dans des portails plus récents.

  3. La nouvelle page fournit une description du service Notification Hubs . En bas à gauche de cette invite, sélectionnez le bouton Créer pour créer une association avec ce service.

    create notification hubs instance

  4. Une fois que vous avez cliqué sur Créer :

    1. Insérez votre nom souhaité pour cette instance de service.

    2. Fournissez un espace de noms que vous pourrez associer à cette application.

    3. Sélectionnez un emplacement.

    4. Choisissez un groupe de ressources ou créez-en un. Un groupe de ressources permet de surveiller, contrôler l’accès, provisionner et gérer la facturation d’une collection de ressources Azure. Il est recommandé de conserver tous les services Azure associés à un seul projet (par exemple, ces labos) sous un groupe de ressources commun.

      Si vous souhaitez en savoir plus sur les groupes de ressources Azure, suivez ce lien pour gérer un groupe de ressources.

    5. Sélectionnez un abonnement approprié.

    6. Vous devrez également confirmer que vous avez compris les conditions générales appliquées à ce service.

    7. Sélectionnez Create (Créer).

      fill in service details

  5. Une fois que vous avez cliqué sur Créer, vous devrez attendre la création du service, ce qui peut prendre une minute.

  6. Une notification s’affiche dans le portail une fois l’instance de service créée.

    notification

  7. Cliquez sur le bouton Accéder à la ressource dans la notification pour explorer votre nouvelle instance de service. Vous êtes dirigé vers votre nouvelle instance de service Notification Hub .

    go to resource

  8. Dans la page vue d’ensemble, à mi-chemin de la page, cliquez sur Windows (WNS). Le panneau de droite change pour afficher deux champs de texte, qui nécessitent votre SID de package et votre clé de sécurité, à partir de l’application que vous avez configurée précédemment.

    newly created hubs service

  9. Une fois que vous avez copié les détails dans les champs appropriés, cliquez sur Enregistrer, et vous recevrez une notification lorsque le Hub de notification a été correctement mis à jour.

    copy down security details

Chapitre 4 - Configurer le portail Azure : créer un service de table

Après avoir créé votre instance de service Notification Hubs, revenez à votre portail Azure, où vous allez créer un service de tables Azure en créant une ressource Stockage.

  1. S’il n’est pas déjà connecté, connectez-vous au portail Azure.

  2. Une fois connecté, cliquez sur Nouveau dans le coin supérieur gauche, puis recherchezStockage compte, puis cliquez sur Entrée.

    Notes

    Le mot Nouveau peut avoir été remplacé par Créer une ressource dans des portails plus récents.

  3. Sélectionnez Stockage compte : blob, fichier, table, file d’attente dans la liste.

    search for storage account

  4. La nouvelle page fournit une description du service de compte Stockage. En bas à gauche de cette invite, sélectionnez le bouton Créer pour créer une instance de ce service.

    create storage instance

  5. Une fois que vous avez cliqué sur Créer, un panneau s’affiche :

    1. Insérez le nom souhaité pour cette instance de service (doit être en minuscules).

    2. Pour le modèle de déploiement, cliquez sur Resource Manager.

    3. Pour le type de compte, à l’aide du menu déroulant, sélectionnez Stockage (usage général v1).

    4. Sélectionnez un emplacement approprié.

    5. Pour le menu déroulant Réplication, sélectionnez Stockage géoredondant avec accès en lecture (RA-GRS).

    6. Pour les performances, cliquez sur Standard.

    7. Dans la section Transfert sécurisé requis , sélectionnez Désactivé.

    8. Dans le menu déroulant Abonnement , sélectionnez un abonnement approprié.

    9. Choisissez un groupe de ressources ou créez-en un. Un groupe de ressources permet de surveiller, contrôler l’accès, provisionner et gérer la facturation d’une collection de ressources Azure. Il est recommandé de conserver tous les services Azure associés à un seul projet (par exemple, ces labos) sous un groupe de ressources commun.

      Si vous souhaitez en savoir plus sur les groupes de ressources Azure, suivez ce lien pour gérer un groupe de ressources.

    10. Laissez les réseaux virtuelsdésactivés s’il s’agit d’une option pour vous.

    11. Cliquez sur Créer.

      fill in storage details

  6. Une fois que vous avez cliqué sur Créer, vous devrez attendre la création du service, ce qui peut prendre une minute.

  7. Une notification s’affiche dans le portail une fois l’instance de service créée. Cliquez sur les notifications pour explorer votre nouvelle instance de service.

    new storage notification

  8. Cliquez sur le bouton Accéder à la ressource dans la notification pour explorer votre nouvelle instance de service. Vous accédez à votre nouvelle page de vue d’ensemble de l’instance de service Stockage.

    go to resource

  9. Dans la page vue d’ensemble, à droite, cliquez sur Tables.

    Screenshot that shows where to select Tables.

  10. Le panneau de droite change pour afficher les informations du service Table , où vous devez ajouter une nouvelle table. Pour ce faire, cliquez sur le + bouton Tableau dans le coin supérieur gauche.

    open Tables

  11. Une nouvelle page s’affiche, où vous devez entrer un nom de table. Il s’agit du nom que vous allez utiliser pour faire référence aux données de votre application dans les chapitres ultérieurs. Insérez un nom approprié, puis cliquez sur OK.

    create new table

  12. Une fois la table créée, vous serez en mesure de la voir dans la page du service Table (en bas).

    new table created

Chapitre 5 : Fin de la table Azure dans Visual Studio

Maintenant que votre compte de stockage du service Table a été configuré, il est temps d’y ajouter des données, qui seront utilisées pour stocker et récupérer des informations. La modification de vos tables peut être effectuée via Visual Studio.

  1. Ouvrez Visual Studio.

  2. Dans le menu, cliquez sur ViewCloud>Explorer.

    open cloud explorer

  3. Cloud Explorer s’ouvre en tant qu’élément ancré (patient, car le chargement peut prendre du temps).

    Notes

    Si l’abonnement que vous avez utilisé pour créer vos comptes Stockage n’est pas visible, vérifiez que vous disposez des informations suivantes :

    • Connecté au même compte que celui que vous avez utilisé pour le portail Azure.

    • Sélectionnez votre abonnement dans la page Gestion des comptes (vous devrez peut-être appliquer un filtre à partir de vos paramètres de compte) :

      find subscription

  4. Vos services cloud Azure s’affichent. Recherchez Stockage Comptes, puis cliquez sur la flèche vers la gauche de celle-ci pour développer vos comptes.

    open storage accounts

  5. Une fois développé, votre compte Stockage nouvellement créé doit être disponible. Cliquez sur la flèche à gauche de votre stockage, puis, une fois développée, recherchez les tables et cliquez sur la flèche en regard de celle-ci pour afficher la table que vous avez créée dans le dernier chapitre. Double-cliquez sur votre table.

    open scene objects table

  6. Votre table est ouverte au centre de votre fenêtre Visual Studio. Cliquez sur l’icône de tableau avec le + (plus) sur celui-ci.

    add new table

  7. Une fenêtre s’affiche pour vous inviter à ajouter une entité. Vous allez créer trois entités au total, chacune avec plusieurs propriétés. Vous remarquerez que PartitionKey et RowKey sont déjà fournis, car ils sont utilisés par la table pour rechercher vos données.

    partition and row key

  8. Mettez à jour la valeur de PartitionKey et de RowKey comme suit (n’oubliez pas de le faire pour chaque propriété de ligne que vous ajoutez, bien qu’incrémenter rowKey chaque fois) :

    add correct Values

  9. Cliquez sur Ajouter une propriété pour ajouter des lignes de données supplémentaires. Faites correspondre votre première table vide au tableau ci-dessous.

  10. Cliquez sur OK lorsque vous avez terminé.

    click ok when done

    Avertissement

    Vérifiez que vous avez modifié le type des entrées X, Y et Z en Double.

  11. Vous remarquerez que votre table comporte désormais une ligne de données. Cliquez à nouveau sur l’icône + (plus) pour ajouter une autre entité.

    first row

  12. Créez une propriété supplémentaire, puis définissez les valeurs de la nouvelle entité pour qu’elle corresponde à celles indiquées ci-dessous.

    add cube

  13. Répétez la dernière étape pour ajouter une autre entité. Définissez les valeurs de cette entité sur celles indiquées ci-dessous.

    add cylinder

  14. Votre tableau doit maintenant ressembler à celui ci-dessous.

    table complete

  15. Vous avez terminé ce chapitre. Veillez à enregistrer.

Chapitre 6 - Créer une application de fonction Azure

Créez une application de fonction Azure, qui sera appelée par l’application de bureau pour mettre à jour le service Table et envoyer une notification via le Hub de notification.

Tout d’abord, vous devez créer un fichier qui permettra à votre fonction Azure de charger les bibliothèques dont vous avez besoin.

  1. Ouvrez Bloc-notes (appuyez sur Windows touche et tapez le bloc-notes).

    open notepad

  2. Avec Bloc-notes ouvert, insérez la structure JSON ci-dessous. Une fois que vous avez terminé, enregistrez-le sur votre bureau en tant que project.json. Il est important que le nommage soit correct : assurez-vous qu’il n’a pas d’extension de fichier .txt . Ce fichier définit les bibliothèques que votre fonction utilisera, si vous avez utilisé NuGet’il semble familier.

    {
    "frameworks": {
        "net46":{
        "dependencies": {
            "WindowsAzure.Storage": "7.0.0",
            "Microsoft.Azure.NotificationHubs" : "1.0.9",
            "Microsoft.Azure.WebJobs.Extensions.NotificationHubs" :"1.1.0"
        }
        }
    }
    }
    
  3. Connectez-vous au portail Azure.

  4. Une fois que vous êtes connecté, cliquez sur Nouveau dans le coin supérieur gauche, puis recherchez Function App, appuyez sur Entrée.

    search for function app

    Notes

    Le mot Nouveau peut avoir été remplacé par Créer une ressource dans des portails plus récents.

  5. La nouvelle page fournit une description du service Function App Service. En bas à gauche de cette invite, sélectionnez le bouton Créer pour créer une association avec ce service.

    function app instance

  6. Une fois que vous avez cliqué sur Créer, renseignez les éléments suivants :

    1. Pour le nom de l’application, insérez le nom souhaité pour cette instance de service.

    2. Sélectionnez un Abonnement.

    3. Sélectionnez le niveau tarifaire approprié pour vous, si c’est la première fois que vous créez une fonction App Service, un niveau gratuit doit être disponible pour vous.

    4. Choisissez un groupe de ressources ou créez-en un. Un groupe de ressources permet de surveiller, contrôler l’accès, provisionner et gérer la facturation d’une collection de ressources Azure. Il est recommandé de conserver tous les services Azure associés à un seul projet (par exemple, ces labos) sous un groupe de ressources commun.

      Si vous souhaitez en savoir plus sur les groupes de ressources Azure, suivez ce lien pour gérer un groupe de ressources.

    5. Pour le système d’exploitation, cliquez sur Windows, car il s’agit de la plateforme prévue.

    6. Sélectionnez un plan d’hébergement (ce tutoriel utilise un plan de consommation.

    7. Sélectionnez un emplacement(choisissez le même emplacement que le stockage que vous avez créé à l’étape précédente)

    8. Pour la section Stockage, vous devez sélectionner le service Stockage que vous avez créé à l’étape précédente.

    9. Vous n’aurez pas besoin d’application Informations dans cette application. N’hésitez donc pas à le laisser désactivé.

    10. Cliquez sur Créer.

      create new instance

  7. Une fois que vous avez cliqué sur Créer , vous devrez attendre la création du service, ce qui peut prendre une minute.

  8. Une notification s’affiche dans le portail une fois l’instance de service créée.

    new notification

  9. Cliquez sur les notifications pour explorer votre nouvelle instance de service.

  10. Cliquez sur le bouton Accéder à la ressource dans la notification pour explorer votre nouvelle instance de service.

    go to resource

  11. Cliquez sur l’icône + (plus) en regard de Functions pour créer.

    add new function

  12. Dans le panneau central, la fenêtre de création de fonction s’affiche. Ignorez les informations dans la moitié supérieure du panneau, puis cliquez sur Fonction personnalisée située près du bas (dans la zone bleue, comme ci-dessous).

    custom function

  13. La nouvelle page de la fenêtre affiche différents types de fonctions. Faites défiler vers le bas pour afficher les types violets, puis cliquez sur l’élément HTTP PUT .

    http put link

    Important

    Vous devrez peut-être faire défiler la page vers le bas (et cette image peut ne pas ressembler exactement à celle-ci, si les mises à jour du portail Azure ont eu lieu), mais vous recherchez un élément appelé HTTP PUT.

  14. La fenêtre HTTP PUT s’affiche, où vous devez configurer la fonction (voir ci-dessous pour l’image).

    1. Pour Langue, à l’aide du menu déroulant, sélectionnez C#.

    2. Pour Name, entrez un nom approprié.

    3. Dans le menu déroulant niveau d’authentification , sélectionnez Fonction.

    4. Pour la section Nom de la table , vous devez utiliser le nom exact que vous avez utilisé pour créer votre service Table précédemment (y compris le même cas de lettre).

    5. Dans la section Stockage connexion de compte, utilisez le menu déroulant, puis sélectionnez votre compte de stockage à partir de là. Si ce n’est pas le cas, cliquez sur le nouveau lien hypertexte en même temps que le titre de la section pour afficher un autre panneau, où votre compte de stockage doit être répertorié.

      new storage

  15. Cliquez sur Créer et vous recevrez une notification indiquant que vos paramètres ont été correctement mis à jour.

    create function

  16. Après avoir cliqué sur Créer, vous êtes redirigé vers l’éditeur de fonction.

    update function code

  17. Insérez le code suivant dans l’éditeur de fonction (en remplaçant le code dans la fonction) :

    #r "Microsoft.WindowsAzure.Storage"
    
    using System;
    using Microsoft.WindowsAzure.Storage;
    using Microsoft.WindowsAzure.Storage.Table;
    using Microsoft.Azure.NotificationHubs;
    using Newtonsoft.Json;
    
    public static async Task Run(UnityGameObject gameObj, CloudTable table, IAsyncCollector<Notification> notification, TraceWriter log)
    {
        //RowKey of the table object to be changed
        string rowKey = gameObj.RowKey;
    
        //Retrieve the table object by its RowKey
        TableOperation operation = TableOperation.Retrieve<UnityGameObject>("UnityPartitionKey", rowKey); 
    
        TableResult result = table.Execute(operation);
    
        //Create a UnityGameObject so to set its parameters
        UnityGameObject existingGameObj = (UnityGameObject)result.Result; 
    
        existingGameObj.RowKey = rowKey;
        existingGameObj.X = gameObj.X;
        existingGameObj.Y = gameObj.Y;
        existingGameObj.Z = gameObj.Z;
    
        //Replace the table appropriate table Entity with the value of the UnityGameObject
        operation = TableOperation.Replace(existingGameObj); 
    
        table.Execute(operation);
    
        log.Verbose($"Updated object position");
    
        //Serialize the UnityGameObject
        string wnsNotificationPayload = JsonConvert.SerializeObject(existingGameObj);
    
        log.Info($"{wnsNotificationPayload}");
    
        var headers = new Dictionary<string, string>();
    
        headers["X-WNS-Type"] = @"wns/raw";
    
        //Send the raw notification to subscribed devices
        await notification.AddAsync(new WindowsNotification(wnsNotificationPayload, headers)); 
    
        log.Verbose($"Sent notification");
    }
    
    // This UnityGameObject represent a Table Entity
    public class UnityGameObject : TableEntity
    {
        public string Type { get; set; }
        public double X { get; set; }
        public double Y { get; set; }
        public double Z { get; set; }
        public string RowKey { get; set; }
    }
    

    Notes

    À l’aide des bibliothèques incluses, la fonction reçoit le nom et l’emplacement de l’objet qui a été déplacé dans la scène Unity (en tant qu’objet C#, appelé UnityGameObject). Cet objet est ensuite utilisé pour mettre à jour les paramètres de l’objet dans la table créée. Après cela, la fonction effectue un appel au service Notification Hub créé, qui notifie toutes les applications abonnées.

  18. Avec le code en place, cliquez sur Enregistrer.

  19. Ensuite, cliquez sur l’icône < (flèche), sur le côté droit de la page.

    open upload panel

  20. Un panneau s’affiche à partir de la droite. Dans ce panneau, cliquez sur Télécharger, et un navigateur de fichiers s’affiche.

  21. Accédez au fichier project.json que vous avez créé dans Bloc-notes précédemment, puis cliquez sur le bouton Ouvrir. Ce fichier définit les bibliothèques que votre fonction utilisera.

    upload json

  22. Une fois le fichier chargé, il apparaît dans le panneau à droite. Cliquez dessus pour l’ouvrir dans l’éditeur de fonction . Il doit ressembler exactement à l’image suivante (en dessous de l’étape 23).

  23. Ensuite, dans le panneau de gauche, sous Functions, cliquez sur le lien Intégrer .

    integrate function

  24. Dans la page suivante, dans le coin supérieur droit, cliquez sur Éditeur avancé (comme ci-dessous).

    open advanced editor

  25. Un fichier function.json est ouvert dans le panneau central, qui doit être remplacé par l’extrait de code suivant. Cela définit la fonction que vous générez et les paramètres passés dans la fonction.

    {
    "bindings": [
        {
        "authLevel": "function",
        "type": "httpTrigger",
        "methods": [
            "get",
            "post"
        ],
        "name": "gameObj",
        "direction": "in"
        },
        {
        "type": "table",
        "name": "table",
        "tableName": "SceneObjectsTable",
        "connection": "mrnothubstorage_STORAGE",
        "direction": "in"
        },
        {
        "type": "notificationHub",
        "direction": "out",
        "name": "notification",
        "hubName": "MR_NotHub_ServiceInstance",
        "connection": "MRNotHubNS_DefaultFullSharedAccessSignature_NH",
        "platform": "wns"
        }
    ]
    }
    
  26. Votre éditeur doit maintenant ressembler à l’image ci-dessous :

    back to standard editor

  27. Vous remarquerez peut-être que les paramètres d’entrée que vous venez d’insérer peuvent ne pas correspondre à vos détails de table et de stockage et doivent donc être mis à jour avec vos informations. Ne faites pas cela ici, car il est abordé ensuite. Cliquez simplement sur le lien de l’éditeur Standard , dans le coin supérieur droit de la page, pour revenir en arrière.

  28. Dans l’éditeur Standard, cliquez sur Table Azure Stockage (table) sous Entrées.

    Table inputs

  29. Vérifiez que la correspondance suivante avec vos informations peut être différente (il existe une image sous les étapes suivantes) :

    1. Nom de la table : nom de la table que vous avez créée dans votre stockage Azure, service Tables.

    2. Stockage connexion de compte : cliquez sur nouveau, qui s’affiche en même temps que le menu déroulant, et un panneau apparaît à droite de la fenêtre.

      new storage

      1. Sélectionnez votre compte Stockage, que vous avez créé précédemment pour héberger les applications de fonction.

      2. Vous remarquerez que la valeur de connexion de compte Stockage a été créée.

      3. Veillez à appuyer sur Enregistrer une fois que vous avez terminé.

    3. La page Entrées doit maintenant correspondre à celle ci-dessous, montrant vos informations.

      inputs complete

  30. Ensuite, cliquez sur Azure Notification Hub (notification) : sous Sorties. Vérifiez que les éléments suivants sont mis en correspondance avec vos informations, car elles peuvent être différentes (il existe une image ci-dessous les étapes suivantes) :

    1. Nom du hub de notification : il s’agit du nom de votre instance de service Notification Hub , que vous avez créée précédemment.

    2. Connexion d’espace de noms Notification Hubs : cliquez sur nouveau, qui s’affiche en même temps que le menu déroulant.

      check outputs

    3. La fenêtre contextuelle connexion s’affiche (voir l’image ci-dessous), où vous devez sélectionner l’espace de noms du Hub de notification, que vous avez configuré précédemment.

    4. Sélectionnez votre nom de Notification Hub dans le menu déroulant intermédiaire.

    5. Définissez le menu déroulant Stratégie sur DefaultFullSharedAccessSignature.

    6. Cliquez sur le bouton Sélectionner pour revenir en arrière.

      output update

  31. La page Sorties doit maintenant correspondre à celle-ci, mais avec vos informations à la place. Veillez à appuyer sur Enregistrer.

Avertissement

Ne modifiez pas directement le nom du Hub de notification (cela doit tous être effectué à l’aide de l’Éditeur avancé, à condition que vous avez suivi correctement les étapes précédentes.

outputs complete

  1. À ce stade, vous devez tester la fonction pour vous assurer qu’elle fonctionne. Pour ce faire :

    1. Accédez une fois de plus à la page de fonction :

      outputs complete

    2. Revenez sur la page de fonction, cliquez sur l’onglet Test à droite de la page pour ouvrir le panneau Test :

      outputs complete

    3. Dans la zone de texte corps de la requête du panneau , collez le code ci-dessous :

      {  
          "Type":null,
          "X":3,
          "Y":0,
          "Z":1,
          "PartitionKey":null,
          "RowKey":"Obj2",
          "Timestamp":"0001-01-01T00:00:00+00:00",
          "ETag":null
      }
      
    4. Avec le code de test en place, cliquez sur le bouton Exécuter en bas à droite, et le test sera exécuté. Les journaux de sortie du test s’affichent dans la zone de console, sous votre code de fonction.

      outputs complete

    Avertissement

    Si le test ci-dessus échoue, vous devez doublement vérifier que vous avez suivi les étapes ci-dessus exactement, en particulier les paramètres du panneau d’intégration.

Chapitre 7 - Configurer Desktop Unity Project

Important

L’application De bureau que vous créez ne fonctionnera pas dans l’Éditeur Unity. Il doit être exécuté en dehors de l’Éditeur, en suivant la génération de l’application, à l’aide de Visual Studio (ou de l’application déployée).

Voici une configuration classique pour le développement avec Unity et la réalité mixte, et par conséquent, est un bon modèle pour d’autres projets.

Configurez et testez votre casque immersif de réalité mixte.

Notes

Vous n’aurez pas besoin de contrôleurs de mouvement pour ce cours. Si vous avez besoin de prendre en charge la configuration du casque immersif, suivez ce lien sur la configuration de Windows Mixed Reality.

  1. Ouvrez Unity , puis cliquez sur Nouveau.

    new unity project

  2. Vous devez fournir un nom de Project Unity, insérer UnityDesktopNotifHub. Vérifiez que le type de projet est défini sur 3D. Définissez l’emplacement sur un emplacement approprié pour vous (n’oubliez pas que les répertoires racines sont meilleurs). Ensuite, cliquez sur Créer un projet.

    create project

  3. Avec Unity ouvert, il vaut la peine de vérifier que l’éditeur de script par défaut est défini sur Visual Studio. Accédez à EditPreferences>, puis à partir de la nouvelle fenêtre, accédez aux outils externes. Modifiez l’éditeur de script externeen Visual Studio 2017. Fermez la fenêtre Préférences .

    set external VS tools

  4. Ensuite, accédez à FileBuild>Paramètres et sélectionnez plateforme Windows universelle, puis cliquez sur le bouton Basculer la plateforme pour appliquer votre sélection.

    switch platforms

  5. Bien que toujours dans FileBuild>Paramètres, assurez-vous que :

    1. L’appareil cible est défini sur n’importe quel appareil

      Cette application sera pour votre bureau. Il doit donc s’agir de n’importe quel appareil

    2. Le type de build est défini sur D3D

    3. Le Kit de développement logiciel (SDK) est défini sur La dernière version installée

    4. Visual Studio version est définie sur La dernière version installée

    5. La génération et l’exécution sont définies sur ordinateur local

    6. Bien qu’ici, il vaut la peine d’enregistrer la scène et de l’ajouter à la build.

      1. Pour ce faire, sélectionnez Ajouter des scènes d’ouverture. Une fenêtre d’enregistrement s’affiche.

        add open scenes

      2. Créez un dossier pour cela et toute scène future, puis sélectionnez le bouton Nouveau dossier pour créer un dossier, nommez-le Scène.

        new scenes folder

      3. Ouvrez votre dossier Scènes nouvellement créé, puis, dans le nom du fichier : champ de texte, tapez NH_Desktop_Scene, puis appuyez sur Enregistrer.

        new NH_Desktop_Scene

    7. Les paramètres restants, dans Build Paramètres, doivent être laissés comme valeur par défaut pour l’instant.

  6. Dans la même fenêtre, cliquez sur le bouton Lecteur Paramètres, ce qui ouvre le panneau associé dans l’espace où se trouve l’Inspecteur.

  7. Dans ce panneau, quelques paramètres doivent être vérifiés :

    1. Sous l’onglet Autres Paramètres :

      1. La version du runtime de script doit être expérimentale (équivalent.NET 4.6)

      2. Le serveur principal de script doit être .NET

      3. Le niveau de compatibilité de l’API doit être .NET 4.6

        4.6 net version

    2. Sous l’onglet Publication Paramètres, sous Fonctionnalités, cochez :

      • InternetClient

        tick internet client

  8. Retour dans Build ParamètresUnity C# Projects n’est plus grisé ; cochez la case en regard de cela.

  9. Fermez la fenêtre Build Settings.

  10. Enregistrez votre scène et Project scène FileSave> / FileSave> Project.

    Important

    Si vous souhaitez ignorer le composant De configuration Unity pour ce projet (application de bureau) et continuer directement dans le code, n’hésitez pas à télécharger ce .unitypackage, importez-le dans votre projet en tant que package personnalisé, puis continuez à partir du chapitre 9. Vous devez toujours ajouter les composants de script.

Chapitre 8 - Importation des DLL dans Unity

Vous utiliserez stockage Azure pour Unity (qui s’appuie lui-même sur le Kit de développement logiciel (SDK) .Net pour Azure). Pour plus d’informations, suivez ce lien sur stockage Azure pour Unity.

Il existe actuellement un problème connu dans Unity qui nécessite que les plug-ins soient reconfigurés après l’importation. Ces étapes (4 à 7 dans cette section) ne seront plus nécessaires une fois le bogue résolu.

Pour importer le Kit de développement logiciel (SDK) dans votre propre projet, assurez-vous que vous avez téléchargé le dernier package .unitypackage à partir de GitHub. Ensuite, procédez comme suit :

  1. Ajoutez le .unitypackage à Unity à l’aide de l’option de menu Package > personnalisé d’importation de package de ressources>.

  2. Dans la zone Importer un package Unity qui s’affiche, vous pouvez sélectionner tout sous Plug-in>Stockage. Décochez tout le reste, car il n’est pas nécessaire pour ce cours.

    import to package

  3. Cliquez sur le bouton Importer pour ajouter les éléments à votre projet.

  4. Accédez au dossier Stockage sous Plug-ins dans l’affichage Project et sélectionnez les plug-ins suivants uniquement :

    • Microsoft.Data.Edm
    • Microsoft.Data.OData
    • Microsoft.WindowsAzure.Storage
    • Newtonsoft.Json
    • System.Spatial

uncheck Any platform

  1. Avec ces plug-ins spécifiques sélectionnés, décochezLa plateformeany et décochezWSAPlayer, puis cliquez sur Appliquer.

    apply platform dlls

    Notes

    Nous marquez ces plug-ins particuliers à utiliser uniquement dans l’éditeur Unity. Cela est dû au fait qu’il existe différentes versions des mêmes plug-ins dans le dossier WSA qui seront utilisés après l’exportation du projet à partir d’Unity.

  2. Dans le dossier du plug-in Stockage, sélectionnez uniquement :

    • Microsoft.Data.Services.Client

      set dont process for dlls

  3. Cochez la case Ne pas traiter sous Paramètres de plateforme, puis cliquez sur Appliquer.

    apply no processing

    Notes

    Nous définissons ce plug-in « Ne pas traiter », car l’éditeur de correctifs d’assembly Unity a des difficultés à traiter ce plug-in. Le plug-in fonctionnera toujours même s’il n’est pas traité.

Chapitre 9 - Créer la classe TableToScene dans le projet Desktop Unity

Vous devez maintenant créer les scripts contenant le code pour exécuter cette application.

Le premier script que vous devez créer est TableToScene, qui est responsable des éléments suivants :

  • Lecture d’entités dans la table Azure.
  • À l’aide des données de table, déterminez les objets à générer et dans quelle position.

Le deuxième script que vous devez créer est CloudScene, qui est responsable des éléments suivants :

  • Inscription de l’événement de clic gauche pour permettre à l’utilisateur de faire glisser des objets autour de la scène.
  • Sérialisation des données d’objet à partir de cette scène Unity et leur envoi à l’application de fonction Azure.

Pour créer cette classe :

  1. Cliquez avec le bouton droit dans le dossier de ressources situé dans le volet Project, CreateFolder>. Nommez le dossier Scripts.

    create scripts folder

    create scripts folder 2

  2. Double-cliquez sur le dossier que vous venez de créer pour l’ouvrir.

  3. Cliquez avec le bouton droit dans le dossier Scripts , puis cliquez sur CreateC># Script. Nommez le script TableToScene.

    new c# scriptTableToScene rename

  4. Double-cliquez sur le script pour l’ouvrir dans Visual Studio 2017.

  5. Ajoutez les espaces de noms suivants :

    using Microsoft.WindowsAzure.Storage;
    using Microsoft.WindowsAzure.Storage.Auth;
    using Microsoft.WindowsAzure.Storage.Table;
    using UnityEngine;
    
  6. Dans la classe, insérez les variables suivantes :

        /// <summary>    
        /// allows this class to behave like a singleton
        /// </summary>    
        public static TableToScene instance;
    
        /// <summary>    
        /// Insert here you Azure Storage name     
        /// </summary>    
        private string accountName = " -- Insert your Azure Storage name -- ";
    
        /// <summary>    
        /// Insert here you Azure Storage key    
        /// </summary>    
        private string accountKey = " -- Insert your Azure Storage key -- ";
    

    Notes

    Remplacez la valeur accountName par le nom de votre service stockage Azure et la valeur accountKey par la valeur de clé trouvée dans le service stockage Azure, dans le portail Azure (voir image ci-dessous).

    fetch account key

  7. Ajoutez maintenant les méthodes Start() et Awake() pour initialiser la classe.

        /// <summary>
        /// Triggers before initialization
        /// </summary>
        void Awake()
        {
            // static instance of this class
            instance = this;
        }
    
        /// <summary>
        /// Use this for initialization
        /// </summary>
        void Start()
        {  
            // Call method to populate the scene with new objects as 
            // pecified in the Azure Table
            PopulateSceneFromTableAsync();
        }
    
  8. Dans la classe TableToScene , ajoutez la méthode qui récupère les valeurs de la table Azure et utilisez-les pour générer les primitives appropriées dans la scène.

        /// <summary>    
        /// Populate the scene with new objects as specified in the Azure Table    
        /// </summary>    
        private async void PopulateSceneFromTableAsync()
        {
            // Obtain credentials for the Azure Storage
            StorageCredentials creds = new StorageCredentials(accountName, accountKey);
    
            // Storage account
            CloudStorageAccount account = new CloudStorageAccount(creds, useHttps: true);
    
            // Storage client
            CloudTableClient client = account.CreateCloudTableClient(); 
    
            // Table reference
            CloudTable table = client.GetTableReference("SceneObjectsTable");
    
            TableContinuationToken token = null;
    
            // Query the table for every existing Entity
            do
            {
                // Queries the whole table by breaking it into segments
                // (would happen only if the table had huge number of Entities)
                TableQuerySegment<AzureTableEntity> queryResult = await table.ExecuteQuerySegmentedAsync(new TableQuery<AzureTableEntity>(), token); 
    
                foreach (AzureTableEntity entity in queryResult.Results)
                {
                    GameObject newSceneGameObject = null;
                    Color newColor;
    
                    // check for the Entity Type and spawn in the scene the appropriate Primitive
                    switch (entity.Type)
                    {
                        case "Cube":
                            // Create a Cube in the scene
                            newSceneGameObject = GameObject.CreatePrimitive(PrimitiveType.Cube);
                            newColor = Color.blue;
                            break;
    
                        case "Sphere":
                            // Create a Sphere in the scene
                            newSceneGameObject = GameObject.CreatePrimitive(PrimitiveType.Sphere);
                            newColor = Color.red;
                            break;
    
                        case "Cylinder":
                            // Create a Cylinder in the scene
                            newSceneGameObject = GameObject.CreatePrimitive(PrimitiveType.Cylinder);
                            newColor = Color.yellow;
                            break;
                        default:
                            newColor = Color.white;
                            break;
                    }
    
                    newSceneGameObject.name = entity.RowKey;
    
                    newSceneGameObject.GetComponent<MeshRenderer>().material = new Material(Shader.Find("Diffuse"))
                    {
                        color = newColor
                    };
    
                    //check for the Entity X,Y,Z and move the Primitive at those coordinates
                    newSceneGameObject.transform.position = new Vector3((float)entity.X, (float)entity.Y, (float)entity.Z);
                }
    
                // if the token is null, it means there are no more segments left to query
                token = queryResult.ContinuationToken;
            }
    
            while (token != null);
        }
    
  9. En dehors de la classe TableToScene , vous devez définir la classe utilisée par l’application pour sérialiser et désérialiser les entités de table.

        /// <summary>
        /// This objects is used to serialize and deserialize the Azure Table Entity
        /// </summary>
        [System.Serializable]
        public class AzureTableEntity : TableEntity
        {
            public AzureTableEntity(string partitionKey, string rowKey)
                : base(partitionKey, rowKey) { }
    
            public AzureTableEntity() { }
            public string Type { get; set; }
            public double X { get; set; }
            public double Y { get; set; }
            public double Z { get; set; }
        }
    
  10. Veillez à enregistrer avant de revenir à l’éditeur Unity.

  11. Cliquez sur l’appareil photo principal à partir du panneau Hiérarchie pour que ses propriétés apparaissent dans l’Inspecteur.

  12. Une fois le dossier Scripts ouvert, sélectionnez le fichier TableToScene de script et faites-le glisser sur la caméra principale. Le résultat doit être le suivant :

    add script to main camera

Chapitre 10 - Créer la classe CloudScene dans desktop Unity Project

Le deuxième script que vous devez créer est CloudScene, qui est responsable des éléments suivants :

  • Inscription de l’événement de clic gauche pour permettre à l’utilisateur de faire glisser des objets autour de la scène.

  • Sérialisation des données d’objet à partir de cette scène Unity et leur envoi à l’application de fonction Azure.

Pour créer le deuxième script :

  1. Cliquez avec le bouton droit dans le dossier Scripts , cliquez sur Créer, Script C#. Nommez le script CloudScene

    new c# scriptrename CloudScene

  2. Ajoutez les espaces de noms suivants :

    using Newtonsoft.Json;
    using System.Collections;
    using System.Text;
    using System.Threading.Tasks;
    using UnityEngine;
    using UnityEngine.Networking;
    
  3. Insérez les variables suivantes :

        /// <summary>
        /// Allows this class to behave like a singleton
        /// </summary>
        public static CloudScene instance;
    
        /// <summary>
        /// Insert here you Azure Function Url
        /// </summary>
        private string azureFunctionEndpoint = "--Insert here you Azure Function Endpoint--";
    
        /// <summary>
        /// Flag for object being moved
        /// </summary>
        private bool gameObjHasMoved;
    
        /// <summary>
        /// Transform of the object being dragged by the mouse
        /// </summary>
        private Transform gameObjHeld;
    
        /// <summary>
        /// Class hosted in the TableToScene script
        /// </summary>
        private AzureTableEntity azureTableEntity;
    
  4. Remplacez la valeur azureFunctionEndpoint par l’URL de votre application de fonction Azure trouvée dans la fonction Azure App Service, dans le portail Azure, comme illustré dans l’image ci-dessous :

    get function URL

  5. Ajoutez maintenant les méthodes Start() et Awake() pour initialiser la classe.

        /// <summary>
        /// Triggers before initialization
        /// </summary>
        void Awake()
        {
            // static instance of this class
            instance = this;
        }
    
        /// <summary>
        /// Use this for initialization
        /// </summary>
        void Start()
        {
            // initialise an AzureTableEntity
            azureTableEntity = new AzureTableEntity();
        }
    
  6. Dans la méthode Update(), ajoutez le code suivant qui détectera l’entrée de la souris et faites glisser, ce qui déplace à son tour les GameObjects dans la scène. Si l’utilisateur a déplacé et supprimé un objet, il passe le nom et les coordonnées de l’objet à la méthode UpdateCloudScene(), qui appelle le service Azure Function App, qui met à jour la table Azure et déclenche la notification.

        /// <summary>
        /// Update is called once per frame
        /// </summary>
        void Update()
        {
            //Enable Drag if button is held down
            if (Input.GetMouseButton(0))
            {
                // Get the mouse position
                Vector3 mousePosition = new Vector3(Input.mousePosition.x, Input.mousePosition.y, 10);
    
                Vector3 objPos = Camera.main.ScreenToWorldPoint(mousePosition);
    
                Ray ray = Camera.main.ScreenPointToRay(Input.mousePosition);
    
                RaycastHit hit;
    
                // Raycast from the current mouse position to the object overlapped by the mouse
                if (Physics.Raycast(ray, out hit))
                {
                    // update the position of the object "hit" by the mouse
                    hit.transform.position = objPos;
    
                    gameObjHasMoved = true;
    
                    gameObjHeld = hit.transform;
                }
            }
    
            // check if the left button mouse is released while holding an object
            if (Input.GetMouseButtonUp(0) && gameObjHasMoved)
            {
                gameObjHasMoved = false;
    
                // Call the Azure Function that will update the appropriate Entity in the Azure Table
                // and send a Notification to all subscribed Apps
                Debug.Log("Calling Azure Function");
    
                StartCoroutine(UpdateCloudScene(gameObjHeld.name, gameObjHeld.position.x, gameObjHeld.position.y, gameObjHeld.position.z));
            }
        }
    
  7. Ajoutez maintenant la méthode UpdateCloudScene(), comme indiqué ci-dessous :

        private IEnumerator UpdateCloudScene(string objName, double xPos, double yPos, double zPos)
        {
            WWWForm form = new WWWForm();
    
            // set the properties of the AzureTableEntity
            azureTableEntity.RowKey = objName;
    
            azureTableEntity.X = xPos;
    
            azureTableEntity.Y = yPos;
    
            azureTableEntity.Z = zPos;
    
            // Serialize the AzureTableEntity object to be sent to Azure
            string jsonObject = JsonConvert.SerializeObject(azureTableEntity);
    
            using (UnityWebRequest www = UnityWebRequest.Post(azureFunctionEndpoint, jsonObject))
            {
                byte[] jsonToSend = new System.Text.UTF8Encoding().GetBytes(jsonObject);
    
                www.uploadHandler = new UploadHandlerRaw(jsonToSend);
    
                www.uploadHandler.contentType = "application/json";
    
                www.downloadHandler = new DownloadHandlerBuffer();
    
                www.SetRequestHeader("Content-Type", "application/json");
    
                yield return www.SendWebRequest();
    
                string response = www.responseCode.ToString();
            }
        }
    
  8. Enregistrer le code et revenir à Unity

  9. Faites glisser le script CloudScene sur la caméra principale.

    1. Cliquez sur l’appareil photo principal à partir du panneau Hiérarchie pour que ses propriétés apparaissent dans l’Inspecteur.

    2. Une fois le dossier Scripts ouvert, sélectionnez le script CloudScene et faites-le glisser sur l’appareil photo principal. Le résultat doit être le suivant :

      drag cloud script onto main camera

Chapitre 11 - Générer le bureau Project sur UWP

Tout ce qui est nécessaire pour la section Unity de ce projet a été terminé.

  1. Accédez à Build Paramètres (FileBuild>Paramètres).

  2. Dans la fenêtre Build Paramètres, cliquez sur Générer.

    build project

  3. Une fenêtre Explorateur de fichiers s’affiche, vous invitant à entrer un emplacement à générer. Créez un dossier (en cliquant sur Nouveau dossier dans le coin supérieur gauche) et nommez-le BUILDS.

    new folder for build

    1. Ouvrez le nouveau dossier BUILDS et créez un autre dossier (à l’aide de nouveau dossier une fois de plus) et nommez-le NH_Desktop_App.

      folder name NH_Desktop_App

    2. Avec la NH_Desktop_App sélectionnée. Cliquez sur Sélectionner un dossier. La génération du projet prend une minute.

  4. Après la génération, Explorateur de fichiers s’affiche pour vous montrer l’emplacement de votre nouveau projet. Toutefois, il n’est pas nécessaire de l’ouvrir, car vous devez d’abord créer l’autre projet Unity, dans les prochains chapitres.

Chapitre 12 - Configurer Mixed Reality Unity Project

Voici une configuration classique pour le développement avec la réalité mixte et, par conséquent, un bon modèle pour d’autres projets.

  1. Ouvrez Unity , puis cliquez sur Nouveau.

    new unity project

  2. Vous devez maintenant fournir un nom de Project Unity, insérer UnityMRNotifHub. Vérifiez que le type de projet est défini sur 3D. Définissez l’emplacement sur un emplacement approprié pour vous (n’oubliez pas que plus près des répertoires racines est préférable). Cliquez ensuite sur Créer un projet.

    name UnityMRNotifHub

  3. Avec Unity ouvert, il est utile de vérifier que l’éditeur de script par défaut est défini sur Visual Studio. Accédez à EditPreferences>, puis à partir de la nouvelle fenêtre, accédez à Outils externes. Remplacez l’éditeur de script externepar Visual Studio 2017. Fermez la fenêtre Préférences .

    set external editor to VS

  4. Ensuite, accédez à FileBuild>Paramètres et basculez la plateforme vers plateforme Windows universelle, en cliquant sur le bouton Changer de plateforme.

    switch platforms to UWP

  5. Accédez au Paramètres FileBuild> et vérifiez que :

    1. L’appareil cible est défini sur n’importe quel appareil

      Pour le Microsoft HoloLens, définissez l’appareil cible sur HoloLens.

    2. Le type de build est défini sur D3D

    3. Le Kit de développement logiciel (SDK) est défini sur La dernière version installée

    4. Visual Studio Version est définie sur La dernière version installée

    5. La génération et l’exécution sont définies sur Ordinateur local

    6. Ici, il vaut la peine d’enregistrer la scène et de l’ajouter à la build.

      1. Pour ce faire, sélectionnez Ajouter des scènes ouvertes. Une fenêtre d’enregistrement s’affiche.

        add open scenes

      2. Créez un dossier pour cela, et n’importe quelle scène future, puis sélectionnez le bouton Nouveau dossier pour créer un dossier, nommez-le Scènes.

        new scenes folder

      3. Ouvrez votre dossier Scenes nouvellement créé, puis dans le champ Fichier : champ de texte, tapez NH_MR_Scene, puis appuyez sur Enregistrer.

        new scene - NH_MR_Scene

    7. Les autres paramètres, dans Build Paramètres, doivent être conservés comme paramètres par défaut pour l’instant.

  6. Dans la même fenêtre, cliquez sur le bouton Player Paramètres, ce qui ouvre le panneau associé dans l’espace où se trouve l’Inspecteur.

    open player settings

  7. Dans ce panneau, quelques paramètres doivent être vérifiés :

    1. Sous l’onglet Autres Paramètres :

      1. La version du runtime de script doit être expérimentale (équivalent .NET 4.6)

      2. Le serveur principal de script doit être .NET

      3. Le niveau de compatibilité des API doit être .NET 4.6

        api compatibility

    2. Plus loin dans le panneau, dans XR Paramètres (indiqué ci-dessous publier Paramètres), cochez Virtual Reality Supported, vérifiez que le kit de développement logiciel (SDK) Windows Mixed Reality est ajouté

      update xr settings

    3. Sous l’onglet Publication Paramètres, sous Fonctionnalités, heck :

      • InternetClient

        tick internet client

  8. De retour dans Build Paramètres, Unity C# Projects n’est plus grisé : cochez la case en regard de ceci.

  9. Une fois ces modifications effectuées, fermez la fenêtre Build Paramètres.

  10. Enregistrez votre scène et Project scène FileSave> / FileSave> Project.

    Important

    Si vous souhaitez ignorer le composant De configuration Unity pour ce projet (application de réalité mixte) et continuer directement dans le code, n’hésitez pas à télécharger ce .unitypackage, à l’importer dans votre projet en tant que package personnalisé, puis à partir du chapitre 14. Vous devrez toujours ajouter les composants de script.

Chapitre 13 - Importation des DLL dans le Mixed Reality Unity Project

Vous utiliserez stockage Azure bibliothèque Unity (qui utilise le Kit de développement logiciel (SDK) .Net pour Azure). Suivez ce lien pour savoir comment utiliser stockage Azure avec Unity. Il existe actuellement un problème connu dans Unity qui nécessite la reconfiguration des plug-ins après l’importation. Ces étapes (4 à 7 dans cette section) ne seront plus nécessaires une fois le bogue résolu.

Pour importer le Kit de développement logiciel (SDK) dans votre propre projet, vérifiez que vous avez téléchargé le dernier package .unity. Ensuite, procédez comme suit :

  1. Ajoutez le package .unity que vous avez téléchargé à partir de ce qui précède à Unity à l’aide de l’option de menu PackageCustom>AssetsImport>.

  2. Dans la zone Importer le package Unity qui s’affiche, vous pouvez sélectionner tout ce qui se trouve sous Plug-in>Stockage.

    import package

  3. Cliquez sur le bouton Importer pour ajouter les éléments à votre projet.

  4. Accédez au dossier Stockage sous Plug-ins dans l’affichage Project et sélectionnez les plug-ins suivants uniquement :

    • Microsoft.Data.Edm
    • Microsoft.Data.OData
    • Microsoft.WindowsAzure.Storage
    • Newtonsoft.Json
    • System.Spatial

    select plugins

  5. Avec ces plug-ins spécifiques sélectionnés, décochezLa plateformeany et décochezWSAPlayer, puis cliquez sur Appliquer.

    apply platform changes

    Notes

    Vous marquez ces plug-ins particuliers à utiliser uniquement dans l’éditeur Unity. Cela est dû au fait qu’il existe différentes versions des mêmes plug-ins dans le dossier WSA qui seront utilisés après l’exportation du projet à partir d’Unity.

  6. Dans le dossier du plug-in Stockage, sélectionnez uniquement :

    • Microsoft.Data.Services.Client

      select data services client

  7. Cochez la case Ne pas traiter sous Paramètres de plateforme, puis cliquez sur Appliquer.

    dont process

    Notes

    Vous marquez ce plug-in « Ne pas traiter », car le correctif d’assembly Unity a des difficultés à traiter ce plug-in. Le plug-in fonctionnera toujours même s’il n’est pas traité.

Chapitre 14 - Création de la classe TableToScene dans le projet Unity de réalité mixte

La classe TableToScene est identique à celle expliquée dans le chapitre 9. Créez la même classe dans la réalité mixte Unity Project suivant la même procédure expliquée dans le chapitre 9.

Une fois que vous avez terminé ce chapitre, vos deux projets Unity auront cette classe configurée sur la caméra principale.

Chapitre 15 - Création de la classe NotificationReceiver dans la Mixed Reality Unity Project

Le deuxième script que vous devez créer est NotificationReceiver, qui est responsable des éléments suivants :

  • Inscription de l’application auprès du Hub de notification lors de l’initialisation.
  • Écoute des notifications provenant du hub de notification.
  • Désérialisation des données de l’objet à partir des notifications reçues.
  • Déplacez les GameObjects dans la scène, en fonction des données désérialisées.

Pour créer le script NotificationReceiver :

  1. Cliquez avec le bouton droit dans le dossier Scripts , cliquez sur Créer, Script C#. Nommez le script NotificationReceiver.

    create new c# scriptname it NotificationReceiver

  2. Double-cliquez sur le script pour l’ouvrir.

  3. Ajoutez les espaces de noms suivants :

    //using Microsoft.WindowsAzure.Messaging;
    using Newtonsoft.Json;
    using System;
    using System.Collections;
    using UnityEngine;
    
    #if UNITY_WSA_10_0 && !UNITY_EDITOR
    using Windows.Networking.PushNotifications;
    #endif
    
  4. Insérez les variables suivantes :

        /// <summary>
        /// allows this class to behave like a singleton
        /// </summary>
        public static NotificationReceiver instance;
    
        /// <summary>
        /// Value set by the notification, new object position
        /// </summary>
        Vector3 newObjPosition;
    
        /// <summary>
        /// Value set by the notification, object name
        /// </summary>
        string gameObjectName;
    
        /// <summary>
        /// Value set by the notification, new object position
        /// </summary>
        bool notifReceived;
    
        /// <summary>
        /// Insert here your Notification Hub Service name 
        /// </summary>
        private string hubName = " -- Insert the name of your service -- ";
    
        /// <summary>
        /// Insert here your Notification Hub Service "Listen endpoint"
        /// </summary>
        private string hubListenEndpoint = "-Insert your Notification Hub Service Listen endpoint-";
    
  5. Remplacez la valeur hubName par le nom de votre service Notification Hub et la valeur hubListenEndpoint par la valeur de point de terminaison trouvée dans l’onglet Stratégies d’accès, Azure Notification Hub Service, dans le portail Azure (voir l’image ci-dessous).

    insert notification hubs policy endpoint

  6. Ajoutez maintenant les méthodes Start() et Awake() pour initialiser la classe.

        /// <summary>
        /// Triggers before initialization
        /// </summary>
        void Awake()
        {
            // static instance of this class
            instance = this;
        }
    
        /// <summary>
        /// Use this for initialization
        /// </summary>
        void Start()
        {
            // Register the App at launch
            InitNotificationsAsync();
    
            // Begin listening for notifications
            StartCoroutine(WaitForNotification());
        }
    
  7. Ajoutez la méthode WaitForNotification pour permettre à l’application de recevoir des notifications de la bibliothèque Notification Hub sans conflit avec le thread principal :

        /// <summary>
        /// This notification listener is necessary to avoid clashes 
        /// between the notification hub and the main thread   
        /// </summary>
        private IEnumerator WaitForNotification()
        {
            while (true)
            {
                // Checks for notifications each second
                yield return new WaitForSeconds(1f);
    
                if (notifReceived)
                {
                    // If a notification is arrived, moved the appropriate object to the new position
                    GameObject.Find(gameObjectName).transform.position = newObjPosition;
    
                    // Reset the flag
                    notifReceived = false;
                }
            }
        }
    
  8. La méthode suivante, InitNotificationAsync(), inscrit l’application auprès du service hub de notification lors de l’initialisation. Le code est commenté, car Unity ne pourra pas générer le projet. Vous supprimez les commentaires lorsque vous importez le package Nuget de messagerie Azure dans Visual Studio.

        /// <summary>
        /// Register this application to the Notification Hub Service
        /// </summary>
        private async void InitNotificationsAsync()
        {
            // PushNotificationChannel channel = await PushNotificationChannelManager.CreatePushNotificationChannelForApplicationAsync();
    
            // NotificationHub hub = new NotificationHub(hubName, hubListenEndpoint);
    
            // Registration result = await hub.RegisterNativeAsync(channel.Uri);
    
            // If registration was successful, subscribe to Push Notifications
            // if (result.RegistrationId != null)
            // {
            //     Debug.Log($"Registration Successful: {result.RegistrationId}");
            //     channel.PushNotificationReceived += Channel_PushNotificationReceived;
            // }
        }
    
  9. Le gestionnaire suivant, Channel_PushNotificationReceived(), est déclenché chaque fois qu’une notification est reçue. Il désérialise la notification, qui sera l’entité de table Azure qui a été déplacée sur l’application de bureau, puis déplace le GameObject correspondant dans la scène MR à la même position.

    Important

    Le code est commenté, car le code fait référence à la bibliothèque de messagerie Azure, que vous ajouterez après avoir généré le projet Unity à l’aide du Gestionnaire de package Nuget, dans Visual Studio. Par conséquent, le projet Unity ne sera pas en mesure de générer, sauf s’il est commenté. N’oubliez pas que si vous générez votre projet, puis que vous souhaitez revenir à Unity, vous devrez re-commenter ce code.

        ///// <summary>
        ///// Handler called when a Push Notification is received
        ///// </summary>
        //private void Channel_PushNotificationReceived(PushNotificationChannel sender, PushNotificationReceivedEventArgs args)    
        //{
        //    Debug.Log("New Push Notification Received");
        //
        //    if (args.NotificationType == PushNotificationType.Raw)
        //    {
        //        //  Raw content of the Notification
        //        string jsonContent = args.RawNotification.Content;
        //
        //        // Deserialise the Raw content into an AzureTableEntity object
        //        AzureTableEntity ate = JsonConvert.DeserializeObject<AzureTableEntity>(jsonContent);
        //
        //        // The name of the Game Object to be moved
        //        gameObjectName = ate.RowKey;          
        //
        //        // The position where the Game Object has to be moved
        //        newObjPosition = new Vector3((float)ate.X, (float)ate.Y, (float)ate.Z);
        //
        //        // Flag thats a notification has been received
        //        notifReceived = true;
        //    }
        //}
    
  10. N’oubliez pas d’enregistrer vos modifications avant de revenir à l’éditeur Unity.

  11. Cliquez sur l’appareil photo principal à partir du panneau Hiérarchie pour que ses propriétés apparaissent dans l’Inspecteur.

  12. Une fois le dossier Scripts ouvert, sélectionnez le script NotificationReceiver et faites-le glisser sur l’appareil photo principal. Le résultat doit être le suivant :

    drag notification receiver script to camera

    Notes

    Si vous développez ceci pour le Microsoft HoloLens, vous devez mettre à jour le composantCaméra principale de l’appareil photo, afin que :

    • Effacer les indicateurs : couleur unie
    • Arrière-plan : Noir

Chapitre 16 - Générer le Mixed Reality Project sur UWP

Ce chapitre est identique au processus de génération pour le projet précédent. Tout ce qui est nécessaire pour la section Unity de ce projet a été terminé. Il est donc temps de le générer à partir d’Unity.

  1. Accédez à Build Paramètres (FileBuild>Paramètres).

  2. Dans le menu Générer Paramètres, vérifiez que les projets C# Unity* sont cochés (ce qui vous permet de modifier les scripts de ce projet, après la génération).

  3. Une fois cette opération terminée, cliquez sur Générer.

    build project

  4. Une fenêtre Explorateur de fichiers s’affiche, vous invitant à entrer un emplacement à générer. Créez un dossier (en cliquant sur Nouveau dossier dans le coin supérieur gauche) et nommez-le BUILDS.

    create builds folder

    1. Ouvrez le nouveau dossier BUILDS et créez un autre dossier (à l’aide de nouveau dossier une fois de plus), puis nommez-le NH_MR_App.

      create NH_MR_Apps folder

    2. Avec la NH_MR_App sélectionnée. Cliquez sur Sélectionner un dossier. La génération du projet prend une minute.

  5. Après la génération, une fenêtre Explorateur de fichiers s’ouvre à l’emplacement de votre nouveau projet.

Chapitre 17 - Ajouter des packages NuGet à la solution UnityMRNotifHub

Avertissement

N’oubliez pas que, une fois que vous avez ajouté les packages NuGet suivants (et supprimez les marques de commentaire du code dans le chapitre suivant), le code, à la réouverture dans le Project Unity, présente des erreurs. Si vous souhaitez revenir en arrière et continuer à modifier dans l’éditeur Unity, vous aurez besoin de commenter ce code errosome, puis de supprimer les marques de commentaire ultérieurement, une fois que vous êtes de retour dans Visual Studio.

Une fois la build de réalité mixte terminée, accédez au projet de réalité mixte que vous avez créé, puis double-cliquez sur le fichier de solution (.sln) dans ce dossier pour ouvrir votre solution avec Visual Studio 2017. Vous devez maintenant ajouter le package windowsAzure.Messaging.managed NuGet ; il s’agit d’une bibliothèque utilisée pour recevoir des notifications à partir du hub de notification.

Pour importer le package NuGet :

  1. Dans le Explorateur de solutions, cliquez avec le bouton droit sur votre solution.

  2. Cliquez sur Gérer les packages NuGet.

    open nuget manager

  3. Sélectionnez l’onglet Parcourir et recherchez WindowsAzure.Messaging.managed.

    find windows azure messaging package

  4. Sélectionnez le résultat (comme indiqué ci-dessous), puis, dans la fenêtre à droite, cochez la case en regard de Project. Cela place une coche en regard de Project, ainsi que la case à cocher en regard du projet Assembly-CSharp et UnityMRNotifHub.

    tick all projects

  5. La version initialement fournie peut ne pas être compatible avec ce projet. Par conséquent, cliquez sur le menu déroulant en regard de la version, puis sur Version 0.1.7.9, puis sur Installer.

  6. Vous avez maintenant terminé d’installer le package NuGet. Recherchez le code commenté que vous avez entré dans la classe NotificationReceiver et supprimez les commentaires.

Chapitre 18 - Modifier l’application UnityMRNotifHub, classe NotificationReceiver

Après avoir ajouté les packages NuGet, vous devez supprimer les marques de commentaire de la classe NotificationReceiver.

notamment :

  1. Espace de noms en haut :

    using Microsoft.WindowsAzure.Messaging;
    
  2. Tout le code dans la méthode InitNotificationsAsync() :

        /// <summary>
        /// Register this application to the Notification Hub Service
        /// </summary>
        private async void InitNotificationsAsync()
        {
            PushNotificationChannel channel = await PushNotificationChannelManager.CreatePushNotificationChannelForApplicationAsync();
    
            NotificationHub hub = new NotificationHub(hubName, hubListenEndpoint);
    
            Registration result = await hub.RegisterNativeAsync(channel.Uri);
    
            // If registration was successful, subscribe to Push Notifications
            if (result.RegistrationId != null)
            {
                Debug.Log($"Registration Successful: {result.RegistrationId}");
                channel.PushNotificationReceived += Channel_PushNotificationReceived;
            }
        }
    

Avertissement

Le code ci-dessus contient un commentaire : assurez-vous que vous n’avez pas accidentellement non commenté ce commentaire (car le code ne sera pas compilé si vous le possédez!).

  1. Enfin, l’événement Channel_PushNotificationReceived :

        /// <summary>
        /// Handler called when a Push Notification is received
        /// </summary>
        private void Channel_PushNotificationReceived(PushNotificationChannel sender, PushNotificationReceivedEventArgs args)
        {
            Debug.Log("New Push Notification Received");
    
            if (args.NotificationType == PushNotificationType.Raw)
            {
                //  Raw content of the Notification
                string jsonContent = args.RawNotification.Content;
    
                // Deserialize the Raw content into an AzureTableEntity object
                AzureTableEntity ate = JsonConvert.DeserializeObject<AzureTableEntity>(jsonContent);
    
                // The name of the Game Object to be moved
                gameObjectName = ate.RowKey;
    
                // The position where the Game Object has to be moved
                newObjPosition = new Vector3((float)ate.X, (float)ate.Y, (float)ate.Z);
    
                // Flag thats a notification has been received
                notifReceived = true;
            }
        }
    

Avec ces marques de commentaire non validées, assurez-vous d’enregistrer, puis passez au chapitre suivant.

Chapitre 19 - Associer le projet de réalité mixte à l’application Store

Vous devez maintenant associer le projet de réalité mixte à l’application Store que vous avez créée au début du labo.

  1. Ouvrez la solution.

  2. Cliquez avec le bouton droit sur l’application UWP Project dans le volet Explorateur de solutions, accédez au Windows Store et associez l’application au Windows Store....

    open store association

  3. Une nouvelle fenêtre s’affiche appelée Associer votre application au Windows Store. Cliquez sur Suivant.

    go to the next screen

  4. Il charge toutes les applications associées au compte que vous avez connecté. Si vous n’êtes pas connecté à votre compte, vous pouvez vous connecter sur cette page.

  5. Recherchez le nom de l’application store que vous avez créée au début de ce didacticiel et sélectionnez-le. Cliquez ensuite sur Suivant.

    find and select your store name

  6. Cliquez sur Associer.

    associate the app

  7. Votre application est désormais associée à l’application du Windows Store. Cela est nécessaire pour activer les notifications.

Chapitre 20 - Déployer des applications UnityMRNotifHub et UnityDesktopNotifHub

Ce chapitre peut être plus facile avec deux personnes, car le résultat inclut les deux applications en cours d’exécution, une s’exécutant sur votre ordinateur de bureau et l’autre dans votre casque immersif.

L’application casque immersif attend de recevoir les modifications apportées à la scène (modifications de position des GameObjects locaux) et l’application de bureau apporte des modifications à leur scène locale (modifications de position), qui seront partagées avec l’application MR. Il est logique de déployer d’abord l’application MR, suivie de l’application de bureau, afin que le récepteur puisse commencer à écouter.

Pour déployer l’application UnityMRNotifHub sur votre ordinateur local :

  1. Ouvrez le fichier solution de votre application UnityMRNotifHub dans Visual Studio 2017.

  2. Dans la plateforme de solution, sélectionnez x86, Ordinateur local.

  3. Dans la configuration de la solution , sélectionnez Déboguer.

    set project configuration

  4. Accédez au menu Générer , puis cliquez sur Déployer la solution pour charger une version test de l’application sur votre ordinateur.

  5. Votre application doit maintenant apparaître dans la liste des applications installées, prêtes à être lancées.

Pour déployer l’application UnityDesktopNotifHub sur une machine locale :

  1. Ouvrez le fichier de solution de votre application UnityDesktopNotifHub dans Visual Studio 2017.

  2. Dans la plateforme de solution, sélectionnez x86, Ordinateur local.

  3. Dans la configuration de la solution , sélectionnez Déboguer.

    set project configuration

  4. Accédez au menu Générer , puis cliquez sur Déployer la solution pour charger une version test de l’application sur votre ordinateur.

  5. Votre application doit maintenant apparaître dans la liste des applications installées, prêtes à être lancées.

  6. Lancez l’application de réalité mixte, suivie de l’application de bureau.

Avec les deux applications en cours d’exécution, déplacez un objet dans la scène de bureau (à l’aide du bouton gauche de la souris). Ces modifications positionnelles seront apportées localement, sérialisées et envoyées au service Function App Service. Le service Function App Service met ensuite à jour la table avec le hub de notification. Après avoir reçu une mise à jour, le Hub de notification envoie les données mises à jour directement à toutes les applications inscrites (dans ce cas l’application casque immersif), qui désérialise ensuite les données entrantes et applique les nouvelles données positionnelles aux objets locaux, en les déplaçant dans la scène.

Votre application Azure Notification Hubs terminée

Félicitations, vous avez créé une application de réalité mixte qui tire parti du service Azure Notification Hubs et autorise la communication entre les applications.

final product -end

Exercices bonus

Exercice 1

Pouvez-vous découvrir comment modifier la couleur des GameObjects et envoyer cette notification à d’autres applications qui consultent la scène ?

Exercice 2

Pouvez-vous ajouter le mouvement des GameObjects à votre application MR et voir la scène mise à jour dans votre application de bureau ?