Bubble Nasıl Kullanılır: 2025 İçin Adım Adım Kılavuz

Bir uygulama geliştirmek istiyorsunuz ama çok fazla kod bilmeniz gerektiğini mi düşünüyorsunuz?

Bu büyük bir sorun.

Birçok kullanıcı kendi içeriklerini oluşturmak, kendi sayfalarını tasarlamak ve hatta kendi uygulamalarını piyasaya sürmek istiyor ancak kendilerini çıkmazda hissediyor.

Yapay zekâ özelliklerini kullanmak ve video eğitimleri izleyerek bir şeyler yapmayı öğrenmek istiyorlar, ancak bunların hepsi çok uzak görünüyor.

İşte çözüm: Bubble. 

Size Bubble'ı nasıl kullanacağınızı göstereceğiz.

Balon

Karmaşık veritabanlarıyla uğraşmayı bırakın. Bubble, uygulamanızın verilerini görsel olarak yönetmenizi sağlar. Veri odaklı uygulamanızı bugün oluşturmaya başlayın!

Bubble'ı ücretsiz deneyin İncelemenin tamamını okuyun

Bubble Hesabınızı Kurma

Bubble Web Sitesine Ulaşma

Uygulamanızı oluşturmanın ilk adımı Bubble web sitesine erişmektir.

En sevdiğiniz web tarayıcısını açın; bu, web sitelerine bakmak için kullandığınız programdır.

En yaygın kullanılan tarayıcılar Chrome, Firefox, Safari veya Edge'dir. Üstteki adres çubuğuna "bubble.io" yazın ve Enter tuşuna basın.

Bu sizi doğrudan Bubble ana sayfasına götürecektir.

"Kayıt Ol", "Başla" veya "Hesap Oluştur" gibi bir düğme arayın.

Bu, inşaata başlamanız için biletiniz.

Ücretsiz Hesap Oluşturma

Bu butona tıklamak kayıt işlemini başlatır.

Tıpkı e-posta veya oyun hesabı oluştururken olduğu gibi, bazı bilgiler vermeniz gerekecek.

Bubble'ın sizinle iletişime geçebilmesi için e-posta adresinize ihtiyacı var ve hesabınızı güvende tutmak için bir şifre seçeceksiniz.

Güçlü bir parola seçin—harf, rakam ve sembol karışımı en iyisidir—ve unutmamak için güvenli bir yere yazın.

Bubble size, Bubble'ı ne amaçla kullanmayı planladığınız gibi birkaç başka soru da sorabilir.

Merak etmeyin; yapmak istediğinize en yakın görünen seçeneği seçin.

Kabarcık Arayüzünü Anlamak

Giriş yaptıktan sonra Bubble arayüzünü göreceksiniz.

Bu, uygulamanızı oluşturacağınız ana ekrandır. İlk bakışta biraz karmaşık görünebilir, ancak bölümlere ayrılmıştır.

En önemli kısımlar şunlardır:

• Tasarım Sekmesi: Burada uygulamanızın sayfalarını görsel olarak oluşturacaksınız. Düğmeler gibi öğeleri sürükleyip bırakacaksınız, metin Bu alana kutular ve resimler yerleştirin.
• İş Akışı Sekmesi: Burada uygulamanıza ne yapacağını söylersiniz. Birisi bir düğmeye tıkladığında veya bir şey yazdığında uygulamanızın izlemesi gereken talimatlar gibi olan "iş akışları" oluşturursunuz.
• Veri Sekmesi: Burası uygulamanızın veritabanını yönettiğiniz yerdir. Veritabanı, bilgileri sakladığınız dijital bir dosya dolabı gibidir.
• Element Ağacı: Bu, sayfanıza eklediğiniz tüm öğeleri liste halinde düzenlenmiş olarak gösterir.
• Emlak Editörü: Bir öğeye tıkladığınızda, bu alan size o öğenin görünümünü ve davranışını değiştirebileceğiniz tüm yolları gösterir.

Uygulamanızın İlk Sayfasını Oluşturma

