Full-Stack Uygulama Nedir? Sade Bir Açıklama

Full-stack uygulama, çalışmak için ihtiyaç duyduğu her katmanı içeren bir uygulamadır: insanların gördüğü ve tıkladığı frontend, sunucuda çalışan ve kuralları uygulayan backend ve her şeyi hatırlayan veritabanı. Yaptığınız görevleri kaydeden, girişinizi her cihazdan yapmanızı sağlayan ve listenizi kimseye göstermeyen bir yapılacaklar listesi full-stack'tir. Yalnızca çalışma saatlerinizi gösteren tek bir sayfa değildir.

“Stack” (yığın), teknolojinin üst üste konmuş katmanları demektir. “Full” (tam) ise hepsinin orada olduğu anlamına gelir.

Yapay zekâyla geliştirirken neden önemli?

Bir yapay zekâ oluşturucuya bir uygulamayı anlatırken kullandığınız kelimeler hangi katmanların inşa edileceğine karar verir. “Menümüzü gösteren bir sayfa yap” bir frontend üretir. “Müşterilerin menüden sipariş verebilmesini ve mutfağın yeni siparişleri görmesini sağla” ise üç katmanın tümünü gerektirir; çünkü siparişlerin kaydedilmesi, iki farklı kullanıcı tipiyle paylaşılması ve özel tutulması gerekir.

Katmanları bilmek üç yönden yardımcı olur:

• Doğru şeyi istersiniz. Verinin kaydedilmesini istiyorsanız bunu açıkça söyleyin. Yalnızca frontend üreten bir oluşturucu bitmiş gibi görünür ama sayfa yenilendiğinde her şeyi unutur.
• Sahte bütünlüğü fark edersiniz. Örnek verilerle yapılmış bir demo, çalışan bir uygulamayla aynı görünebilir. Katmanları bilmek, verinin gerçekten bir yere gidip gitmediğini kontrol etmenizi sağlar.
• Çalışma maliyetlerini anlarsınız. Yalnızca frontend statik dosyalar olarak sunulabilir. Backend ve veritabanı sunucularda çalışan programlardır ve barındırma maliyetinin büyük kısmı buradan gelir.

Günlük bir benzetme: bir restoran

Bir restoranı düşünün.

• Yemek salonu frontend'dir. Menüler, masalar ve garsonun not defteri. Misafirlerin gördüğü şeydir ve hoş ve kullanımı kolay olmalıdır.
• Mutfak backend'dir. Misafirler oraya girmez. Siparişleri alır, yemeğin mevcut olup olmadığını kontrol eder, pişirir ve tuhaf istekleri reddeder. Kurallar buradadır.
• Kiler ve sipariş defteri veritabanıdır. Ne olduğunu ve neyin sipariş edildiğini tutar; vardiya değiştiğinde hiçbir şey unutulmaz.

Sadece yemek salonu olan bir restoran size güzel bir menü gösterebilir ama yemek veremez. Bu, full-stack gibi görünen ama yalnızca frontend olan bir uygulamadır.

Üç katman, daha ayrıntılı

Katmanlar sabit bir sırayla konuşur. Frontend, backend'den bir API üzerinden bir şey ister — backend'in kabul ettiği tanımlı istekler kümesi. Backend isteği kontrol eder, veritabanını okur ya da yazar ve bir yanıt gönderir. Frontend veritabanıyla doğrudan konuşmaz.

Bu sıra, tüm yığındaki en önemli güvenlik fikridir. Ziyaretçi frontend'deki her şeyi okuyabilir ve değiştirebilir, çünkü frontend onların cihazında çalışır. Bu yüzden “yalnızca sahibi bu faturayı görebilir” ya da “bir kupon yalnızca bir kez kullanılabilir” gibi kurallar backend'de uygulanmalıdır. Bu ayrım hakkında daha fazlası için frontend ve backend rehberine bakın.

Çalışılmış bir örnek: bir yoga stüdyosu rezervasyon uygulaması

Bir yoga stüdyosu işlettiğinizi ve insanların derslere internetten rezervasyon yapmasını istediğinizi varsayalım.

Ziyaretçinin yaptığı: siteyi açar, bu haftaki dersleri görür, birine dokunur, giriş yapar ve bir yer ayırtır.

Arka planda olanlar:

1. Frontend ders programını gösterir. Bunu doldurmak için backend'e sorar: “Bu hafta hangi dersler var ve kaç yer kaldı?”
2. Backend, dersleri ve her biri için rezervasyon sayısını veritabanından sorgular, sonra yanıt verir.
3. Ziyaretçi Rezervasyon Yap'a dokunur. Frontend şunu gönderir: “Giriş yapmış bu kişi için 42 numaralı dersi ayırt.”
4. Backend kontrol eder: Bu kişi gerçekten giriş yapmış mı? Ders dolu mu? Bu kişi zaten bu dersi ayırtmış mı? Her şey yolundaysa veritabanına yeni bir rezervasyon satırı yazar.
5. Backend “ayırtıldı” yanıtını verir ve frontend bir onay gösterir.
6. Daha sonra stüdyo sahibi giriş yapar ve ders listesini görür. Backend, herkesin isimlerini göstermeden önce onun yönetici olduğunu kontrol eder.

