Esercizio - Scrivere codice per implementare un'applicazione Web

  • 5 minuti

In questa unità si apprenderà come usare gli strumenti per sviluppatori per creare il codice per un'applicazione Web di base.

Creare un nuovo progetto Web

Il fulcro degli strumenti dell'interfaccia della riga di comando .NET è rappresentato dallo strumento da riga di comando dotnet. Con questo comando si crea un nuovo progetto Web ASP.NET Core.

Eseguire questo comando per creare una nuova applicazione ASP.NET Core MVC (Model-View Cotroller) denominata "BestBikeApp":

dotnet new mvc --name BestBikeApp

Il comando crea una nuova cartella denominata "BestBikeApp" per contenere il progetto.

Facoltativamente, testare l'app Web

È possibile testare l'applicazione in locale in Azure. A tale scopo, seguire questa procedura:

  1. Eseguire i comandi seguenti per compilare ed eseguire l'applicazione Web in background:

    cd BestBikeApp
dotnet run &

    Si otterrà un output simile a quello dell'esempio seguente:

    [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

    Nell'output prendere nota dei valori di <numero di processo> e <porta>.

  2. Eseguire il comando seguente per passare all'applicazione Web, sostituendo la <porta> con la porta annotata nell'ultimo passaggio.

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

    Verrà visualizzato un codice HTML che termina con le righe seguenti:

    <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. Usando il <numero di processo> annotato in precedenza, arrestare dotnet:

    kill <process-number>

Per creare un'applicazione Web di base si usa Maven, uno strumento di uso comune per la gestione e la compilazione di progetti per app Java. Viene usato il modello maven-archetype-webapp per generare il codice per l'applicazione Web.

  1. Eseguire ora questi comandi in Azure Cloud Shell per creare una nuova app Web:

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

  2. Eseguire ora questi comandi per passare alla directory della nuova applicazione"helloworld" e creare il pacchetto dell'applicazione per la distribuzione:

    cd helloworld
mvn package

  3. Al termine dell'esecuzione del comando, usare i comandi seguenti per aprire la directory target e visualizzarne il contenuto:

    cd target
ls

A questo punto è disponibile un file denominato helloworld.war che è il pacchetto dell'applicazione Web che verrà distribuito nel servizio app.

Per creare un'applicazione Web Node.js di base si usa npm (Node Package Manager) insieme a codice JavaScript per eseguire l'elaborazione della pagina Web effettiva.

  1. Eseguire i comandi seguenti nel terminale per creare un nuovo file package.json che descrive l'applicazione Node.js:

    cd ~
mkdir helloworld
cd helloworld
cat >package.json <<EOL
{
  "name": "helloworld",
  "version": "1.0.0",
  "scripts": {
    "start": "node index.js"
  }
}
EOL

Viene creato un nuovo file package.json nella cartella corrente. Se si immette ls nella finestra del terminale, il file dovrebbe trovarsi all'interno della cartella corrente. Per eseguire la logica del sito Web, è necessario un file JavaScript. Per questo esempio di base è necessario un solo file: index.js.

  1. Creare il file eseguendo questo comando nel terminale:

    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

Facoltativamente, testare l'app Web

Durante l'esecuzione dell'app Web helloworld, è possibile verificare che sia in esecuzione in locale aprendo una seconda sessione della shell dei comandi.

  1. In una nuova scheda del browser passare a https://shell.azure.com/.

  2. Dalla sessione della shell dei comandi primaria eseguire i comandi seguenti per avviare l'applicazione Web in background:

    cd ~/helloworld
npm start &

    Si otterrà un output simile a quello dell'esempio seguente:

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

Server running at http://localhost:1337

    Nell'output prendere nota dei valori di <numero di processo>.

  3. Nella stessa sessione di Cloud Shell eseguire il comando seguente per passare all'applicazione Web.

    curl -kL http://localhost:1337/

    Dovrebbe essere visualizzato l'output seguente:

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

  4. Usando il <numero di processo> annotato in precedenza, arrestare il nodo:

    kill <process-number>

Per creare un'applicazione Web di base si usa il framework per le applicazioni Web di Flask.

  1. Eseguire i comandi seguenti in Azure Cloud Shell per configurare un ambiente virtuale e installare Flask nel profilo:

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

  2. Eseguire questi comandi per creare e passare alla nuova directory dell'app Web:

    mkdir ~/BestBikeApp
cd ~/BestBikeApp

  3. Creare un nuovo file denominato application.py con una risposta HTML di 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. Per distribuire l'applicazione in Azure, è necessario salvare l'elenco dei requisiti dell'applicazione in un file requirements.txt. A tale scopo, eseguire il comando seguente:

    pip freeze > requirements.txt

Facoltativamente, testare l'app Web

È possibile testare l'applicazione in locale in Azure durante l'esecuzione.

  1. Eseguire i comandi seguenti per avviare l'applicazione Web in background:

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

    Si otterrà un output simile a quello dell'esempio seguente:

    [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

    Nell'output prendere nota dei valori di <numero di processo>. Poiché il processo è in esecuzione in background, non è possibile uscire con CTRL+C. Sarà necessario arrestarlo con il relativo numero di processo.

  2. Eseguire il comando seguente per passare all'applicazione Web.

    curl -kL http://localhost:5000/

    Si otterrà l'output HTML seguente:

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

  3. Usando il <numero di processo> annotato in precedenza, arrestare Flask:

    kill <process-number>