Önceki

Sonraki

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

Tamamlandı

Bu ünitede geliştirici araçlarını kullanarak başlangıç web uygulaması için kod oluşturacaksınız.

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.

1. Dotnet'i indirip yüklemek için sağ taraftaki Azure Cloud Shell'de aşağıdaki komutları çalıştırın:

   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
   

2. Ardından aşağıdaki komutu çalıştırarak "BestBikeApp" adlı yeni bir ASP.NET Core 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

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

1. 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ğıdaki gibi bir çıkış almanız 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.

2. İ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örmeniz gerekir:

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

3. 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ı için yaygın olarak kullanılan bir proje yönetimi ve derleme aracı olan Maven'i kullanacağız. Web uygulamamızın kodunu oluşturmak için maven-archetype-webapp şablonunu kullanacağız.

1. Yeni bir web uygulaması oluşturmak için şimdi Azure Cloud Shell'de aşağıdaki komutları çalıştırın:

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

2. Şimdi, şu komutları çalıştırarak yeni "helloworld" uygulama dizinine geçin ve uygulamayı dağıtım için paketleyin:

   cd helloworld
   mvn package
   

3. Komutun çalışması tamamlandığında, hedef dizini açmak ve içeriğini listelemek için şu komutları çalıştırın:

   cd target
   ls
   

adlı helloworld.warbir dosyanız listelenir. Bu, App Service'e 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.

1. Node.js uygulamamızı açıklayan yeni package.json bir uygulama oluşturmak için Azure Cloud Shell'de aşağıdaki komutları çalıştırın:

   cd ~
   mkdir helloworld
   cd helloworld
   npm init -y
   

Bu, geçerli klasörde yeni package.json bir dosya oluşturur. Terminal penceresine girerseniz ls , bunu geçerli klasörde bulmalısınız. Web sitesi mantığımızı çalıştırmak için bir JavaScript dosyası gerekir. Bu yalnızca temel bir örnek olduğundan yalnızca bir dosyaya ihtiyacımız vardır: index.js.

1. Dosyayı oluşturmak için terminalde aşağıdaki komutu çalıştırın:

   touch index.js
   

2. Ş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 .
   

3. package.json Dosyayı seçin ve node.js kullanarak web uygulamasını başlatmak için bölümünde aşağıdaki düzenlemeleri scripts yapın:

   {
     "name": "helloworld",
     ...
     "scripts": {
       "start": "node index.js"
     },
     ...
   }
   

4. ... menüsünü seçerek dosyayı kaydedin veya Windows ve Linux'ta Ctrl+S tuşlarına veya macOS'ta Command+S tuşlarına basın.

   Önemli

   Düzenleyicide bir dosyayı her düzenlediğinizde, düzenleyicinin sağ üst köşesindeki ... menüsünü seçerek veya Windows ve Linux'ta Ctrl+S tuşlarına veya macOS'ta Command+S tuşlarına basarak kaydetmeyi unutmayın. Düzenleyiciden çıkmak için Windows ve Linux'ta Ctrl+Q tuşlarına basın veya düzenleyicinin sağ üst köşesine tıklayıp MacOS'ta Çık'ı seçin.

5. index.js dosyasına geçin ve dosyaya aşağıdaki içeriği ekleyin. Bu, sunucuya herhangi bir GET isteği yapıldığında her zaman "Merhaba Dünya!" ile yanıt veren küçük bir Node.js 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}`);
   

6. Sağ üstteki ... simgesini seçip bağlam menüsünden Düzenleyiciyi Kaydet ve Kapat'ı seçerek veya Windows ve Linux'ta Ctrl+S ve Ctrl+Q kısayol tuşlarını kullanarak dosyanızı kaydedin ve düzenleyiciden çıkın.

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

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

1. Yeni bir tarayıcı sekmesinde adresine https://shell.azure.com/gidin.

2. Birincil komut kabuğu oturumunuzda aşağıdaki komutları çalıştırarak web uygulamanızı başlatın:

   cd ~/helloworld
   npm start
   

3. İ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ğıdaki çıkışı almalısınız:

   <html><body><h1>Hello World!</h1></body></html>
   

4. Birincil komut kabuğu oturumunuzdan Ctrl+C tuşlarına basarak web uygulamanızdan çıkın ve ikinci kabuk oturumu tarayıcı sekmesini kapatın.

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

1. Azure Cloud Shell'de aşağıdaki komutları çalıştırarak bir sanal ortam ayarlayın ve Flask'i profilinize yükleyin:

   python3 -m venv venv
   source venv/bin/activate
   pip install flask
   

2. Yeni web uygulaması dizininizi oluşturmak ve bu dizine geçmek için şu komutları çalıştırın:

   mkdir ~/BestBikeApp
   cd ~/BestBikeApp
   

3. Python etkileşimli düzenleyicisinde application.py açarak web uygulamanız için yeni bir dosya oluşturun:

   code application.py
   

4. 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"
   

5. Sağ üstteki ... menüsünü seçip Düzenleyiciyi Kapat'ı seçerek> veya Windows ve Linux'ta Ctrl+S ve Ctrl+Q tuşlarına basarak dosyanızı kaydedin ve düzenleyiciden çıkın.

6. Uygulamanızı Azure'a dağıtmak için, bunun için yaptığınız uygulama gereksinimleri listesini requirements.txt dosyasına kaydetmeniz 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

Uygulamanızı çalışırken Azure'da yerel olarak test edebilirsiniz.

1. Yeni bir tarayıcı sekmesinde https://shell.azure.com/ikinci bir komut kabuğu oturumu açın.

2. Birincil komut kabuğu oturumunuzdan (sağda), sanal ortamı etkinleştirmek için aşağıdaki komutları çalıştırın:

   cd ..
   source venv/bin/activate
   

3. Birincil komut kabuğu oturumunuzdan (sağda), web uygulamanızı başlatmak için aşağıdaki komutları çalıştırın:

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

4. İ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 çıkışını almanız gerekir:

   <html><body><h1>Hello Best Bike App!</h1></body></html>
   

5. Birincil komut kabuğu oturumunuzdan Ctrl+C tuşlarına basarak web uygulamanızdan çıkın ve ikincil Azure Cloud Shell'i kapatın.

Devam et