Aller au contenu
Guide7 min de lecture

Vidéo de démo portfolio pour une application Replit

Montrez le repl en fonctionnement, pas une capture d'écran figée.

Transformez un repl public en entrée de portfolio qui le montre en fonctionnement, avec une étape de réveil que la plupart des guides oublient.

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 construite sur Replit a un rôle qu'une capture d'écran ne peut pas remplir : elle doit prouver que l'application fonctionne. N'importe qui peut recadrer une image figée en carte et la légender comme un projet terminé. Une personne qui parcourt un portfolio pour une embauche ou un contrat en a déjà vu assez de ce genre pour les ignorer d'un coup d'œil. Ce qu'elle veut, c'est la confirmation que la chose derrière le lien fait réellement quelque chose, et le moyen le plus rapide de le lui donner est une courte vidéo de l'application en train de le faire.

La structure propre de Replit rend cet exercice à la fois plus simple et légèrement plus délicat qu'il n'y paraît. Chaque projet a un panneau webview en direct à côté du code, et un repl public expose cette même application en fonctionnement à une URL qu'un visiteur peut ouvrir directement. C'est la partie qui aide : il y a toujours quelque chose de réel à filmer, pas une version à monter séparément. La partie qui piège les gens est qu'un repl sans déploiement actif devient inactif après une période sans trafic, et c'est la première requête qui suit qui doit le réveiller avant que quoi que ce soit ne s'affiche. Une vidéo de portfolio enregistrée sur un repl froid peut s'ouvrir sur un indicateur de chargement au lieu de l'écran qu'elle était censée prouver.

Quel repl mettre dans le portfolio ?

Choisissez le repl qui montre l'écran unique le plus lisible, pas le plus dense en fonctionnalités. Un responsable du recrutement ou un client qui parcourt dix entrées de portfolio d'affilée accordera à chacune quelques secondes avant de décider s'il continue à regarder. Le projet qui montre une interaction reconnaissable, comme filtrer une liste ou soumettre un formulaire et voir le résultat, se lit plus vite qu'un projet qui essaie de parcourir cinq écrans différents.

Le repl doit être public pour qu'un visiteur et un outil de rendu puissent tous deux l'atteindre. Si le code vit dans un repl privé pour une bonne raison, envisagez si une copie publique allégée avec la même interaction peut servir d'entrée de portfolio sans exposer quoi que ce soit qui doit rester fermé.

À vérifierPourquoi c'est important pour une entrée de portfolio
Visibilité du replUn repl privé ne peut être ouvert ni par un visiteur ni par un outil de rendu
État du webviewL'écran que vous voulez montrer doit réellement se charger dans le panneau webview
Données d'exempleLe contenu doit être préparé et lisible, pas un état vide ni des données personnelles

Pourquoi le repl doit-il être réveillé en premier ?

C'est le détail que la plupart des guides sur les vidéos de démo oublient, car il est spécifique à la façon dont Replit fait tourner un repl gratuit ou peu utilisé. Un repl qui n'a pas reçu de trafic depuis un moment devient inactif, et c'est la requête du visiteur suivant qui le réveille. Ce réveil prend quelques secondes réelles, pendant lesquelles le webview affiche un état de chargement plutôt que l'application.

Si une demande de rendu atteint un repl froid, le résultat enregistré peut capturer exactement cet état de chargement au moment censé être la meilleure preuve du portfolio. La solution est procédurale, pas technique : ouvrez le repl vous-même, laissez le webview finir de se charger, confirmez que l'écran que vous voulez montrer est bien celui qui apparaît, et demandez le rendu seulement ensuite. Cette seule habitude évite la raison la plus fréquente pour laquelle une démo basée sur Replit revient en paraissant inachevée alors que l'application elle-même ne l'est pas.

Un repl devenu inactif a besoin d'un moment pour se réveiller avant même que la page que vous voulez montrer ne se charge, et aucune indication ne peut corriger cela après coup. Traitez l'étape de réveil comme faisant partie de la préparation, de la même façon que vous vérifieriez qu'une route est accessible sur toute autre plateforme. Cela compte davantage pour un portfolio que pour une présentation guidée interne, car une entrée de portfolio est souvent la première et unique interaction qu'un inconnu a avec le projet. Un recruteur ou un client qui parcourt plusieurs entrées à la suite ne saura pas que le repl était froid, seulement que la vidéo sur laquelle il a cliqué s'est ouverte sur un indicateur de chargement, et deux minutes passées à ouvrir le repl au préalable éliminent entièrement ce risque.

Que doit dire l'indication d'une ligne ?

