Giriş

Projeyle Öğrenme yaklaşımı, teorik bilgileri uygulama yaparak pekiştirmenin etkili bir yoludur. Bu rehberde, Python tabanlı Flask ile basit bir backend ve düz JavaScript ile küçük bir frontend oluşturup temel CRUD (Create, Read, Update, Delete) işlevlerini pratiğe dökeceksiniz. Flask, hafif ve esnek bir web framework'ü olarak CRUD uygulamaları için sıkça tercih edilir; örnek ve kavramsal çerçeve için UI Bakery: Flask CRUD operations kaynağı faydalı olacaktır.

Ne öğreneceksiniz

• Basit bir veri modeli (Notlar) tasarlama ve uygulama.
• Flask ile REST-benzeri API uç noktaları oluşturma ve veritabanı işlemlerini yönetme.
• JavaScript fetch ile API istekleri yapma ve arayüzü güncelleme.
• Geliştirme sırasında sık yapılan hataları tanıma ve temel hata ayıklama adımları.

Gereksinimler

• Python 3 ve pip (yerel makinenizde kurulu olmalı).
• Basit HTML/CSS ve JavaScript (ES6) bilgisi.
• Komut satırı veya terminal bilgisi ve bir metin editörü (ör. VS Code).
• Ölçeklendirme veya üretim dağıtımı için ekstra araçlar gerekecektir; bu rehber öğrenme amaçlı temel bir uygulama sağlar.

Proje planı ve veri modeli

Bu örnekte tek bir varlık (entity) kullanacağız: Note. Basit tutarak hem backend hem frontend entegrasyonuna odaklanacağız.

Adım 1 — Proje ortamı oluşturma

1. Yeni proje klasörü oluşturun: mkdir flask-notes ve bu klasöre girin.
2. Sanal ortam oluşturun ve etkinleştirin:
   • Linux/macOS: python -m venv venv ardından source venv/bin/activate.
   • Windows (PowerShell): python -m venv venv ardından venv\\Scripts\\Activate.ps1.
3. Gerekli paketleri yükleyin: pip install Flask Flask-SQLAlchemy.
4. Önerilen başlangıç yapısı:
   1. flask-notes/
   2. flask-notes/app.py — ana uygulama dosyası
   3. flask-notes/static/ — basit frontend dosyaları için

Adım 2 — Basit Flask API

Aşağıda eğitim amaçlı, çalıştırılabilir ve okunması kolay bir app.py örneği gösterilmiştir. Bu kod SQLite kullanır ve temel CRUD uç noktalarını tanımlar.

app.py (örnek kod satırları)

1. from flask import Flask, request, jsonify
2. from flask_sqlalchemy import SQLAlchemy
3. from datetime import datetime
4. app = Flask(__name__)
5. app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///notes.db'
6. app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
7. db = SQLAlchemy(app)
8. class Note(db.Model):
9.   id = db.Column(db.Integer, primary_key=True)
10.   title = db.Column(db.String(120), nullable=False)
11.   content = db.Column(db.Text, nullable=True)
12.   created_at = db.Column(db.DateTime, default=datetime.utcnow)
13. @app.route('/api/notes', methods=['GET'])
14. def get_notes():
15.   notes = Note.query.order_by(Note.created_at.desc()).all()
16.   return jsonify([{'id': n.id, 'title': n.title, 'content': n.content} for n in notes])
17. @app.route('/api/notes', methods=['POST'])
18. def create_note():
19.   data = request.get_json() or {}
20.   note = Note(title=data.get('title', 'Untitled'), content=data.get('content', ''))
21.   db.session.add(note)
22.   db.session.commit()
23.   return jsonify({'id': note.id, 'title': note.title, 'content': note.content}), 201
24. @app.route('/api/notes/<int:note_id>', methods=['PUT'])
25. def update_note(note_id):
26.   data = request.get_json() or {}
27.   note = Note.query.get_or_404(note_id)
28.   note.title = data.get('title', note.title)
29.   note.content = data.get('content', note.content)
30.   db.session.commit()
31.   return jsonify({'id': note.id, 'title': note.title, 'content': note.content})
32. @app.route('/api/notes/<int:note_id>', methods=['DELETE'])
33. def delete_note(note_id):
34.   note = Note.query.get_or_404(note_id)
35.   db.session.delete(note)
36.   db.session.commit()
37.   return '', 204
38. if __name__ == '__main__':
39.   db.create_all()
40.   app.run(debug=True)

Açıklama: Her uç nokta tek bir işlevi yerine getirir. GET listeler, POST yeni not oluşturur, PUT güncelleme yapar ve DELETE siler. Bu yaklaşım, hem öğrenme hem de test etme için uygundur.

