Créez votre première application fonctionnelle avec l’IA sur Adios.

Comprendre les principaux termes

Vous n’avez pas besoin d’apprendre la programmation pour suivre ce guide. Il vous suffit d’un compte Adios, d’un navigateur web récent et du temps nécessaire pour lire le plan de l’agent IA et tester ce qu’il crée.

Modèle

Une application de départ fonctionnelle. Elle fournit une base sûre à l’IA plutôt qu’un projet vide.

Espace de travail

L’environnement en ligne qui réunit vos fichiers source, votre conversation IA, votre aperçu, vos journaux et vos commandes de déploiement.

Aperçu

Une version de test que vous pouvez ouvrir avant de changer l'application publique.

Compilation

Une vérification de production qui prépare l’application et détecte de nombreux problèmes avant la mise en ligne.

Déployer

Publiez une version vérifiée pour que d’autres personnes puissent y accéder sur le web.

Contrôle de santé

Un petit test automatique utilisé par Adios pour confirmer que l’application répond.

Décrivez une personne, un problème et une action utile

Une première application est beaucoup plus simple à créer lorsqu’elle remplit une seule fonction claire. Ce guide utilise un estimateur de prix de rénovation : le visiteur choisit trois options et reçoit une fourchette de prix approximative. L’application est interactive et utile, sans avoir besoin de données privées ni d’un autre service.

Je veux créer [APP NAME] pour [WHO IT HELPS].
La principale action qu’un visiteur doit pouvoir réaliser est [ONE ACTION].
Le style doit évoquer [THREE STYLE WORDS].
Pour la première version, n’ajoute pas [FEATURES TO LEAVE FOR LATER].

Créez votre application Adios à partir du modèle Next.js

Le modèle contient déjà le framework, la commande de démarrage, le fichier de déploiement et le contrôle de santé. Le premier déploiement confirme que cette base fonctionne avant que l’IA ne la modifie.

1. 1Ouvrez le modèle Next.js et connectez-vous ou créez votre compte Adios.
2. 2Vérifiez le modèle, la région, les ressources et les paramètres de déploiement sélectionnés qu’affiche Adios.
3. 3Créez l’application et suivez le journal de déploiement jusqu’à ce que l’application de départ soit saine.
4. 4Ouvrez l’adresse HTTPS générée. Copiez-la dans un endroit sûr : vous la collerez dans le prompt destiné à l’IA.
5. 5Ouvrez l’espace de travail de l’application. Vous y discuterez avec l’agent IA et prévisualiserez le résultat.

Coller une demande complète dans l'espace de travail

Ouvrez la conversation IA dans votre espace de travail. Remplacez l’URL entre crochets ci-dessous par l’adresse HTTPS du déploiement initial, puis collez la demande entière. Demander d’abord un plan permet de corriger un malentendu avant toute modification du code source. Le Création d’applications avec l’IA et espace de travail Adios garde ce plan lié au code source obtenu et à l’aperçu.

Je débute dans la création d’applications. Aide-moi à transformer cette application de départ en une première version complète.

L’application :
- Nom : BrightBuild Project Estimator
- Public : propriétaires qui préparent une petite rénovation
- Fonction principale : permettre de choisir un type de projet, la taille de la pièce et le niveau de finition, puis afficher une fourchette de prix approximative
- Style : sobre, rassurant, moderne et facile à lire

À créer :
- Une page d’accueil claire qui présente l’estimateur
- Un estimateur fonctionnel avec des champs pour le type de projet, la taille de la pièce et le niveau de finition
- Une fourchette de prix estimée, calculée instantanément dans le navigateur
- Une courte section « Comment ça marche », une FAQ et un bouton de contact
- Une mention claire indiquant que l’estimation est indicative et ne constitue pas un devis ferme
- Une mise en page responsive adaptée aux téléphones et aux ordinateurs
- Un titre et une description de page exacts, ainsi que robots.txt et sitemap.xml pour cette URL : [PASTE YOUR ADIOS APP URL]

Règles :
- Conserve le projet Next.js actuel et sa configuration de déploiement Adios.
- Ne supprime pas adios.yaml, package.json ni la route de santé existante.
- N’ajoute ni connexion, ni paiement, ni base de données, ni API externe, ni service payant.
- Ne collecte et ne conserve aucune information personnelle.
- N’invente ni avis, ni nombre de clients, ni récompense, ni affirmation commerciale.
- Utilise des coordonnées provisoires clairement identifiées et indique où elles apparaissent.
- Avant toute modification, présente un court plan en anglais clair.
- Après mon approbation du plan, crée l’application, exécute les vérifications de lint et de compilation existantes et explique les changements sans jargon.

Ouvrez l’aperçu et utilisez l’application comme un visiteur

Attendez que l’agent termine ses modifications et indique les résultats du lint et de la compilation. Utilisez ensuite la commande Aperçu de l’espace de travail. Une compilation réussie est importante, mais elle ne vous indique pas si les textes sont clairs ou si l’estimateur est utile.

