Harjoitus – Kirjoita koodi verkkosovelluksen toteuttamiseen

5 minuuttia

Tässä osiossa luot aloitusverkkosovelluksen koodin kehittäjätyökalujen avulla.

Luo uusi verkkoprojekti

.NET CLI -työkalun ydin on dotnet komentorivityökalu. Tällä komennolla luot uuden ASP.NET Core -verkkoprojektin.

Luo uusi ASP.NET Core Model-View Cotroller (MVC) -sovellus nimeltä BestBikeApp suorittamalla seuraava komento:

dotnet new mvc --name BestBikeApp

Komento luo uuden kansion nimeltä BestBikeApp projektin tallentamiseksi.

Voit vaihtoehtoisesti testata verkkosovellustasi

Voit testata sovellustasi paikallisesti Azuressa. Toimi seuraavasti:

Suorita seuraavat komennot, kun haluat luoda ja suorittaa verkkosovelluksesi taustalla:

cd BestBikeApp
dotnet run &

Tuloksen pitäisi olla seuraavan esimerkin kaltainen:

[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

Kirjoita tulosteessa muistiin <process-number-> ja <portin arvot>.

Selaa verkkosovellukseen suorittamalla seuraava komento. Korvaa <portti> edellisessä vaiheessa muistiin valitsemallasi portilla.

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

Html-koodia pitäisi näkyä, ja sen pitäisi päättyä seuraaville riveille:

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

Lopeta dotnet käyttämällä <prosessinumeron> jotka mainitsit aiemmin:
```
kill <process-number>
```

Aloitamme verkkosovelluksen luomalla Mavenin, joka on Java-sovellusten yleisesti käytetty projektinhallinta- ja koontityökalu. Käytämme maven-archetype-webapp mallia verkkosovelluksemme koodin luomiseen.

Luo uusi verkkosovellus suorittamalla seuraavat komennot Azure Cloud Shellissä:

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

Kun nyt suoritat nämä komennot, voit vaihtaa uuden helloworld-sovellushakemiston ja pakata sovelluksen käyttöönottoa varten:
```
cd helloworld
mvn package
```
Kun komennon suorittaminen on päättynyt, suorita nämä komennot, niin kohde- hakemiston ja sen sisällön luettelo:
```
cd target
ls
```

Sinulla on nyt tiedosto nimeltä helloworld.war se on verkkosovelluspaketti, jonka aiomme ottaa käyttöön sovelluspalvelussa.

Verkkosovelluksen Node.js aloitusversion luomiseen käytetään Node Package Manageria (npm) sekä jotain JavaScript-koodia varsinaisen verkkosivun käsittelyn suorittamiseen.

Luo uusi package.json-tiedosto, joka kuvaa Node.js-sovellusta, suorittamalla seuraavat komennot päätteessä:

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

Nykyiseen kansioon luodaan uusi package.json tiedosto. Sinun pitäisi löytää se nykyisestä kansiosta, jos kirjoitat ls pääteikkunassa. Sivustologiikan suorittamiseen tarvitaan JavaScript-tiedosto. Tähän perusesimerkkiin tarvitaan vain yksi tiedosto: index.js.

Luo tiedosto suorittamalla seuraava komento päätteessä:

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

Voit vaihtoehtoisesti testata verkkosovellustasi

Kun suoritat Helloworld-verkkosovellusta, voit varmistaa, että se suoritetaan paikallisesti, avaamalla toisen komentorivi-istunnon.

Siirry selaimen uudessa välilehdessä kohtaan https://shell.azure.com/.
Suorita ensisijaisesta komentoliittymäistunnosta seuraavat komennot verkkosovelluksen käynnistämiseksi taustalla:
```
cd ~/helloworld
npm start &
```
Tuloksen pitäisi olla seuraavan esimerkin kaltainen:
```
[1] <process-number>
> helloworld@1.0.0 start
> node index.js

Server running at http://localhost:1337
```
Kirjoita tulosteessa muistiin <process-number->arvo.
Suorita samassa Cloud Shell -istunnossa seuraava komento verkkosovellukseesi selaamiseksi.
```
curl -kL http://localhost:1337/
```
Sinun pitäisi saada seuraava tuloste:
```
<html><body><h1>Hello World!</h1></body></html>
```
Lopeta solmu käyttämällä <prosessinumeron> jotka merkitsit muistiin aiemmin:
```
kill <process-number>
```

Luomme aloitusverkkosovelluksen Flaskin verkkosovelluskehyksen avulla.

Määritä virtuaaliympäristö suorittamalla seuraavat komennot Azure Cloud Shellissä ja asenna Flask profiiliisi:
```
python3 -m venv venv
source venv/bin/activate
pip install flask
```
Suorita nämä komennot, kun haluat luoda uuden verkkosovellushakemiston ja vaihtaa siihen:
```
mkdir ~/BestBikeApp
cd ~/BestBikeApp
```

Luo uusi tiedosto nimeltä application.py html-perusvastauksilla:

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

Jos haluat ottaa sovelluksesi käyttöön Azuressa, sinun on tallennettava sitä varten asettamiesi sovellusvaatimusten luettelo requirements.txt-tiedostoon. Voit tehdä tämän suorittamalla seuraavan komennon:
```
pip freeze > requirements.txt
```

Voit vaihtoehtoisesti testata verkkosovellustasi

Voit testata sovellustasi paikallisesti Azuressa, kun se on käynnissä.

Käynnistä verkkosovellus taustalla suorittamalla seuraavat komennot:

cd ~/BestBikeApp
export FLASK_APP=application.py
flask run &

Tuloksen pitäisi olla seuraavan esimerkin kaltainen:

[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

Kirjoita tulosteessa muistiin <process-number->arvo. Koska prosessi suoritetaan taustalla, et voi lopettaa näppäinyhdistelmällä CTRL + C. Sinun on pysäytettävä se prosessin numerolla.

Selaa verkkosovellukseesi suorittamalla seuraava komento.
```
curl -kL http://localhost:5000/
```
Sinun pitäisi saada seuraava HTML-tuloste:
```
<html><body><h1>Hello Best Bike App!</h1></body></html>
```
Lopeta Flask käyttämällä <prosessinumeron> jotka merkitsit muistiin aiemmin:
```
kill <process-number>
```

Harjoitus – Kirjoita koodi verkkosovelluksen toteuttamiseen

Luo uusi verkkoprojekti

Voit vaihtoehtoisesti testata verkkosovellustasi

Voit vaihtoehtoisesti testata verkkosovellustasi

Voit vaihtoehtoisesti testata verkkosovellustasi

Palaute