Aller au contenu
Le guide

Comment utiliser Uttra

Pas à pas, d'une première idée à un site publié avec votre propre code en main.

Étape 1

Lancez votre premier projet

Décrivez votre idée avec des mots simples, et Uttra commence à la construire devant vous.

  • Saisissez votre idée dans la zone de texte de la page d'accueil, en arabe, en dialecte ou en anglais, comme vous l'expliqueriez à quelqu'un en face de vous.
  • Cliquez sur « Lancer la création ». Uttra prépare un environnement isolé rien que pour votre projet ; ses fichiers ne sont jamais partagés avec ceux d'autrui.
  • Suivez la construction étape par étape dans la conversation : pages, données et logique se construisent l'une après l'autre devant vous. Vous pouvez aussi choisir une direction de design dans « UI Styles » si vous le souhaitez.
  • Une fois terminé, vous pouvez continuer à demander des modifications dans la même conversation ; le projet reste ouvert au développement.
Étape 2

Ouvrez l'aperçu et voyez votre site en direct

Un aperçu en direct à côté de la conversation, mis à jour instantanément à chaque demande.

  • Dès que la construction est terminée, Uttra ouvre un aperçu en direct de votre site ou application juste à côté de la conversation.
  • Toute modification demandée dans la conversation se reflète immédiatement dans l'aperçu : vous voyez le résultat pendant que vous parlez à Uttra, pas après.
  • Le lien d'aperçu vous est privé : personne d'autre ne peut le voir tant que vous n'avez pas décidé de publier le projet.
ConversationCodeAperçu
Publier
Preview
En direct
Clinique dentaire SmilePrendre rendez-vous
Étape 3

Utilisez « Sélectionner un élément » pour éditer visuellement

Cliquez sur « Sélectionner un élément », choisissez n'importe quoi sur la page, et dites à Uttra quoi y changer.

  • Au-dessus de l'aperçu se trouve un bouton « Sélectionner un élément ». Cliquez dessus, puis choisissez n'importe quoi sur la page (texte, image, bouton, ou une section entière).
  • L'élément choisi est envoyé automatiquement à la conversation comme contexte : vous pouvez donc écrire directement votre demande, comme « agrandis ce texte » ou « supprime cette section », sans décrire où il se trouve.
  • C'est plus rapide pour des retouches précises sur un élément. Pour des changements plus importants, qui touchent plusieurs parties et nécessitent de la logique et des connexions de données, la conversation reste le meilleur outil.
Preview
Sélectionner un élément
Clinique dentaire Smileh1.hero-title
Agrandis ce texte
Étape 4

Testez votre site sur différents appareils

Passez des vues mobile, tablette et ordinateur depuis le même écran.

  • Depuis la barre d'outils de l'aperçu, vous pouvez passer des tailles mobile, tablette et ordinateur sans avoir à ouvrir un autre appareil.
  • Cela vous permet de vérifier que le design fonctionne et reste lisible à toutes les tailles avant de publier votre site.
  • Si Uttra vous a créé une application mobile, vous pouvez l'essayer sur votre vrai téléphone via l'application Expo Go en scannant un QR code.
Preview
Ordinateur
Étape 5

Publiez sur un domaine Uttra gratuit

Un clic, et un lien prêt à partager avec n'importe qui, sans configuration d'hébergement.

  • Cliquez sur le bouton « Publier » en haut du projet : votre projet devient « Public » et vous obtenez aussitôt un lien direct à partager avec qui vous voulez.
  • Le lien est sur un sous-domaine gratuit comme votre-app.uttra.io, sans aucune configuration d'hébergement de votre côté.
  • Les sites publiés tournent sur les ressources de votre forfait (CPU, mémoire, stockage), réparties automatiquement, prêtes pour du trafic réel sans que vous ayez à configurer de serveur.
  • Si vous cliquez à nouveau sur « Publier » après une modification, la version précédente reste en ligne pour les visiteurs jusqu'à ce que la nouvelle soit vérifiée ; votre site ne tombe jamais pendant une mise à jour.
ConversationCodeAperçu
Publier
PublierRendre ce projet accessible au public
Hébergement
0.8 vCPU
processeur
2.4 GB
mémoire
24 GB
stockage
Domaine
Notre sous-domaine
clinic-smile.uttra.io
Domaine personnalisé
Apportez le vôtre, gratuit avec chaque forfait
Publier
Étape 6

Connectez votre propre domaine

Votre site sur votre propre domaine, gratuit avec chaque forfait.

  • Depuis l'écran « Publier », choisissez « Domaine personnalisé » et saisissez votre domaine, par exemple app.exemple.com.
  • Ajoutez les enregistrements DNS qu'Uttra vous indique dans le panneau de votre registrar : en général un enregistrement TXT pour la vérification et un enregistrement A.
  • Cliquez sur « Vérifier le domaine ». Une fois les réglages propagés (cela peut prendre un peu de temps), votre site est en ligne directement sur votre domaine.
TypeHébergerMontant
TXT@uttra-verify=8a2f...
A@76.13.x.x
Vérifié : votre site est en ligne sur votre domaine
Étape 7

Connectez GitHub et poussez votre code

Une copie complète du code, dans votre propre dépôt.

  • Depuis l'onglet « GitHub » du projet, connectez votre compte avec un Personal Access Token ayant la portée repo.
  • Une fois connecté, poussez votre projet directement vers votre propre dépôt quand vous le souhaitez.
  • L'import d'un dépôt existant (pull) se fait via le terminal dans l'environnement du projet, avec les commandes git habituelles comme git clone et git pull.
Connecter GitHub
clinic-smile-appPousser
Étape 8

Téléchargez votre code ou modifiez-le vous-même dans le terminal

Le code vous appartient entièrement, et n'est jamais enfermé dans la plateforme.

  • Le code vous appartient entièrement. Vous pouvez le pousser sur GitHub à tout moment, ou le télécharger/copier directement via le terminal intégré au projet.
  • Le terminal vous donne un vrai environnement de développement : ouvrez les fichiers et modifiez-les à la main, et installez tout paquet npm ou système dont votre projet a besoin.
  • Vous n'êtes donc pas limité à la conversation : vous pouvez travailler comme un vrai développeur dans le même projet à tout moment.
zsh
$
$

Prêt à l'essayer vous-même ?

Gratuit · Sans carte bancaire