Jag har nyligen varit intresserad av andra metoder för webbutveckling än HTML, CSS och JavaScript.
Med det växande no-code-landskapet var det inte förvånande att upptäcka att det finns flera alternativ till de mer standardiserade metoderna för att utveckla webbapplikationer.
Du måste vara bekant med några av de mer välkända CMS-plattformarna, som WordPress som är ganska kodfria. Men om du vill bygga webbappar kan sådana plattformar verka restriktiva.
Här presenterar jag dig för Bubble.io, en kraftfull inget kodverktyg som låter dig bygga webbappar som aldrig förr.
Låt oss utforska det på djupet!
Vad är Bubble.io?
Bubble är en icke-teknisk plattform som kombinerar ett visuellt programmeringsspråk och ett ramverk för webbutveckling.
Användare kan använda dessa programmeringsverktyg för att konstruera unika onlineapplikationer, ändra databaser och processer, lägga till sidkomponenter (bilder, text, inmatningsformulär, kartor) och designa sina gränssnitt.
Det är en marknadsplats där du kan upptäcka idealiska mallar, plugins och tjänster som hjälper dig att bygga starka produkter.
Utan att behöva sätta upp ett typiskt programmeringsramverk kan du skapa allt från en marknadsplats till ett socialt nätverk till ett CRM (Customer Relationship Management) med hjälp av Bubble.
Det ger kunderna möjlighet att skapa och anpassa sina appar med ett användarvänligt gränssnitt och en peka-och-klicka-redigerare.
Du kan använda den i kombination med tjänster som tillhandahåller ett REST API, som Facebook, SQL, analytics och betalningsappar. Det gör det möjligt för användare att ägna tid åt att förbättra funktionaliteten och utseendet på sina applikationer så att de ser bra ut på surfplattor och mobila enheter.
Den är lämplig för alla företagsstorlekar, från små till medelstora till stora; och tillgänglig för Windows, Mac och webben.
Vad är visuell programmering?
Visuell programmering är i huvudsak vad det låter som. Istället för att manuellt programmera genom att skriva kod gör du det grafiskt genom att klicka och dra komponenter till sidor.
Låt dig inte vilseledas av den korta beskrivningen.
Det är inte som alla andra cookie-cutter-appar eller webbplatsbyggande verktyg som du har stött på online. De flesta appbyggare kräver att du förlitar dig på grundläggande mallar och har extremt begränsad funktionalitet; de låter dig bara utveckla specifika typer av appar och begränsa din anpassning.
Även om begreppen "visuell programmering" och "dra och släppa" verkar lätt i Bubble, är det oerhört kraftfullt.
Dess visuella programmeringsmiljö låter dig inte bara dra objekt som text, grafik, inmatningar och mer till en sida, utan den låter dig också konfigurera vad dessa element gör.
Vad gör Bubble?
Bubbles primära mål är att göra det möjligt för vem som helst att skapa webbappar utan att behöva skriva kod.
Men även om detta ger en lätt att komma ihåg målsättning, utelämnar det en betydande del av historien. Vägen från idé till marknad är mer komplicerad än att bara skapa kodrader.
Ett team av högutbildade yrkesmän som arbetar med vissa delar av appens skapande, tillväxt och underhåll krävs i konventionell utveckling. Överväg detta.
Vad kräver varje app?
- Säkerhet för att säkerställa att ingen har obehörig åtkomst till data.
- En databas för att lagra och hämta information som artiklar, artiklar och uppdateringar av sociala medier.
- Skalbarhet för att möjliggöra obehindrad utveckling av användarbas och datavolym.
- Ett trevligt användargränssnitt för att göra appen attraktiv och enkel att använda.
- Integration med olika tjänster och system.
Bubble ersätter mycket mer än en kodare. Den tillhandahåller alla dessa tjänster på ett visuellt tilltalande och mycket automatiserat sätt, vilket gör det tänkbart, om inte enkelt, för en enda person att hantera allt.
Medan tidigare no-code-plattformar har försökt ersätta kodning på olika sätt. Dess koncept är att ta bort så många hinder som möjligt för en app att nå marknaden, hantera allt från responsiv design och animationer till hosting, versionsdistribution, säkerhet och databasoperationer.
Använda API-anslutningen för att ansluta Bubble till andra tjänster
Dess API Connector är förmodligen den viktigaste plugin på marknaden. Som namnet antyder låter detta dig ansluta till andra appar och tjänster för att dela åtgärder och data.
Istället för att fördjupa sig i de tekniska detaljerna för hur detta fungerar, överväg dessa exempel på vad API:er kan åstadkomma:
- Få tillgång till maskininlärning metoder som bildigenkänning och översättning.
- Få den senaste väderinformationen var som helst på jorden.
- När en händelse utlöses i Bubble utbyts information mellan olika system, som att etablera en lead i ditt CRM eller ett möte i din Google-kalender.
- Boka ett flyg eller en hotellvistelse var som helst i världen.
- Få telefonnummer, plats, fotografier, logotyp och recensioner för alla företag på Google Maps.
Använda plugins för att förbättra inbyggda funktioner
Tekniskt sett blandar den JavaScript-kodmoduler, CSS och HTML till en funktionell nod. Ansökan skriven i JS.JSON fungerar som grunden för det egna språket.
Även om du inte behöver förstå den terminologin fullt ut för att konstruera appar, indikerar de ett nyckelfaktum: den följer kända och erkända webbstandarder, vilket gör att utvecklare kan förbättra dess inbyggda funktionalitet avsevärt.
Detta kan redan ses på pluginsidan, där hundratals gratis och betalda tillägg till den grundläggande funktionaliteten är tillgängliga. Det innebär också att om du når en punkt när dess grundläggande funktioner är otillräckliga, finns det gott om JavaScript-experter som är villiga att skapa en skräddarsydd lösning för dig.
Vilka typer av appar kan du utveckla?
Du kan skapa ett brett utbud av applikationer, av vilka några ges nedan.
- Appar för specialiserade marknader med en community.
- Appar för jobbbrädor inom en mängd olika sektorer.
- Programvara för sjukhuspersonal.
- Point-of-sale programvara för fysiska butiker.
- Tandvårdsprogramvara med en vit etikett.
- Personlig affärsinventering och kundtjänstprogramvara.
- Mäklare och kundnära applikationer för fastighetsaggregation.
- Appar för evenemang och kurser på marknaden (och även båtar).
- Yrkescertifikat kräver interna testapplikationer.
- Ansökningar för första responders.
- Personalhanteringsprogramvara för internt bruk.
För att vara ärlig, plattformen är inte designad för att göra allt. Det kanske inte är det perfekta valet om du designar en spelapp med komplexa bilder och rörelser. Dessutom, om du skapar en inbyggd app (en för appbutiker), måste du integrera den med en annan tredjepartstjänst.
Nyckelfunktioner
Bubble är fullproppad med funktioner. Vi kommer inte att kunna täcka dem alla här, men vi ska försöka täcka de mest väsentliga.
1. Insticksprogram
Det låter dig inkludera funktionalitet från många verktyg på Internet i din webbapplikation. Om du till exempel vill att dina användare ska logga in med sitt Facebook-konto kan du använda Facebook-plugin för att göra detta.
2. Utveckla
Det låter dig bygga dynamiska appar för flera användare för stationära och mobila webbläsare, såväl som alla verktyg som krävs för att bygga en webbplats som liknar Instagram eller Airbnb.
3. utformning
Du kan skapa mobilvänliga layouter och dynamiskt innehåll för att ge en produkt som du gärna visar upp för andra.
4. värd
Behöver aldrig oroa dig för underhåll av server, infrastruktur eller drift om och om igen.
Det tar hand om driftsättning och hosting åt dig på ett säkert och säkert sätt. Antalet användare, trafikvolym och datalagring är alla obegränsade.
Bygga en app med Bubble (handledning)
Låt oss nu sätta igång och utforska hur du kan bygga en nyhetsapp på Bubble.
1. Komma igång
För att börja måste du först registrera dig för ett gratis konto på Bubble.
Vi börjar med att använda Bubbles visuella designverktyg för att forma vår plattform användargränssnitt. Några av de viktigaste sidorna att inkludera finns nedan:
- Uppladdningssida – En webbplats där publicister kommer att utveckla och distribuera artiklar.
- Hemsida – En lista över nyligen publicerade berättelser visas.
- Berättande sida – En sida där varje unik berättelse kan hittas.
- Utgivarsida - En sida för att visa en lista över berättelser från en viss utgivare.
2. Konfigurera databas
När du har lagt ut din produkts display kan du fokusera på att bygga de datafält som kommer att driva din applikation. Vi använder dessa fält för att länka de arbetsflöden som ligger bakom din produkt.
För det här exemplet kommer vi att fastställa två distinkta datatyper för varje nyhet. En datatyp kommer att innehålla de grundläggande fakta om en berättelse (som titeln, den utvalda bilden och utgivaren), medan den andra datatypen kommer att innehålla större innehållsfiler såsom hela berättelsen.
Genom att definiera dem som diskreta datatyper kan vi bara ladda den information som krävs när det krävs, vilket begränsar mängden material som Bubble-editorn behöver producera.
Följande datatyper och fält kommer att skapas:
Data typ: Användare
fält:
- Namn
- Följande förlag är en lista över förlag. Viktig anmärkning: Genom att skapa ett fält som en lista baserad på en distinkt datatyp kan du integrera alla viktiga datafält utan ansträngning utan att behöva skapa extra fält.
Data typ: Historia
fält:
- Titel
- Utvalda bild
- Författare
- Kategori
- Publisher
- Berättelsens innehåll
Data typ: Berättelsens innehåll
fält:
- Berättelsens innehåll
Data typ: Publisher
fält:
- Namn
- Logotyp
- följare
3. Bygga arbetsflöden
Nu när du har organiserat din applikations design och databas är det dags att börja sätta ihop allt och få det att fungera.
Arbetsflöden är den primära metoden för att åstadkomma detta i Bubble.
Varje arbetsflöde inträffar när en händelse inträffar (t.ex. en användare klickar på en knapp) och sedan utför en sekvens av "åtgärder" som svar (t.ex. "registrera användaren", "gör en ändring i databasen" och så vidare) .
4. Skapa en nyhet
Den första funktionen vi kommer att erbjuda är ett verktyg som gör det möjligt för publicister att skriva och lägga upp nyheter på webbplatsen.
På uppladdningssidan börjar vi med att införliva många indataobjekt som kommer att användas för att mata in data i vår databas. Textinmatning, en bilduppladdning och ett rullgardinsval är exempel på dessa fält.
Vi måste också anpassa rullgardinsmenyn för utgivare för att visa en lista med dynamiska alternativ. Eftersom varje ny artikel kommer att läggas till en utgivares lista med totalt antal artiklar, måste vi välja en befintlig utgivare från vår databas.
När du ställer in den här rullgardinsmenyn väljer vi vilken typ av alternativ som ska vara utgivare.
Efter det kommer vår datakälla att skanna vår databas och returnera en lista över alla aktuella publikationer. Slutligen kommer vi att ändra källtexten så att den inkluderar utgivarens namn.
När en författare har angett den nödvändiga informationen i varje inlägg på sidan klickar de på publicera-knappen för att skapa en ny berättelse.
Sedan, i din databas, skapar du en ny sak med datatypen inställd på berättelse.
Sedan måste vi börja fylla i vår databas med de nödvändiga fälten. Anslut var och en av indatakomponenterna på sidan till sina respektive databaskolumner.
Först skapar vi berättelsens innehållstyp, som slutligen kommer att länkas till själva berättelsen.
Därefter lägger vi till ytterligare ett steg till denna procedur och skapar något annat – den här gången själva berättelsen.
Det är möjligt att integrera denna data utan ansträngning genom hela din plattform genom att integrera det första berättande materialet som vi utvecklade med denna berättelse.
En ny berättelse kommer att produceras varje gång denna procedur aktiveras.
5. Visar dynamiskt innehåll i flödet
När utgivare börjar ladda upp material till din mobilapp måste vi börja skapa logiken på din startsida som visar varje artikel som en dynamisk lista. Detta kan uppnås genom att använda vårt återkommande gruppelement.
Återkommande grupper arbetar med din databas för att presentera och uppdatera en lista med dynamiskt material.
När du tillämpar en upprepande grupp måste du först länka elementet till en datatyp i din databas.
I det här fallet kommer du att kategorisera typen av material som berättelser. Du måste också ange datakällan som en lista över alla tabeller i din databas.
Vi kommer också att ordna denna återkommande grupp efter varje berättelses startdatum, och visar listan i omvänd kronologisk ordning. Du kan nu börja organisera det dynamiska materialet som kommer att visas inom varje rutnät.
Fyll helt enkelt i den översta raden med lämpligt material du vill visa, så kommer detta kraftfulla element att fylla de återstående kolumnerna med data från din nuvarande databas.
6. Skicka data mellan sidor
Det är också möjligt att konstruera händelser inom varje rad i en upprepande grupp. När du utvecklar navigeringsfunktioner för din plattform kommer denna funktionalitet att vara praktisk.
Vår nyhetsapps hemsida visar bara en förhandsvisning av varje berättelse, inklusive utgivaren, en utvald bild och berättelsens titel.
Den visar dock inte hela innehållet i en artikel förrän användaren klickar sig vidare till artikelsidan. Vi kommer att använda vår arbetsflödesredigerare för att överföra data mellan sidor för att visa detta material.
Till att börja, skapa en process som skickar en användare till berättelsesidan när bilden av en berättelse klickas.
Använd en navigeringshändelse för att överföra en användare till en annan sida medan du utvecklar denna process.
Välj den typ av målsida som ska vara den berättande sidan från rullgardinsmenyn. Du måste sedan ge ytterligare information till den här sidan så att Bubble-redigeraren förstår vilken unik berättelse som ska visas.
Informationen du behöver ge kommer från den aktuella cellhistorien.
7. Visa dynamiskt innehåll på berättelsesidan
Du kan enkelt hämta denna händelsedata och visa relevant material från berättelsen när en användare skickas till en viss berättelsesida.
För att skapa den här funktionen måste du först kontrollera att målsidans typ matchar dataegenskapen som du levererar genom arbetsflödet. I den här situationen måste du associera berättelsesidan med en berättelseegenskap.
Den kan helt enkelt hämta och leverera lämplig data från befintliga källor genom att kategorisera typen av innehåll på en sida.
Du kan nu börja infoga dynamiskt material i fält som visar information från en enda tabell.
8. Visar förlagets artikel
Efter att ha läst en nyhet kan en användare välja att granska förlagets hela artikelkatalog. Om du har utvecklat en datatyp för utgivare är det lika enkelt att skapa en separat sida för utgivare som att skapa vår ursprungliga hemsida.
På den här sidan måste vi börja med att ställa in sidtypen till utgivare.
Kopiera sedan den upprepande gruppen från startsidan och redigera inställningarna.
I det här fallet kommer vår återkommande grupps datakälla att leta efter alla befintliga artiklar vars utgivare är den aktuella sidutgivaren.
9. Följande förlag
Den tredje grundläggande funktionen vi kommer att bygga för vår MVP är möjligheten att följa en utgivare på plattformen. Vi lägger till en följ-knapp på utgivarens sida. När vi klickar på den här ikonen startar vi en ny process som ändrar en sak.
Om du lägger till den aktuella sidutgivaren i deras lista över följande publikationer ändras den aktuella användaren.
Därefter måste vi uppdatera den aktuella sidans utgivares lista över följare genom att lägga till den aktuella användaren.
10. Ytterligare funktioner du kan lägga till
Nu när du är bekväm med att bygga anpassade datafält och presentera dynamisk information kan du bli kreativ med de upplevelser du skapar för din produkt. Du kan även inkludera:
- Skapa en funktion som låter användare spara innehåll för senare läsning.
- Längst ner på varje del, tillhandahåll en återkommande samling av föreslagna artiklar.
- Skapa ett sökverktyg för att hjälpa människor att hitta nytt innehåll på webbplatsen.
11. Resultatet
Din sista app kommer att se ut ungefär så här.
Fördelar
- Möjligheten att ansluta till många API:er och plugins.
- En lättanvänd applikation utan kod.
- Personer utan programmeringserfarenhet kommer att dra nytta av detta.
- Designverktyg som är både mångsidiga och kraftfulla.
- Snabb bearbetning av frågor.
Nackdelar
- Ökad pålitlighet.
- Databehandlingshastigheten är långsam.
- Prestanda är begränsad.
Priser
Den kostnadsfria planen låter dig lära dig om plattformen och utveckla din applikation.
Betalprenumerationer inkluderar extrafunktioner som white-labeling, en anpassad domän, tillgång till Bubble API och reserverad serverkapacitet, som listas nedan.
- Personligt – $25/månad (betalas årligen) eller $29/månad (betalas månadsvis).
- Professionell – $115/månad (betalas årligen) eller $129/månad (betalas månadsvis).
- Produktion – $475/månad (betalas årligen) eller $529/månad (betalas månadsvis).
Slutsats
Bubble är ett utmärkt alternativ för att bygga webbapplikationer som bara kan visa information eller har ett minimalt användargränssnitt.
Det är ganska enkelt att använda, och handledningarna från Bubble är oerhört användbara. Dess online visuella redigerare som låter dig designa webbappar baserat på dina preferenser.
Och det bästa är att du inte behöver någon programmeringserfarenhet eller expertis. Bubble passar alla, oavsett om du kan koda eller inte.
Men tidigare förståelse för frontend-språk kan ge dig ett försprång eftersom det gör att du snabbt kan ta reda på vad den gör när det gäller händelsehantering.
Så, vad tycker du om Bubbles kapacitet?
Låt oss veta i kommentarerna!
Arbehi
Kan en butik skapas för att sälja produkter med verktyget bubble.io?