Exercice : Écrire du code pour implémenter une application web

  • 5 minutes

Dans cette unité, vous allez employer les outils de développement afin de créer le code pour une application web de démarrage.

Créer un projet web

Le cœur des outils CLI de .NET est l’outil en ligne de commande dotnet. Avec cette commande, vous allez créer un projet web ASP.NET Core.

Commençons par installer la version appropriée de dotnet dans le Cloud Shell. Dans cet exercice, nous allons utiliser le SDK version 3.1.102.

  1. Exécutez les commandes suivantes dans Azure Cloud Shell à droite pour télécharger et installer .NET :

    wget -q -O - https://dotnet.microsoft.com/download/dotnet/scripts/v1/dotnet-install.sh | bash -s -- --version 6.0.404
export PATH="~/.dotnet:$PATH"
echo "export PATH=~/.dotnet:\$PATH" >> ~/.bashrc

  2. Ensuite, exécutez la commande suivante pour créer une application ASP.NET Core MVC nommée « BestBikeApp » :

    dotnet new mvc --name BestBikeApp

La commande crée alors un dossier nommé « BestBikeApp » qui va contenir votre projet.

Tester votre application web (facultatif)

Ouvrez une deuxième session de l’interpréteur de commandes en accédant à https://shell.azure.com/ dans un nouvel onglet. Vous pouvez tester votre application localement sur Azure. Pour cela, utilisez les étapes suivantes :

  1. À partir de votre session d’interpréteur de commandes principale, exécutez les commandes suivantes pour générer et exécuter votre application web :

    cd BestBikeApp
dotnet run

    Vous devez obtenir une sortie telle que celle-ci :

    info: Microsoft.Hosting.Lifetime[0]
      Now listening on: https://localhost:5001
info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://localhost:5000
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development
info: Microsoft.Hosting.Lifetime[0]
      Content root path: /home/user/BestBikeApp

    La sortie décrit la situation après le démarrage de votre application : l’application est en cours d’exécution et écoute sur le port 5000.

  2. À partir de votre deuxième session de l’interpréteur de commandes, exécutez les commandes suivantes pour accéder à votre application web :

    curl -kL http://127.0.0.1:5000/

    Vous devez voir apparaître du code HTML, se terminant par les lignes suivantes :

         <div class="text-center">
     <h1 class="display-4">Welcome</h1>
     <p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
 </div>

         </main>
     </div>

     <footer class="border-top footer text-muted">
         <div class="container">
             &copy; 2021 - BestBikeApp - <a href="/Home/Privacy">Privacy</a>
         </div>
     </footer>
     <script src="/lib/jquery/dist/jquery.min.js"></script>
     <script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="/js/site.js?v=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kPS3xIVq36I0"></script>

 </body>
 </html>

  3. À partir de votre session de l’interpréteur de commandes principale, appuyez sur Ctrl+C pour quitter votre application web.

Pour créer une application web de démarrage, nous allons utiliser Maven, un outil de génération et de gestion de projets couramment utilisé pour les applications Java. Nous allons utiliser le modèle maven-archetype-webapp pour générer le code de notre application web.

  1. Exécutez maintenant les commandes suivantes dans Azure Cloud Shell pour créer une application web :

    cd ~
mvn archetype:generate -DgroupId=example.demo -DartifactId=helloworld -DinteractiveMode=false -DarchetypeArtifactId=maven-archetype-webapp -DarchetypeVersion=1.4

  2. Exécutez maintenant les commandes suivantes pour passer au nouveau répertoire d’application « helloworld » et créer un package de l’application pour le déploiement :

    cd helloworld
mvn package

  3. À la fin de l’exécution de la commande, exécutez ces commandes pour ouvrir le répertoire cible et lister son contenu :

    cd target
ls

Vous verrez un fichier nommé helloworld.war. Il s’agit du package d’application web que nous allons déployer sur App Service.

Pour créer une application web Node.js de démarrage, nous allons utiliser npm (Node Package Manager), ainsi que du code JavaScript pour effectuer le traitement de la page web.

  1. Exécutez les commandes suivantes dans Azure Cloud Shell pour créer un package.json qui décrira notre application Node.js :

    cd ~
mkdir helloworld
cd helloworld
npm init -y

