Bunu Kendimiz Yapalım. Yorum Eklentimizi Nasıl Hazırladık?

Her şey 2021 Mart ayında başladı. Hesapkurdu.com olarak çok değer verdiğimiz içerik sayfalarımızdaki yorum modulümüz tutarsız çalışmaya başlamıştı. O güne kadar tüm yorumları Facebook’un sunduğu yorum eklentisi ile yönetiyorduk. Tahmin ettiğiniz üzere oluşan bir problemi de bizim çözmemiz mümkün değildi.

Facebook destek ekibi ile bir çok kez iletişime geçtik. Tahmin ediyoruz ki bunu yapan tek kullanıcı biz değildik çünkü aldığımız tüm dönüşler sadece iletişimi uzatmaya yönelikti. Bu konuşmalar uzadıkça biz de bu bağımlılığımızdan kurtulmamız gerektiğine karar verdik.

Bu yazımızda ise yaşadığımız problemleri, nasıl kararlar aldığımızı ve bu kararları nasıl uygulamaya döktüğümüzü konuşacağız. Konu ile ilgili genel anlatım ile başlayarak sonrasında teknik detaylara da yer vereceğiz. Hazırsanız kemerlerinizi bağlayın, maceraya başlıyoruz.

Şimdi ne yapacağız?

Facebook’la olan iletişim sonrasında mevcut araç ile bir süre daha idare etmemiz gerekti. Üstünde konuşmadan acele bir şekilde işe başlamak istemedik. Haftalar sonrasında teknik ekibin takviminde uygunluğun oluşmasıyla beraber bu işi gündemimize alabildik. Artık farklı bir çözüm ile ilerlememiz gerektiğini çok net olarak görebiliyorduk. Geçirdiğimiz her gün kullanıcıların fikir ve sorularını kaybediyorduk. Karar vakti geldi çattı.

Hazır bir eklenti alıp kullanalım

Konu ile ilgili ilk yaklaşımımız bu alanda kendini kanıtlamış başka bir eklenti ile yolumuza hızlıca devam etmekti. Bu kararı da netleştirmeden önce sprint içinde minik bir efor ile bu alanda kullanılabilecek eklentileri araştırdık.

Araştırdık desek de bu süreç duyulduğu kadar kolay olmuyor. Kullanacağımız bu eklentinin bizim gereksinimlerimizi de karşılaması gerekiyordu. Kullanıcıların Facebook, Google gibi sosyal platformlar ile giriş yaparak yorum yapabilmesi, bu yorumların modere edilebilmesi ve yanıt verilebilmesi bizim için temel ihtiyaçlardı.

Tüm ihtiyaçlar bu temel ihtiyaçlar ile de sonlanmıyordu. Kullanılacak eklentinin tasarımının bizim sayfamız ile zıt olmaması ve hatta yorum yapıldıktan sonra tıklanılacak olan gönder butonunun üzerindeki yazının Türkçe olması gibi küçük ayrıntılar elimizdeki seçenekler için en eleyici unsurlar oldular.

Değerli olabileceğini düşündüğümüz için araştırdığımız araçları ve neden tercih etmediğimizin sebeplerini de sizlerle kısaca paylaşalım.

• Disqus: Türkçe desteği, sosyal medya ile giriş, yorum yönetimi ve istatistikler gibi detaylı bir kullanım sunuyor. Bunun yanında yüksek fiyatı ve özelleştirilemeyen tasarımı seçeneklerimizin arasından çıkmasına sebep oluıyor.
• Hyvor Talk: Türkçe dil desteği, tasarım özelleştirme ve yorum yönetimi sunuyor. Maalesef sosyal medya ile giriş yapılamadığı için kendisini de seçeneklerimizden eliyoruz.
• CommentBox: Sosyal medya ile giriş, yönetim imkanı sağlıyor. Türkçe dil desteği ve özelleştirme imkanı olmadığı için bu araç ile de devam edemiyoruz.

Durum böyle olunca elimizde bizi tatmin edebilecek bir seçenek kalmadı. Sütten ağzı yanan yoğurdu üfleyerek yermiş, biz de bu sebeple eklenti kullanmaya zaten çekinerek yaklaşmıştık. Araştırma sonucu bu eklentiyi kendimizin yazmasının daha ideal bir çözüm olabileceğine karar verilmişti.

Tam olarak ne istiyoruz?