Görsel Düzenleyiciyi Tanıma

Görsel düzenleyici, uygulamanızın nasıl görüneceğini tasarlayacağınız yerdir.

Boş bir tuval gibi. Ekranın sol tarafında, 'öğeler' adı verilen bir sürü araç göreceksiniz.

• Bunları sayfanıza sürükleyip bırakabilirsiniz. Bunları dijital yapı taşları gibi düşünün.

Burada kelimeler için metin kutuları, tıklanabilir düğmeler, resim göstermek için resimler ve daha birçok şey var.

Metin ve Düğmeler Ekleme

Basit bir şeyle başlayalım.

Metin eklemek için, "Metin" öğesine tıklayın ve sayfanızın ortasına sürükleyin.

Artık içine istediğiniz her şeyi yazabilirsiniz. 

Belki de "Uygulamama hoş geldiniz!" veya "Aşağıdaki butona tıklayın." gibi bir şey olabilir.

Şimdi de bir buton ekleyelim.

"Button" öğesine tıklayın ve metninizin altına sürükleyin. Düğmenin içindeki metin kutusuna yazarak düğmenin içeriğini değiştirebilirsiniz.

"Başlat" veya "Buraya tıklayın" gibi bir şey deneyin.

Sayfa Düzenini Tasarlama

Şimdi, ortalığın biraz dağınık olduğunu fark etmiş olabilirsiniz.

Merak etmeyin, bunu düzeltebiliriz. Öğeleri tıklayıp sürükleyerek yerlerini değiştirebilirsiniz.

Sürüklediğinizde beliren o mavi çizgileri görüyor musunuz?

Eşyaları hizalamanıza yardımcı olurlar. 

Metninizi ve düğmenizi güzel görünene kadar yerlerini değiştirmeyi deneyin.

Köşelerdeki küçük karelere tıklayıp sürükleyerek de öğelerin boyutunu değiştirebilirsiniz. Metni büyütüp küçültebilir veya düğmeyi uzatabilirsiniz.

Temel İşlevsellik Ekleme

İş Akışlarını Anlamak

Tamam, uygulamamızın görünümünü güzelleştirdik.

Peki bunu nasıl başaracağız? Yapmak bir şey?

İşte tam bu noktada iş akışları devreye giriyor. İş akışı, bir dizi talimat gibidir.

Bu, birisi bir düğmeye tıkladığında veya başka bir şey yaptığında uygulamanızın ne yapacağını belirler.

Bir Düğmenin İşlev Görmesini Sağlamak

Butonumuza basit bir işlev kazandıralım.

Oluşturduğunuz butona tıklayın. Ardından, "İş Akışı" yazan sekmeyi arayın.

Ona tıklayın. Şimdi, "Etkinlik eklemek için buraya tıklayın" yazan bir düğme göreceksiniz.

" Bir etkinlik İş akışını başlatan şey budur. O düğmeye tıklayın.

"Öğe eylemleri"ni seçin ve ardından "Tıklayın".

Şimdi, uygulamaya butona tıklandığında ne yapacağını söylememiz gerekiyor.

Mesaj göstermesini sağlayalım. "Eylem ekle"ye tıklayın.

Uygulamanızın yapabileceği şeylerin bir listesini göreceksiniz. "Uyarı"yı bulun ve tıklayın. Metin kutusuna göstermek istediğiniz mesajı yazın. Örneğin, "Düğmeye tıkladınız!"

Şimdi, biri butona tıkladığında, mesajınızın yer aldığı küçük bir kutu açılacak. İşte ilk iş akışınız bu!

Giriş Alanları Ekleme

Giriş alanları, kullanıcıların bilgi girebileceği yerlerdir.

Bunları, insanların isimlerini, e-postalarını veya başka herhangi bir şeyi yazabilecekleri metin kutuları gibi düşünün.

Giriş alanı eklemek için, "Giriş" öğesine tıklayın ve sayfanıza sürükleyin.

