Flask ile Web Uygulaması Kurma ve API Oluşturma
Öncelikle Flask'ı yükleyerek başlayalım. Eğer daha önce yüklemediyseniz, terminalde şu komutu çalıştırarak yükleyebilirsiniz:
pip install flaskFlask'ı yükledikten sonra, basit bir web uygulaması kurmaya başlayalım. Aşağıda örnek bir Flask uygulaması için temel yapıyı göreceksiniz:
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/api/data', methods=['GET'])
def get_data():
data = {
'sales': [150, 200, 170, 220],
'months': ['January', 'February', 'March', 'April']
}
return jsonify(data)
if __name__ == '__main__':
app.run(debug=True)Bu uygulama, kullanıcıdan gelen GET isteklerine karşılık olarak bir JSON formatında satış verilerini döndürür. Bu API, JavaScript ile veri görselleştirmesi yapabilmemiz için temel veriyi sağlayacak.
JavaScript ile Veri Görselleştirmeleri
Öncelikle, HTML sayfamıza Chart.js kütüphanesini ekleyelim:
Şimdi, Flask API'sinden aldığımız veriyi kullanarak bir grafik oluşturalım:
Bu kod, Flask API'sinden gelen veriyi alarak bir çubuk grafik (bar chart) oluşturur. Chart.js ile bu veriyi dinamik olarak görselleştirebiliriz. Veriler değiştikçe grafik de otomatik olarak güncellenecektir.
Kullanıcı Etkileşimi Eklemek: Veri Filtreleme ve Grafik Güncelleme
Bir filtreleme arayüzü eklemek için HTML’de basit bir seçim aracı (dropdown) kullanabiliriz:
Bu seçim aracı sayesinde kullanıcı, sadece belirli bir ayın verilerini görmek isteyebilir. JavaScript kodunu, seçilen değere göre grafiği güncelleyecek şekilde düzenleyebiliriz.
document.getElementById('monthFilter').addEventListener('change', function(event) {
var selectedMonth = event.target.value;
fetch(`/api/data?month=${selectedMonth}`)
.then(response => response.json())
.then(data => {
salesChart.data.labels = data.months;
salesChart.data.datasets[0].data = data.sales;
salesChart.update();
});
});
Bu kod, kullanıcının seçim yapmasına göre veriyi filtreler ve grafiği dinamik olarak günceller.
Flask ve JavaScript Arasındaki Veri İletişimi: AJAX Kullanımı
Önceki örnekte olduğu gibi, fetch API ile AJAX kullanarak Flask API'sine veri gönderebilir veya ondan veri alabilirsiniz. Bu yöntem sayesinde, kullanıcı etkileşimi sonrasında veriler hızla güncellenebilir.
Gerçek Zamanlı Veri Güncelleme: WebSocket Entegrasyonu
Flask üzerinde WebSocket kullanabilmek için, Flask-SocketIO kütüphanesini yükleyebilirsiniz:
pip install flask-socketioFlask ve JavaScript arasında gerçek zamanlı iletişim kurarak dashboard'unuzu, verilerin sürekli olarak güncellendiği dinamik bir hale getirebilirsiniz.
