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

5 min

V této lekci použijete nástroje pro vývojáře k vytvoření kódu počáteční webové aplikace.

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ý projekt webové aplikace využívající 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 Shell na pravé straně ho nainstalujte.

wget -q -O - https://dot.net/v1/dotnet-install.sh | bash -s -- --version 3.1.102
export PATH="~/.dotnet:$PATH"
echo "export PATH=~/.dotnet:\$PATH" >> ~/.bashrc

Až budete chtít příště vytvořit novou aplikaci s názvem ASP.NET Core MVC, postačí spustit následující příkazy:
```
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

Pokud otevřete druhou relaci příkazového prostředí, například na adrese https://shell.azure.com/, můžete svou aplikaci místně otestovat 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ělo by se zobrazit zhruba něco takového.

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ěná a naslouchá na portu 5000.

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 kód HTML.
Z primární relace příkazového prostředí ukončete webovou aplikaci stisknutím kláves Ctrl+C.

K vytvoření počáteční webové aplikace použijeme Maven. Jde o běžně používaný nástroj pro správu a sestavování projektů 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 Shell teď vytvořte novou webovou aplikaci.

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

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í příkazu spusťte tyto příkazy, které otevřou cílový adresář a zobrazí seznam jeho obsahu.
```
cd target
ls
```

Ve výpisu uvidíte soubor helloworld.war. Tento balíček webové aplikace nasadíme ve službě 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 Shell vytvořte novou aplikaci, package.json která bude popisovat Node.js aplikace.
```
cd ~
mkdir helloworld
cd helloworld
npm init -y
```

V aktuální složce se vytvoří nový soubor package.json. Pokud v okně terminálu zadáte ls, měli byste ho vidět v aktuální složce. Aby bylo možné spustit logiku webu, budeme potřebovat soubor JavaScriptu. Vzhledem k tomu, že toto je jen základní příklad, potřebujeme pouze jeden soubor index.js.

K vytvoření souboru použijte v terminálu následující příklad.
```
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 .
```
Vyberte soubor a proveďte následující úpravy oddílu, aby se package.json Node.js ke spuštění webové scripts aplikace.
```
{
  "name": "helloworld",
  ...
  "scripts": {
    "start": "node index.js"
  },
  ...
}
```
Uložte soubor tak, že vyberete nabídku ... nebo stisknete (Ctrl+S v Windows a Linuxu a Command+S v macOS).

Důležité

Pokaždé, když vložíte nebo změníte kód do souboru v editoru, nezapomeňte ho uložit potom tak, že vyberete nabídku ... nebo stisknete (Ctrl+S na Windows a Linuxu. Command+S v macOS). Editor ukončíte stisknutím Ctrl+Q na Windows Linuxu. Command+Q v macOS.

Přepněte na soubor index.js a přidejte do něj následující obsah. Jde o malý program Node.js, který vždy odpoví „Hello World!“ – bez ohledu na požadavek GET adresovaný serveru.

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. Uložte soubor a ukončete editor tak, že v pravém horním rohu vyberete nabídku ... a pak vyberete Uložit zavřít editor nebo stisknutím > kláves Ctrl+S a Ctrl+Q na Windows a Linuxu. Command+S a Command+Q v macOS.

Volitelné otestování webové aplikace

Pokud otevřete druhou relaci příkazového prostředí, například na adrese https://shell.azure.com/, můžete svou aplikaci místně otestovat v Azure. Provedete to pomocí následujících kroků.

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ělo by se zobrazit tohle:
```
<html><body><h1>Hello World!</h1></body></html>
```
Z primární relace příkazového prostředí ukončete webovou aplikaci stisknutím kláves Ctrl+C.

K vytvoření počáteční webové aplikace použijete architekturu webové aplikace Flask.

Spuštěním následujících příkazů 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ů Azure Cloud Shell vytvořte adresář pro novou webovou aplikaci.
```
mkdir ~/BestBikeApp
cd ~/BestBikeApp
```
Otevřete interaktivní editor, ve kterém pro webovou aplikaci vytvoříte a upravíte soubor application.py.
```
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. Uložte soubor a ukončete editor tak, že v pravém horním rohu vyberete nabídku ... a pak vyberete Uložit zavřít editor nebo stisknutím > kláves Ctrl+S a Ctrl+Q na Windows a Linuxu. Command+S a Command+Q v macOS.
Aby bylo možné aplikaci nasadit do Azure, bude nutné uložit seznam požadavků aplikace do souboru requirements.txt. Provedete to pomocí následujícího příkazu:
```
pip freeze > requirements.txt
```

Volitelné otestování webové aplikace

Z primární relace příkazového prostředí 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 vidět následující řádek.
```
<html><body><h1>Hello Best Bike App!</h1></body></html>
```
Z primární relace příkazového prostředí ukončete webovou aplikaci stisknutím kláves Ctrl+C.

Pokračovat