Şimdi bunun yalnızca frontend olarak yapıldığını düşünün. Ders programı görünebilir ve Rezervasyon Yap düğmesi güzel bir onay işareti gösterebilir, ama rezervasyon sayfa yenilendiğinde kaybolur, “kaç yer kaldı” sayısı diğerleri için yanlış olur ve sahibi hiç görmez. 4. adım — kontroller — tamamen eksik olurdu. Pratikteki fark budur.

Temel terimler

• Frontend (istemci tarafı): Tarayıcıda çalışan kısım.
• Backend (sunucu tarafı): Bir sunucuda çalışan kısım. API sunucusu da denir.
• Veritabanı: Verilerin düzenli biçimde saklandığı yer. Bkz. veritabanı nedir.
• API: Backend'in frontend'den ya da diğer programlardan kabul ettiği isteklerin listesi.
• Kimlik doğrulama (authentication): Birinin kim olduğunu kontrol etmek (giriş). Yetkilendirme (authorisation): Ne yapabileceğini kontrol etmek.
• Yayımlama (deployment): Herkesin kullanabilmesi için tüm katmanları sunuculara koymak.
• Monolit ve servisler: Her şeyi yapan tek bir program ile birbirinden küçük birkaç program (örneğin bir web sitesi ve ayrı bir API). İkisi de full-stack'tir.

Yaygın hatalar ve yanlış anlamalar

• “Bitmiş gibi göründüğü için bitmiştir.” Örnek veri ve çalışıyor gibi görünen bir düğme, kaydedilmiş veri demek değildir. Sayfayı yenileyin, gizli bir pencerede açın ve verinin hâlâ orada olduğunu kontrol edin.
• Kuralları frontend'e koymak. Bir düğmeyi gizlemek güvenlik değildir. Backend kontrol etmezse, isteği bilen herkes isteği yapabilir.
• Gizli anahtarları frontend'e koymak. Tarayıcı kodundaki bir ödeme ya da yapay zekâ sağlayıcısı anahtarını her ziyaretçi okuyabilir. Anahtarlar backend'de, ortam değişkenlerinde tutulmalıdır — bkz. ortam değişkenleri ve gizli anahtarlar.
• Full-stack'in karmaşık anlamına geldiğini düşünmek. Küçük bir full-stack uygulama birkaç ekran, bir avuç backend rotası ve üç veritabanı tablosu olabilir. Bu bir boyut değil, katmanların bir tanımıdır.
• Her teknolojiyi kendiniz seçmeniz gerektiğini düşünmek. Herhangi bir mantıklı, yaygın kullanılan yığın ilk sürüm için yeterlidir. Daha önemli olan verinin ve kuralların net bir tarifidir.

Yapay zekâ oluşturucunuzdan ne istemelisiniz?

Katmanları adlandırmasanız bile uygulamayı bu üç katman açısından tarif edin:

• Veri: “Dersleri (ad, saat, kapasite) ve rezervasyonları (ders, kişi, rezervasyon zamanı) bir veritabanında sakla.”
• Kurallar: “Bir ders kapasitenin üzerinde rezerve edilemez. Bir kişi bir dersi yalnızca bir kez ayırtabilir. Kimin rezervasyon yaptığını yalnızca yöneticiler görebilir.”
• Ekranlar: “Haftalık bir ders programı, bir rezervasyon onayı, ders başına rezervasyonları listeleyen bir yönetici sayfası.”
• Kontroller: “Bu kuralları yalnızca sayfada değil, sunucuda uygula. API anahtarlarını sunucuda tut.”

Sonra şüpheci bir gözle test edin: yenileyin, iki farklı kişi olarak giriş yapın, görmemeniz gereken verilere erişmeyi deneyin. Yapay zekâyla uygulama yapma rehberi bu döngüyü baştan sona adım adım anlatır.

Mythex'te full-stack uygulamalar

Mythex, bir sohbet açıklamasından full-stack web uygulamaları oluşturur. Varsayılan olarak yeni bir uygulama React ve TypeScript frontend'i alır; uygulama veri kaydetmesi gerektiğinde, Mythex projeye özel bir Postgres veritabanı ekler ve isterseniz web sitesinin yanında ayrı bir API sunucusu (örneğin Python, Node, C# veya Java) da isteyebilirsiniz. Her şey canlı bir önizlemede birlikte çalışır ve herkese açık bir URL'ye yayımlanır. Çoklu servisli uygulamalar dokümantasyon sayfası, bir web sitesi ile bir API'nin birlikte nasıl önizlenip yayımlandığını gösterir; full-stack uygulama oluşturucu sayfası ise başlangıç noktaları sunar.

Sorular