Alıştırma - Uygulamayı Visual Studio Code'da güncelleştirme ve güncelleştirmeleri yayımlama

Tamamlandı

Web uygulamasına dağıtmanız gereken değişiklikler olduğunda yine Visual Studio Code'daki araçları kullanabilirsiniz.

Kavram kanıtı web sitesinde bir değişiklik yapmak istediğinizi düşünelim: Geri sayımın milisaniye yerine gün olarak gösterilmesini istiyorsunuz. Sayfayı paydaşlara göstermeden önce bu değişikliği yapmak ve Azure'a dağıtmak istiyorsunuz.

Bu ünitede kodu değiştirerek web sitesini yeniden dağıtacaksınız.

Kodu değiştirerek geri sayımı gün cinsinden hesaplama

Öncelikle kodu, tam gün sayısını hesaplayacak şekilde değiştirelim:

  1. Zaten çalıştırılmıyorsa Visual Studio Code'u başlatın.

  2. countdownExpressApp klasörü açık değilse Dosya menüsünden Klasör Aç... öğesini seçip klasöre göz atın.

  3. Visual Studio Code Gezgini penceresinde yollar'ı genişletip index.js'yi seçin.

  4. Şu kod satırını bulun:

    let numberOfMilliseconds = parseInt(launchTime - currentTime);
    
  5. Sonraki satır şu yeni kodu yazın:

    let numberOfDays = parseInt(numberOfMilliseconds/(24 * 3600 * 1000));
    
  6. Şu kod satırını bulun:

    res.render('index', { title: 'Countdown to Launch', countDown: numberOfMilliseconds });
    
  7. Satırı şu kod satırıyla değiştirin:

    res.render('index', { title: 'Countdown to Launch', countDown: numberOfDays });
    
  8. Dosya menüsünde Kaydet'i seçin ve ardından index.js dosyasını kapatın.

Görünümü, geri sayımı gün cinsinden gösterecek şekilde değiştirme

Ayrıca görünümde de biraz değişiklik yapmanız gerekir:

  1. Code'daki Gezgin penceresini kullanarak /views/index.jade dosyasını açın.

  2. Şu kod satırını bulun:

    p Countdown: #{countDown} milliseconds
    
  3. Satırı şu kod satırıyla değiştirin:

    p Countdown: #{countDown} days
    
  4. Dosya menüsünde Kaydet'i seçin, ardından index.jade dosyasını kapatın.

Yeni sürümü yayımlama

Yapmanız gereken değişiklikler bu kadardı. Şimdi tamamlanmış web sitesini Azure'a dağıtabilirsiniz:

  1. Visual Studio Code'un Azure Gezgini’nde oluşturduğunuz web uygulamasına sağ tıklayıp Web App'e Dağıt'ı seçin.

  2. countdownExpressApp klasörünü ve ardından Dağıt'ı seçin.

  3. Dağıtım tamamlandığında Web Sitesine Gözat'ı seçin. Azure web sitesi tarayıcınızda görüntülenir. Geri sayımın artık gün cinsinden görüntülendiğini göreceksiniz.

    Azure'da barındırılan Express.js web sitesi.

Web uygulamasına dağıtmanız gereken değişiklikler olduğunda yine Visual Studio Code'daki araçları kullanabilirsiniz.

Kavram kanıtı web sitesinde bir değişiklik yapmak istediğinizi düşünelim: Geri sayımın milisaniye yerine gün olarak gösterilmesini istiyorsunuz. Sayfayı paydaşlara göstermeden önce bu değişikliği yapmak ve Azure'a dağıtmak istiyorsunuz.

Bu ünitede kodu değiştirerek web sitesini yeniden dağıtacaksınız.

Kodu değiştirerek geri sayımı gün cinsinden hesaplama

Öncelikle kodu, tam gün sayısını hesaplayacak şekilde değiştirelim:

  1. Zaten çalıştırılmıyorsa Visual Studio Code'u başlatın.

  2. countdownFlaskApp klasörü henüz açık değilse, Windows'ta Dosya menüsünde Klasör Aç... öğesini seçin ve ardından klasöre göz atın ve Klasör Seç'i seçin. macOS’te Dosya menüsünde Aç... seçeneğini belirleyin, klasöre gidin ve ’ı seçin.

  3. Visual Studio Code Gezgini penceresinde app.py’yi seçin.

  4. Şu kod satırını bulun:

    numberOfMilliseconds = int(diff.total_seconds() * 1000)
    
  5. Satırı şu kod satırıyla değiştirin:

    numberOfDays = diff.days
    
  6. Şu kod satırını bulun:

    return render_template(
        "countdown.html",
        time=numberOfMilliseconds
    )
    
  7. Kodu numberOfMillisecondsyerine numberOfDays kullanacak şekilde güncelleştirin:

    return render_template(
        "countdown.html",
        time=numberOfDays
    )
    
  8. Dosya menüsünde Kaydet'i seçin ve ardından app.py dosyasını kapatın.

Görünümü, geri sayımı gün cinsinden gösterecek şekilde değiştirme

Ayrıca görünümde de biraz değişiklik yapmanız gerekir:

  1. Gezgin penceresini kullanarak /templates/countdown.html dosyasını açın.

  2. Şu kod satırını bulun:

    <p>Countdown: {{ time }} milliseconds</p>
    
  3. Satırı şu kod satırıyla değiştirin:

    <p>Countdown: {{ time }} days</p>
    
  4. Dosya menüsünde Kaydet'i seçin ve ardından countdown.html dosyasını kapatın.

  5. Terminal’i ve ardından Yeni Terminal’i seçip değişikliklerinizi yeniden test edin.

  6. İstemin (env) ön eki olduğundan emin olun ve ardından geliştirme sunucusunu başlatın. Windows’da komut istemine aşağıdaki komutu yazın:

    py -m flask run
    

    macOS’te komut istemine aşağıdaki komutu yazın:

    python3 -m flask run
    
  7. http://127.0.0.1:5000 için bir web tarayıcısı açın ve değişikliklerin doğru şekilde çalıştığından emin olun.

  8. Visual Studio Code Terminali’nde, Windows ve Linux’ta, geliştirme sunucusundan çıkmak için CTRL+C’yi seçin. macOS’te, geliştirme sunucusundan çıkmak için Command+C’yi seçin.

Yeni sürümü yayımlama

Yapmanız gereken değişiklikler bu kadardı. Şimdi tamamlanmış web sitesini Azure'a dağıtabilirsiniz:

  1. Visual Studio Code'un Azure Gezgini’nde oluşturduğunuz web uygulamasına sağ tıklayıp Web App'e Dağıt'ı seçin.

  2. countdownFlaskApp klasörünü ve ardından Dağıt'ı seçin.

  3. Dağıtım tamamlandığında Web Sitesine Gözat'ı seçin. Azure web sitesi tarayıcınızda görüntülenir. Geri sayımın artık gün cinsinden görüntülendiğini göreceksiniz.

    Azure'da barındırılan Python web sitesi.