İçindekiler[Saklamak][Göstermek]
- Bubble.io nedir?
- Görsel programlama nedir?
- Ne tür uygulamalar geliştirebilirsiniz?
Bubble ile uygulama oluşturma (Eğitim)+-
- 1. Başlarken
- 2. Veritabanını yapılandırma
- 3. İş akışları oluşturma
- 4. Bir haber hikayesi oluşturmak
- 5. Akışta dinamik içerik görüntüleme
- 6. Sayfalar arasında veri gönderme
- 7. Hikaye sayfasında dinamik içerik görüntüleme
- 8. Yayıncının makalesini görüntüleme
- 9. Takip eden yayıncılar
- 10. Ekleyebileceğiniz ek özellikler
- 11. Sonuç
- Artılar
- Eksiler
- Fiyatlandırma
- Sonuç
Son zamanlarda HTML, CSS ve JavaScript dışındaki web geliştirme yaklaşımlarıyla ilgileniyorum.
Büyüyen kodsuz ortamla birlikte, web uygulamaları geliştirmek için daha standart yaklaşımlara birkaç alternatif olduğunu keşfetmek şaşırtıcı değildi.
WordPress gibi neredeyse hiç kod içermeyen daha iyi bilinen CMS platformlarından bazılarına aşina olmalısınız. Ancak, web uygulamaları oluşturmak istiyorsanız, bu tür platformlar kısıtlayıcı görünebilir.
Burada sizi güçlü bir Bubble.io ile tanıştırıyorum. kodsuz araç bu, daha önce hiç olmadığı gibi web uygulamaları oluşturmanıza olanak tanır.
Hadi derinlemesine inceleyelim!
Nedir Kabarcık.io?
Bubble, görsel bir programlama dilini ve bir programlama dilini birleştiren teknik olmayan bir platformdur. web geliştirme çerçevesi.
Kullanıcılar, benzersiz çevrimiçi uygulamalar oluşturmak, veritabanlarını ve süreçleri değiştirmek, sayfa bileşenleri (görüntüler, metin, giriş formları, haritalar) eklemek ve arayüzlerini tasarlamak için bu programlama araçlarını kullanabilir.
Güçlü ürünler oluşturmanıza yardımcı olacak ideal şablonları, eklentileri ve hizmetleri keşfedebileceğiniz bir pazar yeridir.
Tipik bir programlama çerçevesi kurmak zorunda kalmadan, Bubble'ı kullanarak bir pazardan sosyal ağa ve bir CRM'ye (Müşteri İlişkileri Yönetimi) kadar her şeyi oluşturabilirsiniz.
Müşterilere, kullanıcı dostu bir arayüz ve bir işaretle ve tıkla düzenleyicisi kullanarak uygulamalarını oluşturma ve kişiselleştirme yeteneği verir.
Facebook, SQL, analitik ve ödeme uygulamaları gibi REST API sağlayan hizmetlerle birlikte kullanabilirsiniz. Kullanıcıların, tabletlerde ve mobil cihazlarda iyi görünmeleri için uygulamalarının işlevselliğini ve görünümünü iyileştirmeye zaman ayırmalarını sağlar.
Küçükten orta büyüğe tüm işletme büyüklükleri için uygundur; ve Windows, Mac ve web için erişilebilir.
Görsel programlama nedir?
Görsel programlama aslında kulağa nasıl geliyorsa öyledir. Kod yazarak manuel olarak programlamak yerine, bileşenleri tıklayıp sayfalara sürükleyerek grafiksel olarak yaparsınız.
Bu kısa açıklamaya aldanmayın.
Çevrimiçi olarak karşılaştığınız diğer çerez kesici uygulamalara veya web sitesi oluşturma araçlarına benzemez. Çoğu uygulama oluşturucu, temel şablonlara güvenmenizi ve son derece sınırlı işlevselliğe sahip olmanızı gerektirir; yalnızca belirli türden uygulamalar geliştirmenize ve kişiselleştirmenizi sınırlamanıza izin verirler.
Bubble'da "görsel programlama" ve "sürükle ve bırak" kavramları kolay görünse de, son derece güçlüdür.
Görsel programlama ortamı, yalnızca metin, grafik, girişler ve daha fazlası gibi nesneleri bir sayfaya sürüklemenize izin vermekle kalmaz, aynı zamanda bu öğelerin ne yapacağını yapılandırmanıza da olanak tanır.
Kabarcık ne yapar?
Bubble'ın birincil amacı, herkesin kod yazmak zorunda kalmadan web uygulamaları oluşturmasını sağlamaktır.
Bununla birlikte, bu kolayca hatırlanan bir hedef ifadesi sağlarken, hikayenin önemli bir kısmını dışarıda bırakır. Fikirden pazara giden yol, sadece kod satırları oluşturmaktan daha karmaşıktır.
Geleneksel geliştirmede uygulamanın oluşturulması, büyütülmesi ve bakımının belirli bölümlerinde çalışan yüksek düzeyde eğitimli profesyonellerden oluşan bir ekip gerekir. Bunu düşün.
Her uygulama ne gerektirir?
- Hiç kimsenin verilere yetkisiz erişimi olmadığından emin olmak için güvenlik.
- Öğeler, makaleler ve sosyal medya güncellemeleri gibi bilgileri depolamak ve almak için bir veritabanı.
- Kullanıcı tabanının ve veri hacminin engelsiz gelişimini sağlamak için ölçeklenebilirlik.
- Uygulamayı çekici ve kullanımı kolay hale getirmek için hoş bir kullanıcı arayüzü.
- Çeşitli hizmet ve sistemlerle entegrasyon.
Kabarcık, bir kodlayıcıdan çok daha fazlasının yerini alır. Tüm bu hizmetleri görsel olarak çekici ve son derece otomatik bir şekilde sağlayarak, basit olmasa da tek bir kişinin her şeyi halletmesini mümkün kılar.
Önceki kodsuz platformlar, kodlamayı çeşitli şekillerde değiştirmeye çalışmıştı. Konsepti, bir uygulamanın pazara ulaşması için mümkün olduğunca çok engeli kaldırmak, duyarlı tasarım ve animasyonlardan barındırma, sürüm dağıtımı, güvenlik ve veritabanı işlemlerine kadar her şeyi ele almaktır.
Bubble'ı diğer hizmetlere bağlamak için API bağlayıcısını kullanma
API Bağlayıcısı muhtemelen piyasadaki en önemli eklentidir. Adından da anlaşılacağı gibi, bu, eylemleri ve verileri paylaşmak için diğer uygulamalara ve hizmetlere bağlanmanıza olanak tanır.
Bunun nasıl çalıştığının teknik ayrıntılarına girmek yerine, API'lerin neler başarabileceğine ilişkin şu örnekleri göz önünde bulundurun:
- Erişim elde etmek makine öğrenme görüntü tanıma ve çeviri gibi yöntemler.
- Dünyanın herhangi bir yerinden en son hava durumu bilgilerini alın.
- Bubble'da bir etkinlik tetiklendiğinde, CRM'nizde bir müşteri adayı oluşturmak veya Google Takviminizde bir randevu oluşturmak gibi sistemler arasında bilgi alışverişi yapılır.
- Dünyanın herhangi bir yerinde bir uçuş veya otel konaklama rezervasyonu yapın.
- Google Haritalar'daki herhangi bir şirketin telefon numarasını, konumunu, fotoğraflarını, logosunu ve incelemelerini alın.
Yerel özellikleri geliştirmek için eklentileri kullanma
Teknik olarak JavaScript kod modüllerini, CSS'yi ve HTML'yi işlevsel bir düğümde karıştırır. JS.JSON'da yazılan uygulama, kendi dilinin temelini oluşturur.
Uygulamalar oluşturmak için bu terminolojiyi tam olarak anlamanız gerekmese de, önemli bir gerçeği belirtirler: Bilinen ve kabul edilen web standartlarına bağlı kalır ve geliştiricilerin yerel işlevselliğini önemli ölçüde geliştirmesine olanak tanır.
Bu, temel işlevsellik için yüzlerce ücretsiz ve ücretli uzantının mevcut olduğu eklenti sitesinde zaten görülüyor. Ayrıca, temel yeteneklerinin yetersiz kaldığı bir noktaya gelirseniz, sizin için özel bir çözüm sunmaya istekli çok sayıda JavaScript uzmanı olduğu anlamına gelir.
Ne tür uygulamalar geliştirebilirsiniz?
Bazıları aşağıda verilen çok çeşitli uygulamalar oluşturabilirsiniz.
- Bir topluluğa sahip özel pazarlar için uygulamalar.
- Çeşitli sektörlerdeki iş ilanları için uygulamalar.
- Hastane personeli için yazılım.
- Fiziksel mağazalar için satış noktası yazılımı.
- Beyaz etiketli diş ofis yazılımı.
- Kişisel işletme envanteri ve müşteri hizmetleri yazılımı.
- Broker ve müşteriye yönelik gayrimenkul birleştirme uygulamaları.
- Piyasadaki (ve hatta teknelerdeki) etkinlikler ve kurslar için uygulamalar.
- Profesyonel sertifikalar, dahili test uygulamaları gerektirir.
- İlk müdahale ekipleri için başvurular.
- Dahili kullanım için çalışan yönetimi yazılımı.
Dürüst olmak gerekirse, platform her şeyi yapmak için tasarlanmamıştır. Karmaşık görseller ve hareket içeren bir oyun uygulaması tasarlıyorsanız bu ideal bir seçim olmayabilir. Ayrıca, yerel bir uygulama (uygulama mağazaları için) oluşturuyorsanız, onu başka bir üçüncü taraf hizmetiyle entegre etmeniz gerekir.
anahtar özellikler
Bubble özelliklerle dolu. Hepsini burada ele alamayacağız, ancak en önemlilerini ele almaya çalışacağız.
1. eklentiler
İnternet'teki çok sayıda araçtan işlevselliği bilgisayarınıza dahil etmenize olanak tanır. web uygulaması. Örneğin, kullanıcılarınızın Facebook hesaplarını kullanarak giriş yapmasını istiyorsanız, bunu yapmak için Facebook eklentisini kullanabilirsiniz.
2. Geliştirme
Masaüstü ve mobil web tarayıcıları için dinamik, çok kullanıcılı uygulamaların yanı sıra Instagram veya Airbnb'ye benzer bir site oluşturmak için gereken tüm araçları oluşturmanıza olanak tanır.
3. Tasarım
Başkalarına göstermekten memnuniyet duyacağınız bir ürüne son rötuşları yapmak için mobil uyumlu düzenler ve dinamik içerik oluşturabilirsiniz.
4. Barındırma
Sunucu bakımı, altyapı veya işlemler hakkında tekrar tekrar endişelenmenize gerek yok.
Sizin için güvenli ve güvenli bir şekilde dağıtım ve barındırma ile ilgilenir. Kullanıcı sayısı, trafik hacmi ve veri depolama sınırsızdır.
Bubble ile uygulama oluşturma (Eğitim)
Şimdi harekete geçelim ve Bubble'da nasıl haber uygulaması oluşturabileceğinizi keşfedelim.
1. Başlarken
Başlamak için önce yapmalısınız Bubble'da ücretsiz bir hesap için kaydolun.
Platformumuzu şekillendirmek için Bubble'ın görsel tasarım aracını kullanarak başlayacağız. Kullanıcı arayüzü. Dahil edilecek önemli sayfalardan bazıları aşağıda verilmiştir:
- Yükleme sayfası – Yayıncıların makaleler geliştirip dağıtacağı bir web sitesi.
- Ana sayfa – En son yayınlanan hikayelerin bir listesi görüntülenir.
- Anlatı sayfası – Her benzersiz hikayenin bulunabileceği bir sayfa.
- Yayıncı sayfası - Belirli bir yayıncının masallarının listesini görüntüleyen bir sayfa.
2. Veritabanını yapılandırma
Ürününüzün ekranını yerleştirdikten sonra, uygulamanızı besleyecek veri alanlarını oluşturmaya odaklanabilirsiniz. Ürününüzün temelindeki iş akışlarını bağlamak için bu alanları kullanacağız.
Bu örnek için, her haber parçası için iki farklı veri türü oluşturacağız. Bir veri türü, bir hikayenin temel gerçeklerini (başlık, öne çıkan resim ve yayıncı gibi) içerirken, diğer veri türü, tüm anlatının kendisi gibi daha büyük içerik dosyalarını içerecektir.
Bunları ayrık veri türleri olarak tanımlayarak, Bubble editörünün üretmesi gereken malzeme miktarını sınırlayarak, yalnızca gerektiğinde gerekli bilgileri yükleyebiliriz.
Aşağıdaki veri türleri ve alanları oluşturulacaktır:
Veri tipi: kullanıcı
Alanlar:
- Name
- Aşağıdaki yayıncılar, yayıncıların bir listesidir. Önemli not: Farklı bir veri türüne dayalı bir liste olarak bir alan oluşturmak, ekstra alanlar oluşturmak zorunda kalmadan, tüm temel veri alanlarını zahmetsizce birleştirmenize olanak tanır.
Veri tipi: Öykü
Alanlar:
- Başlık
- Özellikli resim
- yazar
- Kategoriler
- Publisher
- Hikaye içeriği
Veri tipi: Hikaye içeriği
Alanlar:
- Hikaye içeriği
Veri tipi: Publisher
Alanlar:
- Name
- Logo
- Takipçiler
3. İş akışları oluşturma
Artık uygulamanızın tasarımını ve veritabanını düzenlediğinize göre, her şeyi bir araya getirmeye ve çalıştırmaya başlamanın zamanı geldi.
Bubble'da bunu gerçekleştirmenin birincil yöntemi iş akışlarıdır.
Her iş akışı, bir olay meydana geldiğinde (örneğin, bir kullanıcı bir düğmeyi tıklattığında) ve ardından yanıt olarak bir dizi "eylem" gerçekleştirdiğinde (örneğin, "kullanıcıyı kaydettir", "veritabanında değişiklik yap" vb.) .
4. Bir haber hikayesi oluşturmak
Sunacağımız ilk özellik, yayıncıların siteye haber yazıp göndermelerine olanak tanıyan bir araçtır.
Yükleme sayfasında, veri tabanımıza veri girmek için uygulanacak birçok girdi öğesini dahil ederek başlayacağız. Metin girişleri, bir resim yükleyici ve bir açılır menü bu alanlara örnektir.
Dinamik seçeneklerin bir listesini görüntülemek için yayıncı açılır menüsünü de özelleştirmemiz gerekecek. Her yeni makale bir yayıncının toplam makale listesine ekleneceğinden, veritabanımızdan mevcut bir yayıncıyı seçmemiz gerekecek.
Bu açılır menüyü ayarlarken, yayıncı olmak için seçeneklerin türünü seçeceğiz.
Bunu takiben, veri kaynağımız veri tabanımızı tarayacak ve tüm güncel yayınların bir listesini döndürecektir. Son olarak, kaynak başlığını yayıncının adını içerecek şekilde değiştireceğiz.
Bir yazar, sayfadaki her girişe gerekli bilgileri girdikten sonra, yeni bir hikaye oluşturmak için yayınla düğmesine tıklar.
Ardından, veritabanınızda, veri türü anlatı olarak ayarlanmış yeni bir şey yaratacaksınız.
Ardından veritabanımızı gerekli alanlarla doldurmaya başlamamız gerekecek. Sayfadaki giriş bileşenlerinin her birini ilgili veritabanı sütunlarına bağlayın.
İlk olarak, sonunda masalın kendisine bağlanacak olan hikaye içerik türünü yaratacağız.
Sonra, bu prosedüre başka bir aşama ekleyeceğiz, başka bir şey üreteceğiz - bu sefer hikayenin kendisi.
Geliştirdiğimiz ilk anlatı materyalini bu masalla entegre ederek bu verileri zahmetsizce platformunuza entegre etmeniz mümkün.
Bu prosedür her etkinleştirildiğinde yeni bir hikaye üretilecektir.
5. Akışta dinamik içerik görüntüleme
Yayıncılar mobil uygulamanıza materyal yüklemeye başladığında, ana sayfanızda her makaleyi dinamik bir liste olarak gösteren mantığı oluşturmaya başlamamız gerekecek. Bu, yinelenen grup öğemizi kullanarak gerçekleştirilebilir.
Yinelenen gruplar, dinamik malzeme listesini sunmak ve yenilemek için veritabanınızla birlikte çalışır.
Yinelenen bir grup uygularken, önce öğeyi veritabanınızdaki bir veri türüne bağlamanız gerekir.
Bu durumda, malzeme türünü masal olarak sınıflandıracaksınız. Ayrıca veri kaynağını, veritabanınızdaki tüm tabloların bir listesi olarak sağlamanız gerekir.
Ayrıca bu yinelenen grubu, listeyi ters kronolojik sırada göstererek her hikayenin başlangıç tarihine göre düzenleyeceğiz. Artık her ızgarada görünecek olan dinamik malzemeyi düzenlemeye başlayabilirsiniz.
Üst satırı görüntülemek istediğiniz uygun malzemeyle doldurmanız yeterlidir; bu güçlü öğe, kalan sütunları mevcut veritabanınızdaki verilerle dolduracaktır.
6. Sayfalar arasında veri gönderme
Yinelenen bir grubun her satırında olaylar oluşturmak da mümkündür. Platformunuz için gezinme özellikleri geliştirirken bu işlevsellik kullanışlı olacaktır.
Haber uygulamamızın ana sayfası, yayıncı, öne çıkan bir resim ve hikaye başlığı dahil olmak üzere yalnızca her hikayenin bir önizlemesini gösterir.
Ancak, kullanıcı hikaye sayfasına tıklayana kadar bir makalenin tüm içeriğini görüntülemez. Bu materyali görüntülemek için sayfalar arasında veri iletmek için iş akışı düzenleyicimizi kullanacağız.
Başlamak için, bir hikayenin resmi tıklandığında bir kullanıcıyı hikaye sayfasına gönderen bir süreç oluşturun.
Bu işlemi geliştirirken bir kullanıcıyı başka bir sayfaya aktarmak için bir gezinme olayı kullanın.
Açılır menüden anlatı sayfası olacak hedef sayfa türünü seçin. Daha sonra Bubble editörünün hangi benzersiz hikayeyi göstereceğini anlaması için bu sayfaya daha fazla bilgi vermeniz gerekecek.
Vermeniz gereken bilgiler mevcut hücre hikayesinden geliyor.
7. Hikaye sayfasında dinamik içerik görüntüleme
Bir kullanıcı belirli bir hikaye sayfasına gönderildiğinde, bu olay verilerini kolayca alabilir ve ilgili materyali anlatıdan gösterebilirsiniz.
Bu işlevi oluşturmak için önce hedef sayfa türünün iş akışı aracılığıyla ilettiğiniz veri özelliğiyle eşleşip eşleşmediğini kontrol etmelisiniz. Bu durumda, hikaye sayfasını bir hikaye özelliği ile ilişkilendirmeniz gerekir.
Bir sayfadaki içerik türünü kategorilere ayırarak mevcut kaynaklardan uygun verileri kolayca çekip iletebilir.
Artık tek bir tablodan bilgi görüntüleyen alanlara dinamik malzeme eklemeye başlayabilirsiniz.
8. Yayıncının makalesini görüntüleme
Bir kullanıcı, bir haber öğesini okuduktan sonra, yayıncının tüm makale kataloğunu incelemeyi seçebilir. Bir yayıncı veri türü geliştirdiyseniz, yayıncılar için ayrı bir sayfa oluşturmak, orijinal ana sayfamızı oluşturmak kadar basittir.
Bu sayfada, sayfa türünü yayıncı olarak ayarlayarak başlamamız gerekecek.
Ardından, yinelenen grubu ana sayfadan kopyalayın ve ayarları düzenleyin.
Bu durumda, yinelenen grubumuzun veri kaynağı, yayıncısı geçerli sayfa yayıncısı olan tüm mevcut makaleleri arayacaktır.
9. Takip eden yayıncılar
MVP'miz için oluşturacağımız üçüncü temel özellik, platformda bir yayıncıyı takip etme yeteneğidir. Yayıncı sayfasına bir takip düğmesi ekleyeceğiz. Bu simgeye tıkladığımızda, bir şeyi değiştiren yeni bir süreç başlatacağız.
Geçerli sayfa yayıncısını aşağıdaki yayınlar listesine eklemek, mevcut kullanıcıyı değiştirecektir.
Bunu takiben, mevcut kullanıcıyı ekleyerek mevcut sayfa yayıncısının takipçi listesini güncellememiz gerekecek.
10. Ekleyebileceğiniz ek özellikler
Artık özel veri alanları oluşturma ve dinamik bilgiler sunma konusunda rahat olduğunuza göre, ürününüz için oluşturduğunuz deneyimlerle yaratıcı olabilirsiniz. Ayrıca şunları da ekleyebilirsiniz:
- Kullanıcıların içeriği daha sonra okumak üzere kaydetmesine olanak tanıyan bir özellik oluşturun.
- Her parçanın altında, yinelenen bir önerilen makaleler koleksiyonu sağlayın.
- İnsanların sitede yeni içerik bulmasına yardımcı olacak bir arama aracı oluşturun.
11. Sonuç
Son uygulamanız şöyle görünecek.
Artılar
- Birçok API ve eklentiye bağlanma yeteneği.
- Kullanımı kolay, kod gerektirmeyen bir uygulama.
- Programlama deneyimi olmayan kişiler bundan faydalanacaktır.
- Hem çok yönlü hem de güçlü tasarım araçları.
- Hızlı sorgu işleme.
Eksiler
- Artan güvenilirlik.
- Veri işleme hızı yavaştır.
- Performans kısıtlı.
Fiyatlandırma
Ücretsiz plan, platform hakkında bilgi edinmenize ve uygulamanızı geliştirmenize olanak tanır.
Ücretli abonelikler, aşağıda listelenen beyaz etiketleme, özel alan, Bubble API'ye erişim ve ayrılmış sunucu kapasitesi gibi ekstraları içerir.
- Kişisel – aylık 25$ (yıllık olarak ödenir) veya aylık 29$ (aylık olarak ödenir).
- Profesyonel – 115 $/ay (yıllık olarak ödenir) veya 129 $/ay (aylık olarak ödenir).
- Üretim – 475$/ay (yıllık olarak ödenir) veya 529$/ay (aylık olarak ödenir).
Bubble'ı Ücretsiz Kullanmaya Başlayın
Sonuç
Bubble, yalnızca bilgi gösterebilen veya minimum kullanıcı arayüzüne sahip web uygulamaları oluşturmak için mükemmel bir alternatiftir.
Kullanımı oldukça basittir ve Bubble tarafından sağlanan eğitimler son derece faydalıdır. Tercihlerinize göre web uygulamaları tasarlamanıza olanak tanıyan çevrimiçi görsel düzenleyicisi.
Ve en iyi yanı, herhangi bir programlama deneyimine veya uzmanlığına ihtiyacınız olmamasıdır. Bubble, kodlamayı bilseniz de bilmeseniz de herkes için uygundur.
Bununla birlikte, ön uç dillerini önceden anlamak size bir avantaj sağlayabilir çünkü olay işleme konusunda ne yaptığını hızlı bir şekilde anlamanıza olanak tanır.
Peki, Bubble'ın yetenekleri hakkında ne düşünüyorsunuz?
Bize yorum olarak bildirin!
Arbehi
Bubble.io aracını kullanarak ürün satmak için bir mağaza oluşturulabilir mi?