>
TOPLULUK

No-code 101 ve deneyimlerimiz

Bizi en başından beri takip edenler bilir, topluluğun ilk adımlarını attığımızda kafamızda, bugün hayata geçirdiğimiz Mentorlar ve Dükkan gibi bir çok konu vardı. Ancak her zaman yazılım tarafı bizi korkutmuştur. Ancak her şeye rağmen bir yerden başlamamız gerekiyordu ve tam o an hayatımıza no-code araçları girdi ve olaylar gelişmeye başladı.

Bu yazı geçen günlerde Adem İlter'in bizi YouTube kanalında no-code deneyimlerimizi paylaşmamız için konuk etmesi sonrası "Neden mevzuyu yazıya dökmüyorum?" dedikten sonra oluştu. "Ben bu kadar şeyi okuyamam." diyorsan hemen seni şuraya alalım. Buradan yayını izleyebilirsin hatta ilgili konularla ilgili zamanları YouTube sayfası açıklamasında bulabilir ya da direkt zaman çizelgesi üzerinden görerek gidebilirsin. Ayrıca bizi konuk ederek bu konuda deneyimlerimizi aktarmamıza olanak sağladığı için Adem İlter'e teşekkür ederiz.


Bizi en başından beri takip edenler bilir, topluluğun ilk adımlarını attığımızda kafamızda, bugün hayata geçirdiğimiz Mentorlar ve Dükkan gibi bir çok konu vardı. Ancak her zaman yazılım tarafı bizi korkutmuştur. "Kim yazacak?", "Maliyeti bize ne kadara patlayacak?" ve "Ne kadar uzun sürecek?" hatta "Kafamızdaki gibi olabilecek mi?" sorularından dolayı bir kaç girişimimiz olsada tam istediğimiz gibi adım atamamıştık. Kendimizi daha çok etkinlikler ve sosyal medya iletişim ile Slack üzerine yoğunlaştırmıştık. Tabi gün geçtikçe kafamızda bu kadar düşünce ve fikir varken adım atamamamız bir yandan bizi rahatsız ediyordu.

Web sitemizin statik bir sayfa olarak olmasını değil bir kaç servisi barındıran ve topluluktaki kişilerin kazan-kazan olanları ile sayfamızda bulunmalarını, kullanmalarını hayal ediyorduk. Bize göre bu kadar kapsamlı fikirleri düşünmek bile bize fazla gelirken kendi başımıza bunu gerçekleştirmek gerçek anlamıyla hayal gibi geliyordu. Çünkü yapmak istediğimiz sitedeki ihtiyaçlar CMS paneli, form takibi gibi arka tarafıda olması gereken bir sistemi gerektiriyordu. Tabi bu sürecin uzamasıyla fikirlerimiz gelişti. Akışlar daha sağlam oldu ne yapmak istediğimizi daha iyi anladık.

Zaten önemli olanda bu sanırım yani bu fikirlerimiz tam anlamıyla kafamızda oturmasaydı, akışlar oluşmasaydı yani oluşmadan bu işe girişseydik büyük ihtimalle hiç tatmin edici olmayan sonuçlarla üzülecektik. Her zaman dediğim gibi önce fikrinizi geliştirin ve finalize edin, üzerinden defalarca geçin.

Mentorlar ve Calendly entegrasyonu

En önemli konulardan biri Mentorlar kısmıydı, daha web sitemiz oluşmadan önce bunu nasıl yapabileceğimi araştırdık. No-code terimini gerçek anlamıyla her yerde kullanmak istiyorduk çünkü başka türlü yapamıyorduk. :) Mesela takvim oluşturma, kişiler kendi takviminde gün ve saatlerini hatta ücretlerini belirleyecekler ve kişiler gelip randevu alacak sonra tek bir adımla ödemeyi yaparak akışı sonlandıracaklar. Mail üzerinden gerekli bilgilendirmeleri alacaklar görüşmeden önce hatırlatacak mail gönderecek ve görüşme sonrası geri bildirim maili ile tekrar fikir edinecektik. Her şeyi otomatik şekilde planlayarak işlemesi için hangi servislerin buna uygun olup olmadığını görmek istedik ve Calendly servisini kullanmaya karar verdik. Neticede Amerika'yı yeniden keşfetmeye gerek yok. Buradaki kilit olay en doğru servisleri kullanabilmek ve sisteminize entegre edebilmek. Parçaları birleştirdikten sonra büyük resim eksiksiz şekilde çalışacaktır, kazanılmış tecrübe.