Tıpkı metin ve düğmelerde olduğu gibi, onu da hareket ettirebilir ve boyutunu değiştirebilirsiniz.

Giriş alanının beklediği bilgi türünü de değiştirebilirsiniz.

Özellik düzenleyicisine bakın. Metin, sayı, e-posta veya şifre olup olmadığını seçebilirsiniz.

Sayfaları ve Gezinmeyi Bağlama

Birden Çok Sayfa Oluşturma

Çoğu uygulamanın birden fazla sayfası vardır.

Bir ana sayfanız, profil sayfanız veya ayarlar sayfanız olabilir.

Yeni bir sayfa oluşturmak için, "Yeni sayfa" veya benzeri bir ifade içeren bir düğme veya bağlantı arayın.

Tıklayın, yeni ve boş bir sayfa açılacaktır.

Ona "Profil" veya "Ayarlar" gibi bir isim verin.

Sayfaları Düğmelerle Bağlama

Şimdi, insanların sayfalar arasında geçiş yapabilmesini sağlayalım.

Bunu butonlar aracılığıyla yapabiliriz. İlk sayfanıza geri dönün.

Sayfaya bir düğme sürükleyin. Düğmenin iş akışına yeni bir eylem ekleyin.

Bu sefer "Navigasyon"u, ardından "Sayfaya git"i seçin.

Ardından, butonun insanları yönlendirmesini istediğiniz sayfayı seçin. 

Şimdi, biri o butona tıkladığında, diğer sayfaya yönlendirilecek.

Gezinme Menüsü Oluşturma

Çok sayıda sayfanız varsa, bir gezinme menüsüne sahip olmak faydalı olabilir.

Bu, uygulamanızın üst veya alt kısmında yer alan ve kullanıcıların sayfalar arasında kolayca geçiş yapmasını sağlayan bir düğme dizisidir.

Bir gezinme menüsü oluşturmak için, sayfanızın en üstüne bir 'Group' öğesi ekleyin.

Ardından, grubun içine birkaç düğme ekleyin.

Her düğmeyi, daha önce yaptığımız gibi, farklı bir sayfaya bağlayacak şekilde ayarlayın. Artık uygulamanızda kolayca gezinebilirsiniz.

Sayfalar Arasında Veri Aktarımı

Bazen bir sayfadan diğerine bilgi göndermek isteyebilirsiniz.

Örneğin, bir profil sayfanız varsa, kullanıcının adını ana sayfadan profil sayfasına göndermek isteyebilirsiniz.

Bunu yapmak için "sayfa parametreleri" adı verilen bir şey kullanmanız gerekiyor.

Başka bir sayfaya yönlendiren bir buton oluşturduğunuzda, URL'ye bir parametre ekleyebilirsiniz. 

Bu, sayfaya hangi bilgilerin gösterileceğini söyleyen küçük bir etiket eklemek gibidir.

Verileri gönderdiğiniz sayfada, bilgileri göstermek için parametreyi kullanabilirsiniz.

Örneğin, bir metin öğesi ekleyebilir ve parametreden kullanıcının adını göstermesini söyleyebilirsiniz.

Artık profil sayfasında doğru isim görünecek.

Uygulamanızı Test Etme ve Önizleme

Çalışmanızın Önizleme İşlemini Nasıl Yapabilirsiniz?

Tamam, birkaç sayfa oluşturdunuz ve birkaç işlem eklediniz. 

Şimdi uygulamanızın nasıl göründüğünü ve nasıl çalıştığını görmek istiyorsunuz.

Bubble bunu kolaylaştırıyor. "Önizleme" veya benzeri bir yazı bulunan bir düğme arayın.

Genellikle bir oynatma düğmesine benziyor.

Tıkladığınızda Bubble, tarayıcınızda uygulamanızı gösteren yeni bir sekme açacaktır.

Bu, uygulamanızı canlı olarak görmek gibi. Düğmelere tıklayabilir, alanlara veri yazabilir ve her şeyin planladığınız gibi çalışıp çalışmadığını görebilirsiniz.