Un fichier package.json est alors créé dans le dossier actif. Vous devez le trouver dans le dossier actif si vous entrez ls dans la fenêtre de terminal. Nous avons besoin d’un fichier JavaScript pour exécuter notre logique de site web. Étant donné qu’il s’agit simplement d’un exemple de base, nous avons besoin d’un seul fichier : index.js.

  1. Exécutez la commande suivante dans le terminal pour créer le fichier :

    touch index.js

  2. Nous devons maintenant apporter quelques modifications à nos deux fichiers. Exécutez la commande suivante dans le terminal pour ouvrir un éditeur interactif :

    code .

  3. Sélectionnez le fichier package.json, puis apportez les modifications suivantes à la section scripts pour utiliser Node.js afin de lancer l’application web :

    {
  "name": "helloworld",
  ...
  "scripts": {
    "start": "node index.js"
  },
  ...
}

  4. Enregistrez le fichier en sélectionnant le menu ... ou en appuyant sur Ctrl+S sur Windows et Linux, ou Commande+S sur macOS.

    Important

    Chaque fois que vous modifiez un fichier au sein de l’éditeur, veillez à l’enregistrer ensuite en sélectionnant le menu ... en haut à droite de l’éditeur, ou en appuyant sur Ctrl+S sur Windows et Linux, ou Commande+S sur macOS. Pour quitter l’éditeur, appuyez sur Ctrl+Q sur Windows et Linux ou cliquez sur le coin supérieur droit de l’éditeur et sélectionnez Quitter sur MacOS.

  5. Passez au fichier index.js et ajoutez-y le contenu suivant. Il s’agit d’un petit programme Node.js qui répond toujours par « Hello World! » quand une demande GET est effectuée sur le serveur.

    const http = require('http');

const server = http.createServer(function(request, response) {
    response.writeHead(200, { "Content-Type": "text/html" });
    response.end("<html><body><h1>Hello World!</h1></body></html>");
});

const port = process.env.PORT || 1337;
server.listen(port);

console.log(`Server running at http://localhost:${port}`);

  6. Enregistrez votre fichier et quittez l’éditeur en sélectionnant l’icône ... en haut à droite, puis sélectionnez Enregistrer et Fermer l’éditeur dans le menu contextuel, ou utilisez les touches de raccourci Ctrl+S et Ctrl+Q sur Windows et Linux.

Tester votre application web (facultatif)

Pendant que vous exécutez l’application web helloworld, vous pouvez vérifier qu’elle s’exécute localement en ouvrant une deuxième session de l’interpréteur de commandes.

  1. Dans un nouvel onglet de navigateur, accédez à https://shell.azure.com/.

  2. À partir de votre session de l’interpréteur de commandes principale, exécutez les commandes suivantes pour démarrer votre application web :

    cd ~/helloworld
npm start

  3. À partir de votre deuxième session de l’interpréteur de commandes, exécutez les commandes suivantes pour accéder à votre application web :

    curl http://127.0.0.1:1337/

    Vous devez obtenir la sortie suivante :

    <html><body><h1>Hello World!</h1></body></html>

  4. À partir de votre session de l’interpréteur de commandes principale, appuyez sur Ctrl+C pour quitter votre application web, puis fermez l’onglet de navigateur de la deuxième session de l’interpréteur de commandes.

Pour créer une application web de démarrage, nous allons utiliser le framework d’application web Flask.

  1. Exécutez les commandes suivantes dans Azure Cloud Shell pour configurer un environnement virtuel et installer Flask dans votre profil :

    python3 -m venv venv
source venv/bin/activate
pip install flask

  2. Exécutez ces commandes pour créer et basculer vers votre nouveau répertoire d’application web :

    mkdir ~/BestBikeApp
cd ~/BestBikeApp

  3. Créez un fichier pour votre application web en ouvrant application.py dans l’éditeur interactif Python :

    code application.py

  4. Copiez et collez le code Python suivant pour créer la fonctionnalité principale de l’application web :

    from flask import Flask
app = Flask(__name__)

@app.route("/")
def hello():
    return "<html><body><h1>Hello Best Bike App!</h1></body></html>\n"

  5. Enregistrez votre fichier, quittez l’éditeur en sélectionnant le menu ... en haut à droite, puis en sélectionnant Enregistrer>Fermer l’éditeur, ou en appuyant sur Ctrl+S et Ctrl+Q sur Windows et Linux.

  6. Pour déployer votre application sur Azure, vous devez enregistrer la liste des exigences que vous avez établies pour l’application dans un fichier requirements.txt. Pour cela, exécutez la commande suivante :

    pip freeze > requirements.txt

Tester votre application web (facultatif)

Vous pouvez tester votre application localement dans Azure pendant son exécution.

  1. Ouvrez une deuxième session de l’interpréteur de commandes dans un nouvel onglet de navigateur https://shell.azure.com/.

  2. À partir de votre session de l’interpréteur de commandes principale (à droite), exécutez les commandes suivantes pour activer l’environnement virtuel :

    cd ..
source venv/bin/activate

  3. À partir de votre session de l’interpréteur de commandes principale (à droite), exécutez les commandes suivantes pour démarrer votre application web :

    cd ~/BestBikeApp
export FLASK_APP=application.py
flask run

  4. À partir de votre deuxième session de l’interpréteur de commandes, exécutez les commandes suivantes pour accéder à votre application web :

    curl http://127.0.0.1:5000/

    Vous devriez obtenir la sortie HTML suivante :

    <html><body><h1>Hello Best Bike App!</h1></body></html>

  5. À partir de votre session de l’interpréteur de commandes principale, appuyez sur Ctrl+C pour quitter votre application web, puis fermez la session Azure Cloud Shell secondaire.