Aller au contenu
Guide7 min de lecture

Vidéo de démo de portfolio Bubble

Montrez l'application Bubble en marche au lieu de la faire imaginer à un relecteur.

Transformer une construction Bubble en entrée de portfolio qui montre l'application en fonctionnement, pas une capture d'écran, pour un client ou un recruteur.

Voir comment ça marcheLes 60 premières secondes de vidéo sont gratuites, avec un filigrane. Vérifiez votre adresse e-mail pour la télécharger.

Une entrée de portfolio Bubble a un seul rôle : convaincre quelqu'un qui n'a pas construit l'application que la personne qui l'a fait sait ce qu'elle fait. Une image statique de l'onglet Design de l'éditeur ne peut pas faire cela. Elle montre la mise en page, pas le comportement, et le travail Bubble est surtout du comportement. Le workflow qui se déclenche quand un bouton est pressé, la règle de confidentialité qui décide quelles lignes de données un utilisateur connecté peut voir, le moteur responsive qui réorganise les éléments quand le navigateur se rétrécit : rien de tout cela ne survit à une capture d'écran. Une courte vidéo de l'application réellement en fonctionnement comble cet écart pour un relecteur qui a trente secondes et aucune intention de cliquer lui-même sur un lien d'aperçu.

GogoScreen prend une URL d'application web et une ligne décrivant ce qu'il faut montrer, puis renvoie un MP4 narré et monté environ deux minutes plus tard. Pour une application protégée par une connexion, il peut utiliser un compte de démonstration fourni. Le montage est mécanique plutôt que créatif : zooms sur les clics, lissage du curseur, temps morts supprimés, sous-titres intégrés. C'est suffisant pour transformer un parcours fonctionnel en quelque chose qu'un relecteur regarde plutôt qu'en quelque chose qu'on lui demande de croire.

Que doit réellement montrer une démo de portfolio Bubble ?

Choisissez le seul parcours de l'application qu'un client qui recrute ou un responsable d'agence demanderait en premier. Pour une construction de type marketplace, c'est généralement une annonce créée puis apparaissant dans un résultat de recherche. Pour un outil interne, c'est généralement un enregistrement saisi et une vue en aval qui se met à jour parce qu'un workflow s'est exécuté. Résistez à l'envie de parcourir chaque page de l'application. Un relecteur qui décide s'il embauche quelqu'un n'a pas besoin d'une visite complète, il a besoin de la preuve qu'une véritable logique fonctionne du début à la fin.

La plupart des applications Bubble construites pour un portfolio se trouvent sur le sous-domaine par défaut bubbleapps.io plutôt que sur un domaine acheté, et cela convient à montrer tel quel. Ce qui compte est de savoir si l'URL pointe vers la version en ligne ou vers une construction en version de test encore en relecture interne. Précisez laquelle c'est dans le texte environnant de la page afin que personne ne suppose qu'un travail en cours est le produit fini.

Décision de portfolioCe que cela signale au relecteurCe qu'il faut éviter
Version en ligne montréeLa construction est terminée et s'en porte garantePrésenter une version de test comme si elle était livrée
Un parcours, du début au résultatUne compétence précise a été prouvée, pas seulement une mise en pageUne visite de chaque page sans action terminée
Données de démonstration préparées à l'avanceLe relecteur voit une application crédible, pas une table videDe vraies données client ou un type de données vide

Comment gérer un écran de connexion dans le parcours ?

Un nombre significatif de constructions Bubble qui valent la peine d'être montrées dans un portfolio sont protégées par le type de données User intégré de l'application, car le comportement intéressant, la vue personnalisée ou l'enregistrement lié à un compte, n'apparaît qu'une fois qu'une personne est connectée. Fournissez un compte de démonstration plutôt que de passer le parcours ou de le narrer autour. Sur GogoScreen, les identifiants sont chiffrés, utilisés pour un seul rendu, puis supprimés. Si un storyboard est planifié en premier, les identifiants restent chiffrés pendant cette session et sont supprimés au plus tard deux heures après leur dernière utilisation. C'est la gestion réelle, décrite simplement plutôt que minimisée.

Si un véritable écran se trouve derrière des étapes d'accueil qui n'ont aucun rapport avec la compétence prouvée, préparez le compte de démonstration au-delà de ces étapes à l'avance afin que le parcours enregistré commence au moment qui compte. Un spectateur qui regarde quelqu'un cliquer sur cinq écrans de configuration avant d'atteindre la véritable fonctionnalité arrêtera de regarder avant que la fonctionnalité n'apparaisse.

  1. Choisissez une construction Bubble du portfolio qui prouve une compétence réelle, pas seulement un modèle.
  2. Ouvrez la version en ligne de l'application et préparez des données de démonstration sûres à montrer.
  3. Écrivez l'indication d'une ligne, demandez la vidéo, et relisez le résultat avant de l'ajouter au portfolio.

Quelles données doivent se trouver dans l'application au moment de l'enregistrement ?

Un type de données Bubble vide fait paraître même une logique correcte comme cassée, car le spectateur ne peut pas savoir si une liste est vide par conception ou parce que rien n'a été saisi. Ajoutez deux ou trois lignes de contenu fictif crédible avant de demander le rendu. Utilisez des noms et des organisations inventés plutôt que les informations d'un client réel, même si la construction a été faite pour un client réel, sauf si ce client a explicitement approuvé d'être montré.

