L’arrivée des technologies no-code a radicalement changé les prérequis nécessaires à la création d’applications web et mobiles. Que vous soyez entrepreneur, en reconversion ou simplement curieux, la technologie est à portée de main pour réaliser vos propres applications grâce à Bubble.

Bubble est un éditeur de programmation visuelle créé en 2012 qui permet de concevoir des applications web et mobiles sans avoir besoin de coder. Ce livre a comme objectif de vous apprendre à créer et publier une application complète sans une seule ligne de code. Il est destiné à toutes les personnes non développeurs désirant exploiter le no-code pour construire une application personnalisée, ergonomique et conviviale.    

Au fil des chapitres, vous concevrez pas à pas vos premières interfaces en y intégrant votre design, en collectant, organisant et affichant de la donnée.  Progressivement, vous apprendrez à structurer des interfaces intuitives, à manipuler des données efficacement et à présenter le contenu de manière dynamique pour donner vie à l’application de vos rêves.

Avec ce guide, émancipez-vous du code et concrétisez votre projet numérique !

Téléchargements

• Des fichiers complémentaires (17 Ko)

Découvrir le no-code

1. A. Historique du no-code
2. B. No-code vs code
3. C. Le no-code modulaire
4. D. Le no-code intégré
   1. 1. Le cas du low-code
   2. 2. Le marché du no-code/low-code

Présentation de Bubble

1. A. Spécificités de l’outil Bubble
2. B. Quoi construire avec Bubble ?
3. C. Les limitations de Bubble
4. D. La tarification sur Bubble
   1. 1. Les tiers

Démarrer avec Bubble et créer son premier formulaire

1. A. Introduction
2. B. Découvrir l’éditeur de Bubble
3. C. Créer votre premier formulaire
   1. 1. Description de l’interface
   2. 2. Créer un élément texte
   3. 3. Définir les actions
   4. 4. Créer la première donnée
4. D. Comprendre la logique de Bubble
5. E. Afficher les données du formulaire

La base de données

1. A. Introduction
2. B. La table de données
   1. 1. Créer une table de données
   2. 2. Supprimer une table de données
   3. 3. Ajouter un attribut
   4. 4. Supprimer un attribut
   5. 5. Afficher la donnée depuis l’interface de Bubble
   6. 6. Ajouter un affichage filtré d'une table (vue)
3. C. Le C.R.U.D
   1. 1. Create : enregistrer la donnée
   2. 2. Read : afficher la donnée
   3. 3. Différencier une donnée et une liste de données
   4. 4. Les containers
      1. a. Concept de parent-enfant
   5. 5. Update : modifier/mettre à jour une donnée
   6. 6. Delete : supprimer une donnée
   7. 7. Supprimer un seul attribut d’une entrée
4. D. Les relations entre les tables
   1. 1. Créer une relation Livre - Bibliothèque
   2. 2. Afficher dans l'interface Data la valeur de l'attribut lié
5. E. Tri et filtre
   1. 1. Filtrer les résultats
   2. 2. Trier les résultats
   3. 3. Utiliser les filtres avancés de recherche
6. F. Autres appels de données

Utiliser les workflows

1. A. Les workflows
   1. 1. Les événements (Events)
      1. a. Les différents types d’événements
      2. b. Créer un nouvel événement
      3. c. Les différents événements disponibles
   2. 2. Les actions
      1. a. Créer une action
      2. b. Les catégories d’actions
2. B. Les pages dynamiques
   1. 1. Rappel de la structure de Bubble
   2. 2. Changer le nom d’une page
   3. 3. Comprendre les pages dynamiques
3. C. Connexion et Inscription
   1. 1. Construire un système d’inscription pour l’utilisateur
      1. a. Création d’un pop-up d’inscription
      2. b. Ajouter une photo à l’inscription
   2. 2. Création d’un bouton de déconnexion
   3. 3. Création d’un pop-up de connexion
   4. 4. Afficher le statut de l’utilisateur
      1. a. Modifier les informations de connexion de l’utilisateur
4. D. Les conditions et conditionals
   1. 1. Les conditions dans les workflows
   2. 2. Les conditionals dans le design
   3. 3. Comprendre l’importance des conditions et conditionals

Design et responsive

1. A. Introduction
2. B. Utilisation des styles
   1. 1. Modifier l’apparence
   2. 2. Layout
   3. 3. Ajouter une condition à un style
3. C. Responsive
   1. 1. Les différents layouts
      1. a. Les propriétés du container Layout
