Bu paylaşımda bubble ile to-do app yapımını ele alacağız hadi gelin başlayalım.
1- New App Butonuna Basıyoruz
2- Uygulama Detaylarını Yazıyoruz
3- Tertemiz Bir Sayfa Bizim İçin En İyisi Olacaktır
Amacımız bubble hiç bir destek almadan basit bi uygulama çıkarmak ve bunun için yapmanız gereken şey yola tertemiz bir sayfa ile çıkmaktır. Ve sonrasında close assistant diyerek devam ediyoruz
4- Ne Yapmak İstiyoruz?
Amacımız nedir? İşte tam olarak burada bunu konuşmamız gereklidir. Bir yapılacaklar listesi hazırlama istediğimiz şeyler:
ToDo_Name — Text
ToDo_Date — Date
Veri tabanımızda gerekli olacak şeylerin en başında, -yapılacak listesinin yazı tipinde bir başlık atmamız gerekecek örneğin “ Yarın Sevgilimle Tekvando Yapacağız Unutma :)” Gibi bir yazı veri tabanımızda text tipinde bir tablo oluşturmamız için gereklidir.
İkinci olarak ise bunu yapmak istediğimiz zaman olan yarın için bir alana daha ihtiyacımız olacak bu da date tipinde örneğin 14.02.2038 gibi bir tarih içeriği.
Peki Bunları Bubble’da nasıl yapıyoruz?
5- Veri Tabanı Oluşturalım
Sol tarafta bulunan Data butonuna basıyoruz.
Data Sayfasında New Type kısmında Veri Tipini eklememiz gerekecek bunun için yazmamız gereken tek şey todos.
Todos Veri tipimiz oluşturuldu haydi halaya :))
Şimdi yapmamız gereken bu veri tipinin içinde 4. madde kararlaştırdığımız şeyleri teker teker yazmak olacak. Ben öncelikle başlık için gerekli olan todo_name bölümünü ekleyeceğim.
Bunun için create a new field bölümüne basıyoruz.
Karşımıza fields name ve fields type çıkıyor burada bilmemiz gereken şey bizim ihtiyacamız olanların doğru veri tipi ile eşleştirilmesidir. Örneğin eğer siz bir telefon numarası almak istiyorsanız bunu number tipinde yapmanız kullanıcının verisini işlerken kolaylık sağlayacaktır.
Field Name = ToDo_Name
Field Type = Text olarak teker teker ekleme yapıyoruz ve başka bir şeye dokunmadan create butonuna basıyoruz
Aynı durumu todo_date içinde yapmayı unutmayın!!!
Son durumda aşağıda gözüktüğü gibi bir durumda olmanız gerekiyor.
6- Gelin Artık Tasarıma Başlayalım
Bizim için gerekli olan ilk şey aslında yapılacak olan şeyleri yazmamız gereken bir input ve bunu kaydedebileceğimiz fonksiyonu (Sonra Ele Alınacak) çalıştıracak bir butona ihtiyacımız var.
1- Sol Tarafa Bulunan Desing sayfasına gidiyoruz
2- Sol tarafta bulunan elementlerden buton ve inputu aşağıya kaydırarak buluyoruz ve sayfamızda istediğimiz bölümde dikdörtgen çizerek ekliyoruz
Ve işte bu kadar basit bir şekilde hiç kod yazmadan ilk elementlerimizi ekledik :))
Artık Onları biraz düzeltme zamanı input ve butonu üstüne tıklayarak placeholder ve button text bölümü bugün ne yapmak istiyorum ve gönder olarak değiştiriyorum
7- Hadi Workflow Sayfasına :)
Bu sayfanın amacı fonksiyonlarımızı yazacağımız yer olması en kaba tabirle bir elemente yol belirleyerek ona görev verilecek yer…
Bu sayfaya geçmeden önce görev vermek istediğimiz elemente tıklıyoruz bizim için şu anda yapmak istediğimiz tek şey gönder butonuna görev tayin etmek. Ve bunun için aslında şöyle düşünüyoruz
Gönder butonuna basıldığında ne olmasını istiyorsun?
Ben bugün ne yapmak istiyorum input’una yazdığım yazıları todos veritabanına eklemesini istiyorum bunu yapmak için:
1- Butona çift tıklıyoruz
2- Açılan Pop-up da start/edit workflow seçeneğine tıklıyoruz
Ve karşımızda workflow sayfası!!!
Bizim için gönder butonuna basıldığında çalışacak fonkiyonu belirtmiş ve bizim tek yapmamız gereken şey click here to edit add an action bölümüne basarak istediğimiz şeyi eklemek olacak.
Şu anlık işimiz veri bölümde olacağı için data(Things) bölümüne basıyoruz.
Karşımıza data bölümünde en başta çıkan create a new thing… bölümüne basarak todos uygulamamızı oluşturacak veri tabanına bağlanmasını ve yeni bir yapılacaklar listesi oluşturmasını sağlayacağız.
Bastıktan sonra çıkan bölümde bizden veri tipini seçmemizi soruyor burada tek yapmanız gereken todos veritipini seçmek.
Set another field bölümüne basarak ayarlanacak olan bölümleri seçiyoruz.
Şimdilik date bölümünü boş bırakacağız ilk yapmak istediğimiz şey title bölümü olacağından dolayı input bölümü ile todo_name bölümünü eşleştirmek olacaktır.
Bunu yapmak için todo_name bölümünün yanında çıkan click yazısına tıklayarak dinamik bir şekilde verilerimizi eklemeye başlayacağız.
Eklediğimiz input seçerek eşleştirmeyi yapmaya başlıyoruz.
‘S value seçeneğini seçiyoruz ve anlam olarak ise todo_name bölümüne oluşturuduğumuz input “bugün ne yapmak istiyorum’un” içine yazılan değere eşittir.
Sonra ki adım ikinci bir fonksiyon oluşturmak
Click here to add an action… bölegesine basarak bu sefer veriyi ekledikten sonra input içine yazdığımız değeri sıfırlayarak eski(Boş) haline dönmesini sağlayacağız
Element Actions bölümünde ki reset inputs bölümene basarak fonkisyonu tamamlıyoruz ve son hali aşağıda ki gibi oluyor.
1nci fonksiyon veritabanı ile elementlerimizi ilişkilendirdiğimiz ve kaydettiğimiz bölüm ve ikinci fonksiyon ise input bölümüne sıfırlayarak tekrardan kullanılır hale getirecektir.
8- Design Kısmına Devam Edelim
Yapılacaklar listesini eklemeden önce veri tabanımızda ki verilerin son kullanıcı tarafından görülmesini sağlamamız gereklidir.
Bunun için ise desing sayfasına tekrar geliyoruz ve sol tarafta bulunan elementlerden repeating group elemenitini seçiyoruz bu elementin temel işlevi birden çok olan verilerin gösterilmesini sağlamak veri tabanına giderek bir döngü içinde verilerimizi son kullanıcıya göstermemiz için gerekli olan tek elemen o olmaktadır.
Ve şimdi input ve butonun altına aynı genişlikte çizerek elementi ekliyoruz.
Açılan ek sayfada type of content ve data source kısmının doldurulması gereklidir. Ama onları doldurmadan önce yapılacaklar listesi özelinde bu iki terimi açıklamamız gerekiyor.
Öncelikle type of content verisetinin bulunduğu todos bölümün seçilmesi ile type of contenti seçmiş oluyoruz
Data source ise verilerimiz kaynağını belirtmektedir gelecek olan veriler nereden gelecektir sorunun cevabını burada arıyoruz.
Hadi gelin data source bölümünü doldurarak işe başlayalım
Type olarak todos’u seçiyoruz ve close bölümüne basarak type of content için çıkan bilidirime tıklıyoruz
Ve son durum olarak aşağıda ki gibi bir durum karşımızda olması gerekiyor.
Evet repating group bölümüz hazır artık bu bölümün içinde todos veri seti içinde yer alan tablolardan hangilerini son kullanıcıya göstermek istediğimizi kararlaştırıp ekliyoruz.
Biz şimdilik sadece todos_name olarak başlığımızı ekleyeceğiz.
Sol taraftan text elementini repeating group bölümün en üst satırına ekliyoruz oraya eklediğimiz her şey aşağıda gözükecektir yani bir başka değişle veri setinde olan veri sayısı kadar aşağıya doğru bir …edit me… yazısı gözükecektir.
Edit me yazan kısım için ayarlama bölümü açıldıktan sonra text bölümünü dinamik hale getirerek veri setininden todos_name değerlerini çekmeye başlayacağız.
Bunun için yapmamız gereken şey … edit me … yazısına bastıktan sonra sol tarafta çıkan insert dynamic data bölümüne basıyoruz
Bastıktan sonra veri setimizin bağlantısını yaptığımız için current cell’s todos bölümü gelmektedir bunun tükçe karşılığı kabaca todos veri setinde o bölüme denk gelen veriyi getir demektir.
Batıktan sonra göstermek istediğimiz veriyi seçmemiz gerekiyor bunun için biz sadece todo_name bölümü seçiyoruz ve işlemi tamamlıyoruz.
Artık eklediğimiz her veriyi veri tabanımıza eklemeyi başardık ve eklediğimiz verileri göstermek için veri seti döngüsünü ön tarafta göstermeyi başardık.
Hadi Gelin Test Edelim
Test etmek için sağ üst tarafta bulunan priview butonu basıyoruz ve bubble sayesinde sadece bizim yaptığımız işler için olan domain adına sahip oluyoruz.
Demo link : https://todo-app123.bubbleapps.io/
[Sıra Sizde] Eksik Bıraktığımız Bir Bölüm Var!!!
Todos_name tamam fakat bu yapılacak olan şeyin ne zaman yapılacağı eksik bunun için yapmanız gereken her şey bubble da var ve yardım isterseniz yorumlarda buluşalım.
Hoşcakalın
Enes
iamenes.com
