{"id":354,"date":"2024-09-22T08:26:30","date_gmt":"2024-09-22T06:26:30","guid":{"rendered":"https:\/\/www.innospira.fr\/?p=354"},"modified":"2025-03-30T11:38:15","modified_gmt":"2025-03-30T09:38:15","slug":"creer-une-application-sans-coder-avec-bubble","status":"publish","type":"post","link":"https:\/\/www.innospira.fr\/index.php\/2024\/09\/22\/creer-une-application-sans-coder-avec-bubble\/","title":{"rendered":"Cr\u00e9er une application sans coder avec Bubble : le guide no-code"},"content":{"rendered":"\n

Aujourd’hui, il est plus simple que jamais de cr\u00e9er une application sans coder, gr\u00e2ce \u00e0 des outils puissants comme Bubble<\/a>. Autrefois, ces plateformes \u00e9taient limit\u00e9es \u00e0 la conception de pages statiques, et toute fonctionnalit\u00e9 sp\u00e9cifique n\u00e9cessitait des comp\u00e9tences en programmation. Mais cette \u00e9poque est finie \ud83d\ude04.<\/p>\n\n\n\n

D\u00e9sormais, les solutions no-code sont suffisamment puissantes pour d\u00e9velopper des applications complexes et sur mesure, sans \u00e9crire une seule ligne de code. Si vous pr\u00e9f\u00e9rez voir l’outil en action ? Rendez-vous sur la vid\u00e9o YouTube<\/a> pour voir la vid\u00e9o !<\/p>\n\n\n\n

Premiers pas avec Bubble<\/h2>\n\n\n\n

Si ce n’est pas d\u00e9j\u00e0 fait, cr\u00e9ez vous un compte sur Bubble<\/a>. Vous pourrez ensuite cr\u00e9er une application sans coder, en utilisant le bouton Create an app<\/strong>. Si vous ne trouvez pas de nom pour votre application, lisez notre m\u00e9thode rapide pour trouver un nom<\/a> \ud83d\ude09.<\/p>\n\n\n\n

\"Bubble,<\/figure>\n\n\n\n

Pr\u00e9sentation de l’interface<\/h3>\n\n\n\n

Au d\u00e9but, l’interface peut faire un peu peur, mais cela reste plus simple \u00e0 appr\u00e9hender qu’un nouvelle librairie JavaScript \ud83d\ude04. On va retrouver les diff\u00e9rents onglets.<\/p>\n\n\n\n

    \n
  • Design <\/strong>: mettre en page votre application rapidement<\/li>\n\n\n\n
  • Workflow <\/strong>: ajouter des actions lors des clics sur les boutons<\/li>\n\n\n\n
  • Data <\/strong>: g\u00e9rer votre base de donn\u00e9es<\/li>\n\n\n\n
  • Styles <\/strong>: g\u00e9rer les styles par d\u00e9faut (CSS)<\/li>\n\n\n\n
  • Plugins <\/strong>: ajouter des fonctionnalit\u00e9s <\/li>\n\n\n\n
  • Settings <\/strong>: param\u00e9trer votre site <\/li>\n\n\n\n
  • Logs <\/strong>: consulter les informations de trafic<\/li>\n<\/ul>\n\n\n\n
    \"Editeur\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
    Mettre en page votre site avec Bubble<\/figcaption><\/figure>\n\n\n\n

    Il n’y a pas vraiment de difficult\u00e9s \u00e0 ajouter du texte, des boutons, etc. Par contre, pour ceux qui n’ont jamais cr\u00e9\u00e9 de pages Web, la gestion des containers <\/em>peut \u00eatre fastidieuse au d\u00e9part. Les containers sont tr\u00e8s pratiques pour organiser facilement les \u00e9l\u00e9ments visuels. Privil\u00e9giez le Group <\/em>classique. Variez entre Row et Column en fonction de si vous voulez afficher les \u00e9l\u00e9ments les uns \u00e0 c\u00f4t\u00e9s des autres, ou les uns en dessous des autres.<\/p>\n\n\n\n

    Enregistrer les donn\u00e9es en base<\/h3>\n\n\n\n

    Ensuite, dans l’onglet Data, cr\u00e9ez une table (Data type) pour enregistrer des donn\u00e9es. Les \u00e9l\u00e9ments les plus utilis\u00e9s sont les suivants.<\/p>\n\n\n\n

      \n
    • Text :<\/strong>\n
        \n
      • Ce type permet de stocker des cha\u00eenes de caract\u00e8res, comme des mots, des phrases ou des paragraphes. C\u2019est le type de donn\u00e9es que tu vas utiliser pour du contenu textuel (noms, descriptions, adresses, etc.).<\/li>\n<\/ul>\n<\/li>\n\n\n\n
      • Number :<\/strong>\n
          \n
        • Ce type est utilis\u00e9 pour stocker des valeurs num\u00e9riques. Que ce soit pour des montants, des notes, des quantit\u00e9s, tu utilises \u00ab\u00a0Number\u00a0\u00bb pour manipuler des chiffres.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
        • Date :<\/strong>\n
            \n
          • Ce type permet de stocker des dates et des heures. Il est utilis\u00e9 pour enregistrer des \u00e9v\u00e9nements sp\u00e9cifiques, des horaires ou des dur\u00e9es.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
          • Yes\/No (Bool\u00e9en) :<\/strong>\n
              \n
            • Ce type enregistre des r\u00e9ponses logiques, soit \u00ab\u00a0oui\u00a0\u00bb, soit \u00ab\u00a0non\u00a0\u00bb. Il est utile pour des \u00e9tats ou des conditions qui ont deux possibilit\u00e9s (vrai\/faux).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
              \"Ajouter<\/figure>\n\n\n\n

              Agir sur les boutons avec les workflows<\/h3>\n\n\n\n

              Ensuite, les worfklows permettent d’agir avec l’utilisateur, les donn\u00e9es qu’il renseigne sur son formulaire doivent \u00eatre enregistr\u00e9es dans la base de donn\u00e9es. <\/p>\n\n\n\n

              \"Gestion<\/figure>\n\n\n\n
                <\/ul>\n\n\n\n

                D\u00e9mo en vid\u00e9o<\/h2>\n\n\n\n

                Vous aurez beaucoup plus d’explications sur la vid\u00e9o, et ce sera plus aussi plus facile de comprendre certains points ! \u2b07\ufe0f<\/p>\n\n\n\n

                \n