Sadržaj[Sakrij][Prikaži]
- Šta je Bubble.io?
- Šta je vizuelno programiranje?
- Koje vrste aplikacija možete razviti?
Izrada aplikacije pomoću Bubble (Tutorial)+-
- 1. Prvi koraci
- 2. Konfiguriranje baze podataka
- 3. Izgradnja tokova rada
- 4. Kreiranje vijesti
- 5. Prikaz dinamičkog sadržaja u feedu
- 6. Slanje podataka između stranica
- 7. Prikazivanje dinamičkog sadržaja na stranici priče
- 8. Prikaz članka izdavača
- 9. Praćenje izdavača
- 10. Dodatne funkcije koje možete dodati
- 11. Rezultat
- pros
- Cons
- Cijene
- zaključak
Nedavno sam se zanimao za pristupe razvoju weba osim HTML-a, CSS-a i JavaScript-a.
Uz rastući krajolik bez kodiranja, nije bilo iznenađujuće otkriti da postoji nekoliko alternativa za standardnije pristupe za razvoj web aplikacija.
Sigurno ste upoznati sa nekim od poznatijih CMS platformi, kao što je WordPress, koje su uglavnom bez koda. Ali, ako želite da pravite web aplikacije, takve platforme mogu delovati restriktivno.
Ovdje vam predstavljam Bubble.io, moćan alat bez koda koji vam omogućava da pravite web aplikacije kao nikada do sada.
Istražimo ga u dubini!
Šta je Bubble.io?
Bubble je netehnička platforma koja kombinuje vizuelni programski jezik i a okvir za web razvoj.
Korisnici mogu koristiti ove programske alate da konstruišu jedinstvene online aplikacije, mijenjaju baze podataka i procese, dodaju komponente stranica (slike, tekst, forme za unos, mape) i dizajniraju njihova sučelja.
To je tržište na kojem možete otkriti idealne predloške, dodatke i usluge koji će vam pomoći u izgradnji jakih proizvoda.
Bez potrebe za postavljanjem tipičnog okvira za programiranje, pomoću Bubble-a možete kreirati bilo šta, od tržišta preko društvene mreže do CRM-a (Upravljanje odnosima s klijentima).
Korisnicima daje mogućnost da kreiraju i personaliziraju svoje aplikacije koristeći korisničko sučelje i uređivač pokaži i klikni.
Možete ga koristiti u kombinaciji sa uslugama koje pružaju REST API, kao što su Facebook, SQL, analitika i aplikacije za plaćanje. Omogućava korisnicima da posvete vrijeme poboljšanju funkcionalnosti i izgleda svojih aplikacija kako bi izgledale dobro na tabletima i mobilnim uređajima.
Pogodan je za sve poslovne veličine, od malih do srednjih do velikih; i dostupan za Windows, Mac i web.
Šta je vizuelno programiranje?
Vizuelno programiranje je u suštini ono što zvuči. Umjesto ručnog programiranja pisanjem koda, to radite grafički klikom i prevlačenjem komponenti na stranice.
Nemojte da vas zavara taj kratki opis.
Nije poput bilo koje druge aplikacije za rezanje kolačića ili alata za izradu web stranica na koje ste naišli na mreži. Većina graditelja aplikacija zahtijeva da se oslonite na osnovne predloške i da imaju izuzetno ograničenu funkcionalnost; oni vam samo dozvoljavaju da razvijate određene vrste aplikacija i ograničavaju vašu personalizaciju.
Iako se pojam "vizuelnog programiranja" i "povlačenja i ispuštanja" čini lakim u Bubbleu, on je izuzetno moćan.
Njegovo okruženje za vizuelno programiranje ne samo da vam omogućava da prevlačite objekte kao što su tekst, grafika, ulazi i još mnogo toga na stranicu, već vam takođe omogućava da konfigurišete šta ti elementi rade.
Šta radi Bubble?
Primarni cilj Bubble-a je omogućiti bilo kome da kreira web aplikacije bez potrebe za pisanjem koda.
Međutim, iako ovo omogućava lako pamtljivu izjavu o golu, izostavlja značajan dio priče. Put od ideje do tržišta je složeniji od pukog kreiranja linija koda.
U konvencionalnom razvoju potreban je tim visoko obučenih profesionalaca koji rade na određenim dijelovima kreiranja, rasta i održavanja aplikacije. Razmotrite ovo.
Šta svaka aplikacija zahtijeva?
- Sigurnost kako bi se osiguralo da niko nema neovlašten pristup podacima.
- Baza podataka za pohranjivanje i preuzimanje informacija kao što su stavke, članci i ažuriranja društvenih medija.
- Skalabilnost koja omogućava nesmetan razvoj baze korisnika i količine podataka.
- Ugodno korisničko sučelje koje aplikaciju čini atraktivnom i jednostavnom za korištenje.
- Integracija sa raznim servisima i sistemima.
Bubble zamjenjuje mnogo više od kodera. Pruža sve ove usluge na vizualno privlačan i visoko automatiziran način, što ga čini zamislivim, ako ne i jednostavnim, da jedna osoba može sve rješavati.
Dok su prethodne platforme bez kodiranja pokušavale zamijeniti kodiranje na različite načine. Njegov koncept je da ukloni što je moguće više barijera da bi aplikacija stigla na tržište, rukovanje svime od responzivnog dizajna i animacija do hostinga, implementacije verzije, sigurnosti i operacija baze podataka.
Korištenje API konektora za povezivanje Bubble-a s drugim uslugama
Njegov API konektor je vjerovatno najvažniji dodatak na tržištu. Kao što naziv implicira, ovo vam omogućava da se povežete s drugim aplikacijama i uslugama kako biste dijelili radnje i podatke.
Umjesto da ulazite u tehničke specifičnosti kako ovo funkcionira, razmotrite ove primjere onoga što API-ji mogu postići:
- Dobivanje pristupa do mašinsko učenje metode kao što su prepoznavanje i prevođenje slika.
- Dobijte najnovije informacije o vremenu s bilo kojeg mjesta na zemlji.
- Kada se događaj pokrene u Bubble-u, informacije se razmjenjuju između sistema, kao što je uspostavljanje potencijalnog klijenta u vašem CRM-u ili zakazivanje u vašem Google kalendaru.
- Rezervirajte let ili hotelski boravak bilo gdje u svijetu.
- Dobijte broj telefona, lokaciju, fotografije, logotip i recenzije za bilo koju kompaniju na Google mapama.
Korištenje dodataka za poboljšanje izvornih funkcija
Tehnički, on miješa module JavaScript koda, CSS i HTML u funkcionalni čvor. Aplikacija napisana u JS.JSON služi kao osnova za vlastiti jezik.
Iako ne morate u potpunosti razumjeti tu terminologiju da biste napravili aplikacije, one ukazuju na jednu ključnu činjenicu: pridržava se poznatih i priznatih web standarda, omogućavajući programerima da značajno poboljšaju svoju izvornu funkcionalnost.
To se već vidi na stranici dodataka, gdje su dostupne stotine besplatnih i plaćenih proširenja osnovne funkcionalnosti. To takođe implicira da ako dođete do tačke kada su njegove osnovne mogućnosti nedovoljne, postoji mnogo stručnjaka za JavaScript koji su spremni da vam ponude rešenje po meri.
Koje vrste aplikacija možete razviti?
Možete kreirati širok spektar aplikacija, od kojih su neke navedene u nastavku.
- Aplikacije za specijalizirana tržišta sa zajednicom.
- Aplikacije za oglasne ploče u raznim sektorima.
- Softver za bolničko osoblje.
- Softver na prodajnom mjestu za fizičke trgovine.
- Softver za stomatološke ordinacije sa bijelom etiketom.
- Lični poslovni inventar i softver za korisničku podršku.
- Aplikacije za agregaciju nekretnina okrenute brokerima i klijentima.
- Aplikacije za događaje i tečajeve na tržištu (pa čak i brodove).
- Profesionalni certifikati zahtijevaju primjenu internog testiranja.
- Aplikacije za prve odgovore.
- Softver za upravljanje zaposlenima za internu upotrebu.
Da budem iskren, platforma nije dizajnirana da radi sve. Možda nije idealan izbor ako dizajnirate aplikaciju za igru sa složenim vizualima i pokretom. Osim toga, ako kreirate izvornu aplikaciju (onu za trgovine aplikacija), morat ćete je integrirati s drugom uslugom treće strane.
Glavne karakteristike
Bubble je prepun funkcija. Ovdje ih nećemo moći sve pokriti, ali ćemo pokušati pokriti one najvažnije.
1. Dodaci
Omogućuje vam da uključite funkcionalnost iz brojnih alata na Internetu web aplikacija. Na primjer, ako želite da se vaši korisnici prijave koristeći svoj Facebook račun, možete koristiti Facebook dodatak da to učinite.
2. Razvijajte se
Omogućava vam da napravite dinamične, višekorisničke aplikacije za desktop i mobilne web pretraživače, kao i sve alate potrebne za izradu web stranice slične Instagramu ili Airbnb-u.
3. Dizajn
Možete kreirati rasporede prilagođene mobilnim uređajima i dinamičan sadržaj kako biste dali završne detalje proizvodu koji ćete rado pokazati drugima.
4. hosting
Nikada iznova i iznova ne morate biti zabrinuti za održavanje servera, infrastrukturu ili operacije.
On se brine za raspoređivanje i hosting umjesto vas na siguran i siguran način. Broj korisnika, obim saobraćaja i skladištenje podataka su neograničeni.
Izrada aplikacije pomoću Bubble (Tutorial)
Hajdemo sada u akciju i istražimo kako možete napraviti aplikaciju za vijesti na Bubbleu.
1. Prvi koraci
Da biste započeli, prvo morate registrirajte se za besplatni nalog na Bubble-u.
Počet ćemo korištenjem Bubbleovog alata za vizualni dizajn kako bismo oblikovali našu platformu korisnički interfejs. Neke od ključnih stranica koje treba uključiti su navedene u nastavku:
- Stranica za otpremanje – Web stranica na kojoj će izdavači razvijati i distribuirati članke.
- Početna stranica – Prikazuje se lista nedavno objavljenih priča.
- Narativna stranica – Stranica na kojoj se može pronaći svaka jedinstvena priča.
- Stranica izdavača - Stranica na kojoj se prikazuje lista priča određenog izdavača.
2. Konfiguriranje baze podataka
Nakon što ste postavili prikaz vašeg proizvoda, možete se usredotočiti na izgradnju polja podataka koja će potaknuti vašu aplikaciju. Koristit ćemo ova polja za povezivanje radnih tokova koji su u osnovi vašeg proizvoda.
Za ovaj primjer, uspostavit ćemo dva različita tipa podataka za svaku vijest. Jedan tip podataka će sadržavati osnovne činjenice priče (kao što su naslov, istaknuta slika i izdavač), dok će drugi tip podataka sadržavati veće datoteke sadržaja, kao što je cijela priča.
Definišući ih kao diskretne tipove podataka, možemo učitati informacije koje su potrebne samo kada su potrebne, ograničavajući količinu materijala koju će uređivač Bubble morati proizvesti.
Sljedeći tipovi podataka i polja će biti kreirani:
Tip podataka: Korisnik
Polja:
- Ime
- Sljedeći izdavači su lista izdavača. Važna napomena: Kreiranje polja kao liste zasnovane na različitom tipu podataka omogućava vam da bez napora ugradite sva osnovna polja podataka bez potrebe za kreiranjem dodatnih polja.
Tip podataka: priča
Polja:
- Naslov
- Istaknuta slika
- pisac
- kategorija
- izdavač
- Sadržaj priče
Tip podataka: Sadržaj priče
Polja:
- Sadržaj priče
Tip podataka: izdavač
Polja:
- Ime
- Logo
- Sljedbenici
3. Izgradnja tokova rada
Sada kada ste organizirali dizajn svoje aplikacije i bazu podataka, vrijeme je da počnete sastavljati sve zajedno i raditi na tome.
Tokovi posla su primarni metod za postizanje ovoga u Bubble-u.
Svaki tok posla nastaje kada se dogodi neki događaj (npr. korisnik klikne na dugme), a zatim izvrši niz "akcija" kao odgovor (npr. "prijavi korisnika", "izmeni bazu podataka" i tako dalje) .
4. Kreiranje vijesti
Prva karakteristika koju ćemo ponuditi je alat koji omogućava izdavačima da pišu i objavljuju vijesti na web stranici.
Na stranici za učitavanje, počet ćemo tako što ćemo ugraditi mnogo ulaznih stavki koje će se primijeniti na unos podataka u našu bazu podataka. Unosi teksta, program za otpremanje slika i padajući izbor su primjeri ovih polja.
Također ćemo morati prilagoditi padajući meni izdavača da prikažemo listu dinamičkih opcija. Budući da će svaki novi članak biti dodan na izdavačevu listu ukupnih članaka, morat ćemo odabrati postojećeg izdavača iz naše baze podataka.
Prilikom postavljanja ovog padajućeg menija, mi ćemo odabrati vrstu opcija za izdavača.
Nakon toga, naš izvor podataka će skenirati našu bazu podataka i vratiti listu svih trenutnih publikacija. Konačno, promijenit ćemo izvorni naslov kako bi uključio ime izdavača.
Nakon što pisac unese potrebne informacije u svaki unos na stranici, klikne na dugme za objavljivanje kako bi generisao novu priču.
Zatim, unutar vaše baze podataka, kreirat ćete novu stvar s tipom podataka postavljenim na narative.
Zatim ćemo morati početi popunjavati našu bazu podataka potrebnim poljima. Povežite svaku od ulaznih komponenti na stranici s njihovim odgovarajućim stupcima baze podataka.
Prvo ćemo kreirati tip sadržaja priče, koji će konačno biti povezan sa samom pričom.
Zatim ćemo dodati još jednu fazu ovoj proceduri, generišući nešto drugo – ovaj put, samu priču.
Moguće je integrirati ove podatke bez napora kroz vašu platformu integracijom prvog narativnog materijala koji smo razvili s ovom pričom.
Nova priča će biti proizvedena svaki put kada se ova procedura aktivira.
5. Prikaz dinamičkog sadržaja u feedu
Nakon što izdavači počnu učitavati materijal u vašu mobilnu aplikaciju, morat ćemo početi kreirati logiku na vašoj početnoj stranici koja svaki članak prikazuje kao dinamičku listu. Ovo se može postići upotrebom našeg ponavljajućeg elementa grupe.
Grupe koje se ponavljaju rade s vašom bazom podataka kako bi predstavile i osvježile listu dinamičkog materijala.
Kada primjenjujete ponavljajuću grupu, prvo morate povezati element s tipom podataka u vašoj bazi podataka.
U ovom slučaju, vrstu materijala ćete kategorizirati kao priče. Također ćete morati navesti izvor podataka kao listu svih tabela u vašoj bazi podataka.
Također ćemo organizirati ovu ponavljajuću grupu prema datumu početka svake priče, prikazujući listu obrnutim hronološkim redoslijedom. Sada možete početi organizirati dinamički materijal koji će se pojaviti unutar svake mreže.
Jednostavno popunite gornji red odgovarajućim materijalom koji želite da prikažete i ovaj moćni element će popuniti preostale kolone podacima iz vaše trenutne baze podataka.
6. Slanje podataka između stranica
Takođe je moguće konstruisati događaje unutar svakog reda grupe koja se ponavlja. Prilikom razvoja navigacijskih funkcija za vašu platformu, ova funkcionalnost će vam dobro doći.
Početna stranica naše aplikacije za vijesti samo prikazuje pregled svake priče, uključujući izdavača, istaknutu sliku i naslov priče.
Međutim, ne prikazuje cijeli sadržaj članka dok korisnik ne klikne na stranicu sa pričom. Koristit ćemo naš uređivač toka rada za prijenos podataka između stranica kako bismo prikazali ovaj materijal.
Za početak kreirajte proces koji korisnika šalje na stranicu priče kada se klikne na sliku priče.
Koristite događaj navigacije da prebacite korisnika na drugu stranicu dok razvijate ovaj proces.
Odaberite vrstu odredišne stranice koja će biti narativna stranica iz padajućeg izbornika. Zatim ćete morati ovoj stranici dati dodatne informacije kako bi urednik Bubble shvatio koju jedinstvenu priču treba prikazati.
Informacije koje ćete morati dati dolaze iz trenutne priče o ćelijama.
7. Prikazivanje dinamičkog sadržaja na stranici priče
Možete lako dohvatiti ove podatke o događaju i prikazati relevantan materijal iz naracije kada se korisnik pošalje na stranicu određene priče.
Da biste kreirali ovu funkciju, prvo morate provjeriti da li tip ciljne stranice odgovara svojstvu podataka koje isporučujete kroz tok posla. U ovoj situaciji, stranicu priče morate povezati sa svojstvom priče.
Može jednostavno izvući i dostaviti odgovarajuće podatke iz postojećih izvora kategorizacijom tipa sadržaja na stranici.
Sada možete početi sa umetanjem dinamičkog materijala u polja koja prikazuju informacije iz jedne tabele.
8. Prikaz članka izdavača
Nakon čitanja vijesti, korisnik može odabrati da pregleda cijeli katalog članaka izdavača. Ako ste razvili tip podataka izdavača, kreiranje zasebne stranice za izdavače je jednostavno kao kreiranje naše originalne početne stranice.
Na ovoj stranici, morat ćemo početi postavljanjem tipa stranice na izdavača.
Zatim kopirajte grupu koja se ponavlja sa početne stranice i uredite postavke.
U ovom slučaju, izvor podataka naše ponavljajuće grupe će tražiti sve postojeće članke čiji je izdavač trenutni izdavač stranice.
9. Praćenje izdavača
Treća osnovna karakteristika koju ćemo izgraditi za naš MVP je mogućnost praćenja izdavača na platformi. Dodaćemo dugme za praćenje na stranici izdavača. Kada kliknemo na ovu ikonu, pokrenut ćemo novi proces koji mijenja stvar.
Dodavanje trenutnog izdavača stranice na njegovu listu sljedećih publikacija promijenit će trenutnog korisnika.
Nakon toga, morat ćemo ažurirati listu pratilaca izdavača trenutne stranice dodavanjem trenutnog korisnika.
10. Dodatne funkcije koje možete dodati
Sada kada ste zadovoljni izgradnjom prilagođenih polja podataka i predstavljanjem dinamičkih informacija, možete postati kreativni s iskustvima koja kreirate za svoj proizvod. Također možete uključiti:
- Kreirajte funkciju koja omogućava korisnicima da sačuvaju sadržaj za kasnije čitanje.
- Na dnu svakog dijela navedite kolekciju predloženih članaka koji se ponavljaju.
- Kreirajte alat za pretraživanje kako biste pomogli ljudima da pronađu svjež sadržaj na web lokaciji.
11. Rezultat
Vaša konačna aplikacija će izgledati otprilike ovako.
pros
- Mogućnost povezivanja na mnoge API-je i dodatke.
- Aplikacija koja se lako koristi, bez kodiranja.
- Ljudi bez iskustva u programiranju će imati koristi od ovoga.
- Dizajnirajte alate koji su i svestrani i moćni.
- Brza obrada upita.
Cons
- Povećana pouzdanost.
- Brzina obrade podataka je spora.
- Performanse su ograničene.
Cijene
Besplatni plan vam omogućava da naučite više o platformi i razvijete svoju aplikaciju.
Plaćene pretplate uključuju dodatke kao što su bele oznake, prilagođeni domen, pristup Bubble API-ju i rezervisani kapacitet servera, koji su navedeni u nastavku.
- Lično – 25 USD/mjesečno (plaća se godišnje) ili 29 USD/mjesečno (plaća se mjesečno).
- Professional – 115 USD/mjesečno (plaća se godišnje) ili 129 USD/mjesečno (plaća se mjesečno).
- Proizvodnja – 475 USD/mjesečno (plaća se godišnje) ili 529 USD/mjesečno (plaća se mjesečno).
Započnite s Bubbleom besplatno
zaključak
Bubble je odlična alternativa za izradu web aplikacija koje mogu prikazivati samo informacije ili imaju minimalno korisničko sučelje.
Prilično je jednostavan za korištenje, a tutorijali koje pruža Bubble su od velike pomoći. Njegov mrežni vizualni uređivač koji vam omogućava da dizajnirate web aplikacije na osnovu vaših preferencija.
A najbolji dio je da vam nije potrebno nikakvo programsko iskustvo ili stručnost. Bubble je prikladan za svakoga, bez obzira na to znate li kodirati ili ne.
Međutim, prethodno razumijevanje frontend jezika može vam dati prednost jer vam omogućava da brzo shvatite šta radi u pogledu rukovanja događajima.
Dakle, šta mislite o Bubbleovim mogućnostima?
Upoznajte nas u komentarima!
Arbehi
Može li se stvoriti trgovina za prodaju proizvoda pomoću bubble.io alata?