Table des matières[Cacher][Montrer]
- Qu'est-ce que Bubble.io ?
- Qu'est-ce que la programmation visuelle ?
- Quels types d'applications pouvez-vous développer ?
Construire une application avec Bubble (Tutoriel)+-
- 1. Pour commencer
- 2. Configuration de la base de données
- 3. Créer des flux de travail
- 4. Créer un reportage
- 5. Afficher du contenu dynamique dans le flux
- 6. Envoi de données entre les pages
- 7. Afficher du contenu dynamique sur la page de l'histoire
- 8. Afficher l'article de l'éditeur
- 9. Suivre les éditeurs
- 10. Fonctionnalités supplémentaires que vous pouvez ajouter
- 11. Le résultat
- Avantages
- Inconvénients
- Prix
- Conclusion
Je me suis récemment intéressé aux approches de développement Web autres que HTML, CSS et JavaScript.
Avec le paysage sans code croissant, il n'était pas surprenant de découvrir qu'il existe plusieurs alternatives aux approches plus standard pour développer des applications Web.
Vous devez être familiarisé avec certaines des plates-formes CMS les plus connues, telles que WordPress, qui sont pratiquement sans code. Mais, si vous souhaitez créer des applications Web, ces plates-formes peuvent sembler restrictives.
Je vous présente ici Bubble.io, un puissant outil sans code qui vous permet de créer des applications Web comme jamais auparavant.
Découvrons-le en profondeur !
Qu’est ce qu' Bulle.io?
Bubble est une plate-forme non technique qui combine un langage de programmation visuel et un cadre de développement web.
Les utilisateurs peuvent utiliser ces outils de programmation pour créer des applications en ligne uniques, modifier des bases de données et des processus, ajouter des composants de page (images, texte, formulaires de saisie, cartes) et concevoir leurs interfaces.
C'est un marché où vous pouvez découvrir des modèles, des plugins et des services idéaux pour vous aider à créer des produits solides.
Sans avoir à mettre en place un cadre de programmation typique, vous pouvez créer n'importe quoi, d'une place de marché à un réseau social en passant par un CRM (gestion de la relation client) à l'aide de Bubble.
Il donne aux clients la possibilité de créer et de personnaliser leurs applications à l'aide d'une interface conviviale et d'un éditeur pointer-cliquer.
Vous pouvez l'utiliser conjointement avec des services qui fournissent une API REST, tels que Facebook, SQL, des applications d'analyse et de paiement. Il permet aux utilisateurs de consacrer du temps à l'amélioration des fonctionnalités et de l'apparence de leurs applications afin qu'elles s'affichent bien sur les tablettes et les appareils mobiles.
Il convient à toutes les tailles d'entreprises, des petites aux moyennes aux grandes ; et accessible pour Windows, Mac et le Web.
Qu'est-ce que la programmation visuelle ?
La programmation visuelle est essentiellement ce à quoi cela ressemble. Au lieu de programmer manuellement en écrivant du code, vous le faites graphiquement en cliquant et en faisant glisser des composants dans des pages.
Ne vous laissez pas tromper par cette courte description.
Ce n'est pas comme n'importe quelle autre application d'emporte-pièce ou outil de création de site Web que vous avez rencontré en ligne. La plupart des créateurs d'applications exigent que vous vous appuyiez sur des modèles de base et disposent de fonctionnalités extrêmement limitées. ils vous permettent uniquement de développer des types d'applications spécifiques et limitent votre personnalisation.
Bien que la notion de « programmation visuelle » et de « glisser-déposer » semble facile dans Bubble, elle est extrêmement puissante.
Son environnement de programmation visuel vous permet non seulement de faire glisser des objets tels que du texte, des graphiques, des entrées, etc. sur une page, mais il vous permet également de configurer ce que font ces éléments.
Que fait Bulle ?
L'objectif principal de Bubble est de permettre à quiconque de créer des applications Web sans avoir à écrire de code.
Cependant, bien que cela fournisse un énoncé d'objectif facile à retenir, cela laisse de côté une partie importante de l'histoire. Le chemin de l'idée au marché est plus compliqué que la simple création de lignes de code.
Une équipe de professionnels hautement qualifiés travaillant sur certaines sections de la création, de la croissance et de la maintenance de l'application est requise dans le développement conventionnel. Considère ceci.
De quoi chaque application a-t-elle besoin ?
- Sécurité pour s'assurer que personne n'a accès non autorisé aux données.
- Une base de données pour stocker et récupérer des informations telles que des éléments, des articles et des mises à jour de médias sociaux.
- Évolutivité pour permettre le développement sans entrave de la base d'utilisateurs et du volume de données.
- Une interface utilisateur agréable pour rendre l'application attrayante et facile à utiliser.
- Intégration avec divers services et systèmes.
Bubble remplace bien plus qu'un codeur. Il fournit tous ces services de manière visuellement attrayante et hautement automatisée, ce qui rend concevable, sinon simple, qu'une seule personne puisse tout gérer.
Alors que les plates-formes sans code précédentes ont essayé de remplacer le codage de différentes manières. Son concept est de supprimer autant d'obstacles que possible pour qu'une application atteigne le marché, en gérant tout, de la conception et des animations réactives à l'hébergement, au déploiement de versions, à la sécurité et aux opérations de base de données.
Utiliser le connecteur API pour connecter Bubble à d'autres services
Son connecteur API est probablement le plugin le plus important du marché. Comme son nom l'indique, cela vous permet de vous connecter à d'autres applications et services pour partager des actions et des données.
Plutôt que de vous plonger dans les spécificités techniques de son fonctionnement, considérez ces exemples de ce que les API peuvent accomplir :
- Obtenir l'accès à machine learning méthodes telles que la reconnaissance et la traduction d'images.
- Obtenez les informations météorologiques les plus récentes de n'importe où sur la terre.
- Lorsqu'un événement est déclenché dans Bubble, des informations sont échangées entre les systèmes, comme l'établissement d'un prospect dans votre CRM ou d'un rendez-vous dans votre agenda Google.
- Réservez un vol ou un séjour à l'hôtel n'importe où dans le monde.
- Obtenez le numéro de téléphone, l'emplacement, les photos, le logo et les avis de n'importe quelle entreprise sur Google Maps.
Utiliser des plugins pour améliorer les fonctionnalités natives
Techniquement, il mélange des modules de code JavaScript, CSS et HTML dans un nœud fonctionnel. L'application écrite en JS.JSON sert de base à son propre langage.
Bien que vous n'ayez pas besoin de comprendre pleinement ces termes pour créer des applications, ils indiquent un fait clé : ils respectent les normes Web connues et reconnues, ce qui permet aux développeurs d'améliorer considérablement leurs fonctionnalités natives.
Cela se voit déjà sur le site du plugin, où des centaines d'extensions gratuites et payantes des fonctionnalités de base sont disponibles. Cela implique également que si vous atteignez un point où ses capacités fondamentales sont insuffisantes, de nombreux experts JavaScript sont prêts à vous proposer une solution sur mesure.
Quels types d'applications pouvez-vous développer ?
Vous pouvez créer une large gamme d'applications, dont certaines sont présentées ci-dessous.
- Applications pour les marchés spécialisés avec une communauté.
- Applications pour les sites d'emploi dans une variété de secteurs.
- Logiciel pour le personnel hospitalier.
- Logiciel de point de vente pour magasins physiques.
- Logiciel pour cabinet dentaire en marque blanche.
- Logiciel d'inventaire d'entreprise personnelle et de service à la clientèle.
- Applications d'agrégation immobilière destinées aux courtiers et aux clients.
- Applications pour les événements et les cours sur le marché (et même les bateaux).
- Les certificats professionnels nécessitent des applications de test internes.
- Applications pour les premiers intervenants.
- Logiciel de gestion des employés à usage interne.
Pour être honnête, la plateforme n'est pas conçue pour tout faire. Ce n'est peut-être pas le choix idéal si vous concevez une application de jeu avec des visuels et des mouvements complexes. De plus, si vous créez une application native (une pour les magasins d'applications), vous devrez l'intégrer à un autre service tiers.
Caractéristiques principales
Bubble regorge de fonctionnalités. Nous ne pourrons pas tous les couvrir ici, mais nous essaierons de couvrir les plus essentiels.
1. Plugins
Il vous permet d'inclure les fonctionnalités de nombreux outils sur Internet dans votre application web. Par exemple, si vous souhaitez que vos utilisateurs se connectent à l'aide de leur compte Facebook, vous pouvez utiliser le plugin Facebook pour ce faire.
2. Développer
Il vous permet de créer des applications multi-utilisateurs dynamiques pour les navigateurs Web de bureau et mobiles, ainsi que tous les outils nécessaires pour créer un site similaire à Instagram ou Airbnb.
3. Conception
Vous pouvez créer des mises en page adaptées aux mobiles et du contenu dynamique pour donner la touche finale à un produit que vous serez heureux de montrer aux autres.
4. hébergement
N'ayez jamais à vous soucier de la maintenance, de l'infrastructure ou des opérations du serveur encore et encore.
Il s'occupe du déploiement et de l'hébergement pour vous de manière sûre et sécurisée. Le nombre d'utilisateurs, le volume de trafic et le stockage des données sont illimités.
Construire une application avec Bubble (Tutoriel)
Passons maintenant à l'action et explorons comment créer une application d'actualités sur Bubble.
1. Pour commencer
Pour commencer, vous devez d'abord créer un compte gratuit sur Bubble.
Nous commencerons par utiliser l'outil de conception visuelle de Bubble pour façonner notre plate-forme Interface utilisateur. Certaines des pages clés à inclure sont indiquées ci-dessous :
- Page de téléchargement - Un site Web où les éditeurs développeront et distribueront des articles.
- Page d'accueil – Une liste des articles récemment publiés s'affiche.
- Page narrative - Une page où chaque histoire unique peut être trouvée.
- Page d'éditeur - Une page pour afficher une liste de contes d'un certain éditeur.
2. Configuration de la base de données
Après avoir configuré l'affichage de votre produit, vous pouvez vous concentrer sur la création des champs de données qui alimenteront votre application. Nous utiliserons ces champs pour lier les workflows sous-jacents à votre produit.
Pour cet exemple, nous établirons deux types de données distincts pour chaque article d'actualité. Un type de données contiendra les faits de base d'une histoire (tels que le titre, l'image en vedette et l'éditeur), tandis que l'autre type de données contiendra des fichiers de contenu plus volumineux tels que l'ensemble du récit lui-même.
En les définissant comme des types de données discrets, nous ne pouvons charger les informations requises que lorsqu'elles sont requises, ce qui limite la quantité de matériel que l'éditeur de bulles devra produire.
Les types de données et champs suivants seront créés :
Type de données: Utilisateur
Des champs:
- Nom
- Les éditeurs suivants sont une liste d'éditeurs. Remarque importante : la création d'un champ sous forme de liste basée sur un type de données distinct vous permet d'incorporer facilement tous ses champs de données essentiels sans avoir à créer de champs supplémentaires.
Type de données: Histoire
Des champs:
- Titre
- Images en vedette
- écrivain
- Catégories
- Publisher
- Contenu de l'histoire
Type de données: Contenu de l'histoire
Des champs:
- Contenu de l'histoire
Type de données: Publisher
Des champs:
- Nom
- Logo
- Abonnés
3. Créer des flux de travail
Maintenant que vous avez organisé la conception et la base de données de votre application, il est temps de commencer à tout assembler et à le faire fonctionner.
Les flux de travail sont la principale méthode pour y parvenir dans Bubble.
Chaque flux de travail se produit lorsqu'un événement se produit (par exemple, un utilisateur clique sur un bouton), puis exécute une séquence d'"actions" en réponse (par exemple, "inscrire l'utilisateur", "apporter une modification à la base de données", etc.) .
4. Créer un reportage
La première fonctionnalité que nous proposerons est un outil qui permet aux éditeurs d'écrire et de publier des articles d'actualité sur le site.
Sur la page de téléchargement, nous commencerons par incorporer un grand nombre d'éléments d'entrée qui seront appliqués à la saisie de données dans notre base de données. Les entrées de texte, un téléchargeur d'image et une sélection déroulante sont des exemples de ces champs.
Nous devrons également personnaliser le menu déroulant de l'éditeur pour afficher une liste d'options dynamiques. Étant donné que chaque nouvel article sera ajouté à la liste du nombre total d'articles d'un éditeur, nous devrons choisir un éditeur existant dans notre base de données.
Lors de la configuration de ce menu déroulant, nous choisirons le type d'options pour être un éditeur.
Ensuite, notre source de données analysera notre base de données et renverra une liste de toutes les publications actuelles. Enfin, nous modifierons la légende source pour inclure le nom de l'éditeur.
Une fois qu'un écrivain a saisi les informations nécessaires dans chaque entrée sur la page, il clique sur le bouton de publication pour générer un nouveau conte.
Ensuite, dans votre base de données, vous créerez une nouvelle chose avec le type de données défini sur narratif.
Ensuite, nous devrons commencer à remplir notre base de données avec les champs nécessaires. Connectez chacun des composants d'entrée sur la page à leurs colonnes de base de données respectives.
Tout d'abord, nous allons créer le type de contenu de l'histoire, qui sera finalement lié à l'histoire elle-même.
Ensuite, nous ajouterons une autre étape à cette procédure, générant autre chose - cette fois, le conte lui-même.
Il est possible d'intégrer ces données sans effort à travers votre plateforme en intégrant le premier matériau narratif que nous avons développé avec ce conte.
Un nouveau conte sera produit à chaque activation de cette procédure.
5. Afficher du contenu dynamique dans le flux
Une fois que les éditeurs auront commencé à télécharger du matériel sur votre application mobile, nous devrons commencer à créer la logique sur votre page d'accueil qui affiche chaque article sous forme de liste dynamique. Ceci peut être accompli en utilisant notre élément de groupe répétitif.
Les groupes répétitifs fonctionnent avec votre base de données pour présenter et actualiser une liste de matériel dynamique.
Lors de l'application d'un groupe extensible, vous devez d'abord lier l'élément à un type de données dans votre base de données.
Dans ce cas, vous catégoriserez le type de matériel en tant que contes. Vous devrez également fournir la source de données sous la forme d'une liste de toutes les tables de votre base de données.
Nous organiserons également ce groupe récurrent en fonction de la date de début de chaque histoire, en affichant la liste dans l'ordre chronologique inverse. Vous pouvez maintenant commencer à organiser le matériel dynamique qui apparaîtra dans chaque grille.
Remplissez simplement la rangée supérieure avec le matériel approprié que vous souhaitez afficher, et cet élément puissant remplira les colonnes restantes avec les données de votre base de données actuelle.
6. Envoi de données entre les pages
Il est également possible de construire des événements dans chaque ligne d'un groupe répétitif. Lors du développement de fonctionnalités de navigation pour votre plate-forme, cette fonctionnalité vous sera utile.
La page d'accueil de notre application d'actualités affiche simplement un aperçu de chaque histoire, y compris l'éditeur, une image en vedette et le titre de l'histoire.
Cependant, il n'affiche pas l'intégralité du contenu d'un article tant que l'utilisateur n'a pas cliqué sur la page de l'histoire. Nous utiliserons notre éditeur de flux de travail pour transmettre des données entre les pages afin d'afficher ce matériel.
Pour commencer, créez un processus qui envoie un utilisateur à la page de l'histoire lorsqu'il clique sur l'image d'une histoire.
Utilisez un événement de navigation pour transférer un utilisateur vers une autre page lors du développement de ce processus.
Choisissez le type de page de destination comme page narrative dans le menu déroulant. Vous devrez ensuite donner des informations supplémentaires à cette page afin que l'éditeur de bulles comprenne quel conte unique afficher.
Les informations que vous devrez fournir proviennent du conte actuel des cellules.
7. Afficher du contenu dynamique sur la page de l'histoire
Vous pouvez facilement récupérer ces données d'événement et afficher le matériel pertinent du récit lorsqu'un utilisateur est envoyé à une certaine page de récit.
Pour créer cette fonction, vous devez d'abord vérifier que le type de page cible correspond à la propriété de données que vous fournissez via le workflow. Dans cette situation, vous devez associer la page d'histoire à une propriété d'histoire.
Il peut simplement extraire et fournir des données appropriées à partir de sources existantes en catégorisant le type de contenu sur une page.
Vous pouvez maintenant commencer à insérer du matériel dynamique dans des champs qui affichent des informations à partir d'un seul tableau.
8. Afficher l'article de l'éditeur
Après avoir lu une actualité, un utilisateur peut choisir d'examiner l'ensemble du catalogue d'articles de l'éditeur. Si vous avez développé un type de données d'éditeur, la création d'une page distincte pour les éditeurs est aussi simple que la création de notre page d'accueil d'origine.
Sur cette page, nous devrons commencer par définir le type de page sur éditeur.
Ensuite, copiez le groupe répétitif à partir de la page d'accueil et modifiez les paramètres.
Dans ce cas, la source de données de notre groupe récurrent recherchera tous les articles existants dont l'éditeur est l'éditeur de la page actuelle.
9. Suivre les éditeurs
La troisième fonctionnalité fondamentale que nous allons créer pour notre MVP est la possibilité de suivre un éditeur sur la plateforme. Nous ajouterons un bouton de suivi sur la page de l'éditeur. Lorsque nous cliquons sur cette icône, nous lançons un nouveau processus qui modifie une chose.
L'ajout de l'éditeur de la page actuelle à leur liste de publications suivantes modifiera l'utilisateur actuel.
Ensuite, nous devrons mettre à jour la liste des abonnés de l'éditeur de la page actuelle en ajoutant l'utilisateur actuel.
10. Fonctionnalités supplémentaires que vous pouvez ajouter
Maintenant que vous êtes à l'aise avec la création de champs de données personnalisés et la présentation d'informations dynamiques, vous pouvez faire preuve de créativité avec les expériences que vous créez pour votre produit. Vous pouvez également inclure :
- Créez une fonctionnalité qui permet aux utilisateurs d'enregistrer du contenu pour une lecture ultérieure.
- Au bas de chaque article, fournissez une collection récurrente d'articles suggérés.
- Créez un outil de recherche pour aider les gens à trouver du nouveau contenu sur le site.
11. Le résultat
Votre application finale ressemblera à ceci.
Avantages
- La possibilité de se connecter à de nombreuses API et plugins.
- Une application facile à utiliser et sans code.
- Les personnes sans expérience en programmation en bénéficieront.
- Des outils de conception à la fois polyvalents et puissants.
- Traitement rapide des requêtes.
Inconvénients
- Fiabilité accrue.
- La vitesse de traitement des données est lente.
- Les performances sont limitées.
Prix
Le plan gratuit vous permet de vous familiariser avec la plateforme et de développer votre application.
Les abonnements payants incluent des extras comme la marque blanche, un domaine personnalisé, l'accès à l'API Bubble et une capacité de serveur réservée, qui sont répertoriés ci-dessous.
- Personnel – 25 $/mois (payé annuellement) ou 29 $/mois (payé mensuellement).
- Professionnel – 115 $/mois (payé annuellement) ou 129 $/mois (payé mensuellement).
- Production – 475 $/mois (payé annuellement) ou 529 $/mois (payé mensuellement).
Commencez gratuitement avec Bubble
Conclusion
Bubble est une excellente alternative pour créer des applications Web qui ne peuvent afficher que des informations ou qui ont une interface utilisateur minimale.
Il est assez simple à utiliser et les tutoriels fournis par Bubble sont extrêmement utiles. Son éditeur visuel en ligne qui vous permet de concevoir des applications Web en fonction de vos préférences.
Et la meilleure partie est que vous n'avez besoin d'aucune expérience ou expertise en programmation. Bubble convient à tout le monde, que vous sachiez coder ou non.
Cependant, une compréhension préalable des langages frontend peut vous donner un avantage car elle vous permet de comprendre rapidement ce qu'il fait en matière de gestion des événements.
Alors, que pensez-vous des capacités de Bubble ?
Laissez-nous savoir dans les commentaires!
Arbéhi
Peut-on créer une boutique pour vendre des produits à l’aide de l’outil bubble.io ?