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

5 min

V této lekci pomocí vývojářských nástrojů vytvoříte kód 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.

Spuštěním následujícího příkazu vytvořte novou aplikaci ASP.NET Core Model-View Cotroller (MVC) s názvem BestBikeApp:

dotnet new mvc --name BestBikeApp

Příkaz vytvoří novou složku s názvem BestBikeApp pro uložení projektu.

Volitelné otestování webové aplikace

Aplikaci můžete otestovat místně v Azure. Můžete to udělat podle následujících kroků:

Spuštěním následujících příkazů sestavte a spusťte webovou aplikaci na pozadí:

cd BestBikeApp
dotnet run &

Měl by se zobrazit výstup podobný následujícímu příkladu:

[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

Ve výstupu si poznamenejte hodnoty <čísla> procesu a< portu.>

Spuštěním následujícího příkazu přejděte do webové aplikace a nahraďte <port> portem, který jste si poznamenali v posledním kroku.

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

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

Pomocí <čísla> procesu, které jste si poznamenali dříve, zastavte dotnet:
```
kill <process-number>
```

K vytvoření úvodní webové aplikace používáme Maven, běžně používaný nástroj pro správu projektů a sestavení pro aplikace v Javě. Pomocí maven-archetype-webapp šablony vygenerujeme kód pro naši webovou aplikaci.

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

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

Teď máte soubor, který se nazývá helloworld.war balíček webové aplikace, který nasadíme do služby App Service.

K vytvoření úvodní Node.js webové aplikace používáme Node Správce balíčků (npm) spolu s kódem JavaScriptu ke spuštění skutečného zpracování webové stránky.

Spuštěním následujících příkazů v terminálu vytvořte nový package.json soubor, který popisuje naši Node.js aplikaci:

cd ~
mkdir helloworld
cd helloworld
cat >package.json <<EOL
{
  "name": "helloworld",
  "version": "1.0.0",
  "scripts": {
    "start": "node index.js"
  }
}
EOL

V aktuální složce se vytvoří nový package.json soubor. Pokud zadáte ls okno terminálu, měli byste ho najít v aktuální složce. Ke spuštění logiky webu potřebujeme javascriptový soubor. V tomto základním příkladu potřebujeme pouze jeden soubor: index.js.

Vytvořte soubor spuštěním následujícího příkazu v terminálu:

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

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í webovou aplikaci na pozadí:
```
cd ~/helloworld
npm start &
```
Měl by se zobrazit výstup podobný následujícímu příkladu:
```
[1] <process-number>
> helloworld@1.0.0 start
> node index.js

Server running at http://localhost:1337
```
Ve výstupu si poznamenejte hodnotu <čísla> procesu.
Ve stejné relaci Cloud Shellu spusťte následující příkaz a přejděte do webové aplikace.
```
curl -kL http://localhost:1337/
```
Měli byste získat následující výstup:
```
<html><body><h1>Hello World!</h1></body></html>
```
Pomocí <čísla> procesu, které jste si poznamenali dříve, zastavte uzel:
```
kill <process-number>
```

K vytvoření úvodní webové aplikace používáme 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
```

Vytvořte nový soubor s názvem application.py se základní odpovědí HTML:

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

Pokud chcete nasadit aplikaci do Azure, musíte uložit seznam požadavků na aplikace, které jste pro ni vytvořili, do requirements.txt souboru. 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á.

Spuštěním následujících příkazů spusťte webovou aplikaci na pozadí:
```
cd ~/BestBikeApp
export FLASK_APP=application.py
flask run &
```
Měl by se zobrazit výstup podobný následujícímu příkladu:
```
[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
```
Ve výstupu si poznamenejte hodnotu <čísla> procesu. Vzhledem k tomu, že proces běží na pozadí, nemůžete ukončit kombinaci kláves CTRL+C. Budete ho muset zastavit číslem procesu.
Spuštěním následujícího příkazu přejděte do webové aplikace.
```
curl -kL http://localhost:5000/
```
Měli byste získat následující výstup HTML:
```
<html><body><h1>Hello Best Bike App!</h1></body></html>
```
Pomocí <čísla> procesu, které jste si poznamenali dříve, zastavte Flask:
```
kill <process-number>
```

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