Cuprins[Ascunde][Spectacol]
- Ce este Bubble.io?
- Ce este programarea vizuală?
- Ce tipuri de aplicații puteți dezvolta?
Crearea unei aplicații cu Bubble (Tutorial)+-
- 1. Noțiuni de bază
- 2. Configurarea bazei de date
- 3. Construirea fluxurilor de lucru
- 4. Crearea unei știri
- 5. Afișarea conținutului dinamic în flux
- 6. Trimiterea datelor între pagini
- 7. Afișarea conținutului dinamic pe pagina de poveste
- 8. Afișarea articolului editorului
- 9. Urmărirea editorilor
- 10. Funcții suplimentare pe care le puteți adăuga
- 11. Rezultatul
- Pro-uri
- Contra
- Tarif
- Concluzie
Recent, am fost interesat de abordări de dezvoltare web, altele decât HTML, CSS și JavaScript.
Odată cu peisajul fără cod în creștere, nu a fost surprinzător să descoperim că există mai multe alternative la abordările mai standard pentru dezvoltarea aplicațiilor web.
Trebuie să fiți familiarizat cu unele dintre cele mai cunoscute platforme CMS, cum ar fi WordPress, care sunt aproape fără cod. Dar, dacă doriți să construiți aplicații web, astfel de platforme pot părea restrictive.
Aici vă prezint Bubble.io, un puternic instrument fără cod care vă permite să creați aplicații web ca niciodată.
Să o explorăm în profunzime!
Ce este Bubble.io?
Bubble este o platformă non-tehnică care combină un limbaj de programare vizual și un cadru de dezvoltare web.
Utilizatorii pot folosi aceste instrumente de programare pentru a construi aplicații online unice, pentru a modifica baze de date și procese, pentru a adăuga componente ale paginii (imagini, text, formulare de introducere, hărți) și pentru a le proiecta interfețele.
Este o piață în care puteți descoperi șabloane, pluginuri și servicii ideale pentru a vă ajuta să construiți produse puternice.
Fără a fi nevoie să configurați un cadru de programare tipic, puteți crea orice, de la o piață la o rețea socială la un CRM (Customer Relationship Management) folosind Bubble.
Oferă clienților posibilitatea de a-și crea și personaliza aplicațiile folosind o interfață ușor de utilizat și un editor punct-and-click.
Îl puteți utiliza împreună cu servicii care oferă un API REST, cum ar fi aplicațiile Facebook, SQL, de analiză și de plată. Le permite utilizatorilor să dedice timp îmbunătățirii funcționalității și aspectului aplicațiilor lor, astfel încât acestea să arate bine pe tablete și dispozitive mobile.
Este potrivit pentru toate dimensiunile de afaceri, de la mic la mediu la mare; și accesibil pentru Windows, Mac și web.
Ce este programarea vizuală?
Programarea vizuală este în esență ceea ce sună. În loc să programați manual prin scrierea codului, o faceți grafic făcând clic și trăgând componente în pagini.
Nu vă lăsați induși în eroare de această scurtă descriere.
Nu este ca orice altă aplicație de tăiat cookie-uri sau instrument de creare de site-uri web pe care le-ați întâlnit online. Majoritatea creatorilor de aplicații vă cer să vă bazați pe șabloane de bază și să aveți funcționalități extrem de limitate; vă permit doar să dezvoltați anumite tipuri de aplicații și să vă limitați personalizarea.
Deși noțiunea de „programare vizuală” și „glisare și fixare” pare ușoară în Bubble, este extraordinar de puternică.
Mediul său de programare vizuală nu numai că vă permite să trageți obiecte precum text, grafică, intrări și multe altele pe o pagină, dar vă permite și să configurați ceea ce fac acele elemente.
Ce face Bubble?
Scopul principal al Bubble este de a permite oricui să creeze aplicații web fără a fi nevoie să scrie cod.
Cu toate acestea, deși acest lucru oferă o declarație de obiectiv ușor de reținut, omite o parte semnificativă a poveștii. Calea de la idee la piață este mai complicată decât crearea de linii de cod.
În dezvoltarea convențională este necesară o echipă de profesioniști înalt pregătiți care lucrează la anumite secțiuni ale creării, creșterii și întreținerii aplicației. Gandeste-te la asta.
Ce necesită fiecare aplicație?
- Securitate pentru a vă asigura că nimeni nu are acces neautorizat la date.
- O bază de date pentru stocarea și preluarea informațiilor, cum ar fi articole, articole și actualizări de rețele sociale.
- Scalabilitate pentru a permite dezvoltarea nestingherită a bazei de utilizatori și a volumului de date.
- O interfață de utilizator plăcută pentru a face aplicația atractivă și ușor de utilizat.
- Integrare cu diverse servicii și sisteme.
Bubble înlocuiește mult mai mult decât un codificator. Oferă toate aceste servicii într-un mod atrăgător din punct de vedere vizual și extrem de automatizat, făcând posibil, dacă nu simplu, ca o singură persoană să se ocupe de totul.
În timp ce platformele anterioare fără cod au încercat să înlocuiască codarea în diferite moduri. Conceptul său este de a elimina cât mai multe bariere posibile pentru ca o aplicație să ajungă pe piață, gestionând totul, de la design responsive și animații până la găzduire, implementare versiuni, securitate și operațiuni de baze de date.
Folosind conectorul API pentru a conecta Bubble la alte servicii
Conectorul său API este probabil cel mai important plugin de pe piață. După cum sugerează și numele, acest lucru vă permite să vă conectați la alte aplicații și servicii pentru a partaja acțiuni și date.
În loc să vă aprofundați în detaliile tehnice ale modului în care funcționează, luați în considerare aceste exemple despre ceea ce ar putea realiza API-urile:
- Obținerea accesului la masina de învățare metode precum recunoașterea și traducerea imaginilor.
- Obțineți cele mai recente informații despre vreme de oriunde de pe pământ.
- Când un eveniment este declanșat în Bubble, informațiile sunt schimbate între sisteme, cum ar fi stabilirea unui client potențial în CRM sau o întâlnire în Google Calendar.
- Rezervați un zbor sau o ședere la hotel oriunde pe glob.
- Obțineți numărul de telefon, locația, fotografiile, sigla și recenziile oricărei companii pe Google Maps.
Utilizarea pluginurilor pentru a îmbunătăți funcțiile native
Din punct de vedere tehnic, combină module de cod JavaScript, CSS și HTML într-un nod funcțional. Aplicația scrisă în JS.JSON servește drept bază pentru propriul limbaj.
Deși nu trebuie să înțelegeți pe deplin această terminologie pentru a construi aplicații, ele indică un fapt esențial: aderă la standardele web cunoscute și recunoscute, permițând dezvoltatorilor să-și îmbunătățească în mod considerabil funcționalitatea nativă.
Acest lucru se vede deja pe site-ul de pluginuri, unde sunt disponibile sute de extensii gratuite și plătite pentru funcționalitatea de bază. De asemenea, implică faptul că, dacă ajungeți într-un punct în care capacitățile sale fundamentale sunt insuficiente, există o mulțime de experți JavaScript dispuși să vă ofere o soluție personalizată.
Ce tipuri de aplicații puteți dezvolta?
Puteți crea o gamă largă de aplicații, dintre care unele sunt prezentate mai jos.
- Aplicații pentru piețele specializate cu o comunitate.
- Aplicații pentru panouri de locuri de muncă într-o varietate de sectoare.
- Software pentru personalul spitalului.
- Software la punctul de vânzare pentru magazine fizice.
- Software de cabinet stomatologic cu etichetă albă.
- Inventar personal de afaceri și software de servicii pentru clienți.
- Aplicații de agregare imobiliară orientate către broker și clienți.
- Aplicații pentru evenimente și cursuri de pe piață (și chiar bărci).
- Certificatele profesionale necesită aplicații de testare interne.
- Aplicații pentru primul răspuns.
- Software de management al angajaților pentru uz intern.
Sincer să fiu, platforma nu este concepută pentru a face totul. S-ar putea să nu fie alegerea ideală dacă proiectați o aplicație de joc cu imagini și mișcare complexe. În plus, dacă creați o aplicație nativă (una pentru magazinele de aplicații), va trebui să o integrați cu un alt serviciu terță parte.
caracteristici cheie
Bubble este plin de caracteristici. Nu le vom putea acoperi pe toate aici, dar vom încerca să le acoperim pe cele mai esențiale.
1. Plugin-uri
Vă permite să includeți în dvs. funcționalități din numeroase instrumente de pe Internet aplicatie web. De exemplu, dacă doriți ca utilizatorii dvs. să se conecteze folosind contul lor de Facebook, puteți utiliza pluginul Facebook pentru a face acest lucru.
2. Dezvoltă
Vă permite să construiți aplicații dinamice, cu mai mulți utilizatori pentru browsere web desktop și mobile, precum și toate instrumentele necesare pentru a construi un site similar cu Instagram sau Airbnb.
3. desen
Puteți crea machete adaptate pentru dispozitive mobile și conținut dinamic pentru a oferi tușa finală unui produs pe care veți fi bucuroși să-l arătați altora.
4. Hosting
Nu trebuie să vă preocupați niciodată de întreținerea serverului, de infrastructură sau de operațiuni din nou și din nou.
Se ocupă de implementare și găzduire pentru dvs. într-un mod sigur și securizat. Numărul de utilizatori, volumul traficului și stocarea datelor sunt toate nerestricționate.
Crearea unei aplicații cu Bubble (Tutorial)
Acum să trecem la acțiune și să explorăm cum puteți crea o aplicație de știri pe Bubble.
1. Noțiuni de bază
Pentru început, trebuie mai întâi înregistrează-te pentru un cont gratuit pe Bubble.
Vom începe prin a folosi instrumentul de design vizual Bubble pentru a modela platforma noastră interfața cu utilizatorul. Unele dintre paginile cheie de inclus sunt prezentate mai jos:
- Pagina de încărcare – Un site web unde editorii vor dezvolta și distribui articole.
- Pagina de pornire – Se afișează o listă de povești publicate recent.
- Pagina narativă – O pagină în care poate fi găsită fiecare poveste unică.
- Pagina editorului - O pagină care afișează o listă de povești de la un anumit editor.
2. Configurarea bazei de date
După ce ați amenajat afișajul produsului, vă puteți concentra pe construirea câmpurilor de date care vor alimenta aplicația dvs. Vom folosi aceste câmpuri pentru a conecta fluxurile de lucru care stau la baza produsului dvs.
Pentru acest exemplu, vom stabili două tipuri de date distincte pentru fiecare știre. Un tip de date va conține faptele de bază ale unei povești (cum ar fi titlul, imaginea prezentată și editorul), în timp ce celălalt tip de date va conține fișiere de conținut mai mari, cum ar fi întreaga narațiune în sine.
Prin definirea acestora ca tipuri de date discrete, putem încărca doar informațiile necesare atunci când acestea sunt necesare, limitând cantitatea de material pe care editorul Bubble va trebui să o producă.
Vor fi create următoarele tipuri de date și câmpuri:
Tipul de date: Utilizator
Câmpuri:
- Nume si Prenume
- Următorii editori sunt o listă de editori. Notă importantă: crearea unui câmp ca o listă bazată pe un tip de date distinct vă permite să încorporați toate câmpurile de date esențiale fără efort, fără a fi nevoie să creați câmpuri suplimentare.
Tipul de date: Poveste
Câmpuri:
- Titlu
- Imagine prezentată
- Scriitor
- Categorii
- Editor
- Conținutul poveștii
Tipul de date: Conținutul poveștii
Câmpuri:
- Conținutul poveștii
Tipul de date: Editor
Câmpuri:
- Nume si Prenume
- logo
- Urmăritori
3. Construirea fluxurilor de lucru
Acum că ați organizat designul și baza de date a aplicației, este timpul să începeți să puneți totul cap la cap și să o faceți să funcționeze.
Fluxurile de lucru sunt metoda principală pentru a realiza acest lucru în Bubble.
Fiecare flux de lucru are loc atunci când are loc un eveniment (de exemplu, un utilizator dă clic pe un buton) și apoi efectuează o secvență de „acțiuni” ca răspuns (de exemplu, „înscrie utilizatorul”, „face o modificare în baza de date” și așa mai departe) .
4. Crearea unei știri
Prima caracteristică pe care o vom oferi este un instrument care permite editorilor să scrie și să posteze știri pe site.
Pe pagina de încărcare, vom începe prin a încorpora o mulțime de elemente de intrare care vor fi aplicate pentru introducerea datelor în baza noastră de date. Intrările de text, un instrument de încărcare a imaginilor și o selecție derulantă sunt exemple ale acestor câmpuri.
De asemenea, va trebui să personalizăm meniul derulant al editorului pentru a afișa o listă de opțiuni dinamice. Deoarece fiecare articol nou va fi adăugat la lista de articole totale a unui editor, va trebui să alegem un editor existent din baza noastră de date.
Când setăm acest meniu drop-down, vom alege tipul de opțiuni pentru a fi editor.
După aceea, sursa noastră de date va scana baza noastră de date și va returna o listă cu toate publicațiile curente. În cele din urmă, vom schimba legenda sursă pentru a include numele editorului.
Odată ce un scriitor a introdus informațiile necesare în fiecare intrare de pe pagină, va face clic pe butonul de publicare pentru a genera o nouă poveste.
Apoi, în baza de date, veți crea un lucru nou cu tipul de date setat la narativ.
Apoi va trebui să începem să ne populăm baza de date cu câmpurile necesare. Conectați fiecare dintre componentele de intrare pe pagină la coloanele din baza de date respective.
În primul rând, vom crea tipul de conținut al poveștii, care va fi în cele din urmă legat de povestea în sine.
În continuare, vom adăuga o altă etapă acestei proceduri, generând altceva – de data aceasta, povestea în sine.
Este posibil să integrați aceste date fără efort în platforma dvs. prin integrarea primului material narativ pe care l-am dezvoltat cu această poveste.
O nouă poveste va fi produsă de fiecare dată când această procedură este activată.
5. Afișarea conținutului dinamic în flux
Odată ce editorii încep să încarce material în aplicația dvs. mobilă, va trebui să începem să creăm logica pe pagina dvs. de pornire care arată fiecare articol ca o listă dinamică. Acest lucru poate fi realizat prin folosirea elementului nostru de grup repetat.
Grupurile care se repetă lucrează cu baza de date pentru a prezenta și reîmprospăta o listă de materiale dinamice.
Când aplicați un grup care se repetă, mai întâi trebuie să legați elementul la un tip de date din baza de date.
În acest caz, veți clasifica tipul de material drept povești. De asemenea, va trebui să furnizați sursa de date ca o listă a tuturor tabelelor din baza de date.
De asemenea, vom aranja acest grup recurent după data de început a fiecărei povești, arătând lista în ordine cronologică inversă. Acum puteți începe să organizați materialul dinamic care va apărea în fiecare grilă.
Pur și simplu completați rândul de sus cu materialul corespunzător pe care doriți să îl afișați, iar acest element puternic va popula coloanele rămase cu date din baza de date curentă.
6. Trimiterea datelor între pagini
De asemenea, este posibil să construiți evenimente în cadrul fiecărui rând al unui grup care se repetă. Când dezvoltați funcții de navigare pentru platforma dvs., această funcționalitate va fi utilă.
Pagina de pornire a aplicației noastre de știri arată doar o previzualizare a fiecărei povești, inclusiv a editorului, o imagine prezentată și titlul poveștii.
Cu toate acestea, nu afișează întregul conținut al unui articol până când utilizatorul face clic pe pagina de poveste. Vom folosi editorul nostru de flux de lucru pentru a transmite date între pagini pentru a afișa acest material.
Pentru a începe, creați un proces care trimite un utilizator la pagina de poveste atunci când se face clic pe imaginea unei povești.
Utilizați un eveniment de navigare pentru a transfera un utilizator pe o altă pagină în timpul dezvoltării acestui proces.
Alegeți tipul de pagină de destinație pentru a fi pagina narativă din meniul derulant. Apoi, va trebui să oferiți mai multe informații acestei pagini, astfel încât editorul Bubble să înțeleagă ce poveste unică să arate.
Informațiile pe care va trebui să le oferiți provin din povestea actuală a celulelor.
7. Afișarea conținutului dinamic pe pagina de poveste
Puteți recupera cu ușurință aceste date despre eveniment și puteți afișa materialul relevant din narațiune atunci când un utilizator este trimis la o anumită pagină de poveste.
Pentru a crea această funcție, trebuie mai întâi să verificați dacă tipul de pagină țintă se potrivește cu proprietatea datelor pe care o furnizați prin fluxul de lucru. În această situație, trebuie să asociați pagina de poveste cu o proprietate de poveste.
Poate pur și simplu să extragă și să furnizeze date adecvate din sursele existente prin clasificarea tipului de conținut pe o pagină.
Acum puteți începe să inserați material dinamic în câmpuri care afișează informații dintr-un singur tabel.
8. Afișarea articolului editorului
După ce a citit o știre, un utilizator poate alege să examineze întregul catalog de articole al editorului. Dacă ați dezvoltat un tip de date de editor, crearea unei pagini separate pentru editori este la fel de simplă ca și crearea paginii noastre de pornire originale.
Pe această pagină, va trebui să începem prin a seta tipul de pagină la editor.
Apoi, copiați grupul care se repetă de pe pagina de start și editați setările.
În acest caz, sursa de date a grupului nostru repetat va căuta toate articolele existente al căror editor este editorul actual al paginii.
9. Urmărirea editorilor
A treia caracteristică fundamentală pe care o vom construi pentru MVP-ul nostru este capacitatea de a urmări un editor pe platformă. Vom adăuga un buton de urmărire pe pagina editorului. Când facem clic pe această pictogramă, vom lansa un nou proces care modifică un lucru.
Adăugarea editorului paginii curente la lista de publicații următoare va schimba utilizatorul curent.
După aceea, va trebui să actualizăm lista de urmăritori a editorului paginii curente adăugând utilizatorul curent.
10. Funcții suplimentare pe care le puteți adăuga
Acum că vă simțiți confortabil să construiți câmpuri de date personalizate și să prezentați informații dinamice, puteți fi creativ cu experiențele pe care le creați pentru produsul dvs. De asemenea, puteți include:
- Creați o funcție care permite utilizatorilor să salveze conținut pentru citire ulterioară.
- În partea de jos a fiecărei piese, furnizați o colecție recurentă de articole sugerate.
- Creați un instrument de căutare pentru a ajuta oamenii să găsească conținut nou pe site.
11. Rezultatul
Aplicația finală va arăta cam așa.
Pro-uri
- Capacitatea de a vă conecta la multe API-uri și pluginuri.
- O aplicație ușor de utilizat, fără cod.
- Oamenii fără experiență în programare vor beneficia de acest lucru.
- Instrumente de proiectare care sunt atât versatile, cât și puternice.
- Procesare rapidă a interogărilor.
Contra
- Fiabilitate crescută.
- Viteza de procesare a datelor este lentă.
- Performanța este constrânsă.
Tarif
Planul gratuit vă permite să aflați despre platformă și să vă dezvoltați aplicația.
Abonamentele plătite includ extra, cum ar fi eticheta albă, un domeniu personalizat, acces la API-ul Bubble și capacitatea rezervată a serverului, care sunt enumerate mai jos.
- Personal – 25 USD/lună (plătit anual) sau 29 USD/lună (plătit lunar).
- Profesionist – 115 USD/lună (plătit anual) sau 129 USD/lună (plătit lunar).
- Producție – 475 USD/lună (plătit anual) sau 529 USD/lună (plătit lunar).
Concluzie
Bubble este o alternativă excelentă pentru construirea de aplicații web care pot afișa doar informații sau au o interfață de utilizare minimă.
Este destul de simplu de folosit, iar tutorialele oferite de Bubble sunt extrem de utile. Editorul său vizual online care vă permite să proiectați aplicații web pe baza preferințelor dvs.
Și cea mai bună parte este că nu aveți nevoie de nicio experiență sau expertiză în programare. Bubble este potrivit pentru toată lumea, indiferent dacă știți să codificați sau nu.
Cu toate acestea, înțelegerea anterioară a limbajelor de front-end vă poate oferi un avantaj, deoarece vă permite să vă dați seama rapid ce face în ceea ce privește gestionarea evenimentelor.
Deci, ce părere aveți despre capacitățile lui Bubble?
Spuneți-ne în comentarii!
Arbehi
Poate fi creat un magazin pentru a vinde produse folosind instrumentul bubble.io?