Alıştırma - Uygulama oluşturma
Uygulamamızı yinelemeli bir yaklaşım kullanarak oluşturacak ve her seferinde belirli kavramlara odaklanacağız. Öncelikle kullanıcının dolduracağı formun görüntüleneceği uygulama giriş sayfasını oluşturacağız.
Flask uygulamalarının giriş noktası genellikle app.py adlı bir dosya olur. Bu kurala uygun hareket ederek uygulamamızın temelini oluşturacağız. Aşağıdaki adımları gerçekleştireceğiz:
- Çekirdek uygulamamızı oluşturma
- Uygulama yolunu ekleme
- Site için HTML şablonunu oluşturma
- Uygulamayı test etme
Çekirdek uygulamayı oluşturma
Daha önce kullandığınız Visual Studio Code örneğine dönüp Gezgin sekmesinden Yeni dosya'ya tıklayın ve app.py adlı yeni bir dosya oluşturun
Önemli
Daha önce Visual Studio Code ile Python uygulaması oluşturmadıysanız Python uzantısını ve pylint adlı lint aracını yüklemeye yönelik iletilerle karşılaşırsınız. Yükle'yi seçerek bu eklentilerin hepsini yükleyin.
Flask uygulamanızı oluşturmak için gerekli kodu ekleme
from flask import Flask, redirect, url_for, request, render_template, session app = Flask(__name__)
import deyiminde Flask başvuruları bulunur ve bu, tüm Flask uygulamalarının çekirdeğini oluşturur. Birazdan HTML kodumuzu döndürmek için render_template öğesini kullanacağız.
app bizim çekirdek uygulamamız olacak. Bunu bir sonraki adımda yollarımızı kaydederken kullanacağız.
Yolu ekleme
Uygulamamız tek bir yol (/) kullanacak. Kullanıcının etki alanı veya sunucu adı dışında bir şey sağlamadığı durumlarda kullanılan yol olduğu için bu yol bazen varsayılan veya dizin yolu olarak da adlandırılır.
app.py dosyasının sonun aşağıdaki kodu ekleyin
@app.route('/', methods=['GET'])
def index():
return render_template('index.html')
@app.route kullanarak oluşturmak istediğimiz yolu belirtmiş oluyoruz. Yol, aynı zamanda varsayılan yol olan / olacak. Bunun GET için kullanılacağını belirtiyoruz. / için GET isteği geldiğinde Flask otomatik olarak dekoratörün hemen altında bildirilmiş olan işlevi (bu örnekte index) çağırır. index gövdesinde kullanıcıya index.html adlı HTML şablonunu döndüreceğimizi belirtiyoruz.
Form için HTML şablonunu oluşturma
Flask'in şablon oluşturma altyapısı olan Jinja, HTML odaklı bir özelliktir. Bu nedenle sahip olduğunuz tüm HTML becerilerini ve araçlarını kullanabilirsiniz. Sayfamızın biraz daha güzel görünmesi için sayfa düzenini Bootstrap ile oluşturacağız. Bootstrap sayesinde HTML kodumuzda farklı CSS sınıfları kullanacağız. Bootstrap hakkında bilginiz yoksa sınıfları yoksayabilir ve HTML koduna (önemli olan kısım) odaklanabilirsiniz.
Önemli
HTML (Köprü Metni biçimlendirme dili), web sayfaları oluşturmak için kullanılan standart bir işaretleme dilidir. HTML, bir web sayfasını oluşturan başlıklar, paragraflar, listeler, resimler, bağlantılar ve diğer öğeler oluşturmak için bir dizi etiket ve öznitelik içerir. Kullanıcı bir web sayfası istediğinde, tarayıcısı HTML kodunu okur ve kullanıcının etkileşim kurabileceği görsel bir web sayfası olarak işler. HTML hakkında daha fazla bilgi edinmek için bkz . HTML temel bilgileri.
Flask şablonlarının templates adlı bir klasör içinde oluşturulması gerekir. Şimdi klasörü ve gerekli dosyayı oluşturup HTML kodunu ekleyelim.
Visual Studio Code'un Gezgin aracında Yeni Klasör'ü seçerek templates adlı yeni bir klasör oluşturun
Oluşturduğunuz templates klasörünü seçtikten sonra Yeni Dosya komutuyla klasöre bir dosya ekleyin
Dosyayı index.html olarak adlandırın
Aşağıdaki HTML kodunu ekleyin
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> <title>Translator</title> </head> <body> <div class="container"> <h1>Translation service</h1> <div>Enter the text you wish to translate, choose the language, and click Translate!</div> <div> <form method="POST"> <div class="form-group"> <textarea name="text" cols="20" rows="10" class="form-control"></textarea> </div> <div class="form-group"> <label for="language">Language:</label> <select name="language" class="form-control"> <option value="en">English</option> <option value="it">Italian</option> <option value="ja">Japanese</option> <option value="ru">Russian</option> <option value="de">German</option> </select> </div> <div> <button type="submit" class="btn btn-success">Translate!</button> </div> </form> </div> </div> </body> </html>
Yukarıdaki HTML kodunun temel bileşenleri kullanıcının çevrilmesini istediği metin için textarea ve kullanıcının hedef dili belirtmek için kullanacağı açılan listedir (select). Daha fazla dil eklemek isterseniz diğer seçenekler için desteklenen dillerin listesine bakabilirsiniz. value özniteliğini dil kodu (örneğin Türkçe için tr) olarak ayarlayın.
Uygulamayı test etme
İlk sitemizi oluşturduğumuza göre artık test edebiliriz! İşimizi kolaylaştırmak için Visual Studio Code'un içindeki tümleşik terminali kullanacağız.
Mac'te Ctrl-' veya Cmd-' seçeneğini belirleyerek tümleşik terminali açın
Aşağıdaki komutu kullanarak Flask çalışma zamanını geliştirme olarak ayarlayın ve sunucunun her değişiklikte otomatik olarak yeniden yüklenmesini sağlayın
# Windows set FLASK_ENV=development # Linux/macOS export FLASK_ENV=developmentUygulamayı çalıştırın!
flask runTarayıcıda http://localhost:5000 adresine giderek uygulamayı açın
Formu görmeniz gerekir! Tebrikler!