Nommez l'écran, l'action et le résultat. « Ouvrir le tableau de bord, ajouter une tâche, et la montrer dans la liste » donne à un outil de rendu une cible précise plutôt qu'une demande ouverte de résumer l'application. Une indication vague comme « montrer le projet » invite à une présentation guidée générique qui ne correspond pas à ce dont un portfolio a besoin, à savoir un moment convaincant plutôt qu'une visite.

  1. Choisissez un repl public dont le webview charge l'écran précis qu'un visiteur doit juger.
  2. Ouvrez le repl une fois vous-même pour qu'il soit déjà actif avant de demander le rendu.
  3. Écrivez une indication d'une ligne nommant l'écran, l'action et le résultat que l'entrée de portfolio doit prouver.

Gardez le vocabulaire de l'indication cohérent avec ce qui apparaît réellement à l'écran. Si l'application appelle quelque chose un tableau, ne le décrivez pas comme un tableau de bord dans l'indication. GogoScreen accepte l'URL d'une application web et cette indication d'une ligne, puis renvoie un fichier MP4 narré avec sous-titres, lissage du curseur, zooms sur les clics et suppression des temps morts. Il peut utiliser un compte de démonstration fourni quand l'écran voulu se trouve derrière une connexion ; 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.

En quoi cela diffère-t-il des autres plateformes de construction ?

Le webview toujours visible et l'URL propre au repl de Replit sont spécifiques à la façon dont cette plateforme fait tourner les projets, ce qui est différent d'une plateforme où l'application en fonctionnement n'existe qu'après une étape de déploiement explicite. Le guide de la vidéo de page de destination Bolt et le guide de la vidéo de lancement Product Hunt Bolt couvrent une plateforme où l'aperçu tourne dans une session de navigateur sandboxée jusqu'à ce qu'une étape de déploiement le publie quelque part de stable. Un guide du partage d'un projet Bolt avec un client et un guide de la démo portfolio Bolt traitent la même question de portfolio pour cette configuration différente.

Pour le volet relecture d'une version Replit, le guide de la présentation guidée de relecture Replit couvre ce qu'un relecteur doit voir plutôt que ce qu'un visiteur de portfolio doit voir, ce qui est un rôle plus étroit et différent. Si un repl n'est pas le bon format pour un moment donné, le guide de l'enregistrement d'écran automatisé pour une application web explique le flux de travail par URL et indication en termes plus généraux, et le guide de l'alternative au GIF de démo produit défend l'idée d'une vidéo narrée plutôt qu'une boucle silencieuse.

Que se passe-t-il si le rendu ne revient pas propre ?

Tous les rendus ne réussissent pas du premier coup. Environ un rendu sur cinq échoue ou nécessite une nouvelle tentative, et une entrée de portfolio mérite la même relecture que n'importe quel autre actif de page avant sa mise en ligne. Vérifiez le résultat par rapport à l'écran et à l'action nommés dans l'indication plutôt que de supposer qu'un fichier renvoyé est automatiquement correct.

  • Confirmez que le repl était actif et avait chargé l'écran visé avant le début du rendu.
  • Comparez la vidéo terminée avec l'action et le résultat énoncés dans l'indication.
  • Redemandez le rendu avec une indication plus précise si la première tentative s'éloigne de l'écran visé.

Si un rendu échoue complètement, le guide sur l'échec d'un rendu de vidéo de démo couvre ce qu'il faut changer avant de réessayer. Un portfolio construit autour d'un projet encore en cours peut aussi s'appuyer sur le guide de la vidéo de démo de lancement bêta pour savoir quel degré de finition une entrée pré-lancement a réellement besoin, et le guide de la vidéo de démo de pull request d'un agent IA est utile quand la preuve la plus pertinente est un changement de code précis plutôt que l'application entière. Pour une comparaison directe d'outils qui produisent ce type d'actif, voir GogoScreen contre Demosmith. Consultez les tarifs, parcourez le reste des guides et des comparaisons, ou partez de la page d'accueil de GogoScreen pour essayer le flux de travail avec l'URL et l'indication sur votre propre repl.

Précisions

Avant de commencer

Une entrée de portfolio a-t-elle besoin que le repl soit public ?

Oui. Un repl privé ne peut être ouvert ni par un visiteur ni par un outil de rendu, donc une entrée de portfolio a besoin d'un repl public avec un webview fonctionnel avant toute autre décision.

Pourquoi un repl doit-il être ouvert avant l'enregistrement ?

Un repl resté inactif s'endort, et c'est la première requête qui suit qui le réveille. L'ouvrir soi-même en premier garantit que le rendu montre l'application, pas un écran de chargement.

Le repl doit-il contenir des données réelles ?

Non. Un repl de portfolio doit contenir des données d'exemple préparées et non sensibles qui rendent l'écran montré lisible, pas un compte personnel ni quoi que ce soit de privé.

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.