BUBBLE.IO (PARTIE 1)

Salut à tous et bienvenue dans cette vidéo d'initiation à l'outil Bubble. Donc dans cette première vidéo assez rapide, on va voir un peu comment ça se présente la page d'accueil une fois qu'on est connecté. Donc on peut voir qu'on tombe sur cette page accueil avec mes applications où on va pouvoir créer une application en appuyant sur ce bouton. Donc c'est c'est ça qui nous intéresse dans un premier temps. Ici on peut voir qu'on a d'autres onglets comme l'onglet plugins et templates qui vont nous permettre de créer des plugins et des templates. Ça nous intéresse pas forcément pour le moment dans la mesure où où on n'a pas, on n'a pas encore les compétences requises pour pour utiliser ça. Ça va pas forcément nous servir dans un premier temps. Et pour finir, on a l'onglet ressources, donc Bubble propose des vidéos de formation. Donc elles sont d'outils basées sur différents thèmes, mais ces vidéos sont en anglais. Donc je vais, je vais vous faire des vidéos pour un petit peu vous puissiez vous former à cet outil et ce sera en français, comme vous l'avez compris. Donc sans plus tarder, on va créer une application pour pouvoir un petit peu les fonctionnalités de l'outil. Donc je vais créer une application et on se retrouve dans la prochaine vidéo. sur cette sur cette assez grande page donc quand on a créé notre application donc ici si on parle de gauche à droite, on peut voir qu'on a le logo Bubble. donc quand on clique dessus, on va revenir à l'accueil. On a page index, donc l'index est notre page par défaut, la page d'accueil en quelque sorte. Donc quand on clique ici, on va pouvoir voir toutes nos pages. donc quand on va créer une nouvelle page, on va aller la voir ici. Hop. Euh ici les boutons edit, donc pour l'instant, on n'a rien créé, donc ils ne nous servent pas. Euh, bon, c'est bon. On a cette petite flèche là qui nous permet d'annuler, d'annuler une action que l'on vient de faire, donc c'est assez pratique quand on fait une erreur. et on a ce bouton là qui nous intéresse aussi, l'onglet le bouton preview, qui va nous permettre de visualiser l'application, le site web que l'on vient de créer. Donc voilà un petit peu pour les l'interface du haut. Ici à gauche, on a plusieurs onglets, donc on a l'onglet design. Donc voilà, on a l'onglet, donc l'onglet design c'est l'onglet sur lequel on est ici. On a l'onglet workflow. puis l'onglet data. style, plugins, réglage et logs. Voilà. Donc si on reste dans l'onglet design, on peut voir qu'on a notre UI builder, donc qui comprend ici tous les éléments que l'on va pouvoir insérer dans notre dans notre appli ou notre site web, et on a ici l'onglet responsive. Donc ici, par exemple, si on veut exemple créer une application, une application pour iPad ou un site web, on va pouvoir adapter cela ici grâce au responsive. Donc voilà un petit peu pour la présentation de l'interface de l'outil. donc on se retrouve pour la prochaine vidéo. Dans cette vidéo, on va un petit peu parler de ces trois éléments là. Donc le UI builder, donc l'interface utilisateur, on a déjà abordé. donc c'est clairement ce qui va nous permettre de modéliser notre site, notre application, comme on l'entend, donc selon nos goûts, via tous les éléments présentés ici. Le responsive, donc c'est le responsive en gros, ça va nous permettre d'adapter notre notre site, notre web app, notre notre appli, en fonction de si on veut l'utiliser sur mobile, sur tablette, ou bien sur ordinateur. Et il y a un dernier élément qu'on va aborder, donc c'est l'élément de Trees. Donc c'est, finalement, vous avez vu tout à l'heure que j'ai ajouté un floating group, donc qui est ici. donc vous pouvez voir que l'élément que le floating group est présent dans notreélément Tree ici. Il y a une autre page index, il y a notre floating group et il y a notre image qui est ici. ou là, qui que l'on n'avait pas supprimé tout à l'heure. Donc quand on clique, quand par exemple, on va vouloir retrouver un élément, euh, par exemple, que l'on peut avoir égaré, ça arrive, mais on va cliquer ici. et on va pouvoir le retrouver. d'où l'importance de nommer les éléments que vous que vous ajoutez au fur et à mesure, afin de les retrouver plus facilement. Voilà pour cette vidéo. on se retrouve sur la prochaine. on va faire une page d'inscription qui va nous permettre d'aborder la notion suivante que sont les workflows. pour créer une page d'inscription. on va tout d'abord sélectionner un groupe que l'on va mettre ici. Notre groupe. Donc sur une page d'inscription, vous êtes d'accord, on a écrit en haut s'inscrire. en dessous on a address mail avec là où on peut écrire notre adresse mail. mot de passe, on écrit mot de passe et un bouton s'inscrire. Donc pour que, donc les éléments, ils sont les uns en dessous des autres. Donc pour que dans un groupe, les éléments soient les uns en dessous des autres, on va, on a notre ticket group. dans layout conteneur layout, on va sélectionner colonne. De cette manière, les éléments vont être les uns en dessous des autres. Si on sélectionne row, ils vont être les uns à côté des autres. Donc colonne. Voilà, très bien. Hop. Donc on veut aussi que notre que notre groupe, il prenne toute la largeur de la page. donc on va décocher ça et on va mettre zéro. Donc voilà. Donc notre groupe prend toute la largeur de la page. On va s'ajouter un texte. donc texte s'inscrire hop que l'on va centrer dans la page au premier temps et ensuite centrer sur lui-même. voilà, super. Donc on va aussi pouvoir l'agrandir. Hop et mettre en gras. donc ça c'est pas très important. Donc voilà, très bien. Ensuite, donc sur une page d'inscription, on va avoir notre en écriture. Voilà. Super. Sur une page d'inscription, on va écrire notre email. Donc votre adresse email. Très bien. Hop, on va juste faire en sorte que la caze qui contient le texte soit adaptée à la taille du texte. Donc pour ça, on va juste hop voilà. On met zéro dans minimum et ça s'adapte à la taille du texte ou le nombre de lignes en fait. OK, très bien. Donc ça, niveau notre adresse mail, on va copier coller. Donc pareil. Après à notre adresse email, on a votre mot de passe qui va nous être demandé. Hop, super. Mais il faut que l'on rentre notre adresse mail et que l'on rentre notre mot de passe. Donc pour cela, on va ajouter ce qu'on appelle un input. Voilà. Donc dans cet input, on va pouvoir taper quelque chose. donc en l'occurrence ici, ce sera notre adresse mail et en dessous notre mot de passe. Donc dans placeholder. Donc ici notre placeholder, c'est type R. donc c'est ce qui est écrit par défaut. donc on peut écrire votre votre email simplement. ça a pas trop d'importance. Voilà. On va copier coller notre input et on va écrire ici votre votre mot de passe. OK, super. Donc voilà, là on a notre interface, notre page d'inscription. Il nous manque un bouton. comme on a dit tout à l'heure. Hop. Donc un bouton qui va nous permettre de nous inscrire. ce bouton, on va le centrer, ça va être mieux. Donc là pour centrer un élément, on clique dessus. On a cette petite option. et il va dans horizontal alignement. Donc là, on va le mettre à droite. euh, là à gauche, là à droite, et là au centre. ça fait un peu mieux, je crois. euh bon après c'est c'est en terme d'esthétique, c'est pas trop grave. s'inscrire. Voilà, super. Donc ici, on a notre page d'inscription. On va juste, on va juste, non, on va pas faire ça maintenant. Donc on va se retrouver dans la prochaine vidéo où on va voir un petit peu comment fonctionne les workflows. donc avec une petite initiation. On se retrouve dans cette vidéo pour aborder un petit peu le système de workflow. donc vous allez voir, c'est vraiment pas compliqué. c'est assez intuitif et ça va permettre vraiment moult fonctionnalités que l'on va pouvoir utiliser sur bubble. Donc sur un site classique, on est en page d'inscription, on va rentrer notre email, notre mot de passe, et on va cliquer sur s'inscrire. Quand on va cliquer sur s'inscrire, qu'est-ce qui va se passer ? On sera s'inscrire et en général, enfin souvent, on est redirigé vers une page mon compte, mes informations, etcetera. Sur bubble, ça, on va pouvoir le faire. donc comment ça se passe ? Donc on va cliquer sur notre bouton s'inscrire. voilà. et quand on est dans bouton s'inscrire, dans apparence, on a ici Start Edit workflow. Donc on va cliquer dessus pour créer un workflow à partir du bouton s'inscrire. Assurez-vous cependant que cette élément est clickable. soit pas cochée. de cette manière, le bouton s'inscrire sera, on pourra cliquer dessus. Donc on va créer notre workflow. Donc nous, qu'est-ce qu'on veut ? On veut que quand on clique sur le bouton s'inscrire, l'utilisateur soit inscrit. Donc on va ici quand le bouton s'inscrire est cliqué, on va inscrire l'utilisateur. Sign the user up. OK. Ici, on a une fenêtre qui s'ouvre. Donc email, password et on doit sélectionner de la data. Donc en fait, ici bubble nous demande, euh, l'email, euh, eux ils veulent un email, mais l'email, c'est quoi ? Ben il est dans notre input votre email. Donc c'est la valeur que l'on va saisir dans l'input votre email. Pareil, le mot de passe, c'est la valeur que l'on va saisir dans l'input votre mot de passe. Ensuite, on a plusieurs options. donc est-ce qu'on veut une confirmation de mot de passe, est-ce qu'on veut, on est redirigé en email de confirmation. Bon, c'est funy l'email. Bon, pour l'instant, ça nous intéresse pas forcément. Hop. Donc on quitte. Donc voilà, quand on va cliquer sur s'inscrire, notre utilisateur sera connecté mais nous, on va pas trop le voir parce que notre site est pas encore assez avancé. Donc on va créer aussi une nouvelle page. Donc on va cliquer sur le bouton s'inscrire, on sera redirigé vers une page, mon compte. enfin mon compte. Donc on rajoute une action. on va dans navigation, go to page. et là une fenêtre s'ouvre, destination. Donc ça c'est les pages qu'on a déjà. nous, on va créer une nouvelle page, on va appeler la page mon compte. on l'a créée. Hop. Destination, on met mon compte. Data to send. Bon, pour l'instant, on n'a pas trop de data, on a juste, on a juste on a juste tuteur email. on a juste ça. Donc voilà, ça va nous servir. Donc voilà, très bien. On retourne dans design. Hop, on va pouvoir preview. donc on recharge la page. Et voilà. Donc là vous voyez, on a une page d'inscription. Bon, c'est pas du tout optimisé, c'est pas vraiment beau, il y a pas d'esthétique. Mais pour l'instant, on s'en fiche. Donc ici, on va se créer une petite adresse mail au hasard. paul@email.fr. et on va s'inscrire. Donc là voilà, vous voyez, on est redirigé vers une autre page. donc qui se présente sous la forme d'un écran blanc. Pourquoi c'est un écran blanc ? Ben tout simplement parce que si on va ici et qu'on va dans la page mon compte, on a rien mis dessus encore. Donc on va mettre, euh, un petit élément texte. on va mettre bienvenue sur votre compte. et pour vraiment savoir qu'on est sur notre compte à nous. on va pouvoir insérer de la data dynamique. Donc je vous ai dit que la seule data qu'on avait, c'était notre adresse mail. Donc là, nous on va pouvoir mettre bienvenue sur votre compte pour ce dire. donc on va dans insert, dynamic data. puis user email. tout simplement. Et voilà. Donc on peut aussi on peut aussi laisser comme ça. Donc on peut pour vraiment savoir qu'on est sur le compte de, donc, c'est le compte de paul@email.fr. Donc on va retirer le nom parce que le nom n'existe pas. On va retirer le nom. donc on va juste mettre bienvenue sur votre compte, suivi de l'email de l'utilisateur. Voilà. Donc on va on va laisser comme ça. Donc ici, on va pouvoir juste faire, voilà, que l'on se retrouve. on va juste améliorer un peu le texte. On va mettre "Bienvenue sur votre compte". On va le centrer. et on va mettre juste en dessous, "Votre adresse email est". et on fait une insertion de data dynamique, donc user email. et on vous montrera plus tard comment utiliser le nom d'utilisateur, etcetera. Donc voilà. Donc on recharge la page. maintenant, on va pouvoir voir. Et voilà. Donc là, ça nous met bienvenue sur votre compte et votre adresse email est paul@email.fr. Donc effectivement, c'est un exemple assez basique. Mais c'est pour vous montrer que les workflows fonctionnent et que l'on peut naviguer d'une page à une autre grâce aux workflows. Donc on va continuer euh cette série de vidéos pour explorer un petit peu plus loin ce que l'on peut faire avec des workflows.