Saya baru-baru ini tertarik pada pendekatan pengembangan web selain HTML, CSS, dan JavaScript.
Dengan lanskap tanpa kode yang berkembang, tidak mengherankan jika menemukan bahwa ada beberapa alternatif untuk pendekatan yang lebih standar untuk mengembangkan aplikasi web.
Anda pasti akrab dengan beberapa platform CMS yang lebih terkenal, seperti WordPress yang cukup banyak bebas kode. Namun, jika Anda ingin membuat aplikasi web, platform semacam itu mungkin tampak membatasi.
Di sini saya memperkenalkan Anda ke Bubble.io, yang kuat alat tanpa kode yang memungkinkan Anda membangun aplikasi web yang belum pernah ada sebelumnya.
Mari kita telusuri lebih dalam!
Apa itu gelembung.io?
Bubble adalah platform non-teknis yang menggabungkan bahasa pemrograman visual dan a kerangka kerja pengembangan web.
Pengguna dapat menggunakan alat pemrograman ini untuk membangun aplikasi online yang unik, mengubah basis data dan proses, menambahkan komponen halaman (gambar, teks, formulir input, peta), dan mendesain antarmuka mereka.
Ini adalah pasar tempat Anda dapat menemukan templat, plugin, dan layanan yang ideal untuk membantu Anda membangun produk yang kuat.
Tanpa harus menyiapkan kerangka kerja pemrograman biasa, Anda dapat membuat apa saja mulai dari pasar hingga jejaring sosial hingga CRM (Manajemen Hubungan Pelanggan) menggunakan Bubble.
Ini memberi pelanggan kemampuan untuk membuat dan mempersonalisasi aplikasi mereka menggunakan antarmuka yang ramah pengguna dan editor titik-dan-klik.
Anda dapat menggunakannya bersama dengan layanan yang menyediakan REST API, seperti Facebook, SQL, analytics, dan aplikasi pembayaran. Ini memungkinkan pengguna untuk mencurahkan waktu untuk meningkatkan fungsionalitas dan tampilan aplikasi mereka sehingga terlihat bagus di tablet dan perangkat seluler.
Ini sesuai untuk semua ukuran bisnis, dari kecil hingga menengah hingga besar; dan dapat diakses untuk Windows, Mac, dan web.
Apa itu pemrograman visual?
Pemrograman visual pada dasarnya adalah seperti apa kedengarannya. Alih-alih memprogram secara manual dengan menulis kode, Anda melakukannya secara grafis dengan mengklik dan menyeret komponen ke dalam halaman.
Jangan terkecoh dengan deskripsi singkat itu.
Ini tidak seperti aplikasi pemotong cookie atau alat pembuatan situs web lainnya yang pernah Anda temui online. Sebagian besar pembuat aplikasi mengharuskan Anda mengandalkan template dasar dan memiliki fungsionalitas yang sangat terbatas; mereka hanya memungkinkan Anda untuk mengembangkan jenis aplikasi tertentu dan membatasi personalisasi Anda.
Meskipun gagasan "pemrograman visual" dan "menyeret dan menjatuhkan" tampak mudah di Bubble, itu sangat kuat.
Lingkungan pemrograman visualnya tidak hanya memungkinkan Anda untuk menyeret objek seperti teks, grafik, input, dan lainnya ke halaman, tetapi juga memungkinkan Anda untuk mengonfigurasi apa yang dilakukan elemen tersebut.
Apa yang Gelembung lakukan?
Tujuan utama Bubble adalah memungkinkan siapa saja membuat aplikasi web tanpa harus menulis kode.
Namun, sementara ini memberikan pernyataan tujuan yang mudah diingat, itu meninggalkan sedikit kisah yang signifikan. Jalan dari ide ke pasar lebih rumit daripada hanya membuat baris kode.
Sebuah tim profesional yang sangat terlatih yang bekerja pada bagian tertentu dari pembuatan, pertumbuhan, dan pemeliharaan aplikasi diperlukan dalam pengembangan konvensional. Pertimbangkan ini.
Apa yang dibutuhkan setiap aplikasi?
- Keamanan untuk memastikan bahwa tidak ada orang yang memiliki akses tidak sah ke data.
- Basis data untuk menyimpan dan mengambil informasi seperti item, artikel, dan pembaruan media sosial.
- Skalabilitas untuk memungkinkan pengembangan basis pengguna dan volume data tanpa hambatan.
- Antarmuka pengguna yang menyenangkan untuk membuat aplikasi menarik dan mudah digunakan.
- Integrasi dengan berbagai layanan dan sistem.
Gelembung menggantikan lebih dari sekadar pembuat kode. Ini menyediakan semua layanan ini dengan cara yang menarik secara visual dan sangat otomatis, membuatnya dapat dibayangkan, jika tidak sederhana, bagi satu orang untuk menangani semuanya.
Sementara platform tanpa kode sebelumnya telah mencoba mengganti pengkodean dengan berbagai cara. Konsepnya adalah menghilangkan sebanyak mungkin hambatan bagi aplikasi untuk menjangkau pasar, menangani semuanya mulai dari desain dan animasi responsif hingga hosting, penerapan versi, keamanan, dan operasi basis data.
Menggunakan konektor API untuk menghubungkan Bubble ke layanan lain
Konektor API-nya kemungkinan merupakan plugin paling penting di pasar. Sesuai namanya, ini memungkinkan Anda terhubung ke aplikasi dan layanan lain untuk berbagi tindakan dan data.
Daripada mempelajari spesifikasi teknis tentang cara kerjanya, pertimbangkan contoh-contoh berikut tentang apa yang mungkin dicapai oleh API:
- Mendapatkan akses ke Mesin belajar metode seperti pengenalan gambar dan terjemahan.
- Dapatkan informasi cuaca terbaru dari mana saja di bumi.
- Saat sebuah acara dipicu di Bubble, informasi dipertukarkan di seluruh sistem, seperti membangun prospek di CRM Anda atau janji temu di Google Kalender Anda.
- Pesan penerbangan atau penginapan hotel di mana saja di dunia.
- Dapatkan nomor telepon, lokasi, foto, logo, dan ulasan untuk perusahaan mana pun di Google Maps.
Menggunakan plugin untuk meningkatkan fitur asli
Secara teknis, ini menggabungkan modul kode JavaScript, CSS, dan HTML ke dalam simpul fungsional. Aplikasi yang ditulis dalam JS.JSON berfungsi sebagai dasar untuk bahasanya sendiri.
Meskipun Anda tidak perlu sepenuhnya memahami terminologi tersebut untuk membangun aplikasi, mereka menunjukkan satu fakta kunci: itu mematuhi standar web yang dikenal dan diakui, memungkinkan pengembang untuk meningkatkan fungsionalitas aslinya secara signifikan.
Ini sudah terlihat di situs plugin, di mana ratusan ekstensi gratis dan berbayar untuk fungsionalitas dasar tersedia. Ini juga menyiratkan bahwa jika Anda mencapai titik ketika kemampuan dasarnya tidak mencukupi, ada banyak pakar JavaScript yang bersedia memberikan solusi khusus untuk Anda.
Jenis aplikasi apa yang dapat Anda kembangkan?
Anda dapat membuat berbagai macam aplikasi, beberapa di antaranya diberikan di bawah ini.
- Aplikasi untuk pasar khusus dengan komunitas.
- Aplikasi untuk papan pekerjaan di berbagai sektor.
- Software untuk staf rumah sakit.
- Perangkat lunak point-of-sale untuk toko fisik.
- Perangkat lunak kantor gigi dengan label putih.
- Inventaris bisnis pribadi dan perangkat lunak layanan pelanggan.
- Aplikasi agregasi real estat yang dihadapi broker dan klien.
- Aplikasi untuk acara dan kursus di pasar (dan bahkan kapal).
- Sertifikat profesional memerlukan aplikasi pengujian internal.
- Aplikasi untuk responden pertama.
- Perangkat lunak manajemen karyawan untuk penggunaan internal.
Sejujurnya, platform ini tidak dirancang untuk melakukan segalanya. Ini mungkin bukan pilihan ideal jika Anda mendesain aplikasi game dengan visual dan gerakan yang kompleks. Selain itu, jika Anda membuat aplikasi asli (satu untuk toko aplikasi), Anda harus mengintegrasikannya dengan layanan pihak ketiga lainnya.
Fitur Utama
Gelembung penuh dengan fitur. Kami tidak akan dapat membahas semuanya di sini, tetapi kami akan mencoba membahas yang paling penting.
1. Plugin
Ini memungkinkan Anda untuk memasukkan fungsionalitas dari berbagai alat di Internet ke dalam . Anda aplikasi web. Misalnya, jika Anda ingin pengguna Anda masuk menggunakan akun Facebook mereka, Anda dapat menggunakan plugin Facebook untuk melakukannya.
2. Mengembangkan
Ini memungkinkan Anda membuat aplikasi multi-pengguna yang dinamis untuk browser web desktop dan seluler, serta semua alat yang diperlukan untuk membangun situs yang mirip dengan Instagram atau Airbnb.
3. Rancang Bangun
Anda dapat membuat tata letak yang ramah seluler dan konten dinamis untuk memberikan sentuhan akhir pada produk yang akan dengan senang hati Anda pamerkan kepada orang lain.
4. Hosting
Tidak perlu khawatir tentang pemeliharaan server, infrastruktur, atau operasi lagi dan lagi.
Ini menangani penyebaran dan hosting untuk Anda dengan cara yang aman dan terjamin. Jumlah pengguna, volume lalu lintas, dan penyimpanan data semuanya tidak dibatasi.
Membangun aplikasi dengan Bubble (Tutorial)
Sekarang mari beraksi dan jelajahi cara membuat aplikasi berita di Bubble.
1. Memulai
Untuk memulai, Anda harus terlebih dahulu daftar untuk mendapatkan akun gratis di Bubble.
Kami akan mulai dengan menggunakan alat desain visual Bubble untuk membentuk platform kami user interface. Beberapa halaman kunci untuk disertakan diberikan di bawah ini:
- Unggah halaman – Situs web tempat penerbit akan mengembangkan dan mendistribusikan artikel.
- Beranda – Daftar cerita yang baru diterbitkan akan ditampilkan.
- Halaman naratif – Halaman di mana setiap cerita unik dapat ditemukan.
- Halaman penerbit- Halaman untuk menampilkan daftar cerita dari penerbit tertentu.
2. Konfigurasi basis data
Setelah Anda menata tampilan produk Anda, Anda dapat fokus membangun bidang data yang akan mendorong aplikasi Anda. Kami akan menggunakan bidang ini untuk menautkan alur kerja yang mendasari produk Anda.
Untuk contoh ini, kami akan membuat dua tipe data berbeda untuk setiap berita. Satu tipe data akan berisi fakta dasar sebuah cerita (seperti judul, gambar unggulan, dan penerbit), sedangkan tipe data lainnya akan berisi file konten yang lebih besar seperti keseluruhan narasi itu sendiri.
Dengan mendefinisikannya sebagai tipe data diskrit, kami hanya dapat memuat informasi yang diperlukan saat diperlukan, membatasi jumlah materi yang perlu diproduksi oleh editor Gelembung.
Tipe data dan bidang berikut akan dibuat:
Tipe data: Pengguna
Fields:
- Nama
- Penerbit berikut adalah daftar penerbit. Catatan penting: Membuat bidang sebagai daftar berdasarkan tipe data yang berbeda memungkinkan Anda untuk menggabungkan semua bidang data penting dengan mudah tanpa harus membuat bidang tambahan.
Tipe data: Cerita
Fields:
- Judul
- Gambar unggulan
- Penulis
- Kategori
- Publisher
- Konten cerita
Tipe data: Konten cerita
Fields:
- Konten cerita
Tipe data: Publisher
Fields:
- Nama
- logo
- Pengikut
3. Membangun alur kerja
Sekarang setelah Anda mengatur desain dan database aplikasi Anda, saatnya untuk mulai menyusun semuanya dan membuatnya bekerja.
Alur kerja adalah metode utama untuk mencapai ini di Bubble.
Setiap alur kerja terjadi ketika suatu peristiwa terjadi (misalnya, pengguna mengklik tombol) dan kemudian melakukan serangkaian "tindakan" sebagai tanggapan (misalnya, "mendaftarkan pengguna", "membuat perubahan ke database", dan seterusnya) .
4. Membuat berita
Fitur pertama yang akan kami tawarkan adalah alat yang memungkinkan penerbit untuk menulis dan memposting berita ke situs.
Pada halaman upload, kita akan mulai dengan memasukkan banyak item input yang akan diterapkan untuk memasukkan data ke dalam database kita. Input teks, pengunggah gambar, dan pilihan tarik-turun adalah contoh dari bidang ini.
Kami juga perlu menyesuaikan menu tarik-turun penerbit untuk menampilkan daftar opsi dinamis. Karena setiap artikel baru akan ditambahkan ke daftar total artikel penerbit, kami harus memilih penerbit yang ada dari database kami.
Saat menyetel menu tarik-turun ini, kami akan memilih jenis opsi untuk menjadi penerbit.
Setelah itu, sumber data kami akan memindai database kami dan mengembalikan daftar semua publikasi saat ini. Terakhir, kami akan mengubah teks sumber untuk menyertakan nama penerbit.
Setelah seorang penulis memasukkan informasi yang diperlukan ke dalam setiap entri di halaman, mereka akan mengklik tombol terbitkan untuk menghasilkan kisah baru.
Kemudian, di dalam database Anda, Anda akan membuat hal baru dengan tipe data yang disetel ke naratif.
Kemudian kita harus mulai mengisi database kita dengan bidang yang diperlukan. Hubungkan setiap komponen input pada halaman ke kolom database masing-masing.
Pertama, kita akan membuat tipe konten cerita, yang pada akhirnya akan ditautkan ke cerita itu sendiri.
Selanjutnya, kita akan menambahkan tahap lain ke prosedur ini, menghasilkan sesuatu yang lain – kali ini, kisah itu sendiri.
Dimungkinkan untuk mengintegrasikan data ini dengan mudah di seluruh platform Anda dengan mengintegrasikan materi naratif pertama yang kami kembangkan dengan kisah ini.
Sebuah kisah baru akan dihasilkan setiap kali prosedur ini diaktifkan.
5. Menampilkan konten dinamis di feed
Setelah penerbit mulai mengunggah materi ke aplikasi seluler Anda, kami harus mulai membuat logika di beranda Anda yang menampilkan setiap artikel sebagai daftar dinamis. Ini dapat dicapai dengan menggunakan elemen grup berulang kami.
Grup berulang bekerja dengan database Anda untuk menyajikan dan menyegarkan daftar materi dinamis.
Saat menerapkan grup berulang, Anda harus terlebih dahulu menautkan elemen ke tipe data di database Anda.
Dalam hal ini, Anda akan mengkategorikan jenis materi sebagai dongeng. Anda juga harus menyediakan sumber data sebagai daftar semua tabel di database Anda.
Kami juga akan mengatur grup berulang ini berdasarkan tanggal mulai setiap cerita, menampilkan daftar dalam urutan kronologis terbalik. Anda sekarang dapat mulai mengatur materi dinamis yang akan muncul di setiap kisi.
Cukup isi baris atas dengan materi yang sesuai yang ingin Anda tampilkan, dan elemen kuat ini akan mengisi kolom yang tersisa dengan data dari database Anda saat ini.
6. Mengirim data antar halaman
Hal ini juga memungkinkan untuk membangun peristiwa dalam setiap baris dari kelompok berulang. Saat mengembangkan fitur navigasi untuk platform Anda, fungsi ini akan berguna.
Beranda aplikasi berita kami hanya menampilkan pratinjau setiap berita, termasuk penerbit, gambar unggulan, dan judul berita.
Namun, itu tidak menampilkan seluruh konten artikel sampai pengguna mengklik ke halaman cerita. Kami akan menggunakan editor alur kerja kami untuk mengirimkan data antar halaman untuk menampilkan materi ini.
Untuk memulai, buat proses yang mengarahkan pengguna ke halaman cerita saat gambar cerita diklik.
Gunakan acara navigasi untuk mentransfer pengguna ke halaman lain saat mengembangkan proses ini.
Pilih jenis halaman tujuan untuk menjadi halaman naratif dari menu drop-down. Anda kemudian harus memberikan informasi lebih lanjut ke halaman ini sehingga editor Gelembung memahami kisah unik mana yang akan ditampilkan.
Informasi yang perlu Anda berikan berasal dari kisah sel saat ini.
7. Menampilkan konten dinamis di halaman cerita
Anda dapat dengan mudah mengambil data peristiwa ini dan menampilkan materi yang relevan dari narasi saat pengguna diarahkan ke halaman cerita tertentu.
Untuk membuat fungsi ini, Anda harus terlebih dahulu memeriksa apakah jenis halaman target cocok dengan properti data yang Anda berikan melalui alur kerja. Dalam situasi ini, Anda harus mengaitkan halaman cerita dengan properti cerita.
Itu hanya dapat menarik dan mengirimkan data yang sesuai dari sumber yang ada dengan mengkategorikan jenis konten pada halaman.
Anda sekarang dapat mulai memasukkan materi dinamis ke dalam bidang yang menampilkan informasi dari satu tabel.
8. Menampilkan artikel penerbit
Setelah membaca item berita, pengguna dapat memilih untuk memeriksa seluruh katalog artikel penerbit. Jika Anda telah mengembangkan tipe data penerbit, membuat halaman terpisah untuk penerbit semudah membuat halaman beranda asli kami.
Di halaman ini, kita harus mulai dengan mengatur jenis halaman ke penerbit.
Kemudian, salin grup berulang dari halaman beranda dan edit pengaturannya.
Dalam hal ini, sumber data grup berulang kami akan mencari semua artikel yang ada yang penerbitnya adalah penerbit halaman saat ini.
9. Mengikuti penerbit
Fitur dasar ketiga yang akan kami bangun untuk MVP kami adalah kemampuan untuk mengikuti penerbit di platform. Kami akan menambahkan tombol ikuti di halaman penerbit. Ketika kami mengklik ikon ini, kami akan meluncurkan proses baru yang mengubah sesuatu.
Menambahkan penerbit halaman saat ini ke daftar publikasi berikut mereka akan mengubah pengguna saat ini.
Setelah itu, kita perlu memperbarui daftar pengikut penerbit halaman saat ini dengan menambahkan pengguna saat ini.
10. Fitur tambahan yang dapat Anda tambahkan
Sekarang setelah Anda merasa nyaman dengan membangun bidang data khusus dan menyajikan informasi dinamis, Anda dapat berkreasi dengan pengalaman yang Anda buat untuk produk Anda. Anda juga dapat menyertakan:
- Buat fitur yang memungkinkan pengguna menyimpan konten untuk dibaca nanti.
- Di bagian bawah setiap bagian, berikan koleksi berulang artikel yang disarankan.
- Buat alat pencarian untuk membantu orang menemukan konten baru di situs.
11. Hasilnya
Aplikasi terakhir Anda akan terlihat seperti ini.
Pro
- Kemampuan untuk terhubung ke banyak API dan plugin.
- Aplikasi tanpa kode yang mudah digunakan.
- Orang yang tidak memiliki pengalaman pemrograman akan mendapat manfaat dari ini.
- Alat desain yang serbaguna dan kuat.
- Pemrosesan kueri cepat.
Kekurangan
- Peningkatan ketergantungan.
- Kecepatan pemrosesan data lambat.
- Kinerja dibatasi.
Harga
Paket gratis memungkinkan Anda mempelajari platform dan mengembangkan aplikasi Anda.
Langganan berbayar mencakup tambahan seperti pelabelan putih, domain khusus, akses ke Bubble API, dan kapasitas server yang dipesan, yang tercantum di bawah ini.
- Pribadi – $25/bulan (dibayar tahunan) atau $29/bulan (dibayar bulanan).
- Profesional – $115/bulan (dibayar setiap tahun) atau $129/bulan (dibayar bulanan).
- Produksi – $475/bulan (dibayar setiap tahun) atau $529/bulan (dibayar bulanan).
Memulai dengan Gelembung Gratis
Kesimpulan
Bubble adalah alternatif yang sangat baik untuk membangun aplikasi web yang hanya dapat menampilkan informasi atau memiliki UI minimal.
Ini cukup mudah digunakan, dan tutorial yang disediakan oleh Bubble sangat membantu. Editor visual online-nya yang memungkinkan Anda mendesain aplikasi web berdasarkan preferensi Anda.
Dan bagian terbaiknya adalah Anda tidak memerlukan pengalaman atau keahlian pemrograman. Bubble cocok untuk semua orang, terlepas dari apakah Anda tahu cara membuat kode atau tidak.
Namun, pemahaman sebelumnya tentang bahasa frontend dapat memberi Anda keunggulan karena memungkinkan Anda dengan cepat mengetahui apa yang dilakukannya terkait penanganan acara.
Jadi, apa pendapat Anda tentang kemampuan Bubble?
Beri tahu kami di komentar!
Arbehi
Bisakah toko dibuat untuk menjual produk menggunakan alat bubble.io?