Cvičení – napsání kódu, který implementuje webovou aplikaci

5 min

V této lekci použijete vývojářské nástroje k vytvoření kódu pro úvodní webovou aplikaci.

Vytvoření nového webového projektu

Jedním z nejdůležitějších nástrojů rozhraní příkazového řádku .NET CLI je nástroj dotnet. Pomocí tohoto příkazu vytvoříte nový webový projekt ASP.NET Core.

Nejdřív si do Cloud Shellu nainstalujme správnou verzi dotnet. V tomto cvičení budeme používat sadu SDK verze 3.1.102.

Spuštěním následujících příkazů v Azure Cloud Shellu napravo stáhněte a nainstalujte 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

Potom spuštěním následujícího příkazu vytvořte novou aplikaci ASP.NET Core MVC s názvem BestBikeApp:
```
dotnet new mvc --name BestBikeApp
```

Tento příkaz vytvoří novou složku s názvem BestBikeApp, do které se bude ukládat tento projekt.

Volitelné otestování webové aplikace

Otevřete druhou relaci příkazového prostředí tak, že přejdete na https://shell.azure.com/ novou kartu. Aplikaci můžete otestovat místně v Azure. Můžete to udělat podle následujících kroků:

V primární relaci prostředí příkazového řádku spusťte následující příkazy, které sestaví a spustí webovou aplikaci:

cd BestBikeApp
dotnet run

Měl by se zobrazit výstup podobný tomuto:

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

Výstup popisuje situaci po spuštění aplikace: aplikace je spuštěna a naslouchá na portu 5000 (přes HTTPS).

Z druhé relace příkazového prostředí spusťte následující příkaz, který přejde na vaši webovou aplikaci:

curl -kL http://127.0.0.1:5000/

Měl by se zobrazit nějaký kód HTML, který končí na následujících řádcích:

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

Z primární relace příkazového prostředí ukončete webovou aplikaci stisknutím kláves Ctrl+C.

K vytvoření úvodní webové aplikace použijeme Maven, běžně používaný nástroj pro správu projektů a sestavení pro aplikace v Javě. Ke generování kódu webové aplikace použijte šablonu maven-archetype-webapp.

Spuštěním následujících příkazů v Azure Cloud Shellu teď vytvořte novou webovou aplikaci:

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

A teď spusťte tyto příkazy, kterými přejdete do nového adresáře aplikace „helloworld“ a zabalíte aplikaci pro nasazení:
```
cd helloworld
mvn package
```
Po dokončení spuštění příkazu spusťte tyto příkazy a otevřete cílový adresář a zobrazte jeho obsah:
```
cd target
ls
```

Budete mít uvedený soubor s názvem helloworld.war. Toto je balíček webové aplikace, který nasadíme do služby App Service.

K vytvoření počáteční webové aplikace Node.js použijete Node Package Manager (npm) a javascriptový kód, který spustí vlastní zpracování webové stránky.

Spuštěním následujících příkazů v Azure Cloud Shellu vytvořte novou package.json aplikaci Node.js:
```
cd ~
mkdir helloworld
cd helloworld
npm init -y
```

Tím se vytvoří nový package.json soubor v aktuální složce. Pokud zadáte ls okno terminálu, měli byste ho najít v aktuální složce. Ke spuštění logiky webu budeme potřebovat javascriptový soubor. Vzhledem k tomu, že je to jen základní příklad, budeme potřebovat jenom jeden soubor: index.js.

Spuštěním následujícího příkazu v terminálu vytvořte soubor:
```
touch index.js
```
Teď je potřeba v obou souborech provést několik úprav. Spuštěním následujícího příkazu v terminálu otevřete interaktivní editor:
```
code .
```
package.json Vyberte soubor a v části proveďte následující úpravyscripts, aby se webová aplikace spustila pomocí Node.js:
```
{
  "name": "helloworld",
  ...
  "scripts": {
    "start": "node index.js"
  },
  ...
}
```
Soubor uložte tak , že vyberete nabídku ... nebo stisknete Kombinaci kláves Ctrl+S ve Windows a Linuxu nebo Command+S v macOS.

Důležité

