Table of Contents[Ferstopje][Toanje]
- Wat is Bubble.io?
- Wat is fisuele programmearring?
- Hokker soarten apps kinne jo ûntwikkelje?
In app bouwe mei Bubble (tutorial)+-
- 1. Begjin
- 2. Ynstelle databank
- 3. Building workflows
- 4. It meitsjen fan in nijsferhaal
- 5. It werjaan fan dynamyske ynhâld yn 'e feed
- 6. It ferstjoeren fan gegevens tusken siden
- 7. It werjaan fan dynamyske ynhâld op 'e ferhaalside
- 8. It werjaan fan it artikel fan de útjouwer
- 9. Folgjende útjouwers
- 10. Oanfoljende funksjes kinne jo tafoegje
- 11. It resultaat
- pros
- Cons
- Pricing
- Konklúzje
Ik haw koartlyn ynteressearre west yn oanpak foar webûntwikkeling oars dan HTML, CSS, en JavaScript.
Mei it groeiende lânskip sûnder koade, wie it net ferrassend om te ûntdekken dat d'r ferskate alternativen binne foar de mear standert oanpak foar it ûntwikkeljen fan webapplikaasjes.
Jo moatte bekend wêze mei guon fan 'e mear bekende CMS-platfoarms, lykas WordPress dy't frijwat koadefrij binne. Mar, as jo webapps wolle bouwe, kinne sokke platfoarms beheinend lykje.
Hjir yntrodusearje ik jo oan Bubble.io, in krêftige no-koade ark wêrmei jo webapps kinne bouwe lykas nea earder.
Litte wy it yngeand ûndersykje!
Wat is Bubble.io?
Bubble is in net-technysk platfoarm dat kombinearret in fisuele programmeartaal en in webûntwikkelingskader.
Brûkers kinne dizze programmearring ark brûke om unike online applikaasjes te bouwen, databases en prosessen te feroarjen, sidekomponinten (ôfbyldings, tekst, ynfierformulieren, kaarten) ta te foegjen en har ynterfaces te ûntwerpen.
It is in merkplak wêr't jo ideale sjabloanen, plugins en tsjinsten kinne ûntdekke om jo te helpen by it bouwen fan sterke produkten.
Sûnder in typysk programmearringskader yn te stellen, kinne jo alles meitsje fan in merkplak oant in sosjaal netwurk oant in CRM (Customer Relationship Management) mei Bubble.
It jout klanten de mooglikheid om har apps te meitsjen en personalisearje mei in brûkerfreonlike ynterface en in point-and-click-bewurker.
Jo kinne it brûke yn kombinaasje mei tsjinsten dy't in REST API leverje, lykas Facebook, SQL, analytics en betellingsapps. It stelt brûkers yn steat om tiid te besteegjen oan it ferbetterjen fan de funksjonaliteit en it uterlik fan har applikaasjes, sadat se goed útsjen op tablets en mobile apparaten.
It is passend foar alle saaklike maten, fan lyts oant medium oant grut; en tagonklik foar Windows, Mac en it web.
Wat is fisuele programmearring?
Visuele programmearring is yn wêzen wat it klinkt. Ynstee fan manuell programmearje troch koade te skriuwen, dogge jo it grafysk troch te klikken en komponinten nei siden te slepen.
Wês net misleid troch dy koarte beskriuwing.
It is net lykas elke oare cookie-cutter-app as ark foar it bouwen fan websiden dy't jo online binne tsjinkaam. De measte app-bouwers fereaskje dat jo op basissjabloanen fertrouwe en ekstreem beheinde funksjonaliteit hawwe; se tastean jo allinich spesifike soarten apps te ûntwikkeljen en jo personalisaasje te beheinen.
Hoewol it begryp "fisuele programmearring" en "slepen en droppe" maklik ferskynt yn Bubble, is it geweldig krêftich.
Syn fisuele programmearomjouwing lit jo net allinich objekten lykas tekst, grafiken, ynputs en mear nei in side slepe, mar it lit jo ek ynstelle wat dy eleminten dogge.
Wat docht Bubble?
It primêre doel fan Bubble is om elkenien ynskeakelje te kinnen om webapps te meitsjen sûnder koade te skriuwen.
Hoewol dit lykwols soarget foar in maklik te ûnthâlden doelstelling, lit it in signifikant bytsje fan it ferhaal út. It paad fan idee nei merk is yngewikkelder dan gewoan it meitsjen fan rigels fan koade.
In team fan heech oplaat professionals dy't wurkje oan bepaalde seksjes fan 'e skepping, groei en ûnderhâld fan' e app is fereaske yn konvinsjonele ûntwikkeling. Beskôgje dit.
Wat fereasket elke app?
- Feiligens om te soargjen dat gjinien sûnder foech tagong ta gegevens hat.
- In databank foar it opslaan en opheljen fan ynformaasje lykas items, artikels en updates op sosjale media.
- Skalberens om de ûnbehindere ûntwikkeling fan 'e brûkersbasis en gegevensvolumint mooglik te meitsjen.
- In noflike brûkersynterface om de app oantreklik en maklik te brûken te meitsjen.
- Yntegraasje mei ferskate tsjinsten en systemen.
Bubble ferfangt folle mear as in coder. It leveret al dizze tsjinsten op in visueel oansprekkende en heul automatisearre manier, wêrtroch it tinkber is, as net ienfâldich, foar ien persoan om alles te behanneljen.
Wylst eardere platfoarms sûnder koade hawwe besocht kodearring op ferskate manieren te ferfangen. It konsept is om safolle mooglik obstakels te ferwiderjen foar in app om de merk te berikken, alles te behanneljen fan responsyf ûntwerp en animaasjes oant hosting, ferzje-ynset, feiligens en databankoperaasjes.
De API-ferbining brûke om Bubble te ferbinen mei oare tsjinsten
De API Connector is wierskynlik de wichtichste plugin op 'e merke. Sa't de namme al fermoeden docht, kinne jo ferbine mei oare apps en tsjinsten om aksjes en gegevens te dielen.
Yn stee fan te ferdjipjen yn 'e technyske spesifikaasjes fan hoe't dit wurket, beskôgje dizze foarbylden fan wat API's kinne berikke:
- It krijen fan tagong ta masine learen metoaden lykas byldherkenning en oersetting.
- Krij de meast resinte waarynformaasje fan oeral op 'e ierde.
- As in barren yn Bubble trigger wurdt, wurdt ynformaasje útwiksele oer systemen, lykas it fêststellen fan in lead yn jo CRM of in ôfspraak yn jo Google Calendar.
- Boek in flecht of in hotelferbliuw oeral yn 'e wrâld.
- Krij it telefoannûmer, lokaasje, foto's, logo en beoardielingen foar elk bedriuw op Google Maps.
It brûken fan plugins om native funksjes te ferbetterjen
Technysk minget it JavaScript-koademodules, CSS en HTML yn in funksjonele knooppunt. Applikaasje skreaun yn JS.JSON tsjinnet as de basis foar har eigen taal.
Wylst jo dizze terminology net folslein hoege te begripen om apps te bouwen, jouwe se wol ien kaaifeit oan: it hâldt him oan bekende en erkende webnoarmen, wêrtroch ûntwikkelders de eigen funksjonaliteit derfan kinne ferbetterje.
Dit is al te sjen op 'e plugin-side, wêr't hûnderten fergese en betelle tafoegings foar de basisfunksjonaliteit beskikber binne. It ymplisearret ek dat as jo in punt berikke dat syn fûnemintele mooglikheden net genôch binne, d'r in protte JavaScript-eksperts binne ree om in maatwurk oplossing foar jo op te stellen.
Hokker soarten apps kinne jo ûntwikkelje?
Jo kinne in breed oanbod fan applikaasjes oanmeitsje, wêrfan guon hjirûnder wurde jûn.
- Apps foar spesjalisearre merken mei in mienskip.
- Apps foar job boards yn in ferskaat oan sektoaren.
- Software foar sikehûs personiel.
- Point-of-sale software foar fysike winkels.
- Dental office software mei in wyt label.
- Persoanlike saaklike ynventarisaasje en klanttsjinstsoftware.
- Makelaar en klant-facing applikaasjes foar aggregaasje fan unreplik guod.
- Apps foar eveneminten en kursussen op 'e merke (en sels boaten).
- Profesjonele sertifikaten fereaskje ynterne testapplikaasjes.
- Applikaasjes foar earste responders.
- Employee management software foar yntern gebrûk.
Om earlik te wêzen, is it platfoarm net ûntworpen om alles te dwaan. It is miskien net de ideale kar as jo in spielapplikaasje ûntwerpe mei komplekse fisuele en beweging. Derneist, as jo in native app meitsje (ien foar app-winkels), moatte jo it yntegrearje mei in oare tsjinst fan tredden.
Key features
Bubble is fol mei funksjes. Wy sille se hjir net allegear kinne dekke, mar wy sille besykje de meast essensjele te dekken.
1. Ynstekkers
It lit jo funksjonaliteit fan ferskate ark op it ynternet opnimme yn jo webapplikaasje. As jo bygelyks wolle dat jo brûkers oanmelde mei har Facebook-akkount, kinne jo de Facebook-plugin brûke om dit te dwaan.
2. Untwikkelje
It lit jo dynamyske apps foar meardere brûkers konstruearje foar buroblêden en mobile webbrowsers, lykas alle ark nedich om in side te bouwen lykas Instagram of Airbnb.
3. Untwerp
Jo kinne mobylfreonlike yndielingen en dynamyske ynhâld meitsje om de finish te jaan oan in produkt dat jo bliid sille sjen litte oan oaren.
4. hosting
Nea hoege te wêzen soargen oer tsjinner ûnderhâld, ynfrastruktuer, of operaasjes hieltyd wer.
It soarget foar ynset en hosting foar jo op in feilige en feilige manier. It oantal brûkers, ferkearsvolumint en gegevensopslach binne allegear ûnbeheind.
In app bouwe mei Bubble (tutorial)
Litte wy no yn aksje komme en ûndersykje hoe't jo in nijsapp kinne bouwe op Bubble.
1. Begjin
Om te begjinnen, moatte jo earst registrearje foar in fergees akkount op Bubble.
Wy sille begjinne mei it brûken fan Bubble's fisuele ûntwerpark om ús platfoarms te foarmjen brûkersynterface. Guon fan 'e kaaisiden om op te nimmen wurde hjirûnder jûn:
- Upload side - In webside wêr't útjouwers artikels sille ûntwikkelje en fersprieden.
- Thússide - In list mei koartlyn publisearre ferhalen wurdt werjûn.
- Ferhalende side - In side wêr't elk unyk ferhaal te finen is.
- Publisher page- In side om in list mei ferhalen fan in bepaalde útjouwer te werjaan.
2. Ynstelle databank
Neidat jo de werjefte fan jo produkt hawwe oanlein, kinne jo konsintrearje op it bouwen fan de gegevensfjilden dy't jo applikaasje sille brânstof. Wy sille dizze fjilden brûke om de workflows te keppeljen dy't jo produkt ûnderlizze.
Foar dit foarbyld sille wy twa ûnderskate gegevenstypen foar elk nijsstik fêststelle. Ien gegevenstype sil de basisfeiten fan in ferhaal befetsje (lykas de titel, featured ôfbylding, en útjouwer), wylst it oare gegevenstype gruttere ynhâldbestannen sil befetsje lykas it hiele ferhaal sels.
Troch se te definiearjen as diskrete gegevenstypen, kinne wy allinich de ynformaasje laden dy't nedich is as it nedich is, en it bedrach fan materiaal beheine dat de Bubble-bewurker moat produsearje.
De folgjende gegevenstypen en fjilden wurde oanmakke:
Soart data: Brûker
Fjilden:
- namme
- De folgjende útjouwers binne in list mei útjouwers. Wichtige opmerking: it oanmeitsjen fan in fjild as in list basearre op in ûnderskate gegevenstype lit jo al syn essensjele gegevensfjilden sûnder muoite opnimme sûnder ekstra fjilden oan te meitsjen.
Soart data: Ferhaal
Fjilden:
- Titel
- Featured image
- Skriuwer
- Kategory
- Útjouwer
- Ferhaal ynhâld
Soart data: Ferhaal ynhâld
Fjilden:
- Ferhaal ynhâld
Soart data: Útjouwer
Fjilden:
- namme
- logo
- Followers
3. Building workflows
No't jo it ûntwerp en de database fan jo applikaasje hawwe organisearre, is it tiid om alles byinoar te setten en it te meitsjen.
Workflows binne de primêre metoade om dit te berikken yn Bubble.
Elke workflow komt foar as in evenemint plakfynt (bgl. in brûker klikt op in knop) en fiert dan in folchoarder fan "aksjes" út as antwurd (bgl. .
4. It meitsjen fan in nijsferhaal
De earste funksje dy't wy sille oanbiede is in ark wêrmei útjouwers nijsstikken kinne skriuwe en pleatse op 'e side.
Op 'e uploadside sille wy begjinne mei it opnimmen fan in protte ynfier-items dy't sille wurde tapast op it ynfieren fan gegevens yn ús database. Tekstynfier, in foto-uploader, en in dropdown-seleksje binne foarbylden fan dizze fjilden.
Wy moatte ek it útklapmenu fan de útjouwer oanpasse om in list mei dynamyske opsjes wer te jaan. Om't elk nij artikel wurdt tafoege oan in útjouwer syn list fan totale artikels, wy moatte kieze in besteande útjouwer út ús databank.
By it ynstellen fan dit dellûkmenu, sille wy it type opsjes kieze om in útjouwer te wêzen.
Dêrnei sil ús gegevensboarne ús databank scannen en in list weromjaan fan alle aktuele publikaasjes. As lêste sille wy de boarnetitel feroarje om de namme fan de útjouwer op te nimmen.
Sadree't in skriuwer de nedige ynformaasje hat ynfierd yn elke yngong op side, sille se op de publisearje knop klikke om in nij ferhaal te generearjen.
Dan, binnen jo database, meitsje jo in nij ding mei it gegevenstype ynsteld op narratyf.
Dan moatte wy begjinne mei it ynfoljen fan ús database mei de nedige fjilden. Ferbine elk fan 'e ynfierkomponinten op side mei har respektive databasekolommen.
Earst sille wy it type ferhaalynhâld oanmeitsje, dat einlings sil wurde keppele oan it ferhaal sels.
Folgjende sille wy in oare poadium tafoegje oan dizze proseduere, wat oars generearje - dizze kear it ferhaal sels.
It is mooglik om dizze gegevens sûnder muoite yn jo platfoarm te yntegrearjen troch it earste fertelmateriaal te yntegrearjen dat wy hawwe ûntwikkele mei dit ferhaal.
In nij ferhaal sil wurde produsearre eltse kear dizze proseduere wurdt aktivearre.
5. It werjaan fan dynamyske ynhâld yn 'e feed
Sadree't útjouwers begjinne mei it uploaden fan materiaal nei jo mobile app, moatte wy begjinne mei it meitsjen fan de logika op jo thússide dy't elk artikel toant as in dynamyske list. Dit kin wurde berikt troch it brûken fan ús werheljende groepelemint.
Werheljende groepen wurkje mei jo databank om in list mei dynamysk materiaal te presintearjen en te ferfarskjen.
By it tapassen fan in werheljende groep moatte jo it elemint earst keppelje oan in gegevenstype yn jo databank.
Yn dit gefal sille jo it soarte materiaal as ferhalen kategorisearje. Jo moatte ek de gegevensboarne leverje as in list fan alle tabellen yn jo databank.
Wy sille dizze weromkommende groep ek regelje neffens de startdatum fan elk ferhaal, en de list yn omkearde gronologyske folchoarder toant. Jo kinne no begjinne mei it organisearjen fan it dynamyske materiaal dat sil ferskine binnen elk raster.
Folje gewoan de boppeste rige yn mei it passende materiaal dat jo wolle werjaan, en dit krêftige elemint sil de oerbleaune kolommen befolke mei gegevens fan jo hjoeddeistige databank.
6. It ferstjoeren fan gegevens tusken siden
It is ek mooglik om eveneminten te konstruearjen binnen elke rige fan in werheljende groep. By it ûntwikkeljen fan navigaasjefunksjes foar jo platfoarm, sil dizze funksjonaliteit fan pas komme.
De thússide fan ús nijsapp toant allinich in foarbyld fan elk ferhaal, ynklusyf de útjouwer, in útbylde ôfbylding en de ferhaaltitel.
It toant lykwols net de folsleine ynhâld fan in artikel oant de brûker trochklikt nei de ferhaalside. Wy sille ús workflow-bewurker brûke om gegevens oer te stjoeren tusken siden om dit materiaal wer te jaan.
Om te begjinnen, meitsje in proses dat in brûker nei de ferhaalside stjoert as de ôfbylding fan in ferhaal wurdt oanklikt.
Brûk in navigaasje-evenemint om in brûker oer te bringen nei in oare side by it ûntwikkeljen fan dit proses.
Kies it bestimmingsidetype om de fertelside te wêzen út it útklapmenu. Jo moatte dan mear ynformaasje jaan oan dizze side, sadat de Bubble-bewurker begrypt hokker unike ferhaal te sjen is.
De ynformaasje dy't jo moatte jaan komt út it hjoeddeistige sellenferhaal.
7. It werjaan fan dynamyske ynhâld op 'e ferhaalside
Jo kinne dizze evenemintgegevens maklik ophelje en it relevante materiaal út it ferhaal sjen litte as in brûker nei in bepaalde ferhaalside stjoerd wurdt.
Om dizze funksje te meitsjen, moatte jo earst kontrolearje dat it doelsidetype oerienkomt mei de gegevenseigenskip dy't jo troch de workflow leverje. Yn dizze situaasje moatte jo de ferhaalside assosjearje mei in ferhaaleigenskip.
It kin gewoan passende gegevens fan besteande boarnen lûke en leverje troch it type ynhâld op in side te kategorisearjen.
Jo kinne no begjinne mei it ynfoegjen fan dynamysk materiaal yn fjilden dy't ynformaasje fan ien tabel werjaan.
8. It werjaan fan it artikel fan de útjouwer
Nei it lêzen fan in nijsartikel kin in brûker kieze om de folsleine katalogus fan artikels fan de útjouwer te ûndersykjen. As jo in datatype foar útjouwer hawwe ûntwikkele, is it meitsjen fan in aparte side foar útjouwers sa ienfâldich as it meitsjen fan ús oarspronklike thússide.
Op dizze side moatte wy begjinne mei it ynstellen fan it sidetype foar útjouwer.
Kopiearje dan de werhellende groep fan 'e thússide en bewurkje de ynstellings.
Yn dit gefal sil de gegevensboarne fan ús werheljende groep sykje nei alle besteande artikels wêrfan de útjouwer de hjoeddeistige side-útjouwer is.
9. Folgjende útjouwers
De tredde fûnemintele funksje dy't wy sille bouwe foar ús MVP is de mooglikheid om in útjouwer op it platfoarm te folgjen. Wy sille in folchknop tafoegje oan 'e útjouwersside. As wy op dit ikoan klikke, sille wy in nij proses starte dat in ding feroaret.
It tafoegjen fan de aktuele side-útjouwer oan har list mei folgjende publikaasjes sil de aktuele brûker feroarje.
Hjirnei moatte wy de list fan folgers fan de hjoeddeistige side-útjouwer bywurkje troch de hjoeddeistige brûker ta te foegjen.
10. Oanfoljende funksjes kinne jo tafoegje
No't jo noflik binne mei it bouwen fan oanpaste gegevensfjilden en it presintearjen fan dynamyske ynformaasje, kinne jo kreatyf wurde mei de ûnderfiningen dy't jo meitsje foar jo produkt. Jo kinne ek opnimme:
- Meitsje in funksje wêrmei brûkers ynhâld kinne bewarje foar letter lêzen.
- Jou oan 'e ûnderkant fan elk stik in weromkommende kolleksje fan foarstelde artikels.
- Meitsje in sykopdracht om minsken te helpen nije ynhâld op 'e side te finen.
11. It resultaat
Jo lêste app sil der sa útsjen.
pros
- De mooglikheid om te ferbinen mei in protte API's en plugins.
- In maklik te brûken applikaasje sûnder koade.
- Minsken sûnder programmearringûnderfining sille hjirfan profitearje.
- Untwerp ark dy't sawol alsidige as krêftich binne.
- Fluch ferwurking fan query.
Cons
- Ferhege betrouberens.
- De snelheid fan gegevensferwurking is stadich.
- Prestaasje is beheind.
Pricing
It fergese plan lit jo leare oer it platfoarm en jo applikaasje ûntwikkelje.
Betelle abonneminten omfetsje ekstra's lykas wyt-labeling, in oanpast domein, tagong ta de Bubble API, en reservearre serverkapasiteit, dy't hjirûnder steane.
- Persoanlik - $ 25 / moanne (jierliks betelle) of $ 29 / moanne (moanliks betelle).
- Profesjoneel - $ 115 / moanne (jierliks betelle) of $ 129 / moanne (moanliks betelle).
- Produksje - $ 475 / moanne (jierliks betelle) of $ 529 / moanne (moanliks betelle).
Konklúzje
Bubble is in poerbêst alternatyf foar it bouwen fan webapplikaasjes dy't allinich ynformaasje kinne sjen litte of in minimale UI hawwe.
It is frij simpel te brûken, en de tutorials levere troch Bubble binne ekstreem nuttich. De online fisuele bewurker wêrmei jo webapps kinne ûntwerpe op basis fan jo foarkar.
En it bêste diel is dat jo gjin programmearûnderfining of ekspertize nedich hawwe. Bubble is geskikt foar elkenien, nettsjinsteande oft jo witte hoe te koade of net.
Foarôfgeand begryp fan frontend-talen kin jo lykwols in foardiel jaan, om't jo fluch kinne útfine wat it docht oangeande ôfhanneling fan eveneminten.
Dat, wat tinke jo oer de mooglikheden fan Bubble?
Lit it ús witte yn 'e kommentaren!
Arbehi
Kin in winkel makke wurde om produkten te ferkeapjen mei it bubble.io-ark?