4. D. Responsive : les différents layouts
   1. 1. Détail d’une page d’accueil
   2. 2. Méthodologie de construction
   3. 3. Onglet Responsive

Le blog

1. A. Introduction
2. B. Pré-conception
3. C. Header/footer
   1. 1. L'en-tête (header)
      1. a. L'en-tête
      2. b. Le logo
      3. c. Le bouton Inscription, Connexion et Déconnexion (Visual Element : Button)
      4. d. Finaliser le groupe Header
   2. 2. Inscription et connexion
      1. a. Le design du système « Inscription, Connexion et Déconnexion »
      2. b. Les workflows du système « Inscription, Connexion et Déconnexion »
   3. 3. Le pied de page (footer)
      1. a. Le pied de page
      2. b. Le message de bas de page
      3. c. Finaliser le pied de page
4. D. Contenu de la page index
   1. 1. La page
   2. 2. Saisir un nouvel article
      1. a. Le design de la création d’article
      2. b. Les workflows du bouton Créer un nouvel article
   3. 3. Afficher la liste de tous les articles
      1. a. La liste des articles
      2. b. Les éléments visibles de l’article : le titre et l’illustration
5. E. La page Article
   1. 1. Mise en place de la nouvelle page Article
      1. a. L'en-tête et le pied de page
      2. b. Configurer la page pour qu’elle contienne de la donnée
      3. c. L’envoi de données depuis la page index
      4. d. Le groupe Page
      5. e. Le titre de l’article
      6. f. L’image et le contenu de l’article
      7. g. Retour à l’accueil
6. F. L'espace membre
   1. 1. L’utilisateur déconnecté
      1. a. Neutraliser la redirection vers la page Article
      2. b. Faire une redirection depuis la page Article
      3. c. Rendre une donnée inaccessible : Privacy Rules
   2. 2. L’utilisateur connecté
   3. 3. L’auteur de l’article
      1. a. Le design de modification et suppression d’un article
      2. b. Mettre en place la suppression d'un article
      3. c. Mettre en place la modification d'un article
   4. 4. L’administrateur de la plateforme

Fonctions avancées

1. A. Introduction
2. B. Éléments réutilisables
   1. 1. Créer un élément réutilisable
   2. 2. Modifier un élément réutilisable
   3. 3. Configuration d’un élément réutilisable
   4. 4. Définir de la donnée dans un élément réutilisable
   5. 5. Envoyer de la donnée à un élément réutilisable
3. C. "Option set"
   1. 1. Créer un "option set"
   2. 2. Afficher un "option set"
   3. 3. Ajouter un attribut
   4. 4. Enregistrer la valeur de l'"option set" en base de données
4. D. "Custom states"
   1. 1. Créer un "custom state"
   2. 2. Ajouter des conditions en fonction de la valeur du "custom state"
   3. 3. Changer la valeur d’un "custom state"
   4. 4. Combiner "custom state" et "option set"
5. E. Aller plus loin
   1. 1. Backend
   2. 2. API
   3. 3. Low-code

Fonctions applicatives

1. A. Introduction
2. B. Système de recherche
   1. 1. Rechercher avec un élément Input
   2. 2. Rechercher avec un élément Searchbox
   3. 3. Rechercher avec le plug-in FuzzySearch
3. C. Google Maps
   1. 1. Configurer Google Map API
   2. 2. Utiliser l'élément Searchbox
   3. 3. Utiliser l’élément Map de Bubble en mode simple
   4. 4. Utiliser l’élément Map de Bubble en mode Liste
   5. 5. Interaction entre la carte et les données d’un container Repeating Group
4. D. Calendrier
   1. 1. Installer et configurer le plug-in Calendar Dates Generator
   2. 2. Ajouter un container Repeating Group pour visualiser
   3. 3. Connecter le calendrier à des données de la base
   4. 4. Changer le mois sélectionné
5. E. Messagerie
   1. 1. Créer la structure de données
   2. 2. Ajouter un container Repeating Group Conversation
   3. 3. Ajouter une interface pour la création d’une conversation
   4. 4. Ajouter un container Repeating Group Message
   5. 5. Ajouter l’interface pour la création d’un message
6. F. Paiement par Stripe
   1. 1. Créer un projet Stripe
   2. 2. Ajouter et configurer le plug-in Stripe
   3. 3. Configuration d’une structure pour l’exemple
   4. 4. Création de l’action d’achat
   5. 5. Paiement et dashboard Stripe