Adım 3 — Frontend (basit JavaScript)

Basit bir HTML formu ve not listesini güncelleyen birkaç JavaScript fonksiyonu, uygulamanın interaktif olmasını sağlar. Aşağıda fetch API kullanılarak yapılabilecek temel çağrılara örnekler verilmiştir.

Örnek fetch çağrıları (JavaScript)

1. // Notları almak: const res = await fetch('/api/notes'); const notes = await res.json();
2. // Not oluşturmak: await fetch('/api/notes', { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify({title, content}) })
3. // Not güncellemek: await fetch(`/api/notes/${id}`, { method: 'PUT', headers: {'Content-Type':'application/json'}, body: JSON.stringify({title, content}) })
4. // Not silmek: await fetch(`/api/notes/${id}`, { method: 'DELETE' })

Arayüz tarafında dikkat edilmesi gerekenler:

• Form gönderiminde tarayıcı varsayılan davranışını engelleyin ve fetch ile API'ye istek gönderin.
• API çağrıları tamamlandıktan sonra listeyi yeniden yükleyerek veya sadece ilgili öğeyi güncelleyerek DOM'u güncelleyin.
• Hata durumlarında kullanıcıya anlaşılır mesajlar gösterin.

Adım 4 — Çalıştırma ve test etme

1. Terminalde sanal ortamı etkinleştirip python app.py ile uygulamayı başlatın.
2. Tarayıcıda http://127.0.0.1:5000 adresine gidin veya doğrudan API uç noktalarını test edin.
3. Geliştirme sırasında tarayıcı geliştirici araçlarının Network sekmesini kullanarak istek/yanıtları inceleyin.
4. Basit API testleri için curl veya Postman kullanabilirsiniz; örneğin:
   • GET: curl http://127.0.0.1:5000/api/notes
   • POST: curl -X POST -H "Content-Type: application/json" -d '{"title":"Merhaba","content":"İlk not"}' http://127.0.0.1:5000/api/notes

Yaygın hatalar ve kısa çözümler

• CORS: Frontend farklı origin kullanıyorsa istekler engellenebilir; geliştirme aşamasında Flask-CORS kullanılabilir.
• Veritabanı yok: db.create_all() çalıştırılmadıysa tablolar oluşmaz; uygulama başında veritabanı dosyasının oluştuğunu kontrol edin.
• JSON boş döndü: request.get_json() None dönebilir; veri yoksa varsayılan boş nesne kullanın.
• HTTP durum kodları: POST için 201, DELETE için 204 gibi uygun durum kodları döndürün; bu, frontend mantığını basitleştirir.
• Hata mesajları: Hata sırasında ayrıntılı sunucu logları ve kullanıcıya özet mesaj gösterimi faydalıdır. Bir Stack Overflow tartışmasında sık rastlanan rookie hatalar ve çözümlerle ilgili örnekler bulunabilir: Stack Overflow.

Hızlı hata ayıklama kontrol listesi

• Sunucu çalışıyor mu? (Terminal loglarını kontrol edin.)
• API uç noktalarına doğrudan GET atabiliyor musunuz?
• Veritabanı dosyası (notes.db) proje klasöründe oluştu mu?
• Tarayıcı konsolunda JavaScript hatası var mı?

İyileştirmeler ve sonraki adımlar

• Veritabanı migrasyonları için Flask-Migrate ekleyin.
• Büyüyen uygulamalar için Blueprint ile kodu modülerleştirin.
• Kullanıcı bazlı veri için kimlik doğrulama ekleyin (ör. token tabanlı bir yöntem).
• Frontend için küçük bir çatı (React, Vue) öğrenip uygulamayı yeniden yazın; bu, gerçek dünya tam yığın projelere yaklaşmayı kolaylaştırır. Benzer tam yığın proje örnekleri için GitHub konu listesi faydalı olacaktır.
• Üretime taşımadan önce konfigürasyon, gizli anahtar yönetimi, logging ve testleri planlayın.

Kaynaklar

• UI Bakery — Flask CRUD operations (Flask ile CRUD işlemleri üzerine rehber ve kavramsal notlar).
• GitHub — crud-application topic (farklı uygulama örnekleri ve açık kaynak projeler).
• Stack Overflow — CRUD with Flask örnek hata tartışması.

Özetle bu rehber, projeyle öğrenme yöntemini kullanarak küçük ama işlevsel bir Flask + JavaScript CRUD uygulaması inşa etmeniz için gereken adımları sunar. Öğrendiklerinizi genişletmek için kaynaklardaki örnek projelere bakmayı ve uygulamanızı versiyon kontrolünde tutup adım adım iyileştirmeyi öneririm.