Parlez-nous de l’expérience de téléchargement de PDF.

Documentation Azure pour les

développeurs d’applications mobiles
Trouvez les informations dont vous avez besoin pour développer des applications
mobiles sur Azure.

Bien démarrer avec les applications mobiles sur Azure

Ｙ ARCHITECTURE

Choisir des infrastructures de développement mobile

Phases du développement d’applications mobiles Azure

ｄ ENTRAINEMENT

Créer des applications mobiles avec .NET MAUI

ｑ VIDEO

Créer une application mobile en entier avec Azure

Créer un back-end mobile personnalisé pour votre application

Appeler des services web

ｅ VUE D’ENSEMBLE

Créer un back-end d’application mobile serverless avec Azure Functions et d’autres services

Créer des applications en temps réel avec Azure SignalR

ｆ DÉMARRAGE RAPIDE

Bien démarrer avec Azure Functions et Xamarin

Azure SignalR Service avec [Link]

ｄ ENTRAINEMENT
Consommer un service web RESTful avec Xamarin

Enregistrer des données

ｅ VUE D’ENSEMBLE

Travailler avec des données hors connexion en utilisant Azure Mobile Apps

Stocker, synchroniser et interroger des données d’application mobile à partir du cloud

Stockage cloud pour des applications hautement sécurisées, durables et scalables avec
Stockage Azure

ｆ DÉMARRAGE RAPIDE

Enregistrer des données avec Azure Cosmos DB

Utiliser le stockage Blob

Créer une application [Link] avec le Kit de développement logiciel (SDK) .NET et
Azure Cosmos DB pour MongoDB

Envoyer des notifications Push

ｅ VUE D’ENSEMBLE

Collaborer avec les utilisateurs de vos applications en envoyant des notifications Push

ｆ DÉMARRAGE RAPIDE

Créer un hub de notification Azure dans le portail Azure

ｇ DIDACTICIEL

Envoyer des notifications Push à des applications [Link] avec [Link] Core et Azure
Notification Hubs

Envoyer des notifications Push à des appareils Android

Envoyer (push) du contenu riche à des appareils

Authentifier des utilisateurs

ｅ VUE D’ENSEMBLE

Flux d’authentification pris en charge avec Microsoft Authentication Library (MSAL)

Ajouter une authentification et gérer les identités des utilisateurs dans vos applications
mobiles

ｇ DIDACTICIEL

Connecter des utilisateurs et appeler Microsoft Graph à partir d’une application Android

Ajouter une application cliente native à votre locataire Azure Active Directory B2C

ｓ SAMPLE

Connecter les utilisateurs à une application iOS Swift

Automatiser les builds et les déploiements avec DevOps

ｐ CONCEPT

Automatiser le déploiement et la mise en production de vos applications mobiles avec des

services de livraison continue

Automatisez le cycle de vie de vos application avec une compilation et une intégration
continues

Concepts clés pour les nouveaux utilisateurs Azure Pipelines

ｅ VUE D’ENSEMBLE

Publier une build avec App Center

ｃ GUIDE PRATIQUE

App Center CodePush

Suivre l’analytique et les plantages

ｐ CONCEPT

Analyser et comprendre l'utilisation des applications mobiles

Superviser en temps réel les défaillances et les erreurs dans votre application mobile
ｅ VUE D’ENSEMBLE

Analytique App Center

ｃ GUIDE PRATIQUE

Activation des diagnostics dans une application

ｇ DIDACTICIEL

Recevoir une analytique en temps réel

Développer avec des kits SDK

ａ TÉLÉCHARGER

iOS

Android

.NET, Xamarin

Microsoft Authentication Library (MSAL) pour iOS

Microsoft Authentication Library (MSAL) pour Android

Microsoft Authentication Library (MSAL) pour .NET/Xamarin

Choisir un framework de
développement mobile
Article • 23/10/2023

Les développeurs peuvent utiliser des technologies côté client pour créer eux-mêmes
des applications mobiles en utilisant des infrastructures et des modèles spécifiques pour
une approche multiplateforme. En fonction de leurs facteurs de décision, les
développeurs peuvent créer :

des applications natives pour plateforme unique à l’aide de langages tels

qu’Objective-C et Java ;
des applications multiplateformes à l’aide de Xamarin, .NET et C# ;
des applications hybrides à l’aide de Cordova et de ses variantes.

Plateformes natives
La création d’une application native nécessite des langages de programmation
spécifiques à la plateforme, des kits de développement logiciel (SDK), des
environnements de développement et d’autres outils fournis par les fournisseurs de
systèmes d’exploitation.

iOS
Créé et développé par Apple, iOS est utilisé pour créer des applications sur des appareils
Apple, à savoir iPhone et iPad.

Langages de programmation : Objective-C, Swift

IDE : Xcode
Kit de développement logiciel (SDK) : iOS

Android
Conçu par Google et par le système d’exploitation le plus populaire du monde, Android
permet de créer des applications pouvant s’exécuter sur un éventail de smartphones et
de tablettes.

Langage de programmation : Java, Kotlin

IDE : Outils de développement Android Studio et Android
SDK : Kit de développement logiciel (SDK) Android
Windows
Langage de programmation : C#
IDE : Visual Studio, Visual Studio Code
SDK : Kit de développement logiciel (SDK) Windows

Avantages de la plateforme native

Bonne expérience utilisateur
Applications réactives haute performance et la capacité d’interface avec des
bibliothèques natives
Applications hautement sécurisées

Inconvénients de la plateforme native

L’application s’exécute sur une seule plateforme
Plus de ressources de développement requises et création d’applications plus
coûteuse
Moins de réutilisation du code

Applications multiplateformes et hybrides

Les applications multiplateformes vous permettent d’écrire des applications mobiles
natives une fois, de partager du code et de les exécuter sur iOS, Android et Windows.

Xamarin
Détenu par Microsoft, Xamarin est utilisé pour créer des applications mobiles
multiplateformes robustes en C#. Xamarin dispose d’une bibliothèque de classes et d’un
runtime qui fonctionne sur plusieurs plateformes, telles qu’iOS, Android et Windows. Il
compile également les applications natives (non interprétées) qui offrent des
performances élevées. Xamarin combine toutes les capacités des plateformes natives et
ajoute un certain nombre de ses fonctionnalités puissantes.

Langage de programmation : C#
IDE : Visual Studio sur Windows ou Mac

React Native
Publié par Facebook en 2015, React Native est une infrastructure open source
JavaScript permettant d’écrire des applications mobiles réelles de rendu en mode natif
pour iOS et Android. Il est basé sur REACT, la bibliothèque JavaScript de Facebook pour
la création d’interfaces utilisateur. Au lieu de cibler le navigateur, il cible les plateformes
mobiles. React Native utilise des composants natifs au lieu de composants web comme
blocs de construction.

Langage de programmation : JavaScript

IDE : Visual Studio Code

Unity
Unity est un moteur optimisé pour la création de jeux. Vous pouvez l’utiliser pour
concevoir des applications 2D ou 3D de haute qualité en C# pour des plateformes telles
que Windows, iOS, Android et Xbox.

Cordova
Cordova vous permet de créer des applications hybrides à l’aide de Visual Studio Tools
pour Apache Cordova ou Visual Studio Code avec des extensions pour Cordova.
L’approche hybride vous permet de partager des composants avec des sites web et de
réutiliser des applications basées sur un serveur web avec des approches d’applications
web hébergées basées sur Cordova.

Avantages du multiplateforme

Facilité d’utilisation accrue du code grâce à la création d’un code base pour
plusieurs plateformes
Répondre aux besoins d’une audience plus vaste sur de nombreuses plateformes
Réduction spectaculaire de la durée de développement
Facile à lancer et à mettre à jour

Inconvénients du multiplateforme
Moins bonnes performances
Manque de flexibilité
Chaque plateforme possède un ensemble unique de composants et de
fonctionnalités pour rendre l’application native plus créative
Durée de conception de l’interface utilisateur accrue
Limitation en termes d’outils
Différentes phases du développement
d’applications mobiles
Article • 08/06/2023

La création d’une application mobile implique plusieurs étapes. Vous pouvez facilement
tirer parti des services, outils et technologies Microsoft pour créer des applications
mobiles de grande qualité.

Développement d’applications
Vous pouvez créer des applications clientes natives pour plateforme unique à l’aide de
langages tels qu’Objective-C et Java. Vous pouvez créer des applications
multiplateformes à l’aide de Xamarin, de React Native et de Unity. Vous pouvez
également créer des applications hybrides à l’aide de Cordova. Pour construire des
applications clientes, utilisez des IDE et des éditeurs de code, tels que Visual Studio,
Visual Studio pour Mac ou Visual Studio Code, sur des PC et Mac.

Planifier et concevoir avec des services back-

end
Microsoft fournit divers services pour la configuration d’un back-end sécurisé, évolutif et
fiable pour votre application mobile. Vous pouvez créer des API et des déclencheurs
serverless sans avoir à assurer la maintenance de vos propres serveurs. Utilisez des
notifications Push, la synchronisation des données hors connexion, l’authentification et
les services de données pour former un service principal mobile complet et vaste qui
prend en charge une série de scénarios de construction d’applications.

La création d’un service principal doit répondre à de nombreuses exigences. Vous

devez :

limiter le stockage des données sur l’appareil ;

Synchronisation des données sur plusieurs appareils
vérifier que l’application peut s’exécuter sans connectivité réseau ;
Envoi de notifications aux utilisateurs
Réduction de la consommation de la batterie
créer un service principal évolutif, fiable et sécurisé ;
automatiser la maintenance du serveur.
DevOps et supervision continue
Pour créer des applications mobiles et basées sur le cloud, tirez parti de l’intégration
continue (CI), de la livraison continue (CD) et des services de surveillance continue pour
produire des builds natives pour toutes les plateformes. Vous pouvez exécuter des tests
UI Automation sur des milliers d’appareils physiques, automatiser leurs mises en
production par le biais de canaux de test bêta ou les déployer directement dans des
magasins d’applications. Vous pouvez également recueillir des informations d’analyse de
l’utilisation, ainsi que sur les défaillances et exceptions, pour leurs applications.

Services supplémentaires
De nombreux services Azure sont utilisables, en fonction du type et de la nature de
l’application en cours de génération :

Recherche cognitive Azure pour rechercher tous les types de données internes,
avec une interrogation rapide.
Azure Cognitive Services pour utiliser l’intelligence artificielle dans votre
application.
Azure SignalR pour activer la communication en temps réel dans votre application.
Ajouter une authentification et gérer les
identités des utilisateurs dans vos
applications mobiles
Article • 08/11/2023

Le fait de voir l’utilisateur et son comportement dans votre application permet aux
développeurs de fidéliser les utilisateurs en leur créant des expériences sur-mesure. Que
vous soyez un développeur d’applications créant une application de collaboration pour
des utilisateurs dans votre organisation ou que vous créiez la future plateforme de
réseaux sociaux, vous avez besoin d’un moyen d’authentifier les utilisateurs et de gérer
leurs identités. Le service de gestion des identités est l’une des fonctionnalités les plus
importantes d’un service back-end mobile.

Utilisez les services suivants pour activer l’authentification des utilisateurs dans vos
applications mobiles.

Azure Active Directory B2C

Azure AD B2C est un service de gestion des identités entreprise-client (B2C) que les
développeurs peuvent utiliser afin d’authentifier leurs clients. Ce service de marque
blanche permet aux développeurs de personnaliser et de contrôler la façon dont les
utilisateurs interagissent de façon sécurisée avec vos applications web, de bureau,
mobiles ou monopages. Avec Azure AD B2C, les utilisateurs peuvent s’inscrire, se
connecter, réinitialiser les mots de passe et modifier des profils. Azure AD B2C
implémente une forme des protocoles OpenID Connect et OAuth 2.0.

Fonctionnalités d’Azure Active Directory B2C

Authentifiez de façon sécurisée les clients à l’aide de leur fournisseur d’identité
préféré.
Gérez les identités et les accès des clients.
Bénéficiez d’une prise en charge des connexions pour les réseaux sociaux tels que
Facebook, GitHub, Google, LinkedIn, Twitter, WeChat et Weibo.
Connectez-vous à vos comptes d’utilisateur à l’aide des protocoles standard du
secteur, comme OpenID Connect ou SAML, pour rendre la gestion des identités
possible sur différentes plateformes.
Offrez des expériences d’inscription et de connexion personnalisées.
 Bénéficiez d’une intégration facile aux bases de données CRM, outils de marketing
analytique et systèmes de vérification de compte.
Capturez des données de connexion, de préférence et de conversion pour les
clients.

Informations de référence sur Azure Active Directory B2C

Azure portal
Documentation d’Azure Active Directory B2C
Guides de démarrage rapide
Exemples

Microsoft Entra ID
Microsoft Entra ID est le service de gestion des identités et des accès cloud de
Microsoft, qui permet à vos employés de se connecter et d’accéder à :

Ressources externes telles que Microsoft 365, le portail Azure et des milliers
d’autres applications SaaS (Software as a service).
Ressources internes telles que les applications situées sur votre réseau d’entreprise
et intranet ainsi que les applications cloud développées par votre propre
organisation.

Fonctionnalités de Microsoft Entra

Accès fluide et hautement sécurisé en connectant les utilisateurs aux applications
dont ils ont besoin.
Protection complète des identités et sécurité renforcée des identités et des accès
en fonction de l’utilisateur, de l’emplacement, de l’appareil, des données et du
contexte d’application.
Milliers d’applications préintégrées à la fois commerciales et personnalisées
comme Microsoft 365, [Link] et Box.
Capacité à gérer des accès à grande échelle.

Références d’ID Microsoft Entra

Azure portal
Qu’est-ce que Microsoft Entra ID ?
Mise en route de Microsoft Entra ID
Guides de démarrage rapide
À propos d’Azure Mobile Apps
Article • 08/11/2023

Azure Mobile Apps (également appelé Microsoft Data Sync Framework) offre aux
développeurs d’entreprise et aux intégrateurs système une plateforme de
développement d’applications mobiles hautement évolutive et mondialement
disponible. L’infrastructure fournit à votre application mobile les fonctionnalités
suivantes :

Authentification
Requête de données
Synchronisation des données hors connexion

Azure Mobile Apps est conçu pour fonctionner avec Azure App Service. Étant donné
qu’il est basé sur [Link] 6, il peut également être exécuté en tant que conteneur dans
Azure Container Apps ou Azure Kubernetes Service.

Pourquoi Mobile Apps ?

Avec les kits SDK Mobile Apps, vous pouvez :

Créer des applications natives et multiplateformes : créez des applications

compatibles avec le cloud pour Android™, iOS ou Windows à l’aide de sdk natifs.
Connecter à vos systèmes d’entreprise : authentifiez vos utilisateurs avec l’ID
Microsoft Entra et connectez-vous aux magasins de données d’entreprise.
 Créer des applications prêtes à l’emploi en mode hors connexion avec
synchronisation des données : augmentez la productivité de votre personnel
mobile en créant des applications qui fonctionnent hors connexion. Utilisez Azure
Mobile Apps pour synchroniser les données en arrière-plan.

Fonctionnalités d’Azure Mobile Apps

Les fonctions qui suivent sont importantes pour le développement mobile Cloud :

Authentification et autorisation : utilisez Azure Mobile Apps pour connecter des

utilisateurs à l’aide de comptes sociaux et professionnels. Azure App Service prend
en charge l’ID Microsoft Entra, Facebook™, Google®, Microsoft, Twitter® et
OpenID Connecter ®. Azure Mobile Apps prend en charge tout schéma
d’authentification pris en charge par [Link] Core.

Accès aux données : Azure Mobile Apps fournit une source de données OData v4
conviviale qui est liée à une base de données compatible via Entity Framework
Core. Toute base de données compatible peut être utilisée, y compris Azure SQL,
Azure Cosmos DB ou microsoft SQL Server local.

Synchronisation hors connexion : créez des applications mobiles robustes et

réactives qui fonctionnent sur des jeux de données hors connexion. Vous pouvez
synchroniser automatiquement ce jeu de données avec le service, et gérer
facilement les conflits.

Kits de développement logiciel (SDK) clients : il existe un ensemble complet de kits

SDK clients qui couvrent le développement multiplateforme (.NET et Apache
Cordova™). Chaque kit de développement logiciel client est disponible avec une
licence MIT et open source.

Fonctionnalités d’Azure App Service

Les fonctionnalités suivantes de la plate-forme sont utiles aux sites de production
mobile :

Mise à l’échelle automatique : avec App Service, vous pouvez facilement effectuer
un scale-up ou un scale-out pour vous adapter à n’importe quelle charge cliente
entrante. Sélectionnez manuellement le nombre et la taille des machines virtuelles,
ou configurez la mise à l’échelle automatique pour dimensionner votre service en
fonction de la charge ou d’une planification.
 Environnements intermédiaires : App Service peut exécuter plusieurs versions de
votre site. Vous pouvez effectuer des tests A/B et effectuer une mise en lots sur
place d’un nouveau service mobile.

Déploiement continu : App Service peut s’intégrer aux systèmes de gestion de

contrôle de code source courants, vous permettant de déployer facilement une
nouvelle version de votre service mobile.

Réseaux virtuels : App Service peut se connecter à des ressources locales à l’aide
de connexions de réseau virtuel, Azure ExpressRoute ou hybrides.

Environnements isolés/dédiés : pour exécuter de manière sécurisée des

applications Azure App Service, vous pouvez exécuter App Service dans un
environnement totalement isolé et dédié. L’environnement est idéal pour des
charges de travail nécessitant un accès à grande échelle, isolé ou avec réseau
sécurisé.

Étapes suivantes
Pour commencer à utiliser Azure Mobile Apps, suivez un tutoriel de démarrage. Ce
tutoriel décrit les principes fondamentaux de la production d’un service mobile et d’un
client de votre choix. Il couvre également l’intégration de l’authentification et de la
synchronisation hors connexion. Vous pouvez suivre le tutoriel plusieurs fois, une pour
chaque application cliente.

Développement d’applications Windows

Plateforme Windows universelle (UWP)
Frameworks de présentation Windows (WPF)
Kit de développement logiciel (SDK) d’application Windows (WinUI 3)
Développement d’applications mobiles natives
Xamarin (Android)
Xamarin (iOS)
Développement d’applications mobiles multiplateformes
.NET MAUI
Avalonia
Xamarin (Forms)
Stocker, synchroniser et interroger des
données d’application mobile à partir
du cloud
Article • 23/10/2023

Quel que soit le type d'application que vous créez, vous êtes susceptible de générer et
de traiter des données. Les attentes des utilisateurs de votre application sont élevées. Ils
veulent que l'application fonctionne rapidement et avec fluidité, en toutes circonstances.
La plupart des applications fonctionnent également sur plusieurs appareils. Vous pouvez
accéder à votre application à partir d'un ordinateur de bureau ou d'un appareil mobile.
Plusieurs utilisateurs peuvent utiliser l'application en même temps et partager des
données en espérant disposer d'un accès immédiat et en temps réel aux données.

Les utilisateurs de votre application ne disposeront pas toujours d'une connexion

Internet. Les applications sont conçues et prévues pour fonctionner avec ou sans
connexion Internet. Les développeurs doivent choisir une solution adaptée pour le
stockage et la synchronisation de leurs données dans le cloud, afin d’offrir une
expérience exceptionnelle aux clients qui utilisent leur application, qui peut inclure le
développement de votre propre magasin de données hors connexion.

Microsoft propose un large éventail de services qui éliminent le besoin de faire tourner
des serveurs, de choisir votre base de données ou de vous soucier de la mise à l'échelle
ou de la sécurité pour offrir l'expérience la plus riche possible. Ces services vous offrent
une expérience de développement exceptionnelle qui vous permet de stocker les
données d'application dans le cloud en utilisant des API SQL ou NoSQL. Vous pouvez
également synchroniser les données sur tous les appareils et permettre aux applications
de fonctionner avec ou sans connexion réseau pour créer des applications évolutives et
robustes.

Utilisez les services suivants pour gérer et stocker les données d’application mobile dans
le cloud.

Azure Cosmos DB
Azure Cosmos DB est un service de base de données multimodèle distribué à l’échelle
mondiale. Vous pouvez l'utiliser pour générer des applications à l'échelle de la planète.
Azure Cosmos DB vous permet de faire évoluer en toute flexibilité et de façon
indépendante le débit et le stockage dans un nombre illimité de régions Azure à travers
le monde. Vous pouvez tirer parti d'un accès ultrarapide aux données en utilisant vos
surfaces d'API préférées. Ces surfaces incluent SQL, MongoDB, Cassandra, Tables ou
Gremlin. Azure Cosmos DB offre des garanties en termes de débit, de latence, de
disponibilité et de cohérence avec des contrats SLA complets.

Fonctionnalités Azure Cosmos DB

Prend en charge un large éventail d’API telles que NoSQL, Apache Cassandra,
MongoDB, Apache Gremlin et Table.
La distribution mondiale clé en main réplique vos données où que soient vos
utilisateurs. Vos utilisateurs peuvent interagir avec un réplica des données proche
d'eux.
Pas de gestion de schéma ou d'index car le moteur de base de données est
totalement indépendant du schéma.
Présence régionale exhaustive car Azure Cosmos DB est disponible dans toutes les
régions Azure du monde, dont 54 régions dans le cloud public.
Défini avec précision, plusieurs choix de cohérence, car le protocole de réplication
multimaître Azure Cosmos DB est soigneusement conçu pour offrir cinq choix de
cohérence bien définis. Ces cinq choix sont les suivants : Forte, Obsolescence
limitée, Session, Préfixe cohérent et Éventuelle.
Disponibilité à 99,999 % pour les lectures et les écritures.
Déclenchement par programmation (ou par le biais du portail Azure) du
basculement régional de votre compte Azure Cosmos DB afin d'être sûr que votre
application est conçue pour résister à un sinistre régional.
Faible latence garantie, au 99e centile partout dans le monde.

Informations de référence sur Azure Cosmos DB

Azure portal
Documentation Azure Cosmos DB

Azure SQL Database

Azure SQL Database est un service managé de base de données relationnelle à usage
général. Vous pouvez l'utiliser afin de créer une couche de stockage de données
hautement disponible et très performante pour les applications et les solutions dans le
cloud Azure.

Fonctionnalités Azure SQL Database

 Modèles et outils de base de données élastiques : avec une base de données
élastique, les développeurs peuvent regrouper des ressources entre un groupe de
bases de données pour la mise à l’échelle. Pour la gestion administrative de ces
ressources, vous soumettez un script en tant que travail. La base de données SQL
exécute ensuite le script dans les bases de données.

Hautes performances : les applications à débit élevé peuvent tirer parti de la

dernière version. Elle offre 25 % de puissance de base de données Premium en
plus.

Sauvegardes, réplication et haute disponibilité : la réplication intégrée et un

contrat SLA soutenu par Microsoft au niveau de la base de données fournissent
une continuité et une protection des applications contre les événements
catastrophiques. La géoréplication active vous permet de configurer le
basculement et la restauration en libre-service, qui fournissent un contrôle total sur
la « récupération d’oops ». La restauration des données est disponible à partir de
sauvegardes de données allant jusqu’à 35 jours.

Maintenance quasi nulle : le logiciel automatique fait partie du service. Les réplicas
système intégrés contribuent à assurer une protection des données inhérente, une
disponibilité de la base de données et la stabilité du système. Les réplicas système
sont automatiquement déplacés vers de nouveaux ordinateurs. Ils sont
approvisionnés à la volée, car les anciens ne fonctionnent pas.

Sécurité : Azure SQL Database offre un portefeuille de fonctionnalités de sécurité

pour répondre aux stratégies de conformité organisationnelles ou obligatoires :

L’audit offre aux développeurs la possibilité d’effectuer des tâches liées à la

conformité et d’obtenir des informations sur les activités.

Les développeurs et le personnel informatique peuvent également implémenter

des stratégies au niveau de la base de données afin de limiter l’accès aux données
sensibles à l’aide de la sécurité au niveau des lignes, du masquage des données
dynamiques et du chiffrement transparent des données pour Azure SQL Database.

Azure SQL Database est vérifié par les principaux auditeurs de cloud dans le cadre
des principales approbations et certifications de conformité Azure, comme HIPAA
BAA, ISO/IEC 27001:2005, FedRAMP et les clauses contractuelles types de l'UE.

Informations de référence sur Azure SQL Database

Azure portal
Documentation Azure SQL Database
Stockage cloud pour des applications
hautement sécurisées, durables et
scalables avec Stockage Azure
Article • 08/06/2023

Le service Stockage Azure est la solution de stockage cloud de Microsoft pour les
applications récentes qui offre un magasin d’objets hautement scalable pour des objets
de données, un service de système de fichiers pour le cloud, un magasin de messagerie
pour une messagerie fiable et un magasin NoSQL. Le Stockage Azure est :

Durable et hautement disponible : La redondance garantit que vos données sont

sécurisées en cas de défaillance matérielle temporaire. Vous pouvez également
choisir de répliquer des données entre des centres de données ou des régions
géographiques pour une protection supplémentaire contre les catastrophes locales
ou les catastrophes naturelles. Les données ainsi répliquées restent hautement
disponibles en cas de panne inattendue.
Sécurisé : Toutes les données écrites dans le Stockage Azure sont chiffrées par le
service. Le Stockage Azure vous permet de contrôler de manière plus précise qui a
accès à vos données.
Évolutifs : Les services sont conçus pour être hautement scalables afin de répondre
aux besoins de stockage de données et de performances des applications
actuelles.
Managé : Azure gère la maintenance du matériel, les mises à jour et les problèmes
critiques pour vous.
Accessible: Les données sont accessibles n’importe où dans le monde via HTTP ou
HTTPS. Microsoft fournit des bibliothèques clientes dans plusieurs langages,
comme .NET, Java, [Link], Python, PHP, Ruby et Go, ainsi qu’une API REST
avancée. Les scripts sont pris en charge dans Azure PowerShell et Azure CLI. Le
portail Azure et l’Explorateur Stockage Azure offrent des solutions visuelles simples
pour utiliser vos données.

Utilisez les services suivants pour activer le stockage cloud dans vos applications
mobiles.

Stockage Blob Azure

Le Stockage Blob Azure est une solution de stockage d’objets pour le cloud. Le
stockage d’objets Blob est optimisé pour stocker de grandes quantités de données non
structurées qui n’obéissent pas à un modèle ou une définition de données en particulier,
comme des données texte ou binaires. Il prend en charge la diversité des langues
utilisées par les bibliothèques clientes. Le stockage Blob est conçu pour :

Mettre à disposition des images ou documents directement dans un navigateur.

Stocker des fichiers pour un accès distribué.
Diffuser du contenu audio et vidéo.
Écrire dans les fichiers journaux.
Stockage de données pour la sauvegarde et la restauration, la récupération
d’urgence et l’archivage.
Stockage des données pour l’analyse par un service local ou hébergé par Azure.

Informations de référence sur le stockage Blob Azure

Azure portal
Documentation du stockage Blob Azure
Démarrages rapides
Exemples

Stockage de tables Azure

Stockage Table Azure est un service qui stocke des données NoSQL structurées dans
le cloud et fournit un magasin de clés ou d’attributs reposant sur une conception sans
schéma. Le stockage de table Azure permet de stocker de grandes quantités de
données structurées. Il s’agit d’un magasin de données NoSQL qui accepte les appels
authentifiés provenant de l’intérieur et de l’extérieur du cloud Azure. Les tables Azure
sont idéales pour le stockage des données structurées non relationnelles. Le stockage
de table est généralement utilisé pour :

Stocker des téraoctets de données structurées capables de servir des applications

web.
Stocker des jeux de données ne nécessitant pas de jonctions complexes, de clés
étrangères ni de procédures stockées, et pouvant être dénormalisés pour un accès
rapide.
L’interrogation rapide des données à l’aide d’un index cluster.
Accéder aux données à l’aide du protocole OData et de requêtes LINQ avec les
bibliothèques .NET Windows Communication Foundation (WCF) Data Services.

Vous pouvez utiliser le stockage Table Azure pour stocker et interroger de grands
ensembles de données non relationnelles et structurées. Vos tableaux évoluent à mesure
que la demande augmente.
Informations de référence sur le stockage Table Azure
Azure portal
Documentation Stockage Table Azure
Exemples
Démarrages rapides

Stockage File d’attente Azure

Le service Stockage File d’attente Azure est un service permettant de stocker un grand
nombre de messages. Vous accédez aux messages depuis n’importe où dans le monde
par le biais d’appels authentifiés à l’aide du protocole HTTP ou HTTPS. La taille
maximale d’un message de file d’attente est de 64 Ko. Une file d’attente peut contenir
des millions de messages, dans la limite de la capacité totale d’un compte de stockage.
Les files d’attente sont couramment utilisées pour créer un backlog de travail à traiter de
façon asynchrone.

Informations de référence sur le stockage File d’attente

Azure
Azure portal
Documentation de Stockage File d’attente Azure
Démarrages rapides
Exemples
Réseau de distribution de contenu sur
Azure avec Azure Content Delivery
Network
Article • 08/06/2023

Azure Content Delivery Network offre aux développeurs une solution internationale
pour la distribution rapide de contenu haut débit comme des vidéos, images ou fichiers
statiques aux utilisateurs en mettant en cache leur contenu sur des centaines de points
de présence dans le Monde entier. Content Delivery Network peut également accélérer
le contenu dynamique, qui ne peut pas être mis en cache, pour réduire les temps de
chargement, économiser la bande passante et améliorer la réactivité. Vous bénéficiez de
ces avantages si vous développez ou gérez des sites web ou des applications Mobiles,
ou si vous encodez et distribuez média de diffusion en continu, des logiciels de jeu, des
mises à jour de microprogramme ou des points de terminaison IoT.

Fonctionnalités d’Azure Content Delivery

Network
Utilisez de façon fluide les services Azure tels que les applications web, Media
Services, le stockage et les services cloud.
Gérez facilement les pics de trafic et les charges importantes.
Intégrez à Akamai et Verizon pour créer et adapter la stratégie de distribution de
contenu.
Utilisez l’accélération de site dynamique.
Contrôlez le comportement de mise en cache de Content Delivery Network à l’aide
de règles de mise en cache.
Obtenez la prise en charge de domaines personnalisés HTTPS.
Consultez les journaux de diagnostic Azure pour voir l’analytique principale et
exportez-les vers Stockage Blob, Azure Event Hubs ou Azure Monitor.
Améliorez les performances en comprimant les fichiers.
Utilisez le géofiltrage pour limiter le contenu de Content Delivery Network par
pays ou région.

Informations de référence sur Azure Content

Delivery Network
Azure portal
Documentation Azure Content Delivery Network
Prise en main d’Azure Content Delivery Network
Démarrages rapides
Créer des composants de back-end
mobile avec les services de calcul
Article • 08/11/2023

Chaque application mobile a besoin d’un back-end qui est responsable du stockage des
données, de la logique métier et de la sécurité. La gestion de l’infrastructure pour
héberger et exécuter du code back-end vous oblige à dimensionner, provisionner et
mettre à l’échelle plusieurs serveurs. Vous devez également gérer les mises à jour du
système d’exploitation et le matériel impliqué, ainsi qu’appliquer des correctifs de
sécurité. Vous devez ensuite surveiller les performances, la disponibilité et la tolérance
de panne de tous ces composants d’infrastructure.

L’architecture serverless est très utile pour ce type de scénario, car vous n’avez aucun
serveur à gérer ni aucune mise à jour logicielle ou matérielle associée à gérer.
L’architecture serverless permet aux développeurs d’économiser beaucoup de temps et
de frais, ce qui est synonyme de raccourcissement du Time-to-Market et d’un meilleur
ciblage des énergies envers la création d’applications.

Avantages du calcul
L’abstraction des serveurs signifie que vous n’avez plus à vous soucier de
l’hébergement, de la mise à jour corrective et de la sécurité. Vous pouvez ainsi
vous concentrer uniquement sur le code.
La mise à l’échelle instantanée et efficace garantit le provisionnement automatique
ou à la demande des ressources, quelle que soit l’échelle dont vous avez besoin.
Haute disponibilité et tolérance de panne.
Grâce à la micro-facturation, vous êtes certain d’être facturé uniquement quand
votre code est réellement en cours d’exécution.
Le code s’exécute dans le cloud écrit dans le langage de votre choix.

Utilisez les services suivants pour activer les fonctionnalités de calcul serverless dans vos
applications mobiles.

Azure Functions
Azure Functions est une expérience de calcul pilotée par événements, qui vous
permet d’exécuter du code écrit dans le langage de programmation de votre choix sans
vous soucier des serveurs. Vous n’avez pas besoin de gérer l’application ou
l’infrastructure sur laquelle l’exécuter. Les fonctions sont mises à l’échelle à la demande,
et vous payez uniquement en fonction du temps d’exécution de votre code. Azure
Functions est un excellent moyen d’implémenter une API pour une application mobile.
Les fonctions sont faciles à implémenter et à gérer et sont accessibles via HTTP.

Fonctionnalités clés Azure Functions

Pilotage par événements et scalabilité : vous pouvez utiliser des déclencheurs et
des liaisons pour définir le moment où une fonction est appelée et les données
auxquelles elle se connecte.
Intégration de vos propres dépendances : Azure Functions prenant en charge
NuGet et NPM, vous pouvez utiliser vos bibliothèques préférées.
Sécurité intégrée pour vous permettre de protéger les fonctions déclenchées par
HTTP avec des fournisseurs OAuth tels que Microsoft Entra ID, Facebook, Google,
Twitter et Compte Microsoft.
Intégration simplifiée avec différents services Azure et offres SaaS (software as a
Service).
La flexibilité en matière de développement vous permet de coder vos fonctions
directement dans le portail ou de configurer une intégration continue et de
déployer votre code par le biais de GitHub, Azure DevOps Services et d’autres
outils de développement pris en charge.
Le runtime Azure Functions est open source et disponible sur GitHub .
L’expérience de développement améliorée vous permet de coder, de tester et de
déboguer localement à l’aide de votre éditeur préféré ou d’une interface web facile
à utiliser, avec supervision à l’aide d’outils intégrés et fonctionnalités DevOps
intégrées.
Ensemble de langages de programmation et d’options d’hébergement :
développez à l’aide de C#, [Link], Java, JavaScript ou Python.
Avec le modèle de tarification à l’utilisation, seul le temps passé à exécuter votre
code vous est facturé.

Informations de référence sur Azure Functions

Azure portal
Documentation Azure Functions
Guide du développeur Azure Functions
Guides de démarrage rapide
Exemples

Azure App Service

Avec l’offre Azure App Service , vous pouvez créer et héberger des applications web et
des API RESTful dans le langage de programmation de votre choix sans gérer
l’infrastructure. Elle propose une mise à l’échelle automatique et une haute disponibilité,
prend en charge à la fois Windows et Linux et permet des déploiements automatisés à
partir de GitHub, Azure DevOps ou n’importe quel dépôt Git.

Fonctionnalités clés Azure App Service

Plusieurs langages et frameworks : prise en charge d’[Link], [Link] Core, Java,
Ruby, [Link], PHP ou Python. Vous pouvez également exécuter PowerShell et
d’autres scripts ou exécutables comme services en arrière-plan.
Optimisation DevOps via l’intégration et le déploiement continus avec Azure
DevOps, GitHub, BitBucket, Docker Hub ou Azure Container Registry. Gérez vos
applications dans App Service à l’aide d’Azure PowerShell ou de la CLI
interplateforme.
Mise à l’échelle globale avec une haute disponibilité : effectuez un scale-up ou un
scale-out manuellement ou automatiquement.
Connexion aux plateformes SaaS et données locales : choisissez parmi plus de
50 connecteurs pour des systèmes d’entreprise tels que SAP, des services SaaS tels
que Salesforce et des services Internet tels que Facebook. Accédez aux données
locales à l’aide de connexions hybrides et de réseaux virtuels Azure.
App Service est conforme aux normes ISO, SOC et PCI. Authentifiez les utilisateurs
avec l’ID Microsoft Entra ou avec la connexion pour les réseaux sociaux tels que
Google, Facebook, Twitter et Microsoft. Créez des restrictions par adresse IP et
gérez les identités de service.
Modèles d’application pour choisir parmi une liste complète de modèles
d’application sur la Place de marché Azure, tels que WordPress, Joomla et Drupal.
L’intégration Visual Studio avec les outils dédiés de Visual Studio simplifie le travail
de création, de déploiement et de débogage.

Informations de référence sur Azure App Service

Azure portal
Documentation Azure App Service
Guides de démarrage rapide
Exemples
Tutoriels

Azure Kubernetes Service

Azure Kubernetes Service (AKS) gère votre environnement Kubernetes hébergé. AKS
permet de déployer et de gérer rapidement et facilement des applications
conteneurisées sans expertise d’orchestration de conteneurs. Il élimine également la
charge des opérations en cours et la maintenance. AKS provisionne, met à niveau et met
à l’échelle des ressources à la demande, sans mettre vos applications hors ligne.

Fonctionnalités clés Azure Kubernetes Service

Migrez facilement des applications existantes vers des conteneurs et exécutez-les
dans AKS.
Simplifiez le déploiement et la gestion des applications basées sur des
microservices.
Sécurisez DevOps pour AKS afin d’obtenir un bon compromis entre vitesse et
sécurité, et fournir du code plus rapidement à grande échelle.
Effectuez facilement une mise à l’échelle à l’aide d’AKS et d’Azure Container
Instances pour provisionner des pods dans Container Instances qui démarrent en
quelques secondes.
Déployez et gérez des appareils IoT à la demande.
Entraînez des modèles Machine Learning à l’aide d’outils tels que TensorFlow et
KubeFlow.

Informations de référence sur Azure Kubernetes Service

Azure portal
Documentation sur Azure Kubernetes Service
Guides de démarrage rapide
Tutoriels

Azure Container Instances

Azure Container Instances est une excellente solution pour les scénarios qui peuvent
fonctionner dans des conteneurs isolés, notamment les applications basiques,
automatiser des tâches et créer des travaux. Développez rapidement des applications
sans gérer de machines virtuelles.

Fonctionnalités clés Azure Container Instances

Délais de démarrage plus courts, car Azure Container Instances peut démarrer des
conteneurs dans Azure en quelques secondes, sans avoir à configurer ni gérer des
machines virtuelles.
 Connectivité IP publique et nom DNS personnalisé.
Sécurité de niveau hyperviseur qui garantit que votre application se retrouve aussi
isolée dans un conteneur que dans une machine virtuelle.
Tailles personnalisées pour une utilisation optimale en autorisant les spécifications
exactes des cœurs d’unité centrale et de la mémoire. Vous payez pour ce dont
vous avez besoin et vous êtes facturé immédiatement, pour pouvoir ajuster vos
dépenses selon vos besoins.
Stockage persistant pour récupérer et rendre persistant l’état. Container Instances
offre un montage direct des partages de fichiers Azure.
Conteneurs Linux et Windows planifiés avec la même API.

Informations de référence sur Azure Container Instances

Azure portal
Documentation Azure Container Instances
Guides de démarrage rapide
Exemples
Tutoriels
Créer des applications en temps réel
avec Azure SignalR Service
Article • 08/06/2023

Azure SignalR Service vous permet d'ajouter facilement des fonctionnalités en temps
réel aux applications. Cette fonctionnalité de temps réel permet au service de
transmettre des mises à jour de contenu aux applications mobiles connectées. Ainsi, les
applications sont mises à jour sans avoir à interroger le serveur ni à envoyer de
nouvelles requêtes HTTP de mise à jour.

Fonctionnalités d'Azure SignalR Service

Grâce à sa prise en charge de clients étendue, ce service fonctionne pour un large
éventail de clients, tels que les navigateurs web et mobiles, les applications de
bureau, les processus serveur, les appareils IoT et les consoles de jeu.
Il permet à plusieurs instances de travailler ensemble pour s'adapter à des millions
de connexions d'applications mobiles. Il prend également en charge plusieurs
régions mondiales pour le partitionnement, la haute disponibilité ou la reprise
d’activité après sinistre.
Il offre des API enrichies pour différents modèles de messagerie, afin d'envoyer des
messages à une connexion en particulier, à toutes les connexions ou à un sous-
ensemble de connexions appartenant à un utilisateur spécifique ou qui ont été
placées dans un groupe arbitraire.

Informations de référence sur le service Azure

SignalR
Azure portal
Documentation Azure SignalR Service
Tutoriels
Gestion du code source de l’application
mobile hébergée dans le cloud
Article • 23/10/2023

Le code source hébergé dans le cloud est facilement accessible, quel que soit l’endroit
où vous êtes. Un référentiel central signifie que les membres de l’équipe de
développement peuvent interagir sur la même base de code en chargeant, en modifiant
et en gérant les fichiers de code. L’hébergement cloud nécessite moins de configuration
matérielle que les options locales, ce qui vous permet d’implémenter des solutions de
manière plus simple et plus agile.

Les avantages de l’hébergement du code source dans le cloud sont les suivants :

Stockage central pour afficher et gérer vos données à partir de n’importe où.
Meilleure collaboration pour le code propre er.
Contribuer plus facilement à encourager l’implication .
Versions plus rapides.
Réduction des coûts en ne conservant pas le matériel et l’infrastructure.

GitHub et Azure Repos sont deux options pour héberger le code source et les données
d’application mobile dans le cloud.

GitHub
GitHub est un service d’hébergement de référentiel open source pour les projets de
code dans de nombreux langages différents. GitHub effectue le suivi et aide à résoudre
les différentes modifications de chaque itération de code.

Utilisez des espaces de code pour héberger votre environnement de développement

dans le cloud. Conservez tout votre code en un seul endroit. Les référentiels privés,
publics et open source ont tous des outils permettant d’héberger, de version et de
publier du code.

Passez en revue le code avec des outils de révision intégrés pour que le code passe en
revue une partie essentielle du processus de votre équipe.

Protégez des branches, proposez des modifications et demandez des revues.

Repérez les différences, commentez en contexte et obtenez des commentaires
clairs.
Utilisez les outils de gestion de projet pour coordonner rapidement, rester alignés et
faire plus d’informations.

Voir l’image plus grande du projet.

Utilisez les tableaux de tâches qui sont juste à côté de votre code dans GitHub.
Faites glisser des cartes pour assigner des problèmes ou des demandes de tirage
(pull requests) aux membres de l’équipe.
Définir des jalons pour organiser et suivre la progression.
Écrivez des notes pour capturer des idées utiles qui n’appartiennent pas à un
problème particulier ou à une demande de tirage.

Gérez les utilisateurs et aidez les équipes à croître en utilisant :

Rôles d’utilisateur pour organiser les rôles d’équipe et les autorisations d’accès.
Outils de discussion pour assurer le suivi et l’équipe des conversations.
Recommandations de la communauté pour configurer rapidement de nouveaux
membres d’équipe avec des comptes.

Utilisez GitHub Actions pour connecter tous vos outils et automatiser chaque étape
de votre workflow de développement.

D’autres fonctionnalités GitHub vous permettent de :

Parcourez et marquez des projets populaires pour les suivre.

Découvrez et achetez facilement des outils de communication et d’automatisation
à partir de la Place de marché GitHub.
Étendez votre réseau et tirez des enseignements des travaux de collègues évoluant
dans le même secteur.

Azure Repos
Azure Repos est l’option de contrôle de code source distribuée pour Azure DevOps
Services . Azure Repos offre des référentiels privés ou publics gratuits illimités avec des
révisions de code collaboratives, une gestion avancée des fichiers, une recherche de
code et des stratégies de branche.

Azure Repos s’intègre à d’autres services tels qu’Azure Pipelines et Azure Boards pour
les service de projet de bout en bout. Azure Repos est idéal pour les petits projets ou
pour les grandes organisations qui ont besoin de la prise en charge native d’Azure
Active Directory (Azure AD) et de contrôles de stratégie avancés.

Vous pouvez également utiliser Team Foundation Version Control (TFVC) pour le
contrôle de code source centralisé avec révision de code.
 Azure Repos prend en charge n’importe quel client Git via des webhooks et
l’intégration d’API Git.
Connecter à votre code à partir d’environnements de développement tels que
Xcode, Eclipse, IntelliJ, Android Studio, Visual Studio et Visual Studio Code.
Collaborez pour créer un meilleur code à l’aide de discussions threadées et
d’intégration continue (CI) pour chaque modification.
Utilisez Azure Pipelines ou d’autres outils pour lancer des builds à partir de
demandes de tirage. Configurez des pipelines d’intégration continue/livraison
continue (CI/CD) qui créent, testent et déploient automatiquement votre
application avec chaque demande de tirage terminée.
Utilisez une recherche de code sémantique puissante dans les demandes
d’extraction.
Simplifiez la gestion des accès avec l’intégration native d’Azure AD.
Assurez-vous que la qualité du code avec les stratégies de branche, telles que le
nombre minimal de réviseurs, les exigences relatives aux builds réussies et
l’application de la stratégie de fusion Git.
Intégrer à des outils de gestion de projet Azure Boards .

Étapes suivantes
Guides GitHub
Forum de la communauté GitHub
GitHub Marketplace
Bien démarrer avec Azure Repos
Documentation Azure Repos
Qu’est-ce que DevOps ?
Article • 23/10/2023

Le mot « DevOps » provient d’une combinaison de « Développement » et « Opérations

». DevOps met l’accent sur l’importance de la communication et de la collaboration
entre les développeurs de logiciels et les professionnels de l’informatique de production
tout en automatisant le déploiement de modifications logicielles et d’infrastructure.
DevOps se concentre sur l’adoption de méthodologies agiles et épurées et
l’automatisation des tâches répétitives. L’objectif de DevOps est de réussir les mises en
production d’applications.

Microsoft a un ensemble complet de solutions DevOps disponibles via Azure

DevOps (cloud) et Visual Studio App Center . Ces produits créent un environnement
de travail dans lequel les membres de l’équipe peuvent créer, tester et déployer des
logiciels rapidement, à de brefs intervalles et de manière fiable. Les organisations
peuvent atteindre plus rapidement leurs objectifs grâce à un délai de traitement plus
rapide lors du déploiement de nouvelles fonctionnalités, de correctifs de sécurité et de
résolutions de bogues.

Importance de DevOps
Accélère la totalité du cycle de vie des logiciels, de la validation du code au
déploiement de production.
Permet aux organisations de fournir plus rapidement des mises à jour logicielles et
de sécurité en interne et aux clients.
Vise à réduire les conflits entre les équipes de développement et d’opérations. Les
développeurs se concentrent généralement sur la satisfaction des besoins de
l’entreprise pour ajouter des fonctionnalités et améliorer la facilité d’utilisation des
applications. Les équipes d’opérations se concentrent traditionnellement
davantage sur la stabilité et la sécurité des environnements informatiques.
Confère une plus grande agilité, améliore la réactivité des clients et réduit le délai
de commercialisation.
Accroît l’agilité en réunissant les personnes, le processus et les produits pour
apporter à vos utilisateurs une valeur ajoutée constante.
Entraîne une réduction des coûts lorsque les organisations suivent les pratiques
DevOps. Les organisations sont en mesure d’atteindre leurs objectifs, quelle que
soit leur mission.

Étapes suivantes
Apprenez-en davantage sur les rubriques associées à DevOps mobile :

Génération et intégration continues

Tester des applications mobiles
Livraison continue
Automatisez le cycle de vie de vos
application avec une compilation et une
intégration continues
Article • 08/06/2023

En tant que développeurs, vous écrivez du code que vous archivez dans le référentiel de
code, mais il est possible que les validations qui y sont archivées ne soient pas toujours
cohérentes. Lorsque plusieurs développeurs travaillent sur le même projet, des
problèmes peuvent survenir avec l’intégration. Les équipes peuvent rencontrer des
situations où les choses ne fonctionnent pas, les bogues s’accumulent et le
développement du projet est retardé. Les développeurs doivent attendre que tout le
code logiciel soit créé et testé pour rechercher les erreurs, ce qui rend le processus lent
et moins itératif.

Grâce à la compilation et à l’intégration continues, les développeurs peuvent simplifier

la compilation et le test de leur code, car ils valident leurs modifications dans le
référentiel du code, et ils effectuent aussi les tests et les vérifications dans
l’environnement de compilation. De cette façon, ils exécutent toujours des tests sur leur
code. Toutes les modifications apportées au code source sont générées de façon
continue chaque fois qu’une validation est effectuée dans le référentiel. Lors de chaque
archivage, le serveur d’intégration continue (CI) valide et exécute tout test créé par le
développeur. Si les tests ne sont pas réussis, le code est renvoyé pour des modifications
supplémentaires. De cette façon, les développeurs n’interrompent pas les builds créées.
Ils n’ont pas non plus besoin d’exécuter tous les tests localement sur leurs ordinateurs,
ce qui augmente la productivité des développeurs.

Principaux avantages
Automatisez vos builds, tests et déploiements pour les pipelines.
Détectez les bogues et résolvez les problèmes tôt pour garantir des taux de mise
en production plus élevés.
Validez le code plus fréquemment et compilez rapidement des applications.
Bénéficiez de plus de flexibilité pour modifier rapidement le code sans aucun
problème.
Atteignez un délai de commercialisation plus rapide pour que seul du code de
bonne qualité franchisse toutes les étapes du processus.
Apportez des modifications de code mineures plus efficacement, car les petits
morceaux de code sont intégrés en une fois.
 Augmentez la transparence et la responsabilité de l’équipe pour obtenir des
commentaires en continu de vos clients ainsi que de votre équipe.

Utilisez les services suivants pour activer le pipeline d’intégration continue dans vos
applications mobiles.

Visual Studio App Center

App Center Build vous aide à créer à l’aide d’une infrastructure cloud sécurisée des
applications natives et multiplateformes sur lesquelles votre équipe travaille. Vous
pouvez facilement connecter votre référentiel dans Visual Studio App Center et
commencer à créer votre application dans le cloud à chaque validation. Vous n’avez pas
à vous soucier de la configuration locale des serveurs de builds, de configurations
compliquées et de code qui s’appuie sur la machine d’un collègue mais pas sur la vôtre.

Avec la puissance ajoutée des services Visual Studio App Center, vous pouvez continuer
à automatiser votre flux de travail. Vous pouvez publier automatiquement des builds
vers des testeurs et des magasins d’applications publics avec App Center Distribute.
Vous pouvez également exécuter des tests automatisés de l’interface utilisateur sur des
milliers de configurations d’appareil et de système d’exploitation réelles dans le cloud
avec App Center Test.

Fonctionnalités de Visual Studio App Center

Configurez l’intégration continue en quelques minutes et créez des applications
plus fréquemment et plus rapidement.
S’intégrer à GitHub, BitBucket, Azure DevOps et GitLab.
Créez des builds rapides et sécurisées sur des machines gérées et hébergées dans
le cloud.
Autorisez vos builds à lancer le test et vérifiez si l’application est compilée dans des
appareils iOS et Android réels.
Obtenez la prise en charge native et multiplateforme pour iOS, Android, macOS,
Windows, Xamarin et React Native.
Personnalisez vos builds en ajoutant des scripts après clonage, avant génération et
après génération.

Informations de référence sur Visual Studio App Center

S’inscrire sur Visual Studio App Center
Prise en main d’App Center Build
Azure Pipelines
Azure Pipelines dans Azure DevOps est un service complet d’intégration continue (CI)
et de livraison continue (CD) qui fonctionne avec votre fournisseur Git préféré. Il peut
être déployé sur la plupart des services cloud les plus populaires, y compris Azure. Vous
pouvez commencer avec votre code sur GitHub, GitHub Enterprise Server, GitLab,
Bitbucket Cloud ou Azure Repos. Vous pouvez ensuite automatiser la génération, le test
et le déploiement de votre code sur Microsoft Azure, Google Cloud Platform, ou
Amazon Web Services (AWS).

Fonctionnalités d’Azure Pipelines

Expérience simplifiée basée sur les tâches pour la configuration d’un serveur CI :
Configurez un serveur CI pour les applications mobiles natives (Android, iOS et
Windows) et multiplateformes (Xamarin, Cordova et React Native), en plus des
technologies serveur basées ou non sur Microsoft ([Link], Java).
Tous les langages, plateformes et cloud : Compiler, tester et déployer des
applications [Link], Python, Java, PHP, Ruby, Go, C/C++, C#, Android et iOS.
Exécutez en parallèle sur Linux, macOS et Windows. Déployez sur des fournisseurs
de cloud comme Azure, AWS et Google Cloud Platform. Distribuez des applications
mobiles via des canaux bêta et des App Stores.
Prise en charge native des conteneurs : Créez facilement des conteneurs et
envoyez-les à n’importe quel registre. Déployez des conteneurs sur des hôtes
indépendants ou sur Kubernetes.
Workflows avancés : Créez facilement des chaînes de génération et des builds
multiphases. Bénéficiez de la prise en charge de YAML, de l’intégration des tests,
des portes de mise en production, de la création de rapports, etc.
Extensible : Utilisez un éventail de tâches de génération, de test et de déploiement
créées par la communauté, dont des centaines d’extensions allant de Slack à
SonarCloud. Vous pouvez même déployer à partir d’autres systèmes CI, tels que
Jenkins. Les webhooks et API REST peuvent faciliter l’intégration.
Builds hébergées dans le cloud gratuitement : Ces builds sont disponibles pour
les référentiels publics et privés.
Prise en charge du déploiement vers d’autres fournisseurs cloud : Les
fournisseurs incluent AWS et Google Cloud Platform.

Informations de référence sur Azure Pipelines

Guide Prise en main d’Azure Pipelines
Prise en main d’Azure DevOps
 Démarrages rapides

Pour vous aider à choisir le bon service pour les builds de votre application, consultez
l’article qui compare App Center Build et Azure Pipelines.
Effectuer des tests automatisés sur des
milliers d’appareils mobiles
simultanément
Article • 08/06/2023

Les tests peuvent s’avérer difficiles et de plus en plus complexes pour diverses raisons,
telles que la fragmentation des appareils, la complexité des applications, les cycles de
mise en production rapides, les sessions courtes et les attentes élevées des utilisateurs.
Vous devez régulièrement veiller à fournir des applications testées minutieusement qui
offrent une expérience client exceptionnelle. Le test n’est pas une tâche facile et il est
déconseillé de demander au développeur de passer du temps à tester manuellement
chaque version.

Les défis relatifs aux tests peuvent relevés traités efficacement. Vous pouvez tester des
applications mobiles sur un large éventail d’appareils à l’aide de tests automatisés. Vous
pouvez utiliser des services cloud pour accélérer la mise en production d’applications
mobiles et résoudre les problèmes de test qui ajoutent des goulots d’étranglement au
développement et au déploiement d’applications.

Importance des tests automatisés

Augmentez votre couverture de test en ciblant différents facteurs de forme, types
de connectivité et versions de système d’exploitation.
Gagnez du temps, de l’argent et des ressources en effectuant les tests sur
différents appareils et systèmes d’exploitation.
Améliorez la précision en évitant les tests manuels répétitifs et passez plus de
temps à créer des tests logiciels automatisés et à gérer les fonctionnalités
complexes.
Testez en continu, analysez les performances des applications, recherchez et
corrigez les problèmes avant que les utilisateurs n’y soient confrontés, puis mettez
rapidement en production.
Offrez des applications de haute qualité en veillant à ce que vos clients sur un
large éventail d’appareils bénéficient d’une expérience optimale.

Visual Studio App Center

App Center Test est un service basé sur le cloud qui vous permet d’exécuter des tests
d’interface utilisateur automatisés sur des milliers d’appareils réels dans le cloud sur
Android et iOS pour des applications mobiles natives et hybrides. Avec plus de
2 000 appareils, vous pouvez écrire des scripts de test qui peuvent être exécutés
automatiquement pour faciliter les tests.

Fonctionnalités clés de Visual Studio App Center

Tests qui s’exécutent sur des appareils réels qui ne sont pas rootés ni jailbreakés,
en fournissant ainsi la meilleure approximation des environnements de vos
utilisateurs.
Les captures d’écran sont automatiquement capturées et jointes à chaque étape
de test. Elles peuvent être affichées côte à côte pour tous les appareils ciblés dans
une série de tests.
Les journaux d’appareil pour tous les appareils cibles dans une série de tests et les
traces de la pile pour les étapes de test qui ont échoué.
Des séries de tests simultanées sur plusieurs appareils pour améliorer le délai
d’obtention de résultats.
Prise en charge de frameworks de test connus comme Appium (Java avec JUnit)
pour Android et iOS, Espresso (Java) pour Android, Calabash pour Android et iOS,
[Link] pour Android et iOS, et XCUITest pour iOS.
Prise en charge des plateformes iOS, Android, Xamarin et React Native.

Informations de référence sur Visual Studio App Center

S’inscrire sur Visual Studio App Center
Prise en main d’App Center Test
Automatiser le déploiement et la mise
en production de vos applications
mobiles avec des services de livraison
continue
Article • 08/06/2023

En tant que développeurs, vous écrivez du code que vous archivez dans le référentiel de
code, mais il est possible que les validations qui y sont archivées ne soient pas toujours
cohérentes. Lorsque plusieurs développeurs travaillent sur le même projet, des
problèmes peuvent survenir avec l’intégration. Les équipes peuvent rencontrer des
situations où les choses ne fonctionnent pas, les bogues s’accumulent et le
développement du projet est retardé. Les développeurs doivent attendre que tout le
code logiciel soit créé et testé pour rechercher les erreurs, ce qui rend le processus lent
et moins itératif.

La livraison continue permet d’automatiser le déploiement et la mise en production de

vos applications mobiles. Peu importe si vous distribuez l’application à un groupe de
testeurs ou d’employés d’entreprise (pour effectuer des tests bêta), ou à un magasin
d’applications (à des fins de production). La livraison continue rend les déploiements
moins risqués et encourage des itérations rapides. Vous pouvez également publier de
nouvelles modifications pour vos clients de manière continue.

Distribuer des fichiers binaires d’application à

des bêta-testeurs
L’exécution de tests bêta sur votre application mobile est l’une des étapes critiques du
processus de développement d’applications. Elle vous aide à détecter précocement des
bogues et autres problèmes dans votre application. Les commentaires améliorent la
qualité de votre application lorsque vous préparez celle-ci pour une utilisation en
production.

Utilisez les services suivants pour activer un pipeline de livraison continue dans vos
applications mobiles.

Visual Studio App Center Distribute

Le service App Center Distribute est un outil permettant aux développeurs de publier
rapidement des builds sur des appareils. Avec une expérience complète de portail
d’installation, le service App Center Distribute est une solution puissante pour la
distribution à des testeurs d’application bêta. Il s’agit également d’une alternative
pratique à la distribution via des magasins d’applications publics. Les développeurs
peuvent automatiser davantage leur workflow de distribution avec App Center Build et
les intégrations des App Stores publics.

Fonctionnalités de Visual Studio App Center Distribute

Distribuez votre application à des bêta-testeurs et des utilisateurs et vérifiez que

tous vos testeurs utilisent la dernière version de votre application.
Informez les testeurs des nouvelles mises en production sans qu’ils doivent
relancer le flux de téléchargement.
Gérez des groupes de distribution pour les différentes versions de votre
application.
Distribuez aux magasins :
Apple
Google Play
Intune
Bénéficiez d’une prise en charge de plateforme pour iOS, Android, macOS, tvOS,
Xamarin, React Native, Unity et Cordova.
Inscrivez automatiquement les appareils iOS dans votre profil de provisionnement.

Informations de référence sur Visual Studio App Center Distribute

S’inscrire sur Visual Studio App Center

Prise en main d’App Center Distribute

Azure Pipelines
Azure Pipelines est un service complet d’intégration continue (CI) et de livraison
continue (CD) qui fonctionne avec votre fournisseur Git préféré. La solution Azure
Pipelines peut être déployée sur la plupart des services cloud de premier plan, tels que
les services Azure. Vous pouvez commencer avec votre code sur GitHub, GitHub
Enterprise Server, GitLab, Bitbucket Cloud ou Azure Repos. Vous pouvez ensuite
automatiser la génération, le test et le déploiement de votre code sur Microsoft Azure,
Google Cloud Platform, ou Amazon Web Services (AWS).

Fonctionnalités Azure Pipelines

 Expérience simplifiée basée sur les tâches pour la configuration d’un serveur CI :
Configurez un serveur CI pour les applications mobiles natives (Android, iOS et
Windows) et multiplateformes (Xamarin, Cordova et React Native).
Tout langage, plateforme et cloud : Compilez, testez et déployez des applications
[Link], Python, Java, PHP, Ruby, Go, C/C++, C#, Android et iOS. Exécutez en
parallèle sur Linux, macOS et Windows. Déployez sur des fournisseurs de cloud
comme Azure, AWS et Google Cloud Platform. Distribuez des applications mobiles
via des canaux bêta et des App Stores.
Prise en charge native des conteneurs : Créez facilement des conteneurs et
envoyez-les à n’importe quel registre. Déployez des conteneurs sur des hôtes
indépendants ou sur Kubernetes.
Flux de travail et fonctionnalités avancés : Créez facilement des chaînes de
génération et des builds multiphases. Bénéficiez de la prise en charge de YAML, de
l’intégration des tests, des portes de mise en production, de la création de
rapports, etc.
Extensible : Utilisez un éventail de tâches de génération, de test et de déploiement
créées par la communauté, dont des centaines d’extensions allant de Slack à
SonarCloud. Vous pouvez même déployer à partir d’autres systèmes CI, tels que
Jenkins. Les webhooks et API REST peuvent faciliter l’intégration.
Builds hébergées dans le cloud gratuitement : Ces builds sont disponibles pour
les référentiels publics et privés.
Prise en charge du déploiement vers d’autres fournisseurs cloud : Les
fournisseurs incluent AWS et Google Cloud Platform.

Informations de référence sur Azure Pipelines

Guide Prise en main d’Azure Pipelines
Prise en main d’Azure DevOps

Distribuer votre application directement aux

App Stores
Une fois que votre application est prête à être utilisée en production et que vous
souhaitez l’utiliser publiquement, vous devez l’envoyer à des magasins d’applications à
partir desquels des clients peuvent la télécharger. Il existe plusieurs façons de distribuer
votre application directement à des magasins d’applications.

Magasins Visual Studio App Center Distribute

Le service App Center Distribute vous permet de publier vos applications mobiles
directement dans des magasins d’applications. Une fois que votre application est prête
pour téléchargement par les utilisateurs finaux, vous pouvez publier ses fichiers binaires
directement à partir du portail App Center.

Vous pouvez distribuer directement à :

Apple App Store

Google Play Store
Microsoft Intune

Apple App Store

Dans le magasin d’applications développé et géré par Apple, les utilisateurs peuvent
parcourir et télécharger des applications développées pour les appareils iOS, MacOS,
WatchOS et tvOS. Les développeurs doivent envoyer leurs applications iOS à l’Apple
App Store pour une utilisation publique.

Google Play
Google Play est le magasin d’applications officiel pour le système d’exploitation
Android. Les utilisateurs peuvent le parcourir et télécharger des applications
développées pour les appareils Android, qui sont publiées via Google.

Intune
Microsoft Intune est un service cloud dans l’espace de gestion de la mobilité
d’entreprise, qui peut améliorer la productivité de vos employés, tout en protégeant les
données de votre entreprise. Avec Intune, vous pouvez effectuer les opérations
suivantes :

Gérer les appareils mobiles et PC que vos employés utilisent pour accéder aux
données d’entreprise.
Gérer les applications mobiles que vos employés utilisent.
Protéger les informations de votre entreprise grâce au contrôle de la manière dont
vos employés y accèdent et les partagent.
Vérifier que les appareils et applications sont conformes aux exigences de sécurité
de l’entreprise.
Déployer des mises à jour directement sur les
appareils des utilisateurs

CodePush
Le service CodePush dans App Center permet aux développeurs Apache Cordova et
React Native de déployer des mises à jour d’applications mobiles directement sur les
appareils de leurs utilisateurs. Il fait office de référentiel central sur lequel les
développeurs peuvent publier certaines mises à jour telles que JavaScript, HTML, CSS
ainsi que des modifications d’image. Les applications peuvent ensuite rechercher des
mises à jour dans le référentiel à l’aide de kits de développement logiciel (SDK) clients
fournis. De cette façon, vous pouvez avoir un modèle d’engagement plus déterministe
et direct avec vos utilisateurs, tandis que vous résolvez des bogues ou ajoutez des
fonctionnalités mineures. Vous n’êtes pas obligé de régénérer ou redistribuer un fichier
binaire via des magasins d’applications publics.

Fonctionnalités clés de CodePush

Les développeurs Cordova et React Native peuvent déployer des mises à jour
d’applications mobiles directement sur les appareils de leurs utilisateurs sans
devoir les publier dans magasin d’applications.
Ces fonctionnalités sont utiles pour la résolution des bogues, ainsi que l’ajout et la
suppression de fonctionnalités mineures sans devoir recréer et redistribuer de
fichier binaire via des magasins.

Informations de référence sur CodePush

S’inscrire sur Visual Studio App Center
Prise en main de CodePush dans App Center
Interface CLI CodePush
Analyser et comprendre l'utilisation des
applications mobiles
Article • 08/06/2023

Savez-vous réellement comment vos utilisateurs utilisent vos applications ? Combien

d'utilisateurs actifs votre application compte-t-elle, et comment l'utilisation évolue-t-elle
au fil du temps ? Quelles fonctionnalités utilisent-ils, et quelles sont les plus utilisées ?
Où ces utilisateurs sont-ils basés ? Combien d’utilisateurs utilisent la version la plus
récente de l’application ? Il est important de comprendre toutes ces questions afin de
pouvoir faire de votre application un succès. Pour répondre à ce genre de questions sur
l’analyse de l’utilisation, vous devez recueillir des données d’utilisation à partir de vos
applications.

Plus vous explorerez les données, plus vous serez en mesure de trouver des moyens
d'améliorer votre application et de satisfaire vos utilisateurs. Il est important d'utiliser les
données pour trouver des insights exploitables et maintenir la satisfaction des
utilisateurs.

Importance de l'analyse
Étudiez vos utilisateurs, la façon dont ils interagissent avec votre application et ce
qui les attire, de manière à pouvoir affiner votre application et fournir de superbes
expériences pour développer votre activité.
Suivez vos métriques d'utilisation pour prendre des décisions avisées sur la façon
de commercialiser votre application et de mieux servir vos clients.
Mesurez les performances de votre application.
Découvrez quelles parties de votre application génèrent de la valeur et accroissent
les performances.
Bénéficiez d'insights axés sur les données sur les aspects liés à la conservation et à
l'attrition clients.

Utilisez les services suivants pour activer l’analyse des applications mobiles.

Visual Studio App Center

Les données d'analyse de l'App Center vous permettent d'élargir votre public en vous
concentrant sur l'essentiel. Elles offrent des rapports et des insights détaillés sur les
sessions utilisateur, les principaux appareils, les versions du système d'exploitation et
l'analyse comportementale. Créez facilement des événements personnalisés pour
effectuer un suivi de tout ce qui vous intéresse avec les fonctionnalités d’analyse
d’application extensive.

Fonctionnalités de Visual Studio App Center

Suivez gratuitement les modèles d’utilisation, l’adoption par les utilisateurs et
d’autres métriques d’engagement.
Identifiez les tendances, le comportement des utilisateurs et l’engagement par le
biais d’événements personnalisés.
Métriques prêtes à l'emploi et insights détaillés sur l'utilisation des applications
(quotidienne, hebdomadaire, mensuelle), les sessions, les propriétés des appareils
et les données démographiques des utilisateurs au sein d'un tableau de bord
unique.
Exportation en continu de toutes vos données d'analyse de l'App Center vers
Azure pour une conservation illimitée. Prise en charge de l'exportation des
données d'analyse de l'App Center vers Stockage Blob Azure et Azure Application
Insights.
Intégrez Azure Application Insights pour obtenir des insights encore plus
approfondis, tels que la rétention, l’analyse en entonnoir et les cohortes.
Intégration de SDK en une ligne pour bien démarrer en quelques minutes.
Bénéficiez d’une prise en charge de plateforme pour iOS, Android, macOS, tvOS,
Xamarin, React Native, Unity et Cordova.

Informations de référence sur Visual Studio App Center

S’inscrire auprès d’App Center
Bien démarrer avec l’analyse App Center

Azure Monitor
Azure Monitor inclut Application Insights, qui fournit des outils permettant de recueillir
et d'analyser des données de télémétrie afin d'optimiser les performances et de
superviser votre application mobile. Vous pouvez tirer parti d'Application Insights en
utilisant les données d'analyse de l'App Center pour configurer l'exportation vers
Application Insights. Application Insights peut interroger, segmenter, filtrer et analyser
les données de télémétrie des événements personnalisés à partir de vos applications,
au-delà des outils d'analyse fournis par App Center.

Fonctionnalités d’Azure Monitor

 Interrogez les données de télémétrie de vos événements personnalisés.
Filtrez les données de télémétrie des événements grâce à de puissantes
fonctionnalités de segmentation.
Analysez les modèles de conversion, de conservation et de navigation dans votre
application. Vous pouvez utiliser :
Des entonnoirs, pour analyser et surveiller les taux de conversion
La conservation, pour analyser dans quelle mesure votre application conserve
les utilisateurs au fil du temps
Des classeurs, pour combiner des visualisations et du texte dans un rapport
partageable
Des cohortes, pour nommer et enregistrer des groupes d'utilisateurs ou
d'événements spécifiques afin qu'ils puissent être facilement référencés à partir
d'autres outils d'analyse

Informations de référence sur Azure Monitor

Azure portal
Analyser votre application mobile avec App Center et Application Insights
Utiliser les données d'analyse de l'App Center avec Application Insights

Azure PlayFab
Azure PlayFab offre une plateforme back-end complète avec des services de jeu, des
analyses en temps réel et les LiveOps dont vous avez besoin pour créer des jeux de
premier ordre connectés au cloud. Ces services réduisent les obstacles au lancement
pour les développeurs de jeux. Ils offrent aux grands comme aux petits studios des
solutions de développement rentables qui évoluent avec leurs jeux. Ces services peuvent
aider les studios à attirer des joueurs, à les fidéliser et à les faire payer. PlayFab permet
aux développeurs d'utiliser le cloud intelligent pour créer et exploiter des jeux, analyser
des données de jeu et améliorer l'expérience de jeu globale.

Fonctionnalités d’Azure PlayFab

Supervision avec des tableaux de bord en temps réel.
Évaluation des performances de votre jeu grâce aux métriques les plus
importantes.
Résumés des performances quotidiennes et mensuelles de votre jeu avec des
rapports générés automatiquement. Vous pouvez consulter les rapports dans le
Gestionnaire de jeux, et les télécharger ou les recevoir quotidiennement dans votre
boîte de réception.
 Tests A/B afin d'exécuter des expérimentations et de déterminer le paramètre
optimal pour une variable particulière.
Segmentation destinée aux joueurs pour définir des regroupements automatisés
de joueurs.

Informations de référence sur Azure PlayFab

Portail PlayFab
Analyse
Démarrages rapides
Superviser en temps réel les défaillances
et les erreurs dans votre application
mobile
Article • 08/06/2023

Une fois que votre application est utilisée par des milliers d’utilisateurs, elle peut
présenter des bogues. Vos utilisateurs peuvent se retrouver face à des défaillances
d’application inattendues. L’utilisateur, lui, ne veut qu’une chose : une application qui
fonctionne de manière fiable. Les applications sujettes aux bogues et aux défaillances
n’offrent pas une bonne expérience utilisateur. Les utilisateurs déçus désinstallent
l’application, font des commentaires peu élogieux ou critiquent et se plaignent de leur
expérience en public.

Il est essentiel de comprendre le comportement des applications mobiles en cas de

défaillance dans le monde réel. Votre travail en tant que développeur ne s’arrête pas au
stade de la publication dans les magasins d’applications. Il est important de superviser
et de mesurer constamment les performances de l’application pour s’assurer de sa
stabilité et maintenir le niveau de satisfaction de l’utilisateur. Ce dont vous avez besoin,
c’est un moyen de superviser votre application. Vous avez besoin de comprendre ce qui
s’est passé en cas de problème, afin de pouvoir hiérarchiser et résoudre les problèmes
critiques pour vos besoins métier.

Importance de la supervision des défaillances

En tant que développeur, vous devez :

connaître les détails sur l’intégrité de votre application et la façon dont elle
fonctionne pour les utilisateurs ;
rechercher la cause racine et les raisons de la défaillance survenue sur l’appareil
d’un utilisateur ;
être proactif pour trier les problèmes et résoudre les défaillances afin de rendre
votre application stable ;
créer de meilleures applications et itérer plus rapidement pour offrir une
expérience utilisateur exceptionnelle afin que les utilisateurs continuent d’utiliser
votre application ;

tirer parti du service suivant pour superviser votre application en cas de défaillance,
diagnostiquer les problèmes et les résoudre rapidement pour offrir une expérience
d’application mobile stable et de haute qualité.
Visual Studio App Center
Le service App Center Diagnostics vous aide à superviser l’intégrité de votre application.
Il fournit des insights détaillés pour vous permettre de comprendre ce qui s’est passé et
la raison de l’échec de l’application. App Center Diagnostics vous aide également à
hiérarchiser et à gérer les rapports d’échec.

Fonctionnalités de Visual Studio App Center

Regroupement intelligent, automatique et en temps réel des défaillances et erreurs
pour mettre en évidence les problèmes les plus graves et les informations
pertinentes dont vous avez besoin.
Données de rapports des appels de procédure et d’appareils complètes qui
fournissent le contexte et la clarté nécessaires pour mieux identifier la cause racine.
Fonctionnalité de recherche performante pour vous aider à trouver les problèmes
qui vous intéressent le plus.
Intégration d’Analytics qui vous permet de comprendre les comportements de
votre utilisateur et de voir les événements qui sont à l’origine d’une défaillance.
Propriétés personnalisées, ID d’utilisateur et pièces jointes vous permettant de
mieux contextualiser afin de faciliter le diagnostic des problèmes.
Intégrations d’alertes, de notifications et de suivi des bogues vous permettant de
rester au fait des défaillances nouvelles et inattendues qui affectent vos
utilisateurs.
Intégration unique et brève du SDK pour commencer à utiliser ce service en
quelques minutes.
Prise en charge des plateformes iOS, Android, macOS, tvOS, Xamarin, React Native,
Unity, Cordova, WPF et WinForms.

Informations de référence sur Visual Studio App Center

S’inscrire sur Visual Studio App Center
Prise en main d’App Center Diagnostics
Collaborer avec les utilisateurs de vos
applications en envoyant des
notifications Push
Article • 08/06/2023

Que vous génériez des applications grand public ou professionnelles, vous souhaitez
que les utilisateurs puissent utiliser activement votre application. Il vous arrive souvent
de vouloir partager de nouvelles infos, des mises à jour de jeux, des offres intéressantes,
des mises à jour de produits ou toute autre information pertinente avec vos utilisateurs.
Pour améliorer la collaboration avec vos utilisateurs et qu’ils continuent d’utiliser votre
application, vous avez besoin d’un moyen de communiquer avec eux en temps réel.

Les notifications Push offrent un moyen rapide et efficace de communiquer avec les
utilisateurs de vos applications. Vous pouvez contacter les utilisateurs au bon moment et
leur faire parvenir les informations souhaitées, généralement dans une fenêtre
contextuelle ou une boîte de dialogue sur un appareil mobile, indépendamment de ce
qu’ils sont en train de faire.

Valeur des notifications Push

Les notifications Push fournissent une valeur ajoutée aux utilisateurs et aux entreprises.

Les entreprises peuvent :

Communiquer directement avec les utilisateurs en envoyant des messages sur la

plateforme prise en charge au moment approprié.
Renforcer la collaboration des utilisateurs en leur envoyant des mises à jour et des
rappels en temps réel, en les encourageant à utiliser régulièrement l’application.
Fidéliser les utilisateurs et relancer les utilisateurs inactifs qui ont téléchargé
l’application, mais qui ne l’utilisent pas, pour qu’ils redeviennent actifs.
Augmenter les taux de conversion en analysant le comportement de l’utilisateur,
en segmentant les utilisateurs et en tirant parti des campagnes basées sur les
notifications Push mobiles.
Promouvoir les produits et services en envoyant des messages Push et des mises à
jour en temps utile aux utilisateurs.
Cibler les utilisateurs en envoyant des messages Push personnalisés.

Pour les utilisateurs des applications, les notifications Push :

Présentent une valeur et des informations en temps réel.

 Rappellent aux utilisateurs d’utiliser l’application.

Utilisez les services suivants pour activer les notifications Push dans vos applications
mobiles.

Azure Notification Hubs

Notification Hubs offre un moteur Push facile à utiliser et mis à l’échelle. Vous pouvez
l’utiliser pour envoyer des notifications vers n’importe quelle plateforme et à partir de
n’importe quel service back end, dans le cloud ou en local.

Fonctionnalités d’Azure Notification Hubs

Envoyez des notifications Push vers n’importe quelle plateforme à partir de
n’importe quel service back-end, dans le cloud ou en local.
Diffusez rapidement des notifications Push à des millions d’appareils mobiles avec
un seul appel d’API.
Personnalisez les notifications Push selon le client, la langue et le lieu.
Définissez et notifiez dynamiquement des segments de clientèle.
Effectuez une mise à l’échelle instantanée vers des millions d’appareils mobiles.
Obtenez la prise en charge des plateformes iOS, Android, Windows, Kindle et
Baidu.

Informations de référence sur Azure Notification Hubs

Azure portal
Bien démarrer avec Azure Notification Hubs
Démarrages rapides
Exemples
Tutoriel : Envoyer des notifications Push
à des applications [Link] à
l’aide d’Azure Notification Hubs par le
biais d’un service back-end
Article • 08/06/2023

Télécharger l’exemple

Dans ce tutoriel, vous allez utiliser Azure Notification Hubs pour envoyer des
notifications Push à une application [Link] ciblant Android et iOS.

Une API web [Link] Core back-end est utilisée pour gérer l’inscription d’appareils
pour le client à l’aide de l’approche d’installation la plus récente et la plus appropriée. Le
service envoie également des notifications Push en mode multiplateforme.

Ces opérations sont gérées à l’aide du SDK Notification Hubs pour les opérations back-
end . Vous trouverez plus d’informations sur l’approche globale dans la documentation
sur l’inscription à partir de votre back-end d’application.

Ce tutoriel explique comment effectuer les opérations suivantes :

＂ Configurer Push Notification Services et Azure Notification Hubs

＂ Créez une application back-end d’API web [Link] Core
＂ Créer une application [Link] multiplateforme
＂ Configurer le projet Android natif pour les notifications Push
＂ Configurer le projet iOS natif pour les notifications Push
＂ Tester la solution

Prérequis
Pour suivre ce tutoriel, vous avez besoin des éléments suivants :

Un abonnement Azure où vous pouvez créer et gérer les ressources.

Un Mac avec Visual Studio pour Mac installé ou un PC exécutant Visual
Studio 2019 .
Les utilisateurs Visual Studio 2019 doivent également avoir les charges de travail
Développement mobile avec .NET et [Link] et développement web installées.
La capacité à exécuter l’application sur Android (appareils physiques ou
émulateurs) ou iOS (appareils physiques uniquement)
Pour Android, vous devez disposer des éléments suivants :

Un appareil physique de développeur déverrouillé ou un émulateur (exécutant l’API

26 et ultérieur avec Google Play Services installé)

Pour iOS, vous devez disposer des éléments suivants :

Un compte de développeur Apple actif.

Un appareil iOS physique inscrit sur votre compte de développeur (exécutant iOS
13.0 et versions ultérieures).
Un certificat de développement .p12 installé dans votre keychain vous
permettant d’exécuter une application sur un appareil physique .

７ Notes

Le simulateur iOS ne prend pas en charge les notifications distantes. Un appareil

physique est donc nécessaire lors de l’exploration de cet exemple sur iOS.
Toutefois, vous n’avez pas besoin d’exécuter l’application à la fois sur Android et
sur iOS pour suivre ce tutoriel.

Vous pouvez effectuer les étapes de cet exemple sans expérience préalable. Toutefois,
une connaissance des éléments suivants vous sera utile :

Portail des développeurs Azure

[Link] Core et API web
Console Google Firebase
Microsoft Azure et Envoyer des notifications Push vers des applications iOS à
l’aide d’Azure Notification Hubs.
Xamarin et [Link] .

） Important

Les étapes fournies sont propres à Visual Studio pour Mac . Il est possible de
suivre en utilisant Visual Studio 2019 mais il peut y avoir des différences. Par
exemple, les descriptions de l’interface utilisateur et des workflows, les noms de
modèles, la configuration de l’environnement, etc.

Configurer Push Notification Services et Azure

Notification Hubs
Dans cette section, vous allez configurer Firebase Cloud Messaging (FCM) et Apple
Push Notification Services (APNS) . Ensuite, vous allez créer et configurer un hub de
notification pour travailler avec ces services.

Créer un projet Firebase et activer Firebase Cloud

Messaging pour Android
1. Connectez-vous à la console Firebase . Créez un projet Firebase en entrant
PushDemo comme nom du projet.

７ Notes

Un nom unique sera généré pour vous. Par défaut, il s’agit d’une variante en
minuscules du nom que vous avez fourni plus un nombre généré, séparés par
un tiret. Vous pouvez le changer si vous voulez, du moment qu’il reste unique
au niveau global.

2. Une fois le projet créé, sélectionnez Add Firebase to your Android app (Ajouter
Firebase à votre application Android).

3. Dans la page Add Firebase to your Android app (Ajouter Firebase à votre
application Android), effectuez les étapes suivantes :

a. Pour Android package name (Nom du package Android), entrez un nom pour
votre package. Par exemple : com.<organization_identifier>.<package_name> .
b. Sélectionnez Inscrire une application.

c. Sélectionnez Télécharger le fichier [Link]. Ensuite, enregistrez le

fichier dans un dossier local pour l’utiliser ultérieurement, puis sélectionnez
Suivant.
 d. Sélectionnez Suivant.

e. Sélectionnez Continue to console (Poursuivre dans la console).

７ Notes

Si le bouton Continue to console n’est pas activé, en raison de la

vérification de l’installation, choisissez Skip this step (Ignorer cette étape).

4. Dans la console Firebase, sélectionnez la roue dentée associée à votre projet.

Ensuite, sélectionnez Project Settings (Paramètres du projet).
 ７ Notes

Si vous n’avez pas téléchargé le fichier [Link], vous pouvez le

faire sur cette page.

5. Basculez vers l’onglet Messagerie cloud en haut. Copiez et enregistrez la clé du

serveur pour une utilisation ultérieure. Cette valeur est utilisée pour configurer
votre hub de notification.

Inscrire votre application iOS pour les notifications Push

Pour envoyer des notifications Push vers une application iOS, inscrivez votre application
auprès d’Apple ainsi que pour les notifications Push.

1. Si vous n’avez pas encore inscrit votre application, accédez au portail de

provisionnement iOS dans le Centre pour développeurs Apple. Connectez-vous
au portail avec votre ID Apple, accédez à Certificats, Profils d’identificateurs&,
puis sélectionnez Identificateurs. Cliquez sur + pour inscrire une nouvelle
application.
2. Dans l’écran Register a New Identifier (Inscrire un nouvel identifiant), sélectionnez
la case d’option App IDs (ID d’application). Sélectionnez Continuer.

3. Mettez à jour les trois valeurs suivantes pour votre nouvelle application, puis
sélectionnez Continue :

Description : tapez un nom descriptif pour votre application.

ID d’offre groupée : entrez un ID de bundle au format

com.organization_identifier<>.<>product_name comme indiqué dans le
Guide de distribution d’applications . Dans la capture d’écran ci-dessous, la
valeur mobcat est utilisée comme identificateur d’organisation, tandis que la
valeur PushDemo correspond au nom du produit.
 Notifications Push : cochez l’option Notifications Push dans la section
Capabilities (Fonctionnalités).

L’ID de votre application est généré et vous êtes invité à confirmer les
informations. Sélectionnez Continue (Continuer), puis Register (Inscrire) pour
confirmer le nouvel ID d’application.

Après avoir sélectionné S’inscrire, vous voyez le nouvel ID d’application

affiché comme élément de ligne dans la page Certificats, identifiants et
profils.

4. Dans la page Certificats, Identificateurs & Profils , sous Identificateurs, recherchez

l’élément de ligne ID d’application que vous avez créé. Sélectionnez ensuite sa
ligne pour afficher l’écran Modifier votre configuration d’ID d’application.

Création d’un certificat pour Notification Hubs

Un certificat est nécessaire pour permettre au hub de notification de fonctionner avec
les services de notification Push Apple (APNS) et peut être fourni de deux manières :
 1. Création d’un certificat Push p12 qui peut être chargé directement sur le hub de
notification (l’approche d’origine)

2. Création d’un certificat p8 qui peut être utilisé pour l’authentification basée sur un
jeton (l’approche la plus récente et recommandée)

L’approche la plus récente présente un certain nombre d’avantages, comme indiqué

dans Authentification basée sur un jeton (HTTP/2) pour APNS. Moins d’étapes sont
nécessaires, mais elles sont également obligatoires pour des scénarios spécifiques.
Toutefois, des étapes ont été fournies pour les deux approches, l’une comme l’autre
pouvant être utilisée dans le cadre de ce tutoriel.

OPTION 1 : Création d’un certificat Push p12 qui peut être chargé
directement sur le hub de notification

1. Sur votre Mac, exécutez l’outil Trousseaux d’accès. Vous pouvez l’ouvrir à partir du
dossier Utilitaires ou du dossier Autre sur Launchpad.

2. Sélectionnez Trousseaux d’accès, développez Assistant de certification, puis

cliquez sur Demander un certificat à une autorité de certification.

７ Notes

Par défaut, Trousseaux d’accès sélectionne le premier élément de la liste. Cela

peut poser problème si vous êtes dans la catégorie Certificats et que Apple
Worldwide Developer Relations Certification Authority (Autorité de
certification des relations des développeurs dans le monde entier) ne figure
pas comme premier élément dans la liste. Veillez à disposer d’un élément
non-clé, ou que la clé Apple Worldwide Developer Relations Certification
Authority est sélectionnée, avant de générer la demande de signature de
certificat (CSR).
3. Sélectionnez votre adresse e-mail d’utilisateur, entrez votre nom commun, veillez
à spécifier Enregistré sur le disque, puis sélectionnez Continuer. Laissez le champ
Adresse de messagerie d’autorité de certification vide, car il n’est pas requis.

4. Entrez un nom pour le fichier de demande de signature de certificat dans

Enregistrer sous, sélectionnez l’emplacement dans Où, puis sélectionnez
Enregistrer.
 Cette action enregistre le fichier CSR à l’emplacement sélectionné. L’emplacement
par défaut est Bureau. Notez l’emplacement choisi pour ce fichier.

5. Dans la page Certificats, profils d’identificateurs & dans le portail

d’approvisionnement iOS , faites défiler jusqu’à l’option Notifications Push
cochée, puis sélectionnez Configurer pour créer le certificat.

6. La fenêtre Apple Push Notification service TLS/SSL Certificates (Certificats

TLS/SSL du service Apple Push Notification) s’affiche. Sélectionnez le bouton
Create Certificate (Créer un certificat) sous la section Development TLS/SSL
Certificate (Certificat de développement TLS/SSL).
 L’écran Create a new Certificate (Créer un certificat) s’affiche.

７ Notes

Ce didacticiel utilise un certificat de développement. Le même processus est

utilisé lors de l’inscription d’un certificat de production. Assurez-vous
simplement que vous utilisez le même type de certificat quand vous envoyez
des notifications.

7. Sélectionnez Choose File (Choisir un fichier), accédez à l’emplacement où vous

avez enregistré le fichier de demande de signature de certificat, puis double-
cliquez sur le nom du certificat à charger. Sélectionnez Continuer.

8. Une fois que le portail a créé un certificat, sélectionnez le bouton Télécharger.

Enregistrez le certificat et notez son emplacement pour le retrouver facilement.

Le certificat est téléchargé et enregistré sur votre ordinateur dans le dossier

Téléchargements.

７ Notes
 Par défaut, le certificat de développement téléchargé se nomme
aps_development.cer.

9. Double-cliquez sur le certificat Push téléchargé aps_development.cer. Cette

opération installe le nouveau certificat dans le Trousseau, comme indiqué dans
l’image suivante :

７ Notes

Bien que le nom de votre certificat puisse être différent, il portera le préfixe
Apple Development iOS Push Notification Services et se verra associer
l’identificateur de bundle approprié.

10. Dans Trousseau d’accès, utilisez Ctrl + clic sur le certificat push que vous avez créé
dans la catégorie Certificats. Sélectionnez Exporter, nommez le fichier,
sélectionnez le format p12, puis sélectionnez Enregistrer.
 Vous pouvez choisir de protéger le certificat par un mot de passe, mais ce dernier
est facultatif. Cliquez sur OK si vous souhaitez ignorer l’étape de création du mot
de passe. Notez le nom du fichier et l’emplacement du certificat p12 exporté. Ces
informations sont nécessaires pour activer l’authentification avec APNs.

７ Notes

Le nom et l’emplacement de votre fichier p12 peuvent être différents de ceux

montrés dans ce tutoriel.

OPTION 2 : Création d’un certificat p8 qui peut être utilisé pour

l’authentification basée sur un jeton

1. Prenez note des détails suivants :

Préfixe d’ID d’application (ID d’équipe)

ID de bundle

2. De retour dans Certificats, identifiants et profils, cliquez sur Clés.

７ Notes

Si vous disposez déjà d’une clé configurée pour APNS, vous pouvez réutiliser
le certificat p8 que vous avez téléchargé juste après l’avoir créée. Dans ce cas,
vous pouvez ignorer les étapes 3 à 5.

3. Cliquez sur le bouton + (ou sur le bouton Créer une clé) pour créer une clé.
 4. Fournissez une valeur appropriée pour Nom de clé, activez l’option Apple Push
Notification Service (APNS) , puis cliquez sur Continuer, puis sur Inscrire dans
l’écran suivant.

5. Cliquez sur Télécharger, puis déplacez le fichier p8 (préfixé avec AuthKey_ ) vers un
répertoire local sécurisé, puis cliquez sur Terminé.

７ Notes

Veillez à conserver votre fichier p8 dans un emplacement sécurisé (et à

enregistrer une sauvegarde). Une fois votre clé téléchargée, elle ne peut pas
être retéléchargée, car la copie du serveur est supprimée.

6. Dans Clés, cliquez sur la clé que vous avez créée (ou une clé existante si vous avez
choisi de l’utiliser à la place).

7. Notez la valeur de l’ID de clé.

8. Ouvrez votre certificat .p8 dans l’application appropriée de votre choix, par
exemple Visual Studio Code . Notez la valeur de la clé (comprise entre -----
BEGIN PRIVATE KEY----- et -----END PRIVATE KEY----- ).

-----BEGIN PRIVATE KEY-----

<key_value>
-----END PRIVATE KEY-----

７ Notes

Il s’agit de la valeur de jeton qui sera utilisée pour configurer le hub de

notification.

À la fin de ces étapes, vous devez disposer des informations suivantes, dont vous vous
servirez dans Configurer votre hub de notification avec des informations APNS :

ID de l’équipe (voir l’étape 1)

ID de bundle (voir l’étape 1)
ID de clé (voir l’étape 7)
Valeur de jeton (valeur de clé p8 obtenue à l’étape 8)

Création d’un profil d’approvisionnement pour

l’application
1. Revenez au portail d’approvisionnement iOS , sélectionnez Certificats,
identifiants et profils, sélectionnez Profils dans le menu de gauche, puis
sélectionnez + pour créer un profil. L’écran Register a New Provisioning Profile
(Inscrire un nouveau profil de provisionnement) s’affiche.

2. Sélectionnez iOS App Development (Développement d’application iOS) sous

Development (Développement) comme type de profil de provisionnement, puis
sélectionnez Continue (Continuer).

3. Ensuite, dans la liste déroulante App ID, sélectionnez l’ID d’application que vous
avez créé, puis sélectionnez Continue.

4. Dans la fenêtre Select certificates (Sélectionner des certificats), sélectionnez le

certificat de développement utilisé pour la signature de code, puis sélectionnez
Continuer.

７ Notes

Ce certificat n’est pas le certificat Push que vous avez créé à l’étape
précédente. Il s’agit de votre certificat de développement. S’il n’en existe pas,
vous devez le créer, car il s’agit d’un prérequis pour ce tutoriel. Vous pouvez
 créer des certificats de développeur dans le portail des développeurs
Apple , par le biais de Xcode ou dans Visual Studio.

5. Revenez à la page Certificats, identifiants et profils, sélectionnez Profils dans le

menu de gauche, puis sélectionnez + pour créer un profil. L’écran Register a New
Provisioning Profile (Inscrire un nouveau profil de provisionnement) s’affiche.

6. Dans la fenêtre Select certificates (Sélectionner des certificats), sélectionnez le

certificat de développement que vous avez créé. Sélectionnez Continuer.

7. Sélectionnez les appareils à utiliser pour le test, puis sélectionnez Continue.

8. Pour finir, choisissez un nom pour le profil dans Provisioning Profile Name (Nom
du profil de provisionnement), puis sélectionnez Generate (Générer).

9. Une fois le profil de provisionnement créé, sélectionnez Télécharger. Notez son

emplacement pour le retrouver facilement.

10. Accédez à l’emplacement du profil de provisionnement, puis double-cliquez sur le

profil pour l’installer sur votre machine de développement.

Création d’un concentrateur de notification

Dans cette section, vous allez créer un hub de notifications et configurer
l’authentification avec APNS. Vous pouvez utiliser un certificat Push p12 ou
l’authentification basée sur un jeton. Si vous souhaitez utiliser un hub de notification
que vous avez déjà créé, vous pouvez passer directement à l’étape 5.

1. Connectez-vous à Azure .

2. Cliquez sur Créer une ressource, recherchez et choisissez Hub de notification, puis
cliquez sur Créer.

3. Mettez à jour les champs suivants, puis cliquez sur Créer :

 DÉTAILS DE BASE

Abonnement : choisissez l’abonnement cible dans la liste déroulante.

Groupe de ressources : créez un groupe de ressources ou (sélectionnez un groupe
existant).

DÉTAILS DE L’ESPACE DE NOMS

Espace de noms du hub de notification : entrez un nom global unique pour

l’espace de noms du hub de notification.

７ Notes

Vérifiez que l’option Créer est sélectionnée pour ce champ.

DÉTAILS DU HUB DE NOTIFICATIONS

Hub de notification : entrez un nom pour le hub de notifications.

Emplacement : choisissez un emplacement approprié dans la liste déroulante.
Niveau tarifaire : conservez l’option par défaut Gratuit.

７ Notes

Sauf si vous avez atteint le nombre maximal de hubs au niveau gratuit.

4. Une fois que le hub de notifications a été provisionné, accédez à cette ressource.

5. Accédez à votre nouveau hub de notifications.

6. Sélectionnez Stratégies d’accès dans la liste (sous GÉRER).

7. Notez les valeurs de Nom de la stratégie ainsi que les valeurs de Chaîne de
connexion correspondantes.

Configurer votre hub de notification avec des

informations APNS
Sous Services de notification, sélectionnez Apple, puis suivez les étapes appropriées en
fonction de l’approche que vous avez choisie dans la section Création d’un certificat
pour Notification Hubs.

７ Notes
 Utilisez uniquement le mode Production ou Application si vous souhaitez envoyer
des notifications Push aux utilisateurs ayant acheté votre application dans le Store.

OPTION 1 : Utilisation d’un certificat Push .p12

1. Sélectionnez Certificate.

2. Sélectionnez l’icône du fichier.

3. Sélectionnez le fichier .p12 exporté précédemment, puis sélectionnez Ouvrir.

4. S’il y a lieu, entrez le mot de passe correct.

5. Sélectionnez le mode Bac à sable.

6. Sélectionnez Enregistrer.

OPTION 2 : Utilisation de l’authentification basée sur un

jeton
1. Sélectionnez Jeton.

2. Entrez les valeurs suivantes déjà en votre possession :

ID de clé
ID de bundle
ID de l’équipe
Jeton

3. Choisissez Bac à sable.

4. Sélectionnez Enregistrer.

Configurer votre hub de notification avec des

informations FCM
1. Sélectionnez Google (GCM/FCM) dans la section Paramètres du menu de gauche.
2. Entrez la clé du serveur que vous avez notée à partir de la console Google
Firebase.
3. Sélectionnez Enregistrer dans la barre d’outils.
Créer une application back-end d’API web
[Link] Core
Dans cette section, vous allez créer le back-end d’API web [Link] Core pour gérer
l’inscription d’appareil et l’envoi de notifications à l’application mobile [Link].

Créer un projet web

1. Dans Visual Studio, sélectionnez Fichier>Nouvelle solution.

2. Sélectionnez .NET Core>Application>[Link] Core>API>Suivant.

3. Dans la boîte de dialogue Configurer votre nouvelle API web [Link] Core,
sélectionnez .NET Core 3.1 comme Framework cible.

4. Entrez PushDemoApi comme Nom du projet, puis sélectionnez Créer.

5. Démarrez le débogage (Commande + Entrée) pour tester l’application basée sur

un modèle.

７ Notes

L’application basée sur un modèle est configurée pour utiliser le

WeatherForecastController en tant que launchUrl. Ce dernier est défini dans
Propriétés>[Link].

Si un message indiquant qu’un certificat de développement non valide a été

trouvé apparaît :

a. Cliquez sur Oui pour accepter d’exécuter l’outil « dotnet dev-certs https »
afin de résoudre ce problème. L’outil « dotnet dev-certs https » vous invite
ensuite à entrer un mot de passe pour le certificat et le mot de passe pour
votre trousseau.

b. Cliquez sur Oui quand vous êtes invité à installer et à approuver le

nouveau certificat, puis entrez le mot de passe de votre trousseau.

6. Développez le dossier Controllers, puis supprimez [Link].

7. Supprimez [Link].
 8. Configurez les valeurs de configuration locales à l’aide de l’outil Secret Manager.
Le découplage des secrets de la solution garantit qu’ils ne se trouvent pas dans le
contrôle de code source. Ouvrez Terminal, puis accédez au répertoire du fichier
projet et exécutez les commandes suivantes :

Bash

dotnet user-secrets init

dotnet user-secrets set "NotificationHub:Name" <value>
dotnet user-secrets set "NotificationHub:ConnectionString" <value>

Remplacez les valeurs d’espace réservé par vos propres valeurs de nom de hub de
notification et de chaîne de connexion. Vous les avez notées dans la section Créer
un hub de notification. Sinon, vous pouvez les rechercher dans Azure .

NotificationHub:Name :
Consultez Nom dans le résumé Bases en haut de Vue d’ensemble.

NotificationHub:ConnectionString :
Consultez DefaultFullSharedAccessSignature dans Stratégies d’accès.

７ Notes

Pour les scénarios de production, vous pouvez envisager des options telles
qu’Azure KeyVault pour stocker la chaîne de connexion de manière
sécurisée. Par souci de simplicité, les secrets sont ajoutés aux paramètres
d’application d’Azure App Service .

Authentifier les clients à l’aide d’une clé API (facultatif)

Les clés API ne sont pas aussi sécurisées que les jetons, mais sont suffisantes dans le
cadre de ce tutoriel. Une clé API peut être facilement configurée via le middleware
(intergiciel) [Link].

1. Ajoutez la clé API aux valeurs de configuration locales.

Bash

dotnet user-secrets set "Authentication:ApiKey" <value>

７ Notes
 Vous devez remplacer la valeur d’espace réservé par la vôtre et en prendre
note.

2. Utilisez Ctrl + clic sur le projet PushDemoApi, choisissez Nouveau dossier dans le
menu Ajouter, puis cliquez sur Ajouter en utilisant Authentication comme Nom de
dossier.

3. Utilisez Ctrl + clic sur le dossier Authentication, puis choisissez Nouveau fichier
dans le menu Ajouter.

4. Sélectionnez Général>Classe vide, entrez [Link] pour le Nom, puis

cliquez sur Nouveau en ajoutant l’implémentation suivante.

C#

using [Link];

namespace [Link]
{
public class ApiKeyAuthOptions : AuthenticationSchemeOptions
{
public const string DefaultScheme = "ApiKey";
public string Scheme => DefaultScheme;
public string ApiKey { get; set; }
}
}

5. Ajoutez une autre Classe vide au dossier Authentication appelée

[Link], puis ajoutez l’implémentation suivante.

C#

using System;
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];

namespace [Link]
{
public class ApiKeyAuthHandler :
AuthenticationHandler<ApiKeyAuthOptions>
{
const string ApiKeyIdentifier = "apikey";
 public ApiKeyAuthHandler(
IOptionsMonitor<ApiKeyAuthOptions> options,
ILoggerFactory logger,
UrlEncoder encoder,
ISystemClock clock)
: base(options, logger, encoder, clock) {}

protected override Task<AuthenticateResult>

HandleAuthenticateAsync()
{
string key = [Link];

if ([Link][ApiKeyIdentifier].Any())
{
key =
[Link][ApiKeyIdentifier].FirstOrDefault();
}
else if ([Link](ApiKeyIdentifier))
{
if ([Link](ApiKeyIdentifier, out var
queryKey))
key = queryKey;
}

if ([Link](key))
return [Link]([Link]("No api
key provided"));

if (![Link](key, [Link],
[Link]))
return [Link]([Link]("Invalid
api key."));

var identities = new List<ClaimsIdentity> {

new ClaimsIdentity("ApiKeyIdentity")
};

var ticket = new AuthenticationTicket(

new ClaimsPrincipal(identities), [Link]);

return [Link]([Link](ticket));
}
}
}

７ Notes

Un gestionnaire d’authentification est un type qui implémente le

comportement d’un schéma, dans ce cas un modèle de clé API personnalisé.
6. Ajoutez une autre Classe vide au dossier Authentication appelée
[Link], puis ajoutez l’implémentation suivante.

C#

using System;
using [Link];

namespace [Link]
{
public static class AuthenticationBuilderExtensions
{
public static AuthenticationBuilder AddApiKeyAuth(
this AuthenticationBuilder builder,
Action<ApiKeyAuthOptions> configureOptions)
{
return builder
.AddScheme<ApiKeyAuthOptions, ApiKeyAuthHandler>(
[Link],
configureOptions);
}
}
}

７ Notes

Cette méthode d’extension simplifie le code de configuration du middleware

dans [Link] ce qui le rend plus lisible et généralement plus facile à suivre.

7. Dans [Link], mettez à jour la méthode ConfigureServices pour configurer

l’authentification de la clé API sous l’appel à la méthode [Link].

C#

using [Link];
using [Link];
using [Link];

public void ConfigureServices(IServiceCollection services)

{
[Link]();

[Link](options =>
{
[Link] =
[Link];
[Link] =
[Link];
 }).AddApiKeyAuth([Link]("Authentication").Bind);
}

8. Toujours dans [Link], mettez à jour la méthode Configure pour appeler les
méthodes d’extension UseAuthentication et UseAuthorization sur
l’IApplicationBuilder de l’application. Assurez-vous que ces méthodes sont
appelées après UseRouting et avant [Link].

C#

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)

{
if ([Link]())
{
[Link]();
}

[Link]();

[Link]();

[Link]();

[Link]();

[Link](endpoints =>
{
[Link]();
});
}

７ Notes

L’appel d’UseAuthentication inscrit le middleware qui utilise les schémas

d’authentification enregistrés (à partir de ConfigureServices). Elle doit être
appelée avant tout middleware qui dépend de l’authentification d’utilisateurs.

Ajouter des dépendances et configurer des services

[Link] Core prend en charge le modèle de conception logicielle d’injection de
dépendances, technique qui permet d’obtenir une inversion de contrôle entre les classes
et leurs dépendances.

L’utilisation du hub de notification et du SDK Notification Hubs pour les opérations de

back-end est encapsulée dans un service. Le service est inscrit et mis à disposition par
le biais d’une abstraction appropriée.

1. Utilisez Ctrl + clic sur le dossier Dependencies, puis choisissez Gérer les packages
NuGet... .

2. Recherchez [Link] et assurez-vous qu’il est activé.

3. Cliquez sur Ajouter des packages, puis cliquez sur Accepter quand vous êtes invité
à accepter les termes du contrat de licence.

4. Utilisez Ctrl + clic sur le projet PushDemoApi, choisissez Nouveau dossier dans le
menu Ajouter, puis cliquez sur Ajouter en utilisant Models comme Nom de
dossier.

5. Utilisez Ctrl + clic sur le dossier Models, puis choisissez Nouveau fichier dans le
menu Ajouter.

6. Sélectionnez Général>Classe vide, entrez [Link] pour le Nom, puis

cliquez sur Nouveau en ajoutant l’implémentation suivante.

C#

namespace [Link]
{
public class PushTemplates
{
public class Generic
{
public const string Android = "{ \"notification\": {
\"title\" : \"PushDemo\", \"body\" : \"$(alertMessage)\"}, \"data\" : {
\"action\" : \"$(alertAction)\" } }";
public const string iOS = "{ \"aps\" : {\"alert\" :
\"$(alertMessage)\"}, \"action\" : \"$(alertAction)\" }";
}

public class Silent

{
public const string Android = "{ \"data\" : {\"message\" :
\"$(alertMessage)\", \"action\" : \"$(alertAction)\"} }";
public const string iOS = "{ \"aps\" : {\"content-
available\" : 1, \"apns-priority\": 5, \"sound\" : \"\", \"badge\" :
0}, \"message\" : \"$(alertMessage)\", \"action\" : \"$(alertAction)\"
}";
}
}
}

７ Notes
 Cette classe contient les charges utiles de notification sous forme de jetons
pour les notifications génériques et silencieuses requises par ce scénario. Les
charges utiles sont définies en dehors de l’installation pour permettre
l’expérimentation sans avoir à mettre à jour les installations existantes via le
service. La gestion des modifications apportées aux installations de cette
façon n’entre pas dans le cadre de ce tutoriel. Pour la production, envisagez
des modèles personnalisés.

7. Ajoutez une autre Classe vide au dossier Models appelée [Link], puis
ajoutez l’implémentation suivante.

C#

using [Link];
using [Link];

namespace [Link]
{
public class DeviceInstallation
{
[Required]
public string InstallationId { get; set; }

[Required]
public string Platform { get; set; }

[Required]
public string PushChannel { get; set; }

public IList<string> Tags { get; set; } = [Link]<string>

();
}
}

8. Ajoutez une autre Classe vide au dossier Models appelée [Link],

puis ajoutez l’implémentation suivante.

C#

using System;

namespace [Link]
{
public class NotificationRequest
{
public string Text { get; set; }
public string Action { get; set; }
public string[] Tags { get; set; } = [Link]<string>();
public bool Silent { get; set; }
 }
}

9. Ajoutez une autre Classe vide au dossier Models appelée

[Link], puis ajoutez l’implémentation suivante.

C#

using [Link];

namespace [Link]
{
public class NotificationHubOptions
{
[Required]
public string Name { get; set; }

[Required]
public string ConnectionString { get; set; }
}
}

10. Ajoutez au projet PushDemoApi un nouveau dossier appelé Services.

11. Ajoutez une Interface vide au dossier Services appelée [Link], puis
ajoutez l’implémentation suivante.

C#

using [Link];
using [Link];
using [Link];

namespace [Link]
{
public interface INotificationService
{
Task<bool> CreateOrUpdateInstallationAsync(DeviceInstallation
deviceInstallation, CancellationToken token);
Task<bool> DeleteInstallationByIdAsync(string installationId,
CancellationToken token);
Task<bool> RequestNotificationAsync(NotificationRequest
notificationRequest, CancellationToken token);
}
}

12. Ajoutez au dossier Services une Classe vide appelée [Link],

puis ajoutez le code suivant pour implémenter l’interface INotificationService :
C#

using System;
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];

namespace [Link]
{
public class NotificationHubService : INotificationService
{
readonly NotificationHubClient _hub;
readonly Dictionary<string, NotificationPlatform>
_installationPlatform;
readonly ILogger<NotificationHubService> _logger;

public NotificationHubService(IOptions<NotificationHubOptions>
options, ILogger<NotificationHubService> logger)
{
_logger = logger;
_hub =
[Link](
[Link],
[Link]);

_installationPlatform = new Dictionary<string,

NotificationPlatform>
{
{ nameof([Link]).ToLower(),
[Link] },
{ nameof([Link]).ToLower(),
[Link] }
};
}

public async Task<bool>

CreateOrUpdateInstallationAsync(DeviceInstallation deviceInstallation,
CancellationToken token)
{
if
([Link](deviceInstallation?.InstallationId) ||
[Link](deviceInstallation?.Platform)
||

[Link](deviceInstallation?.PushChannel))
return false;

var installation = new Installation()

{
 InstallationId = [Link],
PushChannel = [Link],
Tags = [Link]
};

if
(_installationPlatform.TryGetValue([Link], out var
platform))
[Link] = platform;
else
return false;

try
{
await
_hub.CreateOrUpdateInstallationAsync(installation, token);
}
catch
{
return false;
}

return true;
}

public async Task<bool> DeleteInstallationByIdAsync(string

installationId, CancellationToken token)
{
if ([Link](installationId))
return false;

try
{
await _hub.DeleteInstallationAsync(installationId,
token);
}
catch
{
return false;
}

return true;
}

public async Task<bool>

RequestNotificationAsync(NotificationRequest notificationRequest,
CancellationToken token)
{
if (([Link] &&
[Link](notificationRequest?.Action))
||
(![Link] &&
([Link](notificationRequest?.Text))
||
[Link](notificationRequest?.Action)))
return false;

var androidPushTemplate = [Link] ?

[Link] :
[Link];

var iOSPushTemplate = [Link] ?

[Link] :
[Link];

var androidPayload = PrepareNotificationPayload(

androidPushTemplate,
[Link],
[Link]);

var iOSPayload = PrepareNotificationPayload(

iOSPushTemplate,
[Link],
[Link]);

try
{
if ([Link] == 0)
{
// This will broadcast to all users registered in
the notification hub
await
SendPlatformNotificationsAsync(androidPayload, iOSPayload, token);
}
else if ([Link] <= 20)
{
await
SendPlatformNotificationsAsync(androidPayload, iOSPayload,
[Link], token);
}
else
{
var notificationTasks = [Link]
.Select((value, index) => (value, index))
.GroupBy(g => [Link] / 20, i => [Link])
.Select(tags =>
SendPlatformNotificationsAsync(androidPayload, iOSPayload, tags,
token));

await [Link](notificationTasks);
}

return true;
}
catch (Exception e)
{
_logger.LogError(e, "Unexpected error sending
notification");
return false;
 }
}

string PrepareNotificationPayload(string template, string text,

string action) => template
.Replace("$(alertMessage)", text,
[Link])
.Replace("$(alertAction)", action,
[Link]);

Task SendPlatformNotificationsAsync(string androidPayload,

string iOSPayload, CancellationToken token)
{
var sendTasks = new Task[]
{
_hub.SendFcmNativeNotificationAsync(androidPayload,
token),
_hub.SendAppleNativeNotificationAsync(iOSPayload,
token)
};

return [Link](sendTasks);
}

Task SendPlatformNotificationsAsync(string androidPayload,

string iOSPayload, IEnumerable<string> tags, CancellationToken token)
{
var sendTasks = new Task[]
{
_hub.SendFcmNativeNotificationAsync(androidPayload,
tags, token),
_hub.SendAppleNativeNotificationAsync(iOSPayload, tags,
token)
};

return [Link](sendTasks);
}
}
}

７ Notes

L’expression d’étiquette fournie à SendTemplateNotificationAsync est limitée

à 20 étiquettes. Elle est limitée à 6 pour la plupart des opérateurs, mais
l’expression contient uniquement des opérateurs OU (||) dans ce cas. S’il y a
plus de 20 étiquettes dans la demande, elles doivent être réparties en
plusieurs demandes. Pour plus d’informations, consultez la documentation
Routage et expressions d’étiquette.
 13. Dans [Link], mettez à jour la méthode ConfigureServices pour ajouter
NotificationHubsService en tant qu’implémentation singleton
d’INotificationService.

C#

using [Link];
using [Link];

public void ConfigureServices(IServiceCollection services)

{
...

[Link]<INotificationService, NotificationHubService>
();

[Link]<NotificationHubOptions>()
.Configure([Link]("NotificationHub").Bind)
.ValidateDataAnnotations();
}

Créer l’API des notifications

1. Utilisez Ctrl + clic sur le dossier Controllers, puis choisissez Nouveau fichier dans
le menu Ajouter.

2. Sélectionnez [Link] Core>Classe de contrôleur d’API web, entrez

NotificationsController comme Nom, puis cliquez sur Nouveau.

７ Notes

Si vous utilisez Visual Studio 2019 , choisissez le modèle Contrôleur d’API

avec actions de lecture/écriture.

3. Ajoutez les espaces de nom suivants en haut du fichier.

C#

using [Link];
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];
4. Mettez à jour le contrôleur basé sur un modèle pour le faire dériver de
ControllerBase et le décorer avec l’attribut ApiController.

C#

[ApiController]
[Route("api/[controller]")]
public class NotificationsController : ControllerBase
{
// Templated methods here
}

７ Notes

La classe de base Controller prend en charge les vues, mais cela n’est pas
nécessaire dans ce cas et controllerBase peut donc être utilisé à la place. Si
vous utilisez Visual Studio 2019 , vous pouvez ignorer cette étape.

5. Si vous avez choisi d’effectuer la section Authentifier les clients à l’aide d’une clé
API, vous devez décorer NotificationsController avec l’attribut Authorize
également.

C#

[Authorize]

6. Mettez à jour le constructeur pour accepter l’instance inscrite

d’INotificationService en tant qu’argument et assignez-la à un membre readonly.

C#

readonly INotificationService _notificationService;

public NotificationsController(INotificationService
notificationService)
{
_notificationService = notificationService;
}

7. Dans [Link] (dans le dossier Propriétés ), remplacez launchUrl par

weatherforecast api/notifications pour qu’il corresponde à l’URL spécifiée dans

l’attribut RegistrationsControllerRoute .
 8. Démarrer le débogage (commande + Entrée) pour vérifier que l’application utilise
le nouveau NotificationsController et retourne un état 401 Non autorisé.

７ Notes

Visual Studio risque de ne pas lancer automatiquement l’application dans le

navigateur. Vous allez dorénavant utiliser Postman pour tester l’API.

9. Sous un nouvel onglet Postman , définissez la demande sur GET. Entrez l’adresse
ci-dessous en remplaçant l’espace réservé <applicationUrl> par l’applicationUrl
https trouvée dans Propriétés>[Link].

Bash

<applicationUrl>/api/notifications

７ Notes

La valeur applicationUrl doit être « [Link] » pour le profil par

défaut. Si vous utilisez IIS (par défaut dans Visual Studio 2019 sur
Windows), vous devez utiliser la valeur applicationUrl spécifiée dans l’élément
iisSettings à la place. Vous recevrez une réponse 404 si l’adresse est
incorrecte.

10. Si vous avez choisi d’effectuer la section Authentifier les clients à l’aide d’une clé
API, veillez à configurer les en-têtes de demande pour inclure votre valeur apikey.

Clé Valeur

apikey <your_api_key>

11. Cliquez sur le bouton Envoyer.

７ Notes

Vous devez recevoir un état 200 OK avec du contenu JSON.

Si vous recevez un avertissement Vérification du certificat SSL, vous pouvez

désactiver le paramètre Postman de vérification de certificat SSL de la
demande dans les Paramètres.
12. Dans [Link], remplacez les méthodes de classe basées sur un
modèle par le code suivant.

C#

[HttpPut]
[Route("installations")]
[ProducesResponseType((int)[Link])]
[ProducesResponseType((int)[Link])]
[ProducesResponseType((int)[Link])]
public async Task<IActionResult> UpdateInstallation(
[Required]DeviceInstallation deviceInstallation)
{
var success = await _notificationService
.CreateOrUpdateInstallationAsync(deviceInstallation,
[Link]);

if (!success)
return new UnprocessableEntityResult();

return new OkResult();

}

[HttpDelete()]
[Route("installations/{installationId}")]
[ProducesResponseType((int)[Link])]
[ProducesResponseType((int)[Link])]
[ProducesResponseType((int)[Link])]
public async Task<ActionResult> DeleteInstallation(
[Required][FromRoute]string installationId)
{
var success = await _notificationService
.DeleteInstallationByIdAsync(installationId,
[Link]);

if (!success)
return new UnprocessableEntityResult();

return new OkResult();

}

[HttpPost]
[Route("requests")]
[ProducesResponseType((int)[Link])]
[ProducesResponseType((int)[Link])]
[ProducesResponseType((int)[Link])]
public async Task<IActionResult> RequestPush(
[Required]NotificationRequest notificationRequest)
{
if (([Link] &&
[Link](notificationRequest?.Action)) ||
(![Link] &&
[Link](notificationRequest?.Text)))
return new BadRequestResult();
 var success = await _notificationService
.RequestNotificationAsync(notificationRequest,
[Link]);

if (!success)
return new UnprocessableEntityResult();

return new OkResult();

}

Créer l’application API

Vous créez maintenant une application API dans Azure App Service pour héberger le
service back-end.

1. Connectez-vous au portail Azure .

2. Cliquez sur Créer une ressource, recherchez et choisissez Application API, puis
cliquez sur Créer.

3. Mettez à jour les champs suivants, puis cliquez sur Créer.

Nom de l’application :
entrez un nom global unique pour l’application API.

Abonnement :
Choisissez l’Abonnement cible dans lequel vous avez créé le hub de notification.

Groupe de ressources :
Choisissez le Groupe de ressources cible dans lequel vous avez créé le hub de
notification.

Plan App Service/Emplacement :

Créez un plan App Service.

７ Notes

Passez de l’option par défaut à un plan qui comprend la prise en charge de

SSL. Sinon, vous devrez prendre les mesures appropriées lors de l’utilisation
de l’application mobile pour empêcher le blocage des demandes http.

Application Insights :
Conservez l’option suggérée (une nouvelle ressource sera créée avec ce nom) ou
choisissez une ressource existante.
 4. Une fois l’application API provisionnée, accédez à cette ressource.

5. Notez la propriété URL dans le résumé Bases en haut de la Vue d’ensemble. Cette
URL représente le point de terminaison back-end qui sera utilisé plus loin dans ce
tutoriel.

７ Notes

L’URL utilise le nom de l’application API que vous avez spécifié

précédemment, avec le format [Link] .

6. Sélectionnez Configuration dans la liste (sous Paramètres).

7. Pour chacun des paramètres ci-dessous, cliquez sur Nouveau paramètre

d’application afin d’entrer le Nom et une Valeur, puis cliquez sur OK.

Nom Valeur

Authentication:ApiKey <api_key_value>

NotificationHub:Name <hub_name_value>

NotificationHub:ConnectionString <hub_connection_string_value>

７ Notes

Ce sont les mêmes paramètres que ceux que vous avez définis dans les
paramètres utilisateur. Vous devez être en mesure de les reprendre. Le
paramètre Authentication:ApiKey est uniquement obligatoire si vous avez
choisi d’effectuer la section Authentifier les clients à l’aide d’une clé API.
Pour les scénarios de production, vous pouvez envisager des options telles
qu’Azure KeyVault . Ceux-ci ont été ajoutés en tant que paramètres
d’application pour des raisons de simplicité dans ce cas.

8. Une fois tous les paramètres d’application ajoutés, cliquez sur Enregistrer, puis
Continuer.

Publier le service back-end

Ensuite, vous déployez l’application sur l’application API afin de la rendre accessible à
tous les appareils.
 ７ Notes

Les étapes suivantes sont spécifiques à Visual Studio pour Mac . Si vous utilisez
Visual Studio 2019 sur Windows, le flux de publication sera différent. Consultez
Publier sur Azure App Service sur Windows.

1. Si ce n’est déjà fait, modifiez votre configuration de Debug en Release.

2. Utilisez Ctrl + Clic sur le projet PushDemoApi, puis choisissez Publier sur Azure...
dans le menu Publier.

3. Suivez le processus d’authentification si vous y êtes invité. Utilisez le compte que

vous avez utilisé dans la section Créer l’application API précédente.

4. Sélectionnez l’application API Azure App Service que vous avez créée dans la liste
comme cible de publication, puis cliquez sur Publier.

Après en avoir terminé avec l’Assistant, il publie l’application dans Azure, puis ouvre
l’application. Prenez note de l’URL si ce n’est déjà fait. Cette URL représente le point de
terminaison back-end qui est utilisé plus loin dans ce tutoriel.

Validation de l’API publiée

1. Dans Postman , ouvrez un nouvel onglet, définissez la demande sur PUT et
entrez l’adresse ci-dessous. Remplacez l’espace réservé par l’adresse de base que
vous avez notée dans la section précédente Publier le service back-end.

C#

[Link]

７ Notes

L’adresse de base doit être au format [Link] .

2. Si vous avez choisi d’effectuer la section Authentifier les clients à l’aide d’une clé
API, veillez à configurer les en-têtes de demande pour inclure votre valeur apikey.

Clé Valeur

apikey <your_api_key>
 3. Choisissez l’option raw (brut) pour Body (Corps), choisissez JSON dans la liste des
options de format, puis incluez du contenu JSON d’espace réservé :

JSON

{}

4. Cliquez sur Envoyer.

７ Notes

Vous devez recevoir un état 422 UnprocessableEntity du service.

5. Effectuez à nouveau les étapes 1 à 4, mais en spécifiant cette fois le point de

terminaison des demandes pour vérifier que vous recevez une réponse 400
Demande incorrecte.

Bash

[Link]

７ Notes

Il n’est pas encore possible de tester l’API à l’aide de données de demande valides,
car cela nécessite des informations propres à la plateforme de la part de
l’application mobile cliente.

Créer une application [Link]

multiplateforme
Dans cette section, vous allez créer une application mobile [Link] qui
implémente des notifications Push en mode multiplateforme.

Elle vous permet de vous inscrire auprès d’un hub de notification et de vous en
désinscrire par le biais du service back-end que vous avez créé.

Une alerte s’affiche quand une action est spécifiée et que l’application est au premier
plan. Sinon, les notifications s’affichent dans le centre de notifications.

７ Notes
 En général, vous effectuez les actions d’inscription (et de désinscription) au
moment approprié durant le cycle de vie de l’application (ou éventuellement dans
le cadre de votre première expérience d’exécution) sans entrées d’inscription ou de
désinscription explicites de la part de l’utilisateur. Toutefois, cet exemple demande
une entrée utilisateur explicite pour faciliter l’exploration et le test de cette
fonctionnalité.

Créer la solution [Link]

1. Dans Visual Studio, créez une solution [Link] en utilisant Application
Forms vide comme modèle et en entrant PushDemo comme Nom du projet.

７ Notes

Dans la boîte de dialogue Configurer votre application Forms vide, assurez-

vous que l’Identificateur de l’organisation correspond à la valeur que vous
avez utilisée et que les deux cibles Android et iOS sont cochées.

2. Utilisez Ctrl + clic sur la solution PushDemo, puis choisissez Mettre à jour les
paquets NuGet.

3. Utilisez Ctrl + clic sur la solution PushDemo, puis choisissez Gérer les packages
NuGet... .

4. Cherchez le fichier [Link] et vérifiez qu’il est coché.

5. Cliquez sur Ajouter des packages, puis cliquez sur Accepter quand vous êtes invité
à accepter les termes du contrat de licence.

6. Générez et exécutez l’application sur chaque plateforme cible (Commande +

Entrée) pour vérifier que l’application basée sur un modèle s’exécute sur vos
appareils.

Implémenter les composants multiplateforme

1. Utilisez Ctrl + clic sur le projet PushDemo, choisissez Nouveau dossier dans le
menu Ajouter, puis cliquez sur Ajouter en utilisant Models comme Nom de
dossier.

2. Utilisez Ctrl + clic sur le dossier Models, puis choisissez Nouveau fichier dans le
menu Ajouter.
3. Sélectionnez Général>Classe vide, entrez [Link], puis ajoutez
l’implémentation suivante.

C#

using [Link];
using [Link];

namespace [Link]
{
public class DeviceInstallation
{
[JsonProperty("installationId")]
public string InstallationId { get; set; }

[JsonProperty("platform")]
public string Platform { get; set; }

[JsonProperty("pushChannel")]
public string PushChannel { get; set; }

[JsonProperty("tags")]
public List<string> Tags { get; set; } = new List<string>();
}
}

4. Ajoutez une Énumération vide au dossier Models appelée [Link]

avec l’implémentation suivante.

C#

namespace [Link]
{
public enum PushDemoAction
{
ActionA,
ActionB
}
}

5. Ajoutez un nouveau dossier au projet PushDemo appelé Services, puis ajoutez une
Classe vide à ce dossier appelée [Link] avec l’implémentation
suivante.

C#

using System;
using [Link];
 namespace [Link]
{
public static class ServiceContainer
{
static readonly Dictionary<Type, Lazy<object>> services
= new Dictionary<Type, Lazy<object>>();

public static void Register<T>(Func<T> function)

=> services[typeof(T)] = new Lazy<object>(() => function());

public static T Resolve<T>()

=> (T)Resolve(typeof(T));

public static object Resolve(Type type)

{
{
if ([Link](type, out var service))
return [Link];

throw new KeyNotFoundException($"Service not found for

type '{type}'");
}
}
}
}

７ Notes

Il s’agit d’une version réduite de la classe ServiceContainer à partir du

dépôt XamCAT . Elle sera utilisée comme conteneur IoC (inversion de
contrôle) léger.

6. Ajoutez une Interface vide au dossier Services appelée

[Link], puis ajoutez le code suivant.

C#

using [Link];

namespace [Link]
{
public interface IDeviceInstallationService
{
string Token { get; set; }
bool NotificationsSupported { get; }
string GetDeviceId();
DeviceInstallation GetDeviceInstallation(params string[] tags);
}
}
 ７ Notes

Cette interface sera implémentée et démarrée par chaque cible

ultérieurement pour fournir les fonctionnalités propres à la plateforme et les
informations DeviceInstallation nécessaires au service back-end.

7. Ajoutez une autre Interface vide au dossier Services appelée

[Link], puis ajoutez le code suivant.

C#

using [Link];

namespace [Link]
{
public interface INotificationRegistrationService
{
Task DeregisterDeviceAsync();
Task RegisterDeviceAsync(params string[] tags);
Task RefreshRegistrationAsync();
}
}

７ Notes

Cette interface gère l’interaction entre le client et le service back-end.

8. Ajoutez une autre Interface vide au dossier Services appelée

[Link], puis ajoutez le code suivant.

C#

namespace [Link]
{
public interface INotificationActionService
{
void TriggerAction(string action);
}
}

７ Notes

Cette interface est utilisée comme mécanisme simple pour centraliser la

gestion des actions de notification.
 9. Ajoutez une Interface vide au dossier Services appelée
[Link] qui dérive de INotificationActionService,
avec l’implémentation suivante.

C#

using System;
using [Link];

namespace [Link]
{
public interface IPushDemoNotificationActionService :
INotificationActionService
{
event EventHandler<PushDemoAction> ActionTriggered;
}
}

７ Notes

Ce type est propre à l’application PushDemo et utilise l’énumération

PushDemoAction pour identifier l’action qui est déclenchée de manière
fortement typée.

10. Ajoutez au dossier Services une Classe vide appelée

[Link] implémentant l’INotificationRegistrationService
avec le code suivant.

C#

using System;
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];

namespace [Link]
{
public class NotificationRegistrationService :
INotificationRegistrationService
{
const string RequestUrl = "api/notifications/installations";
const string CachedDeviceTokenKey = "cached_device_token";
const string CachedTagsKey = "cached_tags";
 string _baseApiUrl;
HttpClient _client;
IDeviceInstallationService _deviceInstallationService;

public NotificationRegistrationService(string baseApiUri,

string apiKey)
{
_client = new HttpClient();
_client.[Link]("Accept",
"application/json");
_client.[Link]("apikey", apiKey);

_baseApiUrl = baseApiUri;
}

IDeviceInstallationService DeviceInstallationService
=> _deviceInstallationService ??
(_deviceInstallationService =
[Link]<IDeviceInstallationService>());

public async Task DeregisterDeviceAsync()

{
var cachedToken = await
[Link](CachedDeviceTokenKey)
.ConfigureAwait(false);

if (cachedToken == null)
return;

var deviceId = DeviceInstallationService?.GetDeviceId();

if ([Link](deviceId))
throw new Exception("Unable to resolve an ID for the
device.");

await SendAsync([Link], $"

{RequestUrl}/{deviceId}")
.ConfigureAwait(false);

[Link](CachedDeviceTokenKey);
[Link](CachedTagsKey);
}

public async Task RegisterDeviceAsync(params string[] tags)

{
var deviceInstallation =
DeviceInstallationService?.GetDeviceInstallation(tags);

await SendAsync<DeviceInstallation>([Link],
RequestUrl, deviceInstallation)
.ConfigureAwait(false);

await [Link](CachedDeviceTokenKey,
[Link])
.ConfigureAwait(false);
 await [Link](CachedTagsKey,
[Link](tags));
}

public async Task RefreshRegistrationAsync()

{
var cachedToken = await
[Link](CachedDeviceTokenKey)
.ConfigureAwait(false);

var serializedTags = await

[Link](CachedTagsKey)
.ConfigureAwait(false);

if ([Link](cachedToken) ||
[Link](serializedTags) ||

[Link]([Link]) ||
cachedToken == [Link])
return;

var tags = [Link]<string[]>

(serializedTags);

await RegisterDeviceAsync(tags);
}

async Task SendAsync<T>(HttpMethod requestType, string

requestUri, T obj)
{
string serializedContent = null;

await [Link](() => serializedContent =

[Link](obj))
.ConfigureAwait(false);

await SendAsync(requestType, requestUri,

serializedContent);
}

async Task SendAsync(

HttpMethod requestType,
string requestUri,
string jsonRequest = null)
{
var request = new HttpRequestMessage(requestType, new
Uri($"{_baseApiUrl}{requestUri}"));

if (jsonRequest != null)
[Link] = new StringContent(jsonRequest,
Encoding.UTF8, "application/json");

var response = await

_client.SendAsync(request).ConfigureAwait(false);
 [Link]();
}
}
}

７ Notes

L’argument apiKey n’est obligatoire que si vous avez choisi d’effectuer la

section Authentifier les clients à l’aide d’une clé API.

11. Ajoutez au dossier Services une Classe vide appelée

[Link] implémentant
l’IPushDemoNotificationActionService avec le code suivant.

C#

using System;
using [Link];
using [Link];
using [Link];

namespace [Link]
{
public class PushDemoNotificationActionService :
IPushDemoNotificationActionService
{
readonly Dictionary<string, PushDemoAction> _actionMappings =
new Dictionary<string, PushDemoAction>
{
{ "action_a", [Link] },
{ "action_b", [Link] }
};

public event EventHandler<PushDemoAction> ActionTriggered =

delegate { };

public void TriggerAction(string action)

{
if (!_actionMappings.TryGetValue(action, out var
pushDemoAction))
return;

List<Exception> exceptions = new List<Exception>();

foreach (var handler in

ActionTriggered?.GetInvocationList())
{
try
{
 [Link](this, pushDemoAction);
}
catch (Exception ex)
{
[Link](ex);
}
}

if ([Link]())
throw new AggregateException(exceptions);
}
}
}

12. Ajoutez au projet PushDemo une Classe vide appelée [Link] avec
l’implémentation suivante.

C#

namespace PushDemo
{
public static partial class Config
{
public static string ApiKey = "API_KEY";
public static string BackendServiceEndpoint =
"BACKEND_SERVICE_ENDPOINT";
}
}

７ Notes

Cette classe est un moyen simple de conserver les secrets en dehors du

contrôle de code source. Vous pouvez remplacer ces valeurs dans le cadre
d’une génération automatisée ou les remplacer à l’aide d’une classe partielle
locale. Vous effectuerez cette opération à l’étape suivante.

Le champ ApiKey n’est obligatoire que si vous avez choisi d’effectuer la

section Authentifier les clients à l’aide d’une clé API.

13. Ajoutez au projet PushDemo une autre Classe vide appelée Config.local_secrets.cs
avec l’implémentation suivante.

C#

namespace PushDemo
{
public static partial class Config
 {
static Config()
{
ApiKey = "<your_api_key>";
BackendServiceEndpoint = "<your_api_app_url>";
}
}
}

７ Notes

Remplacez les valeurs d’espace réservé par vos propres valeurs. Vous devez en
avoir pris note quand vous avez créé le service back-end. L’URL de
l’application API doit être [Link] .
N’oubliez pas d’ajouter *.local_secrets.* à votre fichier gitignore pour éviter
de valider ce fichier.

Le champ ApiKey n’est obligatoire que si vous avez choisi d’effectuer la

section Authentifier les clients à l’aide d’une clé API.

14. Ajoutez au projet PushDemo une Classe vide appelée [Link] avec
l’implémentation suivante.

C#

using System;
using [Link];

namespace PushDemo
{
public static class Bootstrap
{
public static void Begin(Func<IDeviceInstallationService>
deviceInstallationService)
{
[Link](deviceInstallationService);

[Link]<IPushDemoNotificationActionService>(()
=> new PushDemoNotificationActionService());

[Link]<INotificationRegistrationService>
(()
=> new NotificationRegistrationService(
[Link],
[Link]));
}
}
}
 ７ Notes

La méthode Begin est appelée par chaque plateforme quand l’application se

lance en passant une implémentation d’IDeviceInstallationService propre à la
plateforme.

L’argument du constructeur apiKey NotificationRegistrationService n’est

requis que si vous avez choisi de terminer la section Authentifier les clients à
l’aide d’une clé API.

Implémenter l’interface utilisateur multiplateforme

1. Dans le projet PushDemo, ouvrez [Link] et remplacez le contrôle
StackLayout par ce qui suit.

XML

<StackLayout VerticalOptions="EndAndExpand"
HorizontalOptions="FillAndExpand"
Padding="20,40">
<Button x:Name="RegisterButton"
Text="Register"
Clicked="RegisterButtonClicked" />
<Button x:Name="DeregisterButton"
Text="Deregister"
Clicked="DeregisterButtonClicked" />
</StackLayout>

2. Maintenant, dans [Link], ajoutez un champ de stockage readonly pour

stocker une référence à l’implémentation INotificationRegistrationService.

C#

readonly INotificationRegistrationService
_notificationRegistrationService;

3. Dans le constructeur MainPage, résolvez l’implémentation

INotificationRegistrationService à l’aide de ServiceContainer et attribuez-la au
champ de stockage notificationRegistrationService.

C#
 public MainPage()
{
InitializeComponent();

_notificationRegistrationService =
[Link]<INotificationRegistrationService>();
}

4. Implémentez les gestionnaires d’événements pour les événements Clicked des

boutons RegisterButton et DeregisterButton en appelant les méthodes
Register/Deregister correspondantes.

C#

void RegisterButtonClicked(object sender, EventArgs e)

=>
_notificationRegistrationService.RegisterDeviceAsync().ContinueWith((ta
sk)
=> { ShowAlert([Link] ?
[Link] :
$"Device registered"); });

void DeregisterButtonClicked(object sender, EventArgs e)

=>
_notificationRegistrationService.DeregisterDeviceAsync().ContinueWith((
task)
=> { ShowAlert([Link] ?
[Link] :
$"Device deregistered"); });

void ShowAlert(string message)

=> [Link](()
=> DisplayAlert("PushDemo", message, "OK").ContinueWith((task)
=> { if ([Link]) throw [Link]; }));

5. Maintenant, dans [Link], vérifiez que les espaces de noms suivants sont
référencés.

C#

using [Link];
using [Link];
using [Link];
using [Link];

6. Implémentez le gestionnaire d’événements pour l’événement

IPushDemoNotificationActionServiceActionTriggered .
 C#

void NotificationActionTriggered(object sender, PushDemoAction e)

=> ShowActionAlert(e);

void ShowActionAlert(PushDemoAction action)

=> [Link](()
=> MainPage?.DisplayAlert("PushDemo", $"{action} action
received", "OK")
.ContinueWith((task) => { if ([Link]) throw
[Link]; }));

7. Dans le constructeur d’application , résolvez l’implémentation

IPushNotificationActionService à l’aide de ServiceContainer et abonnez-vous à
l’événement IPushDemoNotificationActionServiceActionTriggered .

C#

public App()
{
InitializeComponent();

[Link]<IPushDemoNotificationActionService>()
.ActionTriggered += NotificationActionTriggered;

MainPage = new MainPage();

}

７ Notes

Il s’agit simplement d’illustrer la réception et la propagation des actions de

notification Push. En règle générale, celles-ci sont gérées en mode silencieux
par exemple, en accédant à une vue spécifique ou en actualisant certaines
données plutôt qu’en affichant une alerte via la Page racine, MainPage en
l’occurrence.

Configurer le projet Android natif pour les

notifications Push

Valider le nom et les autorisations de package

1. Dans [Link], ouvrez Options du projet puis Application Android
dans la section Générer.
 2. Vérifiez que le nom du package correspond à la valeur que vous avez utilisée dans
le projet PushDemo de la console Firebase . Le nom du package était au format
com.<organization>.pushdemo .

3. Définissez la Version Android minimale sur Android 8.0 (niveau d’API 26) et la
Version cible d’Android sur le dernier niveau d’API.

７ Notes

Seuls les appareils qui exécutent les niveaux d’API 26 et supérieurs sont pris
en charge dans le cadre de ce tutoriel, mais vous pouvez l’étendre pour
prendre en charge les appareils exécutant des versions antérieures.

4. Assurez-vous que les autorisations INTERNET et READ_PHONE_STATE sont

activées sous Autorisations requises.

5. Cliquez sur OK

Ajouter les packages Xamarin Google Play Services Base

et [Link]
1. Dans [Link], utilisez Ctrl + clic sur le dossier Packages, puis
choisissez Gérer les packages NuGet... .

2. Recherchez [Link] (pas Basement) et assurez-vous

qu’il est activé.

3. Recherchez [Link] et assurez-vous qu’il est activé.

4. Cliquez sur Ajouter des packages, puis cliquez sur Accepter quand vous êtes invité
à accepter les termes du contrat de licence.

Ajout du fichier JSON Google Services

1. Utilisez Ctrl + clic sur le projet [Link] , puis choisissez Fichier existant...
dans le menu Ajouter.

2. Choisissez le fichier [Link] que vous avez téléchargé lors de la

configuration du projet PushDemo dans Firebase Console , puis cliquez sur
Ouvrir.

3. Quand vous y êtes invité, choisissez de copier le fichier dans le répertoire.

 4. Utilisez Ctrl + Clic sur le fichier [Link] à partir du projet
[Link] , puis assurez-vous que GoogleServicesJson est défini comme
Action de génération.

Gérer les notifications Push pour Android

1. Utilisez Ctrl + clic sur le projet [Link] , choisissez Nouveau dossier dans
le menu Ajouter, puis cliquez sur Ajouter en utilisant Services comme Nom de
dossier.

2. Utilisez Ctrl + clic sur le dossier Services, puis choisissez Nouveau fichier dans le
menu Ajouter.

3. Sélectionnez Général>Classe vide, entrez [Link] pour le Nom,

puis cliquez sur Nouveau en ajoutant l’implémentation suivante.

C#

using System;
using [Link];
using [Link];
using [Link];
using [Link];
using static [Link];

namespace [Link]
{
public class DeviceInstallationService : IDeviceInstallationService
{
public string Token { get; set; }

public bool NotificationsSupported

=> [Link]
.IsGooglePlayServicesAvailable([Link]) ==
[Link];

public string GetDeviceId()

=> [Link]([Link],
[Link]);

public DeviceInstallation GetDeviceInstallation(params string[]

tags)
{
if (!NotificationsSupported)
throw new Exception(GetPlayServicesError());

if ([Link](Token))
throw new Exception("Unable to resolve token for FCM");

var installation = new DeviceInstallation

 {
InstallationId = GetDeviceId(),
Platform = "fcm",
PushChannel = Token
};

[Link](tags);

return installation;
}

string GetPlayServicesError()
{
int resultCode =
[Link](Applicatio
[Link]);

if (resultCode != [Link])
return
[Link](resultCode) ?

[Link](resultCode) :
"This device is not supported";

return "An error occurred preventing the use of push

notifications";
}
}
}

７ Notes

Cette classe fournit un ID unique (à l’aide de [Link]) dans le cadre

de la charge utile de l’inscription au hub de notification.

4. Ajoutez une autre Classe vide au dossier Services appelée

[Link], puis ajoutez l’implémentation
suivante.

C#

using [Link];
using [Link];
using [Link];
using [Link];

namespace [Link]
{
[Service]
[IntentFilter(new[] { "[Link].MESSAGING_EVENT" })]
 public class PushNotificationFirebaseMessagingService :
FirebaseMessagingService
{
IPushDemoNotificationActionService _notificationActionService;
INotificationRegistrationService
_notificationRegistrationService;
IDeviceInstallationService _deviceInstallationService;

IPushDemoNotificationActionService NotificationActionService
=> _notificationActionService ??
(_notificationActionService =

[Link]<IPushDemoNotificationActionService>());

INotificationRegistrationService
NotificationRegistrationService
=> _notificationRegistrationService ??
(_notificationRegistrationService =

[Link]<INotificationRegistrationService>());

IDeviceInstallationService DeviceInstallationService
=> _deviceInstallationService ??
(_deviceInstallationService =
[Link]<IDeviceInstallationService>
());

public override void OnNewToken(string token)

{
[Link] = token;

[Link]()
.ContinueWith((task) => { if ([Link]) throw
[Link]; });
}

public override void OnMessageReceived(RemoteMessage message)

{
if([Link]("action", out var
messageAction))
[Link](messageAction);
}
}
}

5. Dans [Link], vérifiez que les espaces de noms suivants ont été ajoutés au
début du fichier.

C#

using System;
using [Link];
using [Link];
 using [Link];
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];

6. Dans [Link], définissez LaunchMode sur SingleTop afin que MainActivity

ne soit pas recréé lors de son ouverture.

C#

[Activity(
Label = "PushDemo",
LaunchMode = [Link],
Icon = "@mipmap/icon",
Theme = "@style/MainTheme",
MainLauncher = true,
ConfigurationChanges = [Link] |
[Link])]

7. Ajoutez des propriétés privées et des champs de stockage correspondants pour

stocker une référence aux implémentations IPushNotificationActionService et
IDeviceInstallationService.

C#

IPushDemoNotificationActionService _notificationActionService;
IDeviceInstallationService _deviceInstallationService;

IPushDemoNotificationActionService NotificationActionService
=> _notificationActionService ??
(_notificationActionService =
[Link]<IPushDemoNotificationActionService>
());

IDeviceInstallationService DeviceInstallationService
=> _deviceInstallationService ??
(_deviceInstallationService =
[Link]<IDeviceInstallationService>());

8. Implémentez l’interface IOnSuccessListener pour récupérer et stocker le jeton

Firebase.

C#

public class MainActivity :

global::[Link],
[Link]
 {
...

public void OnSuccess([Link] result)

=> [Link] =

[Link]("getToken").Invoke(result).ToString();
}

9. Ajoutez une nouvelle méthode appelée ProcessNotificationActions qui vérifiera si

une intention (Intent) donnée a une valeur supplémentaire nommée action.
Déclenchez cette action de manière conditionnelle à l’aide de l’implémentation
IPushDemoNotificationActionService.

C#

void ProcessNotificationActions(Intent intent)

{
try
{
if (intent?.HasExtra("action") == true)
{
var action = [Link]("action");

if ()
[Link](action);
}
}
catch (Exception ex)
{
[Link]([Link]);
}
}

10. Substituez la méthode OnNewIntent pour appeler la méthode

ProcessNotificationActions.

C#

protected override void OnNewIntent(Intent intent)

{
[Link](intent);
ProcessNotificationActions(intent);
}

７ Notes
 Dans la mesure où LaunchMode pour Activity est défini sur SingleTop, une
intention (Intent) sera envoyée à l’instance Activity par le biais de la méthode
OnNewIntent, plutôt que de la méthode OnCreate. Vous devez donc gérer
une intention entrante dans les méthodes OnCreate et OnNewIntent.

11. Mettez à jour la méthode OnCreate pour appeler [Link] juste après
l’appel à [Link] en passant l’implémentation de IDeviceInstallationService
propre à la plateforme.

C#

[Link](() => new DeviceInstallationService());

12. Dans la même méthode, appelez de manière conditionnelle GetInstanceId sur

l’instance FirebaseApp, juste après l’appel à [Link] , en ajoutant
MainActivity comme IOnSuccessListener.

C#

if ([Link])
{
[Link]([Link])
.GetInstanceId()
.AddOnSuccessListener(this);
}

13. Toujours dans OnCreate, appelez ProcessNotificationActions immédiatement

après l’appel à LoadApplication en passant l’intention (Intent) actuelle.

C#

...

LoadApplication(new App());

ProcessNotificationActions(Intent);

７ Notes

Pour continuer à recevoir des notifications Push, vous devez réinscrire l’application
chaque fois que vous l’exécutez et l’arrêtez à partir d’une session de débogage.
Configurer le projet iOS natif pour les
notifications Push

Configurer [Link] et [Link]

1. Assurez-vous que vous êtes connecté à votre Compte de développeur Apple sous
>Visual StudioPréférences...>Publication>Comptes de développeur Apple et que
le Certificat et le Profil de provisionnement appropriés ont été téléchargés.
Normalement, vous avez créé ces ressources lors des étapes précédentes.

2. Dans [Link], ouvrez [Link] et vérifiez que bundleIdentifier correspond

à la valeur utilisée pour le profil d’approvisionnement respectif dans le portail des
développeurs Apple . La valeur BundleIdentifier suivait le format com.
<organization>.PushDemo .

3. Dans le même fichier, définissez Version minimale du système sur 13.0.

７ Notes

Seuls les appareils qui exécutent iOS 13.0 ou une version ultérieure sont pris
en charge dans ce tutoriel, mais vous pouvez l’étendre pour prendre en
charge les appareils exécutant des versions antérieures.

4. Ouvrez Options du projet pour [Link] (double-cliquez sur le projet).

5. Dans Options du projet, sous Créer la > signature de bundle iOS, vérifiez que
votre compte de développeur est sélectionné sous Équipe. Vérifiez ensuite que
l’option « Automatically manage signing » (Gérer automatiquement la signature)
est activée et que votre certificat de signature et votre profil de provisionnement
ont été automatiquement sélectionnés.

７ Notes

Si votre Certificat de signature et votre Profil de provisionnement n’ont pas été

sélectionnés automatiquement, choisissez Provisionnement manuel, puis
cliquez sur Bundle Signing Options (Options de signature du bundle). Vérifiez
que votre Équipe est sélectionnée sous Identité de signature et que votre
profil de provisionnement pour PushDemo est sélectionné dans Profil de
provisionnement pour les configurations Debug et Release, iPhone devant
être sélectionné pour la Plate-forme dans les deux cas.
 6. Dans [Link], ouvrez [Link] et vérifiez que l’option Activer les
notifications Push est sélectionnée sous l’onglet Droits. Ensuite, assurez-vous que
le paramètre Environnement APS est défini sur développement sous l’onglet
Source.

Gérer les notifications Push pour iOS

1. Utilisez Ctrl + clic sur le projet [Link], choisissez Nouveau dossier dans le
menu Ajouter, puis cliquez sur Ajouter en utilisant Services comme Nom de
dossier.

2. Utilisez Ctrl + clic sur le dossier Services, puis choisissez Nouveau fichier... dans le
menu Ajouter.

3. Sélectionnez Général>Classe vide, entrez [Link] pour le Nom,

puis cliquez sur Nouveau en ajoutant l’implémentation suivante.

C#

using System;
using [Link];
using [Link];
using UIKit;

namespace [Link]
{
public class DeviceInstallationService : IDeviceInstallationService
{
const int SupportedVersionMajor = 13;
const int SupportedVersionMinor = 0;

public string Token { get; set; }

public bool NotificationsSupported

=>
[Link](SupportedVersionMajor,
SupportedVersionMinor);

public string GetDeviceId()

=> [Link]();

public DeviceInstallation GetDeviceInstallation(params string[]

tags)
{
if (!NotificationsSupported)
throw new Exception(GetNotificationsSupportError());

if ([Link](Token))
throw new Exception("Unable to resolve token for
APNS");
 var installation = new DeviceInstallation
{
InstallationId = GetDeviceId(),
Platform = "apns",
PushChannel = Token
};

[Link](tags);

return installation;
}

string GetNotificationsSupportError()
{
if (!NotificationsSupported)
return $"This app only supports notifications on iOS
{SupportedVersionMajor}.{SupportedVersionMinor} and above. You are
running {[Link]}.";

if (Token == null)
return $"This app can support notifications but you
must enable this in your settings.";

return "An error occurred preventing the use of push

notifications";
}
}
}

７ Notes

Cette classe fournit un ID unique (avec la valeur

[Link]) et la charge utile de l’inscription au hub de
notification.

4. Ajoutez un nouveau dossier au projet [Link] appelé Extensions, puis

ajoutez une Classe vide à ce dossier appelée [Link] avec
l’implémentation suivante.

C#

using [Link];
using Foundation;

namespace [Link]
{
internal static class NSDataExtensions
{
 internal static string ToHexString(this NSData data)
{
var bytes = [Link]();

if (bytes == null)
return null;

StringBuilder sb = new StringBuilder([Link] * 2);

foreach (byte b in bytes)

[Link]("{0:x2}", b);

return [Link]().ToUpperInvariant();
}
}
}

5. Dans [Link], vérifiez que les espaces de noms suivants ont été ajoutés au
début du fichier.

C#

using System;
using [Link];
using [Link];
using Foundation;
using [Link];
using [Link];
using [Link];
using UIKit;
using UserNotifications;
using [Link];

6. Ajoutez les propriétés privées et leurs champs de stockage respectifs pour stocker
une référence aux implémentations IPushDemoNotificationActionService,
INotificationRegistrationService et IDeviceInstallationService.

C#

IPushDemoNotificationActionService _notificationActionService;
INotificationRegistrationService _notificationRegistrationService;
IDeviceInstallationService _deviceInstallationService;

IPushDemoNotificationActionService NotificationActionService
=> _notificationActionService ??
(_notificationActionService =
[Link]<IPushDemoNotificationActionService>
());

INotificationRegistrationService NotificationRegistrationService
=> _notificationRegistrationService ??
 (_notificationRegistrationService =
[Link]<INotificationRegistrationService>());

IDeviceInstallationService DeviceInstallationService
=> _deviceInstallationService ??
(_deviceInstallationService =
[Link]<IDeviceInstallationService>());

7. Ajoutez la méthode RegisterForRemoteNotifications pour inscrire les paramètres

de notification utilisateur, puis pour les notifications distantes avec APNS.

C#

void RegisterForRemoteNotifications()
{
[Link](() =>
{
var pushSettings =
[Link](
[Link] |
[Link] |
[Link],
new NSSet());

[Link](pushSe
ttings);

[Link]();
});
}

8. Ajoutez la méthode CompleteRegistrationAsync pour définir la valeur de la

propriété [Link] . Actualisez l’inscription et mettez en
cache le jeton de l’appareil s’il a été mis à jour depuis son dernier stockage.

C#

Task CompleteRegistrationAsync(NSData deviceToken)

{
[Link] = [Link]();
return [Link]();
}

9. Ajoutez la méthode ProcessNotificationActions pour le traitement des données de

notification NSDictionary et l’appel conditionnel de
[Link].
 C#

void ProcessNotificationActions(NSDictionary userInfo)

{
if (userInfo == null)
return;

try
{
var actionValue = [Link](new NSString("action"))
as NSString;

if ()

[Link]([Link]);
}
catch (Exception ex)
{
[Link]([Link]);
}
}

10. Remplacez la méthode RegisteredForRemoteNotifications en passant l’argument

deviceToken à la méthode CompleteRegistrationAsync.

C#

public override void RegisteredForRemoteNotifications(

UIApplication application,
NSData deviceToken)
=> CompleteRegistrationAsync(deviceToken).ContinueWith((task)
=> { if ([Link]) throw [Link]; });

11. Remplacez la méthode ReceivedRemoteNotification en passant l’argument

userInfo à la méthode ProcessNotificationActions.

C#

public override void ReceivedRemoteNotification(

UIApplication application,
NSDictionary userInfo)
=> ProcessNotificationActions(userInfo);

12. Remplacez la méthode FailedToRegisterForRemoteNotifications pour journaliser

l’erreur.

C#
 public override void FailedToRegisterForRemoteNotifications(
UIApplication application,
NSError error)
=> [Link]([Link]);

７ Notes

Cette valeur s’apparente à un espace réservé. Vous pouvez implémenter une

journalisation et une gestion des erreurs appropriées pour les scénarios de
production.

13. Mettez à jour la méthode FinishedLaunching pour appeler [Link] juste

après l’appel à [Link] en passant l’implémentation de
IDeviceInstallationService propre à la plateforme.

C#

[Link](() => new DeviceInstallationService());

14. Dans la même méthode, demandez une autorisation de manière conditionnelle et

ajoutez l’inscription aux notifications distantes juste après [Link] .

C#

if ([Link])
{
[Link](
[Link] |
[Link] |
[Link],
(approvalGranted, error) =>
{
if (approvalGranted && error == null)
RegisterForRemoteNotifications();
});
}

15. Toujours dans FinishedLaunching, appelez ProcessNotificationActions

immédiatement après l’appel à LoadApplication si l’argument options contient la
méthode [Link] qui passe l’objet
userInfo résultant.

C#
 using (var userInfo = options?.ObjectForKey(
[Link]) as NSDictionary)
ProcessNotificationActions(userInfo);

Test de la solution
Vous pouvez maintenant tester l’envoi de notifications par le biais du service back-end.

Envoyer une notification de test

1. Ouvrez un nouvel onglet dans Postman .

2. Définissez la requête sur POST et entrez l’adresse suivante :

XML

[Link]

3. Si vous avez choisi d’effectuer la section Authentifier les clients à l’aide d’une clé
API, veillez à configurer les en-têtes de demande pour inclure votre valeur apikey.

Clé Valeur

apikey <your_api_key>

4. Choisissez l’option raw (brut) pour Body (Corps), choisissez JSON dans la liste des
options de format, puis incluez du contenu JSON d’espace réservé :

JSON

{
"text": "Message from Postman!",
"action": "action_a"
}

5. Sélectionnez le bouton Code qui apparaît dans le coin supérieur droit sous le
bouton Save (Enregistrer). La demande doit ressembler à l’exemple suivant quand
elle est affichée pour HTML (selon que vous avez inclus un en-tête apikey) :

HTML

POST /api/notifications/requests HTTP/1.1

Host: [Link]
 apikey: <your_api_key>
Content-Type: application/json

{
"text": "Message from backend service",
"action": "action_a"
}

6. Exécutez l’application PushDemo sur au moins l’une des plateformes cibles

(Android et iOS).

７ Notes

Si vous effectuez un test sur Android, assurez-vous que vous n’êtes pas en
mode Debug, ou si l’application a été déployée au moment de son exécution,
forcez sa fermeture, puis redémarrez-la à partir du lanceur.

7. Dans l’application PushDemo, appuyez sur le bouton Register (Inscrire).

8. De retour dans Postman , fermez la fenêtre Generate Code Snippets (Générer

des extraits de code) (si ce n’est déjà fait), puis cliquez sur le bouton Send
(Envoyer).

9. Vérifiez que vous recevez une réponse 200 OK dans Postman et que l’alerte
s’affiche dans l’application sous la forme ActionA action received (Action ActionA
reçue).

10. Fermez l’application PushDemo, puis recliquez sur Send dans Postman .

11. Vérifiez que vous recevez une réponse 200 OK dans Postman . Vérifiez qu’une
notification s’affiche dans la zone de notification pour l’application PushDemo
avec le message approprié.

12. Appuyez sur la notification pour confirmer qu’elle ouvre l’application et qu’elle a
affiché l’alerte ActionA action received.

13. De retour dans Postman , modifiez le corps de la demande précédent pour

envoyer une notification silencieuse en spécifiant action_b au lieu d’action_a pour
la valeur action.

JSON

{
"action": "action_b",
"silent": true
}
 14. L’application toujours ouverte, cliquez sur le bouton Send dans Postman .

15. Vérifiez que vous recevez une réponse 200 OK dans Postman et que l’alerte
s’affiche dans l’application sous la forme ActionB action received au lieu d’ActionA
action received.

16. Fermez l’application PushDemo, puis recliquez sur Send dans Postman .

17. Vérifiez que vous recevez une réponse 200 OK dans Postman et que la
notification silencieuse n’apparaît pas dans la zone de notification.

Dépannage

Aucune réponse du service back-end

Lors du test local, vérifiez que le service back-end est en cours d’exécution et qu’il utilise
le port approprié.

Si vous effectuez le test par rapport à l’application API Azure, vérifiez que le service est
en cours d’exécution, qu’il a été déployé et qu’il a démarré sans erreur.

Veillez à vérifier que vous avez correctement spécifié l’adresse de base dans Postman
ou dans la configuration de l’application mobile lors du test par le biais du client.
L’adresse de base doit être [Link] ou
[Link] lors du test local.

Aucune notification reçue sur Android après le démarrage ou l’arrêt

d’une session de débogage

Veillez à vous réinscrire après le démarrage ou l’arrêt d’une session de débogage. Le

débogueur déclenche la génération d’un nouveau jeton Firebase. L’installation du hub
de notification doit également être mise à jour.

Réception d’un code d’état 401 du service back-end

Vérifiez que vous définissez l’en-tête de demande apikey et que cette valeur correspond
à celle que vous avez configurée pour le service back-end.

Si vous recevez cette erreur quand vous procédez à un test local, vérifiez que la valeur
de clé que vous avez définie dans la configuration du client correspond à la valeur du
paramètre utilisateur Authentication:ApiKey utilisée par l’API.

Si vous effectuez un test avec une application API, assurez-vous que la valeur de clé
dans le fichier de configuration du client correspond au paramètre d’application
Authentication:ApiKey que vous utilisez dans l’application API.

７ Notes

Si vous avez créé ou modifié ce paramètre après avoir déployé le service back-end,
vous devez redémarrer le service afin qu’il prenne effet.

Si vous avez choisi de ne pas effectuer la section Authentifier les clients à l’aide d’une clé
API, assurez-vous que vous n’avez pas appliqué l’attribut Authorize à la classe
NotificationsController.

Réception d’un code d’état 404 du service back-end

Vérifiez que le point de terminaison et la méthode de demande HTTP sont corrects. Par
exemple, les points de terminaison doivent être :

[PUT] [Link]
[DELETE] [Link]
<installation_id>
[POST] [Link]

Ou lors du test local :

[PUT] [Link]
[DELETE] [Link]
id>
[POST] [Link]

Quand vous spécifiez l’adresse de base dans l’application cliente, assurez-vous qu’elle se
termine par un caractère / . L’adresse de base doit être
[Link] ou [Link] lors du test local.

Inscription impossible et affichage d’un message d’erreur du hub

de notification

Vérifiez que l’appareil de test dispose d’une connectivité réseau. Ensuite, déterminez le
code d’état de la réponse HTTP en définissant un point d’arrêt pour inspecter la valeur
de propriété StatusCode dans HttpResponse.

Passez en revue les suggestions de résolution des problèmes précédentes, le cas

échéant, en fonction du code d’État.

Définissez un point d’arrêt sur les lignes qui retournent ces codes d’état pour l’API
concernée. Essayez ensuite d’appeler le service back-end lors du débogage local.

Vérifiez que le service back-end fonctionne comme prévu via Postman à l’aide de la
charge utile appropriée. Utilisez la charge utile réelle créée par le code client pour la
plateforme en question.

Passez en revue les sections de configuration propres à la plateforme pour vous assurer
qu’aucune étape n’a été manquée. Vérifiez que les valeurs appropriées sont résolues
pour les variables installation id et token pour la plateforme appropriée.

Affichage du message d’erreur selon lequel il est impossible de

résoudre un ID pour l’appareil
Passez en revue les sections de configuration propres à la plateforme pour vous assurer
qu’aucune étape n’a été manquée.

Liens connexes
Vue d’ensemble d’Azure Notification Hubs
Installation de Visual Studio pour Mac
Installation de Xamarin sur Windows
Kit de développement logiciel (SDK) Notification Hubs pour opérations backend
Kit de développement logiciel (SDK) Notification Hubs sur GitHub
S’inscrire auprès d’un back-end d’application
Gestion des inscriptions
Utilisation de balises
Utilisation des modèles personnalisés

Étapes suivantes
Vous devez maintenant disposer d’une application [Link] de base connectée à
un hub de notification par le biais d’un service back-end et qui peut envoyer et recevoir
des notifications.

Vous devrez probablement adapter à votre propre scénario l’exemple utilisé dans ce
tutoriel. L’implémentation d’une gestion des erreurs, d’une logique de nouvelle tentative
et d’une journalisation plus robustes est également recommandée.

Visual Studio App Center peut être rapidement intégré à des applications mobiles qui
fournissent des analytiques et des diagnostics pour faciliter la résolution des problèmes.
Tutoriel : Envoyer des notifications Push
à des applications React Native à l’aide
d’Azure Notification Hubs par le biais
d’un service back-end
Article • 08/06/2023

Télécharger l’exemple

Dans ce tutoriel, vous allez utiliser Azure Notification Hubs pour envoyer des
notifications Push à une application React Native ciblant Android et iOS.

Une API web [Link] Core back-end est utilisée pour gérer l’inscription d’appareils
pour le client à l’aide de l’approche d’installation la plus récente et la plus appropriée. Le
service envoie également des notifications Push en mode multiplateforme.

Ces opérations sont gérées à l’aide du SDK Notification Hubs pour les opérations back-
end . Vous trouverez plus d’informations sur l’approche globale dans la documentation
sur l’inscription à partir de votre back-end d’application.

Ce tutoriel explique comment effectuer les opérations suivantes :

＂ Configurer Push Notification Services et Azure Notification Hubs

＂ Créez une application back-end d’API web [Link] Core
＂ Créer une application React Native multiplateforme
＂ Configurer le projet Android natif pour les notifications Push
＂ Configurer le projet iOS natif pour les notifications Push
＂ Tester la solution

Prérequis
Pour suivre ce tutoriel, vous avez besoin des éléments suivants :

Un abonnement Azure où vous pouvez créer et gérer les ressources.

Un Mac avec Visual Studio pour Mac installé (ou un PC exécutant Visual
Studio 2019 avec la charge de travail Développement mobile en .NET)
La capacité à exécuter l’application sur Android (appareils physiques ou
émulateurs) ou iOS (appareils physiques uniquement)

Pour Android, vous devez disposer des éléments suivants :

 Un appareil physique de développeur déverrouillé ou un émulateur (exécutant l’API
26 et ultérieur avec Google Play Services installé)

Pour iOS, vous devez disposer des éléments suivants :

Un compte de développeur Apple actif.

Un appareil iOS physique inscrit à votre compte de développeur (exécutant iOS
13.0 et versions ultérieures).
Un certificat de développement .p12 installé dans votre keychain vous
permettant d’exécuter une application sur un appareil physique .

７ Notes

Le simulateur iOS ne prend pas en charge les notifications distantes. Un appareil

physique est donc nécessaire lors de l’exploration de cet exemple sur iOS.
Toutefois, vous n’avez pas besoin d’exécuter l’application à la fois sur Android et
sur iOS pour suivre ce tutoriel.

Vous pouvez effectuer les étapes de cet exemple sans expérience préalable. Toutefois,
une connaissance des éléments suivants vous sera utile :

Portail des développeurs Azure

[Link] Core
Console Google Firebase
Microsoft Azure et Envoyer des notifications Push vers des applications iOS à
l’aide d’Azure Notification Hubs.
React Native

Les étapes fournies concernent Visual Studio pour Mac et Visual Studio Code .
Toutefois, il est possible d’utiliser Visual Studio 2019 .

Configurer Push Notification Services et Azure

Notification Hubs
Dans cette section, vous allez configurer Firebase Cloud Messaging (FCM) et Apple
Push Notification Services (APNS) . Ensuite, vous allez créer et configurer un hub de
notification pour travailler avec ces services.

Créer un projet Firebase et activer Firebase Cloud

Messaging pour Android
1. Connectez-vous à la console Firebase . Créez un projet Firebase en entrant
PushDemo comme nom du projet.

７ Notes

Un nom unique sera généré pour vous. Par défaut, il s’agit d’une variante en
minuscules du nom que vous avez fourni plus un nombre généré, séparés par
un tiret. Vous pouvez le changer si vous voulez, du moment qu’il reste unique
au niveau global.

2. Une fois le projet créé, sélectionnez Add Firebase to your Android app (Ajouter
Firebase à votre application Android).

3. Dans la page Add Firebase to your Android app (Ajouter Firebase à votre
application Android), effectuez les étapes suivantes :

a. Pour Android package name (Nom du package Android), entrez un nom pour
votre package. Par exemple : com.<organization_identifier>.<package_name> .
b. Sélectionnez Inscrire une application.

c. Sélectionnez Télécharger le fichier [Link]. Ensuite, enregistrez le

fichier dans un dossier local pour l’utiliser ultérieurement, puis sélectionnez
Suivant.
 d. Sélectionnez Suivant.

e. Sélectionnez Continue to console (Poursuivre dans la console).

７ Notes

Si le bouton Continue to console n’est pas activé, en raison de la

vérification de l’installation, choisissez Skip this step (Ignorer cette étape).

4. Dans la console Firebase, sélectionnez la roue dentée associée à votre projet.

Ensuite, sélectionnez Project Settings (Paramètres du projet).
 ７ Notes

Si vous n’avez pas téléchargé le fichier [Link], vous pouvez le

faire sur cette page.

5. Basculez vers l’onglet Messagerie cloud en haut. Copiez et enregistrez la clé du

serveur pour une utilisation ultérieure. Cette valeur est utilisée pour configurer
votre hub de notification.

Inscrire votre application iOS pour les notifications Push

Pour envoyer des notifications Push vers une application iOS, inscrivez votre application
auprès d’Apple ainsi que pour les notifications Push.

1. Si vous n’avez pas encore inscrit votre application, accédez au portail de

provisionnement iOS dans le Centre pour développeurs Apple. Connectez-vous
au portail avec votre ID Apple, accédez à Certificats, Profils d’identificateurs&,
puis sélectionnez Identificateurs. Cliquez sur + pour inscrire une nouvelle
application.
2. Dans l’écran Register a New Identifier (Inscrire un nouvel identifiant), sélectionnez
la case d’option App IDs (ID d’application). Sélectionnez Continuer.

3. Mettez à jour les trois valeurs suivantes pour votre nouvelle application, puis
sélectionnez Continue :

Description : tapez un nom descriptif pour votre application.

ID de bundle : entrez un ID d’offre groupée au format

com.organization_identifier<>.<>product_name comme indiqué dans le
Guide de distribution des applications . Dans la capture d’écran ci-dessous,
la valeur mobcat est utilisée comme identificateur d’organisation, tandis que
la valeur PushDemo correspond au nom du produit.
 Notifications Push : cochez l’option Notifications Push dans la section
Capabilities (Fonctionnalités).

L’ID de votre application est généré et vous êtes invité à confirmer les
informations. Sélectionnez Continue (Continuer), puis Register (Inscrire) pour
confirmer le nouvel ID d’application.

Après avoir sélectionné S’inscrire, vous voyez le nouvel ID d’application

affiché comme élément de ligne dans la page Certificats, identifiants et
profils.

4. Dans la page Certificats, profils d’identificateurs&, sous Identificateurs,

recherchez l’élément de ligne ID d’application que vous avez créé. Sélectionnez
ensuite sa ligne pour afficher l’écran Modifier votre configuration d’ID
d’application.

Création d’un certificat pour Notification Hubs

Un certificat est nécessaire pour permettre au hub de notification de fonctionner avec

les services de notification Push Apple (APNS) et peut être fourni de deux manières :
 1. Création d’un certificat Push p12 qui peut être chargé directement sur le hub de
notification (l’approche d’origine)

2. Création d’un certificat p8 qui peut être utilisé pour l’authentification basée sur un
jeton (l’approche la plus récente et recommandée)

L’approche la plus récente présente un certain nombre d’avantages, comme indiqué

dans Authentification basée sur un jeton (HTTP/2) pour APNS. Moins d’étapes sont
nécessaires, mais elles sont également obligatoires pour des scénarios spécifiques.
Toutefois, des étapes ont été fournies pour les deux approches, l’une comme l’autre
pouvant être utilisée dans le cadre de ce tutoriel.

OPTION 1 : Création d’un certificat Push p12 qui peut être chargé
directement sur le hub de notification

1. Sur votre Mac, exécutez l’outil Trousseaux d’accès. Vous pouvez l’ouvrir à partir du
dossier Utilitaires ou du dossier Autre sur Launchpad.

2. Sélectionnez Trousseaux d’accès, développez Assistant de certification, puis

cliquez sur Demander un certificat à une autorité de certification.

７ Notes

Par défaut, Trousseaux d’accès sélectionne le premier élément de la liste. Cela

peut poser problème si vous êtes dans la catégorie Certificats et que Apple
Worldwide Developer Relations Certification Authority (Autorité de
certification des relations des développeurs dans le monde entier) ne figure
pas comme premier élément dans la liste. Veillez à disposer d’un élément
non-clé, ou que la clé Apple Worldwide Developer Relations Certification
Authority est sélectionnée, avant de générer la demande de signature de
certificat (CSR).
3. Sélectionnez votre adresse e-mail d’utilisateur, entrez votre nom commun, veillez
à spécifier Enregistré sur le disque, puis sélectionnez Continuer. Laissez le champ
Adresse de messagerie d’autorité de certification vide, car il n’est pas requis.

4. Entrez un nom pour le fichier de demande de signature de certificat dans

Enregistrer sous, sélectionnez l’emplacement dans Où, puis sélectionnez
Enregistrer.
 Cette action enregistre le fichier CSR à l’emplacement sélectionné. L’emplacement
par défaut est Bureau. Notez l’emplacement choisi pour ce fichier.

5. De retour sur la page Certificats, profils d’identificateurs & dans le portail

d’approvisionnement iOS , faites défiler jusqu’à l’option Notifications Push
cochée, puis sélectionnez Configurer pour créer le certificat.

6. La fenêtre Apple Push Notification service TLS/SSL Certificates (Certificats

TLS/SSL du service Apple Push Notification) s’affiche. Sélectionnez le bouton
Create Certificate (Créer un certificat) sous la section Development TLS/SSL
Certificate (Certificat de développement TLS/SSL).
 L’écran Create a new Certificate (Créer un certificat) s’affiche.

７ Notes

Ce didacticiel utilise un certificat de développement. Le même processus est

utilisé lors de l’inscription d’un certificat de production. Assurez-vous
simplement que vous utilisez le même type de certificat quand vous envoyez
des notifications.

7. Sélectionnez Choose File (Choisir un fichier), accédez à l’emplacement où vous

avez enregistré le fichier de demande de signature de certificat, puis double-
cliquez sur le nom du certificat à charger. Sélectionnez Continuer.

8. Une fois que le portail a créé un certificat, sélectionnez le bouton Télécharger.

Enregistrez le certificat et notez son emplacement pour le retrouver facilement.

Le certificat est téléchargé et enregistré sur votre ordinateur dans le dossier

Téléchargements.

７ Notes
 Par défaut, le certificat de développement téléchargé se nomme
aps_development.cer.

9. Double-cliquez sur le certificat Push téléchargé aps_development.cer. Cette

opération installe le nouveau certificat dans le Trousseau, comme indiqué dans
l’image suivante :

７ Notes

Bien que le nom de votre certificat puisse être différent, il portera le préfixe
Apple Development iOS Push Notification Services et se verra associer
l’identificateur de bundle approprié.

10. Dans Trousseau d’accès, utilisez Ctrl + clic sur le certificat push que vous avez créé
dans la catégorie Certificats. Sélectionnez Exporter, nommez le fichier,
sélectionnez le format p12, puis sélectionnez Enregistrer.
 Vous pouvez choisir de protéger le certificat par un mot de passe, mais ce dernier
est facultatif. Cliquez sur OK si vous souhaitez ignorer l’étape de création du mot
de passe. Notez le nom du fichier et l’emplacement du certificat p12 exporté. Ces
informations sont nécessaires pour activer l’authentification avec APNs.

７ Notes

Le nom et l’emplacement de votre fichier p12 peuvent être différents de ceux

montrés dans ce tutoriel.

OPTION 2 : Création d’un certificat p8 qui peut être utilisé pour

l’authentification basée sur un jeton

1. Prenez note des détails suivants :

Préfixe d’ID d’application (ID d’équipe)

ID de bundle

2. De retour dans Certificats, identifiants et profils, cliquez sur Clés.

７ Notes

Si vous disposez déjà d’une clé configurée pour APNS, vous pouvez réutiliser
le certificat p8 que vous avez téléchargé juste après l’avoir créée. Dans ce cas,
vous pouvez ignorer les étapes 3 à 5.

3. Cliquez sur le bouton + (ou sur le bouton Créer une clé) pour créer une clé.
 4. Fournissez une valeur appropriée pour Nom de clé, activez l’option Apple Push
Notification Service (APNS) , puis cliquez sur Continuer, puis sur Inscrire dans
l’écran suivant.

5. Cliquez sur Télécharger, puis déplacez le fichier p8 (préfixé avec AuthKey_ ) vers un
répertoire local sécurisé, puis cliquez sur Terminé.

７ Notes

Veillez à conserver votre fichier p8 dans un emplacement sécurisé (et à

enregistrer une sauvegarde). Une fois votre clé téléchargée, elle ne peut pas
être retéléchargée, car la copie du serveur est supprimée.

6. Dans Clés, cliquez sur la clé que vous avez créée (ou une clé existante si vous avez
choisi de l’utiliser à la place).

7. Notez la valeur de l’ID de clé.

8. Ouvrez votre certificat .p8 dans l’application appropriée de votre choix, par
exemple Visual Studio Code . Notez la valeur de la clé (comprise entre -----
BEGIN PRIVATE KEY----- et -----END PRIVATE KEY----- ).

-----BEGIN PRIVATE KEY-----

<key_value>
-----END PRIVATE KEY-----

７ Notes

Il s’agit de la valeur de jeton qui sera utilisée pour configurer le hub de

notification.

À la fin de ces étapes, vous devez disposer des informations suivantes, dont vous vous
servirez dans Configurer votre hub de notification avec des informations APNS :

ID de l’équipe (voir l’étape 1)

ID de bundle (voir l’étape 1)
ID de clé (voir l’étape 7)
Valeur de jeton (valeur de clé p8 obtenue à l’étape 8)

Création d’un profil d’approvisionnement pour

l’application
1. Revenez au portail d’approvisionnement iOS , sélectionnez Certificats,
identifiants et profils, sélectionnez Profils dans le menu de gauche, puis
sélectionnez + pour créer un profil. L’écran Register a New Provisioning Profile
(Inscrire un nouveau profil de provisionnement) s’affiche.

2. Sélectionnez iOS App Development (Développement d’application iOS) sous

Development (Développement) comme type de profil de provisionnement, puis
sélectionnez Continue (Continuer).

3. Ensuite, dans la liste déroulante App ID, sélectionnez l’ID d’application que vous
avez créé, puis sélectionnez Continue.

4. Dans la fenêtre Select certificates (Sélectionner des certificats), sélectionnez le

certificat de développement utilisé pour la signature de code, puis sélectionnez
Continuer.

７ Notes

Ce certificat n’est pas le certificat Push que vous avez créé à l’étape
précédente. Il s’agit de votre certificat de développement. S’il n’en existe pas,
vous devez le créer, car il s’agit d’un prérequis pour ce tutoriel. Vous pouvez
 créer des certificats de développeur dans le portail des développeurs
Apple , par le biais de Xcode ou dans Visual Studio.

5. Revenez à la page Certificats, identifiants et profils, sélectionnez Profils dans le

menu de gauche, puis sélectionnez + pour créer un profil. L’écran Register a New
Provisioning Profile (Inscrire un nouveau profil de provisionnement) s’affiche.

6. Dans la fenêtre Select certificates (Sélectionner des certificats), sélectionnez le

certificat de développement que vous avez créé. Sélectionnez Continuer.

7. Sélectionnez les appareils à utiliser pour le test, puis sélectionnez Continue.

8. Pour finir, choisissez un nom pour le profil dans Provisioning Profile Name (Nom
du profil de provisionnement), puis sélectionnez Generate (Générer).

9. Une fois le profil de provisionnement créé, sélectionnez Télécharger. Notez son

emplacement pour le retrouver facilement.

10. Accédez à l’emplacement du profil de provisionnement, puis double-cliquez sur le

profil pour l’installer sur votre machine de développement.

Création d’un concentrateur de notification

Dans cette section, vous allez créer un hub de notifications et configurer
l’authentification avec APNS. Vous pouvez utiliser un certificat Push p12 ou
l’authentification basée sur un jeton. Si vous souhaitez utiliser un hub de notification
que vous avez déjà créé, vous pouvez passer directement à l’étape 5.

1. Connectez-vous à Azure .

2. Cliquez sur Créer une ressource, recherchez et choisissez Hub de notification, puis
cliquez sur Créer.

3. Mettez à jour les champs suivants, puis cliquez sur Créer :

 DÉTAILS DE BASE

Abonnement : choisissez l’abonnement cible dans la liste déroulante.

Groupe de ressources : créez un groupe de ressources ou (sélectionnez un groupe
existant).

DÉTAILS DE L’ESPACE DE NOMS

Espace de noms du hub de notification : entrez un nom global unique pour

l’espace de noms du hub de notification.

７ Notes

Vérifiez que l’option Créer est sélectionnée pour ce champ.

DÉTAILS DU HUB DE NOTIFICATIONS

Hub de notification : entrez un nom pour le hub de notifications.

Emplacement : choisissez un emplacement approprié dans la liste déroulante.
Niveau tarifaire : conservez l’option par défaut Gratuit.

７ Notes

Sauf si vous avez atteint le nombre maximal de hubs au niveau gratuit.

4. Une fois que le hub de notifications a été provisionné, accédez à cette ressource.

5. Accédez à votre nouveau hub de notifications.

6. Sélectionnez Stratégies d’accès dans la liste (sous GÉRER).

7. Notez les valeurs de Nom de la stratégie ainsi que les valeurs de Chaîne de
connexion correspondantes.

Configurer votre hub de notification avec des

informations APNS
Sous Services de notification, sélectionnez Apple, puis suivez les étapes appropriées en
fonction de l’approche que vous avez choisie dans la section Création d’un certificat
pour Notification Hubs.

７ Notes
 Utilisez uniquement le mode Production ou Application si vous souhaitez envoyer
des notifications Push aux utilisateurs ayant acheté votre application dans le Store.

OPTION 1 : Utilisation d’un certificat Push .p12

1. Sélectionnez Certificate.

2. Sélectionnez l’icône du fichier.

3. Sélectionnez le fichier .p12 exporté précédemment, puis sélectionnez Ouvrir.

4. S’il y a lieu, entrez le mot de passe correct.

5. Sélectionnez le mode Bac à sable.

6. Sélectionnez Enregistrer.

OPTION 2 : Utilisation de l’authentification basée sur un

jeton
1. Sélectionnez Jeton.

2. Entrez les valeurs suivantes déjà en votre possession :

ID de clé
ID de bundle
ID de l’équipe
Jeton

3. Choisissez Bac à sable.

4. Sélectionnez Enregistrer.

Configurer votre hub de notification avec des

informations FCM
1. Sélectionnez Google (GCM/FCM) dans la section Paramètres du menu de gauche.
2. Entrez la clé du serveur que vous avez notée à partir de la console Google
Firebase.
3. Sélectionnez Enregistrer dans la barre d’outils.
Créer une application back-end d’API web
[Link] Core
Dans cette section, vous allez créer le back-end d’API web [Link] Core pour gérer
l’inscription d’appareil et l’envoi de notifications à l’application mobile React Native.

Créer un projet web

1. Dans Visual Studio, sélectionnez Fichier>Nouvelle solution.

2. Sélectionnez .NET Core>Application>[Link] Core>API>Suivant.

3. Dans la boîte de dialogue Configurer votre nouvelle API web [Link] Core,
sélectionnez .NET Core 3.1 comme Framework cible.

4. Entrez PushDemoApi comme Nom du projet, puis sélectionnez Créer.

5. Démarrez le débogage (Commande + Entrée) pour tester l’application basée sur

un modèle.

７ Notes

L’application basée sur un modèle est configurée pour utiliser le

WeatherForecastController en tant que launchUrl. Ce dernier est défini dans
Propriétés>[Link].

Si un message indiquant qu’un certificat de développement non valide a été

trouvé apparaît :

a. Cliquez sur Oui pour accepter d’exécuter l’outil « dotnet dev-certs https »
afin de résoudre ce problème. L’outil « dotnet dev-certs https » vous invite
ensuite à entrer un mot de passe pour le certificat et le mot de passe pour
votre trousseau.

b. Cliquez sur Oui quand vous êtes invité à installer et à approuver le

nouveau certificat, puis entrez le mot de passe de votre trousseau.

6. Développez le dossier Controllers, puis supprimez [Link].

7. Supprimez [Link].
 8. Configurez les valeurs de configuration locales à l’aide de l’outil Secret Manager.
Le découplage des secrets de la solution garantit qu’ils ne se trouvent pas dans le
contrôle de code source. Ouvrez Terminal, puis accédez au répertoire du fichier
projet et exécutez les commandes suivantes :

Bash

dotnet user-secrets init

dotnet user-secrets set "NotificationHub:Name" <value>
dotnet user-secrets set "NotificationHub:ConnectionString" <value>

Remplacez les valeurs d’espace réservé par vos propres valeurs de nom de hub de
notification et de chaîne de connexion. Vous les avez notées dans la section Créer
un hub de notification. Sinon, vous pouvez les rechercher dans Azure .

NotificationHub:Name :
Consultez Nom dans le résumé Bases en haut de Vue d’ensemble.

NotificationHub:ConnectionString :
Consultez DefaultFullSharedAccessSignature dans Stratégies d’accès.

７ Notes

Pour les scénarios de production, vous pouvez envisager des options telles
qu’Azure KeyVault pour stocker la chaîne de connexion de manière
sécurisée. Par souci de simplicité, les secrets sont ajoutés aux paramètres
d’application d’Azure App Service .

Authentifier les clients à l’aide d’une clé API (facultatif)

Les clés API ne sont pas aussi sécurisées que les jetons, mais sont suffisantes dans le
cadre de ce tutoriel. Une clé API peut être facilement configurée via le middleware
(intergiciel) [Link].

1. Ajoutez la clé API aux valeurs de configuration locales.

Bash

dotnet user-secrets set "Authentication:ApiKey" <value>

７ Notes
 Vous devez remplacer la valeur d’espace réservé par la vôtre et en prendre
note.

2. Utilisez Ctrl + clic sur le projet PushDemoApi, choisissez Nouveau dossier dans le
menu Ajouter, puis cliquez sur Ajouter en utilisant Authentication comme Nom de
dossier.

3. Utilisez Ctrl + clic sur le dossier Authentication, puis choisissez Nouveau fichier
dans le menu Ajouter.

4. Sélectionnez Général>Classe vide, entrez [Link] pour le Nom, puis

cliquez sur Nouveau en ajoutant l’implémentation suivante.

C#

using [Link];

namespace [Link]
{
public class ApiKeyAuthOptions : AuthenticationSchemeOptions
{
public const string DefaultScheme = "ApiKey";
public string Scheme => DefaultScheme;
public string ApiKey { get; set; }
}
}

5. Ajoutez une autre Classe vide au dossier Authentication appelée

[Link], puis ajoutez l’implémentation suivante.

C#

using System;
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];

namespace [Link]
{
public class ApiKeyAuthHandler :
AuthenticationHandler<ApiKeyAuthOptions>
{
const string ApiKeyIdentifier = "apikey";
 public ApiKeyAuthHandler(
IOptionsMonitor<ApiKeyAuthOptions> options,
ILoggerFactory logger,
UrlEncoder encoder,
ISystemClock clock)
: base(options, logger, encoder, clock) {}

protected override Task<AuthenticateResult>

HandleAuthenticateAsync()
{
string key = [Link];

if ([Link][ApiKeyIdentifier].Any())
{
key =
[Link][ApiKeyIdentifier].FirstOrDefault();
}
else if ([Link](ApiKeyIdentifier))
{
if ([Link](ApiKeyIdentifier, out var
queryKey))
key = queryKey;
}

if ([Link](key))
return [Link]([Link]("No api
key provided"));

if (![Link](key, [Link],
[Link]))
return [Link]([Link]("Invalid
api key."));

var identities = new List<ClaimsIdentity> {

new ClaimsIdentity("ApiKeyIdentity")
};

var ticket = new AuthenticationTicket(

new ClaimsPrincipal(identities), [Link]);

return [Link]([Link](ticket));
}
}
}

７ Notes

Un gestionnaire d’authentification est un type qui implémente le

comportement d’un schéma, dans ce cas un modèle de clé API personnalisé.
6. Ajoutez une autre Classe vide au dossier Authentication appelée
[Link], puis ajoutez l’implémentation suivante.

C#

using System;
using [Link];

namespace [Link]
{
public static class AuthenticationBuilderExtensions
{
public static AuthenticationBuilder AddApiKeyAuth(
this AuthenticationBuilder builder,
Action<ApiKeyAuthOptions> configureOptions)
{
return builder
.AddScheme<ApiKeyAuthOptions, ApiKeyAuthHandler>(
[Link],
configureOptions);
}
}
}

７ Notes

Cette méthode d’extension simplifie le code de configuration du middleware

dans [Link] ce qui le rend plus lisible et généralement plus facile à suivre.

7. Dans [Link], mettez à jour la méthode ConfigureServices pour configurer

l’authentification de la clé API sous l’appel à la méthode [Link].

C#

using [Link];
using [Link];
using [Link];

public void ConfigureServices(IServiceCollection services)

{
[Link]();

[Link](options =>
{
[Link] =
[Link];
[Link] =
[Link];
 }).AddApiKeyAuth([Link]("Authentication").Bind);
}

8. Toujours dans [Link], mettez à jour la méthode Configure pour appeler les
méthodes d’extension UseAuthentication et UseAuthorization sur
l’IApplicationBuilder de l’application. Assurez-vous que ces méthodes sont
appelées après UseRouting et avant [Link].

C#

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)

{
if ([Link]())
{
[Link]();
}

[Link]();

[Link]();

[Link]();

[Link]();

[Link](endpoints =>
{
[Link]();
});
}

７ Notes

L’appel d’UseAuthentication inscrit le middleware qui utilise les schémas

d’authentification enregistrés (à partir de ConfigureServices). Elle doit être
appelée avant tout middleware qui dépend de l’authentification d’utilisateurs.

Ajouter des dépendances et configurer des services

[Link] Core prend en charge le modèle de conception logicielle d’injection de
dépendances, technique qui permet d’obtenir une inversion de contrôle entre les classes
et leurs dépendances.

L’utilisation du hub de notification et du SDK Notification Hubs pour les opérations de

back-end est encapsulée dans un service. Le service est inscrit et mis à disposition par
le biais d’une abstraction appropriée.

1. Utilisez Ctrl + clic sur le dossier Dependencies, puis choisissez Gérer les packages
NuGet... .

2. Recherchez [Link] et assurez-vous qu’il est activé.

3. Cliquez sur Ajouter des packages, puis cliquez sur Accepter quand vous êtes invité
à accepter les termes du contrat de licence.

4. Utilisez Ctrl + clic sur le projet PushDemoApi, choisissez Nouveau dossier dans le
menu Ajouter, puis cliquez sur Ajouter en utilisant Models comme Nom de
dossier.

5. Utilisez Ctrl + clic sur le dossier Models, puis choisissez Nouveau fichier dans le
menu Ajouter.

6. Sélectionnez Général>Classe vide, entrez [Link] pour le Nom, puis

cliquez sur Nouveau en ajoutant l’implémentation suivante.

C#

namespace [Link]
{
public class PushTemplates
{
public class Generic
{
public const string Android = "{ \"notification\": {
\"title\" : \"PushDemo\", \"body\" : \"$(alertMessage)\"}, \"data\" : {
\"action\" : \"$(alertAction)\" } }";
public const string iOS = "{ \"aps\" : {\"alert\" :
\"$(alertMessage)\"}, \"action\" : \"$(alertAction)\" }";
}

public class Silent

{
public const string Android = "{ \"data\" : {\"message\" :
\"$(alertMessage)\", \"action\" : \"$(alertAction)\"} }";
public const string iOS = "{ \"aps\" : {\"content-
available\" : 1, \"apns-priority\": 5, \"sound\" : \"\", \"badge\" :
0}, \"message\" : \"$(alertMessage)\", \"action\" : \"$(alertAction)\"
}";
}
}
}

７ Notes
 Cette classe contient les charges utiles de notification sous forme de jetons
pour les notifications génériques et silencieuses requises par ce scénario. Les
charges utiles sont définies en dehors de l’installation pour permettre
l’expérimentation sans avoir à mettre à jour les installations existantes via le
service. La gestion des modifications apportées aux installations de cette
façon n’entre pas dans le cadre de ce tutoriel. Pour la production, envisagez
des modèles personnalisés.

7. Ajoutez une autre Classe vide au dossier Models appelée [Link], puis
ajoutez l’implémentation suivante.

C#

using [Link];
using [Link];

namespace [Link]
{
public class DeviceInstallation
{
[Required]
public string InstallationId { get; set; }

[Required]
public string Platform { get; set; }

[Required]
public string PushChannel { get; set; }

public IList<string> Tags { get; set; } = [Link]<string>

();
}
}

8. Ajoutez une autre Classe vide au dossier Models appelée [Link],

puis ajoutez l’implémentation suivante.

C#

using System;

namespace [Link]
{
public class NotificationRequest
{
public string Text { get; set; }
public string Action { get; set; }
public string[] Tags { get; set; } = [Link]<string>();
public bool Silent { get; set; }
 }
}

9. Ajoutez une autre Classe vide au dossier Models appelée

[Link], puis ajoutez l’implémentation suivante.

C#

using [Link];

namespace [Link]
{
public class NotificationHubOptions
{
[Required]
public string Name { get; set; }

[Required]
public string ConnectionString { get; set; }
}
}

10. Ajoutez au projet PushDemoApi un nouveau dossier appelé Services.

11. Ajoutez une Interface vide au dossier Services appelée [Link], puis
ajoutez l’implémentation suivante.

C#

using [Link];
using [Link];
using [Link];

namespace [Link]
{
public interface INotificationService
{
Task<bool> CreateOrUpdateInstallationAsync(DeviceInstallation
deviceInstallation, CancellationToken token);
Task<bool> DeleteInstallationByIdAsync(string installationId,
CancellationToken token);
Task<bool> RequestNotificationAsync(NotificationRequest
notificationRequest, CancellationToken token);
}
}

12. Ajoutez au dossier Services une Classe vide appelée [Link],

puis ajoutez le code suivant pour implémenter l’interface INotificationService :
C#

using System;
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];

namespace [Link]
{
public class NotificationHubService : INotificationService
{
readonly NotificationHubClient _hub;
readonly Dictionary<string, NotificationPlatform>
_installationPlatform;
readonly ILogger<NotificationHubService> _logger;

public NotificationHubService(IOptions<NotificationHubOptions>
options, ILogger<NotificationHubService> logger)
{
_logger = logger;
_hub =
[Link](
[Link],
[Link]);

_installationPlatform = new Dictionary<string,

NotificationPlatform>
{
{ nameof([Link]).ToLower(),
[Link] },
{ nameof([Link]).ToLower(),
[Link] }
};
}

public async Task<bool>

CreateOrUpdateInstallationAsync(DeviceInstallation deviceInstallation,
CancellationToken token)
{
if
([Link](deviceInstallation?.InstallationId) ||
[Link](deviceInstallation?.Platform)
||

[Link](deviceInstallation?.PushChannel))
return false;

var installation = new Installation()

{
 InstallationId = [Link],
PushChannel = [Link],
Tags = [Link]
};

if
(_installationPlatform.TryGetValue([Link], out var
platform))
[Link] = platform;
else
return false;

try
{
await
_hub.CreateOrUpdateInstallationAsync(installation, token);
}
catch
{
return false;
}

return true;
}

public async Task<bool> DeleteInstallationByIdAsync(string

installationId, CancellationToken token)
{
if ([Link](installationId))
return false;

try
{
await _hub.DeleteInstallationAsync(installationId,
token);
}
catch
{
return false;
}

return true;
}

public async Task<bool>

RequestNotificationAsync(NotificationRequest notificationRequest,
CancellationToken token)
{
if (([Link] &&
[Link](notificationRequest?.Action))
||
(![Link] &&
([Link](notificationRequest?.Text))
||
[Link](notificationRequest?.Action)))
return false;

var androidPushTemplate = [Link] ?

[Link] :
[Link];

var iOSPushTemplate = [Link] ?

[Link] :
[Link];

var androidPayload = PrepareNotificationPayload(

androidPushTemplate,
[Link],
[Link]);

var iOSPayload = PrepareNotificationPayload(

iOSPushTemplate,
[Link],
[Link]);

try
{
if ([Link] == 0)
{
// This will broadcast to all users registered in
the notification hub
await
SendPlatformNotificationsAsync(androidPayload, iOSPayload, token);
}
else if ([Link] <= 20)
{
await
SendPlatformNotificationsAsync(androidPayload, iOSPayload,
[Link], token);
}
else
{
var notificationTasks = [Link]
.Select((value, index) => (value, index))
.GroupBy(g => [Link] / 20, i => [Link])
.Select(tags =>
SendPlatformNotificationsAsync(androidPayload, iOSPayload, tags,
token));

await [Link](notificationTasks);
}

return true;
}
catch (Exception e)
{
_logger.LogError(e, "Unexpected error sending
notification");
return false;
 }
}

string PrepareNotificationPayload(string template, string text,

string action) => template
.Replace("$(alertMessage)", text,
[Link])
.Replace("$(alertAction)", action,
[Link]);

Task SendPlatformNotificationsAsync(string androidPayload,

string iOSPayload, CancellationToken token)
{
var sendTasks = new Task[]
{
_hub.SendFcmNativeNotificationAsync(androidPayload,
token),
_hub.SendAppleNativeNotificationAsync(iOSPayload,
token)
};

return [Link](sendTasks);
}

Task SendPlatformNotificationsAsync(string androidPayload,

string iOSPayload, IEnumerable<string> tags, CancellationToken token)
{
var sendTasks = new Task[]
{
_hub.SendFcmNativeNotificationAsync(androidPayload,
tags, token),
_hub.SendAppleNativeNotificationAsync(iOSPayload, tags,
token)
};

return [Link](sendTasks);
}
}
}

７ Notes

L’expression d’étiquette fournie à SendTemplateNotificationAsync est limitée

à 20 étiquettes. Elle est limitée à 6 pour la plupart des opérateurs, mais
l’expression contient uniquement des opérateurs OU (||) dans ce cas. S’il y a
plus de 20 étiquettes dans la demande, elles doivent être réparties en
plusieurs demandes. Pour plus d’informations, consultez la documentation
Routage et expressions d’étiquette.
 13. Dans [Link], mettez à jour la méthode ConfigureServices pour ajouter
NotificationHubsService en tant qu’implémentation singleton
d’INotificationService.

C#

using [Link];
using [Link];

public void ConfigureServices(IServiceCollection services)

{
...

[Link]<INotificationService, NotificationHubService>
();

[Link]<NotificationHubOptions>()
.Configure([Link]("NotificationHub").Bind)
.ValidateDataAnnotations();
}

Créer l’API des notifications

1. Utilisez Ctrl + clic sur le dossier Controllers, puis choisissez Nouveau fichier dans
le menu Ajouter.

2. Sélectionnez [Link] Core>Classe de contrôleur d’API web, entrez

NotificationsController comme Nom, puis cliquez sur Nouveau.

７ Notes

Si vous utilisez Visual Studio 2019 , choisissez le modèle Contrôleur d’API

avec actions de lecture/écriture.

3. Ajoutez les espaces de nom suivants en haut du fichier.

C#

using [Link];
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];
4. Mettez à jour le contrôleur basé sur un modèle pour le faire dériver de
ControllerBase et le décorer avec l’attribut ApiController.

C#

[ApiController]
[Route("api/[controller]")]
public class NotificationsController : ControllerBase
{
// Templated methods here
}

７ Notes

La classe de base du contrôleur prend en charge les vues, mais ce n’est pas
nécessaire dans ce cas et peut donc être utilisé à la place. Si vous utilisez
Visual Studio 2019 , vous pouvez ignorer cette étape.

5. Si vous avez choisi d’effectuer la section Authentifier les clients à l’aide d’une clé
API, vous devez décorer NotificationsController avec l’attribut Authorize
également.

C#

[Authorize]

6. Mettez à jour le constructeur pour accepter l’instance inscrite

d’INotificationService en tant qu’argument et assignez-la à un membre readonly.

C#

readonly INotificationService _notificationService;

public NotificationsController(INotificationService
notificationService)
{
_notificationService = notificationService;
}

7. Dans [Link] (dans le dossier Propriétés ), remplacez le launchUrl par

weatherforecast api/notifications pour qu’il corresponde à l’URL spécifiée dans

l’attribut RegistrationsControllerRoute .
 8. Démarrer le débogage (commande + Entrée) pour vérifier que l’application utilise
le nouveau NotificationsController et retourne un état 401 Non autorisé.

７ Notes

Visual Studio risque de ne pas lancer automatiquement l’application dans le

navigateur. Vous allez dorénavant utiliser Postman pour tester l’API.

9. Sous un nouvel onglet Postman , définissez la demande sur GET. Entrez l’adresse
ci-dessous en remplaçant l’espace réservé <applicationUrl> par l’applicationUrl
https trouvé dans Propriétés>[Link].

Bash

<applicationUrl>/api/notifications

７ Notes

La valeur applicationUrl doit être « [Link] » pour le profil par

défaut. Si vous utilisez IIS (par défaut dans Visual Studio 2019 sur
Windows), vous devez utiliser la valeur applicationUrl spécifiée dans l’élément
iisSettings à la place. Vous recevrez une réponse 404 si l’adresse est
incorrecte.

10. Si vous avez choisi d’effectuer la section Authentifier les clients à l’aide d’une clé
API, veillez à configurer les en-têtes de demande pour inclure votre valeur apikey.

Clé Valeur

apikey <your_api_key>

11. Cliquez sur le bouton Envoyer.

７ Notes

Vous devez recevoir un état 200 OK avec du contenu JSON.

Si vous recevez un avertissement Vérification du certificat SSL, vous pouvez

désactiver le paramètre Postman de vérification de certificat SSL de la
demande dans les Paramètres.
12. Dans [Link], remplacez les méthodes de classe basées sur un
modèle par le code suivant.

C#

[HttpPut]
[Route("installations")]
[ProducesResponseType((int)[Link])]
[ProducesResponseType((int)[Link])]
[ProducesResponseType((int)[Link])]
public async Task<IActionResult> UpdateInstallation(
[Required]DeviceInstallation deviceInstallation)
{
var success = await _notificationService
.CreateOrUpdateInstallationAsync(deviceInstallation,
[Link]);

if (!success)
return new UnprocessableEntityResult();

return new OkResult();

}

[HttpDelete()]
[Route("installations/{installationId}")]
[ProducesResponseType((int)[Link])]
[ProducesResponseType((int)[Link])]
[ProducesResponseType((int)[Link])]
public async Task<ActionResult> DeleteInstallation(
[Required][FromRoute]string installationId)
{
var success = await _notificationService
.DeleteInstallationByIdAsync(installationId,
[Link]);

if (!success)
return new UnprocessableEntityResult();

return new OkResult();

}

[HttpPost]
[Route("requests")]
[ProducesResponseType((int)[Link])]
[ProducesResponseType((int)[Link])]
[ProducesResponseType((int)[Link])]
public async Task<IActionResult> RequestPush(
[Required]NotificationRequest notificationRequest)
{
if (([Link] &&
[Link](notificationRequest?.Action)) ||
(![Link] &&
[Link](notificationRequest?.Text)))
return new BadRequestResult();
 var success = await _notificationService
.RequestNotificationAsync(notificationRequest,
[Link]);

if (!success)
return new UnprocessableEntityResult();

return new OkResult();

}

Créer l’application API

Vous créez maintenant une application API dans Azure App Service pour héberger le
service back-end.

1. Connectez-vous au portail Azure .

2. Cliquez sur Créer une ressource, recherchez et choisissez Application API, puis
cliquez sur Créer.

3. Mettez à jour les champs suivants, puis cliquez sur Créer.

Nom de l’application :
entrez un nom global unique pour l’application API.

Abonnement :
Choisissez l’Abonnement cible dans lequel vous avez créé le hub de notification.

Groupe de ressources :
Choisissez le Groupe de ressources cible dans lequel vous avez créé le hub de
notification.

Plan App Service/Emplacement :

Créez un plan App Service.

７ Notes

Passez de l’option par défaut à un plan qui comprend la prise en charge de

SSL. Sinon, vous devrez prendre les mesures appropriées lors de l’utilisation
de l’application mobile pour empêcher le blocage des demandes http.

Application Insights :
Conservez l’option suggérée (une nouvelle ressource sera créée avec ce nom) ou
choisissez une ressource existante.
 4. Une fois l’application API provisionnée, accédez à cette ressource.

5. Notez la propriété URL dans le résumé Bases en haut de la Vue d’ensemble. Cette
URL représente le point de terminaison back-end qui sera utilisé plus loin dans ce
tutoriel.

７ Notes

L’URL utilise le nom de l’application API que vous avez spécifié

précédemment, avec le format [Link] .

6. Sélectionnez Configuration dans la liste (sous Paramètres).

7. Pour chacun des paramètres ci-dessous, cliquez sur Nouveau paramètre

d’application afin d’entrer le Nom et une Valeur, puis cliquez sur OK.

Nom Valeur

Authentication:ApiKey <api_key_value>

NotificationHub:Name <hub_name_value>

NotificationHub:ConnectionString <hub_connection_string_value>

７ Notes

Ce sont les mêmes paramètres que ceux que vous avez définis dans les
paramètres utilisateur. Vous devez être en mesure de les reprendre. Le
paramètre Authentication:ApiKey est uniquement obligatoire si vous avez
choisi d’effectuer la section Authentifier les clients à l’aide d’une clé API.
Pour les scénarios de production, vous pouvez envisager des options telles
qu’Azure KeyVault . Ceux-ci ont été ajoutés en tant que paramètres
d’application pour des raisons de simplicité dans ce cas.

8. Une fois tous les paramètres d’application ajoutés, cliquez sur Enregistrer, puis
Continuer.

Publier le service back-end

Ensuite, vous déployez l’application sur l’application API afin de la rendre accessible à
tous les appareils.
 ７ Notes

Les étapes suivantes sont spécifiques à Visual Studio pour Mac . Si vous utilisez
Visual Studio 2019 sur Windows, le flux de publication sera différent. Consultez
Publier sur Azure App Service sur Windows.

1. Si ce n’est déjà fait, modifiez votre configuration de Debug en Release.

2. Utilisez Ctrl + Clic sur le projet PushDemoApi, puis choisissez Publier sur Azure...
dans le menu Publier.

3. Suivez le processus d’authentification si vous y êtes invité. Utilisez le compte que

vous avez utilisé dans la section Créer l’application API précédente.

4. Sélectionnez l’application API Azure App Service que vous avez créée dans la liste
comme cible de publication, puis cliquez sur Publier.

Après en avoir terminé avec l’Assistant, il publie l’application dans Azure, puis ouvre
l’application. Prenez note de l’URL si ce n’est déjà fait. Cette URL représente le point de
terminaison back-end qui est utilisé plus loin dans ce tutoriel.

Validation de l’API publiée

1. Dans Postman , ouvrez un nouvel onglet, définissez la demande sur PUT et
entrez l’adresse ci-dessous. Remplacez l’espace réservé par l’adresse de base que
vous avez notée dans la section précédente Publier le service back-end.

C#

[Link]

７ Notes

L’adresse de base doit être au format [Link] .

2. Si vous avez choisi d’effectuer la section Authentifier les clients à l’aide d’une clé
API, veillez à configurer les en-têtes de demande pour inclure votre valeur apikey.

Clé Valeur

apikey <your_api_key>
 3. Choisissez l’option raw (brut) pour Body (Corps), choisissez JSON dans la liste des
options de format, puis incluez du contenu JSON d’espace réservé :

JSON

{}

4. Cliquez sur Envoyer.

７ Notes

Vous devez recevoir un état 422 UnprocessableEntity du service.

5. Effectuez à nouveau les étapes 1 à 4, mais en spécifiant cette fois le point de

terminaison des demandes pour vérifier que vous recevez une réponse 400
Demande incorrecte.

Bash

[Link]

７ Notes

Il n’est pas encore possible de tester l’API à l’aide de données de demande valides,
car cela nécessite des informations propres à la plateforme de la part de
l’application mobile cliente.

Créer une application React Native

multiplateforme
Dans cette section, vous allez créer une application mobile React Native qui
implémente des notifications Push en mode multiplateforme.

Elle vous permet de vous inscrire auprès d’un hub de notification et de vous en
désinscrire par le biais du service back-end que vous avez créé.

Une alerte s’affiche quand une action est spécifiée et que l’application est au premier
plan. Sinon, les notifications s’affichent dans le centre de notifications.

７ Notes
 En général, vous effectuez les actions d’inscription (et de désinscription) au
moment approprié durant le cycle de vie de l’application (ou éventuellement dans
le cadre de votre première expérience d’exécution) sans entrées d’inscription ou de
désinscription explicites de la part de l’utilisateur. Toutefois, cet exemple demande
une entrée utilisateur explicite pour faciliter l’exploration et le test de cette
fonctionnalité.

Créer la solution React Native

1. Dans Terminal , mettez à jour vos outils d’environnement nécessaires pour utiliser
React Native à l’aide des commandes suivantes :

Bash

# install node
brew install node
# or update
brew update node
# install watchman
brew install watchman
# or update
brew upgrade watchman
# install cocoapods
sudo gem install cocoapods

2. Dans Terminal , si vous avez l’interface CLI React Native installée, exécutez la
commande suivante pour la désinstaller. Utilisez npx pour accéder
automatiquement à la dernière version de l’interface CLI React Native disponible :

Bash

npm uninstall -g react-native-cli

７ Notes

React Native a une interface de ligne de commande intégrée. Plutôt que

d’installer et de gérer globalement une version spécifique de l’interface CLI,
nous vous recommandons d’accéder à la version actuelle au moment de
l’exécution à l’aide de npx , fourni avec [Link]. Avec npx react-native
<command> , la version stable actuelle de l’interface CLI sera téléchargée et

exécutée au moment de l’exécution de la commande.

3. Accédez à votre dossier de projets dans lequel vous souhaitez créer la nouvelle
application. Utilisez le modèle basé sur TypeScript en spécifiant le paramètre --
template :

Bash

# init new project with npx

npx react-native init PushDemo --template react-native-template-
typescript

4. Exécutez le serveur Metro, qui génère des bundles JavaScript et surveille toutes les
mises à jour du code pour actualiser les bundles en temps réel :

Bash

cd PushDemo
npx react-native start

5. Exécutez l’application iOS pour vérifier la configuration. Veillez à démarrer un

simulateur iOS ou à connecter un appareil iOS, avant d’exécuter la commande
suivante :

Bash

npx react-native run-ios

6. Exécutez l’application Android pour vérifier la configuration. Quelques étapes

supplémentaires sont nécessaires pour configurer un émulateur ou un appareil
Android afin de pouvoir accéder au serveur Metro dans React Native. Les
commandes suivantes génèrent un bundle JavaScript initial pour Android et le
placent dans le dossier de ressources.

Bash

# create assets folder for the bundle

mkdir android/app/scr/main/assets
# build the bundle
npx react-native bundle --platform android --dev true --entry-file
[Link] --bundle-output
android/app/src/main/assets/[Link] --assets-dest
android/app/src/main/res
# enable ability for sim to access the localhost
adb reverse tcp:8081 tcp:8081
 Ce script sera prédéployé avec la version initiale de l’application. Une fois déployé,
configurez votre émulateur ou appareil pour accéder au serveur Metro en
spécifiant l’adresse IP du serveur. Exécutez la commande suivante pour générer et
exécuter l’application Android :

Bash

npx react-native run-android

Une fois dans l’application, appuyez sur CMD+M (émulateur) ou secouez l’appareil
pour renseigner les paramètres du développeur, accédez à Settings > Change
Bundle Location et spécifiez l’adresse IP du serveur Metro avec le port par défaut :
<metro-server-ip-address>:8081 .

7. Dans le fichier [Link] , appliquez toute modification à la mise en page,

enregistrez-la et la modification est automatiquement reflétée dans les
applications iOS et Android.

７ Notes

Un guide de configuration détaillé de l’environnement de développement est

disponible dans la documentation officielle

Installer les packages nécessaires

Pour que cet exemple fonctionne, vous avez besoin des trois packages suivants :

1. Notifications Push iOS dans React Native - Projet GitHub

Ce package a été créé quand PushNotificationIOS a été fractionné du cœur de

React Native. Le package implémente en mode natif des notifications Push pour
iOS et fournit une interface React Native pour y accéder. Exécutez la commande
suivante pour installer le package :

Bash

yarn add @react-native-community/push-notification-ios

2. Multiplateforme de notifications Push React Native

Ce package implémente des notifications locales et distantes sur iOS et Android en

mode multiplateforme. Exécutez la commande suivante pour installer le package :
 Bash

yarn add react-native-push-notification

3. Package d’informations sur l’appareil Le package fournit des informations sur un

appareil en cours d’exécution. Utilisez-le pour définir un identificateur d’appareil,
qui est utilisé pour l’inscription à une notification Push. Exécutez la commande
suivante pour installer le package :

Bash

yarn add react-native-device-info

Implémenter les composants multiplateforme

1. Créez et implémentez DemoNotificationHandler :

TypeScript

import PushNotification from 'react-native-push-notification';

class DemoNotificationHandler {
private _onRegister: any;
private _onNotification: any;

onNotification(notification: any) {
[Link]('NotificationHandler:', notification);

if (typeof this._onNotification === 'function') {

this._onNotification(notification);
}
}

onRegister(token: any) {
[Link]('NotificationHandler:', token);

if (typeof this._onRegister === 'function') {

this._onRegister(token);
}
}

attachTokenReceived(handler: any) {
this._onRegister = handler;
}

attachNotificationReceived(handler: any) {
this._onNotification = handler;
}
}
 const handler = new DemoNotificationHandler();

[Link]({
onRegister: [Link](handler),
onNotification: [Link](handler),
permissions: {
alert: true,
badge: true,
sound: true,
},
popInitialNotification: true,
requestPermissions: true,
});

export default handler;

2. Créez et implémentez DemoNotificationService :

TypeScript

import PushNotification from 'react-native-push-notification';

import DemoNotificationHandler from './DemoNotificationHandler';

export default class DemoNotificationService {

constructor(onTokenReceived: any, onNotificationReceived: any) {
[Link](onTokenReceived);

[Link](onNotificationReceiv
ed);
[Link](function(number:
number) {
if(number > 0) {
[Link](0);
}
});
}

checkPermissions(cbk: any) {
return [Link](cbk);
}

requestPermissions() {
return [Link]();
}

cancelNotifications() {
[Link]();
}

cancelAll() {
[Link]();
}
 abandonPermissions() {
[Link]();
}
}

3. Créez et implémentez DemoNotificationRegistrationService :

TypeScript

export default class DemoNotificationService {

constructor(
readonly apiUrl: string,
readonly apiKey: string) {
}

async registerAsync(request: any): Promise<Response> {

const method = 'PUT';
const registerApiUrl =
`${[Link]}/notifications/installations`;
const result = await fetch(registerApiUrl, {
method: method,
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
'apiKey': [Link]
},
body: [Link](request)
});

[Link](registerApiUrl, method, request, result);

return result;
}

async deregisterAsync(deviceId: string): Promise<Response> {

const method = 'DELETE';
const deregisterApiUrl =
`${[Link]}/notifications/installations/${deviceId}`;
const result = await fetch(deregisterApiUrl, {
method: method,
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
'apiKey': [Link]
}
});

[Link](deregisterApiUrl, method, null, result);

return result;
}

private validateResponse(requestUrl: string, method: string,

requestPayload: any, response: Response) {
 [Link](`Request: ${method} ${requestUrl} =>
${[Link](requestPayload)}\nResponse: ${[Link]}`);
if (!response || [Link] != 200) {
throw `HTTP error ${[Link]}:
${[Link]}`;
}
}
}

4. Configurez l’application. Ouvrez [Link] et ajoutez la définition de script

suivante :

JSON

"configure": "cp .[Link] src/config/[Link]"

Exécutez ensuite ce script, qui copiera la configuration par défaut dans le dossier
config .

Bash

yarn configure

La dernière étape consiste à mettre à jour le fichier de configuration copié à l’étape

précédente avec les informations d’accès à l’API. Spécifiez les paramètres apiKey
et apiUrl :

TypeScript

[Link] = {
appName: "PushDemo",
env: "production",
apiUrl: "[Link]
apiKey: "<api-auth-key>",
};

Implémenter l’interface utilisateur multiplateforme

1. Définissez la mise en page

TypeScript

<View style={[Link]}>
{[Link] &&
<ActivityIndicator></ActivityIndicator>
 }
<View style={[Link]}>
<Button title="Register" onPress=
{[Link](this)} disabled={[Link]} />
</View>
<View style={[Link]}>
<Button title="Deregister" onPress=
{[Link](this)} disabled={[Link]}
/>
</View>
</View>

2. Appliquez les styles

css

const styles = [Link]({

container: {
flex: 1,
alignItems: "center",
justifyContent: 'flex-end',
margin: 50,
},
button: {
margin: 5,
width: "100%",
}
});

3. Initialisez le composant de page

TypeScript

state: IState;
notificationService: DemoNotificationService;
notificationRegistrationService: DemoNotificationRegistrationService;
deviceId: string;

constructor(props: any) {
super(props);
[Link] = [Link]();
[Link] = {
status: "Push notifications registration status is unknown",
registeredOS: "",
registeredToken: "",
isRegistered: false,
isBusy: false,
};

[Link] = new DemoNotificationService(

[Link](this),
[Link](this),
 );

[Link] = new
DemoNotificationRegistrationService(
[Link],
[Link],
);
}

4. Définissez des gestionnaires de clic de bouton

TypeScript

async onRegisterButtonPress() {
if (![Link] || ![Link]) {
[Link]("The push notifications token wasn't received.");
return;
}

let status: string = "Registering...";

let isRegistered = [Link];
try {
[Link]({ isBusy: true, status });
const pnPlatform = [Link] == "ios" ? "apns" :
"fcm";
const pnToken = [Link];
const request = {
installationId: [Link],
platform: pnPlatform,
pushChannel: pnToken,
tags: []
};
const response = await
[Link](request);
status = `Registered for ${[Link]} push
notifications`;
isRegistered = true;
} catch (e) {
status = `Registration failed: ${e}`;
}
finally {
[Link]({ isBusy: false, status, isRegistered });
}
}

async onDeregisterButtonPress() {
if (![Link])
return;

let status: string = "Deregistering...";

let isRegistered = [Link];
try {
[Link]({ isBusy: true, status });
 await
[Link]([Link]);
status = "Deregistered from push notifications";
isRegistered = false;
} catch (e) {
status = `Deregistration failed: ${e}`;
}
finally {
[Link]({ isBusy: false, status, isRegistered });
}
}

5. Traitez les notifications Push et les inscriptions de jetons reçues

TypeScript

onTokenReceived(token: any) {
[Link](`Received a notification token on ${[Link]}`);
[Link]({ registeredToken: [Link], registeredOS:
[Link], status: `The push notifications token has been received.` });

if ([Link] && [Link] &&

[Link]) {
[Link]();
}
}

onNotificationReceived(notification: any) {
[Link](`Received a push notification on
${[Link]}`);
[Link]({ status: `Received a push notification...` });

if ([Link]) {
[Link]([Link], `${[Link]}
action received`);
}
}
};

Configurer le projet Android natif pour les

notifications Push

Configurer les packages Android requis

Le package est automatiquement lié lors de la génération de l’application. Quelques
étapes supplémentaires sont nécessaires pour terminer le processus de configuration.
Configurer le manifeste Android
Dans votre fichier « android/app/src/main/[Link] », vérifiez le nom du
package, les autorisations et les services requis. Assurez-vous que vous avez inscrit les
récepteurs RNPushNotificationPublisher et RNPushNotificationBootEventReceiver , et
inscrit le service RNPushNotificationListenerService . Les métadonnées de notification
peuvent être utilisées pour personnaliser l’apparence de vos notifications Push.

XML

<manifest xmlns:android="[Link]
package="YOUR_PACKAGE_NAME">

<uses-permission android:name="[Link]" />

<uses-permission android:name="[Link].WAKE_LOCK" />
<uses-permission android:name="[Link]" />
<uses-permission
android:name="[Link].RECEIVE_BOOT_COMPLETED"/>

<application
android:name=".MainApplication"
android:label="@string/app_name"
android:usesCleartextTraffic="true"
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"
android:allowBackup="false"
android:theme="@style/AppTheme">

<meta-data
android:name="[Link].notification_channel_nam
e"
android:value="PushDemo Channel"/>
<meta-data
android:name="[Link].notification_channel_des
cription"
android:value="PushDemo Channel Description"/>
<meta-data
android:name="[Link].notification_foreground"
android:value="true"/>
<meta-data
android:name="[Link].notification_color"
android:resource="@android:color/white"/>

<receiver
android:name="[Link]
onPublisher" />
<receiver
android:name="[Link]
onBootEventReceiver">
<intent-filter>
<action android:name="[Link].BOOT_COMPLETED"
/>
 </intent-filter>
</receiver>

<service

android:name="[Link]
onListenerService"
android:exported="false" >
<intent-filter>
<action android:name="[Link].MESSAGING_EVENT"
/>
</intent-filter>
</service>

<activity
android:name=".MainActivity"
android:label="@string/app_name"

android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode
"
android:launchMode="singleTask"
android:windowSoftInputMode="adjustResize">
<intent-filter>
<action android:name="[Link]" />
<category android:name="[Link]" />
</intent-filter>
</activity>
<activity
android:name="[Link]" />
</application>

</manifest>

Configurer les services Google

Dans « android/app/[Link] », inscrivez les services Google :

Gradle

dependencies {
...
implementation '[Link]:firebase-analytics:17.3.0'
...
}

apply plugin: '[Link]-services'

Copiez le fichier « [Link] » que vous avez téléchargé lors de l’installation

de FCM dans le dossier de projet « android/app/ ».
Gérer les notifications Push pour Android
Vous avez configuré le service RNPushNotificationListenerService existant pour gérer
les notifications Push Android entrantes. Ce service a été inscrit précédemment dans le
manifeste de l’application. Il traite les notifications entrantes et les transmet par proxy à
la partie React Native multiplateforme. Aucune étape supplémentaire n’est nécessaire.

Configurer le projet iOS natif pour les

notifications Push

Configurer les packages iOS requis

Le package est automatiquement lié lors de la génération de l’application. Il vous
suffit d’installer les pods natifs :

Bash

npx pod-install

Configurer [Link] et [Link]

1. Accédez à votre dossier « PushDemo/ios » et ouvrez l’espace de travail «
[Link] », sélectionnez le projet supérieur « PushDemo » et
sélectionnez l’onglet « Capacités de signature & ».

2. Mettez à jour l’identificateur de bundle pour qu’il corresponde à la valeur utilisée

dans le profil de provisionnement.

3. Ajoutez deux nouvelles fonctionnalités à l’aide du bouton « + » :

Fonctionnalité en mode arrière-plan et notifications à distance de cycles.

Fonctionnalité des notifications Push

Gérer les notifications Push pour iOS

1. Ouvrez « AppDelegate.h » et ajoutez l’importation suivante :

objective-c

#import <UserNotifications/UNUserNotificationCenter.h>
2. Mettez à jour la liste des protocoles pris en charge par « AppDelegate » en
ajoutant UNUserNotificationCenterDelegate :

objective-c

@interface AppDelegate : UIResponder <UIApplicationDelegate,

RCTBridgeDelegate, UNUserNotificationCenterDelegate>

3. Ouvrez « AppDelegate.m » et configurez tous les rappels iOS requis :

objective-c

#import <UserNotifications/UserNotifications.h>
#import <RNCPushNotificationIOS.h>

...

// Required to register for notifications

- (void)application:(UIApplication *)application
didRegisterUserNotificationSettings:(UIUserNotificationSettings
*)notificationSettings
{
[RNCPushNotificationIOS
didRegisterUserNotificationSettings:notificationSettings];
}

// Required for the register event.

- (void)application:(UIApplication *)application
didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
{
[RNCPushNotificationIOS
didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
}

// Required for the notification event. You must call the completion
handler after handling the remote notification.
- (void)application:(UIApplication *)application
didReceiveRemoteNotification:(NSDictionary *)userInfo
fetchCompletionHandler:(void (^)
(UIBackgroundFetchResult))completionHandler
{
[RNCPushNotificationIOS didReceiveRemoteNotification:userInfo
fetchCompletionHandler:completionHandler];
}

// Required for the registrationError event.

- (void)application:(UIApplication *)application
didFailToRegisterForRemoteNotificationsWithError:(NSError *)error
{
[RNCPushNotificationIOS
didFailToRegisterForRemoteNotificationsWithError:error];
}
 // IOS 10+ Required for localNotification event
- (void)userNotificationCenter:(UNUserNotificationCenter *)center
didReceiveNotificationResponse:(UNNotificationResponse *)response
withCompletionHandler:(void (^)(void))completionHandler
{
[RNCPushNotificationIOS didReceiveNotificationResponse:response];
completionHandler();
}

// IOS 4-10 Required for the localNotification event.

- (void)application:(UIApplication *)application
didReceiveLocalNotification:(UILocalNotification *)notification
{
[RNCPushNotificationIOS didReceiveLocalNotification:notification];
}

//Called when a notification is delivered to a foreground app.

-(void)userNotificationCenter:(UNUserNotificationCenter *)center
willPresentNotification:(UNNotification *)notification
withCompletionHandler:(void (^)(UNNotificationPresentationOptions
options))completionHandler
{
completionHandler(UNAuthorizationOptionSound |
UNAuthorizationOptionAlert | UNAuthorizationOptionBadge);
}

Test de la solution
Vous pouvez maintenant tester l’envoi de notifications par le biais du service back-end.

Envoyer une notification de test

1. Ouvrez un nouvel onglet dans Postman .

2. Définissez la requête sur POST et entrez l’adresse suivante :

XML

[Link]

3. Si vous avez choisi d’effectuer la section Authentifier les clients à l’aide d’une clé
API, veillez à configurer les en-têtes de demande pour inclure votre valeur apikey.

Clé Valeur

apikey <your_api_key>
4. Choisissez l’option raw (brut) pour Body (Corps), choisissez JSON dans la liste des
options de format, puis incluez du contenu JSON d’espace réservé :

JSON

{
"text": "Message from Postman!",
"action": "action_a"
}

5. Sélectionnez le bouton Code qui apparaît dans le coin supérieur droit sous le
bouton Save (Enregistrer). La demande doit ressembler à l’exemple suivant quand
elle est affichée pour HTML (selon que vous avez inclus un en-tête apikey) :

HTML

POST /api/notifications/requests HTTP/1.1

Host: [Link]
apikey: <your_api_key>
Content-Type: application/json

{
"text": "Message from backend service",
"action": "action_a"
}

6. Exécutez l’application PushDemo sur au moins l’une des plateformes cibles

(Android et iOS).

７ Notes

Si vous effectuez un test sur Android, assurez-vous que vous n’êtes pas en
mode Debug, ou si l’application a été déployée au moment de son exécution,
forcez sa fermeture, puis redémarrez-la à partir du lanceur.

7. Dans l’application PushDemo, appuyez sur le bouton Register (Inscrire).

8. De retour dans Postman , fermez la fenêtre Generate Code Snippets (Générer

des extraits de code) (si ce n’est déjà fait), puis cliquez sur le bouton Send
(Envoyer).

9. Vérifiez que vous recevez une réponse 200 OK dans Postman et que l’alerte
s’affiche dans l’application sous la forme ActionA action received (Action ActionA
reçue).
 10. Fermez l’application PushDemo, puis recliquez sur Send dans Postman .

11. Vérifiez que vous recevez une réponse 200 OK dans Postman . Vérifiez qu’une
notification s’affiche dans la zone de notification pour l’application PushDemo
avec le message approprié.

12. Appuyez sur la notification pour confirmer qu’elle ouvre l’application et qu’elle a
affiché l’alerte ActionA action received.

13. De retour dans Postman , modifiez le corps de la demande précédent pour

envoyer une notification silencieuse en spécifiant action_b au lieu d’action_a pour
la valeur action.

JSON

{
"action": "action_b",
"silent": true
}

14. L’application toujours ouverte, cliquez sur le bouton Send dans Postman .

15. Vérifiez que vous recevez une réponse 200 OK dans Postman et que l’alerte
s’affiche dans l’application sous la forme ActionB action received au lieu d’ActionA
action received.

16. Fermez l’application PushDemo, puis recliquez sur Send dans Postman .

17. Vérifiez que vous recevez une réponse 200 OK dans Postman et que la
notification silencieuse n’apparaît pas dans la zone de notification.

Dépannage

Aucune réponse du service back-end

Lors du test local, vérifiez que le service back-end est en cours d’exécution et qu’il utilise
le port approprié.

Si vous effectuez le test par rapport à l’application API Azure, vérifiez que le service est
en cours d’exécution, qu’il a été déployé et qu’il a démarré sans erreur.

Veillez à vérifier que vous avez correctement spécifié l’adresse de base dans Postman
ou dans la configuration de l’application mobile lors du test par le biais du client.
L’adresse de base doit être [Link] ou
[Link] lors du test local.

Aucune notification reçue sur Android après le démarrage ou l’arrêt

d’une session de débogage
Veillez à vous réinscrire après le démarrage ou l’arrêt d’une session de débogage. Le
débogueur déclenche la génération d’un nouveau jeton Firebase. L’installation du hub
de notification doit également être mise à jour.

Réception d’un code d’état 401 du service back-end

Vérifiez que vous définissez l’en-tête de demande apikey et que cette valeur correspond
à celle que vous avez configurée pour le service back-end.

Si vous recevez cette erreur quand vous procédez à un test local, vérifiez que la valeur
de clé que vous avez définie dans la configuration du client correspond à la valeur du
paramètre utilisateur Authentication:ApiKey utilisée par l’API.

Si vous effectuez un test avec une application API, assurez-vous que la valeur de clé
dans le fichier de configuration du client correspond au paramètre d’application
Authentication:ApiKey que vous utilisez dans l’application API.

７ Notes

Si vous avez créé ou modifié ce paramètre après avoir déployé le service back-end,
vous devez redémarrer le service afin qu’il prenne effet.

Si vous avez choisi de ne pas effectuer la section Authentifier les clients à l’aide d’une clé
API, assurez-vous que vous n’avez pas appliqué l’attribut Authorize à la classe
NotificationsController.

Réception d’un code d’état 404 du service back-end

Vérifiez que le point de terminaison et la méthode de demande HTTP sont corrects. Par
exemple, les points de terminaison doivent être :

[PUT] [Link]
[DELETE] [Link]
<installation_id>

[POST] [Link]
Ou lors du test local :

[PUT] [Link]
[DELETE] [Link]
id>
[POST] [Link]

Quand vous spécifiez l’adresse de base dans l’application cliente, assurez-vous qu’elle se
termine par un caractère / . L’adresse de base doit être
[Link] ou [Link] lors du test local.

Inscription impossible et affichage d’un message d’erreur du hub

de notification

Vérifiez que l’appareil de test dispose d’une connectivité réseau. Ensuite, déterminez le
code d’état de la réponse HTTP en définissant un point d’arrêt pour inspecter la valeur
de propriété StatusCode dans HttpResponse.

Passez en revue les suggestions de résolution des problèmes précédentes, le cas

échéant, en fonction du code d’État.

Définissez un point d’arrêt sur les lignes qui retournent ces codes d’état pour l’API
concernée. Essayez ensuite d’appeler le service back-end lors du débogage local.

Vérifiez que le service back-end fonctionne comme prévu via Postman à l’aide de la
charge utile appropriée. Utilisez la charge utile réelle créée par le code client pour la
plateforme en question.

Passez en revue les sections de configuration propres à la plateforme pour vous assurer
qu’aucune étape n’a été manquée. Vérifiez que les valeurs appropriées sont résolues
pour les variables installation id et token pour la plateforme appropriée.

Affichage du message d’erreur selon lequel il est impossible de

résoudre un ID pour l’appareil
Passez en revue les sections de configuration propres à la plateforme pour vous assurer
qu’aucune étape n’a été manquée.

Liens connexes
Vue d’ensemble d’Azure Notification Hubs
Installation de Visual Studio pour Mac
 Installation de Visual Studio Code
Configuration de l’environnement de développement React Native
Kit de développement logiciel (SDK) Notification Hubs pour opérations backend
Kit de développement logiciel (SDK) Notification Hubs sur GitHub
S’inscrire auprès d’un back-end d’application
Gestion des inscriptions
Utilisation de balises
Utilisation des modèles personnalisés

Étapes suivantes
Vous devez maintenant disposer d’une application React Native de base connectée à un
hub de notification par le biais d’un service back-end, et qui peut envoyer et recevoir
des notifications.

Vous devrez probablement adapter à votre propre scénario l’exemple utilisé dans ce
tutoriel. L’implémentation d’une gestion des erreurs, d’une logique de nouvelle tentative
et d’une journalisation plus robustes est également recommandée.

Visual Studio App Center peut être rapidement intégré à des applications mobiles qui
fournissent des analytiques et des diagnostics pour faciliter la résolution des problèmes.
Tutoriel : Envoyer des notifications Push
aux applications Flutter à l’aide d’Azure
Notification Hubs via un service
principal
Article • 23/10/2023

Télécharger l’exemple

Dans ce tutoriel, vous allez utiliser Azure Notification Hubs pour envoyer des
notifications Push à une application Flutter ciblant Android et iOS.

Une API web [Link] Core back-end est utilisée pour gérer l’inscription d’appareils
pour le client à l’aide de l’approche d’installation la plus récente et la plus appropriée. Le
service envoie également des notifications Push en mode multiplateforme.

Ces opérations sont gérées à l’aide du SDK Notification Hubs pour les opérations back-
end . Vous trouverez plus d’informations sur l’approche globale dans la documentation
sur l’inscription à partir de votre back-end d’application.

Ce didacticiel vous familiarise avec les procédures suivantes :

＂ Configurer Push Notification Services et Azure Notification Hubs

＂ Créez une application back-end d’API web [Link] Core
＂ Créer une application Flutter multiplateforme
＂ Configurer le projet Android natif pour les notifications Push
＂ Configurer le projet iOS natif pour les notifications Push
＂ Tester la solution

Prérequis
Pour suivre ce tutoriel, vous avez besoin des éléments suivants :

Un abonnement Azure où vous pouvez créer et gérer les ressources.

Le kit de ressources Flutter (avec ses prérequis).
Visual Studio Code avec les plug-ins Flutter et Dart installés.
CocoaPods installé pour la gestion des dépendances de bibliothèque.
La capacité à exécuter l’application sur Android (appareils physiques ou
émulateurs) ou iOS (appareils physiques uniquement)
Pour Android, vous devez disposer des éléments suivants :

Un appareil physique de développeur déverrouillé ou un émulateur (exécutant l’API

26 et ultérieur avec Google Play Services installé)

Pour iOS, vous devez disposer des éléments suivants :

Un compte de développeur Apple actif.

Un appareil iOS physique inscrit dans votre compte de développeur (exécutant
iOS 13.0 et versions ultérieures).
Un certificat de développement .p12 installé dans votre trousseau vous
permettant d’exécuter une application sur un appareil physique.

７ Notes

Le simulateur iOS ne prend pas en charge les notifications distantes. Un appareil

physique est donc nécessaire lors de l’exploration de cet exemple sur iOS.
Toutefois, vous n’avez pas besoin d’exécuter l’application à la fois sur Android et
sur iOS pour suivre ce tutoriel.

Vous pouvez effectuer les étapes de cet exemple sans expérience préalable. Toutefois,
une connaissance des éléments suivants vous sera utile :

Portail des développeurs Azure .

[Link] Core.
Google Firebase Console .
Microsoft Azure et Envoyer des notifications Push vers des applications iOS à
l’aide d’Azure Notification Hubs.
Flutter et Dart pour le développement multiplateforme.
Kotlin et Swift pour le développement natif Android et iOS.

Les étapes fournies sont propres au système d’exploitation macOS . Il est possible de
suivre ces instructions sur Windows en ignorant les aspects concernant iOS.

Configurer Push Notification Services et Azure

Notification Hubs
Dans cette section, vous allez configurer Firebase Cloud Messaging (FCM) et Apple
Push Notification Services (APNS) . Ensuite, vous allez créer et configurer un hub de
notification pour travailler avec ces services.
Créer un projet Firebase et activer Firebase Cloud
Messaging pour Android
1. Connectez-vous à la console Firebase . Créez un projet Firebase en entrant
PushDemo comme nom du projet.

７ Notes

Un nom unique sera généré pour vous. Par défaut, il s’agit d’une variante en
minuscules du nom que vous avez fourni plus un nombre généré, séparés par
un tiret. Vous pouvez le changer si vous voulez, du moment qu’il reste unique
au niveau global.

2. Une fois le projet créé, sélectionnez Add Firebase to your Android app (Ajouter
Firebase à votre application Android).

3. Dans la page Add Firebase to your Android app (Ajouter Firebase à votre
application Android), effectuez les étapes suivantes :

a. Pour Android package name (Nom du package Android), entrez un nom pour
votre package. Par exemple : com.<organization_identifier>.<package_name> .
b. Sélectionnez Inscrire une application.

c. Sélectionnez Télécharger le fichier [Link]. Ensuite, enregistrez le

fichier dans un dossier local pour l’utiliser ultérieurement, puis sélectionnez
Suivant.
 d. Cliquez sur Suivant.

e. Sélectionnez Continue to console (Poursuivre dans la console).

７ Notes

Si le bouton Continue to console n’est pas activé, en raison de la

vérification de l’installation, choisissez Skip this step (Ignorer cette étape).

4. Dans la console Firebase, sélectionnez la roue dentée associée à votre projet.

Ensuite, sélectionnez Project Settings (Paramètres du projet).
 ７ Notes

Si vous n’avez pas téléchargé le fichier [Link], vous pouvez le

faire sur cette page.

5. Basculez vers l’onglet Messagerie cloud en haut. Copiez et enregistrez la clé du

serveur pour une utilisation ultérieure. Cette valeur est utilisée pour configurer
votre hub de notification.

Inscrire votre application iOS pour les notifications Push

Pour envoyer des notifications Push vers une application iOS, inscrivez votre application
auprès d’Apple ainsi que pour les notifications Push.

1. Si vous n’avez pas encore inscrit votre application, accédez au portail de

provisionnement iOS dans le Centre pour développeurs Apple. Connectez-vous
au portail avec votre ID Apple, accédez à Certificats, Profils d’identificateurs&, puis
sélectionnez Identificateurs. Cliquez sur + pour inscrire une nouvelle application.
2. Dans l’écran Register a New Identifier (Inscrire un nouvel identifiant), sélectionnez
la case d’option App IDs (ID d’application). Sélectionnez Continuer.

3. Mettez à jour les trois valeurs suivantes pour votre nouvelle application, puis
sélectionnez Continue :

Description : tapez un nom descriptif pour votre application.

ID d’offre groupée : entrez un ID groupé du formulaire com.

<>organization_identifier.<> product_name comme indiqué dans le Guide
de distribution des applications. Dans la capture d’écran ci-dessous, la valeur
mobcat est utilisée comme identificateur d’organisation, tandis que la valeur

PushDemo correspond au nom du produit.

 Notifications Push : cochez l’option Notifications Push dans la section
Capabilities (Fonctionnalités).

L’ID de votre application est généré et vous êtes invité à confirmer les
informations. Sélectionnez Continue (Continuer), puis Register (Inscrire) pour
confirmer le nouvel ID d’application.

Après avoir sélectionné S’inscrire, vous voyez le nouvel ID d’application

affiché comme élément de ligne dans la page Certificats, identifiants et
profils.

4. Dans la page Certificats, profils d’identificateurs&, sous Identificateurs, recherchez

l’élément de ligne ID d’application que vous avez créé. Sélectionnez ensuite sa
ligne pour afficher l’écran Modifier votre configuration d’ID d’application.

Création d’un certificat pour Notification Hubs

Un certificat est nécessaire pour permettre au hub de notification de fonctionner avec
les services de notification Push Apple (APNS) et peut être fourni de deux manières :
 1. Création d’un certificat Push p12 qui peut être chargé directement sur le hub de
notification (l’approche d’origine)

2. Création d’un certificat p8 qui peut être utilisé pour l’authentification basée sur un
jeton (l’approche la plus récente et recommandée)

L’approche la plus récente présente un certain nombre d’avantages, comme indiqué

dans Authentification basée sur un jeton (HTTP/2) pour APNS. Moins d’étapes sont
nécessaires, mais elles sont également obligatoires pour des scénarios spécifiques.
Toutefois, des étapes ont été fournies pour les deux approches, l’une comme l’autre
pouvant être utilisée dans le cadre de ce tutoriel.

OPTION 1 : Création d’un certificat Push p12 qui peut être chargé
directement sur Notification Hub

1. Sur votre Mac, exécutez l’outil Trousseaux d’accès. Vous pouvez l’ouvrir à partir du
dossier Utilitaires ou du dossier Autre sur Launchpad.

2. Sélectionnez Trousseaux d’accès, développez Assistant de certification, puis

cliquez sur Demander un certificat à une autorité de certification.

７ Notes

Par défaut, Trousseaux d’accès sélectionne le premier élément de la liste. Cela

peut poser problème si vous êtes dans la catégorie Certificats et que Apple
Worldwide Developer Relations Certification Authority (Autorité de
certification des relations des développeurs dans le monde entier) ne figure
pas comme premier élément dans la liste. Veillez à disposer d’un élément
non-clé, ou que la clé Apple Worldwide Developer Relations Certification
Authority est sélectionnée, avant de générer la demande de signature de
certificat (CSR).
3. Sélectionnez votre adresse e-mail d’utilisateur, entrez votre nom commun, veillez
à spécifier Enregistré sur le disque, puis sélectionnez Continuer. Laissez le champ
Adresse de messagerie d’autorité de certification vide, car il n’est pas requis.

4. Entrez un nom pour le fichier de demande de signature de certificat dans

Enregistrer sous, sélectionnez l’emplacement dans Où, puis sélectionnez
Enregistrer.
 Cette action enregistre le fichier CSR à l’emplacement sélectionné. L’emplacement
par défaut est Bureau. Notez l’emplacement choisi pour ce fichier.

5. De retour sur la page Certificats, profils d’identificateurs & dans le portail

d’approvisionnement iOS, faites défiler jusqu’à l’option Notifications Push case
activée ed, puis sélectionnez Configurer pour créer le certificat.

6. La fenêtre Apple Push Notification service TLS/SSL Certificates (Certificats

TLS/SSL du service Apple Push Notification) s’affiche. Sélectionnez le bouton
Create Certificate (Créer un certificat) sous la section Development TLS/SSL
Certificate (Certificat de développement TLS/SSL).
 L’écran Create a new Certificate (Créer un certificat) s’affiche.

７ Notes

Ce didacticiel utilise un certificat de développement. Le même processus est

utilisé lors de l’inscription d’un certificat de production. Assurez-vous
simplement que vous utilisez le même type de certificat quand vous envoyez
des notifications.

7. Sélectionnez Choose File (Choisir un fichier), accédez à l’emplacement où vous

avez enregistré le fichier de demande de signature de certificat, puis double-
cliquez sur le nom du certificat à charger. Sélectionnez Continuer.

8. Une fois que le portail a créé un certificat, sélectionnez le bouton Télécharger.

Enregistrez le certificat et notez son emplacement pour le retrouver facilement.

Le certificat est téléchargé et enregistré sur votre ordinateur dans le dossier

Téléchargements.

７ Notes
 Par défaut, le certificat de développement téléchargé se nomme
aps_development.cer.

9. Double-cliquez sur le certificat Push téléchargé aps_development.cer. Cette

opération installe le nouveau certificat dans le Trousseau, comme indiqué dans
l’image suivante :

７ Notes

Bien que le nom de votre certificat puisse être différent, il portera le préfixe
Apple Development iOS Push Notification Services et se verra associer
l’identificateur de bundle approprié.

10. Dans Trousseau d’accès, utilisez Ctrl + clic sur le certificat push que vous avez créé
dans la catégorie Certificats. Sélectionnez Exporter, nommez le fichier,
sélectionnez le format p12, puis sélectionnez Enregistrer.
 Vous pouvez choisir de protéger le certificat par un mot de passe, mais ce dernier
est facultatif. Cliquez sur OK si vous souhaitez ignorer l’étape de création du mot
de passe. Notez le nom du fichier et l’emplacement du certificat p12 exporté. Ces
informations sont nécessaires pour activer l’authentification avec APNs.

７ Notes

Le nom et l’emplacement de votre fichier p12 peuvent être différents de ceux

montrés dans ce tutoriel.

OPTION 2 : Création d’un certificat p8 qui peut être utilisé pour

l’authentification basée sur des jetons

1. Prenez note des détails suivants :

Préfixe d’ID d’application (ID d’équipe)

ID de bundle

2. De retour dans Certificats, identifiants et profils, cliquez sur Clés.

７ Notes

Si vous disposez déjà d’une clé configurée pour APNS, vous pouvez réutiliser
le certificat p8 que vous avez téléchargé juste après l’avoir créée. Dans ce cas,
vous pouvez ignorer les étapes 3 à 5.

3. Cliquez sur le bouton + (ou sur le bouton Créer une clé) pour créer une clé.
 4. Fournissez une valeur appropriée pour Nom de clé, activez l’option Apple Push
Notification Service (APNS), puis cliquez sur Continuer, puis sur Inscrire dans
l’écran suivant.

5. Cliquez sur Télécharger, puis déplacez le fichier p8 (préfixé avec AuthKey_) vers un
répertoire local sécurisé, puis cliquez sur Terminé.

７ Notes

Veillez à conserver votre fichier p8 dans un emplacement sécurisé (et à

enregistrer une sauvegarde). Une fois votre clé téléchargée, elle ne peut pas
être retéléchargée, car la copie du serveur est supprimée.

6. Dans Clés, cliquez sur la clé que vous avez créée (ou une clé existante si vous avez
choisi de l’utiliser à la place).

7. Notez la valeur de l’ID de clé.

8. Ouvrez votre certificat .p8 dans l’application appropriée de votre choix, par
exemple Visual Studio Code . Notez la valeur de la clé (comprise entre -----
BEGIN PRIVATE KEY----- et -----END PRIVATE KEY-----).

-----BEGIN PRIVATE KEY-----

<key_value>
-----END PRIVATE KEY-----

７ Notes

Il s’agit de la valeur de jeton qui sera utilisée pour configurer le hub de

notification.

À la fin de ces étapes, vous devez disposer des informations suivantes, dont vous vous
servirez dans Configurer votre hub de notification avec des informations APNS :

ID de l’équipe (voir l’étape 1)

ID de bundle (voir l’étape 1)
ID de clé (voir l’étape 7)
Valeur de jeton (valeur de clé p8 obtenue à l’étape 8)

Création d’un profil d’approvisionnement pour

l’application
1. Revenez au portail d’approvisionnement iOS , sélectionnez Certificats,
identifiants et profils, sélectionnez Profils dans le menu de gauche, puis
sélectionnez + pour créer un profil. L’écran Register a New Provisioning Profile
(Inscrire un nouveau profil de provisionnement) s’affiche.

2. Sélectionnez iOS App Development (Développement d’application iOS) sous

Development (Développement) comme type de profil de provisionnement, puis
sélectionnez Continue (Continuer).

3. Ensuite, dans la liste déroulante App ID, sélectionnez l’ID d’application que vous
avez créé, puis sélectionnez Continue.

4. Dans la fenêtre Select certificates (Sélectionner des certificats), sélectionnez le

certificat de développement utilisé pour la signature de code, puis sélectionnez
Continuer.

７ Notes

Ce certificat n’est pas le certificat Push que vous avez créé à l’étape
précédente. Il s’agit de votre certificat de développement. S’il n’en existe pas,
vous devez le créer, car il s’agit d’un prérequis pour ce tutoriel. Vous pouvez
 créer des certificats de développeur dans le portail des développeurs
Apple , par le biais de Xcode ou dans Visual Studio.

5. Revenez à la page Certificats, identifiants et profils, sélectionnez Profils dans le

menu de gauche, puis sélectionnez + pour créer un profil. L’écran Register a New
Provisioning Profile (Inscrire un nouveau profil de provisionnement) s’affiche.

6. Dans la fenêtre Select certificates (Sélectionner des certificats), sélectionnez le

certificat de développement que vous avez créé. Sélectionnez Continuer.

7. Sélectionnez les appareils à utiliser pour le test, puis sélectionnez Continue.

8. Pour finir, choisissez un nom pour le profil dans Provisioning Profile Name (Nom
du profil de provisionnement), puis sélectionnez Generate (Générer).

9. Une fois le profil de provisionnement créé, sélectionnez Télécharger. Notez son

emplacement pour le retrouver facilement.

10. Accédez à l’emplacement du profil de provisionnement, puis double-cliquez sur le

profil pour l’installer sur votre machine de développement.

Création d’un concentrateur de notification

Dans cette section, vous allez créer un hub de notifications et configurer
l’authentification avec APNS. Vous pouvez utiliser un certificat Push p12 ou
l’authentification basée sur un jeton. Si vous souhaitez utiliser un hub de notification
que vous avez déjà créé, vous pouvez passer directement à l’étape 5.

1. Connectez-vous à Azure .

2. Cliquez sur Créer une ressource, recherchez et choisissez Hub de notification, puis
cliquez sur Créer.

3. Mettez à jour les champs suivants, puis cliquez sur Créer :

 DÉTAILS DE BASE

Abonnement : choisissez l’abonnement cible dans la liste déroulante

Groupe de ressources : Créer un groupe de ressources (ou choisir un groupe de
ressources existant)

DÉTAILS DE L’ESPACE DE NOMS

Espace de noms du hub de notification : entrez un nom global unique pour

l’espace de noms Notification Hub

７ Notes

Vérifiez que l’option Créer est sélectionnée pour ce champ.

DÉTAILS DU HUB DE NOTIFICATIONS

Hub de notification : entrez un nom pour le hub de notification

Emplacement : choisissez un emplacement approprié dans la liste déroulante
Niveau tarifaire : Conserver l’option Gratuit par défaut

７ Notes

Sauf si vous avez atteint le nombre maximal de hubs au niveau gratuit.

4. Une fois que le hub de notifications a été provisionné, accédez à cette ressource.

5. Accédez à votre nouveau hub de notifications.

6. Sélectionnez Stratégies d’accès dans la liste (sous GÉRER).

7. Notez les valeurs de Nom de la stratégie ainsi que les valeurs de Chaîne de
connexion correspondantes.

Configurer votre hub de notification avec des

informations APNS
Sous Services de notification, sélectionnez Apple, puis suivez les étapes appropriées en
fonction de l’approche que vous avez choisie dans la section Création d’un certificat
pour Notification Hubs.

７ Notes
 Utilisez uniquement le mode Production ou Application si vous souhaitez envoyer
des notifications Push aux utilisateurs ayant acheté votre application dans le Store.

OPTION 1 : Utilisation d’un certificat Push .p12

1. Sélectionnez Certificate.

2. Sélectionnez l’icône du fichier.

3. Sélectionnez le fichier .p12 exporté précédemment, puis sélectionnez Ouvrir.

4. S’il y a lieu, entrez le mot de passe correct.

5. Sélectionnez le mode Bac à sable.

6. Cliquez sur Enregistrer.

OPTION 2 : Utilisation de l’authentification basée sur un

jeton
1. Sélectionnez Jeton.

2. Entrez les valeurs suivantes déjà en votre possession :

ID de clé
ID de bundle
ID de l’équipe
Jeton

3. Choisissez Bac à sable.

4. Cliquez sur Enregistrer.

Configurer votre hub de notification avec des

informations FCM
1. Sélectionnez Google (GCM/FCM) dans la section Paramètres du menu de gauche.
2. Entrez la clé du serveur que vous avez notée à partir de la console Google
Firebase.
3. Sélectionnez Enregistrer dans la barre d’outils.
Créer une application back-end d’API web
[Link] Core
Dans cette section, vous allez créer le back-end d’API web [Link] Core pour gérer
l’inscription d’appareil et l’envoi de notifications à l’application mobile Flutter.

Créer un projet web

1. Dans Visual Studio, sélectionnez Fichier>Nouvelle solution.

2. Sélectionnez .NET Core>Application>[Link] Core>API>Suivant.

3. Dans la boîte de dialogue Configurer votre nouvelle API web [Link] Core,
sélectionnez .NET Core 3.1 comme Framework cible.

4. Entrez PushDemoApi comme Nom du projet, puis sélectionnez Créer.

5. Démarrez le débogage (Commande + Entrée) pour tester l’application basée sur

un modèle.

７ Notes

L’application basée sur un modèle est configurée pour utiliser le

WeatherForecastController en tant que launchUrl. Ce dernier est défini dans
Propriétés>[Link].

Si un message indiquant qu’un certificat de développement non valide a été

trouvé apparaît :

a. Cliquez sur Oui pour accepter d’exécuter l’outil « dotnet dev-certs https »
afin de résoudre ce problème. L’outil « dotnet dev-certs https » vous invite
ensuite à entrer un mot de passe pour le certificat et le mot de passe pour
votre trousseau.

b. Cliquez sur Oui quand vous êtes invité à installer et à approuver le

nouveau certificat, puis entrez le mot de passe de votre trousseau.

6. Développez le dossier Controllers, puis supprimez [Link].

7. Supprimez [Link].
 8. Configurez les valeurs de configuration locales à l’aide de l’outil Secret Manager.
Le découplage des secrets de la solution garantit qu’ils ne se trouvent pas dans le
contrôle de code source. Ouvrez Terminal, puis accédez au répertoire du fichier
projet et exécutez les commandes suivantes :

Bash

dotnet user-secrets init

dotnet user-secrets set "NotificationHub:Name" <value>
dotnet user-secrets set "NotificationHub:ConnectionString" <value>

Remplacez les valeurs d’espace réservé par vos propres valeurs de nom de hub de
notification et de chaîne de connexion. Vous les avez notées dans la section Créer
un hub de notification. Sinon, vous pouvez les rechercher dans Azure .

NotificationHub :Name :
Consultez Nom dans le résumé Bases en haut de Vue d’ensemble.

NotificationHub:ConnectionString :
Consultez DefaultFullSharedAccessSignature dans Stratégies d’accès.

７ Notes

Pour les scénarios de production, vous pouvez envisager des options telles
qu’Azure KeyVault pour stocker la chaîne de connexion de manière
sécurisée. Par souci de simplicité, les secrets sont ajoutés aux paramètres
d’application d’Azure App Service .

Authentifier les clients à l’aide d’une clé API (facultatif)

Les clés API ne sont pas aussi sécurisées que les jetons, mais sont suffisantes dans le
cadre de ce tutoriel. Une clé API peut être facilement configurée via le middleware
(intergiciel) [Link].

1. Ajoutez la clé API aux valeurs de configuration locales.

Bash

dotnet user-secrets set "Authentication:ApiKey" <value>

７ Notes
 Vous devez remplacer la valeur d’espace réservé par la vôtre et en prendre
note.

2. Utilisez Ctrl + clic sur le projet PushDemoApi, choisissez Nouveau dossier dans le
menu Ajouter, puis cliquez sur Ajouter en utilisant Authentication comme Nom de
dossier.

3. Utilisez Ctrl + clic sur le dossier Authentication, puis choisissez Nouveau fichier
dans le menu Ajouter.

4. Sélectionnez Général>Classe vide, entrez [Link] pour le Nom, puis

cliquez sur Nouveau en ajoutant l’implémentation suivante.

C#

using [Link];

namespace [Link]
{
public class ApiKeyAuthOptions : AuthenticationSchemeOptions
{
public const string DefaultScheme = "ApiKey";
public string Scheme => DefaultScheme;
public string ApiKey { get; set; }
}
}

5. Ajoutez une autre Classe vide au dossier Authentication appelée

[Link], puis ajoutez l’implémentation suivante.

C#

using System;
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];

namespace [Link]
{
public class ApiKeyAuthHandler :
AuthenticationHandler<ApiKeyAuthOptions>
{
const string ApiKeyIdentifier = "apikey";
 public ApiKeyAuthHandler(
IOptionsMonitor<ApiKeyAuthOptions> options,
ILoggerFactory logger,
UrlEncoder encoder,
ISystemClock clock)
: base(options, logger, encoder, clock) {}

protected override Task<AuthenticateResult>

HandleAuthenticateAsync()
{
string key = [Link];

if ([Link][ApiKeyIdentifier].Any())
{
key =
[Link][ApiKeyIdentifier].FirstOrDefault();
}
else if ([Link](ApiKeyIdentifier))
{
if ([Link](ApiKeyIdentifier, out var
queryKey))
key = queryKey;
}

if ([Link](key))
return [Link]([Link]("No api
key provided"));

if (![Link](key, [Link],
[Link]))
return [Link]([Link]("Invalid
api key."));

var identities = new List<ClaimsIdentity> {

new ClaimsIdentity("ApiKeyIdentity")
};

var ticket = new AuthenticationTicket(

new ClaimsPrincipal(identities), [Link]);

return [Link]([Link](ticket));
}
}
}

７ Notes

Un gestionnaire d’authentification est un type qui implémente le

comportement d’un schéma, dans ce cas un modèle de clé API personnalisé.
6. Ajoutez une autre Classe vide au dossier Authentication appelée
[Link], puis ajoutez l’implémentation suivante.

C#

using System;
using [Link];

namespace [Link]
{
public static class AuthenticationBuilderExtensions
{
public static AuthenticationBuilder AddApiKeyAuth(
this AuthenticationBuilder builder,
Action<ApiKeyAuthOptions> configureOptions)
{
return builder
.AddScheme<ApiKeyAuthOptions, ApiKeyAuthHandler>(
[Link],
configureOptions);
}
}
}

７ Notes

Cette méthode d’extension simplifie le code de configuration du middleware

dans [Link] ce qui le rend plus lisible et généralement plus facile à suivre.

7. Dans [Link], mettez à jour la méthode ConfigureServices pour configurer

l’authentification de la clé API sous l’appel à la méthode [Link].

C#

using [Link];
using [Link];
using [Link];

public void ConfigureServices(IServiceCollection services)

{
[Link]();

[Link](options =>
{
[Link] =
[Link];
[Link] =
[Link];
 }).AddApiKeyAuth([Link]("Authentication").Bind);
}

8. Toujours dans [Link], mettez à jour la méthode Configure pour appeler les
méthodes d’extension UseAuthentication et UseAuthorization sur
l’IApplicationBuilder de l’application. Assurez-vous que ces méthodes sont
appelées après UseRouting et avant [Link].

C#

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)

{
if ([Link]())
{
[Link]();
}

[Link]();

[Link]();

[Link]();

[Link]();

[Link](endpoints =>
{
[Link]();
});
}

７ Notes

L’appel d’UseAuthentication inscrit le middleware qui utilise les schémas

d’authentification enregistrés (à partir de ConfigureServices). Elle doit être
appelée avant tout middleware qui dépend de l’authentification d’utilisateurs.

Ajouter des dépendances et configurer des services

[Link] Core prend en charge le modèle de conception logicielle d’injection de
dépendances, technique qui permet d’obtenir une inversion de contrôle entre les classes
et leurs dépendances.

L’utilisation du hub de notification et du SDK Notification Hubs pour les opérations de

back-end est encapsulée dans un service. Le service est inscrit et mis à disposition par
le biais d’une abstraction appropriée.

1. Utilisez Ctrl + clic sur le dossier Dependencies, puis choisissez Gérer les packages
NuGet....

2. Recherchez [Link] et assurez-vous qu’il est activé.

3. Cliquez sur Ajouter des packages, puis cliquez sur Accepter quand vous êtes invité
à accepter les termes du contrat de licence.

4. Utilisez Ctrl + clic sur le projet PushDemoApi, choisissez Nouveau dossier dans le
menu Ajouter, puis cliquez sur Ajouter en utilisant Models comme Nom de
dossier.

5. Utilisez Ctrl + clic sur le dossier Models, puis choisissez Nouveau fichier dans le
menu Ajouter.

6. Sélectionnez Général>Classe vide, entrez [Link] pour le Nom, puis

cliquez sur Nouveau en ajoutant l’implémentation suivante.

C#

namespace [Link]
{
public class PushTemplates
{
public class Generic
{
public const string Android = "{ \"notification\": {
\"title\" : \"PushDemo\", \"body\" : \"$(alertMessage)\"}, \"data\" : {
\"action\" : \"$(alertAction)\" } }";
public const string iOS = "{ \"aps\" : {\"alert\" :
\"$(alertMessage)\"}, \"action\" : \"$(alertAction)\" }";
}

public class Silent

{
public const string Android = "{ \"data\" : {\"message\" :
\"$(alertMessage)\", \"action\" : \"$(alertAction)\"} }";
public const string iOS = "{ \"aps\" : {\"content-
available\" : 1, \"apns-priority\": 5, \"sound\" : \"\", \"badge\" :
0}, \"message\" : \"$(alertMessage)\", \"action\" : \"$(alertAction)\"
}";
}
}
}

７ Notes
 Cette classe contient les charges utiles de notification sous forme de jetons
pour les notifications génériques et silencieuses requises par ce scénario. Les
charges utiles sont définies en dehors de l’installation pour permettre
l’expérimentation sans avoir à mettre à jour les installations existantes via le
service. La gestion des modifications apportées aux installations de cette
façon n’entre pas dans le cadre de ce tutoriel. Pour la production, envisagez
des modèles personnalisés.

7. Ajoutez une autre Classe vide au dossier Models appelée [Link], puis
ajoutez l’implémentation suivante.

C#

using [Link];
using [Link];

namespace [Link]
{
public class DeviceInstallation
{
[Required]
public string InstallationId { get; set; }

[Required]
public string Platform { get; set; }

[Required]
public string PushChannel { get; set; }

public IList<string> Tags { get; set; } = [Link]<string>

();
}
}

8. Ajoutez une autre Classe vide au dossier Models appelée [Link],

puis ajoutez l’implémentation suivante.

C#

using System;

namespace [Link]
{
public class NotificationRequest
{
public string Text { get; set; }
public string Action { get; set; }
public string[] Tags { get; set; } = [Link]<string>();
public bool Silent { get; set; }
 }
}

9. Ajoutez une autre Classe vide au dossier Models appelée

[Link], puis ajoutez l’implémentation suivante.

C#

using [Link];

namespace [Link]
{
public class NotificationHubOptions
{
[Required]
public string Name { get; set; }

[Required]
public string ConnectionString { get; set; }
}
}

10. Ajoutez au projet PushDemoApi un nouveau dossier appelé Services.

11. Ajoutez une Interface vide au dossier Services appelée [Link], puis
ajoutez l’implémentation suivante.

C#

using [Link];
using [Link];
using [Link];

namespace [Link]
{
public interface INotificationService
{
Task<bool> CreateOrUpdateInstallationAsync(DeviceInstallation
deviceInstallation, CancellationToken token);
Task<bool> DeleteInstallationByIdAsync(string installationId,
CancellationToken token);
Task<bool> RequestNotificationAsync(NotificationRequest
notificationRequest, CancellationToken token);
}
}

12. Ajoutez au dossier Services une Classe vide appelée [Link],

puis ajoutez le code suivant pour implémenter l’interface INotificationService :
C#

using System;
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];

namespace [Link]
{
public class NotificationHubService : INotificationService
{
readonly NotificationHubClient _hub;
readonly Dictionary<string, NotificationPlatform>
_installationPlatform;
readonly ILogger<NotificationHubService> _logger;

public NotificationHubService(IOptions<NotificationHubOptions>
options, ILogger<NotificationHubService> logger)
{
_logger = logger;
_hub =
[Link](
[Link],
[Link]);

_installationPlatform = new Dictionary<string,

NotificationPlatform>
{
{ nameof([Link]).ToLower(),
[Link] },
{ nameof([Link]).ToLower(),
[Link] }
};
}

public async Task<bool>

CreateOrUpdateInstallationAsync(DeviceInstallation deviceInstallation,
CancellationToken token)
{
if
([Link](deviceInstallation?.InstallationId) ||
[Link](deviceInstallation?.Platform)
||

[Link](deviceInstallation?.PushChannel))
return false;

var installation = new Installation()

{
 InstallationId = [Link],
PushChannel = [Link],
Tags = [Link]
};

if
(_installationPlatform.TryGetValue([Link], out var
platform))
[Link] = platform;
else
return false;

try
{
await
_hub.CreateOrUpdateInstallationAsync(installation, token);
}
catch
{
return false;
}

return true;
}

public async Task<bool> DeleteInstallationByIdAsync(string

installationId, CancellationToken token)
{
if ([Link](installationId))
return false;

try
{
await _hub.DeleteInstallationAsync(installationId,
token);
}
catch
{
return false;
}

return true;
}

public async Task<bool>

RequestNotificationAsync(NotificationRequest notificationRequest,
CancellationToken token)
{
if (([Link] &&
[Link](notificationRequest?.Action))
||
(![Link] &&
([Link](notificationRequest?.Text))
||
[Link](notificationRequest?.Action)))
return false;

var androidPushTemplate = [Link] ?

[Link] :
[Link];

var iOSPushTemplate = [Link] ?

[Link] :
[Link];

var androidPayload = PrepareNotificationPayload(

androidPushTemplate,
[Link],
[Link]);

var iOSPayload = PrepareNotificationPayload(

iOSPushTemplate,
[Link],
[Link]);

try
{
if ([Link] == 0)
{
// This will broadcast to all users registered in
the notification hub
await
SendPlatformNotificationsAsync(androidPayload, iOSPayload, token);
}
else if ([Link] <= 20)
{
await
SendPlatformNotificationsAsync(androidPayload, iOSPayload,
[Link], token);
}
else
{
var notificationTasks = [Link]
.Select((value, index) => (value, index))
.GroupBy(g => [Link] / 20, i => [Link])
.Select(tags =>
SendPlatformNotificationsAsync(androidPayload, iOSPayload, tags,
token));

await [Link](notificationTasks);
}

return true;
}
catch (Exception e)
{
_logger.LogError(e, "Unexpected error sending
notification");
return false;
 }
}

string PrepareNotificationPayload(string template, string text,

string action) => template
.Replace("$(alertMessage)", text,
[Link])
.Replace("$(alertAction)", action,
[Link]);

Task SendPlatformNotificationsAsync(string androidPayload,

string iOSPayload, CancellationToken token)
{
var sendTasks = new Task[]
{
_hub.SendFcmNativeNotificationAsync(androidPayload,
token),
_hub.SendAppleNativeNotificationAsync(iOSPayload,
token)
};

return [Link](sendTasks);
}

Task SendPlatformNotificationsAsync(string androidPayload,

string iOSPayload, IEnumerable<string> tags, CancellationToken token)
{
var sendTasks = new Task[]
{
_hub.SendFcmNativeNotificationAsync(androidPayload,
tags, token),
_hub.SendAppleNativeNotificationAsync(iOSPayload, tags,
token)
};

return [Link](sendTasks);
}
}
}

７ Notes

L’expression d’étiquette fournie à SendTemplateNotificationAsync est limitée

à 20 étiquettes. Elle est limitée à 6 pour la plupart des opérateurs, mais
l’expression contient uniquement des opérateurs OU (||) dans ce cas. S’il y a
plus de 20 étiquettes dans la demande, elles doivent être réparties en
plusieurs demandes. Pour plus d’informations, consultez la documentation
Routage et expressions d’étiquette.
 13. Dans [Link], mettez à jour la méthode ConfigureServices pour ajouter
NotificationHubsService en tant qu’implémentation singleton
d’INotificationService.

C#

using [Link];
using [Link];

public void ConfigureServices(IServiceCollection services)

{
...

[Link]<INotificationService, NotificationHubService>
();

[Link]<NotificationHubOptions>()
.Configure([Link]("NotificationHub").Bind)
.ValidateDataAnnotations();
}

Créer l’API des notifications

1. Utilisez Ctrl + clic sur le dossier Controllers, puis choisissez Nouveau fichier dans
le menu Ajouter.

2. Sélectionnez [Link] Core>Classe de contrôleur d’API web, entrez

NotificationsController comme Nom, puis cliquez sur Nouveau.

７ Notes

Si vous utilisez Visual Studio 2019 , choisissez le modèle Contrôleur d’API

avec actions de lecture/écriture.

3. Ajoutez les espaces de nom suivants en haut du fichier.

C#

using [Link];
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];
 using [Link];
using [Link];

4. Mettez à jour le contrôleur basé sur un modèle pour le faire dériver de

ControllerBase et le décorer avec l’attribut ApiController.

C#

[ApiController]
[Route("api/[controller]")]
public class NotificationsController : ControllerBase
{
// Templated methods here
}

７ Notes

La classe de base du contrôleur prend en charge les vues, mais cela n’est pas
nécessaire dans ce cas et controllerBase peut donc être utilisé à la place. Si
vous utilisez Visual Studio 2019 , vous pouvez ignorer cette étape.

5. Si vous avez choisi d’effectuer la section Authentifier les clients à l’aide d’une clé
API, vous devez décorer NotificationsController avec l’attribut Authorize
également.

C#

[Authorize]

6. Mettez à jour le constructeur pour accepter l’instance inscrite

d’INotificationService en tant qu’argument et assignez-la à un membre readonly.

C#

readonly INotificationService _notificationService;

public NotificationsController(INotificationService
notificationService)
{
_notificationService = notificationService;
}

7. Dans launch Paramè[Link] (dans le dossier Propriétés), remplacez launchUrlpar

weatherforecast api/notifications pour qu’il corresponde à l’URL spécifiée dans
 l’attribut RegistrationsControllerRoute.

8. Démarrer le débogage (commande + Entrée) pour vérifier que l’application utilise

le nouveau NotificationsController et retourne un état 401 Non autorisé.

７ Notes

Visual Studio risque de ne pas lancer automatiquement l’application dans le

navigateur. Vous allez dorénavant utiliser Postman pour tester l’API.

9. Sous un nouvel onglet Postman , définissez la demande sur GET. Entrez l’adresse
ci-dessous en remplaçant l’espace réservé <applicationUrl> par l’applicationUrl
https trouvée dans le lancement des propriétés>Paramè[Link].

Bash

<applicationUrl>/api/notifications

７ Notes

La valeur applicationUrl doit être « [Link] » pour le profil par

défaut. Si vous utilisez IIS (par défaut dans Visual Studio 2019 sur
Windows), vous devez utiliser la valeur applicationUrl spécifiée dans l’élément
iisSettings à la place. Vous recevrez une réponse 404 si l’adresse est
incorrecte.

10. Si vous avez choisi d’effectuer la section Authentifier les clients à l’aide d’une clé
API, veillez à configurer les en-têtes de demande pour inclure votre valeur apikey.

Clé Valeur

apikey <your_api_key>

11. Cliquez sur le bouton Envoyer.

７ Notes

Vous devez recevoir un état 200 OK avec du contenu JSON.

 Si vous recevez un avertissement Vérification du certificat SSL, vous pouvez
désactiver le paramètre Postman de vérification de certificat SSL de la
demande dans les Paramètres.

12. Dans [Link], remplacez les méthodes de classe basées sur un

modèle par le code suivant.

C#

[HttpPut]
[Route("installations")]
[ProducesResponseType((int)[Link])]
[ProducesResponseType((int)[Link])]
[ProducesResponseType((int)[Link])]
public async Task<IActionResult> UpdateInstallation(
[Required]DeviceInstallation deviceInstallation)
{
var success = await _notificationService
.CreateOrUpdateInstallationAsync(deviceInstallation,
[Link]);

if (!success)
return new UnprocessableEntityResult();

return new OkResult();

}

[HttpDelete()]
[Route("installations/{installationId}")]
[ProducesResponseType((int)[Link])]
[ProducesResponseType((int)[Link])]
[ProducesResponseType((int)[Link])]
public async Task<ActionResult> DeleteInstallation(
[Required][FromRoute]string installationId)
{
var success = await _notificationService
.DeleteInstallationByIdAsync(installationId,
[Link]);

if (!success)
return new UnprocessableEntityResult();

return new OkResult();

}

[HttpPost]
[Route("requests")]
[ProducesResponseType((int)[Link])]
[ProducesResponseType((int)[Link])]
[ProducesResponseType((int)[Link])]
public async Task<IActionResult> RequestPush(
[Required]NotificationRequest notificationRequest)
 {
if (([Link] &&
[Link](notificationRequest?.Action)) ||
(![Link] &&
[Link](notificationRequest?.Text)))
return new BadRequestResult();

var success = await _notificationService

.RequestNotificationAsync(notificationRequest,
[Link]);

if (!success)
return new UnprocessableEntityResult();

return new OkResult();

}

Créer l’application API

Vous créez maintenant une application API dans Azure App Service pour héberger le
service back-end.

1. Connectez-vous au portail Azure .

2. Cliquez sur Créer une ressource, recherchez et choisissez Application API, puis
cliquez sur Créer.

3. Mettez à jour les champs suivants, puis cliquez sur Créer.

Nom de l’application :
entrez un nom global unique pour l’application API.

Abonnement :
Choisissez l’Abonnement cible dans lequel vous avez créé le hub de notification.

Groupe de ressources :
Choisissez le Groupe de ressources cible dans lequel vous avez créé le hub de
notification.

Plan App Service/Emplacement :

Créez un plan App Service.

７ Notes
 Passez de l’option par défaut à un plan qui comprend la prise en charge de
SSL. Sinon, vous devrez prendre les mesures appropriées lors de l’utilisation
de l’application mobile pour empêcher le blocage des demandes http.

Application Insights :
Conservez l’option suggérée (une nouvelle ressource sera créée avec ce nom) ou
choisissez une ressource existante.

4. Une fois l’application API provisionnée, accédez à cette ressource.

5. Notez la propriété URL dans le résumé Bases en haut de la Vue d’ensemble. Cette
URL représente le point de terminaison back-end qui sera utilisé plus loin dans ce
tutoriel.

７ Notes

L’URL utilise le nom de l’application API que vous avez spécifié

précédemment, avec le format [Link] .

6. Sélectionnez Configuration dans la liste (sous Paramètres).

7. Pour chacun des paramètres ci-dessous, cliquez sur Nouveau paramètre

d’application afin d’entrer le Nom et une Valeur, puis cliquez sur OK.

Nom Valeur

Authentication:ApiKey <api_key_value>

NotificationHub:Name <hub_name_value>

NotificationHub:ConnectionString <hub_connection_string_value>

７ Notes

Ce sont les mêmes paramètres que ceux que vous avez définis dans les
paramètres utilisateur. Vous devez être en mesure de les reprendre. Le
paramètre Authentication:ApiKey est uniquement obligatoire si vous avez
choisi d’effectuer la section Authentifier les clients à l’aide d’une clé API.
Pour les scénarios de production, vous pouvez envisager des options telles
qu’Azure KeyVault . Ceux-ci ont été ajoutés en tant que paramètres
d’application pour des raisons de simplicité dans ce cas.
 8. Une fois tous les paramètres d’application ajoutés, cliquez sur Enregistrer, puis
Continuer.

Publier le service back-end

Ensuite, vous déployez l’application sur l’application API afin de la rendre accessible à
tous les appareils.

７ Notes

Les étapes suivantes sont spécifiques à Visual Studio pour Mac . Si vous utilisez
Visual Studio 2019 sur Windows, le flux de publication sera différent. Consultez
Publier sur Azure App Service sur Windows.

1. Si ce n’est déjà fait, modifiez votre configuration de Debug en Release.

2. Utilisez Ctrl + Clic sur le projet PushDemoApi, puis choisissez Publier sur Azure...
dans le menu Publier.

3. Suivez le processus d’authentification si vous y êtes invité. Utilisez le compte que

vous avez utilisé dans la section Créer l’application API précédente.

4. Sélectionnez l’application API Azure App Service que vous avez créée dans la liste
comme cible de publication, puis cliquez sur Publier.

Après en avoir terminé avec l’Assistant, il publie l’application dans Azure, puis ouvre
l’application. Prenez note de l’URL si ce n’est déjà fait. Cette URL représente le point de
terminaison back-end qui est utilisé plus loin dans ce tutoriel.

Validation de l’API publiée

1. Dans Postman , ouvrez un nouvel onglet, définissez la demande sur PUT et
entrez l’adresse ci-dessous. Remplacez l’espace réservé par l’adresse de base que
vous avez notée dans la section précédente Publier le service back-end.

C#

[Link]

７ Notes
 L’adresse de base doit être au format [Link] .

2. Si vous avez choisi d’effectuer la section Authentifier les clients à l’aide d’une clé
API, veillez à configurer les en-têtes de demande pour inclure votre valeur apikey.

Clé Valeur

apikey <your_api_key>

3. Choisissez l’option raw (brut) pour Body (Corps), choisissez JSON dans la liste des
options de format, puis incluez du contenu JSON d’espace réservé :

JSON

{}

4. Cliquez sur Envoyer.

７ Notes

Vous devez recevoir un état 422 UnprocessableEntity du service.

5. Effectuez à nouveau les étapes 1 à 4, mais en spécifiant cette fois le point de

terminaison des demandes pour vérifier que vous recevez une réponse 400
Demande incorrecte.

Bash

[Link]

７ Notes

Il n’est pas encore possible de tester l’API à l’aide de données de demande valides,
car cela nécessite des informations propres à la plateforme de la part de
l’application mobile cliente.

Créer une application Flutter multiplateforme

Dans cette section, vous allez créer une application mobile Flutter qui implémente des
notifications Push en mode multiplateforme.
Elle vous permet de vous inscrire auprès d’un hub de notification et de vous en
désinscrire par le biais du service back-end que vous avez créé.

Une alerte s’affiche quand une action est spécifiée et que l’application est au premier
plan. Sinon, les notifications s’affichent dans le centre de notifications.

７ Notes

En général, vous effectuez les actions d’inscription (et de désinscription) au

moment approprié durant le cycle de vie de l’application (ou éventuellement dans
le cadre de votre première expérience d’exécution) sans entrées d’inscription ou de
désinscription explicites de la part de l’utilisateur. Toutefois, cet exemple demande
une entrée utilisateur explicite pour faciliter l’exploration et le test de cette
fonctionnalité.

Créer la solution Flutter

1. Ouvrez une nouvelle instance de Visual Studio Code.

2. Ouvrez la palette de commandes (Maj + Cmd + P).

3. Sélectionnez la commande Flutter : Nouveau projet , puis appuyez sur Entrée.

4. Entrez push_demo comme Nom de projet, puis sélectionnez un Emplacement de

projet.

5. Quand vous y êtes invité, choisissez Obtenir des packages.

6. Faites un Ctrl + clic sur le dossier kotlin (sous app>src>main), puis choisissez
Révéler dans le Finder. Ensuite, renommez les dossiers enfants (sous le dossier
kotlin) en com , <your_organization> et pushdemo respectivement.

７ Notes

Lorsque vous utilisez le modèle Visual Studio Code , ces dossiers sont par
défaut com, par exemple, <project_name>. À titre indicatif, si mobcat est
utilisé comme organisation, la structure des dossiers doit apparaître comme
suit :

Kotlin
Com
mobcat
 pushdemo

7. De retour dans Visual Studio Code, remplacez la valeur applicationId dans

android>app>[Link] par com.<your_organization>.pushdemo .

７ Notes

Vous devez utiliser votre propre nom d’organisation pour l’espace <réservé
your_organization> . Par exemple, avec mobcat comme organisation, Nom du
package a la valeur [Link].

8. Mettez à jour l’attribut package dans les fichiers [Link], sous

src>debug, src>main et src>profile respectivement. Vérifiez que les valeurs
correspondent à l’applicationId utilisé à l’étape précédente.

XML

<manifest
xmlns:android="[Link]
package="com.<your_organization>.pushdemo>">
...
</manifest>

9. Remplacez l’attribut android:label dans le fichier [Link] sous

src>main par PushDemo. Ensuite, ajoutez l’attribut android:allowBackup
directement sous android:label et définissez-le avec la valeur false.

XML

<application
android:name="[Link]"
android:label="PushDemo"
android:allowBackup="false"
android:icon="@mipmap/ic_launcher">
...
</application>

10. Ouvrez le fichier [Link] de niveau application (android>app>[Link]),

puis mettez à jour compileSdkVersion (dans la section android) pour utiliser l’API
29. Ensuite, remplacez les valeurs minSdkVersion et targetSdkVersion (dans la
section defaultConfig), par 26 et 29 respectivement.

７ Notes
 Seuls les appareils qui exécutent les niveaux d’API 26 et supérieurs sont pris
en charge dans le cadre de ce tutoriel, mais vous pouvez l’étendre pour
prendre en charge les appareils exécutant des versions antérieures.

11. Faites un Ctrl + clic sur le dossier ios, puis choisissez Ouvrir dans Xcode.

12. Dans Xcode, cliquez sur Runner (projet xcodeproj en haut, pas le dossier). Ensuite,
sélectionnez la cible Runner et sélectionnez l’onglet Général. Une fois la
configuration de build all sélectionnée, mettez à jour l’identificateur de bundle sur
com.<your_organization>.PushDemo .

７ Notes

Vous devez utiliser votre propre nom d’organisation pour l’espace <réservé
your_organization> . Par exemple, avec mobcat comme organisation, Bundle
Identifier a la valeur [Link].

13. Cliquez sur [Link], puis remplacez la valeur de Bundle name par PushDemo.

14. Fermez Xcode et revenez à Visual Studio Code.

15. De retour dans Visual Studio Code, ouvrez [Link], ajoutez les packages
http et flutter_secure_storage Dart en tant que dépendances. Ensuite,
enregistrez le fichier et cliquez sur Obtenir des packages quand vous y êtes invité.

YAML

dependencies:
flutter:
sdk: flutter

http: ^0.12.1
flutter_secure_storage: ^3.3.3

16. Dans Terminal, passez au dossier ios (pour votre projet Flutter). Ensuite, exécutez
la commande pod install pour installer de nouveaux pods (requis par le package
flutter_secure_storage ).

17. Faites un Ctrl + clic sur le dossier lib, puis choisissez Nouveau fichier dans le menu
avec main_page.dart comme nom de fichier. Ajoutez ensuite le code suivant.

Kotlin
 import 'package:flutter/[Link]';

class MainPage extends StatefulWidget {

@override
_MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {

@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
crossAxisAlignment: [Link],
children: <Widget>[],
)
)
);
}
}

18. Dans [Link], remplacez le code basé sur un modèle par ce qui suit.

dart

import 'package:flutter/[Link]';
import 'package:push_demo/main_page.dart';

final navigatorKey = GlobalKey<NavigatorState>();

void main() => runApp(MaterialApp(home: MainPage(), navigatorKey:

navigatorKey));

19. Dans Terminal, générez et exécutez l’application sur chaque plateforme cible pour
vérifier que l’application basée sur un modèle s’exécute sur vos appareils. Vérifiez
que les appareils pris en charge sont connectés.

Bash

flutter run

Implémenter les composants multiplateforme

1. Faites un Ctrl + clic sur le dossier lib, puis choisissez Nouveau dossier dans le
menu avec models comme Nom de dossier.
2. Faites un Ctrl + clic sur le dossier models, puis choisissez Nouveau fichier dans le
menu avec device_installation.dart comme nom de fichier. Ajoutez ensuite le code
suivant.

dart

class DeviceInstallation {
final String deviceId;
final String platform;
final String token;
final List<String> tags;

DeviceInstallation([Link], [Link], [Link],

[Link]);

[Link](Map<String, dynamic> json)

: deviceId = json['installationId'],
platform = json['platform'],
token = json['pushChannel'],
tags = json['tags'];

Map<String, dynamic> toJson() =>

{
'installationId': deviceId,
'platform': platform,
'pushChannel': token,
'tags': tags,
};
}

3. Ajoutez un nouveau fichier au dossier models appelé push_demo_action.dart pour

définir l’énumération des actions prises en charge dans cet exemple.

dart

enum PushDemoAction {
actionA,
actionB,
}

4. Ajoutez un nouveau dossier au projet appelé services, puis ajoutez un nouveau

fichier appelé device_installation_service.dart avec l’implémentation suivante.

dart

import 'package:flutter/[Link]';

class DeviceInstallationService {
static const deviceInstallation = const MethodChannel('com.
 <your_organization>.pushdemo/deviceinstallation');
static const String getDeviceIdChannelMethod = "getDeviceId";
static const String getDeviceTokenChannelMethod = "getDeviceToken";
static const String getDevicePlatformChannelMethod =
"getDevicePlatform";

Future<String> getDeviceId() {
return [Link](getDeviceIdChannelMethod);
}

Future<String> getDeviceToken() {
return
[Link](getDeviceTokenChannelMethod);
}

Future<String> getDevicePlatform() {
return
[Link](getDevicePlatformChannelMethod);
}
}

７ Notes

Vous devez utiliser votre propre nom d’organisation pour l’espace <réservé
your_organization> . Par exemple, avec mobcat comme organisation,
MethodChannel a pour nom [Link]/deviceinstallation.

Cette classe encapsule l’utilisation de la plateforme native sous-jacente pour

acquérir les détails de l’installation de l’appareil requis. MethodChannel
facilite la communication asynchrone bidirectionnelle avec les plateformes
natives sous-jacentes. L’équivalent spécifique à la plateforme de ce canal sera
créé dans les étapes ultérieures.

5. Ajoutez un autre fichier à ce dossier appelé notification_action_service.dart avec

l’implémentation suivante.

dart

import 'package:flutter/[Link]';
import 'dart:async';
import 'package:push_demo/models/push_demo_action.dart';

class NotificationActionService {
static const notificationAction =
const MethodChannel('com.
<your_organization>.pushdemo/notificationaction');
static const String triggerActionChannelMethod = "triggerAction";
static const String getLaunchActionChannelMethod = "getLaunchAction";
 final actionMappings = {
'action_a' : [Link],
'action_b' : [Link]
};

final actionTriggeredController = [Link]();

NotificationActionService() {
notificationAction
.setMethodCallHandler(handleNotificationActionCall);
}

Stream get actionTriggered => [Link];

Future<void> triggerAction({action: String}) async {

if () {
return;
}

[Link](actionMappings[action]);
}

Future<void> checkLaunchAction() async {

final launchAction = await
[Link](getLaunchActionChannelMethod) as
String;

if (launchAction != null) {
triggerAction(action: launchAction);
}
}

Future<void> handleNotificationActionCall(MethodCall call) async {

switch ([Link]) {
case triggerActionChannelMethod:
return triggerAction(action: [Link] as String);
default:
throw MissingPluginException();
break;
}
}
}

７ Notes

Ce mécanisme simple permet de centraliser la gestion des actions de

notification pour qu’elles puissent être gérées sur plusieurs plateformes à
l’aide d’une énumération fortement typée. Le service permet à la plateforme
native sous-jacente de déclencher une action si une telle action est spécifiée
 dans la charge utile de notification. Il permet également au code commun de
vérifier de manière rétrospective si une action a été spécifiée durant le
lancement de l’application quand Flutter est prêt à la traiter. C’est notamment
le cas si vous lancez l’application en appuyant sur une notification dans le
centre de notifications.

6. Ajoutez un nouveau fichier au dossier services appelé

notification_registration_service.dart avec l’implémentation suivante.

dart

import 'dart:convert';
import 'package:flutter/[Link]';
import 'package:http/[Link]' as http;
import 'package:push_demo/services/device_installation_service.dart';
import 'package:push_demo/models/device_installation.dart';
import 'package:flutter_secure_storage/flutter_secure_storage.dart';

class NotificationRegistrationService {
static const notificationRegistration =
const MethodChannel('com.
<your_organization>.pushdemo/notificationregistration');

static const String refreshRegistrationChannelMethod =

"refreshRegistration";
static const String installationsEndpoint =
"api/notifications/installations";
static const String cachedDeviceTokenKey = "cached_device_token";
static const String cachedTagsKey = "cached_tags";

final deviceInstallationService = DeviceInstallationService();

final secureStorage = FlutterSecureStorage();

String baseApiUrl;
String apikey;

NotificationRegistrationService([Link], [Link]) {
notificationRegistration
.setMethodCallHandler(handleNotificationRegistrationCall);
}

String get installationsUrl => "$baseApiUrl$installationsEndpoint";

Future<void> deregisterDevice() async {

final cachedToken = await [Link](key:
cachedDeviceTokenKey);
final serializedTags = await [Link](key:
cachedTagsKey);

if (cachedToken == null || serializedTags == null) {

return;
 }

var deviceId = await [Link]();

if ([Link]) {
throw "Unable to resolve an ID for the device.";
}

var response = await http

.delete("$installationsUrl/$deviceId", headers: {"apikey":
apikey});

if ([Link] != 200) {
throw "Deregister request failed: ${[Link]}";
}

await [Link](key: cachedDeviceTokenKey);

await [Link](key: cachedTagsKey);
}

Future<void> registerDevice(List<String> tags) async {

try {
final deviceId = await [Link]();
final platform = await
[Link]();
final token = await [Link]();

final deviceInstallation =
DeviceInstallation(deviceId, platform, token, tags);

final response = await [Link](installationsUrl,

body: jsonEncode(deviceInstallation),
headers: {"apikey": apikey, "Content-Type":
"application/json"});

if ([Link] != 200) {
throw "Register request failed: ${[Link]}";
}

final serializedTags = jsonEncode(tags);

await [Link](key: cachedDeviceTokenKey, value:

token);
await [Link](key: cachedTagsKey, value:
serializedTags);
} on PlatformException catch (e) {
throw [Link];
} catch (e) {
throw "Unable to register device: $e";
}
}

Future<void> refreshRegistration() async {

final currentToken = await
[Link]();
 final cachedToken = await [Link](key:
cachedDeviceTokenKey);
final serializedTags = await [Link](key:
cachedTagsKey);

if (currentToken == null ||
cachedToken == null ||
serializedTags == null ||
currentToken == cachedToken) {
return;
}

final tags = jsonDecode(serializedTags);

return registerDevice(tags);
}

Future<void> handleNotificationRegistrationCall(MethodCall call)

async {
switch ([Link]) {
case refreshRegistrationChannelMethod:
return refreshRegistration();
default:
throw MissingPluginException();
break;
}
}
}

７ Notes

Cette classe encapsule l’utilisation de DeviceInstallationService et des

demandes au service back-end pour effectuer les actions d’inscription, de
désinscription et d’actualisation de l’inscription requises. L’argument apiKey
n’est obligatoire que si vous avez choisi d’effectuer la section Authentifier les
clients à l’aide d’une clé API.

7. Ajoutez un nouveau fichier au dossier lib appelé [Link] avec l’implémentation

suivante.

dart

class Config {
static String apiKey = "API_KEY";
static String backendServiceEndpoint = "BACKEND_SERVICE_ENDPOINT";
}
 ７ Notes

Il s’agit d’un moyen simple de définir des secrets d’application. Remplacez les
valeurs d’espace réservé par vos propres valeurs. Vous devez en avoir pris
note quand vous avez créé le service back-end. L’URL de l’application API
doit être [Link] . Le membre apiKey
n’est obligatoire que si vous avez choisi d’effectuer la section Authentifier les
clients à l’aide d’une clé API.

Veillez à ajouter cela à votre fichier gitignore pour éviter de valider ces secrets
dans le contrôle de code source.

Implémenter l’interface utilisateur multiplateforme

1. Dans main_page.dart, remplacez la fonction build par ce qui suit.

dart

@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const [Link](horizontal: 20.0, vertical:
40.0),
child: Column(
mainAxisAlignment: [Link],
crossAxisAlignment: [Link],
children: <Widget>[
FlatButton(
child: Text("Register"),
onPressed: registerButtonClicked,
),
FlatButton(
child: Text("Deregister"),
onPressed: deregisterButtonClicked,
),
],
),
),
);
}

2. Ajoutez les importations requises en haut du fichier main_page.dart.

dart
 import
'package:push_demo/services/notification_registration_service.dart';
import '[Link]';

3. Ajoutez un champ à la classe _MainPageState pour stocker une référence à

NotificationRegistrationService.

dart

final notificationRegistrationService =
NotificationRegistrationService([Link],
[Link]);

4. Au niveau de la classe _MainPageState, implémentez les gestionnaires

d’événements pour les événements onPressed des boutons Register et Deregister.
Appelez les méthodes Register/Deregister correspondantes, puis affichez une
alerte pour indiquer le résultat.

dart

void registerButtonClicked() async {

try {
await [Link](List<String>
());
await showAlert(message: "Device registered");
}
catch (e) {
await showAlert(message: e);
}
}

void deregisterButtonClicked() async {

try {
await [Link]();
await showAlert(message: "Device deregistered");
}
catch (e) {
await showAlert(message: e);
}
}

Future<void> showAlert({ message: String }) async {

return showDialog<void>(
context: context,
barrierDismissible: false,
builder: (BuildContext context) {
return AlertDialog(
title: Text('PushDemo'),
content: SingleChildScrollView(
 child: ListBody(
children: <Widget>[
Text(message),
],
),
),
actions: <Widget>[
FlatButton(
child: Text('OK'),
onPressed: () {
[Link](context).pop();
},
),
],
);
},
);
}

5. Maintenant, dans [Link], vérifiez que les importations suivantes sont présentes
en haut du fichier.

dart

import 'package:flutter/[Link]';
import 'package:push_demo/models/push_demo_action.dart';
import 'package:push_demo/services/notification_action_service.dart';
import 'package:push_demo/main_page.dart';

6. Déclarez une variable pour stocker la référence à une instance de

NotificationActionService, puis initialisez-la.

dart

final notificationActionService = NotificationActionService();

7. Ajoutez des fonctions pour gérer l’affichage d’une alerte quand une action est
déclenchée.

dart

void notificationActionTriggered(PushDemoAction action) {

showActionAlert(message: "${[Link]().split(".")[1]} action
received");
}

Future<void> showActionAlert({ message: String }) async {

return showDialog<void>(
context: [Link],
 barrierDismissible: false,
builder: (BuildContext context) {
return AlertDialog(
title: Text('PushDemo'),
content: SingleChildScrollView(
child: ListBody(
children: <Widget>[
Text(message),
],
),
),
actions: <Widget>[
FlatButton(
child: Text('OK'),
onPressed: () {
[Link](context).pop();
},
),
],
);
},
);
}

8. Mettez à jour la fonction principale pour observer le flux actionTriggered

NotificationActionServiceet case activée pour toutes les actions capturées lors du
lancement de l’application.

dart

void main() async {

runApp(MaterialApp(home: MainPage(), navigatorKey: navigatorKey,));
[Link]((event) {
notificationActionTriggered(event as PushDemoAction); });
await [Link]();
}

７ Notes

Il s’agit simplement d’illustrer la réception et la propagation des actions de

notification Push. En règle générale, celles-ci sont gérées en mode silencieux,
par exemple en accédant à une vue spécifique ou en actualisant certaines
données plutôt qu’en affichant une alerte en l’occurrence.

Configurer le projet Android natif pour les

notifications Push
Ajout du fichier JSON Google Services
1. Faites un Ctrl + clic sur le dossier android, puis choisissez Ouvrir dans Android
Studio. Passez ensuite en mode Projet (si ce n’est pas déjà fait).

2. Recherchez le fichier [Link] que vous avez téléchargé précédemment

lors de la configuration du projet PushDemo dans la console Firebase . Ensuite,
faites-le glisser dans le répertoire racine du module app (android>android>app).

Configurer les paramètres de build et les autorisations

1. Passez du mode Projet au mode Android.

2. Ouvrez [Link], puis ajoutez les autorisations INTERNET et

READ_PHONE_STATE après l’élément application avant la balise de fermeture .

XML

<manifest>
<application>...</application>
<uses-permission android:name="[Link]" />
<uses-permission android:name="[Link].READ_PHONE_STATE"
/>
</manifest>

Ajouter les kits SDK Firebase

1. Dans Android Studio, ouvrez le fichier [Link] au niveau du projet (Gradle
Scripts>[Link] (Project: android)). Vérifiez quer le classpath
« [Link]:google-services » se trouve dans le nœud
buildscript >dependencies.

JSON

buildscript {

repositories {
// Check that you have the following line (if not, add it):
google() // Google's Maven repository
}

dependencies {
// ...

// Add the following line:

classpath '[Link]:google-services:4.3.3' // Google
 Services plugin
}
}

allprojects {
// ...

repositories {
// Check that you have the following line (if not, add it):
google() // Google's Maven repository
// ...
}
}

７ Notes

Veillez à référencer la dernière version, conformément aux instructions

fournies dans la console Firebase au moment de la création du projet
Android.

2. Dans le fichier [Link] au niveau de l’application (Gradle Scripts>[Link]

(Module: app)), appliquez le plug-in Google Services Gradle. Appliquez le plug-in
juste au-dessus du nœud android.

JSON

// ...

// Add the following line:

apply plugin: '[Link]-services' // Google Services
plugin

android {
// ...
}

3. Dans le même fichier, dans le nœud dependencies, ajoutez la dépendance pour la

bibliothèque Android Cloud Messaging.

JSON

dependencies {
// ...
implementation '[Link]:firebase-messaging:20.2.0'
}
 ７ Notes

Veillez à référencer la dernière version, conformément à la documentation sur

le client Android Cloud Messaging .

4. Enregistrez les changements, puis cliquez sur le bouton Sync Now (dans l’invite de
la barre d’outils) ou sur Sync Project with Gradle Files.

Gérer les notifications Push pour Android

1. Dans Android Studio, cliquez + sur la com.<>your_organization.pushdemo
package folder (app>src>main>kotlin), choisissez Package dans le menu
Nouveau. Entrez services comme nom, puis appuyez sur Entrée.

2. Faites un Ctrl + clic dans le dossier services, puis choisissez Kotlin File/Class dans
le menu New. Entrez DeviceInstallationService comme nom, puis appuyez sur
Entrée.

3. Implémentez DeviceInstallationService à l’aide du code suivant.

Kotlin

package com.<your_organization>.[Link]

import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]
import [Link]

@SuppressLint("HardwareIds")
class DeviceInstallationService {

companion object {
const val DEVICE_INSTALLATION_CHANNEL = "com.
<your_organization>.pushdemo/deviceinstallation"
const val GET_DEVICE_ID = "getDeviceId"
const val GET_DEVICE_TOKEN = "getDeviceToken"
const val GET_DEVICE_PLATFORM = "getDevicePlatform"
}

private var context: Context

private var deviceInstallationChannel : MethodChannel

val playServicesAvailable
 get() =
[Link]().isGooglePlayServicesAvailable(conte
xt) == [Link]

constructor(context: Context, flutterEngine: FlutterEngine) {

[Link] = context
deviceInstallationChannel =
MethodChannel([Link],
DEVICE_INSTALLATION_CHANNEL)
[Link] { call, result -
> handleDeviceInstallationCall(call, result) }
}

fun getDeviceId() : String

= [Link]([Link],
Secure.ANDROID_ID)

fun getDeviceToken() : String {

if(!playServicesAvailable) {
throw Exception(getPlayServicesError())
}

// TODO: Revisit once we have created the

PushNotificationsFirebaseMessagingService
val token =
"Placeholder_Get_Value_From_FirebaseMessagingService_Implementation"

if ([Link]()) {
throw Exception("Unable to resolve token for FCM.")
}

return token
}

fun getDevicePlatform() : String = "fcm"

private fun handleDeviceInstallationCall(call: MethodCall, result:

[Link]) {
when ([Link]) {
GET_DEVICE_ID -> {
[Link](getDeviceId())
}
GET_DEVICE_TOKEN -> {
getDeviceToken(result)
}
GET_DEVICE_PLATFORM -> {
[Link](getDevicePlatform())
}
else -> {
[Link]()
}
}
}

private fun getDeviceToken(result: [Link]) {

 try {
val token = getDeviceToken()
[Link](token)
}
catch (e: Exception) {
[Link]("ERROR", [Link], e)
}
}

private fun getPlayServicesError(): String {

val resultCode =
[Link]().isGooglePlayServicesAvailable(conte
xt)

if (resultCode != [Link]) {
return if
([Link]().isUserResolvableError(resultCode))
{

[Link]().getErrorString(resultCode)
} else {
"This device is not supported"
}
}

return "An error occurred preventing the use of push

notifications"
}
}

７ Notes

Cette classe implémente l’équivalent propre à la plateforme pour le canal

com.<your_organization>.pushdemo/deviceinstallation . Cela a été défini dans

la partie Flutter de l’application dans [Link]. Dans ce

cas, les appels sont effectués du code commun à l’hôte natif. Veillez à
remplacer <your_organization> par votre propre organisation où cela est
utilisé.

Cette classe fournit un ID unique (à l’aide de [Link] ) dans le

cadre de la charge utile de l’inscription au hub de notification.

4. Ajoutez un autre élément de type Kotlin File/Class au dossier services appelé

NotificationRegistrationService, puis ajoutez le code suivant.

Kotlin
 package com.<your_organization>.[Link]

import [Link]
import [Link]

class NotificationRegistrationService {

companion object {
const val NOTIFICATION_REGISTRATION_CHANNEL = "com.
<your_organization>.pushdemo/notificationregistration"
const val REFRESH_REGISTRATION = "refreshRegistration"
}

private var notificationRegistrationChannel : MethodChannel

constructor(flutterEngine: FlutterEngine) {
notificationRegistrationChannel =
MethodChannel([Link],
NotificationRegistrationService.NOTIFICATION_REGISTRATION_CHANNEL)
}

fun refreshRegistration() {

[Link](REFRESH_REGISTRATION,
null)
}
}

７ Notes

Cette classe implémente l’équivalent propre à la plateforme pour le canal

com.<your_organization>.pushdemo/notificationregistration . Cela a été

défini dans la partie Flutter de l’application dans

[Link]. Dans ce cas, les appels sont effectués
de l’hôte natif au code commun. Là encore, veillez à remplacer
<your_organization> par votre propre organisation où cela est utilisé.

5. Ajoutez un autre élément de type Kotlin File/Class au dossier services appelé

NotificationActionService, puis ajoutez le code suivant.

Kotlin

package com.<your_organization>.[Link]

import [Link]
import [Link]
import [Link]
 class NotificationActionService {
companion object {
const val NOTIFICATION_ACTION_CHANNEL = "com.
<your_organization>.pushdemo/notificationaction"
const val TRIGGER_ACTION = "triggerAction"
const val GET_LAUNCH_ACTION = "getLaunchAction"
}

private var notificationActionChannel : MethodChannel

var launchAction : String? = null

constructor(flutterEngine: FlutterEngine) {
notificationActionChannel =
MethodChannel([Link],
NotificationActionService.NOTIFICATION_ACTION_CHANNEL)
[Link] { call, result -
> handleNotificationActionCall(call, result) }
}

fun triggerAction(action: String) {

[Link]([Link]
R_ACTION, action)
}

private fun handleNotificationActionCall(call: MethodCall, result:

[Link]) {
when ([Link]) {
NotificationActionService.GET_LAUNCH_ACTION -> {
[Link](launchAction)
}
else -> {
[Link]()
}
}
}
}

７ Notes

Cette classe implémente l’équivalent propre à la plateforme pour le canal

com.<your_organization>.pushdemo/notificationaction . Cela a été défini dans

la partie Flutter de l’application dans [Link]. Les

appels peuvent être effectués dans les deux sens. Veillez à remplacer
<your_organization> par votre propre organisation où cela est utilisé.

6. Ajoutez un nouveau fichier/classe Kotlin à la com.

<>your_organization.pushdemo package appelé
PushNotificationsFirebaseMessagingService, puis implémentez l’utilisation du code
suivant.

Kotlin

package com.<your_organization>.pushdemo

import [Link]
import [Link]
import [Link]
import [Link]
import com.
<your_organization>.[Link]
import com.
<your_organization>.[Link]

class PushNotificationsFirebaseMessagingService :
FirebaseMessagingService() {

companion object {
var token : String? = null
var notificationRegistrationService :
NotificationRegistrationService? = null
var notificationActionService : NotificationActionService? =
null
}

override fun onNewToken(token: String) {

[Link] = token
notificationRegistrationService?.refreshRegistration()
}

override fun onMessageReceived(message: RemoteMessage) {

[Link] {
Handler([Link]()).post {

notificationActionService?.triggerAction([Link]("action",
null))
}
}
}
}

７ Notes

Cette classe est chargée de gérer les notifications quand l’application

s’exécute au premier plan. Elle appelle de manière conditionnelle
triggerAction sur NotificationActionService si une action est incluse dans la
charge utile de notification qui est reçue dans onMessageReceived. Elle
 appelle également refreshRegistration sur NotificationRegistrationService
quand le jeton Firebase est regénéré en remplaçant la fonction onNewToken.

Une fois de plus, veillez à remplacer <your_organization> par votre propre

organisation où qu’elle soit utilisée.

7. Dans [Link] (app>src>main), ajoutez

PushNotificationsFirebaseMessagingService en bas de l’élément application avec
le filtre d’intention [Link].MESSAGING_EVENT .

XML

<manifest>
<application>
<!-- EXISTING MANIFEST CONTENT -->
<service
android:name="com.
<your_organization>.[Link]"
android:exported="false">
<intent-filter>
<action
android:name="[Link].MESSAGING_EVENT" />
</intent-filter>
</service>
</application>
</manifest>

8. De retour dans DeviceInstallationService, vérifiez que les importations suivantes

sont présentes en haut du fichier.

Kotlin

package com.<your_organization>.pushdemo
import com.
<your_organization>.[Link]
gService

７ Notes

Remplacez <your_organization> par votre propre valeur d’organisation.

9. Changez le texte de l’espace réservé

Placeholder_Get_Value_From_FirebaseMessagingService_Implementation pour
récupérer la valeur du jeton de PushNotificationFirebaseMessagingService.
 Kotlin

fun getDeviceToken() : String {

if(!playServicesAvailable) {
throw Exception(getPlayServicesError())
}

// Get token from the

[Link] field.
val token = [Link]

if ([Link]()) {
throw Exception("Unable to resolve token for FCM.")
}

return token
}

10. Dans MainActivity, vérifiez que les importations suivantes sont présentes en haut
du fichier.

Kotlin

package com.<your_organization>.pushdemo

import [Link]
import [Link]
import [Link]
import [Link]
import com.
<your_organization>.[Link]
import com.
<your_organization>.[Link]
import com.
<your_organization>.[Link]
import [Link]

７ Notes

Remplacez <your_organization> par votre propre valeur d’organisation.

11. Ajoutez une variable pour stocker une référence à DeviceInstallationService.

Kotlin

private lateinit var deviceInstallationService:

DeviceInstallationService
12. Ajoutez une fonction appelée processNotificationActions pour vérifier si une
intention (Intent) a une valeur supplémentaire nommée action. Déclenchez cette
action de manière conditionnelle ou stockez-la en vue d’une utilisation ultérieure si
l’action est traitée pendant le lancement de l’application.

Kotlin

private fun processNotificationActions(intent: Intent, launchAction:

Boolean = false) {
if ([Link]("action")) {
var action = [Link]("action");

if ([Link]()) {
if (launchAction) {

[Link]?.la
unchAction = action
}
else {

[Link]?.tr
iggerAction(action)
}
}
}
}

13. Remplacez la fonction onNewIntent pour appeler processNotificationActions.

Kotlin

override fun onNewIntent(intent: Intent) {

[Link](intent)
processNotificationActions(intent)
}

７ Notes

Dans la mesure où LaunchMode pour MainActivity a la valeur SingleTop, une

intention (Intent) sera envoyée à l’instance Activity par le biais de la fonction
onNewIntent, plutôt que de la fonction onCreate. Vous devez donc gérer une
intention (Intent) entrante dans les fonctions onCreate et onNewIntent.

14. Substituez la fonction onCreate en définissant deviceInstallationService avec une

nouvelle instance de DeviceInstallationService.
 Kotlin

override fun onCreate(savedInstanceState: Bundle?) {

[Link](savedInstanceState)

flutterEngine?.let {
deviceInstallationService = DeviceInstallationService(context,
it)
}
}

15. Définissez les propriétés notificationActionService et

notificationRegistrationService avec PushNotificationFirebaseMessagingServices.

Kotlin

flutterEngine?.let {
deviceInstallationService = DeviceInstallationService(context, it)
[Link] =
NotificationActionService(it)

[Link]
ce = NotificationRegistrationService(it)
}

16. Dans la même fonction, appelez de manière conditionnelle

[Link]().instanceId. Implémentez OnCompleteListener
pour définir la valeur résultante du jeton avec
PushNotificationFirebaseMessagingService avant d’appeler refreshRegistration.

Kotlin

if(deviceInstallationService?.playServicesAvailable) {
[Link]().instanceId
.addOnCompleteListener(OnCompleteListener { task ->
if (![Link])
return@OnCompleteListener

[Link] =
[Link]?.token

[Link]
ce?.refreshRegistration()
})
}

17. Toujours dans onCreate, appelez processNotificationActions à la fin de la fonction.

Utilisez true comme argument launchAction pour indiquer que cette action est
 traitée pendant le lancement de l’application.

Kotlin

processNotificationActions([Link], true)

７ Notes

Pour continuer à recevoir des notifications Push, vous devez réinscrire l’application
chaque fois que vous l’exécutez et l’arrêtez à partir d’une session de débogage.

Configurer le projet iOS natif pour les

notifications Push

Configurer la cible runner et [Link]

1. Dans Visual Studio Code, faites un Ctrl + clic sur le dossier ios, puis choisissez
Ouvrir dans Xcode.

2. Dans Xcode, cliquez sur Runner (xcodeprojen haut, et non sur le dossier), puis
sélectionnez la cible Runner, puis les fonctionnalités de signature&. Après avoir
sélectionné la configuration de build All, choisissez votre compte de développeur
pour Team. Vérifiez ensuite que l’option « Automatically manage signing » est
activée et que votre certificat de signature et votre profil de provisionnement sont
automatiquement sélectionnés.

７ Notes

Si vous ne voyez pas la nouvelle valeur de profil d’approvisionnement, essayez

d’actualiser les profils de l’identité de signature. Pour cela, sélectionnez
Xcode>Preferences>Account, puis sélectionnez le bouton Download Manual
Profiles pour télécharger les profils.

3. Cliquez sur + Capability, puis recherchez Push Notifications. Double-cliquez sur

Push Notifications pour ajouter cette fonctionnalité.

4. Ouvrez [Link] et définissez Minimum system version avec la valeur 13.0.

７ Notes
 Seuls les appareils qui exécutent iOS 13.0 ou une version ultérieure sont pris
en charge dans ce tutoriel, mais vous pouvez l’étendre pour prendre en
charge les appareils exécutant des versions antérieures.

5. Ouvrez [Link] et vérifiez que le paramètre APS Environment indique

development.

Gérer les notifications Push pour iOS

1. Faites un Ctrl + clic sur le dossier Runner (dans le projet Runner), puis choisissez
New Group avec Services comme nom.

2. Cliquez + sur le dossier Services, puis choisissez Nouveau fichier.... Ensuite,

choisissez Fichier Swift, puis cliquez sur Suivant. Spécifiez
DeviceInstallationService comme nom, puis cliquez sur Create.

3. Implémentez [Link] à l’aide du code suivant.

Swift

import Foundation

class DeviceInstallationService {

enum DeviceRegistrationError: Error {

case notificationSupport(message: String)
}

var token : Data? = nil

let DEVICE_INSTALLATION_CHANNEL = "com.

<your_organization>.pushdemo/deviceinstallation"
let GET_DEVICE_ID = "getDeviceId"
let GET_DEVICE_TOKEN = "getDeviceToken"
let GET_DEVICE_PLATFORM = "getDevicePlatform"

private let deviceInstallationChannel : FlutterMethodChannel

var notificationsSupported : Bool {

get {
if #available(iOS 13.0, *) {
return true
}
else {
return false
}
}
}
 init(withBinaryMessenger binaryMessenger : FlutterBinaryMessenger)
{
deviceInstallationChannel = FlutterMethodChannel(name:
DEVICE_INSTALLATION_CHANNEL, binaryMessenger: binaryMessenger)

[Link](handleDeviceInstallation
Call)
}

func getDeviceId() -> String {

return [Link]!.description
}

func getDeviceToken() throws -> String {

if(!notificationsSupported) {
let notificationSupportError =
getNotificationsSupportError()
throw [Link](message:
notificationSupportError)
}

if (token == nil) {
throw [Link](message:
"Unable to resolve token for APNS.")
}

return token!.reduce("", {$0 + String(format: "%02X", $1)})

}

func getDevicePlatform() -> String {

return "apns"
}

private func handleDeviceInstallationCall(call: FlutterMethodCall,

result: @escaping FlutterResult) {
switch [Link] {
case GET_DEVICE_ID:
result(getDeviceId())
case GET_DEVICE_TOKEN:
getDeviceToken(result: result)
case GET_DEVICE_PLATFORM:
result(getDevicePlatform())
default:
result(FlutterMethodNotImplemented)
}
}

private func getDeviceToken(result: @escaping FlutterResult) {

do {
let token = try getDeviceToken()
result(token)
}
catch let error {
result(FlutterError(code: "UNAVAILABLE", message:
[Link], details: nil))
 }
}

private func getNotificationsSupportError() -> String {

if (!notificationsSupported) {
return "This app only supports notifications on iOS 13.0
and above. You are running \([Link])"
}

return "An error occurred preventing the use of push

notifications."
}
}

７ Notes

Cette classe implémente l’équivalent propre à la plateforme pour le canal

com.<your_organization>.pushdemo/deviceinstallation . Cela a été défini dans

la partie Flutter de l’application dans [Link]. Dans ce

cas, les appels sont effectués du code commun à l’hôte natif. Veillez à
remplacer <your_organization> par votre propre organisation où cela est
utilisé.

Cette classe fournit un ID unique (à l’aide de la valeur

[Link] ) dans le cadre de la charge utile de
l’inscription au hub de notification.

4. Ajoutez un autre élément de type Swift File au dossier Services appelé

NotificationRegistrationService, puis ajoutez le code suivant.

Swift

import Foundation

class NotificationRegistrationService {

let NOTIFICATION_REGISTRATION_CHANNEL = "com.

<your_organization>.pushdemo/notificationregistration"
let REFRESH_REGISTRATION = "refreshRegistration"

private let notificationRegistrationChannel : FlutterMethodChannel

init(withBinaryMessenger binaryMessenger : FlutterBinaryMessenger)

{
notificationRegistrationChannel = FlutterMethodChannel(name:
NOTIFICATION_REGISTRATION_CHANNEL, binaryMessenger: binaryMessenger)
}
 func refreshRegistration() {

[Link](REFRESH_REGISTRATION,
arguments: nil)
}
}

７ Notes

Cette classe implémente l’équivalent propre à la plateforme pour le canal

com.<your_organization>.pushdemo/notificationregistration . Cela a été

défini dans la partie Flutter de l’application dans

[Link]. Dans ce cas, les appels sont effectués
de l’hôte natif au code commun. Là encore, veillez à remplacer
<your_organization> par votre propre organisation où cela est utilisé.

5. Ajoutez un autre élément de type Swift File au dossier Services appelé

NotificationActionService, puis ajoutez le code suivant.

Swift

import Foundation

class NotificationActionService {

let NOTIFICATION_ACTION_CHANNEL = "com.

<your_organization>.pushdemo/notificationaction"
let TRIGGER_ACTION = "triggerAction"
let GET_LAUNCH_ACTION = "getLaunchAction"

private let notificationActionChannel: FlutterMethodChannel

var launchAction: String? = nil

init(withBinaryMessenger binaryMessenger: FlutterBinaryMessenger) {

notificationActionChannel = FlutterMethodChannel(name:
NOTIFICATION_ACTION_CHANNEL, binaryMessenger: binaryMessenger)

[Link](handleNotificationAction
Call)
}

func triggerAction(action: String) {

[Link](TRIGGER_ACTION,
arguments: action)
}

private func handleNotificationActionCall(call: FlutterMethodCall,

 result: @escaping FlutterResult) {
switch [Link] {
case GET_LAUNCH_ACTION:
result(launchAction)
default:
result(FlutterMethodNotImplemented)
}
}
}

７ Notes

Cette classe implémente l’équivalent propre à la plateforme pour le canal

com.<your_organization>.pushdemo/notificationaction . Cela a été défini dans

la partie Flutter de l’application dans [Link]. Les

appels peuvent être effectués dans les deux sens. Veillez à remplacer
<your_organization> par votre propre organisation où cela est utilisé.

6. Dans [Link], ajoutez des variables pour stocker une référence aux
services que vous avez créés précédemment.

Swift

var deviceInstallationService : DeviceInstallationService?

var notificationRegistrationService : NotificationRegistrationService?
var notificationActionService : NotificationActionService?

7. Ajoutez une fonction appelée processNotificationActions pour traiter les données

de notification. Déclenchez cette action de manière conditionnelle ou stockez-la en
vue d’une utilisation ultérieure si l’action est traitée pendant le lancement de
l’application.

Swift

func processNotificationActions(userInfo: [AnyHashable : Any],

launchAction: Bool = false) {
if let action = userInfo["action"] as? String {
if (launchAction) {
notificationActionService?.launchAction = action
}
else {
notificationActionService?.triggerAction(action: action)
}
}
}
 8. Substituez la fonction didRegisterForRemoteNotificationsWithDeviceToken en
définissant la valeur du jeton pour DeviceInstallationService. Ensuite, appelez
refreshRegistration sur NotificationRegistrationService.

Swift

override func application(_ application: UIApplication,

didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
deviceInstallationService?.token = deviceToken
notificationRegistrationService?.refreshRegistration()
}

9. Substituez la méthode didReceiveRemoteNotification en passant l’argument

userInfo à la fonction processNotificationActions.

Swift

override func application(_ application: UIApplication,

didReceiveRemoteNotification userInfo: [AnyHashable : Any]) {
processNotificationActions(userInfo: userInfo)
}

10. Substituez la fonction didFailToRegisterForRemoteNotificationsWithError pour

consigner l’erreur.

Swift

override func application(_ application: UIApplication,

didFailToRegisterForRemoteNotificationsWithError error: Error) {
print(error);
}

７ Notes

Cette valeur s’apparente à un espace réservé. Vous pouvez implémenter une

journalisation et une gestion des erreurs appropriées pour les scénarios de
production.

11. Dans didFinishLaunchingWithOptions, instanciez les variables

deviceInstallationService, notificationRegistrationService et
notificationActionService.

Swift
 let controller : FlutterViewController = window?.rootViewController as!
FlutterViewController

deviceInstallationService =
DeviceInstallationService(withBinaryMessenger:
[Link])
notificationRegistrationService =
NotificationRegistrationService(withBinaryMessenger:
[Link])
notificationActionService =
NotificationActionService(withBinaryMessenger:
[Link])

12. Dans la même fonction, demandez une autorisation de manière conditionnelle et

ajoutez l’inscription aux notifications distantes.

Swift

if #available(iOS 13.0, *) {
[Link]().requestAuthorization(options:
[.alert, .sound, .badge]) {
(granted, error) in

if (granted)
{
[Link] {
let pushSettings = UIUserNotificationSettings(types:
[.alert, .sound, .badge], categories: nil)

[Link](pushSettings)
[Link]()
}
}
}
}

13. Si launchOptions contient la clé remoteNotification, appelez

processNotificationActions à la fin de la fonction
didFinishLaunchingWithOptions. Passez l’objet userInfo résultant et utilisez true
pour l’argument launchAction. Une valeur true indique que l’action est en cours de
traitement pendant le lancement de l’application.

Swift

if let userInfo = launchOptions?[.remoteNotification] as? [AnyHashable

: Any] {
processNotificationActions(userInfo: userInfo, launchAction: true)
}
Test de la solution
Vous pouvez maintenant tester l’envoi de notifications par le biais du service back-end.

Envoyer une notification de test

1. Ouvrez un nouvel onglet dans Postman .

2. Définissez la requête sur POST et entrez l’adresse suivante :

XML

[Link]

3. Si vous avez choisi d’effectuer la section Authentifier les clients à l’aide d’une clé
API, veillez à configurer les en-têtes de demande pour inclure votre valeur apikey.

Clé Valeur

apikey <your_api_key>

4. Choisissez l’option raw (brut) pour Body (Corps), choisissez JSON dans la liste des
options de format, puis incluez du contenu JSON d’espace réservé :

JSON

{
"text": "Message from Postman!",
"action": "action_a"
}

5. Sélectionnez le bouton Code qui apparaît dans le coin supérieur droit sous le
bouton Save (Enregistrer). La demande doit ressembler à l’exemple suivant quand
elle est affichée pour HTML (selon que vous avez inclus un en-tête apikey) :

HTML

POST /api/notifications/requests HTTP/1.1

Host: [Link]
apikey: <your_api_key>
Content-Type: application/json

{
"text": "Message from backend service",
 "action": "action_a"
}

6. Exécutez l’application PushDemo sur au moins l’une des plateformes cibles

(Android et iOS).

７ Notes

Si vous effectuez un test sur Android, assurez-vous que vous n’êtes pas en
mode Debug, ou si l’application a été déployée au moment de son exécution,
forcez sa fermeture, puis redémarrez-la à partir du lanceur.

7. Dans l’application PushDemo, appuyez sur le bouton Register (Inscrire).

8. De retour dans Postman , fermez la fenêtre Generate Code Snippets (Générer

des extraits de code) (si ce n’est déjà fait), puis cliquez sur le bouton Send
(Envoyer).

9. Vérifiez que vous recevez une réponse 200 OK dans Postman et que l’alerte
s’affiche dans l’application sous la forme ActionA action received (Action ActionA
reçue).

10. Fermez l’application PushDemo, puis recliquez sur Send dans Postman .

11. Vérifiez que vous recevez une réponse 200 OK dans Postman . Vérifiez qu’une
notification s’affiche dans la zone de notification pour l’application PushDemo
avec le message approprié.

12. Appuyez sur la notification pour confirmer qu’elle ouvre l’application et qu’elle a
affiché l’alerte ActionA action received.

13. De retour dans Postman , modifiez le corps de la demande précédent pour

envoyer une notification silencieuse en spécifiant action_b au lieu d’action_a pour
la valeur action.

JSON

{
"action": "action_b",
"silent": true
}

14. L’application toujours ouverte, cliquez sur le bouton Send dans Postman .
 15. Vérifiez que vous recevez une réponse 200 OK dans Postman et que l’alerte
s’affiche dans l’application sous la forme ActionB action received au lieu d’ActionA
action received.

16. Fermez l’application PushDemo, puis recliquez sur Send dans Postman .

17. Vérifiez que vous recevez une réponse 200 OK dans Postman et que la
notification silencieuse n’apparaît pas dans la zone de notification.

Résolution des problèmes

Aucune réponse du service back-end

Lors du test local, vérifiez que le service back-end est en cours d’exécution et qu’il utilise
le port approprié.

Si vous effectuez le test par rapport à l’application API Azure, vérifiez que le service est
en cours d’exécution, qu’il a été déployé et qu’il a démarré sans erreur.

Veillez à vérifier que vous avez correctement spécifié l’adresse de base dans Postman
ou dans la configuration de l’application mobile lors du test par le biais du client.
L’adresse de base doit être [Link] ou
[Link] lors du test local.

Aucune notification reçue sur Android après le démarrage ou l’arrêt

d’une session de débogage
Veillez à vous réinscrire après le démarrage ou l’arrêt d’une session de débogage. Le
débogueur déclenche la génération d’un nouveau jeton Firebase. L’installation du hub
de notification doit également être mise à jour.

Réception d’un code d’état 401 du service back-end

Vérifiez que vous définissez l’en-tête de demande apikey et que cette valeur correspond
à celle que vous avez configurée pour le service back-end.

Si vous recevez cette erreur quand vous procédez à un test local, vérifiez que la valeur
de clé que vous avez définie dans la configuration du client correspond à la valeur du
paramètre utilisateur Authentication:ApiKey utilisée par l’API.

Si vous effectuez un test avec une application API, assurez-vous que la valeur de clé
dans le fichier de configuration du client correspond au paramètre d’application
Authentication:ApiKey que vous utilisez dans l’application API.

７ Notes

Si vous avez créé ou modifié ce paramètre après avoir déployé le service back-end,
vous devez redémarrer le service afin qu’il prenne effet.

Si vous avez choisi de ne pas effectuer la section Authentifier les clients à l’aide d’une clé
API, assurez-vous que vous n’avez pas appliqué l’attribut Authorize à la classe
NotificationsController.

Réception d’un code d’état 404 du service back-end

Vérifiez que le point de terminaison et la méthode de demande HTTP sont corrects. Par
exemple, les points de terminaison doivent être :

[PUT] [Link]
[DELETE] [Link]
<installation_id>

[POST] [Link]

Ou lors du test local :

[PUT] [Link]
[DELETE] [Link]
id>

[POST] [Link]

Quand vous spécifiez l’adresse de base dans l’application cliente, assurez-vous qu’elle se
termine par un caractère / . L’adresse de base doit être
[Link] ou [Link] lors du test local.

Inscription impossible et affichage d’un message d’erreur du hub

de notification

Vérifiez que l’appareil de test dispose d’une connectivité réseau. Ensuite, déterminez le
code d’état de la réponse HTTP en définissant un point d’arrêt pour inspecter la valeur
de propriété StatusCode dans HttpResponse.

Passez en revue les suggestions de résolution des problèmes précédentes, le cas

échéant, en fonction du code d’État.
Définissez un point d’arrêt sur les lignes qui retournent ces codes d’état pour l’API
concernée. Essayez ensuite d’appeler le service back-end lors du débogage local.

Vérifiez que le service back-end fonctionne comme prévu via Postman à l’aide de la
charge utile appropriée. Utilisez la charge utile réelle créée par le code client pour la
plateforme en question.

Passez en revue les sections de configuration propres à la plateforme pour vous assurer
qu’aucune étape n’a été manquée. Vérifiez que les valeurs appropriées sont résolues
pour les variables installation id et token pour la plateforme appropriée.

Affichage du message d’erreur selon lequel il est impossible de

résoudre un ID pour l’appareil

Passez en revue les sections de configuration propres à la plateforme pour vous assurer
qu’aucune étape n’a été manquée.

Liens connexes
Vue d’ensemble d’Azure Notification Hubs
Installation de Flutter sur macOS
Installation de Flutter sur Windows
Kit de développement logiciel (SDK) Notification Hubs pour opérations backend
Kit de développement logiciel (SDK) Notification Hubs sur GitHub
S’inscrire auprès d’un back-end d’application
Gestion des inscriptions
Utilisation de balises
Utilisation des modèles personnalisés

Étapes suivantes
Vous devez maintenant disposer d’une application Flutter de base connectée à un hub
de notification par le biais d’un service back-end, et qui peut envoyer et recevoir des
notifications.

Vous devrez probablement adapter à votre propre scénario l’exemple utilisé dans ce
tutoriel. L’implémentation d’une gestion des erreurs, d’une logique de nouvelle tentative
et d’une journalisation plus robustes est également recommandée.

Visual Studio App Center peut être rapidement intégré à des applications mobiles qui
fournissent des analytiques et des diagnostics pour faciliter la résolution des problèmes.
Cognitive Services aide à résoudre les
problèmes d’entreprise à l’aide de
l’intelligence artificielle
Article • 23/10/2023

Azure Cognitive Services fournit des services puissants afin que vos applications
puissent tirer parti d’algorithmes intelligents pour voir, entendre, parler, comprendre et
interpréter les besoins de votre utilisateur pour transformer votre activité avec
l’intelligence artificielle (IA). Vous pouvez rendre vos applications mobiles intelligentes,
attrayantes et contextuellement pertinentes pour vos utilisateurs. Les développeurs
peuvent utiliser les API, les Kits de développement logiciel (SDK) et les services afin
d’ajouter l’intelligence artificielle à leurs offres et de créer des applications intelligentes
sans avoir de compétences directes en IA ou en science des données.

Fonctionnalités de Cognitive Services

Vision
Balisage d’image, miniatures
OCR (reconnaissance d’écriture manuscrite)
Détection des visages
Détection d’émotions
Insights vidéo
Modération des images et des vidéos
Reconnaissance d’images personnalisée

Voix
Reconnaissance vocale (transcription de la parole)
Transcription de la parole personnalisée (mots complexes, environnement bruyant)
Synthèse vocale
ID et authentification de l’orateur
Traduction vocale en temps réel

Langue
Compréhension linguistique contextuelle, analyse d’intention personnalisée
 Analyse des sentiments, détection des expressions clés
Traduction de texte jusqu’à 60 langues
Modération de texte
Vérification orthographique

Décision
Modérateur de contenu
Distribution de contenu personnalisée
Détecteur d'anomalie

Recherche
Suggestions de recherche automatiques

Ajout d’informations d’entités

Recherche complète d’actualités, d’images, de vidéos, d’entités d’entreprises

locales et web

Expériences de recherche personnalisées

Prise en charge des conteneurs pour Cognitive Services

Informations de référence sur Cognitive

Services
Azure portal
Documentation Cognitive Services
Guides de démarrage rapide
Prise en charge des conteneurs
API géospatiales pour ajouter des
cartes, une analytique spatiale et des
solutions de mobilité avec Azure Maps
Article • 23/10/2023

Azure Maps offre une plateforme de localisation en mode natif dans le cloud et
fournit un portefeuille de services géospatiaux qui utilisent des données
cartographiques actualisées pour proposer un contexte géographique précis à des
applications web et mobiles. Les développeurs, entreprises et éditeurs de logiciels
indépendants peuvent utiliser Azure Maps pour créer des applications prenant en
compte la géolocalisation ainsi que des solutions d’IoT, de mobilité, de logistique et de
suivi des ressources.

Fonctionnalités Azure Maps

Recherche : fournit des détails sur les points d’intérêt proches, affiche des
emplacements sur une carte et utilise des adresses géocode (ou géocode inverse)
pour obtenir les coordonnées de latitude et de longitude correspondantes.
Trafic : améliore votre temps de voyage et vous aide à éviter le blocage.
Cartes : fournit des cartes claires et faciles à lire pour s’intégrer à votre solution.
Routage : présente les itinéraires les plus courts ou les plus rapides disponibles
pour plusieurs destinations à un moment spécifique. Le routage fournit également
des itinéraires spécialisés et des informations pour les piétons, les cyclistes et les
véhicules commerciaux.
Fuseaux horaires : permet de voir facilement l’heure où elle se trouve dans le
monde.
Opérations spatiales : améliorez votre intelligence d’emplacement.
Géolocalisation : recherche le pays/la région d’une adresse IP.
Service de données : charge et stocke des données géospatiales à utiliser avec des
opérations spatiales ou une composition d’image.
Mobilité : fournit une intelligence de localisation en temps réel sur les services de
transport en commun à proximité. Les arrêts, les itinéraires et les estimations de
temps de trajet sont inclus.

Informations de référence sur Azure Maps

Azure portal
Documentation sur Azure Maps
Guide du développeur
Android SDK Azure Maps
Recherche cognitive Azure basées sur
l’IA pour le développement
d’applications mobiles
Article • 23/10/2023

Recherche cognitive Azure est un service de recherche cloud avec des fonctionnalités
d’IA intégrées. La Recherche cognitive offre aux développeurs des API et des outils
permettant d’ajouter une expérience de recherche enrichie sur du contenu privé et
hétérogène dans des applications web, mobiles et d’entreprise.

Votre client peut définir l’expérience de recherche à l’aide de la recherche cognitive. Les
requêtes s’exécutent sur un index persistant que vous créez, possédez et stockez dans
votre service.

Le code personnalisé appelle l’indexation d’ingestion de données pour créer et charger

un index. Votre code d’application émet des requêtes et gère les réponses.

Fonctionnalité de la Recherche cognitive Azure

Recherche de texte de forme libre avec recherche en texte intégral, syntaxe de
requête simple et syntaxe de requête Lucene.
Profils de scoring simples qui scorent la pertinence du modèle en fonction des
valeurs dans les documents eux-mêmes.
Recherche géographique qui explore les données en fonction de la proximité d’un
résultat de recherche vers un emplacement physique.
Les fonctionnalités d’expérience utilisateur telles que la saisie semi-automatique,
les suggestions, le tri et la pagination.
Base de connaissances qui enregistre les enrichissements créés lors de l’indexation.
Assistant Importation de données pour configurer des indexeurs.
Concepteur d’index pour configurer un index.
Explorateur de recherche pour tester les requêtes et affiner les profils de scoring.
Indexation de l’analyse de pipeline pour extraire des informations de texte à partir
de contenu brut pour l’analyse d’images et de texte.
Extraction de source de données pour extraire du contenu pouvant faire l’objet
d’une recherche à partir d’Azure SQL Database, d’Azure Cosmos DB et de
Stockage Blob Azure magasins de données connectés.

Pour plus d’informations, consultez Présentation Recherche cognitive Azure.

Étapes suivantes
Documentation sur la Recherche cognitive Azure
Guide du développeur pour créer des solutions d’exploration de connaissances
pilotées par l’IA
Guide pratique pour utiliser la Recherche cognitive Azure
Créer un service Recherche cognitive Azure dans le portail