Calendly cepte. Gelelim şimdi bir site oluşturmaya, ilk akla gelen tabi ki Webflow ama öyle düşündüğünüz kadar kolay olmayabilir. İlk düşünüldüğünde no-code dendiğinde sıfır kod ama her şey olsun olduğu için bazen insanlar beklediklerini bulamıyor. Gerçi bu tamamen sizin beklentinizle eş değer. Yani yapmak istediğiniz sitenin sınırları belli ve daha basitse evet mümkün ancak olayın içerisine ne kadar girdikçe "ya şunuda yapayım" diye diye olay biraz farklı yere gidiyor ve Webflow bunu dedirtmeye çok müsait.

Gerçekten no-code mu?

Webflow dünyasına ilk girdiğimde yalan yok biraz korktum, daha doğrusu afal afal baktım. Kaldı ki basic HTML ve CSS bilgimin olmasına rağmen elim bir türlü ilk komponenti oluşturmaya gitmedi çünkü "Acaba yanlış mı yapıyorum?" diye diye ilerleyemedim. Bir kaç arkadaşa danıştım, yardım istedim ilk başlarda her ne kadar yardım alsamda içim. rahat etmedi. Bunun iki nedeni vardı. Birincisi insanları kendi projemiz için bir beklentiyle onları rahatsız etmek istemiyordum çünkü durmadan bir şeyleri geliştirmek istiyorum. Diğer yandan biraz... yok baya kontrol hastası olduğumdan her şeyin benim gözümden ve kontrolümden geçerek ilerlemesini sitiyordum çünkü kafamdaki akışı, kullanabilirliği birine aktarmak hiç kolay değil. En güzel oturup kendin istediğin şekilde yap, tatmin ol. En nihayetinde bu işi kendi başıma yapmanın en sağlıklı karar olduğuna karar verdim.

Klonla ve boz!

Tabi sıfırdan bir şey yaratmanın anlamı yoktu, öncelikle bizim dünyamıza yakın bir topluluğun açık kaynaklı bir Webflow şablonu var mı merak ettim ve araştırdım. Bir çok şablonu klonladım, kurcaladım ve bozdum. Bozdukça öğrendim, öğrendikçe olayı daha iyi çözdüm derken karşıma Jan Losert'in hazırladığı ve tamamen herkese açık olan beforeyoushine.com Webflow şablonu çıktı. Canlıdaki siteyi inceledim ve em basit şekliyle faz 1 için bize çok uyuyordu evet istediğimiz çoğu şey yoktu ama üzerine koyarak istediğimiz noktaya getirebileceğimizi düşündüm.

Şablonu klonladım ve üzerine oynamaya başladım. Önce renkleri fontlar derken baya bir şeyi değiştirmeye başladım. Tasarım bile tamamen Webflow üzerinde şekillenmeye başlıyordu. Normalde "olmaz bu şekilde" diyeceğim bir süreç ancak var olan bir alt yapı üzerinden değişiklikler ile daha iyi şekillendiğini ve ilerledikçe kararları direkt canlı sayfa üzerinde görmek büyük bir artı oldu. Baktım ben kaptırdım gidiyorum hemen Jan Losert' ile iletişim kurdum. "Böyle bir topluluğumuz var, web sitesi içinde senin bu şablonun üzerinden ilerliyorum. Senin için sorun var mı?" dedim ve geri dönüşü olumlu oldu hatta gelişmeleri paylaşmamı istedi.

Hali hazırda kullandığım şablonda iş ilanları ve makaleler ile mentorlar sayfaların alt yapısı vardı. Mentorlar kısmı gerçi tam istediğimiz gibi değildi çünkü kişiler liste sayfası üzerinden sadece kişilerin mail adresi üzerinden iletişime geçmeye olanak sağlıyordu benim amacım ise Calendly servisini buraya entegre edebilmek ve otomasyona bağlamaktı. İş ilanları sayfalarında bazı oynamalar yaptım ve aşağı yukarı Faz 1 için eldeki sayfalar yeterli oldu. Tabi üzerine stil ve kullanabilirlik olarak bir çok şeyi değiştirmiştim. Tamamen tmlab° karakterine büründürerek tüm içeriği aynı çizgide ortaya çıkarmak istiyordum.

Tabi sayfalar üzerinde oynarken bir yandan Webflow'un sunduğu güzelliklerden de eksik kalmak istemiyordum. Mesela Lottie ile mikro animasyonları kullanmak çok ilgimi çekmişti. Belirli içeriklerde Hüseyin Gayıran'ın Movin Icons kitini kullandım. Gerçekten bu tarz hareketli öğeleri kullanmak çok kolaydı bu beni etkilemişti.

