Övning – Skriva kod för att implementera en webbapp

  • 5 minuter

I den här lektionen använder du utvecklarverktyg för att skapa koden för ett startwebbprogram.

Skapa ett nytt webbprojekt

Navet bland .NET CLI-verktygen är kommandoradsverktyget dotnet. Med det här kommandot skapar du ett nytt ASP.NET Core-webbprojekt.

Kör följande kommando för att skapa ett nytt ASP.NET Core Model-View Cotroller-program (MVC) med namnet "BestBikeApp":

dotnet new mvc --name BestBikeApp

Kommandot skapar en ny mapp med namnet "BestBikeApp" för projektet. Om du vill testa appen lokalt behöver du .NET SDK installerat på systemet.

För att skapa ett startwebbprogram använder vi Maven, ett vanligt projekthanterings- och byggverktyg för Java-appar. Vi använder mallen maven-archetype-webapp för att generera koden för vårt webbprogram.

  1. Kör följande kommandon i Azure Cloud Shell nu för att skapa en ny webbapp:

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

  2. Kör följande kommandon för att ändra till den nya ”helloworld”-programkatalogen och paketera programmet för distribution:

    cd helloworld
mvn package

  3. När kommandot har körts kör du dessa kommandon för att öppna målkatalogen och visa dess innehåll:

    cd target
ls

Nu har du en fil med namnet helloworld.war som är det webbprogrampaket som vi ska distribuera till App Service.

För att skapa en start-Node.js webbapp använder vi Node Package Manager (npm) tillsammans med lite JavaScript-kod för att köra den faktiska webbsidebearbetningen.

  1. Kör följande kommandon i terminalen för att skapa en ny package.json fil som beskriver vårt Node.js program:

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

En ny package.json fil skapas i den aktuella mappen. Du bör hitta den i den aktuella mappen om du anger ls i terminalfönstret. Vi behöver en JavaScript-fil för att köra vår webbplatslogik. I det här grundläggande exemplet behöver vi bara en fil: index.js.

  1. Skapa filen genom att köra följande kommando i terminalen:

    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

Om du vill testa appen lokalt behöver du Node.js och npm installerade på systemet.

För att skapa ett startwebbprogram använder vi Flask-webbappsramverket.

  1. Kör följande kommandon i Azure Cloud Shell för att konfigurera en virtuell miljö och installera Flask i din profil:

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

  2. Kör dessa kommandon för att skapa och växla till din nya webbappkatalog:

    mkdir ~/BestBikeApp
cd ~/BestBikeApp

  3. Skapa en ny fil med namnet application.py med ett grundläggande HTML-svar:

    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. Om du vill distribuera ditt program till Azure måste du spara listan över programkrav som du har gjort för det i en requirements.txt fil. Detta gör du genom att köra följande kommando:

    pip freeze > requirements.txt

För att testa appen lokalt behöver du Python 3 och Flask installerade på systemet.