Mise en ligne

1. A. Issues et Debugger
   1. 1. Issues
      1. a. Fenêtre Issues
      2. b. Correcteur automatique
      3. c. Les limites
   2. 2. Debugger
      1. a. Workflow : Step-by-step
      2. b. Design : Inspect
2. B. La sécurité
   1. 1. Introduction
   2. 2. Les Privacy Rules
   3. 3. Table publique et table privée
   4. 4. La règle
      1. a. Voir tous les attributs : View all fields
      2. b. Trouver les attributs : Find this in searches
      3. c. Voir les fichiers liés : View attached files
      4. d. Autoriser l’auto-binding : Allow auto-binding
   5. 5. Mesures de sécurité, RGPD, etc.
3. C. Mise en ligne
   1. 1. Environnement de développement et environnement de production
      1. a. Une différence de structure
      2. b. Une différence de base de données
   2. 2. Créer des points de sauvegarde
   3. 3. Copier et restaurer la base de données
      1. a. Copier d’une version à l’autre
      2. b. Restaurer les données
   4. 4. Prérequis à la mise en ligne
      1. a. Acheter un nom de domaine
      2. b. Avoir un forfait payant sur Bubble
      3. c. Ajouter un nom de domaine à votre application
4. D. Le nouveau système de prix : paiement à l’usage
   1. 1. Comprendre la logique des Workload Units
   2. 2. Estimer sa consommation et anticiper son forfait
      1. a. Analyser ses dépenses en WU

La marketplace

1. A. Introduction
2. B. En-tête et pied de page
   1. 1. L'en-tête
      1. a. La barre de navigation
      2. b. La photo de profil
      3. c. Le pop-up de Connexion / Inscription
      4. d. Les workflows
      5. e. La connexion obligatoire
      6. f. Le menu burger
   2. 2. Le pied de page
3. C. La page index
   1. 1. La table de données Annonce
      1. a. L’élément Option set catégorie
      2. b. La table Annonce
   2. 2. La création des annonces
      1. a. La catégorie de l’annonce
      2. b. L’adresse de l’annonce
      3. c. Les photos de l’annonce
      4. d. La création d’une annonce
   3. 3. Affichage, modification et suppression d’annonce
      1. a. Affichage des annonces du site
      2. b. La modification et la suppression d’annonce
   4. 4. La barre de recherche
      1. a. Les critères de la recherche
      2. b. La barre de recherche responsive
      3. c. L’utilisation des informations de la recherche
4. D. La page recherche_annonce
   1. 1. Liste des résultats
   2. 2. Carte des résultats
   3. 3. Affichage de la liste et de la carte
   4. 4. La barre de recherche en auto-binding
      1. a. Préparer les Privacy rules
      2. b. Préparer les éléments de la barre de recherche
   5. 5. La redirection vers la page detail_annonce
5. E. La page detail_annonce
   1. 1. Préparation de la page
   2. 2. Le carrousel manuel
   3. 3. Le calendrier
      1. a. Générer une liste de dates
      2. b. Afficher une liste de dates
      3. c. Paginer un calendrier
      4. d. Sélectionner des dates
      5. e. Afficher un récapitulatif de la réservation
      6. f. Le paiement sur Stripe
      7. g. La création d’une réservation
6. F. La page profil
   1. 1. Préparation de la page profil
      1. a. Éléments de base de la page profil
      2. b. Sécuriser la page profil
   2. 2. La navigation par "custom state"
      1. a. Le mode de navigation
      2. b. La barre de navigation
   3. 3. Les différentes parties de la page profil
      1. a. La partie profil
      2. b. La partie réservations
      3. c. La partie annonces
      4. d. La partie messagerie

Introduction au design

1. A. Introduction
2. B. Les bases du design
   1. 1. Théories : les notions essentielles
      1. a. Hiérarchie visuelle
      2. b. Utilisation des espaces
      3. c. Couleurs
      4. d. Ombrages
      5. e. Tailles des éléments
      6. f. Les icônes
      7. g. L’accessibilité
   2. 2. Construire le design system
      1. a. Couleurs
      2. b. Groupes
      3. c. Pop-ups
      4. d. Menu
      5. e. Textes
      6. f. Titres
      7. g. Alertes
      8. h. Tags
      9. i. Icônes
      10. j. Boutons
      11. k. Images
      12. l. Éléments Inputs
3. C. Les styles
   1. 1. Théorie : intérêt et utilisation des styles
   2. 2. Gérer les styles