Inhoudsopgave[Zich verstoppen][Laten zien]
- Wat is Bubble.io?
- Wat is visueel programmeren?
- Welke soorten apps kun je ontwikkelen?
Een app bouwen met Bubble (zelfstudie)+-
- 1. Aan de slag
- 2. Database configureren
- 3. Werkstromen bouwen
- 4. Een nieuwsbericht maken
- 5. Dynamische inhoud weergeven in de feed
- 6. Gegevens verzenden tussen pagina's
- 7. Dynamische inhoud weergeven op de verhaalpagina
- 8. Weergave van het artikel van de uitgever
- 9. Uitgevers volgen
- 10. Extra functies die u kunt toevoegen
- 11. Het resultaat
- VOORDELEN
- NADELEN
- Prijzen
- Conclusie
Ik ben de laatste tijd geïnteresseerd in andere benaderingen voor webontwikkeling dan HTML, CSS en JavaScript.
Met het groeiende no-code landschap was het niet verrassend om te ontdekken dat er verschillende alternatieven zijn voor de meer standaardbenaderingen voor het ontwikkelen van webapplicaties.
U moet bekend zijn met enkele van de meer bekende CMS-platforms, zoals WordPress, die vrijwel codevrij zijn. Maar als u web-apps wilt bouwen, lijken dergelijke platforms misschien beperkend.
Hier stel ik je voor aan Bubble.io, een krachtig tool zonder code waarmee u web-apps kunt bouwen als nooit tevoren.
Laten we het grondig onderzoeken!
Wat is Bubble.io?
Bubble is een niet-technisch platform dat een visuele programmeertaal combineert met een kader voor webontwikkeling.
Gebruikers kunnen deze programmeertools gebruiken om unieke online applicaties te bouwen, databases en processen te wijzigen, paginacomponenten toe te voegen (afbeeldingen, tekst, invoerformulieren, kaarten) en hun interfaces te ontwerpen.
Het is een marktplaats waar u ideale sjablonen, plug-ins en services kunt ontdekken om u te helpen bij het bouwen van sterke producten.
Zonder dat u een typisch programmeerframework hoeft op te zetten, kunt u met Bubble alles creëren, van een marktplaats tot een sociaal netwerk tot een CRM (Customer Relationship Management).
Het geeft klanten de mogelijkheid om hun apps te creëren en te personaliseren met behulp van een gebruiksvriendelijke interface en een point-and-click-editor.
U kunt het gebruiken in combinatie met services die een REST API bieden, zoals Facebook, SQL, analyse- en betalingsapps. Het stelt gebruikers in staat tijd te besteden aan het verbeteren van de functionaliteit en het uiterlijk van hun applicaties, zodat ze er goed uitzien op tablets en mobiele apparaten.
Het is geschikt voor alle bedrijfsgroottes, van klein tot middelgroot tot groot; en toegankelijk voor Windows, Mac en het web.
Wat is visueel programmeren?
Visueel programmeren is in wezen hoe het klinkt. In plaats van handmatig te programmeren door code te schrijven, doe je het grafisch door op componenten te klikken en ze naar pagina's te slepen.
Laat u niet misleiden door die korte beschrijving.
Het is niet zoals elke andere cookie-cutter-app of tool voor het bouwen van websites die u online bent tegengekomen. De meeste app-bouwers vereisen dat u vertrouwt op basissjablonen en hebben extreem beperkte functionaliteit; ze stellen je alleen in staat om specifieke soorten apps te ontwikkelen en je personalisatie te beperken.
Hoewel het idee van "visuele programmering" en "slepen en neerzetten" eenvoudig lijkt in Bubble, is het enorm krachtig.
Met de visuele programmeeromgeving kunt u niet alleen objecten zoals tekst, afbeeldingen, invoer en meer naar een pagina slepen, maar kunt u ook configureren wat die elementen doen.
Wat doet Bubbel?
Het primaire doel van Bubble is om iedereen in staat te stellen webapps te maken zonder code te hoeven schrijven.
Hoewel dit zorgt voor een gemakkelijk te onthouden doelverklaring, laat het een aanzienlijk deel van het verhaal achterwege. Het pad van idee naar markt is ingewikkelder dan alleen het maken van regels code.
Bij conventionele ontwikkeling is een team van hoogopgeleide professionals nodig die werken aan bepaalde delen van de creatie, groei en onderhoud van de app. Overweeg dit.
Wat heeft elke app nodig?
- Beveiliging om ervoor te zorgen dat niemand ongeautoriseerde toegang tot gegevens heeft.
- Een database voor het opslaan en ophalen van informatie zoals items, artikelen en updates van sociale media.
- Schaalbaarheid om de ongehinderde ontwikkeling van het gebruikersbestand en het datavolume mogelijk te maken.
- Een prettige gebruikersinterface om de app aantrekkelijk en gebruiksvriendelijk te maken.
- Integratie met verschillende diensten en systemen.
Bubble vervangt veel meer dan een codeur. Het biedt al deze services op een visueel aantrekkelijke en sterk geautomatiseerde manier, waardoor het denkbaar, zo niet eenvoudig, is dat één persoon alles afhandelt.
Terwijl eerdere no-code-platforms op verschillende manieren hebben geprobeerd codering te vervangen. Het concept is om zoveel mogelijk belemmeringen weg te nemen voor een app om de markt te bereiken, waarbij alles wordt afgehandeld, van responsief ontwerp en animaties tot hosting, versie-implementatie, beveiliging en databasebewerkingen.
De API-connector gebruiken om Bubble met andere services te verbinden
De API-connector is waarschijnlijk de belangrijkste plug-in op de markt. Zoals de naam al aangeeft, kunt u hiermee verbinding maken met andere apps en services om acties en gegevens te delen.
In plaats van u te verdiepen in de technische details van hoe dit werkt, kunt u deze voorbeelden bekijken van wat API's zouden kunnen bereiken:
- Toegang krijgen tot machine learning methoden zoals beeldherkenning en vertaling.
- Ontvang de meest recente weersinformatie van overal ter wereld.
- Wanneer een gebeurtenis wordt geactiveerd in Bubble, wordt informatie uitgewisseld tussen systemen, zoals het vastleggen van een lead in uw CRM of een afspraak in uw Google Agenda.
- Boek een vlucht of hotelovernachting waar ook ter wereld.
- Ontvang het telefoonnummer, de locatie, foto's, het logo en recensies van elk bedrijf op Google Maps.
Plug-ins gebruiken om native functies te verbeteren
Technisch gezien combineert het JavaScript-codemodules, CSS en HTML tot een functioneel knooppunt. Applicatie geschreven in JS.JSON dient als basis voor zijn eigen taal.
Hoewel u die terminologie niet volledig hoeft te begrijpen om apps te bouwen, geven ze wel één belangrijk feit aan: het houdt zich aan bekende en erkende webstandaarden, waardoor ontwikkelaars de native functionaliteit aanzienlijk kunnen verbeteren.
Dit is al te zien op de plugin-site, waar honderden gratis en betaalde uitbreidingen op de basisfunctionaliteit beschikbaar zijn. Het houdt ook in dat als u een punt bereikt waarop de fundamentele mogelijkheden onvoldoende zijn, er tal van JavaScript-experts bereid zijn om een op maat gemaakte oplossing voor u op te stellen.
Welke soorten apps kun je ontwikkelen?
U kunt een breed scala aan toepassingen maken, waarvan er hieronder enkele worden weergegeven.
- Apps voor gespecialiseerde markten met een community.
- Apps voor vacaturesites in verschillende branches.
- Software voor ziekenhuispersoneel.
- Kassasoftware voor fysieke winkels.
- Tandartspraktijksoftware met een white label.
- Software voor persoonlijke bedrijfsinventaris en klantenservice.
- Applicaties voor makelaars- en klantgerichte aggregatie van onroerend goed.
- Apps voor evenementen en cursussen op de markt (en zelfs boten).
- Professionele certificaten vereisen interne testtoepassingen.
- Aanvragen voor eerstehulpverleners.
- Software voor personeelsbeheer voor intern gebruik.
Om eerlijk te zijn, het platform is niet ontworpen om alles te doen. Het is misschien niet de ideale keuze als u een game-app ontwerpt met complexe beelden en bewegingen. Trouwens, als u een native app maakt (een voor app-winkels), moet u deze integreren met een andere service van derden.
Belangrijkste kenmerken
Bubble zit boordevol functies. We kunnen ze hier niet allemaal behandelen, maar we zullen proberen de meest essentiële te behandelen.
1. plugins
Hiermee kunt u functionaliteit van tal van tools op internet opnemen in uw webapplicatie. Als u bijvoorbeeld wilt dat uw gebruikers inloggen met hun Facebook-account, kunt u hiervoor de Facebook-plug-in gebruiken.
2. Ontwikkelen
Hiermee kunt u dynamische apps voor meerdere gebruikers maken voor desktop- en mobiele webbrowsers, evenals alle tools die nodig zijn om een site te bouwen die lijkt op Instagram of Airbnb.
3. ontwerp
U kunt mobielvriendelijke lay-outs en dynamische inhoud maken om de laatste hand te leggen aan een product dat u graag aan anderen wilt laten zien.
4. hosting
U hoeft zich nooit meer zorgen te maken over serveronderhoud, infrastructuur of operaties.
Het zorgt voor de implementatie en hosting voor u op een veilige manier. Het aantal gebruikers, het verkeersvolume en de gegevensopslag zijn allemaal onbeperkt.
Een app bouwen met Bubble (zelfstudie)
Laten we nu in actie komen en onderzoeken hoe u een nieuws-app op Bubble kunt bouwen.
1. Aan de slag
Om te beginnen moet u eerst registreer voor een gratis account op Bubble.
We beginnen met het gebruik van de visuele ontwerptool van Bubble om het platform vorm te geven gebruikersinterface. Enkele van de belangrijkste pagina's die moeten worden opgenomen, worden hieronder weergegeven:
- Uploadpagina - Een website waar uitgevers artikelen zullen ontwikkelen en verspreiden.
- Startpagina – Er wordt een lijst met recent gepubliceerde verhalen weergegeven.
- Verhalende pagina – Een pagina waar elk uniek verhaal te vinden is.
- Uitgeverspagina - Een pagina waarop een lijst met verhalen van een bepaalde uitgever wordt weergegeven.
2. Database configureren
Nadat u de weergave van uw product hebt ingedeeld, kunt u zich concentreren op het bouwen van de gegevensvelden die uw toepassing van brandstof zullen voorzien. We gebruiken deze velden om de onderliggende workflows van uw product te koppelen.
Voor dit voorbeeld stellen we voor elk nieuwsbericht twee verschillende gegevenstypen vast. Het ene gegevenstype bevat de basisfeiten van een verhaal (zoals de titel, uitgelichte afbeelding en uitgever), terwijl het andere gegevenstype grotere inhoudsbestanden bevat, zoals het hele verhaal zelf.
Door ze te definiëren als afzonderlijke gegevenstypen, kunnen we alleen de vereiste informatie laden wanneer dit nodig is, waardoor de hoeveelheid materiaal die de Bubble-editor nodig heeft om te produceren, wordt beperkt.
De volgende gegevenstypen en velden worden gemaakt:
Data type: Gebruiker
Fields:
- Naam
- De volgende uitgevers zijn een lijst met uitgevers. Belangrijke opmerking: door een veld als een lijst te maken op basis van een afzonderlijk gegevenstype, kunt u alle essentiële gegevensvelden moeiteloos opnemen zonder dat u extra velden hoeft te maken.
Data type: Verhaal
Fields:
- Titel
- Uitgelichte afbeelding
- auteur
- Categorie
- Uitgever
- Verhaal inhoud
Data type: Verhaal inhoud
Fields:
- Verhaal inhoud
Data type: Uitgever
Fields:
- Naam
- logo
- volgers
3. Werkstromen bouwen
Nu je het ontwerp en de database van je applicatie hebt georganiseerd, is het tijd om alles samen te stellen en te laten werken.
Workflows zijn de primaire methode om dit in Bubble te bereiken.
Elke workflow vindt plaats wanneer een gebeurtenis plaatsvindt (bijvoorbeeld een gebruiker klikt op een knop) en voert vervolgens een reeks "acties" uit als reactie (bijvoorbeeld "meld de gebruiker aan", "breng een wijziging aan in de database", enzovoort). .
4. Een nieuwsbericht maken
De eerste functie die we aanbieden, is een tool waarmee uitgevers nieuwsberichten kunnen schrijven en op de site kunnen plaatsen.
Op de uploadpagina beginnen we met het opnemen van een groot aantal invoeritems die zullen worden toegepast bij het invoeren van gegevens in onze database. Tekstinvoer, een foto-uploader en een vervolgkeuzelijst zijn voorbeelden van deze velden.
We moeten ook het vervolgkeuzemenu van de uitgever aanpassen om een lijst met dynamische opties weer te geven. Aangezien elk nieuw artikel zal worden toegevoegd aan de lijst met totale artikelen van een uitgever, moeten we een bestaande uitgever uit onze database kiezen.
Bij het instellen van dit vervolgkeuzemenu kiezen we het type opties om een uitgever te zijn.
Daarna scant onze gegevensbron onze database en retourneert een lijst met alle huidige publicaties. Ten slotte zullen we het bijschrift van de bron wijzigen om de naam van de uitgever op te nemen.
Zodra een schrijver de benodigde informatie in elk item op de pagina heeft ingevoerd, klikt hij op de knop Publiceren om een nieuw verhaal te genereren.
Vervolgens maakt u binnen uw database iets nieuws met het gegevenstype ingesteld op verhalend.
Dan moeten we beginnen met het vullen van onze database met de benodigde velden. Verbind elk van de invoercomponenten op de pagina met hun respectieve databasekolommen.
Eerst maken we het inhoudstype van het verhaal, dat uiteindelijk aan het verhaal zelf wordt gekoppeld.
Vervolgens voegen we nog een fase toe aan deze procedure, waarbij we iets anders genereren - dit keer het verhaal zelf.
Het is mogelijk om deze gegevens moeiteloos in uw hele platform te integreren door het eerste verhalende materiaal dat we met dit verhaal hebben ontwikkeld, te integreren.
Elke keer dat deze procedure wordt geactiveerd, wordt er een nieuw account aangemaakt.
5. Dynamische inhoud weergeven in de feed
Zodra uitgevers beginnen met het uploaden van materiaal naar uw mobiele app, moeten we beginnen met het maken van de logica op uw startpagina die elk artikel als een dynamische lijst weergeeft. Dit kan worden bereikt door gebruik te maken van ons herhalende groepselement.
Herhalende groepen werken met uw database om een lijst met dynamisch materiaal te presenteren en te vernieuwen.
Bij het toepassen van een herhalende groep moet u het element eerst koppelen aan een gegevenstype in uw database.
In dit geval categoriseert u het soort materiaal als verhalen. U moet ook de gegevensbron opgeven als een lijst met alle tabellen in uw database.
We rangschikken deze terugkerende groep ook op de startdatum van elk verhaal, waarbij de lijst in omgekeerde chronologische volgorde wordt weergegeven. U kunt nu beginnen met het organiseren van het dynamische materiaal dat binnen elk raster zal verschijnen.
Vul gewoon de bovenste rij in met het juiste materiaal dat u wilt weergeven, en dit krachtige element vult de resterende kolommen met gegevens uit uw huidige database.
6. Gegevens verzenden tussen pagina's
Het is ook mogelijk om gebeurtenissen te construeren binnen elke rij van een herhalende groep. Bij het ontwikkelen van navigatiefuncties voor uw platform komt deze functionaliteit goed van pas.
De startpagina van onze nieuws-app toont slechts een voorbeeld van elk verhaal, inclusief de uitgever, een uitgelichte afbeelding en de titel van het verhaal.
Het geeft echter niet de volledige inhoud van een artikel weer totdat de gebruiker doorklikt naar de verhaalpagina. We zullen onze workflow-editor gebruiken om gegevens tussen pagina's te verzenden om dit materiaal weer te geven.
Maak om te beginnen een proces dat een gebruiker naar de verhaalpagina stuurt wanneer op de afbeelding van een verhaal wordt geklikt.
Gebruik een navigatiegebeurtenis om een gebruiker naar een andere pagina over te brengen tijdens het ontwikkelen van dit proces.
Kies het bestemmingspaginatype als verhalende pagina in het vervolgkeuzemenu. U moet dan meer informatie aan deze pagina geven, zodat de Bubble-editor begrijpt welk uniek verhaal moet worden weergegeven.
De informatie die u moet geven, komt uit het huidige celverhaal.
7. Dynamische inhoud weergeven op de verhaalpagina
U kunt deze gebeurtenisgegevens eenvoudig ophalen en het relevante materiaal uit het verhaal tonen wanneer een gebruiker naar een bepaalde verhaalpagina wordt gestuurd.
Om deze functie te maken, moet u eerst controleren of het doelpaginatype overeenkomt met de gegevenseigenschap die u via de werkstroom levert. In deze situatie moet u de verhaalpagina koppelen aan een verhaaleigenschap.
Het kan eenvoudig de juiste gegevens uit bestaande bronnen halen en leveren door het type inhoud op een pagina te categoriseren.
U kunt nu beginnen met het invoegen van dynamisch materiaal in velden die informatie uit een enkele tabel weergeven.
8. Weergave van het artikel van de uitgever
Na het lezen van een nieuwsbericht kan een gebruiker ervoor kiezen om de volledige catalogus met artikelen van de uitgever te bekijken. Als u een uitgeversgegevenstype heeft ontwikkeld, is het maken van een aparte pagina voor uitgevers net zo eenvoudig als het maken van onze originele startpagina.
Op deze pagina moeten we beginnen met het instellen van het paginatype op uitgever.
Kopieer vervolgens de herhalende groep van de startpagina en bewerk de instellingen.
In dit geval zoekt de gegevensbron van onze herhalende groep naar alle bestaande artikelen waarvan de uitgever de uitgever van de huidige pagina is.
9. Uitgevers volgen
De derde fundamentele functie die we voor onze MVP gaan bouwen, is de mogelijkheid om een uitgever op het platform te volgen. We voegen een volgknop toe aan de uitgeverspagina. Wanneer we op dit pictogram klikken, starten we een nieuw proces dat iets wijzigt.
Door de uitgever van de huidige pagina toe te voegen aan hun lijst met volgende publicaties, verandert de huidige gebruiker.
Daarna moeten we de lijst met volgers van de uitgever van de huidige pagina bijwerken door de huidige gebruiker toe te voegen.
10. Extra functies die u kunt toevoegen
Nu u vertrouwd bent met het bouwen van aangepaste gegevensvelden en het presenteren van dynamische informatie, kunt u creatief aan de slag met de ervaringen die u voor uw product creëert. U kunt ook opnemen:
- Maak een functie waarmee gebruikers inhoud kunnen opslaan om later te lezen.
- Geef onderaan elk stuk een terugkerende verzameling van voorgestelde artikelen.
- Maak een zoekfunctie om mensen te helpen nieuwe inhoud op de site te vinden.
11. Het resultaat
Je uiteindelijke app ziet er ongeveer zo uit.
VOORDELEN
- De mogelijkheid om verbinding te maken met veel API's en plug-ins.
- Een gebruiksvriendelijke applicatie zonder code.
- Mensen zonder programmeerervaring zullen hiervan profiteren.
- Ontwerptools die zowel veelzijdig als krachtig zijn.
- Snelle verwerking van vragen.
NADELEN
- Verhoogde betrouwbaarheid.
- De snelheid van gegevensverwerking is laag.
- Prestaties zijn beperkt.
Prijzen
Met het gratis abonnement kunt u meer te weten komen over het platform en uw applicatie ontwikkelen.
Betaalde abonnementen bevatten extra's zoals white-labeling, een aangepast domein, toegang tot de Bubble API en gereserveerde servercapaciteit, die hieronder worden vermeld.
- Persoonlijk - $ 25/maand (jaarlijks betaald) of $ 29/maand (maandelijks betaald).
- Professioneel - $ 115 / maand (jaarlijks betaald) of $ 129 / maand (maandelijks betaald).
- Productie - $ 475/maand (jaarlijks betaald) of $ 529/maand (maandelijks betaald).
Ga gratis aan de slag met Bubble
Conclusie
Bubble is een uitstekend alternatief voor het bouwen van webapplicaties die alleen informatie kunnen tonen of een minimale gebruikersinterface hebben.
Het is vrij eenvoudig te gebruiken en de tutorials van Bubble zijn buitengewoon nuttig. De online visuele editor waarmee u webapps kunt ontwerpen op basis van uw voorkeuren.
En het beste is dat je geen programmeerervaring of expertise nodig hebt. Bubble is geschikt voor iedereen, of je nu weet hoe je moet coderen of niet.
Voorkennis van frontend-talen kan u echter een voorsprong geven, omdat u hierdoor snel kunt achterhalen wat het doet met betrekking tot het afhandelen van gebeurtenissen.
Dus, wat vind je van de mogelijkheden van Bubble?
Laat het ons weten in de comments!
Arbehi
Kan er een winkel worden gemaakt om producten te verkopen met behulp van de bubble.io-tool?