İçeriğe geç

Flask + Vue.js + MongoDB ile Modern Web Uygulamaları Geliştirmek Bölüm-1-

Herkese merhabalar. Başlıktanda anlaşılacağı üzere FullStack çalışarak modern bir web uygulaması nasıl geliştirilebilir üstüne detaylı bir seriye başlamak istiyorum.

Adım adım giderek basit olsa da CRUD işlemleri yapılabilen, ön tarafta Vue.js arka da ise Flask ve MongoDB ile desteklediğimiz bir yapı kurgulayıp, geliştirip üstüne konuşacağız. Hem teorik hem de teknik üstüne uzun bir yazı dizisi olmasını istediğimden dolayı temel kavramlardan bahsedeceğim ilk olarak. Başlıyoruz 😊


Flask nedir?

Flask web sayfasında da yazdığı üzere bir micro web  framework tür. 

Basit ve güçlü yapısı ile çok hızlı bir şekilde geliştirme yapılabilir. Rest API yazımına fazlasıyla uygundur. Django’nun aksine kullanılacak bileşenleri içeri dahil ederek karmaşık yapılar oluşturabilirsiniz.

Vue.js nedir?

Vue.js interaktif kullanıcı arayüzleri geliştirmemize olanak sağlayan Angular ve React gibi bir Javascript kütüphanesidir. Rakiplerine göre daha kolay bir öğrenme eğrisi ve bir kaç farklı teknik detay ile öne çıkmaktadır. Hızlı,zor bir syntax’a sahip değil, öğrenmesi kolay. Bir back-end geliştiricisi daha ne istesin? 😊

Detaylı karşılaştırma için link..

NoSql nedir?

Günümüzde giderek büyüyen,değişebilen ve katlanan verinin ilişkisel veritabanlarında barındırılması karşı ortaya atılmış bir fikirdir. Veriyi klasik tablolarda tutmak yerine genişleyebilen bir yapı ile dökümanlar üzerinde barındırır.

Kolayca genişleyebilen  yapısı sayesinde fazlasıyla büyük veriyi barındırabilir.

Veri işleme veya makine öğrenmesi gibi büyük verinin döndüğü alanlarda fazlasıyla kullanılmaktadır.

MongoDB nedir?

2009 yılından beri geliştirilen en büyük NoSql veritabanlarından biridir. Bu yaygınlık nedeni ile neredeyse her programlama dilinde bir veya daha fazla driveri bulunmakta ve sizin NoSql teknolojisini hızlı bir şekilde uygulamanıza eklemeye olanak vermektedir.


Geliştirme ortamının kurulması.

Bir klasör açıp o dizine geçelim. Daha sonrasında bir virtualenv oluşturalım ki yüklenecek ve kullanılacak paketler global Python sürümümüzden bağımsız olup sadece projemiz genelinde kullanılsın.  Ne olduğunu bilmiyorsanız? Buyurun..

Bu işlemin ardından şu komutu koşturun.  (.venv) yazısı terminal oturumunuza eklenmiş olmalı.

Hızlıca Flask’i yükleyelim.

Klasör dizininde şöyle bir yapı oluşturalım. Açıklayarak devam edelim.

application klasörü bizim için Flask uygulamamızı barındıracağımız klasör. Bu klasör altında bulunan routes dosyası ise uygulamamızın gelen istekler karşısında nasıl davranması gerektiğini belirlediğimiz mantık kısmı.

config.py ileride genişleyecek olan uygulamamızın gerekli ayarlamalarını tanımlayacağımız dosya.

server.py uygulamamızı başlatmak için kullanacağımız dosya.


Aslında böyle bir yapı zorunlu değil. Flask’ın kendi sayfasına giderseniz tek bir dosyada bütün işlemlerin yapılabileceğini görebilirsiniz. Fakat büyüyen uygulamanın bir zaman sonra yönetilmesi çok zorlaşabiliyor.  Neyi nereye koyduğunuzu bildikten sonra kendinizde başka bir yapı kurabilirsiniz. Burada bir çok güzel yapı örneği bulunmakta. Devam edelim..

application/__init__.py

İlk olarak Flask sınıfını içeriye dahil edip app adında bir nesne yaratıyoruz. __name__ paramatresi Python için özel anlamı olan bir keyword ve tabi ki Flask içinde. Bir Python modülünü kullanmak istediğimizde __name__ değişkeni 2 farklı değere ait olabilir. Ya doğrudan çalıştırılmıştır __name__==”__main__”  ya da kullanılmak üzere__name__==”package_name”. Biz server.py den uygulamamızı çalıştıracağımız için bu değişken __main__ olacak. Dolayısıyla çalıştırılan Python paketini işaret edecek. Bizde tam olarak burada Flask’e bu parametreyi geçiyoruz ki gerekli olabilecek statik veya template dosyalarını aramaya başlaması bir bağlamsal bir path vermiş olalım. Yani Flask bir template render etmesi gerektiğinde application/templates/.. altına bakması gerektiğini anlasın.

Daha sonrasında şu an tanımlamadık fakat hangi isteklerde nasıl davranılması gerektiğini belirttiğimiz dosyayı içeri aktaralım ve devam edelim.

