Indholdsfortegnelse[Skjule][At vise]
- Hvad er Bubble.io?
- Hvad er visuel programmering?
- Hvilke typer apps kan du udvikle?
Opbygning af en app med Bubble (Tutorial)+-
- 1. Kom godt i gang
- 2. Konfiguration af database
- 3. Opbygning af arbejdsgange
- 4. Oprettelse af en nyhedshistorie
- 5. Visning af dynamisk indhold i feedet
- 6. Afsendelse af data mellem sider
- 7. Visning af dynamisk indhold på historiesiden
- 8. Visning af udgiverens artikel
- 9. Følgende forlag
- 10. Yderligere funktioner, du kan tilføje
- 11. Resultatet
- FORDELE
- ULEMPER
- Priser
- Konklusion
Jeg har for nylig været interesseret i andre metoder til webudvikling end HTML, CSS og JavaScript.
Med det voksende landskab uden kode var det ikke overraskende at opdage, at der er flere alternativer til de mere standardtilgange til udvikling af webapplikationer.
Du skal være bekendt med nogle af de mere kendte CMS-platforme, såsom WordPress, der stort set er kodefri. Men hvis du vil bygge webapps, kan sådanne platforme virke restriktive.
Her introducerer jeg dig til Bubble.io, en kraftfuld no-code værktøj der lader dig bygge webapps som aldrig før.
Lad os udforske det i dybden!
Hvad er Bubble.io?
Bubble er en ikke-teknisk platform, der kombinerer et visuelt programmeringssprog og et rammer for webudvikling.
Brugere kan bruge disse programmeringsværktøjer til at konstruere unikke onlineapplikationer, ændre databaser og processer, tilføje sidekomponenter (billeder, tekst, inputformularer, kort) og designe deres grænseflader.
Det er en markedsplads, hvor du kan opdage ideelle skabeloner, plugins og tjenester til at hjælpe dig med at opbygge stærke produkter.
Uden at skulle opsætte en typisk programmeringsramme, kan du oprette alt fra en markedsplads til et socialt netværk til et CRM (Customer Relationship Management) ved hjælp af Bubble.
Det giver kunderne mulighed for at oprette og tilpasse deres apps ved hjælp af en brugervenlig grænseflade og en peg-og-klik-editor.
Du kan bruge det i forbindelse med tjenester, der leverer en REST API, såsom Facebook, SQL, analytics og betalingsapps. Det giver brugerne mulighed for at bruge tid på at forbedre funktionaliteten og udseendet af deres applikationer, så de ser godt ud på tablets og mobile enheder.
Den passer til alle virksomhedsstørrelser, fra små til mellemstore til store; og tilgængelig for Windows, Mac og internettet.
Hvad er visuel programmering?
Visuel programmering er i bund og grund, hvad det lyder som. I stedet for manuelt at programmere ved at skrive kode, gør du det grafisk ved at klikke og trække komponenter ind på sider.
Lad dig ikke vildlede af den korte beskrivelse.
Det er ikke som enhver anden cookie-cutter-app eller webstedsopbygningsværktøj, du er stødt på online. De fleste app-byggere kræver, at du stoler på grundlæggende skabeloner og har ekstremt begrænset funktionalitet; de giver dig kun mulighed for at udvikle bestemte slags apps og begrænser din personalisering.
Selvom begrebet "visuel programmering" og "træk og slip" forekommer let i Bubble, er det enormt kraftfuldt.
Dets visuelle programmeringsmiljø giver dig ikke kun mulighed for at trække objekter såsom tekst, grafik, input og mere til en side, men det giver dig også mulighed for at konfigurere, hvad disse elementer gør.
Hvad laver Bubble?
Bubbles primære mål er at gøre det muligt for enhver at oprette webapps uden at skulle skrive kode.
Men selvom dette giver en let husket målsætning, udelader det en væsentlig del af historien. Vejen fra idé til marked er mere kompliceret end blot at skabe kodelinjer.
Et team af højtuddannede fagfolk, der arbejder med visse dele af appens oprettelse, vækst og vedligeholdelse, er påkrævet i konventionel udvikling. Overvej dette.
Hvad kræver hver app?
- Sikkerhed for at sikre, at ingen har uautoriseret adgang til data.
- En database til lagring og hentning af information såsom varer, artikler og opdateringer på sociale medier.
- Skalerbarhed for at muliggøre uhindret udvikling af brugerbasen og datavolumen.
- En behagelig brugergrænseflade for at gøre appen attraktiv og nem at bruge.
- Integration med forskellige tjenester og systemer.
Bubble erstatter langt mere end en koder. Det leverer alle disse tjenester på en visuelt tiltalende og meget automatiseret måde, hvilket gør det tænkeligt, hvis ikke enkelt, for en enkelt person at håndtere alt.
Mens tidligere no-code platforme har forsøgt at erstatte kodning på forskellige måder. Dens koncept er at fjerne så mange barrierer som muligt for en app at nå markedet, og håndtere alt fra responsivt design og animationer til hosting, versionsimplementering, sikkerhed og databaseoperationer.
Brug af API-stikket til at forbinde Bubble til andre tjenester
Dens API Connector er sandsynligvis det vigtigste plugin på markedet. Som navnet antyder, giver dette dig mulighed for at oprette forbindelse til andre apps og tjenester for at dele handlinger og data.
I stedet for at dykke ned i de tekniske detaljer om, hvordan dette fungerer, kan du overveje disse eksempler på, hvad API'er kan opnå:
- At få adgang til machine learning metoder som billedgenkendelse og oversættelse.
- Få de seneste vejroplysninger fra hvor som helst på jorden.
- Når en begivenhed udløses i Bubble, udveksles information på tværs af systemer, såsom etablering af et lead i dit CRM eller en aftale i din Google Kalender.
- Book et fly eller et hotelophold hvor som helst i verden.
- Få telefonnummer, placering, fotografier, logo og anmeldelser for enhver virksomhed på Google Maps.
Brug af plugins til at forbedre native funktioner
Teknisk blander det JavaScript-kodemoduler, CSS og HTML til en funktionel node. Ansøgning skrevet i JS.JSON fungerer som grundlaget for sit eget sprog.
Selvom du ikke behøver at forstå disse terminologier fuldt ud for at konstruere apps, indikerer de en nøglekendsgerning: den overholder kendte og anerkendte webstandarder, hvilket giver udviklere mulighed for at forbedre dens oprindelige funktionalitet betydeligt.
Dette ses allerede på plugin-siden, hvor hundredvis af gratis og betalte udvidelser til den grundlæggende funktionalitet er tilgængelige. Det indebærer også, at hvis du når et punkt, hvor dens grundlæggende muligheder er utilstrækkelige, er der masser af JavaScript-eksperter, der er villige til at lave en skræddersyet løsning til dig.
Hvilke typer apps kan du udvikle?
Du kan oprette en bred vifte af applikationer, hvoraf nogle er angivet nedenfor.
- Apps til specialiserede markeder med et fællesskab.
- Apps til jobtavler i en række forskellige sektorer.
- Software til hospitalsbemanding.
- Point-of-sale software til fysiske butikker.
- Dental office software med en hvid etiket.
- Personlig virksomhedsbeholdning og kundeservicesoftware.
- Mægler- og kundevendte applikationer til aggregering af fast ejendom.
- Apps til begivenheder og kurser på markedet (og endda både).
- Professionelle certifikater kræver interne testapplikationer.
- Ansøgninger til førstehjælpere.
- Medarbejderstyringssoftware til internt brug.
For at være ærlig er platformen ikke designet til at gøre alt. Det er måske ikke det ideelle valg, hvis du designer en spilapp med komplekse billeder og bevægelse. Desuden, hvis du opretter en indbygget app (en til app-butikker), skal du integrere den med en anden tredjepartstjeneste.
Nøglefunktioner
Bubble er propfyldt med funktioner. Vi vil ikke være i stand til at dække dem alle her, men vi vil forsøge at dække de mest væsentlige.
1. plugins
Det giver dig mulighed for at inkludere funktionalitet fra adskillige værktøjer på internettet i din webapplikation. Hvis du for eksempel ønsker, at dine brugere skal logge ind med deres Facebook-konto, kan du bruge Facebook-plugin'et til at gøre dette.
2. Udvikle
Det giver dig mulighed for at konstruere dynamiske flerbruger-apps til desktop- og mobilwebbrowsere samt alle de værktøjer, der kræves for at bygge et websted, der ligner Instagram eller Airbnb.
3. design
Du kan skabe mobilvenlige layouts og dynamisk indhold for at sætte prikken over i'et på et produkt, som du med glæde vil vise frem til andre.
4. Hosting
Behøver aldrig at bekymre dig om servervedligeholdelse, infrastruktur eller drift igen og igen.
Det tager sig af udrulning og hosting for dig på en sikker og sikker måde. Antallet af brugere, trafikmængde og datalagring er alle ubegrænsede.
Opbygning af en app med Bubble (Tutorial)
Lad os nu gå i gang og udforske, hvordan du kan bygge en nyhedsapp på Bubble.
1. Kom godt i gang
For at begynde skal du først tilmeld dig en gratis konto på Bubble.
Vi starter med at bruge Bubbles visuelle designværktøj til at forme vores platforms brugergrænseflade. Nogle af de vigtigste sider, der skal inkluderes, er angivet nedenfor:
- Uploadside – En hjemmeside, hvor udgivere vil udvikle og distribuere artikler.
- Hjemmeside – En liste over nyligt udgivne historier vises.
- Fortællingsside – En side, hvor hver unik historie kan findes.
- Udgiverside - En side, der viser en liste over historier fra en bestemt udgiver.
2. Konfiguration af database
Når du har lagt dit produkts display ud, kan du fokusere på at opbygge de datafelter, der vil give næring til din applikation. Vi bruger disse felter til at forbinde de arbejdsgange, der ligger til grund for dit produkt.
I dette eksempel vil vi etablere to forskellige datatyper for hver nyhed. Den ene datatype vil indeholde de grundlæggende fakta om en historie (såsom titlen, det fremhævede billede og udgiveren), mens den anden datatype vil indeholde større indholdsfiler, såsom hele fortællingen.
Ved at definere dem som diskrete datatyper kan vi kun indlæse de nødvendige oplysninger, når det er påkrævet, hvilket begrænser mængden af materiale, som Bubble-editoren skal producere.
Følgende datatyper og felter oprettes:
Datatype: Bruger
Felter:
- Navn
- Følgende udgivere er en liste over udgivere. Vigtig bemærkning: Oprettelse af et felt som en liste baseret på en særskilt datatype giver dig mulighed for at inkorporere alle dets væsentlige datafelter uden besvær uden at skulle oprette ekstra felter.
Datatype: Historie
Felter:
- Titel
- Udvalgt billede
- Forfatter
- Boligtype
- Forlægger
- Historiens indhold
Datatype: Historiens indhold
Felter:
- Historiens indhold
Datatype: Forlægger
Felter:
- Navn
- Logo
- Abonnenter
3. Opbygning af arbejdsgange
Nu hvor du har organiseret din applikations design og database, er det tid til at begynde at sætte alt sammen og få det til at fungere.
Arbejdsgange er den primære metode til at opnå dette i Bubble.
Hver arbejdsgang opstår, når en hændelse opstår (f.eks. en bruger klikker på en knap) og derefter udfører en sekvens af "handlinger" som svar (f.eks. "tilmeld brugeren", "foretag en ændring af databasen" og så videre) .
4. Oprettelse af en nyhedshistorie
Den første funktion, vi tilbyder, er et værktøj, der giver udgivere mulighed for at skrive og poste nyheder på webstedet.
På uploadsiden vil vi begynde med at inkorporere en masse input-elementer, der vil blive anvendt til at indtaste data i vores database. Tekstinput, en billeduploader og et dropdown-valg er eksempler på disse felter.
Vi bliver også nødt til at tilpasse udgiverens rullemenu for at vise en liste over dynamiske muligheder. Da hver ny artikel vil blive føjet til en udgivers liste over samlede artikler, skal vi vælge en eksisterende udgiver fra vores database.
Når du indstiller denne rullemenu, vælger vi den type muligheder, der skal være udgiver.
Herefter vil vores datakilde scanne vores database og returnere en liste over alle aktuelle publikationer. Til sidst vil vi ændre kildeteksten til at inkludere udgiverens navn.
Når en forfatter har indtastet de nødvendige oplysninger i hver indgang på siden, klikker de på udgiv-knappen for at generere en ny fortælling.
Derefter vil du i din database oprette en ny ting med datatypen sat til fortælling.
Så bliver vi nødt til at begynde at udfylde vores database med de nødvendige felter. Tilslut hver af inputkomponenterne på siden til deres respektive databasekolonner.
Først opretter vi historiens indholdstype, som til sidst vil blive knyttet til selve fortællingen.
Dernæst tilføjer vi endnu et trin til denne procedure og genererer noget andet – denne gang selve fortællingen.
Det er muligt at integrere disse data ubesværet gennem hele din platform ved at integrere det første fortællende materiale, vi udviklede med denne fortælling.
En ny fortælling vil blive produceret hver gang denne procedure aktiveres.
5. Visning af dynamisk indhold i feedet
Når udgivere begynder at uploade materiale til din mobilapp, skal vi begynde at skabe logikken på din startside, der viser hver artikel som en dynamisk liste. Dette kan opnås ved at bruge vores gentagne gruppeelement.
Gentagende grupper arbejder med din database for at præsentere og opdatere en liste over dynamisk materiale.
Når du anvender en gentagende gruppe, skal du først linke elementet til en datatype i din database.
I dette tilfælde vil du kategorisere den slags materiale som fortællinger. Du skal også angive datakilden som en liste over alle tabellerne i din database.
Vi arrangerer også denne tilbagevendende gruppe efter hver histories startdato, og viser listen i omvendt kronologisk rækkefølge. Du kan nu begynde at organisere det dynamiske materiale, der vises i hvert gitter.
Du skal blot udfylde den øverste række med det relevante materiale, du ønsker at vise, og dette kraftfulde element vil udfylde de resterende kolonner med data fra din nuværende database.
6. Afsendelse af data mellem sider
Det er også muligt at konstruere begivenheder inden for hver række i en gentagende gruppe. Når du udvikler navigationsfunktioner til din platform, vil denne funktionalitet være praktisk.
Vores nyhedsapps hjemmeside viser blot en forhåndsvisning af hver historie, inklusive udgiveren, et fremhævet billede og historiens titel.
Det viser dog ikke hele indholdet af en artikel, før brugeren klikker sig videre til historiesiden. Vi bruger vores workflow-editor til at overføre data mellem sider for at vise dette materiale.
For at begynde skal du oprette en proces, der sender en bruger til historiesiden, når der klikkes på billedet af en historie.
Brug en navigationsbegivenhed til at overføre en bruger til en anden side, mens du udvikler denne proces.
Vælg den destinationssidetype, der skal være den fortællende side fra rullemenuen. Du bliver derefter nødt til at give yderligere information til denne side, så Boble-editoren forstår, hvilken unik historie, der skal vises.
De oplysninger, du skal give, kommer fra den aktuelle cellefortælling.
7. Visning af dynamisk indhold på historiesiden
Du kan nemt hente disse begivenhedsdata og vise det relevante materiale fra fortællingen, når en bruger sendes til en bestemt historieside.
For at oprette denne funktion skal du først kontrollere, at målsidetypen matcher den dataegenskab, som du leverer gennem arbejdsgangen. I denne situation skal du knytte historiesiden til en historieegenskab.
Det kan simpelthen trække og levere passende data fra eksisterende kilder ved at kategorisere typen af indhold på en side.
Du kan nu begynde at indsætte dynamisk materiale i felter, der viser information fra en enkelt tabel.
8. Visning af udgiverens artikel
Efter at have læst en nyhed, kan en bruger vælge at undersøge udgiverens hele katalog af artikler. Hvis du har udviklet en udgiverdatatype, er det lige så enkelt at oprette en separat side til udgivere som at oprette vores originale startside.
På denne side skal vi begynde med at indstille sidetypen til udgiver.
Kopier derefter den gentagende gruppe fra startsiden og rediger indstillingerne.
I dette tilfælde vil vores gentagende gruppes datakilde lede efter alle eksisterende artikler, hvis udgiver er den aktuelle sideudgiver.
9. Følgende forlag
Den tredje grundlæggende funktion, vi bygger til vores MVP, er evnen til at følge en udgiver på platformen. Vi tilføjer en følg-knap på udgiversiden. Når vi klikker på dette ikon, starter vi en ny proces, der ændrer en ting.
Tilføjelse af den aktuelle sideudgiver til deres liste over følgende publikationer vil ændre den aktuelle bruger.
Herefter bliver vi nødt til at opdatere den aktuelle sideudgivers liste over følgere ved at tilføje den aktuelle bruger.
10. Yderligere funktioner, du kan tilføje
Nu hvor du er fortrolig med at bygge tilpassede datafelter og præsentere dynamisk information, kan du være kreativ med de oplevelser, du skaber til dit produkt. Du kan også inkludere:
- Opret en funktion, der giver brugerne mulighed for at gemme indhold til senere læsning.
- I bunden af hvert stykke skal du angive en tilbagevendende samling af foreslåede artikler.
- Opret et søgeværktøj til at hjælpe folk med at finde nyt indhold på webstedet.
11. Resultatet
Din endelige app vil se nogenlunde sådan ud.
FORDELE
- Muligheden for at oprette forbindelse til mange API'er og plugins.
- En nem at bruge, kodefri applikation.
- Folk uden programmeringserfaring vil drage fordel af dette.
- Design værktøjer, der er både alsidige og kraftfulde.
- Hurtig forespørgselsbehandling.
ULEMPER
- Øget pålidelighed.
- Databehandlingshastigheden er langsom.
- Ydeevnen er begrænset.
Priser
Den gratis plan giver dig mulighed for at lære om platformen og udvikle din applikation.
Betalte abonnementer inkluderer ekstramateriale som white-labeling, et brugerdefineret domæne, adgang til Bubble API og reserveret serverkapacitet, som er angivet nedenfor.
- Personligt – $25/måned (betales årligt) eller $29/måned (betales månedligt).
- Professionel – $115/måned (betales årligt) eller $129/måned (betales månedligt).
- Produktion - $475/måned (betales årligt) eller $529/måned (betales månedligt).
Kom godt i gang med Bubble gratis
Konklusion
Bubble er et glimrende alternativ til at bygge webapplikationer, der kun kan vise information eller har en minimal brugergrænseflade.
Det er ret simpelt at bruge, og tutorials fra Bubble er yderst hjælpsomme. Dens online visuelle editor, der giver dig mulighed for at designe webapps baseret på dine præferencer.
Og det bedste er, at du ikke behøver nogen programmeringserfaring eller ekspertise. Bubble er passende for alle, uanset om du forstår at kode eller ej.
Forudgående forståelse af frontend-sprog kan dog give dig et forspring, fordi det giver dig mulighed for hurtigt at finde ud af, hvad det gør med hensyn til hændelseshåndtering.
Så hvad synes du om Bubbles muligheder?
Lad os vide i kommentarerne!
Arbehi
Kan en butik oprettes til at sælge produkter ved hjælp af bubble.io-værktøjet?