Alıştırma - Web uygulaması gerçekleştirmek için kod yazma - Learn

5 dakika

Bu ünitede geliştirici araçlarını kullanarak başlangıç web uygulaması kodunu oluşturabilirsiniz.

Yeni bir web projesi oluşturma

.NET CLI araçlarının merkezinde dotnet komut satırı aracı yer alır. Bu komutu kullanarak yeni bir ASP.NET Core web projesi oluşturacaksınız.

İlk olarak Cloud Shell'e uygun dotnet sürümünü yükleyin. Bu alıştırmada SDK'nın 3.1.102 sürümünü kullanacağız.

Dotnet'i indirip Azure Cloud Shell aşağıdaki komutları çalıştırın.

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

Ardından aşağıdaki komutu çalıştırarak "BestBikeApp" ASP.NET Core yeni bir MVC uygulaması oluşturun.
```
dotnet new mvc --name BestBikeApp
```

Komut, projenizi barındıracak “BestBikeApp” adlı yeni bir klasör oluşturur.

İsteğe bağlı olarak web uygulamanızı test edin

örneğin, 'a göz atarak ikinci bir komut kabuğu oturumu https://shell.azure.com/ açın. Azure'da yerel olarak test edin. Bunu yapmak için aşağıdaki adımları kullanın:

Birincil komut kabuğu oturumunuzda aşağıdaki komutları çalıştırarak web uygulamanızı derleyin ve çalıştırın.

cd BestBikeApp
dotnet run

Aşağıdakine benzer bir şey görmeniz gerekir.

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

Çıkışta uygulamanız başlatıldıktan sonraki durum açıklanır: uygulama çalışıyor ve 5000 numaralı bağlantı noktalarını dinliyor.

İkincil komut kabuğu oturumunuzda aşağıdaki komutları çalıştırarak web uygulamanıza gidin.

curl -kL http://127.0.0.1:5000/

Aşağıdaki satırlarda biten bazı HTML'ler görüntülenir:

     <div class="text-center">
     <h1 class="display-4">Welcome</h1>
     <p>Learn about <a href="https://docs.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>

Birincil komut kabuğu oturumunuzda web uygulamasından çıkmak için Ctrl+C kısayolunu kullanın.

Başlangıç web uygulaması oluşturmak için Java uygulamalarında yaygın olarak kullanılan proje yönetim ve derleme aracı Maven'i kullanacağız. Web uygulamamızın kodunu oluşturmak için maven-archetype-webapp şablonunu kullanacağız.

Yeni bir web uygulaması Azure Cloud Shell için aşağıdaki komutları Azure Cloud Shell komutlarını çalıştırın.

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

Şimdi, şu komutları çalıştırarak yeni "helloworld" uygulama dizinine geçin ve uygulamayı dağıtım için paketleyin:
```
cd helloworld
mvn package
```
Komutun çalışması tamam olduğunda bu komutları çalıştırarak "target" dizinini açın ve içeriğini listelenin.
```
cd target
ls
```

helloworld.war adlı bir dosyanın listelendiğini göreceksiniz. Bu, App Service’te dağıtacağımız web uygulaması paketidir.

Başlangıç Node.js web uygulaması oluşturmak için, Düğüm Paket Yöneticisi’ni (npm) JavaScript koduyla kullanarak gerçek web sayfası işlemini çalıştıracağız.

Azure Cloud Shell uygulamamızı tanımacak yeni bir oluşturmak package.json için aşağıdaki komutları Node.js çalıştırın.
```
cd ~
mkdir helloworld
cd helloworld
npm init -y
```

Böylece geçerli klasörde yeni bir package.json dosyası oluşturulur. Terminal penceresine ls girerseniz bunu geçerli klasörde görürsünüz. Web sitesi mantığımızı çalıştırmak için bir JavaScript dosyası gerekecektir. Bu yalnızca temel bir örnek olduğundan yalnızca bir index.js dosyası gerekir.