Not: Herhangi bir formatter kullanıyor iseniz bu bir import satırı olduğundan dolayı satırı yukarı almaya çalışacaktır. Fakat buna izin vermememiz gerekmekte. Uygulamayı parçaladığımız için mantıksal olarak düşünüldüğünde bir app tanımlandıktan sonra davranışları belirlenmeli. routes burada oluşturulan olan app değişkenine bağlı olduğu için uygulamanız çalışmayacaktır. routes her zaman en altta kalmalı.


application/routes.py

İlk olarak uygulamamızı içeri aktarıyoruz. Daha sonrasında ise “/”  veya “/index” istekleri geldiğinde bir string dönmesini tanımlıyoruz.

server.py

Son olarak bu değişiklikleri server.py’de yapıyoruz. Doğrudan bu dosyayı çalıştıracağımız için __name__==”__main__” oluyor ve projeyi debug modunda ayağa kaldırıyoruz.

Spesifik bir port verilmedi ise Flask size http://localhost:5000 portundan merhaba diyecektir.

Genel şablonu oturttuk. İşleyişi de anladık sanırım.


Şu haliyle işlevsiz bir uygulamamız var.

Fakat web uygulamamızın diğer platformlar(mobil,vue.js,desktop vb) veya istemciler ile iletişim kurmasını ve yeteneklerini paylaşmasını sağlayacak bir yapı kurmamız gerekmekte. Bu yüzden bir REST API  yazacağız.

API kısaca Application Programming Interface olarak geçer ve bir uygulamanın bazı yetenklerinin veya verilerinin belirli sınırlar dahilinde kullanılabilir olmasına olanak sağlar.

HTTP protokolünü baz alır. Yani HTTP methodları veya üzerindeki veriler üzerinden değerlendirilip işlem yapılır.

Daha detaylı bilgi için.


O zaman ilk olarak oluşturduğumu routes fonksiyonunu güncelleyelim.

Daha sonra aynı adrese gittiğinizde tarayıcınızın JSON görüntüleyecisi size karşılayacak. Burada gelen dönen veri haricinde istek ve cevaplada alakalı bir çok bilgi alabilirsiniz.

Biraz daha karıştıralım.

Bu url’e gittiğinizde ise 1den 5 e kadar olan sayıların karelerinin alındığı bir cevap göreceksiniz.

jsonify metodu ise bizim için Flask tarafında ürettiğimiz değişkenleri JSON tipine formatlamamızı ardından cevap olarak dönmemizi sağlamakta. Bu değişkenler veri tabanından dönen bütün kullanıcıların tutulduğu liste veya demet olabilir, string olabilir vb vb. Bizim için Json’a formatlar ve döner.

Daha sonrasında bu web uygulamasına isteği atan istemcinin programlandığı dilde cevabı parse edip gerekli aksiyonları alabiliriz. Yapabileceklerimiz tabi ki bunlarla sınırlı değil. Her istemci izin verildiği sürece web uygulaması üzerinden veritabanına gidip bilgi alabilir veya yazabilir.

Twitter’ın ilk olarak bir mobil uygulama olmadığını ve web sayfası olduğunu hatırlarsınız. Siz telefonunuzdan bir tweet atmaya çalıştığınızda button üstünden ilgili endpoint e bir POST isteği gönderilir ve dönen cevaba göre kullanıcıya bilgi verilir.

REST API’ lerin HTTP protokolü üzerinden çalıştığından bahsetmiştik.

Daha detaylı veya belirlenen url lere parametre eklenebilen istekler göndermek için bir API geliştirme aracına ihtiyacımız var. Bu aracın ismi Postman. API geliştirirken işimizi fazlasıyla kolaylaştırmakta. Linki buraya bırakıyorum. Kayıt olup giriş yaptıktan sonra devam edelim.


routes.py dosyasına basit bir liste oluşturalım.

Örneğin bir GET metodu ile bir veri tabanımız varmış gibi sorgu yapalım.


Birde yeni kitap kaydedecek bir route yazalım. Json ile veriyi POST edeceğiz.

application/routes.py

İlk satırdaki importu unutmadan devam edelim. request body’sinde dönen Json verisini get_json() metodu yardımıyla Python dict  tipine dönüştürüyoruz.  Daha sonrasında book listesine ekleme yapıp. Bir json response dönerek fonksiyonu sonlandırıyoruz. Aşağıda örneği bulunmakta.

Postman ile daha öncesinde çalışmamış ve bu çıktıyı almakta zorlanıyor iseniz şurada güzel bir kaynak bulunmakta.


Bu bölümün sonuna doğru gelirken artık Flask tarafında bir projeyi nasıl yapılandıracağımız ve örnek olması açısından bir kaç API endpointi oluşturup onlarla nasıl çalışabileceğimizi öğrenmiş olduk.

Bir sonraki bölümde MongoDB kurulumu ile başlayıp Flask uygulamamızı Mongo tarafıyla konuşabilmesi için mongo driver eklentisi ile genişleteceğiz. Daha sonrasında config ayarlarımızı(db_name,db_host,db_port vb) yapıp projemizde kullanacağımız şema tipi üzerine konuşacağız ve bir kaç collection oluşturup CRUD işlemleri yapacağız.

Arka arkaya eklemeye çalışacağım ki soğumadan taze taze devam edelim.

Herkese iyi günler 🙂

Tarih:BlogFlaskPython

İlk Yorumu Siz Yapın

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Göster
Gizle