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. Tramite questo comando si creerà un nuovo progetto Web ASP.NET Core.

Prima di tutto, installare la versione 8.0 di dotnet in Cloud Shell. Per questo esercizio, si userà SDK versione 3.1.102.

  1. Eseguire i comandi seguenti a destra per scaricare e installare dotnet 8.0:

    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. Eseguire quindi questo comando per creare una nuova applicazione ASP.NET Core MVC denominata "BestBikeApp":

    dotnet new mvc --name BestBikeApp

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

Facoltativamente, testare l'app Web

Aprire una seconda sessione della shell dei comandi passando a https://shell.azure.com/ in una nuova scheda. È possibile testare l'applicazione in locale in Azure. A tale scopo, seguire questa procedura:

  1. Dalla sessione della shell dei comandi principale eseguire i comandi seguenti per compilare ed eseguire l'applicazione Web:

    cd BestBikeApp
dotnet run

    Si otterrà un output simile al seguente:

    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

    L'output descrive la situazione dopo l'avvio dell'app: l'applicazione è in esecuzione e in ascolto sulla porta 5022.

  2. Da un'altra sessione di Cloud Shell eseguire il comando seguente per passare all'applicazione Web:

    curl -kL http://127.0.0.1:5000/

    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://learn.microsoft.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. Dalla sessione della shell dei comandi primaria premere CTRL+C per uscire dall'app Web.

Per creare un'applicazione Web di base si userà Maven, uno strumento di uso comune per la gestione e la compilazione di progetti per app Java. Verrà 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.4

  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

Si otterrà un file denominato helloworld.war. Questo è il pacchetto dell'applicazione Web che verrà distribuito nel servizio app.

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

  1. Eseguire questi comandi in Azure Cloud Shell per creare un nuovo file package.json che descrive l'applicazione Node.js:

    cd ~
mkdir helloworld
cd helloworld
npm init -y

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, sarà necessario un file JavaScript. Poiché si tratta solo di un esempio di base, sarà necessario un solo file: index.js.

  1. Usare il comando seguente nel terminale per creare il file:

    touch index.js

  2. A questo punto è necessario apportare alcune modifiche a entrambi i file. Eseguire questo comando nel terminale per aprire un editor interattivo:

    code .

  3. Selezionare il file package.json e apportare le modifiche seguenti nella sezione scripts per usare Node.js per avviare l'app Web:

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

  4. Salvare il file usando il menu ... o premendo CTRL+S in Windows e Linux oppure Comando+S in macOS.

    Importante

    Ogni volta che si modifica un file nell'editor, assicurarsi di salvarlo selezionando il menu ... nell'angolo in alto a destra dell'editor o premendo CTRL+S in Windows e Linux oppure Comando+S in macOS. Per uscire dall'editor, premere CTRL+Q in Windows e Linux oppure fare clic nell'angolo in alto a destra dell'editor e selezionare Esci in MacOS.

  5. Passare al file index.js e aggiungervi il contenuto seguente. Si tratta di un semplice programma Node.js che risponde sempre con "Hello World!" a qualsiasi richiesta GET inviata al server.

    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. Salvare il file e uscire dall'editor selezionando l'icona ... in alto a destra e quindi scegliendo Salva e Chiudi editor dal menu a comparsa, oppure premendo le scelte rapide da tastiera CTRL+S e CTRL+Q in Windows e Linux.

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:

    cd ~/helloworld
npm start

  3. Dalla seconda sessione della shell dei comandi eseguire il comando seguente per passare all'applicazione Web:

    curl http://127.0.0.1:1337/

    Dovrebbe essere visualizzato l'output seguente:

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

  4. Dalla sessione della shell dei comandi primaria premere CTRL+C per uscire dall'app Web, quindi chiudere la seconda scheda del browser della sessione della shell.

Per creare un'applicazione Web di base si userà 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 per l'app Web aprendo application.py nell'editor interattivo Python:

    code application.py

  4. Copiare e incollare il codice Python seguente per creare la funzionalità principale dell'app 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. Salvare il file e uscire dall'editor selezionando il menu ... in alto a destra e quindi scegliendo Salva>Chiudi editor oppure premendo CTRL+S e CTRL+Q in Windows e Linux.

  6. Per distribuire l'applicazione in Azure, sarà 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. Aprire una seconda sessione della shell dei comandi in una nuova scheda del browser https://shell.azure.com/.

  2. Dalla sessione della shell dei comandi primaria (a destra) eseguire i comandi seguenti per attivare l'ambiente virtuale:

    cd ..
source venv/bin/activate

  3. Dalla sessione della shell dei comandi primaria (a destra) eseguire questi comandi per avviare l'applicazione Web:

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

  4. Dalla seconda sessione della shell dei comandi eseguire il comando seguente per passare all'applicazione Web:

    curl http://127.0.0.1:5000/

    Si otterrà l'output HTML seguente:

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

  5. Dalla sessione della shell dei comandi primaria premere CTRL+C per uscire dall'app Web, quindi chiudere la sessione di Azure Cloud Shell secondaria.