Pokaždé, když upravujete soubor v editoru, nezapomeňte ho uložit tak, že vyberete nabídku ... v pravém horním rohu editoru nebo stisknete Ctrl+S ve Windows a Linuxu nebo Command+S v macOS. Pokud chcete editor ukončit, stiskněte Ctrl+Q ve Windows a Linuxu nebo klikněte v pravém horním rohu editoru a vyberte Ukončit v macOS.

Přepněte na soubor index.js a přidejte do něj následující obsah. Jedná se o malý program Node.js, který vždy odpoví "Hello World!" při každém požadavku GET na 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}`);

Uložte soubor a ukončete editor výběrem ikony ... v pravém horním rohu a výběrem možnosti Uložit a zavřít editor z místní nabídky nebo pomocí kláves akcelerátoru Ctrl+S a Ctrl+Q ve Windows a Linuxu.

Volitelné otestování webové aplikace

Když spouštíte webovou aplikaci helloworld, můžete ji ověřit místně otevřením druhé relace příkazového prostředí.

Na nové kartě prohlížeče přejděte na https://shell.azure.com/.
Z primární relace příkazového prostředí spusťte následující příkazy, které spustí vaši webovou aplikaci:
```
cd ~/helloworld
npm start
```
Z druhé relace příkazového prostředí spusťte následující příkaz, který přejde na vaši webovou aplikaci:
```
curl http://127.0.0.1:1337/
```
Měli byste získat následující výstup:
```
<html><body><h1>Hello World!</h1></body></html>
```
Z primární relace příkazového prostředí ukončete webovou aplikaci stisknutím kombinace kláves Ctrl+C a potom zavřete druhou kartu prohlížeče relace prostředí.

K vytvoření úvodní webové aplikace použijeme architekturu webové aplikace Flask.

Spuštěním následujících příkazů v Azure Cloud Shellu nastavte virtuální prostředí a nainstalujte Flask do svého profilu:
```
python3 -m venv venv
source venv/bin/activate
pip install flask
```
Spuštěním těchto příkazů vytvořte a přepněte do nového adresáře webové aplikace:
```
mkdir ~/BestBikeApp
cd ~/BestBikeApp
```
Otevřete application.py v interaktivním editoru Pythonu a vytvořte nový soubor pro webovou aplikaci:
```
code application.py
```

Zkopírováním a vložením následujícího kódu v Pythonu vytvořte hlavní funkce webové aplikace:

from flask import Flask
app = Flask(__name__)

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

Uložte soubor a ukončete editor tak, že v pravém horním rohu vyberete nabídku ... a pak vyberete Uložit>zavřený editor nebo stisknete Kombinaci kláves Ctrl+S a Ctrl+Q ve Windows a Linuxu.
Pokud chcete nasadit aplikaci do Azure, musíte uložit seznam požadavků aplikace, které jste pro ni vytvořili v souboru requirements.txt . Provedete to pomocí následujícího příkazu:
```
pip freeze > requirements.txt
```

Volitelné otestování webové aplikace

Aplikaci můžete otestovat místně v Azure, když je spuštěná.

Otevřete druhou relaci příkazového prostředí na nové kartě https://shell.azure.com/prohlížeče .
Z primární relace příkazového prostředí (vpravo) spusťte následující příkazy, které aktivují virtuální prostředí:
```
cd ..
source venv/bin/activate
```
Z primární relace příkazového prostředí (vpravo) spusťte následující příkazy, které spustí vaši webovou aplikaci:
```
cd ~/BestBikeApp
export FLASK_APP=application.py
flask run
```
Z druhé relace příkazového prostředí spusťte následující příkaz, který přejde na vaši webovou aplikaci:
```
curl http://127.0.0.1:5000/
```
Měli byste získat následující výstup HTML:
```
<html><body><h1>Hello Best Bike App!</h1></body></html>
```
Z primární relace příkazového prostředí stisknutím kombinace kláves Ctrl+C ukončete webovou aplikaci a pak zavřete sekundární Azure Cloud Shell.

Pokračovat

Cvičení – napsání kódu, který implementuje webovou aplikaci

Vytvoření nového webového projektu

Volitelné otestování webové aplikace

Volitelné otestování webové aplikace

Volitelné otestování webové aplikace

Váš názor