Terminalde aşağıdaki komutu çalıştırarak dosyayı oluşturun.
```
touch index.js
```
Şimdi, her iki dosyamızda da birkaç düzenleme yapmamız gerekiyor. Terminalde aşağıdaki komutu çalıştırarak etkileşimli bir düzenleyici açın.
```
code .
```
Dosyasını seçin ve web uygulamasını başlatmak için Node.js package.json bölümünde aşağıdaki düzenlemeleri scripts yapın.
```
{
  "name": "helloworld",
  ...
  "scripts": {
    "start": "node index.js"
  },
  ...
}
```
... menüsünü seçerek dosyayı kaydedin veya ( Windows ve Linux'ta Ctrl+S ve macOS üzerinde Command+S tuşlarına basın).

Önemli

Düzenleyicide bir dosyayı her düzenlerken, düzenleyicinin sağ üst kısmında ... menüsünü seçerek veya tuşlarına basarak ( Windows ve Linux üzerinde Ctrl+S; macOS üzerinde Command+S). Düzenleyiciden çıkmak için Windows ve Linux'ta Ctrl+Q tuşlarına basın; macOS üzerinde Command+Q.

index.js dosyasına geçin ve dosyaya aşağıdaki içeriği ekleyin. Bu, sunucuya yönelik herhangi bir GET isteği olduğunda her zaman “Merhaba Dünya!” yanıtını veren basit bir düğüm programıdır.

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}`);

Dosyanızı kaydedin ve sağ üst ☰simgesini ve ardından bağlam menüsünden Düzenleyiciyi Kaydet'i seçerek veya Windows ve > Linux'ta Ctrl+S ve Ctrl+Q kısayollarını kullanarak düzenleyiciden çıkın; macOS üzerinde Command+S ve Command+Q.

İsteğe bağlı olarak web uygulamanızı test edin

Helloworld web uygulamasını çalışırken ikinci bir komut kabuğu oturumu açarak yerel olarak çalıştığını doğruabilirsiniz.

Yeni bir tarayıcı sekmesinden'e göz https://shell.azure.com/ atabilirsiniz.
Birincil komut kabuğu oturumunuzda aşağıdaki komutları çalıştırarak web uygulamanızı başlatın.
```
cd ~/helloworld
npm start
```
İkincil komut kabuğu oturumunuzda aşağıdaki komutları çalıştırarak web uygulamanıza gidin.
```
curl http://127.0.0.1:1337/
```
Aşağıdakileri görmeniz gerekir.
```
<html><body><h1>Hello World!</h1></body></html>
```
Birincil komut kabuğu oturumdan Ctrl+C tuşlarına basarak web uygulamasından çıkın ve ardından ikinci kabuk oturumu tarayıcı sekmesini kapatın.

Başlangıç web uygulaması oluşturmak için Flask web uygulaması çerçevesini kullanacağız.

Bir sanal ortam ayarlayıp Flask’i profilinize yüklemek için aşağıdaki komutları çalıştırın.
```
python3 -m venv venv
source venv/bin/activate
pip install flask
```
Yeni web Azure Cloud Shell oluşturmak için bu komutları Azure Cloud Shell içinde çalıştırın.
```
mkdir ~/BestBikeApp
cd ~/BestBikeApp
```
Web uygulamanıza yeni bir dosya oluşturmak için python application.py düzenleyicisinde yeni bir dosya açın.
```
code application.py
```

Temel web uygulaması işlevlerini oluşturmak için aşağıdaki Python kodunu kopyalayıp yapıştırın.

from flask import Flask
app = Flask(__name__)

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

Dosyayı kaydedin ve düzenleyiciden çıkın. Dosyanızı kaydedin ve sağ üstte ... menüsünü ve ardından Düzenleyiciyi Kaydet'i seçerek veya Windows ve Linux'ta > Ctrl+S ve Ctrl+Q tuşlarına basarak düzenleyiciden çıkın; macOS üzerinde Command+S ve Command+Q.
Uygulamanızı Azure'a dağıtmak için, uygulama için yapmış olduğunu uygulama gereksinimlerinin listesini birrequirements.txt gerekir. Bunun için aşağıdaki komutu çalıştırın.
```
pip freeze > requirements.txt
```

İsteğe bağlı olarak web uygulamanızı test edin

Azure'da çalışırken yerel olarak test edin.

Yeni bir tarayıcı sekmesinde ikinci bir komut kabuğu oturumu https://shell.azure.com/ açın.
Birincil komut kabuğu oturumdan (sağdan) web uygulamanıza başlamak için aşağıdaki komutları çalıştırın.
```
cd ~/BestBikeApp
export FLASK_APP=application.py
flask run
```
İkincil komut kabuğu oturumunuzda aşağıdaki komutları çalıştırarak web uygulamanıza gidin.
```
curl http://127.0.0.1:5000/
```
Aşağıdaki HTML çıktısını görüyor gerekir.
```
<html><body><h1>Hello Best Bike App!</h1></body></html>
```
Birincil komut kabuğu oturumdan Ctrl+C tuşlarına basarak web uygulamasından çıkın ve ardından ikincil Azure Cloud Shell.

Devam et