Créez un compte Azure
Si vous disposez déjà d'un compte Azure que vous prévoyez d'utiliser dans le cadre de ce cours, vous pouvez sauter cette section et passer à la section « Créez un nouveau projet ». Sinon, suivez les étapes décrites dans cette section pour créer gratuitement votre propre compte Azure.
Ouvrez une fenêtre dans votre navigateur et accédez à azure.microsoft.com. Vous verrez la page suivante :
Tout le monde peut s'inscrire et créer un compte Azure gratuit. Cliquez sur Compte gratuit en haut à droite de la page.
Cliquez sur le bouton Démarrer gratuitement au milieu de l'écran pour commencer l'inscription.
Il vous est maintenant demandé de choisir le compte Microsoft à utiliser pour votre compte Azure. Si vous avez un compte Microsoft et souhaitez l'utiliser, sélectionnez-le dans la liste et suivez les instructions. La configuration est très simple.
Si vous n'avez pas de compte, ou si celui que vous souhaitez utiliser n'est pas dans la liste, choisissez Utiliser un autre compte. Vous serez dirigé vers la page de connexion Microsoft.
Si votre compte Microsoft n'était pas répertorié sur la page précédente, vous pouvez vous connecter ici. Si vous n'avez pas de compte Microsoft, ou si vous souhaitez en créer un nouveau, cliquez sur Créez-en un !
Vous avez ici la possibilité de créer un nouveau compte Microsoft en utilisant votre adresse e-mail actuelle ou votre numéro de téléphone. Vous pouvez également obtenir une nouvelle adresse e-mail que vous associerez ensuite à votre compte Microsoft. Chaque option suit des étapes similaires : choisissez celle qui en demande le plus pour ne rien rater. Choisissez Obtenez une nouvelle adresse e-mail.
Pour ma part, j'ai choisi une nouvelle adresse e-mail outlook.fr que je vais utiliser pour ce compte. Cliquez sur le bouton Suivant pour définir un mot de passe.
Après avoir créé le mot de passe pour la nouvelle adresse e-mail et de ce fait, le nouveau compte, cliquez sur le bouton Suivant pour passer la vérification anti-robot.
Cliquez sur le bouton Suivant pour passer à l'étape finale de ce processus. À ce stade, votre compte Azure est créé et presque prêt à être utilisé. Il ne reste que quelques informations à remplir sur le profil, puis une vérification d'identité pour prouver que vous êtes bien la personne que vous prétendez être. Remplissez le formulaire, cliquez sur le bouton Suivant, puis suivez les instructions supplémentaires.
Une fois le formulaire rempli et la vérification d'identité effectuée, cochez la case située à côté du contrat d'abonnement, puis cliquez sur Inscription.
La configuration peut prendre quelques instants, mais dès que le processus est terminé, vous êtes redirigé vers une page de confirmation depuis laquelle vous pouvez accéder au portail Azure.
Après votre inscription, vous pouvez accéder à votre portail.
Pas besoin d'accéder au portail puisque rien ne s'y trouve pour le moment. Mais vous disposez désormais d'un compte et d'un portail Azure où vous pouvez héberger toutes les applications web que vous développez, y compris l'application Watchlist que vous êtes sur le point de créer.
Créez un nouveau projet
Vous avez installé Visual Studio et créé votre compte Azure. Vous pouvez maintenant créer votre projet. Si vous connaissez déjà Visual Studio et que vous souhaitez avancer plus rapidement, vous pouvez suivre la vidéo screencast tout en créant votre projet. Sinon, regardez d'abord la vidéo pour avoir une vue d'ensemble du processus, puis suivez les étapes décrites dans cette section.
Lancez Visual Studio (à partir du menu Démarrer, de l'icône sur le bureau ou de l'icône de lancement rapide). La fenêtre qui s'affiche (ci-dessous ) vous offre plusieurs possibilités.
Comme nous voulons créer tout de suite notre projet, sélectionnez Créer un projet.
La fenêtre qui suit vous permet de spécifier le type de projet que vous souhaitez créer. NET Core possède un tel choix de propositions qu'il est parfois nécessaire de limiter les choix en utilisant les listes déroulantes Tous les langages, Toutes les plateformes et Tous les types de projet. Choisissez Web en bas de la liste déroulante Tous les types de projet, comme le montre la capture d'écran ci-dessous.
Cela restreindra la liste des types de projets aux projets Web. Cherchez et sélectionnez Application Web, comme indiqué ci-dessous, puis cliquez sur le bouton Suivant.
La fenêtre qui suit vous permet de configurer votre projet, à savoir lui donner un nom et définir son emplacement. Nommez votre projet Watchlist, sélectionnez l'emplacement dans lequel vous souhaitez le créer, puis cliquez sur Suivant.
Remplacez le type d'authentification Aucun par un type qui utilise une connexion sécurisée pour chaque utilisateur. Dans la fenêtre qui s'ouvre, sélectionnez Comptes individuels. Assurez-vous que l'option Stocker les comptes d'utilisateurs dans l'application est sélectionnée dans la liste déroulante, puis cliquez sur OK. Cela va créer votre projet. Entity Framework sera installé et des comptes d'utilisateur sécurisés seront intégrés au projet. Vous en aurez besoin plus tard, en particulier lorsque vous souhaiterez qu'on accède à votre application via une connexion sécurisée. Cliquez maintenant sur le bouton Créer.
Visual Studio est en train de générer votre application de base. Cette application intègre un système sécurisé de gestion des comptes d'utilisateur, qui prend notamment en charge l'inscription et la connexion. Ces comptes sont créés et gérés à l'aide d'ASP.NET Core Identity, qui est inclus dans l'application sous la forme d'une bibliothèque de classes Razor.
Vous pouvez davantage personnaliser les comptes d'utilisateur, mais nous aborderons cela dans le cours Sécurisez votre application .NET du parcours .NET.
Initialisez la base de données
Avant de tester l'application, il reste une dernière étape à franchir pour s'assurer que tout fonctionne correctement. Lorsque vous avez créé le projet, le code pour créer et interagir avec votre base de données a été généré, mais la base de données elle-même n'a pas été mise à jour. Pour ce faire, vous allez utiliser un processus appelé migration code first.
Pour exécuter une migration code first, ouvrez la console du Gestionnaire de package. Pour trouver cette fenêtre, sélectionnez Affichage > Autres fenêtres > Console du Gestionnaire de package.
La fenêtre s'ouvre dans la partie inférieure de votre IDE et ressemble à ceci :
Dans l'invite, saisissez la commande ci-après, puis appuyez sur Entrée :
update-database
Cette commande va mettre à jour la base de données en utilisant l'état de migration actuel qui a été généré lorsque vous avez créé le projet.
Inscrivez-vous et connectez-vous
Exécutons maintenant le projet. Appuyez sur F5 pour lancer le débogage. Vous pouvez également utiliser le menu Déboguer > Démarrer le débogage ou cliquer sur le bouton IIS Express dans la barre d'outils.
Lorsque votre code s'exécute, vous devriez voir cette page :
Observez les liens Register (Inscription) et Login (Connexion) en haut à droite. Ce sont vos liens d'accès aux comptes utilisateurs. Inscrivez-vous en cliquant sur le lien Register (Inscription). Vous serez invité à renseigner votre adresse e-mail et un mot de passe.
Les paramètres par défaut d'ASP.NET Core Identity exigent les caractéristiques suivantes pour les mots de passe :
Une longueur minimale de six (6) caractères ;
Au moins un (1) chiffre ;
Au moins un (1) caractère majuscule ;
Au moins un (1) caractère minuscule ;
Au moins un (1) caractère non alphanumérique ;
Lorsque vous avez saisi les informations demandées, cliquez sur le bouton Register (Inscription). Vous verrez alors la même page que la précédente, mais les liens Register (Inscription) et Login (Connexion) seront remplacés par un message d'accueil et un lien Logout (Déconnexion). Vous êtes maintenant connecté en toute sécurité au système !
Si vous souhaitez tester la fonctionnalité de connexion indépendamment de l'inscription, cliquez sur Logout (Déconnexion). Lorsque la page s'actualise, cliquez sur le lien Login (Connexion) et saisissez votre adresse e-mail et votre mot de passe, puis cliquez sur le bouton Login (Connexion). Vous devriez voir un message indiquant que la connexion a réussi.
Découvrez l'arborescence d'un projet .NET MVC
Maintenant que vous avez créé votre application de base et vérifié que les comptes d'utilisateur sont opérationnels, voyons à quoi ressemble ce projet. Dans l'Explorateur de solutions situé sur la droite de votre IDE, vous voyez tous les dossiers et fichiers qui composent votre projet Watchlist. Examinez particulièrement les dossiers Models, Views et Controllers.
Ces dossiers représentent les composants du design pattern MVC que vous utiliserez pour créer cette application. Le dossier Models contient tous les modèles de vue (classes C#) qui seront utilisés pour représenter les données de votre base de données dans le navigateur. Le dossier Views contient toutes les pages HTML qui afficheront les données représentées par les modèles. Le dossier Controllers contient les classes de contrôleur qui traitent les données, construisent les modèles et appellent les vues sur le serveur, afin de les retourner en réponse à chaque requête.
Notez que les noms de chaque contrôleur sont les mêmes que ceux des sous-dossiers du dossier Views. Chaque sous-dossier du dossier Views correspond donc à un contrôleur. C'est ainsi que le mécanisme de routage MVC sait quelle vue doit être rendue et où la trouver. Les requêtes URL suivent le format [domaine] / [contrôleur] / [action] / {id}. Le nom du contrôleur est la première partie de l'URL après le nom de domaine. Il est suivi de l'action du contrôleur qui sera appelée. Le nom de l'action est également le nom de la page HTML du sous-dossier du dossier Views qui correspond au contrôleur. Le paramètre {id} est facultatif et est fourni lors de la récupération d'un élément spécifique de la base de données.
Ainsi, si votre requête d'URL est https://votredomaine.com/films/create, vous demandez à votre application d'accéder au contrôleur FilmsController et de trouver la méthode/action create. Le code de cette méthode retourne alors une page HTML dynamique rendue à l'aide de la vue nommée Create.cshtml, qui se trouve dans le dossier /Views/Films. C'est ainsi que le routage fonctionne dans .NET MVC.
J'aimerais attirer votre attention sur un autre sous-dossier du dossier Views : le sous-dossier Shared. Toutes les pages placées dans ce dossier peuvent être appelées à partir de n'importe quel contrôleur. Si le contrôleur ne parvient pas à trouver la page demandée dans son sous-dossier Views correspondant, il cherchera une correspondance dans le dossier Shared.
Ce dernier contient également deux autres types de vues importants : les dispositions et les vues partielles. Les dispositions contiennent un code qui est commun à plusieurs pages, comme le menu de navigation et d'autres éléments d'en-tête, ainsi que les pieds de page. Les pages de vue individuelles contiennent alors uniquement les éléments de code qui leur sont propres. Par exemple, si une modification doit être apportée aux menus ou aux pieds de page, elle ne doit être effectuée qu'une seule fois (dans la page de disposition). Elle est ensuite répercutée sur toutes les autres pages utilisant cette disposition.
Les vues partielles se composent quant à elles de petits extraits HTML repris sur plusieurs pages. Il peut s'agir par exemple d'un formulaire de contact. Ce formulaire est alors contenu dans la vue partielle, qui est rendue dans la page demandée par une simple ligne de code, sans répéter à chaque fois l'ensemble du code du formulaire.
Nous reviendrons plus en détail sur les dispositions et les vues partielles un peu plus loin. Maintenant, je veux vous parler des modèles Identity et de la façon dont vous les utiliserez pour travailler avec une base de données relationnelle.
Mapping objet-rationnel et contexte de la base de données
Regardez le dossier Data de votre projet. Vous y trouverez deux éléments : 1) un dossier Migrations et 2) un fichier *.cs appelé ApplicationDbContext. Le dossier Migrations contient le code généré par Entity Framework pour construire une base de données relationnelle pour votre application. Cette base de données contient toutes les tables nécessaires pour activer, créer et gérer les authentifications sécurisées des utilisateurs.
La classe ApplicationDbContext est une classe C# qui hérite de la classe IdentityDbContext. C'est elle qui contient les fonctions de base permettant de gérer les comptes d'utilisateur et votre base de données. La classe ApplicationDbContext est la représentation codée de votre base de données. Elle sert à interagir avec la base de données par le biais du mapping objet-relationnel (ORM—Object Relational Mapping). L'ORM est un moyen de faire correspondre les entités de la base de données au code C#. Une classe peut ainsi représenter un enregistrement dans une table, et les attributs de la classe les colonnes. Nous n'entrerons pas dans les détails de l'ORM dans ce cours, mais nous y reviendrons dans une autre partie du parcours .NET. Je vais quand même vous montrer comment utiliser l'ORM pour interagir avec la base de données et la mettre à jour pour cette application.
En résumé
Ce chapitre a été riche en enseignements !
Votre compte Azure est à présent configuré.
Vous avez réussi à créer et à exécuter votre application.
Vous avez inscrit un nouvel utilisateur et testé la fonctionnalité de connexion.
Vous pouvez maintenant personnaliser votre application. Mais avant, prenez quelques instants pour répondre au quiz de cette partie.