Üst kısımda parça parça neler istediğimizden bahsetmiştik. Bu başlıkları alttaki gibi üç maddeye indirgeyebiliriz. Teknik kısımları da bu başlıklar etrafında şekillendireceğimiz için aynı zamanda kilometre taşı olarak da değerlendireceğiz.

• Tasarımın uyumluluğu ve Türkçe arayüz
• Sosyal platformlar ile giriş yapılabilmesi
• Yorumların yönetilebilmesi

Kararları nasıl aldık?

Bu projenin değeri bizim için çok büyük olsa da Hesapkurdu.com’un performans ve SEO konusu bizim için daha kritikti. Bir yandan bu projeyi geliştirirken diğer yandan da Google’ın devamlı takip ettiğimiz Core Web Vitals değerlerini olumsuz etkilemememiz gerekiyordu.

Ek olarak çok da esnek bir yapı oluşturmak istiyorduk. Bu sebeple doğrudan Hesapkurdu.com içine yeni bir ekleme yapmadık. Tıpkı Facebook modülünün yaptığı gibi yeni bir proje oluşturmaya ve bu projenin çıktısını iframe içinde kendi sitemize eklemeye karar verdik.

Performans konusuna iframe içinde de dikkat etmemiz gerekiyordu. Sayfalarımıza yük yaratmaması için jQuery veya Bootstrap gibi çok kullanılan kütüphaneleri de yeni projemizden uzaklaştırdık.

Projeyi Hesapkurdu.com’dan ayırmak bize bir çok fayda sağladı. Öncelikle bu modülde çıkan sorunları bu modülü güncelleyerek düzeltebilecektik ayrıca iki proje arasındaki teknolojik bağlantıyı da kaldırmıştık. Bizde bu fırsatı değerlendirerek yeni projeyi .NET ortamından çıkarak Node.Js ile yazmayı tercih ettik.

Maliyet analizi

Projeyi şirket içinde yazıyor olmamız sizin için sıfır maliyet algısı oluşturmuş olabilir. Bu kararı ilk aldığımızda ben de sizinle aynı fikirdeydim. Daha detaylı düşündüğümüzde ise gerçek maliyetlerin farkına varabiliyoruz. Bunlardan en önemli ve pahalı olanı ise yazılımcı kaynağı ayırmak oluyor.

Burada sizinle beraber ufak bir değerlendirme yapalım ve üstünden ilerleyelim. Sizce bu şekilde bir çalışmanın eforu nedir? Bir sprint? İki sprint? Üç sprint? Aklınızdan geçen efor bunlardan birisi ise büyük ihtimalle siz de bizim ilk düştüğümüz yanılgıya düştünüz.

Projenin geliştirilmesi ve canlıya çıkması üç sprint bile sürse, çıkış sonrası da geliştirmeye devam etmemiz gereken konular olacaktı. Canlı ortamdaki hatalar, iş birimlerinin istekleri, kullanılan üçüncü parti paketlerin versiyonlarının güncellenmesi ve buna bağlı bakım süreçleri gizli maliyet diyebileceğimiz başlıkların arasında yerini buluyordu.

Kısacası hazır bir çözüm almak yerine içeride bir çözüm ürettiğinizde bunları da göz önünde bulundurmanız gerekiyordu. Bir başka önemli bir nokta ise satın alınarak kullanılan araçlar ile içeride yapılan araçların dengesini sağlayabilmekti.

Ekip içerisinde geliştirme yapmak veya satın almak gibi karar noktasında olduğunuz konular var ise buna benzer yan projeleri sağlıklı ilerletmek için bizim de uyguladığımız bir kaç maddeyi tavsiye olarak sizlerle paylaşabiliriz.