Des données préparées protègent aussi l'enregistrement d'un état vide accidentel. Si un résultat de recherche, un compteur de tableau de bord, ou une liste filtrée n'a rien à afficher, le rendu montrera exactement cela et il n'y a aucun moyen de corriger cela après. Vérifier l'application à la main avant de soumettre un rendu, de la même façon que toute construction en préproduction est vérifiée avant d'être enregistrée, permet d'éviter cela avant de réserver du temps pour un rendu qui doit être refait.

Où cela se situe-t-il par rapport à une capture d'écran ou un GIF statique ?

Une capture d'écran répond à « à quoi ça ressemble ». Une vidéo répond à « est-ce que ça fonctionne ». La plupart des portfolios profitent d'avoir les deux, la vidéo faisant le travail le plus lourd. Quiconque a essayé de compresser un parcours en plusieurs étapes dans un GIF en boucle connaît les compromis, et le guide sur l'alternative au GIF de démonstration produit couvre pourquoi une courte vidéo narrée communique généralement plus dans moins d'espace qu'une image animée.

Écrivez l'indication d'une ligne de la même façon que vous briefieriez un collègue debout derrière votre épaule : nommez l'écran de départ, l'action, et le résultat attendu. Le guide sur l'indication de démonstration vidéo pour un agent IA donne plus de détails sur la formulation d'une indication assez précise pour que le rendu corresponde à ce que vous vouliez, plutôt qu'à quelque chose d'approchant.

Gardez le son à l'esprit même pour une entrée de portfolio qui sera probablement d'abord regardée avec l'audio coupé. Un spectateur qui fait défiler une page de portfolio sur un ordinateur portable dans un bureau ne va rien réactiver, donc la séquence visuelle doit avoir du sens sans narration, un point traité directement dans le guide sur la vidéo de démonstration produit sans son. Les sous-titres intégrés au rendu portent le propos quand l'audio n'est pas une option.

Comment cela se compare-t-il à une entrée de portfolio Firebase Studio ?

La discipline sous-jacente est la même à travers les plateformes de développement même si les particularités de la plateforme diffèrent. Une vidéo de démonstration Firebase Studio fait face à une question différente, car les applications Firebase Studio se déploient généralement sur Firebase Hosting et l'aperçu à l'intérieur même de l'espace de travail n'est pas quelque chose qu'un client peut ouvrir sans accès au projet. Le guide de vidéo de page de destination Firebase Studio et le guide de vidéo de lancement Firebase Studio sur Product Hunt traitent tous deux de la mise en avant d'une application devant un inconnu qui ne l'a jamais vue, ce qui est proche du problème de portfolio sans être identique, car un spectateur de portfolio sait déjà qui a construit la chose et juge le constructeur plutôt que de décider de s'inscrire. Le guide sur le partage Firebase Studio avec un client est encore plus proche, car remettre un travail à quelqu'un qui ne cliquera pas sur un lien d'aperçu est le même problème qu'une page de portfolio résout pour un recruteur.

Pour une construction faite avec un agent de codage IA plutôt qu'à la main dans l'éditeur Bubble, la question de relecture change à nouveau, et le guide de vidéo de démonstration de PR pour agent IA couvre ce qu'un relecteur doit voir quand le changement en relecture provient d'une pull request générée plutôt que d'une personne déplaçant des éléments sur un canevas.

Avant d'ajouter un rendu terminé à un portfolio, regardez-le une fois comme le ferait un inconnu : sans contexte, son coupé, sur un téléphone si le portfolio sera consulté sur un téléphone. Si le parcours a toujours du sens à froid, il est prêt. S'il a besoin d'une explication tapée dessous pour avoir du sens, le parcours était trop large et devrait être resserré avant la prochaine tentative. Pour tout le reste du workflow, de la transmission au relecteur pour une construction Bubble aux alternatives Bubble à un outil d'enregistrement d'écran guidé, la page des tarifs pour les forfaits et recharges, la bibliothèque complète de guides, les pages de comparaison, et la page d'accueil GogoScreen pour le workflow d'URL et d'indication lui-même, traitez ceci comme toute autre construction en relecture : vérifiez-la à la main avant que quelqu'un d'autre ne le fasse.

Précisions

Avant de commencer

Pourquoi une capture d'écran échoue-t-elle comme entrée de portfolio Bubble ?

Une capture d'écran montre une seule image d'un onglet de conception. Elle ne peut pas montrer un workflow qui se déclenche, une règle de confidentialité qui libère les bonnes données, ou le moteur responsive qui réorganise une page selon les largeurs, et c'est exactement ce qu'un relecteur d'une construction Bubble veut vérifier.

Une vidéo de portfolio Bubble doit-elle utiliser la version en ligne ou la version de test ?

Utilisez celle que le relecteur est censé considérer comme fiable. Une version en ligne sur le propre domaine de l'application se lit comme un travail terminé. Une construction en version de test convient pour un travail encore en relecture, mais précisez laquelle c'est afin que personne ne confonde un brouillon avec l'application livrée.

Que faire si l'application Bubble nécessite une connexion pour atteindre l'écran intéressant ?

Fournissez un compte de démonstration jetable via le processus approuvé. Sur GogoScreen, les identifiants sont chiffrés, utilisés pour un seul rendu, puis supprimés. Si un storyboard est planifié en premier, les identifiants restent chiffrés pendant cette session et sont supprimés au plus tard deux heures après leur dernière utilisation. Ne remettez jamais une véritable connexion client à cette fin.

Collez une URL, décrivez un parcours et obtenez une vidéo de démonstration de votre application web.

Les 60 premières secondes de vidéo sont gratuites, avec un filigrane. Vérifiez votre adresse e-mail pour télécharger la vidéo.