Taula de continguts[Amaga][Espectacle]
- Què és Bubble.io?
- Què és la programació visual?
- Quins tipus d'aplicacions pots desenvolupar?
Creació d'una aplicació amb Bubble (tutorial)+-
- 1. Introducció
- 2. Configuració de la base de dades
- 3. Construir fluxos de treball
- 4. Creació d'una notícia
- 5. Mostrar contingut dinàmic al feed
- 6. Enviament de dades entre pàgines
- 7. Mostrar contingut dinàmic a la pàgina de la història
- 8. Visualització de l'article de l'editor
- 9. Següent editorials
- 10. Funcions addicionals que podeu afegir
- 11. El resultat
- pros
- Contres
- Preus
- Conclusió
Recentment m'han interessat en enfocaments de desenvolupament web que no siguin HTML, CSS i JavaScript.
Amb el creixent panorama sense codi, no va ser sorprenent descobrir que hi ha diverses alternatives als enfocaments més estàndard per desenvolupar aplicacions web.
Heu d'estar familiaritzat amb algunes de les plataformes CMS més conegudes, com ara WordPress, que són pràcticament lliures de codi. Però, si voleu crear aplicacions web, aquestes plataformes poden semblar restrictives.
Aquí us presento Bubble.io, un potent eina sense codi que us permet crear aplicacions web com mai abans.
Explorem-ho en profunditat!
Què és Bubble.io?
Bubble és una plataforma no tècnica que combina un llenguatge de programació visual i un marc de desenvolupament web.
Els usuaris poden utilitzar aquestes eines de programació per construir aplicacions en línia úniques, alterar bases de dades i processos, afegir components de pàgina (imatges, text, formularis d'entrada, mapes) i dissenyar les seves interfícies.
És un mercat on podeu descobrir plantilles, connectors i serveis ideals per ajudar-vos a crear productes sòlids.
Sense haver de configurar un marc de programació típic, podeu crear qualsevol cosa, des d'un mercat fins a una xarxa social fins a un CRM (Customer Relationship Management) amb Bubble.
Ofereix als clients la possibilitat de crear i personalitzar les seves aplicacions mitjançant una interfície fàcil d'utilitzar i un editor d'apuntar i fer clic.
Podeu utilitzar-lo juntament amb serveis que proporcionen una API REST, com ara Facebook, SQL, aplicacions d'anàlisi i de pagament. Permet als usuaris dedicar temps a millorar la funcionalitat i l'aspecte de les seves aplicacions perquè es vegin bé en tauletes i dispositius mòbils.
És adequat per a totes les mides d'empresa, des de petites a mitjanes i grans; i accessible per a Windows, Mac i el web.
Què és la programació visual?
La programació visual és essencialment el que sembla. En lloc de programar manualment escrivint codi, ho feu gràficament fent clic i arrossegant components a les pàgines.
No us deixeu enganyar per aquesta breu descripció.
No és com qualsevol altra aplicació de tall de galetes o eina de creació de llocs web que hàgiu trobat en línia. La majoria dels creadors d'aplicacions requereixen que confieu en plantilles bàsiques i tinguin una funcionalitat extremadament limitada; només us permeten desenvolupar tipus específics d'aplicacions i limitar la vostra personalització.
Tot i que la noció de "programació visual" i "arrossegar i deixar anar" sembla fàcil a Bubble, és tremendament potent.
El seu entorn de programació visual no només us permet arrossegar objectes com ara text, gràfics, entrades i més a una pàgina, sinó que també us permet configurar què fan aquests elements.
Què fa Bubble?
L'objectiu principal de Bubble és permetre a qualsevol persona crear aplicacions web sense haver d'escriure codi.
Tanmateix, tot i que això proporciona una declaració d'objectiu fàcil de recordar, deixa de banda una part important de la història. El camí de la idea al mercat és més complicat que només crear línies de codi.
En el desenvolupament convencional es requereix un equip de professionals altament formats que treballin en determinades seccions de la creació, creixement i manteniment de l'aplicació. Considereu això.
Què requereix cada aplicació?
- Seguretat per assegurar-se que ningú té accés no autoritzat a les dades.
- Una base de dades per emmagatzemar i recuperar informació com ara articles, articles i actualitzacions de xarxes socials.
- Escalabilitat per permetre el desenvolupament sense obstacles de la base d'usuaris i el volum de dades.
- Una interfície d'usuari agradable per fer que l'aplicació sigui atractiva i fàcil d'utilitzar.
- Integració amb diversos serveis i sistemes.
Bubble substitueix molt més que un codificador. Ofereix tots aquests serveis d'una manera visualment atractiva i altament automatitzada, cosa que fa concebible, si no senzill, que una sola persona s'ocupi de tot.
Mentre que les plataformes anteriors sense codi han intentat substituir la codificació de diverses maneres. El seu concepte és eliminar tantes barreres com sigui possible perquè una aplicació arribi al mercat, gestionant-ho tot, des del disseny responsiu i animacions fins a l'allotjament, el desplegament de versions, la seguretat i les operacions de bases de dades.
Utilitzant el connector API per connectar Bubble a altres serveis
El seu connector API és probablement el connector més important del mercat. Com el seu nom indica, això us permet connectar-vos a altres aplicacions i serveis per compartir accions i dades.
En lloc d'aprofundir en els detalls tècnics de com funciona això, considereu aquests exemples del que poden aconseguir les API:
- Obtenció d'accés a màquina d'aprenentatge mètodes com el reconeixement d'imatges i la traducció.
- Obteniu la informació meteorològica més recent des de qualsevol lloc de la terra.
- Quan s'activa un esdeveniment a Bubble, la informació s'intercanvia entre els sistemes, com ara establir un contacte al vostre CRM o una cita al vostre Google Calendar.
- Reserva un vol o una estada en hotel a qualsevol part del món.
- Obteniu el número de telèfon, la ubicació, les fotografies, el logotip i les ressenyes de qualsevol empresa a Google Maps.
Ús de connectors per millorar les funcions natives
Tècnicament, barreja mòduls de codi JavaScript, CSS i HTML en un node funcional. L'aplicació escrita en JS.JSON serveix com a base per al seu propi llenguatge.
Tot i que no cal que entengueu completament aquesta terminologia per construir aplicacions, sí que indiquen un fet clau: s'adhereix als estàndards web coneguts i reconeguts, cosa que permet als desenvolupadors millorar considerablement la seva funcionalitat nativa.
Això ja es veu al lloc del complement, on hi ha disponibles centenars d'extensions gratuïtes i de pagament per a la funcionalitat bàsica. També implica que si arribeu a un punt en què les seves capacitats fonamentals són insuficients, hi ha molts experts en JavaScript disposats a oferir-vos una solució a mida.
Quins tipus d'aplicacions pots desenvolupar?
Podeu crear una àmplia gamma d'aplicacions, algunes de les quals es mostren a continuació.
- Aplicacions per a mercats especialitzats amb comunitat.
- Aplicacions per a borses de treball en diversos sectors.
- Programari per al personal hospitalari.
- Programari de punt de venda per a botigues físiques.
- Programari d'oficina dental amb marca blanca.
- Inventari personal de negocis i programari d'atenció al client.
- Aplicacions d'agregació immobiliària orientades a intermediaris i clients.
- Aplicacions per a esdeveniments i cursos al mercat (i fins i tot embarcacions).
- Els certificats professionals requereixen aplicacions de proves internes.
- Sol·licituds per a primers intervencions.
- Programari de gestió d'empleats per a ús intern.
Per ser honest, la plataforma no està dissenyada per fer-ho tot. Pot ser que no sigui l'opció ideal si esteu dissenyant una aplicació de joc amb imatges i moviments complexos. A més, si esteu creant una aplicació nativa (una per a botigues d'aplicacions), haureu d'integrar-la amb un altre servei de tercers.
Característiques principals
Bubble està ple de funcions. Aquí no els podrem cobrir tots, però intentarem cobrir els més essencials.
1. Plugins
Us permet incloure funcionalitats de nombroses eines d'Internet al vostre aplicació web. Per exemple, si voleu que els vostres usuaris iniciïn sessió amb el seu compte de Facebook, podeu utilitzar el connector de Facebook per fer-ho.
2. Desenvolupar
Us permet crear aplicacions dinàmiques i multiusuari per a navegadors web d'escriptori i mòbils, així com totes les eines necessàries per crear un lloc similar a Instagram o Airbnb.
3 Disseny
Podeu crear dissenys adaptats per a mòbils i contingut dinàmic per donar els tocs finals a un producte que us plau mostrar als altres.
4. allotjament
Mai us haureu de preocupar pel manteniment del servidor, la infraestructura o les operacions una i altra vegada.
S'ocupa del desplegament i l'allotjament per a vostè d'una manera segura i segura. El nombre d'usuaris, el volum de trànsit i l'emmagatzematge de dades no tenen restriccions.
Creació d'una aplicació amb Bubble (tutorial)
Passem ara a l'acció i explorem com podeu crear una aplicació de notícies a Bubble.
1. Introducció
Per començar, primer cal registra't per obtenir un compte gratuït a Bubble.
Començarem utilitzant l'eina de disseny visual de Bubble per donar forma a la nostra plataforma interfície d'usuari. A continuació es mostren algunes de les pàgines clau que cal incloure:
- Pàgina de càrrega: un lloc web on els editors desenvoluparan i distribuiran articles.
- Pàgina d'inici: es mostra una llista de les històries publicades recentment.
- Pàgina narrativa: una pàgina on es pot trobar cada història única.
- Pàgina de l'editor: una pàgina per mostrar una llista de contes d'un editor determinat.
2. Configuració de la base de dades
Després d'haver dissenyat la pantalla del producte, podeu centrar-vos a crear els camps de dades que alimentaran la vostra aplicació. Utilitzarem aquests camps per enllaçar els fluxos de treball subjacents al vostre producte.
Per a aquest exemple, establirem dos tipus de dades diferents per a cada notícia. Un tipus de dades contindrà els fets bàsics d'una història (com ara el títol, la imatge destacada i l'editor), mentre que l'altre tipus de dades contindrà fitxers de contingut més grans, com ara tota la narració.
En definir-los com a tipus de dades discrets, només podem carregar la informació que es requereix quan es requereix, limitant la quantitat de material que l'editor de bombolles haurà de produir.
Es crearan els següents tipus de dades i camps:
Tipus de dades: Usuari
Camps:
- Nom
- Les següents editorials són una llista d'editors. Nota important: la creació d'un camp com a llista basada en un tipus de dades diferent us permet incorporar tots els seus camps de dades essencials sense esforç sense haver de crear camps addicionals.
Tipus de dades: Història
Camps:
- títol
- Imatge destacada
- escriptor
- categoria
- Editor
- Contingut de la història
Tipus de dades: Contingut de la història
Camps:
- Contingut de la història
Tipus de dades: Editor
Camps:
- Nom
- Logo
- Seguidors
3. Construir fluxos de treball
Ara que heu organitzat el disseny i la base de dades de la vostra aplicació, és hora de començar a reunir-ho tot i fer-ho funcionar.
Els fluxos de treball són el mètode principal per aconseguir-ho a Bubble.
Cada flux de treball es produeix quan es produeix un esdeveniment (per exemple, un usuari fa clic en un botó) i després realitza una seqüència d'"accions" en resposta (per exemple, "inscriure l'usuari", "fer un canvi a la base de dades", etc.) .
4. Creació d'una notícia
La primera característica que oferirem és una eina que permet als editors escriure i publicar notícies al lloc.
A la pàgina de càrrega, començarem incorporant molts elements d'entrada que s'aplicaran per introduir dades a la nostra base de dades. Les entrades de text, un carregador d'imatges i una selecció desplegable són exemples d'aquests camps.
També haurem de personalitzar el menú desplegable de l'editor per mostrar una llista d'opcions dinàmiques. Com que cada article nou s'afegirà a la llista d'articles totals d'un editor, haurem de triar un editor existent de la nostra base de dades.
Quan configureu aquest menú desplegable, triarem el tipus d'opcions per ser un editor.
Després d'això, la nostra font de dades escanejarà la nostra base de dades i retornarà una llista de totes les publicacions actuals. Finalment, canviarem el títol d'origen per incloure el nom de l'editor.
Un cop un escriptor hagi introduït la informació necessària a cada entrada de la pàgina, farà clic al botó de publicació per generar un nou conte.
Aleshores, dins de la vostra base de dades, creareu una cosa nova amb el tipus de dades establert com a narrativa.
Aleshores haurem de començar a omplir la nostra base de dades amb els camps necessaris. Connecteu cadascun dels components d'entrada de la pàgina a les columnes respectives de la base de dades.
En primer lloc, crearem el tipus de contingut de la història, que finalment s'enllaçarà amb el conte en si.
A continuació, afegirem una altra etapa a aquest procediment, generant una altra cosa: aquesta vegada, el conte en si.
És possible integrar aquestes dades sense esforç a tota la vostra plataforma integrant el primer material narratiu que hem desenvolupat amb aquest conte.
Cada vegada que s'activi aquest procediment es produirà un nou conte.
5. Mostrar contingut dinàmic al feed
Un cop els editors comencin a penjar material a la vostra aplicació mòbil, haurem de començar a crear la lògica a la vostra pàgina d'inici que mostri cada article com una llista dinàmica. Això es pot aconseguir utilitzant el nostre element de grup repetitiu.
Els grups que es repeteixen treballen amb la vostra base de dades per presentar i actualitzar una llista de material dinàmic.
Quan apliqueu un grup repetit, primer heu d'enllaçar l'element a un tipus de dades de la vostra base de dades.
En aquest cas, classificareu el tipus de material com a contes. També haureu de proporcionar la font de dades com a llista de totes les taules de la vostra base de dades.
També organitzarem aquest grup recurrent per la data d'inici de cada història, mostrant la llista en ordre cronològic invers. Ara podeu començar a organitzar el material dinàmic que apareixerà dins de cada graella.
Simplement ompliu la fila superior amb el material adequat que voleu mostrar i aquest potent element omplirà les columnes restants amb dades de la vostra base de dades actual.
6. Enviament de dades entre pàgines
També és possible construir esdeveniments dins de cada fila d'un grup que es repeteix. Quan desenvolupeu funcions de navegació per a la vostra plataforma, aquesta funcionalitat serà útil.
La pàgina d'inici de la nostra aplicació de notícies només mostra una vista prèvia de cada història, inclosa l'editor, una imatge destacada i el títol de la història.
Tanmateix, no mostra tot el contingut d'un article fins que l'usuari fa clic a la pàgina de la història. Utilitzarem el nostre editor de flux de treball per transmetre dades entre pàgines per mostrar aquest material.
Per començar, creeu un procés que enviï un usuari a la pàgina de la història quan es fa clic a la imatge d'una història.
Utilitzeu un esdeveniment de navegació per transferir un usuari a una altra pàgina mentre desenvolupeu aquest procés.
Trieu el tipus de pàgina de destinació perquè sigui la pàgina narrativa al menú desplegable. Aleshores, haureu de donar més informació a aquesta pàgina perquè l'editor de bombolles entengui quina història única mostrar.
La informació que haureu de donar prové de la història de les cel·les actuals.
7. Mostrar contingut dinàmic a la pàgina de la història
Podeu recuperar fàcilment aquestes dades d'esdeveniment i mostrar el material rellevant de la narració quan un usuari s'envia a una pàgina de la història determinada.
Per crear aquesta funció, primer heu de comprovar que el tipus de pàgina de destinació coincideix amb la propietat de dades que esteu enviant mitjançant el flux de treball. En aquesta situació, heu d'associar la pàgina de la història amb una propietat de la història.
Simplement pot extreure i lliurar dades adequades de les fonts existents classificant el tipus de contingut d'una pàgina.
Ara podeu començar a inserir material dinàmic en camps que mostren informació d'una única taula.
8. Visualització de l'article de l'editor
Després de llegir una notícia, un usuari pot optar per examinar tot el catàleg d'articles de l'editor. Si heu desenvolupat un tipus de dades d'editor, crear una pàgina separada per a editors és tan senzill com crear la nostra pàgina d'inici original.
En aquesta pàgina, haurem de començar configurant el tipus de pàgina com a editor.
A continuació, copieu el grup que es repeteix des de la pàgina d'inici i editeu la configuració.
En aquest cas, la font de dades del nostre grup repetidor buscarà tots els articles existents l'editor dels quals sigui l'editor de la pàgina actual.
9. Següent editorials
La tercera característica fonamental que construirem per al nostre MVP és la possibilitat de seguir un editor a la plataforma. Afegirem un botó de seguiment a la pàgina de l'editor. Quan fem clic a aquesta icona, iniciarem un procés nou que modifica una cosa.
Afegir l'editor de la pàgina actual a la seva llista de publicacions següents canviarà l'usuari actual.
Després d'això, haurem d'actualitzar la llista de seguidors de l'editor de la pàgina actual afegint l'usuari actual.
10. Funcions addicionals que podeu afegir
Ara que us sentiu còmode creant camps de dades personalitzats i presentant informació dinàmica, podeu ser creatiu amb les experiències que creeu per al vostre producte. També podeu incloure:
- Creeu una funció que permeti als usuaris desar contingut per llegir-lo posteriorment.
- A la part inferior de cada peça, proporcioneu una col·lecció recurrent d'articles suggerits.
- Creeu una eina de cerca per ajudar la gent a trobar contingut nou al lloc.
11. El resultat
La vostra aplicació final tindrà un aspecte semblant a això.
pros
- La capacitat de connectar-se a moltes API i connectors.
- Una aplicació fàcil d'utilitzar i sense codi.
- Les persones sense experiència en programació es beneficiaran d'això.
- Eines de disseny que són alhora versàtils i potents.
- Processament ràpid de consultes.
Contres
- Augment de la fiabilitat.
- La velocitat de processament de dades és lenta.
- El rendiment està limitat.
Preus
El pla gratuït us permet conèixer la plataforma i desenvolupar la vostra aplicació.
Les subscripcions de pagament inclouen extres com l'etiqueta blanca, un domini personalitzat, l'accés a l'API de Bubble i la capacitat reservada del servidor, que s'enumeren a continuació.
- Personal: 25 $/mes (pagat anualment) o 29 $/mes (pagament mensual).
- Professional: 115 $/mes (pagats anualment) o 129 $/mes (pagats mensualment).
- Producció: 475 $/mes (pagat anualment) o 529 $/mes (pagat mensualment).
Comenceu amb Bubble de forma gratuïta
Conclusió
Bubble és una excel·lent alternativa per crear aplicacions web que només poden mostrar informació o tenir una interfície d'usuari mínima.
És bastant senzill d'utilitzar i els tutorials proporcionats per Bubble són molt útils. El seu editor visual en línia que us permet dissenyar aplicacions web en funció de les vostres preferències.
I la millor part és que no necessiteu cap experiència ni experiència en programació. Bubble és adequat per a tothom, independentment de si sabeu programar o no.
Tanmateix, la comprensió prèvia dels llenguatges d'interfície us pot donar un avantatge perquè us permet esbrinar ràpidament què està fent pel que fa a la gestió d'esdeveniments.
Aleshores, què en penseu de les capacitats de Bubble?
Faci'ns saber en els comentaris!
Arbehi
Es pot crear una botiga per vendre productes amb l'eina bubble.io?