• Kararın tüm ekip tarafından alınması, konunun detaylıca konuşulması ve herkesin ortak noktaya gelmesi çok değerlidir. Aksi durumda ekip içinde iş sahiplenme konusunda olumsuz bir durum görülebilir.
• Temel işlerden ayrı görebileceğimiz bir çalışma olduğu için takvim ve iş yoğunluğunun görece daha hafif olduğu bir dönemde bu projeye başlamak daha rahat bir geliştirme süreci sağlayacaktır.
• Ekip içinde geliştirme yapılacak ise üstte bahsettiğimiz “gizli” maliyet ve iş yüklerinin geliştiriciler tarafından net bir şekilde anlaşılması aynı konuda gelecek sonraki çalışmalardaki şok etkisini ortadan kaldıracaktır.
• Satın alım yapılabilecek araçların değerlendirilmesi noktasında değerlendirme yapan kişilerin geliştirici ekipten olması bu araçlara tarafsız yaklaşılmasına engel olabilir. Ekibin geliştirme için hevesli olması araçların negatif incelenmesine, ekibin isteksiz olması ise araçların ihtiyacı karşılamayacak seviyede bile olsa pozitif incelenmesine sebep olabilir. Buna benzer taraflı kararlar ise diğer çalışanların güvenini sarsabilir.
• Hesapkurdu ekibi olarak takım içi güveni sağlamanın bu tip kararlardaki en önemli bileşen olduğunu düşünüyor. Açıklığın ve karşılıklı güven ilişkisinin sağlanamadığını durumlarda ise alınan kararlar konservatif tarafa doğru kayabilir.

Tüm bu noktaların beraberinde olumlu taraftan baktığımızda ise projeyi bizim geliştirmemizin çok büyük faydaları olabileceğini görebiliyorduk. Pazarda aradığımız özelliklerde bir araç olmamasının yanında, kendi geliştireceğimiz projeyi ihtiyaçlarımıza uygun şekilde yapabilecek olmamız, esnek ve geliştirilebilir olması gibi kök sebepler bulunuyordu.

Bu ve buna benzer bazı projelerde şirket içi geliştirme yapmanın maliyeti daha fazla olsa bile kabul etmek faydalı olabiliyor. Yazılım ekiplerine farklı alanlarda gelişim imkanı sunmak, deneyim kazandırmak genel olarak motivasyon artışı sağlıyor. Bu motivasyon da Hesapkurdu.com ekibi için en önemli gördüğümüz konulardan birisi.

Yazmaya başlıyoruz

Yazımızın buraya kadar olan kısmında karar alma aşamasında nelere dikkat ettiğimizi ve nasıl planlama yaptığımızdan bahsettik. Buradan itibaren biraz daha teknik konulara geçiş yapacağız.

Tasarım ve arayüz

Uygulamayı kendimiz yazıyor olmamız tasarım tarafında elimizi güçlü tutmamız için büyük bir fırsattı. Bu konuda üzerinde bir süredir çalıştığımız tasarım kılavuzumuzdan ve UX ekibimizden yardım aldık. Teknik gerekliliklerin konuşulduğu bir toplantı sonrasında, UX ekibi çalışırken biz de kendi çalışmalarımıza başladık.

Veritabanı

Bu yorumları nerede, nasıl saklayabiliriz diye düşündüğümüzde ise kendimizi bir karar noktasında daha bulduk. Planladığımız yapıda veriler arasında yoğun bir ilişkisel bağlantı bulunmuyordu, bu sebeple NoSQL veritabanları bu proje için güzel olabilirdi.

Başka bir pencereden baktığımızda ise Hesapkurdu.com’da Sql Server kullanıyor olmamızın verdiği tecrübe veritabanı konusunda elimizi güçlendiren bir seçenek olacaktı. Seçim vakti geldiğinde ise daha mantıklı bir seçenek olarak gördüğümüz ilk göz ağrımız Sql Server ile çalışmaya devam etmek istedik.

Buna benzer gündelik işlerin haricinde bir geliştirme yapmak istediğinizde bildiğiniz teknolojileri kullanmak belli bir tempoyu korumak için faydalı olabilir.

Üstte de belirttiğimiz gibi bu projede ideal bir veritabanı önerisi vermemiz pek mümkün değil. Alışkanlığınıza, tercihinize veya merakınıza göre istediğiniz veritabanı ile çalışabilirsiniz. Tercihiniz ne olursa olsun benzer bir proje yazmak isterseniz de kullandığınız veritabanına göre “mongoose” veya “sequelize” paketini tercih edebilirsiniz.

Sosyal platformlar ile giriş

Bu başlığa “Node.Js’in meyvelerini topladığımız nokta” da diyebiliriz. Sizlere Node.Js geçmişinden bahsetmeyeceğiz fakat çok aktif bir komüniteye sahip olduğunu hatırlatmak isteriz. Ne mutlu ki bu komünite söylediklerine göre 500'den fazla yöntemle giriş yapabileceğiniz bir paket hazırlamış. Çok da uygun bir isimlendirme ile Passport.Js ismini vermişler.