Bu kısma kadar hiç ekstra kod işine girmem gerekmemişti ta ki dediğim gibi "bunu da yapabilir miyim" ve "şu da olsun" diyene kadar. Çünkü asıl iş dükkan ve ödeme sistemini entegre etmeye geldiğinde başlıyordu. Bu arada tabi dükkan kısmına gelene kadar buraya kadar anlattığım mevzular yaklaşık 3 ayımı aldı. Var olan sayfaları düzenlemek, ek sayfaları oluşturmak ve akışları düzenlemek gibi işler ince işlerle beraber baya zaman aldı. Dükkan ve ödeme yöntemi kısmına geçmeden hemen önce Mentorlar servisi için Calendly'yi eklemek için bir kaç kod ekleyerek bazı işlemler yapmam gerekti. Mesela Calendly ile iligli tüm çıkan içeriği hiç bir yere yönlenmeden aynı sayfada popup şekilde göstermek ve işlemi burada başlayıp bitirmesini istiyordum. O nedenle en doğru şekilde çalışması için bir takım kod satırlarını eklemem gerekti. Bunu yaparken biraz araştırma yaparak ve deneme yanılma yöntemi ile oluşturmak gerekti.

Ödeme entegrasyonu için Stripe

Dükkan bizim için en önemli ve son fazdı ancak hem dükkanda, hem Slack abonelik hem de Mentorlar sayfaları için ödeme yöntemini çözmemiz gerekiyordu. Bu kısım yazımın ortasına denk geldi ancak esasında bu olaya en başında bakıp çözmüştüm. Anahtar kelime, Stripe. Stripe gerçekten o kadar büyüleyici ki sizinde biraz içerisine girerek görebilirsiniz ancak. Amacımız çok basit şekilde Slack grubumuza ücret ödemesi ile giriş ve Mentorlar servisimiz için ücreti yine bu kolaylıkla yapabilmekti. Bir kaç Türk servisini denedik ama istediğimiz verimi alamadık ve sorunlarla karşılaştık. Stripe birinci seçenek değildi çünkü ne yazık ki Türkiye ile çalışmıyor. Burada şanslıyız ki daha önce İngiltere'de çalışmamın avantajı ile İngiltere hesabımı sayesinde Stripe'ta üyelik açtık. Gerçekten basitliği ve akışın yalınlığı beni büyülemişti. Çünkü bu tarz işlemlerde genelde hep sorunlarla karşılaşırsınız ve zorluklar yaşarsınız ancak bir kaç YouTube videosu izledikten sonra bir kaç saat içerisinde Stripe'ta hesabımı açtım ve her şey çok güzel çalışıyordu.

Yazdıkça yukarıda bir şeyleri atladığımı fark ediyorum. :) Stripe ile ilgili gerekli işlemleri yaptıktan sonra ilk önce Calendly'i Stripe'a bağlamayı yaptım. Böylece artık Mentorlar servisimiz üzerinden ödeme alabilir hale geldik. Çok basit şekilde randevu almak istediğiniz kişinin Calendly takvimi popup şekilde geliyor, bri takım sorularımızı ve gerekli bilgileri girerek bir kaç dakikada mentorunuzla randevulaşabiliyorsunuz. Görev tamamlandı.

Burada bir şeylerin eksik olduğunu hissettim o da anında iletişim kurabilmek. Kullanıcılar bu süreçte bir sorun yaşadığında ya da bir soruları olduğunda anında iletişime geçebilecekleri canlı sohbet eklemenin iyi olacağını düşündüm ve yine araştırmaya başladım. Araştırmam sonucunda HubSpot ile karşılaştım. Sayfanız içerisinde canlı sohbet olanağı sağlayan bir alt servisleri var. Hop, hemen onuda Mentorlar sayfamızla entegre ettim ama yine bir şey eksikti.

Otomasyon için doğru planlama ve akış

Her şeyi otomasyona bağlamak istiyorum demiştim ya, ha işte mesela iş ilanları için yeni bir ilan mı oluşturuldu? Çat Slack grubumuza otomatik düşsün. Mesela Mentorlar sayfamızdan canlı sohbet başlatıldı? Çat diye Slack grubumuzda kapalı kanalımızda bize gelsin istedim ve ne yaptım tahmin edin. Araştırdım! Bu sefer Zapier ile tanıştım. Zapier size bir takım tetikleyici konular vererek istediğiniz yere bu içeriği düşürmenize olanak sağlıyor. Webflow'da bunlardan biri. Webflow sayfamız üzerinden belirlediğimiz tetiklemeler ile Slack tarafına düşürmeyi ayalardım. İşte bu kadar otomasyon tamam.

