Strapi Nedir ? Strapi&Vue.js İle Proje Geliştirme
Herkese Selamlar 👋🏻 Bu yazımda sizlere öncelikle kısaca Strapi nedir, ne için kullanırız ve avantajları nelerdir bunlardan bahsedeceğim daha sonra Strapi & Vue.js ile başlangıç seviyesinde proje geliştirme aşamalarından ve karşılaştığım küçük problemleri nasıl çözdüğümden bahsedeceğim. Umarım sizler için hem yararlı hem de keyifli bir içerik olur :) Vakit kaybetmeden başlayalım.
Strapi Nedir ?
Kısaca Strapi nedir bundan bahsedeyim. Strapi Node.js tabanlı bir İçerik Yönetim Sistemidir (CMS(Content Management System)). Wordpress’e benzer bu konuda fakat Wordpress’ten ayrılan özelliği bir site oluşturmak yerine API oluşturur. Oluşturduğumuz bu API’yi web, masaüstü ve mobil olmak üzere birçok yerde kullanabiliriz.
Neden Strapi Kullanırız ?
- Kolay ve hızlı proje çıkarma : Node.js tabanlı olduğu için performansı yüksektir bu sayede kısa sürede az maliyetle proje çıkarılabilir.
- Özelleştirme: Node.js tabanlı olduğu için yeterli bilgi ve deneyiminiz var ise arkaplanda özelleştirebilirsiniz bunun için imkan sağlıyor.
- Açık kaynak kodlu: Açık kaynak olmasının en büyük avantajı kodların herkes tarafından görülebilir olması ve bu sayede ürün geliştirmenin daha etkili bir şekilde gerçekleştirilmesi.
Strapi’nin Avantajları
Strapi’nin kullanılmasının en büyük avantajı backend bilgisine sahip değilseniz veya backend bilginiz var ama yazacağınız API için vaktiniz yoksa kısa ve güvenli bir şekilde API’ler oluşturup kullanmanıza olanak tanır. Bu sayede kısa sürede az maliyetli güvenli uygulamalar çıkartabilirsiniz.
Strapi’yi Vue.js Projemize Dahil Etme
Daha önceden oluşturmuş olduğunuz Vue.js projemiz için öncelikle Strapi ile proje oluşturuyoruz. Ben projelerimde yarn kullanıyorum buna göre ilerliyorum.
Proje kurulumu bu kadar basit tek dikkat etmeniz gereken Node.js versiyonunuzun uygun olması. Daha sonra yarn develop komutunu çalıştırıp projenizi ayağa kaldırabilirsiniz.
Komut çalıştıktan sonra karşınıza bu url çıkıyor ve üzerine tıklayarak projenizi açabilirsiniz. Açılan ekranda karşınıza bir kayıt olma ekranı çıkıyor ekrandaki bilgileri doldurarak admin paneline üye olabilir ve giriş yapabilirsiniz böylelikle admin panele erişim sağlayabilirsiniz.
Açılır sol menüde yer alan Content-Type Builder ile projeniz için gerekli collectionları oluşturabilirsiniz.
Sizler için örnek olması açısından yazı sonunda ekleyeceğim örnek blog projem için böyle bir collection hazırladım. Şimdi bir tane de collection oluşturma aşaması örnek vereceğim sizlere. Create new collection type butonuna bastığınızda aşağıda gördüğünüz gibi bir popup açılıyor. Burada öncelikle oluşturmak istediğiniz collection için bir isim belirtiyorsunuz.
Daha sonra oluşturmak istediğiniz bir alan için tür seçmelisiniz.
Ben örnek olarak bir Text alanı seçtim. Bu alanı kullanmak için de bir isim belirtiyoruz.
Görselde de olduğu gibi gelişmiş ayarlardan bu alanımızı özelleştirebiliyoruz. Örnekte görüldüğü gibi ben zorunlu alan ve minimum uzunluk ekledim. Daha sonra Finish diyoruz ve sağ üst köşede bulunan Save butonuna basıp collectionımızı kayıt ediyoruz.
Daha sonra oluşturduğumuz Project collectionı için Content Manager sekmesinden kayıt ekliyoruz. Eklediğimiz kayıtları publish ederek API’mizde görünür hale getirip kullanabiliyoruz. Bundan önce ise ayarlar kısmından API kullanımı için gerekli izinleri vermeliyiz.
Gerekli izinleri verip kayıt ettikten sonra artık projemizde API’mizi kolaylıkla kullanabiliriz. Proje içerinde API’mizi ise aşağıda görüldüğü gibi çağırıyoruz.
Strapi ile API’leri oluşturup Vue.js projemiz ile kullanmak gördüğünüz gibi oldukça kolay. Yazımın sonlarına gelirken karşıma çıkan birkaç küçük sorun için çözümleri de bırakıyorum aşağıya :)
Collection’ınınız içinde componentler barındırıyor veya medialarınız var ama bilgileri API’niz içerisinde gözükmüyor ise API’nize şunları ekleyebilirsiniz.
- Medya vs API’nizde görünmeyen bilgiler için;
API’nizin sonuna popule=* ekleyebilirsiniz. Component array’iniz var ve onları da görüntüleyemiyor iseniz şu yöntemi deneyebilirsiniz.
Son olarakta belirli bir id’ye ait verileri görüntülemek için;
eklediğim örnek API’leri kullanabilirsiniz. Strapi’yi ve Vue.js projesi ile kullanımını başlangıç seviyesinde yazımda derledim. Umarım sizler için faydası olmuştur. Aşağıya örnek proje (ui&api) linklerini ve daha detaylı incelemek isteyenler için Strapi adresini bırakıyorum:) Yeni içeriklerle görüşmek üzere :) 👋🏻
Arayüz reposu : https://github.com/KadriyeAksakal/Blog-UI
Api reposu : https://github.com/KadriyeAksakal/Blog-Api
Strapi websitesi : https://strapi.io/
Soru, görüş ve önerileriniz için mail atabilirsiniz.
