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

Du kan även testa webbappen

Du kan testa ditt program lokalt i Azure. Gör det med hjälp av följande steg:

Kör följande kommandon för att skapa och köra webbprogrammet i bakgrunden:

cd BestBikeApp
dotnet run &

Du bör få utdata som i följande exempel:

[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

Anteckna värdena <för processnummer> och <port> i utdata.

Kör följande kommando för att bläddra till webbprogrammet och ersätt <porten> med den port som du antecknade i det senaste steget.

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

Du bör se viss HTML-kod som slutar på följande rader:

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

Med hjälp av <processnummer> som du antecknade tidigare stoppar du dotnet:
```
kill <process-number>
```

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.

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

Kör följande kommandon för att ändra till den nya ”helloworld”-programkatalogen och paketera programmet för distribution:
```
cd helloworld
mvn package
```
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.

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.

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

Du kan även testa webbappen

När du kör helloworld-webbappen kan du kontrollera att den körs lokalt genom att öppna en andra kommandogränssnittssession.

Från en ny webbläsarflik bläddrar du till https://shell.azure.com/.
Från den primära kommandogränssnittssessionen kör du följande kommandon för att starta webbprogrammet i bakgrunden:
```
cd ~/helloworld
npm start &
```
Du bör få utdata som i följande exempel:
```
[1] <process-number>
> helloworld@1.0.0 start
> node index.js

Server running at http://localhost:1337
```
Anteckna värdet <för processnummer> i utdata.
I samma Cloud Shell-session kör du följande kommando för att bläddra till webbprogrammet.
```
curl -kL http://localhost:1337/
```
Du bör se följande utdata:
```
<html><body><h1>Hello World!</h1></body></html>
```
Med hjälp av <processnummer> som du antecknade tidigare stoppar du noden:
```
kill <process-number>
```

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

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
```
Kör dessa kommandon för att skapa och växla till din nya webbappkatalog:
```
mkdir ~/BestBikeApp
cd ~/BestBikeApp
```

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

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
```

Du kan även testa webbappen

Du kan testa ditt program lokalt i Azure medan det körs.

Kör följande kommandon för att starta webbprogrammet i bakgrunden:

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

Du bör få utdata som i följande exempel:

[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

Anteckna värdet <för processnummer> i utdata. Eftersom processen körs i bakgrunden kan du inte avsluta med CTRL+C. Du måste stoppa det med dess processnummer.

Kör följande kommando för att bläddra till webbprogrammet.
```
curl -kL http://localhost:5000/
```
Du bör få följande HTML-utdata:
```
<html><body><h1>Hello Best Bike App!</h1></body></html>
```
Med hjälp av <processnummer> som du antecknade tidigare stoppar du Flask:
```
kill <process-number>
```

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

Skapa ett nytt webbprojekt

Du kan även testa webbappen

Du kan även testa webbappen

Du kan även testa webbappen

Feedback