Bakalım bu kısma kadar kaç tane no-code aracı kullandık? Webflow, Calendly, HubSpot, Zapier ve hatta Stripe bile bana göre bir no-code aracı çünkü hiç bir yazılımsal bir içeriğe gerek duymadan tüm ödeme sistem adımlarımı oluşturdum ve Webflow ile bağlantısını yaptım. (Tabi ihtiyaçlarıma göre bir takım kod ile müdahalede bulundum ama en basit ihtiyaçlar için bu kısma yine gerek yok.)

Buraya kadar neleri oluşturduk? Webflow'da belirlediğimiz, bize en uygun bir şablonu stil değişiklikleri ile istediğimiz şekile dönüştürdük. Bir takım dış servisleri sayfamız içerisine entegre ederek; Mentorlar, İş İlanları ve Makaleler sayfalarımızı tamamladık.

Faz 1'de ki tüm hedeflediğimiz sayfaları kusursuz oluşturduk ve test ettik sonrasında canlıya aldık. Açıkçası 4 yıldır düşündüğümüz Mentorlar servisini sonunda canlı şekilde görmek beni çok mutlu etti. Çünkü 1e1 şekilde insanların ister kendileri için isterlerse var olan işleri için doğru kişilerle iletişime geçmeleri bizim için çok önemliydi. Evet, Slack grubumuz üzerinden zaten bu kişilerle iletişim kurmak mümkün ancak olay biraz daha ciddiye bindiğinde ve profesyonel şekilde zaman harcamaya başlandığında bu işlemi daha resmileştirmek ve dışarıdan herkesin nitelikli ve değerli kişilerle doğru şekilde iletişime geçmeleri başka bir konu bence. Buradan Ücretli ve Ücretsiz şekilde mentorlarla randevulaşmanız oldukça kolay. Ücretli olmasının nedeni kısmına burada girmiyorum ancak emin olun bunun altında gayet makul gerekçeler bulunmakta, düşününce yanıtları bulmak pekte zor değil.

Konumuza geri dönecek olursa esas kısma gelelim, dükkan. Bana biri Webflow ile tanışmadan önce deseydi ki "Arda oturacaksın istediğin şekilde bir akış, tasarım yaparak tamamen kendi başına bir e-ticaret servisini canlıya alacaksın." sesli gülerdim. Konu bir şeyler satmak ve site üzerinden ürün ekleme, düzenleme olunca insan ürperiyor. Ancak gel gelelim ki en büyük hedeflerimden biri çok basit bir düzeneğe sahip bir alışveriş servisi yapmaktı. Hatta Üniversitede bitirme projem yine bu konudaydı. Orada mesela yazılım tarafı için baya dışarıdan destek almıştım. (Esasında zamanında çok güzel projeydi ya)

Önceki tecrübelerimle beraber kafamda hep acayip basit kullanıma sahip bir alışveriş deneyimi vardı. Zaten buradaki hedefimiz tasarımcıların yine tasarımcılarla buluşması olduğu için belirli bir kitlemiz vardı ve bu kitle hem görsel olarak hem de deneyim olarak her şeyin farkındaydılar. İş böyle olunca tüm komplike ve ilgi alanımız dışında kalan fonksiyonları uçurmak ilk yaptığımız iş oldu. Peki bu ürünler sayfasını nasıl yapabilirdim?