• ✓La page s'ouvre sans erreur ni écran vide.
• ✓Changer le type de projet, la taille ou la finition modifie l'estimation.
• ✓L’estimation est clairement présentée comme une indication approximative.
• ✓Chaque bouton et chaque lien mène à un résultat utile.
• ✓Le texte est confortable à lire sur un téléphone et un ordinateur.
• ✓Il n’y a ni faux avis, ni affirmations inexpliquées, ni textes provisoires oubliés.
• ✓L’application se charge toujours correctement après actualisation de la page.

Vous n’avez pas besoin de comprendre chaque fichier modifié. Dans la vue de revue de l’espace de travail, vérifiez que l’agent a modifié la page et les styles tout en conservant adios.yaml, package.json, et la route de santé en place.

Donnez des retours précis, une courte série à la fois

« Améliore-la » laisse trop de place à l’interprétation. Dites ce que vous avez observé, ce que vous attendiez et où le problème s’est produit. Testez le nouvel aperçu après chaque série de changements pour qu’une petite demande visuelle ne casse pas l’action principale.

Corrige uniquement ces éléments dans l’application actuelle :
1. [DESCRIBE THE FIRST PROBLEM]
2. [DESCRIBE THE SECOND PROBLEM, OR DELETE THIS LINE]

Conserve tout le reste tel quel. Ne supprime pas les fichiers de déploiement Adios ni la route de santé. Exécute les vérifications existantes après la modification, puis indique exactement ce que je dois tester dans l’aperçu.

Effectuez une dernière vérification, puis déployez

Collez cette demande finale une fois que l’aperçu vous convient. Elle transforme votre vérification visuelle en checklist de mise en ligne et indique à l’agent de ne pas publier de sa propre initiative.

Effectue une vérification finale de cette application avant la mise en ligne.

Vérifie que :
- l’estimateur principal fonctionne avec plusieurs combinaisons de paramètres ;
- la mise en page est lisible sur téléphone et ordinateur ;
- chaque lien et chaque bouton produit un résultat clair ;
- aucun texte provisoire inachevé ne reste, à l’exception des coordonnées dont nous avons discuté ;
- le titre et la description de la page correspondent à l’application ;
- robots.txt et sitemap.xml utilisent [PASTE YOUR ADIOS APP URL] ;
- la route de santé fonctionne toujours ;
- aucun mot de passe, jeton ni renseignement privé ne figure dans les fichiers ;
- les vérifications de lint et de compilation existantes réussissent.

Corrige uniquement les problèmes constatés. Fournis ensuite une checklist de mise en ligne en langage clair. Ne déploie pas avant mon approbation.

La vérification de la version marque le passage au processus de production. Découvrez comment déployer votre application créée avec l’IA avec le code source, les contrôles de santé, les journaux et les preuves d’approbation liés.

1. 1. Lisez le résultat. Vérifiez que le lint et la compilation ont réussi. Si l’un des deux échoue, demandez à l’agent de corriger le problème et de relancer la vérification.
2. 2. Ouvrez l'aperçu à nouveau. Testez l'estimateur une fois de plus après les corrections finales.
3. 3. Utilisez les commandes de déploiement de l'espace de travail. Examinez la version à publier, démarrez le déploiement et suivez son journal de compilation.
4. 4. Attendez que la version soit saine. Ne fermez pas la page au premier message de réussite. Vérifiez que la nouvelle version devient saine et répond sur la route publique.

Si le déploiement échoue, copiez la dernière erreur, pas tout le journal, dans la conversation IA et demandez une explication claire avant d’approuver un autre changement.

Vérifiez l’application publique, pas seulement le message de déploiement

Ouvrez l’adresse HTTPS dans un nouvel onglet. Testez-la comme si vous découvriez le projet. Une mise en ligne est terminée uniquement lorsque l’application publique répond et que sa fonctionnalité principale fonctionne.

Créer un point de référence du code source avant d’ajouter des fonctionnalités

Un commit Git est un point de référence nommé dans l’historique de votre code source. Dans l’espace de travail, examinez la liste des fichiers modifiés et créez un commit tel que Créer le premier estimateur BrightBuild. Reliez le projet à un dépôt Git distant et poussez-y le code pour disposer d’une autre copie hors de l’espace de travail.

Ajoutez de la complexité dans cet ordre

1. Suivant 1

   Améliorer la page publique

   Affinez les textes, les couleurs, la mise en page et les choix de l’estimateur.

2. Suivant 2

   Connectez un domaine personnalisé

   Donnez à l’application en ligne une adresse qui vous appartient.

3. Suivant 3

   Ajouter des données enregistrées

   Ajoutez une base de données uniquement lorsque l’application doit réellement conserver des informations.

4. Suivant 4

   Ajouter les services privés

   Stockez les identifiants dans Adios Secrets, jamais dans le prompt IA ni dans le code source.

Sortir d’un blocage sans tâtonner