INHOUDSOPGAWE[Versteek][Wys]
- Wat is Bubble.io?
- Wat is visuele programmering?
- Watter tipe toepassings kan jy ontwikkel?
Bou 'n toepassing met Bubble (tutoriaal)+-
- 1. Aan die begin
- 2. Opstel van databasis
- 3. Bou werkstrome
- 4. Skep 'n nuusstorie
- 5. Vertoon dinamiese inhoud in die voer
- 6. Stuur data tussen bladsye
- 7. Vertoon dinamiese inhoud op die storiebladsy
- 8. Vertoon die uitgewer se artikel
- 9. Volgende uitgewers
- 10. Bykomende kenmerke wat jy kan byvoeg
- 11. Die resultaat
- Pros
- Nadele
- pryse
- Gevolgtrekking
Ek was onlangs geïnteresseerd in webontwikkelingsbenaderings anders as HTML, CSS en JavaScript.
Met die groeiende geenkode-landskap, was dit nie verbasend om te ontdek dat daar verskeie alternatiewe is vir die meer standaardbenaderings vir die ontwikkeling van webtoepassings nie.
U moet vertroud wees met sommige van die meer bekende CMS-platforms, soos WordPress wat redelik kodevry is. Maar as jy webtoepassings wil bou, kan sulke platforms beperkend lyk.
Hier stel ek jou voor aan Bubble.io, 'n kragtige geen-kode hulpmiddel waarmee jy webtoepassings kan bou soos nog nooit tevore nie.
Kom ons verken dit in diepte!
Wat is Bubble.io?
Bubble is 'n nie-tegniese platform wat 'n visuele programmeertaal en 'n webontwikkelingsraamwerk.
Gebruikers kan hierdie programmeringsinstrumente gebruik om unieke aanlyntoepassings te bou, databasisse en prosesse te verander, bladsykomponente (prente, teks, invoervorms, kaarte) by te voeg en hul koppelvlakke te ontwerp.
Dit is 'n mark waar jy ideale sjablone, inproppe en dienste kan ontdek om jou te help om sterk produkte te bou.
Sonder om 'n tipiese programmeringsraamwerk op te stel, kan jy enigiets van 'n markplek tot 'n sosiale netwerk tot 'n CRM (Customer Relationship Management) met behulp van Bubble skep.
Dit gee kliënte die vermoë om hul toepassings te skep en te verpersoonlik deur 'n gebruikersvriendelike koppelvlak en 'n wys-en-klik-redigeerder te gebruik.
Jy kan dit gebruik in samewerking met dienste wat 'n REST API bied, soos Facebook, SQL, ontledings en betaaltoepassings. Dit stel gebruikers in staat om tyd te bestee aan die verbetering van die funksionaliteit en voorkoms van hul toepassings sodat dit goed lyk op tablette en mobiele toestelle.
Dit is geskik vir alle besigheidsgroottes, van klein tot medium tot groot; en toeganklik vir Windows, Mac en die web.
Wat is visuele programmering?
Visuele programmering is in wese hoe dit klink. In plaas daarvan om handmatig te programmeer deur kode te skryf, doen jy dit grafies deur komponente na bladsye te klik en te sleep.
Moenie deur daardie kort beskrywing mislei word nie.
Dit is nie soos enige ander koekiedrukker-toepassing of webwerfbou-instrument wat jy aanlyn teëgekom het nie. Die meeste toepassingsbouers vereis dat jy op basiese sjablone staatmaak en uiters beperkte funksionaliteit het; hulle laat jou net toe om spesifieke soorte toepassings te ontwikkel en beperk jou verpersoonliking.
Alhoewel die idee van "visuele programmering" en "sleep en los" maklik in Bubble voorkom, is dit geweldig kragtig.
Die visuele programmeringsomgewing laat jou nie net toe om voorwerpe soos teks, grafika, invoere en meer na 'n bladsy te sleep nie, maar dit laat jou ook toe om op te stel wat daardie elemente doen.
Wat doen Bubble?
Bubble se primêre doel is om enigiemand in staat te stel om webtoepassings te skep sonder om kode te hoef te skryf.
Alhoewel dit voorsiening maak vir 'n doelwitstelling wat maklik onthou kan word, laat dit 'n beduidende deel van die verhaal weg. Die pad van idee tot mark is meer ingewikkeld as om net kodelyne te skep.
'n Span hoogs opgeleide professionele persone wat aan sekere afdelings van die toepassing se skepping, groei en instandhouding werk, word in konvensionele ontwikkeling vereis. Oorweeg dit.
Wat vereis elke toepassing?
- Sekuriteit om seker te maak dat niemand ongemagtigde toegang tot data het nie.
- 'n Databasis vir die stoor en herwinning van inligting soos items, artikels en sosiale media-opdaterings.
- Skaalbaarheid om die ongehinderde ontwikkeling van die gebruikersbasis en datavolume moontlik te maak.
- 'n Aangename gebruikerskoppelvlak om die toepassing aantreklik en maklik om te gebruik te maak.
- Integrasie met verskeie dienste en stelsels.
Bubble vervang veel meer as 'n kodeerder. Dit verskaf al hierdie dienste op 'n visueel aantreklike en hoogs geoutomatiseerde wyse, wat dit denkbaar maak, indien nie eenvoudig nie, vir 'n enkele persoon om alles te hanteer.
Terwyl vorige geen-kode-platforms probeer het om kodering op verskeie maniere te vervang. Die konsep daarvan is om soveel hindernisse as moontlik te verwyder vir 'n toepassing om die mark te bereik, en hanteer alles van responsiewe ontwerp en animasies tot hosting, weergawe-ontplooiing, sekuriteit en databasisbedrywighede.
Gebruik die API-koppelaar om Bubble aan ander dienste te koppel
Sy API Connector is waarskynlik die belangrikste inprop op die mark. Soos die naam aandui, laat dit jou toe om aan ander programme en dienste te koppel om aksies en data te deel.
Eerder as om in die tegniese besonderhede van hoe dit werk te delf, oorweeg hierdie voorbeelde van wat API's kan bereik:
- Verkry toegang tot machine learning metodes soos beeldherkenning en vertaling.
- Kry die mees onlangse weerinligting van enige plek op die aarde.
- Wanneer 'n gebeurtenis in Bubble geaktiveer word, word inligting oor stelsels uitgeruil, soos om 'n lood in jou CRM te vestig of 'n afspraak in jou Google Kalender.
- Bespreek 'n vlug of 'n hotelverblyf op enige plek in die wêreld.
- Kry die telefoonnommer, ligging, foto's, logo en resensies vir enige maatskappy op Google Maps.
Gebruik plugins om inheemse kenmerke te verbeter
Tegnies meng dit JavaScript-kodemodules, CSS en HTML in 'n funksionele nodus. Aansoek geskryf in JS.JSON dien as die grondslag vir sy eie taal.
Alhoewel jy nie daardie terminologie ten volle hoef te verstaan om toepassings te konstrueer nie, dui dit wel op een sleutelfeit: dit voldoen aan bekende en erkende webstandaarde, wat ontwikkelaars in staat stel om sy oorspronklike funksionaliteit aansienlik te verbeter.
Dit word reeds op die inprop-werf gesien, waar honderde gratis en betaalde uitbreidings vir die basiese funksionaliteit beskikbaar is. Dit impliseer ook dat as u 'n punt bereik wanneer die fundamentele vermoëns daarvan onvoldoende is, daar baie JavaScript-kundiges is wat bereid is om 'n pasgemaakte oplossing vir u op te stel.
Watter tipe toepassings kan jy ontwikkel?
U kan 'n wye reeks toepassings skep, waarvan sommige hieronder gegee word.
- Toepassings vir gespesialiseerde markte met 'n gemeenskap.
- Toepassings vir werkborde in 'n verskeidenheid sektore.
- Sagteware vir hospitaalpersoneel.
- Punt-van-verkoop sagteware vir fisiese winkels.
- Tandheelkundige kantoor sagteware met 'n wit etiket.
- Persoonlike besigheidsvoorraad en kliëntedienssagteware.
- Makelaar en kliëntgerigte eiendomsaggregasietoepassings.
- Toepassings vir geleenthede en kursusse op die mark (en selfs bote).
- Professionele sertifikate vereis interne toetsaansoeke.
- Aansoeke vir eerste reageerders.
- Werknemerbestuursagteware vir interne gebruik.
Om eerlik te wees, die platform is nie ontwerp om alles te doen nie. Dit is dalk nie die ideale keuse as jy 'n speletjie-toepassing met komplekse beeldmateriaal en beweging ontwerp nie. Boonop, as jy 'n inheemse toepassing skep (een vir toepassingwinkels), sal jy dit met 'n ander derdepartydiens moet integreer.
belangrike kenmerke
Bubble is propvol kenmerke. Ons sal hulle nie almal hier kan dek nie, maar ons sal probeer om die mees noodsaaklike te dek.
1. proppe
Dit laat jou toe om funksionaliteit van talle nutsmiddels op die internet in jou web aansoek. As jy byvoorbeeld wil hê dat jou gebruikers met hul Facebook-rekening moet aanmeld, kan jy die Facebook-inprop gebruik om dit te doen.
2. Ontwikkel
Dit laat jou toe om dinamiese, veelgebruiker-toepassings vir rekenaar- en mobiele webblaaiers te bou, sowel as al die gereedskap wat nodig is om 'n webwerf soortgelyk aan Instagram of Airbnb te bou.
3. ontwerp
Jy kan selfoonvriendelike uitlegte en dinamiese inhoud skep om die finale afronding te gee aan 'n produk wat jy graag aan ander sal wys.
4. hosting
Moet nooit weer en weer bekommerd wees oor bedieneronderhoud, infrastruktuur of bedrywighede nie.
Dit sorg vir ontplooiing en hosting vir jou op 'n veilige en veilige manier. Die aantal gebruikers, verkeersvolume en databerging is almal onbeperk.
Bou 'n toepassing met Bubble (tutoriaal)
Kom ons gaan nou in aksie en verken hoe jy 'n nuustoepassing op Bubble kan bou.
1. Aan die begin
Om te begin, moet u eers registreer vir 'n gratis rekening op Bubble.
Ons sal begin deur Bubble se visuele ontwerpinstrument te gebruik om ons platform s'n te vorm gebruikerskoppelvlak. Sommige van die sleutelbladsye om in te sluit, word hieronder gegee:
- Oplaai bladsy – 'n Webwerf waar uitgewers artikels sal ontwikkel en versprei.
- Tuisblad – 'n Lys van onlangs gepubliseerde stories word vertoon.
- Narrative page – 'n Bladsy waar elke unieke storie gevind kan word.
- Uitgewerbladsy - 'n Bladsy om 'n lys verhale van 'n sekere uitgewer te vertoon.
2. Opstel van databasis
Nadat jy jou produk se vertoning uiteengesit het, kan jy daarop fokus om die datavelde te bou wat jou toepassing sal aanvuur. Ons sal hierdie velde gebruik om die werkvloei onderliggend aan jou produk te koppel.
Vir hierdie voorbeeld sal ons twee verskillende datatipes vir elke nuusbrokkie daarstel. Een datatipe sal die basiese feite van 'n storie bevat (soos die titel, uitgestalde prent en uitgewer), terwyl die ander datatipe groter inhoudlêers soos die hele verhaal self sal bevat.
Deur hulle as diskrete datatipes te definieer, kan ons slegs die inligting wat benodig word, laai wanneer dit vereis word, wat die hoeveelheid materiaal beperk wat die Bubble-redigeerder sal moet produseer.
Die volgende datatipes en -velde sal geskep word:
Datatipe: gebruikers
Velde:
- Naam
- Die volgende uitgewers is 'n lys van uitgewers. Belangrike nota: Die skep van 'n veld as 'n lys gebaseer op 'n duidelike datatipe laat jou toe om al sy noodsaaklike datavelde moeiteloos in te sluit sonder om ekstra velde te skep.
Datatipe: Story
Velde:
- Titel
- Voorgestelde beeld
- Skrywer
- kategorie
- uitgewer
- Verhaalinhoud
Datatipe: Verhaalinhoud
Velde:
- Verhaalinhoud
Datatipe: uitgewer
Velde:
- Naam
- logo
- volgelinge
3. Bou werkstrome
Noudat jy jou toepassing se ontwerp en databasis georganiseer het, is dit tyd om alles te begin saamstel en dit te laat werk.
Werkstrome is die primêre metode om dit in Bubble te bewerkstellig.
Elke werkvloei vind plaas wanneer 'n gebeurtenis plaasvind (bv. 'n gebruiker klik 'n knoppie) en voer dan 'n reeks "aksies" uit in reaksie (bv. "teken die gebruiker in," "maak 'n verandering aan die databasis," ensovoorts) .
4. Skep 'n nuusstorie
Die eerste kenmerk wat ons sal bied, is 'n hulpmiddel wat uitgewers in staat stel om nuusstukke op die webwerf te skryf en te plaas.
Op die oplaaibladsy sal ons begin deur baie invoeritems in te sluit wat toegepas sal word om data in ons databasis in te voer. Teksinvoere, 'n prentoplaaier en 'n keuselys is voorbeelde van hierdie velde.
Ons sal ook die uitgewer-aftreklys moet pasmaak om 'n lys dinamiese opsies te vertoon. Aangesien elke nuwe artikel by 'n uitgewer se lys van totale artikels gevoeg sal word, sal ons 'n bestaande uitgewer uit ons databasis moet kies.
Wanneer ons hierdie aftreklys opstel, sal ons die tipe opsies kies om 'n uitgewer te wees.
Daarna sal ons databron ons databasis skandeer en 'n lys van alle huidige publikasies terugstuur. Ten slotte sal ons die bronbyskrif verander om die uitgewer se naam in te sluit.
Sodra 'n skrywer die nodige inligting in elke inskrywing op die bladsy ingevoer het, sal hulle op die publiseer-knoppie klik om 'n nuwe verhaal te genereer.
Dan, binne jou databasis, sal jy 'n nuwe ding skep met die datatipe ingestel op narratief.
Dan sal ons moet begin om ons databasis met die nodige velde te vul. Koppel elk van die invoerkomponente op die bladsy aan hul onderskeie databasiskolomme.
Eerstens sal ons die tipe storie-inhoud skep, wat uiteindelik aan die verhaal self gekoppel sal word.
Vervolgens sal ons nog 'n stadium by hierdie prosedure voeg, wat iets anders genereer - hierdie keer, die verhaal self.
Dit is moontlik om hierdie data moeiteloos deur jou platform te integreer deur die eerste narratiewe materiaal wat ons met hierdie verhaal ontwikkel het, te integreer.
'n Nuwe verhaal sal geproduseer word elke keer as hierdie prosedure geaktiveer word.
5. Vertoon dinamiese inhoud in die voer
Sodra uitgewers begin om materiaal na jou mobiele toepassing op te laai, sal ons die logika op jou tuisblad moet begin skep wat elke artikel as 'n dinamiese lys wys. Dit kan bewerkstellig word deur ons herhalende groepelement te gebruik.
Herhalende groepe werk met jou databasis om 'n lys van dinamiese materiaal aan te bied en te verfris.
Wanneer 'n herhalende groep toegepas word, moet jy eers die element aan 'n datatipe in jou databasis koppel.
In hierdie geval sal jy die soort materiaal as verhale kategoriseer. Jy sal ook die databron moet verskaf as 'n lys van al die tabelle in jou databasis.
Ons sal ook hierdie herhalende groep rangskik volgens elke storie se begindatum, wat die lys in omgekeerde chronologiese volgorde wys. Jy kan nou begin om die dinamiese materiaal te organiseer wat binne elke rooster sal verskyn.
Vul eenvoudig die boonste ry in met die toepaslike materiaal wat jy wil vertoon, en hierdie kragtige element sal die oorblywende kolomme vul met data van jou huidige databasis.
6. Stuur data tussen bladsye
Dit is ook moontlik om gebeurtenisse binne elke ry van 'n herhalende groep te konstrueer. Wanneer u navigasiekenmerke vir u platform ontwikkel, sal hierdie funksionaliteit handig te pas kom.
Ons nuustoepassing se tuisblad wys bloot 'n voorskou van elke storie, insluitend die uitgewer, 'n uitgestalde prent en die storietitel.
Dit wys egter nie die hele inhoud van 'n artikel totdat die gebruiker deurklik na die storiebladsy nie. Ons sal ons werkvloeiredigeerder gebruik om data tussen bladsye oor te dra om hierdie materiaal te vertoon.
Om te begin, skep 'n proses wat 'n gebruiker na die storiebladsy stuur wanneer die prentjie van 'n storie geklik word.
Gebruik 'n navigasiegebeurtenis om 'n gebruiker na 'n ander bladsy oor te dra terwyl hierdie proses ontwikkel word.
Kies die tipe bestemmingbladsy om die verhalende bladsy te wees in die aftreklys. Jy sal dan verdere inligting aan hierdie bladsy moet gee sodat die borrelredigeerder verstaan watter unieke verhaal om te wys.
Die inligting wat jy sal moet gee kom van die huidige selle verhaal.
7. Vertoon dinamiese inhoud op die storiebladsy
Jy kan hierdie gebeurtenisdata maklik ophaal en die relevante materiaal uit die vertelling wys wanneer 'n gebruiker na 'n sekere storiebladsy gestuur word.
Om hierdie funksie te skep, moet jy eers seker maak dat die teikenbladsytipe ooreenstem met die data-eienskap wat jy deur die werkvloei lewer. In hierdie situasie moet jy die storiebladsy met 'n storie-eienskap assosieer.
Dit kan eenvoudig toepaslike data uit bestaande bronne trek en lewer deur die tipe inhoud op 'n bladsy te kategoriseer.
Jy kan nou begin om dinamiese materiaal in te voeg in velde wat inligting uit 'n enkele tabel vertoon.
8. Vertoon die uitgewer se artikel
Nadat 'n nuusitem gelees is, kan 'n gebruiker kies om die uitgewer se hele katalogus van artikels te ondersoek. As jy 'n uitgewerdatatipe ontwikkel het, is die skep van 'n aparte bladsy vir uitgewers so eenvoudig soos om ons oorspronklike tuisblad te skep.
Op hierdie bladsy sal ons moet begin deur die bladsytipe op uitgewer te stel.
Kopieer dan die herhalende groep vanaf die tuisblad en wysig die instellings.
In hierdie geval sal ons herhalende groep se databron na alle bestaande artikels soek wie se uitgewer die huidige bladsyuitgewer is.
9. Volgende uitgewers
Die derde fundamentele kenmerk wat ons vir ons MVP sal bou, is die vermoë om 'n uitgewer op die platform te volg. Ons sal 'n volgknoppie op die uitgewerbladsy byvoeg. Wanneer ons op hierdie ikoon klik, sal ons 'n nuwe proses begin wat 'n ding verander.
Deur die huidige bladsy-uitgewer by hul lys van volgende publikasies te voeg, sal die huidige gebruiker verander.
Daarna sal ons die huidige bladsy-uitgewer se lys van volgelinge moet opdateer deur die huidige gebruiker by te voeg.
10. Bykomende kenmerke wat jy kan byvoeg
Noudat jy gemaklik is met die bou van pasgemaakte datavelde en die aanbieding van dinamiese inligting, kan jy kreatief raak met die ervarings wat jy vir jou produk skep. Jy kan ook die volgende insluit:
- Skep 'n kenmerk wat gebruikers toelaat om inhoud te stoor vir latere lees.
- Verskaf 'n herhalende versameling voorgestelde artikels onderaan elke stuk.
- Skep 'n soekinstrument om mense te help om vars inhoud op die webwerf te vind.
11. Die resultaat
Jou finale toepassing sal so iets lyk.
Pros
- Die vermoë om aan baie API's en plugins te koppel.
- 'n Maklik om te gebruik, geen-kode toepassing.
- Mense met geen programmeringservaring sal hierby baat.
- Ontwerp gereedskap wat beide veelsydig en kragtig is.
- Vinnige navraagverwerking.
Nadele
- Verhoogde betroubaarheid.
- Dataverwerkingspoed is stadig.
- Prestasie is beperk.
pryse
Die gratis plan laat jou toe om meer oor die platform te leer en jou toepassing te ontwikkel.
Betaalde intekeninge sluit ekstras in soos wit-etiket, 'n pasgemaakte domein, toegang tot die Bubble API en gereserveerde bedienerkapasiteit, wat hieronder gelys word.
- Persoonlik – $25/maand (jaarliks betaal) of $29/maand (maandeliks betaal).
- Professioneel – $115/maand (jaarliks betaal) of $129/maand (maandeliks betaal).
- Produksie – $475/maand (jaarliks betaal) of $529/maand (maandeliks betaal).
Gevolgtrekking
Bubble is 'n uitstekende alternatief vir die bou van webtoepassings wat slegs inligting kan wys of 'n minimale UI het.
Dit is redelik eenvoudig om te gebruik, en die tutoriale wat deur Bubble verskaf word, is uiters nuttig. Sy aanlyn visuele redigeerder waarmee jy webtoepassings kan ontwerp op grond van jou voorkeure.
En die beste deel is dat jy geen programmeringservaring of kundigheid nodig het nie. Bubble is geskik vir almal, ongeag of jy weet hoe om te kodeer of nie.
Vooraf begrip van frontend-tale kan jou egter 'n voorsprong gee, want dit stel jou in staat om vinnig uit te vind wat dit doen met betrekking tot gebeurtenishantering.
So, wat dink jy van Bubble se vermoëns?
Laat ons weet in die kommentaar!
Arbehi
Kan 'n winkel geskep word om produkte te verkoop met die bubble.io-nutsding?