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

  • 5 minutes

Dans cette unité, vous utiliser des 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. Utilisez cette commande pour créer un projet web ASP.NET Core.

Commençons par installer la version 8.0 de dotnet dans le Cloud Shell. Dans cet exercice, nous utilisons le Kit de développement logiciel (SDK) version 3.1.102.

  1. Téléchargez et installez dotnet 8.0 en exécutant les commandes suivantes dans la fenêtre Azure Cloud Shell :

    wget https://dot.net/v1/dotnet-install.sh -O dotnet-install.sh
chmod +x ./dotnet-install.sh
./dotnet-install.sh --channel 8.0
export PATH="~/.dotnet:$PATH"
echo "export PATH=~/.dotnet:\$PATH" >> ~/.bashrc

  2. Ensuite, exécutez la commande suivante pour créer une application modèle-vue-contrôleur (MVC) ASP.NET Core nommée « BestBikeApp » :

    dotnet new mvc --name BestBikeApp

La commande crée 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 l’exemple suivant :

    warn: Microsoft.AspNetCore.DataProtection.KeyManagement.XmlKeyManager[35]
      No XML encryptor configured. Key {b4a2970c-215c-4eb2-92b4-c28d021158c6} may be persisted to storage in unencrypted form.
info: Microsoft.Hosting.Lifetime[14]
      Now listening on: http://localhost:5022
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/cephas_lin/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 5022. Notez le port sur lequel votre application s’exécute et qu’elle écoute à partir de votre sortie.

  2. À partir d’une autre session Cloud Shell, exécutez la commande suivante pour accéder à votre application web, en remplaçant 5000 par le port que vous avez noté à la dernière étape :

    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://video2.skills-academy.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

        </main>
    </div>

    <footer b-b5g3qljvtd class="border-top footer text-muted">
        <div b-b5g3qljvtd class="container">
            &copy; 2024 - 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=hRQyftXiu1lLX2P9Ly9xa4gHJgLeR1uGN5qegUobtGo"></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 utilisons Maven, un outil de génération et de gestion de projets couramment utilisé pour les applications Java. Nous utilisons 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

Nous avons maintenant un fichier appelé helloworld.war qui est le package d’application web que nous allons déployer sur App Service.

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

  1. Exécutez les commandes suivantes dans le terminal pour créer un fichier package.json qui décrit notre application Node.js :

    cd ~
mkdir helloworld
cd helloworld
npm init -y

Un fichier package.json est créé dans le dossier actif. Vous devez le trouver dans le dossier actif si vous entrez ls dans la fenêtre de terminal. Nous devons avoir un fichier JavaScript pour exécuter notre logique de site web. Pour cet exemple de base, nous avons uniquement besoin d’un fichier : index.js.

  1. Créez le fichier en exécutant la commande suivante dans le terminal :

    touch index.js

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

    code .

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

    {
  "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. Ce code est un petit programme Node.js qui répond toujours par « Hello World! » quand une requête 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 utilisons l’infrastructure 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 (dans la fenêtre à 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 (dans la fenêtre à 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.