Projeyi kendimiz yazarken neden hazır paket kullandık, bunu da hızlıca yanıtlayalım. Evet, her bir sosyal medya platformunun kendine ait entegrasyonu bulunuyor fakat bunların da bizim tarafımızdan yönetilmesi, geliştirmesi sonrası maliyetimizi arttıracağı için o tarafı bahsettiğimiz komüniteye emanet etmeyi uygun bulduk.

Bu paket bizlere o kadar yardımcı oldu ki, sosyal platformalar ile giriş kısımlarını hazırlamamızdaki en büyük zorluğun platformların sayfalarından api anahtarları almak olduğunu bile söyleyebiliriz. Api anahtarlarını aldığınız durumda ise yapmanız gereken geliştirme neredeyse alttaki gibi olacaktır.

Passport.Js ile authentication

IFrame

Buraya kadar gayet hızlı bir süreçle ilerledik. Şimdi işin anahtar noktasına geldik. Yaptığımız projeyi iframe içinde çalıştırarak kendi projemizden soyutladığımızı ve bu sayede süreçleri ayırdığımızdan bahsetmiştim. Peki bunun hiç zorluğu olmadı mı? Tabii ki oldu.

Modül Görünümümüz

İlk olarak tahmin etmesi zor olabilecek bir örnek vereyim. Üstteki görselde gördüğünüz gibi yorum modülünün belirli bir yüksekliği var. Siz bu yüksekliği değiştiren bir işlem yaptığınızda, örneğin bir yorum eklediğinizde modülün yüksekliğini manuel olarak değiştirmeniz gerekiyor.

Manuel derken ne demek istedik? Sizlere iframe içinde yaptığınız boyut değişikliklerinin iframe’in bulunduğu sayfadaki boyutunu etkilemediğini söylesek inanır mısınız? Evet, gerçekten ilginç fakat bu sorunu çözmek için elimizde tam buna göre bir çözüm bulunuyordu. Iframe içinde her boyut değişikliği yapıldığında javascript yardımı ile (bkz. PostMessage) yeni yüksekliği dış pencereye ilettik. Dış pencere de iframe’in boyutunu bizim için güncelledi. Bu sayede de boyutlandırma sorunu çözmüş olduk.

Yönetim paneli

Kullanıcılardan yorum aldığımız bir sistemde moderasyon da diğer elementler kadar önemli. Henüz yorumları otomatik ayrıştıran bir algoritma yazmadık, yazdığımızda ise nasıl yaptığımızı anlatan bir yazıyı mutlaka sizlerle paylaşırız.

Bu moderasyonu şimdilik içerik ekibimizden rica edeceğiz. Sadece yorumları yönetmek tabii ki yeterli olmayacaktı. Uygulamayı bizim yazmamızın başka bir faydasını da görerek belirli metrikleri takip edebileceğimiz bir sayfa hazırladık. Aramızda kalsın ama bu sayfa tam da alttaki gibi görünüyor.

Yorum Modülü Yönetim Panelimiz

Sonraki adımlar

Yazının başında bahsettiğimiz gibi kendimizin geliştirdiği bir aracın canlıya çıkması sonrasında yapmamız gereken işler devam edecektir. Çıkış sonrasında uygulamanın canlı ortamdaki hızı, tutarlılığı, uyumluluğu, aldığı trafik gibi metrikleri takip etmek gerekecektir.

Tüm bu geliştirmenin sonunda canlı ortamdan gelen ilk yorumun kutlanması ve devamında yapılması istenilen geliştirmelerin belirlenmesi ile bir macerayı daha sonlandırmış olduk.

Veda Vakti

Bu kadar yorum eklentisinden bahsettikten sonra sizlerden de bu modülümüz hakkında yorum almayı çok isteriz. Bizlere buradan veya Linkedin sayfamızdan ulaşabilirsiniz. Vakit ayırdığınız için çok teşekkür ederiz. Başka bir yazımızda görüşmek üzere!

Son bir konu

“Keşke ben de bu ekipte yer alsam” diyorsanız alttaki bağlantıdan iş ilanlarımızı takip edebilir, kendinize uygun bir pozisyona başvurabilirsiniz.

https://www.linkedin.com/company/bhl-turkey/jobs/

Not: Başvurunuzda Medium yazılarımızı okuduğunuzdan da bahsetmeyi unutmayın.