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.

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)

Vous pouvez tester votre application localement sur Azure. Pour cela, utilisez les étapes suivantes :

  1. Exécutez les commandes suivantes pour générer et exécuter votre application web en arrière-plan :

    cd BestBikeApp
dotnet run &

    Vous devez obtenir une sortie telle que l’exemple suivant :

    [1] <process-number>
<username> [ ~/BestBikeApp ]$ Building...
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:<port>
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

    Dans la sortie, notez les valeurs du numéro <process-number> et <port>.

  2. Exécutez la commande suivante pour accéder à votre application web, en remplaçant le <port> par le port que vous avez noté à la dernière étape.

    curl -kL http://localhost:<port>/

    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://zcusa.951200.xyz/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. En utilisant la valeur <process-number> que vous avez notée précédemment, arrêtez dotnet :

    kill <process-number>

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.5

  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
cat >package.json <<EOL
{
  "name": "helloworld",
  "version": "1.0.0",
  "scripts": {
    "start": "node index.js"
  }
}
EOL

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 :

    cat >index.js <<EOL
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}\`);
EOL

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 d’interpréteur de commandes principale, exécutez les commandes suivantes pour démarrer votre application web en arrière-plan :

    cd ~/helloworld
npm start &

    Vous devez obtenir une sortie telle que l’exemple suivant :

    [1] <process-number>
> helloworld@1.0.0 start
> node index.js

Server running at http://localhost:1337

    Dans la sortie, notez la valeur du nombre <process-number>.

  3. Dans la même session Cloud Shell, exécutez la commande suivante pour accéder à votre application web.

    curl -kL http://localhost:1337/

    Vous devez obtenir la sortie suivante :

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

  4. En utilisant la valeur <process-number> que vous avez noté précédemment, arrêtez le nœud :

    kill <process-number>

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 appelé application.py avec une réponse HTML de base :

    cat >application.py <<EOL
from flask import Flask
app = Flask(__name__)

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

  4. 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. Exécutez les commandes suivantes pour démarrer votre application web en arrière-plan :

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

    Vous devez obtenir une sortie telle que l’exemple suivant :

    [1] <process-number>
 * Serving Flask app 'application.py'
 * Debug mode: off
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on http://127.0.0.1:5000
Press CTRL+C to quit

    Dans la sortie, notez la valeur du nombre <process-number>. Étant donné que le processus s’exécute en arrière-plan, vous ne pouvez pas l’arrêter avec Ctrl+C. Vous devez l’arrêter avec son numéro de processus.

  2. Exécutez la commande suivante pour accéder à votre application web.

    curl -kL http://localhost:5000/

    Vous devriez obtenir la sortie HTML suivante :

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

  3. En utilisant <process-number> de processus que vous avez noté précédemment, arrêtez Flask :

    kill <process-number>