Innholdsfortegnelse[Gjemme seg][Forestilling]
Jeg har nylig vært interessert i andre tilnærminger til nettutvikling enn HTML, CSS og JavaScript.
Med det voksende landskapet uten kode, var det ikke overraskende å oppdage at det finnes flere alternativer til de mer standard tilnærmingene for utvikling av webapplikasjoner.
Du må være kjent med noen av de mer kjente CMS-plattformene, som WordPress som er stort sett kodefrie. Men hvis du vil bygge nettapper, kan slike plattformer virke restriktive.
Her introduserer jeg deg for Bubble.io, en kraftig verktøy uten kode som lar deg bygge nettapper som aldri før.
La oss utforske det i dybden!
Hva er Bubble.io?
Bubble er en ikke-teknisk plattform som kombinerer et visuelt programmeringsspråk og et rammeverk for nettutvikling.
Brukere kan bruke disse programmeringsverktøyene til å konstruere unike nettapplikasjoner, endre databaser og prosesser, legge til sidekomponenter (bilder, tekst, inndataskjemaer, kart) og designe grensesnittene deres.
Det er en markedsplass hvor du kan oppdage ideelle maler, plugins og tjenester for å hjelpe deg med å bygge sterke produkter.
Uten å måtte sette opp et typisk programmeringsrammeverk, kan du lage alt fra en markedsplass til et sosialt nettverk til en CRM (Customer Relationship Management) ved å bruke Bubble.
Det gir kundene muligheten til å lage og tilpasse appene sine ved hjelp av et brukervennlig grensesnitt og en pek-og-klikk-editor.
Du kan bruke den i forbindelse med tjenester som tilbyr en REST API, for eksempel Facebook, SQL, analytics og betalingsapper. Det gjør det mulig for brukere å bruke tid på å forbedre funksjonaliteten og utseendet til applikasjonene sine slik at de ser bra ut på nettbrett og mobile enheter.
Den passer for alle bedriftsstørrelser, fra liten til middels til stor; og tilgjengelig for Windows, Mac og nettet.
Hva er visuell programmering?
Visuell programmering er egentlig hva det høres ut som. I stedet for å programmere manuelt ved å skrive kode, gjør du det grafisk ved å klikke og dra komponenter inn på sider.
Ikke la deg villedes av den korte beskrivelsen.
Det er ikke som alle andre cookie-cutter-apper eller nettstedsbyggingsverktøy du har kommet over på nettet. De fleste appbyggere krever at du stoler på grunnleggende maler og har ekstremt begrenset funksjonalitet; de lar deg bare utvikle spesifikke typer apper og begrense personlig tilpasning.
Selv om begrepet "visuell programmering" og "dra og slipp" virker enkelt i Bubble, er det enormt kraftig.
Det visuelle programmeringsmiljøet lar deg ikke bare dra objekter som tekst, grafikk, innganger og mer til en side, men det lar deg også konfigurere hva disse elementene gjør.
Hva gjør Bubble?
Bubbles primære mål er å gjøre det mulig for hvem som helst å lage nettapper uten å måtte skrive kode.
Men selv om dette gir en lett husket målsetning, utelater det en betydelig del av historien. Veien fra idé til marked er mer komplisert enn bare å lage kodelinjer.
Et team av høyt kvalifiserte fagfolk som jobber med visse deler av appens oppretting, vekst og vedlikehold er nødvendig i konvensjonell utvikling. Vurder dette.
Hva krever hver app?
- Sikkerhet for å sikre at ingen har uautorisert tilgang til data.
- En database for å lagre og hente informasjon som elementer, artikler og oppdateringer på sosiale medier.
- Skalerbarhet for å muliggjøre uhindret utvikling av brukerbasen og datavolumet.
- Et hyggelig brukergrensesnitt for å gjøre appen attraktiv og enkel å bruke.
- Integrasjon med ulike tjenester og systemer.
Bubble erstatter langt mer enn en koder. Den tilbyr alle disse tjenestene på en visuelt tiltalende og svært automatisert måte, noe som gjør det mulig, om ikke enkelt, for en enkelt person å håndtere alt.
Mens tidligere no-code-plattformer har forsøkt å erstatte koding på ulike måter. Konseptet er å fjerne så mange barrierer som mulig for en app å nå markedet, og håndtere alt fra responsiv design og animasjoner til hosting, versjonsdistribusjon, sikkerhet og databaseoperasjoner.
Bruke API-koblingen til å koble Bubble til andre tjenester
Dens API Connector er sannsynligvis den viktigste plugin-en på markedet. Som navnet tilsier, lar dette deg koble til andre apper og tjenester for å dele handlinger og data.
I stedet for å fordype seg i de tekniske spesifikasjonene for hvordan dette fungerer, bør du vurdere disse eksemplene på hva APIer kan oppnå:
- Få tilgang til maskinlæring metoder som bildegjenkjenning og oversettelse.
- Få den nyeste værinformasjonen fra hvor som helst på jorden.
- Når en hendelse utløses i Bubble, utveksles informasjon på tvers av systemer, for eksempel etablering av et kundeemne i CRM eller en avtale i Google-kalenderen din.
- Bestill et fly eller et hotellopphold hvor som helst i verden.
- Få telefonnummer, plassering, fotografier, logo og anmeldelser for ethvert selskap på Google Maps.
Bruke plugins for å forbedre native funksjoner
Teknisk sett blander den JavaScript-kodemoduler, CSS og HTML til en funksjonell node. Søknad skrevet i JS.JSON fungerer som grunnlaget for sitt eget språk.
Selv om du ikke trenger å forstå disse terminologien fullt ut for å konstruere apper, indikerer de ett nøkkelfaktum: den overholder kjente og anerkjente nettstandarder, slik at utviklere kan forbedre dens opprinnelige funksjonalitet betraktelig.
Dette er allerede sett på plugin-siden, hvor hundrevis av gratis og betalte utvidelser til den grunnleggende funksjonaliteten er tilgjengelige. Det innebærer også at hvis du kommer til et punkt hvor dens grunnleggende evner er utilstrekkelige, er det mange JavaScript-eksperter som er villige til å lage en skreddersydd løsning for deg.
Hvilke typer apper kan du utvikle?
Du kan lage et bredt spekter av applikasjoner, noen av dem er gitt nedenfor.
- Apper for spesialiserte markeder med et fellesskap.
- Apper for jobbtavler i en rekke sektorer.
- Programvare for sykehusbemanning.
- Point-of-sale programvare for fysiske butikker.
- Tannkontorprogramvare med hvit etikett.
- Personlig bedriftsinventar og kundeserviceprogramvare.
- Megler- og klientvendte applikasjoner for aggregering av eiendom.
- Apper for arrangementer og kurs på markedet (og til og med båter).
- Fagbevis krever interne testapplikasjoner.
- Søknader for førstehjelp.
- Ansattadministrasjonsprogramvare for internt bruk.
For å være ærlig, er ikke plattformen designet for å gjøre alt. Det er kanskje ikke det ideelle valget hvis du designer en spillapp med komplekse bilder og bevegelser. Dessuten, hvis du lager en innebygd app (en for appbutikker), må du integrere den med en annen tredjepartstjeneste.
Nøkkelegenskaper
Bubble er stappfull av funksjoner. Vi vil ikke kunne dekke dem alle her, men vi vil prøve å dekke de mest essensielle.
1. plugins
Den lar deg inkludere funksjonalitet fra en rekke verktøy på Internett i din webapplikasjon. Hvis du for eksempel vil at brukerne dine skal logge på med Facebook-kontoen sin, kan du bruke Facebook-pluginen for å gjøre dette.
2. Utvikle
Den lar deg bygge dynamiske flerbrukerapper for stasjonære og mobile nettlesere, samt alle verktøyene som kreves for å bygge et nettsted som ligner på Instagram eller Airbnb.
3. utforming
Du kan lage mobilvennlige oppsett og dynamisk innhold for å sette prikken over i-en til et produkt som du gjerne viser frem til andre.
4. hosting
Du trenger aldri å være bekymret for servervedlikehold, infrastruktur eller drift igjen og igjen.
Den tar seg av distribusjon og hosting for deg på en trygg og sikker måte. Antall brukere, trafikkvolum og datalagring er alle ubegrensede.
Bygge en app med Bubble (opplæring)
La oss nå sette i gang og utforske hvordan du kan bygge en nyhetsapp på Bubble.
1. Komme i gang
For å begynne må du først registrer deg for en gratis konto på Bubble.
Vi begynner med å bruke Bubbles visuelle designverktøy for å forme plattformen vår brukergrensesnitt. Noen av nøkkelsidene som skal inkluderes er gitt nedenfor:
- Last opp side – Et nettsted hvor utgivere vil utvikle og distribuere artikler.
- Hjemmeside – En liste over nylig publiserte historier vises.
- Fortellingsside – En side der hver unike historie kan bli funnet.
- Utgiverside - En side for å vise en liste over historier fra en bestemt utgiver.
2. Konfigurere database
Etter at du har lagt ut produktets skjerm, kan du fokusere på å bygge datafeltene som vil gi næring til applikasjonen din. Vi bruker disse feltene til å koble sammen arbeidsflytene som ligger til grunn for produktet ditt.
For dette eksemplet vil vi etablere to forskjellige datatyper for hver nyhetsartikkel. Én datatype vil inneholde de grunnleggende faktaene til en historie (som tittelen, det fremhevede bildet og utgiveren), mens den andre datatypen vil inneholde større innholdsfiler, for eksempel hele fortellingen.
Ved å definere dem som diskrete datatyper, kan vi bare laste inn informasjonen som kreves når det er nødvendig, og begrenser mengden materiale som bobleredaktøren trenger å produsere.
Følgende datatyper og felt vil bli opprettet:
Data-type: Bruker
Enger:
- Navn
- Følgende utgivere er en liste over utgivere. Viktig merknad: Å lage et felt som en liste basert på en distinkt datatype lar deg inkludere alle viktige datafelter uten problemer uten å måtte opprette ekstra felt.
Data-type: Story
Enger:
- Tittel
- Utvalgt bilde
- Forfatter
- Kategori
- Publisher
- Historieinnhold
Data-type: Historieinnhold
Enger:
- Historieinnhold
Data-type: Publisher
Enger:
- Navn
- logo
- Følgere
3. Bygge arbeidsflyter
Nå som du har organisert programmets design og database, er det på tide å begynne å sette alt sammen og få det til å fungere.
Arbeidsflyter er den primære metoden for å oppnå dette i Bubble.
Hver arbeidsflyt oppstår når en hendelse inntreffer (f.eks. en bruker klikker på en knapp) og deretter utfører en sekvens av "handlinger" som svar (f.eks. "registrer brukeren", "gjør en endring i databasen," og så videre) .
4. Lage en nyhetssak
Den første funksjonen vi tilbyr er et verktøy som lar utgivere skrive og legge ut nyheter på nettstedet.
På opplastingssiden begynner vi med å inkorporere mange inndataelementer som vil bli brukt for å legge inn data i databasen vår. Tekstinndata, et bildeopplastingsprogram og et rullegardinvalg er eksempler på disse feltene.
Vi må også tilpasse rullegardinmenyen for publisisten for å vise en liste over dynamiske alternativer. Siden hver ny artikkel vil bli lagt til en utgivers liste over totalt antall artikler, må vi velge en eksisterende utgiver fra databasen vår.
Når du angir denne rullegardinmenyen, velger vi typen alternativer for å være utgiver.
Etter det vil datakilden vår skanne databasen vår og returnere en liste over alle gjeldende publikasjoner. Til slutt vil vi endre kildeteksten til å inkludere utgiverens navn.
Når en forfatter har lagt inn nødvendig informasjon i hver oppføring på siden, klikker de på publiser-knappen for å generere en ny historie.
Deretter, i databasen din, vil du lage en ny ting med datatypen satt til narrativ.
Deretter må vi begynne å fylle ut databasen vår med de nødvendige feltene. Koble hver av inndatakomponentene på siden til deres respektive databasekolonner.
Først lager vi innholdstypen for historien, som til slutt vil bli knyttet til selve historien.
Deretter vil vi legge til et nytt trinn i denne prosedyren, og generere noe annet – denne gangen selve historien.
Det er mulig å integrere disse dataene uten problemer gjennom hele plattformen din ved å integrere det første narrative materialet vi utviklet med denne historien.
En ny historie vil bli produsert hver gang denne prosedyren aktiveres.
5. Viser dynamisk innhold i feeden
Når utgivere begynner å laste opp materiale til mobilappen din, må vi begynne å lage logikken på hjemmesiden din som viser hver artikkel som en dynamisk liste. Dette kan oppnås ved å bruke vårt gjentatte gruppeelement.
Gjentatte grupper jobber med databasen din for å presentere og oppdatere en liste over dynamisk materiale.
Når du bruker en gjentatt gruppe, må du først koble elementet til en datatype i databasen din.
I dette tilfellet vil du kategorisere typen materiale som historier. Du må også oppgi datakilden som en liste over alle tabellene i databasen.
Vi vil også arrangere denne gjentakende gruppen etter hver histories startdato, og viser listen i omvendt kronologisk rekkefølge. Du kan nå begynne å organisere det dynamiske materialet som vil vises innenfor hvert rutenett.
Bare fyll ut den øverste raden med riktig materiale du vil vise, og dette kraftige elementet vil fylle de resterende kolonnene med data fra din nåværende database.
6. Sende data mellom sider
Det er også mulig å konstruere hendelser innenfor hver rad i en gjentatt gruppe. Når du utvikler navigasjonsfunksjoner for plattformen din, vil denne funksjonaliteten komme godt med.
Hjemmesiden til nyhetsappen vår viser bare en forhåndsvisning av hver historie, inkludert utgiveren, et fremhevet bilde og historietittelen.
Den viser imidlertid ikke hele innholdet i en artikkel før brukeren klikker seg videre til historiesiden. Vi bruker arbeidsflytredigeringsprogrammet vårt til å overføre data mellom sider for å vise dette materialet.
For å begynne, lag en prosess som sender en bruker til historiesiden når bildet av en historie klikkes.
Bruk en navigasjonshendelse til å overføre en bruker til en annen side mens du utvikler denne prosessen.
Velg destinasjonssidetypen som skal være den narrative siden fra rullegardinmenyen. Du må deretter gi mer informasjon til denne siden slik at bobleredigeringsprogrammet forstår hvilken unike historie som skal vises.
Informasjonen du må gi kommer fra den gjeldende cellehistorien.
7. Viser dynamisk innhold på historiesiden
Du kan enkelt hente disse hendelsesdataene og vise relevant materiale fra fortellingen når en bruker sendes til en bestemt historieside.
For å opprette denne funksjonen må du først kontrollere at målsidetypen samsvarer med dataegenskapen du leverer gjennom arbeidsflyten. I denne situasjonen må du knytte historiesiden til en historieegenskap.
Den kan ganske enkelt hente og levere passende data fra eksisterende kilder ved å kategorisere typen innhold på en side.
Du kan nå begynne å sette inn dynamisk materiale i felt som viser informasjon fra en enkelt tabell.
8. Vise utgiverens artikkel
Etter å ha lest en nyhet, kan en bruker velge å undersøke hele utgiverens artikkelkatalog. Hvis du har utviklet en utgiverdatatype, er det like enkelt å opprette en egen side for utgivere som å lage vår opprinnelige hjemmeside.
På denne siden må vi begynne med å angi sidetypen til utgiver.
Kopier deretter den gjentatte gruppen fra hjemmesiden og rediger innstillingene.
I dette tilfellet vil vår gjentakende gruppes datakilde se etter alle eksisterende artikler hvis utgiver er den gjeldende sideutgiveren.
9. Følge utgivere
Den tredje grunnleggende funksjonen vi skal bygge for vår MVP er muligheten til å følge en utgiver på plattformen. Vi legger til en følg-knapp på utgiversiden. Når vi klikker på dette ikonet, starter vi en ny prosess som endrer en ting.
Hvis du legger til gjeldende sideutgiver i listen over følgende publikasjoner, endres gjeldende bruker.
Deretter må vi oppdatere gjeldende sideutgivers liste over følgere ved å legge til gjeldende bruker.
10. Ytterligere funksjoner du kan legge til
Nå som du er komfortabel med å bygge tilpassede datafelt og presentere dynamisk informasjon, kan du bli kreativ med opplevelsene du lager for produktet ditt. Du kan også inkludere:
- Lag en funksjon som lar brukere lagre innhold for senere lesing.
- Nederst på hvert stykke finner du en gjentakende samling av foreslåtte artikler.
- Lag et søkeverktøy for å hjelpe folk med å finne nytt innhold på nettstedet.
11. Resultatet
Den endelige appen din vil se omtrent slik ut.
Pros
- Muligheten til å koble til mange APIer og plugins.
- En brukervennlig applikasjon uten kode.
- Personer uten programmeringserfaring vil dra nytte av dette.
- Designverktøy som er både allsidige og kraftige.
- Rask behandling av spørsmål.
Ulemper
- Økt pålitelighet.
- Databehandlingshastigheten er treg.
- Ytelsen er begrenset.
Priser
Den gratis planen lar deg lære om plattformen og utvikle applikasjonen din.
Betalte abonnementer inkluderer ekstrautstyr som hvitmerking, et tilpasset domene, tilgang til Bubble API og reservert serverkapasitet, som er oppført nedenfor.
- Personlig – $25/måned (betales årlig) eller $29/måned (betales månedlig).
- Profesjonell – $115/måned (betales årlig) eller $129/måned (betales månedlig).
- Produksjon – $475/måned (betales årlig) eller $529/måned (betales månedlig).
konklusjonen
Bubble er et utmerket alternativ for å bygge nettapplikasjoner som bare kan vise informasjon eller har et minimalt brukergrensesnitt.
Det er ganske enkelt å bruke, og veiledningene fra Bubble er ekstremt nyttige. Dens online visuelle editor som lar deg designe webapper basert på dine preferanser.
Og det beste er at du ikke trenger noen programmeringserfaring eller ekspertise. Bubble passer for alle, uansett om du kan kode eller ikke.
Imidlertid kan forhåndsforståelse av frontend-språk gi deg et forsprang fordi det lar deg raskt finne ut hva det gjør med hendelseshåndtering.
Så, hva synes du om Bubbles evner?
La oss beskjed i kommentarfeltet!
Arbehi
Kan en butikk opprettes for å selge produkter ved hjelp av bubble.io-verktøyet?