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

Först installerar vi rätt version av dotnet i Cloud Shell. I den här övningen använder vi SDK-versionen 3.1.102.

Kör följande kommandon i Azure Cloud Shell till höger för att ladda ned och installera dotnet:

wget -q -O - https://dotnet.microsoft.com/download/dotnet/scripts/v1/dotnet-install.sh | bash -s -- --version 6.0.404
export PATH="~/.dotnet:$PATH"
echo "export PATH=~/.dotnet:\$PATH" >> ~/.bashrc

Kör sedan följande kommando för att skapa ett nytt ASP.NET Core MVC-program med namnet "BestBikeApp":
```
dotnet new mvc --name BestBikeApp
```

Kommandot skapar en ny mapp som heter ”BestBikeApp”, där projektet ska lagras.

Du kan även testa webbappen

Öppna en andra kommandogränssnittssession genom att bläddra till https://shell.azure.com/ på en ny flik. Du kan testa ditt program lokalt i Azure. Gör det med hjälp av följande steg:

I den primära kommandogränssnittssessionen kör du följande kommandon för att skapa och köra webbappen:

cd BestBikeApp
dotnet run

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

info: Microsoft.Hosting.Lifetime[0]
      Now listening on: https://localhost:5001
info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://localhost:5000
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/user/BestBikeApp

Utdata beskriver situationen efter att du har startat appen: programmet körs och lyssnar på port 5000.

I den sekundära kommandogränssnittssessionen kör du följande kommando för att bläddra till webbappen:

curl -kL http://127.0.0.1:5000/

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 class="border-top footer text-muted">
         <div class="container">
             &copy; 2021 - 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=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kPS3xIVq36I0"></script>

 </body>
 </html>

I den primära kommandogränssnittssessionen trycker du på Ctrl + C för att avsluta webbappen.

För att skapa en startwebbapp använder vi Maven, ett vanligt projekthanterings- och byggverktyg för Java-appar. Vi använder maven-archetype-webapp-mallen till att generera koden för webbappen.

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

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

Du har en fil med namnet helloworld.war. Det här är det webbprogrampaket som vi ska distribuera till App Service.

Vi skapar en Node.js-startwebbapp med hjälp av Node Package Manager (npm), samt viss JavaScript-kod som kör den faktiska bearbetningen av webbsidan.

Kör följande kommandon i Azure Cloud Shell för att skapa en ny package.json som beskriver vårt Node.js-program:
```
cd ~
mkdir helloworld
cd helloworld
npm init -y
```

Då skapas en ny package.json fil 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. Eftersom detta bara är ett grundläggande exempel behöver vi bara en fil: index.js.

Kör följande kommando i terminalen för att skapa filen:
```
touch index.js
```
Nu måste vi göra några ändringar i båda våra filer. Kör följande kommando i terminalen för att öppna en interaktiv redigerare:
```
code .
```
package.json Välj filen och gör följande ändringar i scripts avsnittet för att använda Node.js för att starta webbappen:
```
{
  "name": "helloworld",
  ...
  "scripts": {
    "start": "node index.js"
  },
  ...
}
```
Spara filen genom att välja menyn ... eller tryck på Ctrl+S i Windows och Linux eller Command+S på macOS.

Viktigt!

När du redigerar en fil i redigeraren ska du spara efteråt genom att välja menyn ... i det övre högra hörnet i redigeraren eller genom att trycka på Ctrl+S i Windows och Linux eller Command+S på macOS. Om du vill avsluta redigeraren trycker du på Ctrl+Q i Windows och Linux eller klickar på det övre högra hörnet i redigeraren och väljer Avsluta i MacOS.

Växla till filen index.js och lägg till följande innehåll i den. Det här är ett litet Node.js-program som alltid svarar med "Hello World!" när en GET-begäran görs till servern.

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}`);

Spara filen och avsluta redigeraren genom att välja ikonen ... längst upp till höger och välja Spara och stäng redigeraren från snabbmenyn, eller genom att använda snabbtangenterna Ctrl+S och Ctrl+Q i Windows och Linux.

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/.
I den primära kommandogränssnittssessionen kör du följande kommandon för att starta webbappen:
```
cd ~/helloworld
npm start
```
I den sekundära kommandogränssnittssessionen kör du följande kommando för att bläddra till webbappen:
```
curl http://127.0.0.1:1337/
```
Du bör se följande utdata:
```
<html><body><h1>Hello World!</h1></body></html>
```
Från den primära kommandogränssnittssessionen trycker du på Ctrl+C för att avsluta webbappen och stänger sedan webbläsarfliken för den andra gränssnittssessionen.

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 för webbappen genom att öppna application.py i den interaktiva python-redigeraren:
```
code application.py
```

Kopiera och klistra in följande Python-kod för att skapa webbappens huvudfunktioner:

from flask import Flask
app = Flask(__name__)

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

Spara filen och avsluta redigeraren genom att välja menyn ... längst upp till höger och sedan välja Spara>stäng redigeraren, eller genom att trycka på Ctrl+S och Ctrl+Q i Windows och Linux.
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.

Öppna en andra kommandogränssnittssession på en ny webbläsarflik https://shell.azure.com/.
Från den primära kommandogränssnittssessionen (till höger) kör du följande kommandon för att aktivera den virtuella miljön:
```
cd ..
source venv/bin/activate
```
Från den primära kommandogränssnittssessionen (till höger) kör du följande kommandon för att starta webbprogrammet:
```
cd ~/BestBikeApp
export FLASK_APP=application.py
flask run
```
I den sekundära kommandogränssnittssessionen kör du följande kommando för att bläddra till webbappen:
```
curl http://127.0.0.1:5000/
```
Du bör få följande HTML-utdata:
```
<html><body><h1>Hello Best Bike App!</h1></body></html>
```
Från den primära kommandogränssnittssessionen trycker du på Ctrl+C för att avsluta webbappen och stänger sedan det sekundära Azure Cloud Shell.

Fortsätt

Ö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