Ö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, till exempel genom att bläddra till https://shell.azure.com/. 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 en 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.

Vi skapar en startwebbapp med hjälp av Maven, ett vanligt projekthanterings- och skapandeverktyg 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 gå till den nya ”helloworld”-appkatalogen och paketera appen för distribution:
```
cd helloworld
mvn package
```
När kommandot är klart kör du dessa kommandon för att öppna katalogen "target" 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 se 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 > 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 det andra gränssnittet.

För att skapa en startwebbapp använder vi ramverket Flask för webbappar.

Kör följande kommandon 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 i Azure Cloud Shell för att skapa katalogen för din nya webbapp:
```
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. Det 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 när 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 den sekundära Azure-Cloud Shell.

Fortsätt