Farklı Senaryoların Test Edilmesi

Uygulamanızı önizlediğinizde rastgele tıklamayın.

İnsanların uygulamanızı farklı şekillerde nasıl kullanabileceğini düşünmeye çalışın.

Her düğmeye tıklayın. Her alana bir şeyler yazın. Farklı şeyler yaptığınızda neler olduğunu görün.

Örneğin, bir giriş sayfanız varsa, yanlış şifre girmeyi deneyin.

Uygulamanızda bir hata mesajı görünüp görünmediğine bakın.

Verileri kaydeden bir düğmeniz varsa, verilerin doğru şekilde kaydedildiğinden emin olmak için veritabanınızı kontrol edin.

Sık Karşılaşılan Sorunların Giderilmesi

Bazen işler yolunda gitmeyebilir. Bu sorun değil.

Bu herkesin başına gelir. Bir sorunla karşılaştığınızda buna 'hata' denir. Bir hatayı düzeltmek için onu 'hata ayıklamanız' gerekir.

Bubble'da hataları bulmanıza yardımcı olabilecek bazı araçlar var.

"Hata Ayıklayıcı" adı verilen bir araç arayın.

Uygulamanız çalışırken arka planda neler olup bittiğini size gösterebilir. Bu, bir şeyin neden çalışmadığını anlamanıza yardımcı olabilir.

Sık karşılaşılan sorunlar şunlardır:

• Düğmeler hiçbir işe yaramıyor.
• Veriler doğru kaydedilmiyor.
• Sayfalar yüklenmiyor.
• Hata mesajları.

Balonun Alternatifleri

Başka bir şey arıyorum Baloncuk alternatifleri Kodsuz ve düşük kodlu uygulama geliştirme alanında mı?

İşte birkaç popüler seçenek:

• Daha yumuşak: Bu platform, elektronik tablolarınızı ve veritabanlarınızı (Airtable ve Google Sheets gibi) hızlı bir şekilde web uygulamalarına ve müşteri portallarına dönüştürmede mükemmeldir. Kullanım kolaylığı ve önceden oluşturulmuş şablonlarıyla bilinir.
• Vızıldak: Yüksek düzeyde özelleştirme imkanı sunan, karmaşık web uygulamaları oluşturmanıza olanak tanıyan güçlü bir kodsuz platform. Güçlü bir eklenti ekosistemine sahip ancak öğrenme eğrisi biraz dik olabilir.
• Süzülme: Bu araç sadeliğe odaklanarak, mobil uygulamaları doğrudan Google Sheets'ten oluşturmanıza olanak tanır. Dahili araçlar ve basit uygulamalar oluşturmak için harika bir araçtır.
• Softgen: Bu yapay zeka destekli platform, kullanıcı açıklamalarını yorumlayarak ve uygulamalar üreterek uygulama geliştirmeyi basitleştirmeyi amaçlıyor. Hızlı prototipleme ve yinelemeli iyileştirme için tasarlanmıştır.
• Adalo: Kullanımı kolay sürükle-bırak arayüzü ve önceden oluşturulmuş bileşenler için bir pazar yeri ile yerel mobil uygulamalar geliştirmeye odaklanmış, kod gerektirmeyen bir platform.

Çözüm

Başardınız! Artık Bubble'ın temel özelliklerini nasıl kullanacağınızı anladınız.

Bu rehber size hızlı bir giriş yaptı, ancak yapabileceğiniz daha çok şey var.

Tek bir satır koda bile ihtiyacınız yok.

Bir sonraki projenize hemen başlamak istiyorsanız, şu ipuçlarını unutmayın: Sürekli pratik yapın.

Aramaktan korkmayın. YouTube Daha detaylı bilgi için Bubble.io eğitimlerine de göz atabilirsiniz.

Yeni başlayanlar için çok sayıda kaynak ve en iyi uygulama örneği bulabilirsiniz.

Bubble pazaryeri, yardım bulmak için harika bir yer.

Sıkça Sorulan Sorular