Hadi yine tahmin edin ne yaptım? Evet, araştırdım (: Araştırınca insan her şeyi bulabiliyor ve Webflow'un yine ücretsiz bir e-ticaret şablonu ile karşılaştım. Prospero. Ardından hemen klonladım ve bozmaya başladım, ne nasıl oluyor? Hangi şekilde bağlantılar kuruluyor? Kendi kendime bir sürü soru sorarak şablon içerisinden yanıtlarını aradım ve buldum. İhtiyacım olan kısımları kendi Webflow projem içerisine aldım ve bağlantıları yaptım. Bu kısımda daha önce ki sayfalar için yapmadığım bir şeyi yaptım ve önce dükkan sayfalarını Figma'da tasarladım çünkü önümü görmem gerekiyordu. Daha önceki sayfalarda zaten hali hazırda yapı üzerine gittiğim için çok ihtiyaç duymamıştım ancak dükkan sayfalarına sıfırdan başladım diyebilirim.

Vitrin sayfasını yaptım, ürün detay sayfası ve check-out sayfası derken baya tüm detayları oluşturdum. Gerçekten sadece göstermek istediğim içerikleri sayfa içerisinde konumlandırdım, fazlasını değil. Kendimi bir persona olarak düşünerek hareket ettim, "Arda sen ne görmek isterdin?" dedim ben sadece direkt ürünleri görmek, o ürünün hangi tasarımcıya ait olduğunu ilk bakışta görmek ve detayda kısa bir içerik ile hızlı şekilde ödeme hatta bu dijital bir ürünse direkt check*out sonrası indirme işlemini yapmak isterim dedim. Webflow'da böyle demiş olacak ki tüm düşündüğüm akışı ve kullanım deneyimini oluşturabilmem için çok doğru komponentler hazır şekilde mevcuttu. Tabi bazı ufak tefek sorunlar yok değil. Mesela Webflow ücretsiz ürün indirmeye olanak pek sağlamıyor ya da check out kısmında ücretsiz bir içerik varsa her türlü sizden fatura adresi bilgisini almak istiyor. Bu noktada bir takım yazılım ile kaçamak yöntemlere başvurmanız gerekiyor. (İyi ki abim yazılımcı)

Dükkan için yine Stripe kullanıyoruz daha doğrusu zaten Webflow hali hazırda Stripe ile entegre oluyor. Kısaca tüm ödemeler Stripe üzerinden yapılıyor. Onun yanında arka tarafta sipariş takibi, sipariş onaylama akışlarınıda gayet iyi çözmüş Webflow. Bir ürün siparişi tamamlandığında bir takım e-posta dizini iletiliyor. Sipariş alındı, ürün kargoya verildi vs. gibi ve bu maillerinde içeriğini siz değiştirebiliyor Türkçe olarak kendi metinlerinizi yazabiliyorsunuz ancak tasarıma müdahale edemiyorsunuz. Hatta daha iyi zaten tasarım gayet olması gerektiği gibi hiç orasıyla burasıyla oynamaya gerek kalmıyor.

Bugün Dükkan tarafını Beta olarak herkese açmış bulunuyoruz. Henüz ürünler kısıtlı ancak gerekli çalışmaları tamamladıktan sonra ücretli bir çok tasarımcının güzel ürünlerini ekliyor olacağız. Dükkan ile bir çok güzel, farklı içeriği siz tasarımcılarla buluşturmayı amaçlıyoruz.

Burada söz etmeden bu yazıyı bitiremeyeceğim bir diğer konu ise altyapı sponsorumuz Artboard Studio. Gerçekten bu süreçte bize maddi ve manevi olarak çok destek oldular. Böylelike Webflow'un tüm nimetlerinden yararlanabiliyoruz. Buradan kendilerine tekrar ve tekrar desteklerinden dolayı teşekkür etmek istiyorum.


Toparlamak gerekirse no-code mevzusu tamamen sizin nasıl kullandığınıza bağlı. İhtiyaçlarınızı doğru şekilde şekillendirirseniz her türlü karşılığını bulursunuz. Bir tasarımcı olarak bu kadar kafamdaki yapıyı kurabilmemin bir diğer artısı yazılımcı olmasamda ihtiyacımı karşılayacak kadar bir kod bilgimin olmasıdır. Tamam no-code diyoruz ancak başladığınızda daha rahat etmek istiyorsanız biraz HTML ve CSS bilginizin olması gerek böylece sitenizin yapısını çok daha kolay ve hızlı oluşturabilirsiniz.

Tüm siteyi oluşturmam, defalarca sayfaları bozmam, kurcalamam ve bu hale getirmem yaklaşık 5-6 ayımı almıştır sanırım. Harcanan saatler, günler. Şimdi düşünüyorumda pandemi olmasaydı sanırım bu site hiç bir zaman olmayabilirdi. (:

Umarım ufakta olsa bir tasarımcı olarak no-code benim için ne ifade ediyor ve sitemiz için nasıl kullandık sizlere aktarabilmişimdir.

Her türlü sorunuz için iletişime geçmekten kaçınmayın.

Sağlıkla kalın, pixel ile kalın.

Arda Arıcan
Designer @Protein
topluluğumuza katılmaya hazır mısın?
Slack grubumuza bekleriz

İşin veya kendin için mentorlarımızdan destek almak ister misin?