Bubble posisjonerer seg ikke bare som en annen dra-og-slipp-bygger. Den hevder at du kan generere, distribuere og skalere fullstendige web- og mobilapper fra én enkelt plattform.
Det er et stort utsagn, og jeg var nysgjerrig på å se om den kunne levere noe produksjonsklart, eller om det bare ville være et raskt prototypeverktøy.
I denne gjennomgangen av Bubble App Builder vil jeg ta deg gjennom min fullstendige praktiske test, og vise deg nøyaktig hva som skjedde fra registrering til bygging av min første app. Du vil få et klart bilde av om Bubble er det rette valget for ditt neste prosjekt.
Hva er Bubble App Builder?
Det som får Bubble til å skille seg ut er dens evne til å gå utover enkle prototyper. Du kan faktisk lanserere og skalere reelle produkter, slik som markedsplasser, SaaS-verktøy og interne plattformer. Den støtter til og med native mobilapper, slik at du kan publisere til iOS og Android fra samme build.
Hvem er det for?
Bubble er laget for;
- Alle som ønsker å gjøre en idé om til en fungerende app uten å måtte ansette et utviklingsteam.
- Gründere for å raskt validere og skalere oppstartsbedrifter uten å pådra seg ekstra ingeniørkostnader.
- Frilansere og byråer for å levere profesjonelle apper raskere, ofte som white-label-løsninger for kunder.
- Foretak som bruker det til interne verktøy og forretningskritiske apper på grunn av innebygd sikkerhet og skalerbarhet.
- Enkeltstående skapere (folk uten programmeringsbakgrunn) kan bygge apper som markedsplasser, SaaS-plattformer eller AI-verktøy ved hjelp av Bubbles dra-og-slipp-editor og AI-funksjoner.
Fordeler og ulemper med Bubble App Builder
- Enkel dra-og-slipp-editor
- AI-drevet app-generering
- Tusenvis av tilgjengelige plugins
- Sterk fellesskapsstøtte
- Ingen koding nødvendig for å komme i gang
- Kraftig responsiv designmotor
- Gratisplanen har begrensede funksjoner
- API-integrasjoner begrenset på gratisnivået
- Bratt læringskurve for avanserte alternativer
Nøkkelfunksjoner i Bubble App Builder
- Visuell dra-og-slipp-editor
- AI-drevet app-generering
- Responsiv designmotor for alle enheter
- Innebygd database og datamodellering
- Automatisering av arbeidsflyt for applogikk
- Brukerautentisering og kontoadministrasjon
- API-tilkobler for eksterne tjenester
- Plugin-markedsplass med over 6 000 alternativer
- Versjonskontroll med støtte for branching
- Native mobilapputvikler (beta)
- Serverlogger og arbeidsmengdesporing
- Integrert debugger for arbeidsflyter
- Distribusjon fra utvikling til live
Min praktiske erfaring med Bubble App Builder: En trinn-for-trinn-guide
Dette er delen av gjennomgangen som betyr mest for meg, og sannsynligvis for deg også. Markedsføringssider kan love gull og grønne skoger, men den virkelige testen er hva som skjer når du faktisk setter deg ned for å bruke verktøyet. Derfor la jeg ekstra vekt på min praktiske erfaring. Fra registrering til utforsking av dashbordet ga disse første trinnene meg det klareste bildet av hva nye brukere faktisk vil møte.
Komme i gang: Registrering og førsteinntrykk
Jeg begynte på Bubbles hjemmeside og ble møtt av det dristige utsagnet: «BUILD APPS WITH AI, NO CODE REQUIRED.» Det satte umiddelbart tonen, og lovet mer enn bare prototyper, samtidig som det fremhevet at jeg faktisk kunne lansere en fungerende app.
Mitt første steg var å klikke «Get started» oppe i høyre hjørne. Registreringssiden lastet raskt, og jeg hadde to klare alternativer: fortsette med Google eller opprette en konto med e-post og passord. Jeg valgte e-postløsningen.
Selve skjemaet var ryddig. Passordfeltet håndhevet strenge regler og viste sanntidsbekreftelser mens jeg skrev. Det var ikke vanskelig.
Etter å ha skrevet inn detaljene mine, kastet Bubble inn et par onboarding-undersøkelser: «Where did you hear about Bubble?» (jeg valgte Search) og «How do you plan to use Bubble?» (jeg valgte «Build» i stedet for å ansette noen). Disse var ikke plagsomme, men de la til litt ekstra i flyten.
Neste steg spurte meg om jeg ville starte med en web– eller mobil-app. Jeg valgte web siden mobilalternativet fortsatt var i beta. Deretter ga Bubble et valg: gå rett inn i AI-appgeneratoren eller gå direkte til editoren.
Jeg valgte bevisst «Skip and take me to the editor» fordi jeg ønsket å se rågrensesnittet før jeg lot AI bygge noe for meg.
Et punkt med friksjon: Før jeg kunne gå videre, promotet Bubble en 14-dagers gratis prøveperiode for premiumfunksjoner, som krevde innlegging av betalingsinformasjon. Jeg klikket meg ut og valgte i stedet «Start with basic features» slik at jeg kunne teste ting på gratisplanen.
På denne måten unngikk jeg å legge inn kredittkortopplysninger med en gang. Et stort pluss for uformelle testere som meg.
Enn inne ble jeg møtt av en leken lasteskjerm som viste meldinger som “Assembling backend workflows…” og “Initiating handshake with the multiverse…”. Det var quirky og lystig, men tok heldigvis ikke for lang tid.
Da editoren lastet, var mitt førsteinntrykk at Bubble føles mer som et profesjonelt utviklingsmiljø enn et lettvektsleketøy. På venstre side så jeg faner for Design, Workflow, Data, Styles, Plugins og Settings. Design-fanen ga meg dra-og-slipp-elementer som tekst, knapper, grupper og enda mer avanserte alternativer som popups og repeterende grupper.
Å bytte til Workflow-fanen gjorde det klart at jeg kunne definere logikk uten å skrive kode, mens Data-fanen lot meg bygge strukturerte databaser med innebygde personvernregler.
Bygging av min første app med Bubble AI
Etter registreringen ønsket jeg å se hvor enkelt, intuitivt og rett frem det virkelig er å bygge en app i Bubble. Dette er hvor en AI-appbygger viser sin verdi, fordi hvis jeg kan beskrive hva jeg trenger og se systemet generere et fungerende grunnlag, lever det virkelig opp til løftet om «no-code».
På dashbordet mitt viste Bubble et kort for kontoen min med «2 Bubble project» allerede oppført under brukernavnet mitt. For å starte på nytt klikket jeg «Create a project.» øverst i høyre hjørne av denne siden.
En modal dukket opp og ba meg navngi prosjektet og velge et utgangspunkt. Jeg skrev inn «Personal finance app» og beholdt standardalternativet, “Start with a web app → Start with AI.”
Andre veier, som å starte fra en tom app eller en mal, var også tilgjengelige, men jeg ønsket å teste Bubbles AI-generator.
Før jeg gikk videre la Bubble inn enda en oppgraderingsskjerm: «Build with premium features.» Den tilbød en 14-dagers gratis prøveperiode som krevde betalingsdetaljer. Siden jeg ikke ønsket å gi fra meg kortopplysningene mine enda, klikket jeg «Start with basic features» og hoppet over prøven.
Dette førte meg til AI-promptskjermen i mørk modus. Overskriften lød «What can we help you build?» og tekstboksen var forhåndsutfylt med det samme restaurantapp-eksemplet jeg hadde sett på hjemmesiden.
Jeg tømte den og skrev inn min egen detaljerte prompt, som var:
- En personlig finansapp som lar småbedriftseiere koble til kontoer, spore transaksjoner, se sammendrag og til og med få AI-drevne innsikter om sparing.
Når jeg sendte den inn, startet AI-genereringsprosessen. Bubble viste en rekke lekne fremdriftsmeldinger, som “Sketching out user features…” og “Adding polish…”.
Så, omtrent fem minutter senere, støtte jeg på mitt første hinder. En feilmelding dukket opp i hjørnet nederst: “There was an error generating your app. Please try again.” Rett før det hadde jeg også lagt merke til en merknad nederst som sa “3rd party APIs are not currently supported.”
Min opprinnelige prompt nevnte Stripe og Plaid, så jeg mistenker at kombinasjonen av disse kallene, pluss at jeg var på gratis/grunnplanen, fikk generatoren til å feile.
På det tidspunktet omformulerte jeg prompten, fjernet alle referanser til Stripe eller Plaid, og fokuserte den på appens kjernefunksjoner uten eksterne APIer. Jeg sendte inn på nytt, og etter ytterligere 5–7 minutters genereringstid ble prosessen fullført vellykket.
Da den var ferdig, kunngjorde Bubble at appen min, “FinEase Pro”, var klar. Jeg så umiddelbart en strukturert fler-sides applikasjon inne i editoren: en Dashboard-, Accounts-, Transactions-, Summaries– og Subscription-seksjon, alle med plassholderdata og navigasjon allerede oppkoblet.
Forhåndsvisning av appen i en ny fane ga meg en klar følelse av resultatet. Dashboard viste kontooversikter, nylige transaksjoner, inntekter vs. utgifter og en plassholder for et utgiftsdiagram.
Klikk på Accounts lot meg “add a new account”, mens Transactions viste et kategorifilter og en knapp for å opprette oppføringer. Summaries tilbød nedtrekksmenyer for å analysere finansdata etter måned eller år, og lovet til og med visuelle diagrammer som sektordiagrammer for utgifter og linjediagrammer for trender. Subscription-siden la opp gratis- og betalingsnivåer med oppgraderings- og kanselleringsalternativer.
Fra start til slutt matchet den genererte appen strukturen jeg hadde beskrevet. Den var ikke perfekt—noen seksjoner hadde plassholdertekst eller dummydata—men det var uten tvil et fungerende grunnlag.
Hvordan Bubble AI håndterer feil
Neste ville jeg se hvordan denne AI-appbyggeren faktisk håndterer feil inne i editoren. Siden dette er en no-code-plattform, forventet jeg ikke å debugge som en utvikler med stack traces og konsolllogger, men jeg måtte likevel vite: hva skjer når noe bryter? Kan jeg fange det? Kan jeg logge det?
Og gir Bubble meg nok innsikt til å fikse problemer uten gjetting?
- Workflow-feilhendelser
Bubble bygger feilhåndtering rett inn i arbeidsflytene sine. Den viktigste er hendelsen “An unhandled error occurs”. Denne “catch-all”-hendelsen utløses når noe går galt i en arbeidsflyt, og du ikke har lagt til en mer spesifikk håndterer.
Herfra kan du bestemme hva som skjer:
- Vis en brukervennlig varsling i stedet for en kryptisk systemmelding
- Logg feilen til databasen din for gjennomgang
- Eller diriger brukere til en egendefinert feilmeldingsside
Så, i venstremenyen klikket jeg Workflows, og trykket på den blå + New-knappen. Fra listen over alternativer valgte jeg “An unhandled error occurs”.
Den dukket umiddelbart opp som en arbeidsflythendelse i editoren min. Derfra kunne jeg konfigurere hva den skulle “Catch”: enten enhver arbeidsflytfeil eller element-arbeidsflytfeil knyttet til en spesifikk knapp eller inndata.
Dette ga meg muligheten til å gå bredt (dekke alt) eller mer presist (for eksempel bare feil fra en registreringsknapp).
Jeg likte at jeg deretter kunne definere hva som skjer når denne hendelsen utløses. For eksempel kunne jeg vise en brukervennlig popup i stedet for Bubbles generiske melding, logge feilen i databasen min, eller til og med omdirigere brukeren til en egendefinert feilmeldingsside. For noen som ikke skriver kode, er dette nivået av kontroll over feilhåndteringer overraskende kraftig.
- API-feilhåndtering
Bubble anerkjenner også at moderne apper er avhengige av eksterne tjenester. Gjennom API Connector kan du la arbeidsflyter fortsette selv når et API-kall mislykkes.
Det betyr at du ikke ender opp i en blindvei. Du kan fange feilen, oppdage statuskoden (for eksempel 404 eller 500), og svare grasiøst med en egendefinert melding eller en fallback-handling. Du kan også sette opp backend-arbeidsflyter for å logge disse feilene, og skape et feilsøkingsspor for fremtidig debugging.
- Debugging- og loggeverktøy
Det var her Bubble virkelig overrasket meg. Plattformen gir deg en dedikert debugger som kjører sammen med appen din.
Som standard, når du klikker Preview for å åpne appen din i kjøre-modus, aktiveres debuggen automatisk. Du kan se at den er på på grunn av URL-parameteren:
debug_mode=true
En full forhåndsvisnings-URL ser omtrent slik ut:
https://my-bubble-application.bubbleapps.io/version-test?debug_mode=true
Hvis du noen gang vil skru debuggen av, kan du enkelt fjerne parameteren fra URL-en (eller sette den til false).
Når den er aktivert, vises debugbaren nederst i appen din. Derfra kan du bytte mellom Normal, Slow og Step-by-step kjøremodi. Step-by-step er hvor den virkelig utmerker seg. Du kan bokstavelig talt kjøre én handling om gangen og inspisere hva som skjer i hvert trinn.
Jeg brukte dette til å teste ting som abonnement-arbeidsflyter, og det ga meg reell innsikt i hvilken data som ble sendt, hvilke betingelser som ble evaluert, og nøyaktig hvor ting brøt sammen.
Bubbles feilhåndtering: Omfattende og overordnet inntrykk
Min personlige erfaring var blandet, men til syvende og sist oppmuntrende. Første gang jeg prøvde å generere appen min, ventet jeg i omtrent syv minutter bare for å få den fryktede meldingen:
Det var frustrerende, spesielt etter en så lang ventetid. Enda verre var at det eneste hintet jeg fikk var en merknad som sa «3rd party APIs are not currently supported.»
Siden min opprinnelige prompt nevnte Stripe og Plaid, regnet jeg med at det var grunnen.
Men da jeg justerte prompten for å fjerne APIer og sendte inn på nytt, gjenopprettet Bubble seg feilfritt og genererte appen på nye 5–7 minutter. Utover den første humpen fant jeg at Bubbles innebygde verktøy for feilfinning er blant de sterkeste jeg har sett i no-code-plattformer.
Tilpasning av design og oppsett
Hva om du vil endre noe i appen din eller få den til å se mer ut som merkevaren din? Bubble gir deg et imponerende nivå av kontroll, selv om appen din ble generert med AI.
Mellom globale stiler, en dra-og-slipp-visuell editor og en responsiv motor, låser ikke Bubble deg til en mal. Du kan forme appen din akkurat slik du vil.
Til venstre i editoren finner du Design-fanen, som fungerer som din hovedhub for å tilpasse utseendet og følelsen av applikasjonen din. Dette er hvor jeg brukte mesteparten av tiden min på å eksperimentere med elementer, justere oppsett og raffinere stiler.
Bubble bruker globale stiler og variabler for å holde designet ditt konsekvent. Jeg kunne definere en fargepalett og et skriftsett, og alle elementer knyttet til disse variablene ville bli oppdatert automatisk når jeg gjorde en endring.
Det betyr at hvis jeg justerer overskriftsfonten eller merkevarens primærfarge, vil oppdateringen gjelde i hele appen. For spesielle tilfeller kunne jeg overstyre globale stiler på individuelle elementer uten å bryte den generelle konsistensen.
Selve editoren er veldig «det du ser er det du får». Jeg dro elementer inn på lerretet, endret størrelse på dem og plasserte dem. Å klikke på noe—si overskriften Financial Dashboard—åpnet dens Property Editor på høyre side.
Derfra kunne jeg justere tekst, stil, grenser, farger eller til og med SEO-tag. For eksempel:
- Elements Tree på venstre side viste meg hvert element i en hierarki, noe som var spesielt nyttig for å flytte ting rundt eller fikse oppsettproblemer.
- Gjenbrukbare elementer som overskrifter eller footers som vises på flere sider, lar Bubble deg bygge dem én gang og gjenbruke dem overalt, noe som sparer mye tid.
- Moderne apper må se bra ut på alle skjermer, og Bubble takler dette med en innebygd responsiv motor. Hvert element sitter i en container med oppsettsregler som ligner på CSS Flexbox.
- I tillegg kunne jeg sette en container til å oppføre seg som en rad eller en kolonne, justere elementer i forhold til forelderen, og definere hvordan de skal oppføre seg når skjermen krymper. Breakpoints lar meg spesifisere når oppsett byttes (for eksempel stabling av kolonner til en enkelt vertikal liste på mobil).
- Plugins som Classify lar deg tildele CSS-klasser til elementer, eller du kan legge inn rå <style>-tagger i en HTML-blokk. For globale endringer kan du legge til CSS i appens innstillinger under SEO & Metatags.
Det som virkelig hjalp meg som førstegangsbruker var BubbleBot, assistenten som dukket opp etter at appen min var generert. Da jeg klikket Edit my app, spurte den meg direkte: Hvilken del av appen din vil du jobbe med først?
Denne typen kontekstbevisst veiledning reduserte overveldelsen og ga meg et klart inngangspunkt til å tilpasse appen min.
Jeg ble imponert over Bubbles fleksible designsystem. Kontrollgradens detaljnivå føltes som om jeg jobbet i et ordentlig front-end-designtool, ikke en forenklet no-code-plattform.
Den responsive motoren er et must for moderne apper, og selv om det krever litt læring, er den kraftig når du først får taket på det.
Den eneste forbeholdet er læringskurven. Property Editor er proppet med alternativer, og feilsøking av visuelle problemer (for eksempel justering ved et bestemt breakpoint) kan fortsatt kreve prøving og feiling.
Men med BubbleBot som trådte inn for å veilede meg, følte jeg meg aldri fastlåst.
Publisering av appen og legge til integrasjoner
Når jeg hadde en fungerende versjon av appen min, ønsket jeg å se hvor langt jeg kunne gå, spesielt med å legge til integrasjoner og deretter publisere den live.
I Bubble håndteres integrasjoner gjennom plugins. Dette er tillegg som utvider appens funksjonalitet, på samme måte som å installere apper på telefonen din.
Bubble har en egen plugin-markedsplass med tusenvis av gratis og betalte alternativer, som dekker alt fra Stripe-betalinger og Google-APIer til små verktøy som filopplastingsverktøy eller hjelpepluginer for tilfeldige brukere.
Fra Plugins-fanen i editoren kunne jeg klikke + Add plugins, som åpnet plugin-biblioteket. Markedsplassen er organisert i kategorier som Analytics, AI, E-commerce, Payments, Media, Customer Support, Testing, og mer (som vist i skjermbildet). Du kan også filtrere etter type (API, Action, Element, Event, osv.) og sortere etter flest installasjoner eller høyest rangering.
Noen av de mest populære pluginene jeg la merke til inkluderte:
- Toolbox – En gratis plugin brukt til å kjøre tilpassede skript (800K+ installasjoner).
- Stripe – For betalinger og abonnementer.
- Rich Text Editor – For å redigere innhold direkte i appen.
- Classify – For tilpasset CSS-kontroll på tvers av elementer.
Det jeg likte her er at Bubble ikke er et lukket system. Du er ikke begrenset til det plattformen gir deg rett ut av boksen. Hvis du ikke finner pluginen du trenger, kan du til og med lage og publisere din egen plugin til markedsplassen.
Dette gjør Bubble mye mer utvidbart enn mange andre no-code-byggere jeg har testet.
Etter å ha lagt til plugins og gjort endringer, er neste store steg å publisere appen. I Bubble refereres denne prosessen til som å deploye, og den er overraskende enkel.
Bubble-apper kjører i to miljøer:
- Development – Der du tester og bygger.
- Live – Produksjonsversjonen, som er tilgjengelig for faktiske brukere.
Å deploye innebærer i praksis å flytte appen din fra Development til Live. For å gjøre dette klikket jeg Deploy-button øverst til høyre i editoren. Bubble sjekket deretter Issue Tracker. Hvis noen feil var flagget, måtte de løses før deployen kunne fortsette.
Når jeg deployet, ble jeg bedt om å legge til en beskrivelse av endringene jeg hadde gjort. Dette kan kanskje høres ut som et lite steg, men det er faktisk svært nyttig. Bubble lagrer en deployhistorikk, så hvis en ny versjon introduserer feil, kan du enkelt tilbakestille til en stabil versjon.
En annen ting jeg la merke til er at hvis brukere allerede er aktive i appen din når du deployer en oppdatering, viser Bubble automatisk et “refresh”-banner øverst på siden. Når de klikker ‘Refresh’, byttes de umiddelbart over til den nye versjonen.
Brukere som ikke var pålogget på tidspunktet, vil enkelt laste inn den oppdaterte versjonen neste gang de besøker.
Dette betyr at oppdateringer skjer smidig og ikke krever nedetid, selv om tidspunkt fortsatt er viktig. Hvis appen din er i mye bruk, vil du kanskje deploye i perioder med lav trafikk for å unngå å forstyrre aktive økter.
Bubble-prising og planer
Prisingen på Bubble er satt opp slik at du kan starte gratis og bare betale når du er klar til å publisere. Jeg begynte på gratisplanen og ble overrasket over hvor mye den tilbød for et læringsnivå.
Det virkelige spranget kommer med Starter-planen. Dette nivået låser opp alt du trenger for å gå live, inkludert: tilkobling av egendefinert domene, live-deployering av app osv. Hvis appen din begynner å få gjennomslag, legger Growth-planen til flere avanserte funksjoner.
For større prosjekter og team inkluderer Team-planen: fem app-editorer, sub-apper for multi-merkevare- eller white-label-prosjekter, tjuefem tilpassede brancher og tjue dager med serverlogger.
Øverst er Enterprise-prisingen tilpasset. Den er rettet mot bedrifter som trenger maksimal kontroll, med dedikerte servere, sentralisert administrasjon, tilpassede arbeidsenheter, oppetidsgarantier og prioritert support.
Bubble Website Builder-planer
Betalinger håndteres gjennom Stripe, og Bubble følger en ingen-refusjons-policy: enhver betalt måned refunderes ikke og kan ikke krediteres tilbake til kontoen din.
Bubbles modell basert på arbeidsmengde er også gjennomsiktig. Du vil få en e-post ved 75 % og 100 % av arbeidsmengdebruken, med mulighet til å kjøpe tillegg eller sette en brukstak.
Alternativer til Bubble AI App Builder
Bubble tilbyr omfattende kontroll og fleksibilitet, men har en brattere læringskurve. Et godt alternativ for de som prioriterer enkelhet og forutsigbar prising, spesielt for interne verktøy eller kundeportaler, er Softr.
Softr opererer på et høyere abstraksjonsnivå, ved å bruke ferdiglagde, tilpassbare blokker for å bygge applikasjoner basert på eksisterende datakilder som Airtable eller Google Sheets.
Bubble AI vs Softr: Rask sammenligning
| Funksjon | Bubble | Softr |
|---|---|---|
| Brukervennlighet | Moderat til bratt læringskurve. Visuell programmering krever tid. | Svært enkelt å navigere. Blokk-basert bygger forkorter læringskurven. |
| Tilpasningsmuligheter | Høy. Pikselsikker brukergrensesnitt, komplekse arbeidsflyter, tusenvis av plugins. | Begrenset. Ferdiglagde blokker og maler er mindre fleksible. |
| Backend og data | Innebygd database og API Connector for tilpassede integrasjoner. | Integreres med Airtable og Google Sheets som primære datakilder. |
| Prising | Brukerbasert «workload unit»-modell, mindre forutsigbar ved skalering. | Brukerbasert prising, gjennomsiktig og forutsigbar. |
| App-type | Flott for SaaS, markedsplasser, apper med flere brukere. | Best for interne verktøy, kundeportaler og medlemsnettsteder. |
| Mobil | Native mobilbygger og støtte for PWAs. | Kun webapper og PWAs, ingen native apper. |
Bubble passer bedre hvis:
- Du er en gründer eller utvikler som bygger et fullverdig SaaS-produkt, en markedsplass eller noe som krever omfattende tilpasning.
- Du trenger avanserte arbeidsflyter, pikselsikkert design og en innebygd backend som kan håndtere skala.
Softr er ideell for:
- Små team eller enkeltpersoner som ønsker noe raskt, ryddig og enkelt å vedlikeholde.
- Hvis appen din primært handler om å presentere eller administrere data fra Airtable eller Google Sheets, for eksempel et internt verktøy, en kundeportal eller et medlemsnettsted.
Endelig vurdering av Bubble No-Code App Builder
Bubble er en av de mest kapable no-code-plattformene jeg har brukt. Den tilbyr fleksibilitet og kontroll, i tillegg til en innebygd database, arbeidsflytmotor og en responsiv editor.
Selv om verktøyet ikke er det enkleste å mestre, og pris basert på bruk kan gjøre kostnadene mindre forutsigbare etter hvert som du vokser, er det et verktøy du kan satse på for å gjøre idéen din om til en produksjonsklar app.
