Quant-UX¶

Dans cet article

• Caractéristiques clés de Quant-UX
• Fonctionnalités de déploiement
• Données de connexion
• Premiers pas après le déploiement de Quant-UX
• Commande de Quant-UX via l'API

Caractéristiques clés de Quant-UX¶

• Prototypage interactif : tous les widgets sont entièrement fonctionnels — les utilisateurs peuvent saisir des données, cocher des cases et interagir avec les éléments. Combiné aux animations et à la gestion des données, le prototype se comporte comme une application réelle.
• Visual Designer : un canevas pratique pour créer des écrans, ajouter des composants et construire des transitions entre les écrans via des liens.
• Assistant IA : génération de fragments de prototypes basés sur des invites textuelles (ex: "créer un formulaire de connexion") avec des capacités de peaufinage et de stylisation ultérieures.
• Design Systems : création de systèmes de design évolutifs basés sur des composants, des design tokens et des écrans maîtres.
• Animations : l'outil Animation Composer pour créer des animations réalistes et augmenter la fidélité du prototype.
• Palette de composants riche : ensembles de widgets prêts à l'emploi pour WireFrame, Survey, iOS et Android — vous pouvez commencer le design immédiatement.
• Outils intelligents : redimensionnement de grille, clonage intelligent et grilles répétitives pour accélérer votre flux de travail.
• A/B Testing : comparaison de plusieurs variantes de design au sein d'un seul prototype en utilisant l'opérateur A/B — il suffit de lier un élément à un test et de spécifier deux variantes.
• Logique métier : modélisation de la logique via des requêtes REST et des éléments de décision, champs obligatoires, validation du format de saisie et liaison de données pour le passage d'informations entre les écrans.
• Tests d'utilisabilité et analyses : collecte de données sur le comportement des utilisateurs, heatmaps et métriques UX quantitatives pour une prise de décision basée sur les données.
• Intégrations et Importation : importation par glisser-déposer d'images (.webp, .jpg, .psd) sur le canevas, ainsi que l'importation de mises en page depuis Figma.
• Open Source : déploiement auto-hébergé sans les limites de projets et d'utilisateurs présentes dans les versions SaaS cloud.

Fonctionnalités de déploiement¶

Données de connexion¶

Après le paiement de la commande, une notification sera envoyée à l'adresse e-mail fournie lors de l'inscription une fois que le serveur sera prêt pour l'exploitation. Elle contiendra l'adresse IP du VPS, ainsi que l'identifiant et le mot de passe pour la connexion.

La gestion du service s'effectue via l'interface web Quant-UX, dont le lien se trouve dans Invapi.

Les données d'autorisation peuvent être trouvées dans la section Configuration >> Tags du panneau de contrôle du serveur ou dans l'e-mail envoyé :

• Link : dans le tag webpanel; ;
• Login et Password pour la gestion du serveur : envoyés par e-mail à votre adresse une fois que le déploiement du logiciel est terminé et que le serveur est prêt. Les identifiants de compte au sein de l'application elle-même (e-mail et mot de passe) sont créés séparément lors de l'inscription lors de votre première visite sur le lien de l'interface web.

L'interface web sera disponible à l'adresse : https://quantux{Server_ID_from_Invapi}.hostkey.in

grep -rE "QUX_JWT_PASSWORD|QUX_MONGO_CONNECTION_STRING|QUX_MAIL_" /opt/quantux/

Premiers pas après le déploiement de Quant-UX¶

1. Pour le premier lancement, accédez à un lien tel que https://quantux<Server_ID>.hostkey.in. Un écran de connexion avec les onglets Login et Sign Up s'ouvrira. Pour créer un compte, allez sur l'onglet Sign Up.

   

   Remplissez les champs d'inscription :

   • Email - votre adresse e-mail (utilisée également comme nom d'utilisateur) ;
   • Password - votre mot de passe.

   Cochez la case I accept the terms of service et cliquez sur SignUp. Pour les connexions ultérieures, utilisez l'onglet Login.

   Remarque

   Un compte administrateur distinct n'est pas créé par défaut — lors de l'inscription, un compte utilisateur standard (rôle user) est créé, qui devient le propriétaire de ses propres prototypes et équipes. La confirmation de l'adresse e-mail pour la connexion n'est pas requise. La possibilité de s'auto-enregistrer est contrôlée par la variable QUX_USER_ALLOW_SIGNUP, et la liste des domaines d'e-mails autorisés est contrôlée par la variable QUX_USER_ALLOWED_DOMAINS dans le fichier de déploiement /opt/quantux/quantux-compose.yml. Pour plus de détails sur la gestion des utilisateurs et des équipes, consultez la documentation pour les développeurs.

2. Après l'inscription, vous serez automatiquement connecté, et le bureau Quant-UX s'ouvrira avec un message de bienvenue.

   

   Éléments principaux de l'interface :

   • + Create - créer un nouveau prototype ;
   • Recent Prototypes - une liste de vos prototypes récents ;
   • Updates - mises à jour et notifications ;
   • Documentation - accéder à la documentation officielle de Quant-UX ;
   • Contact - informations de contact et commentaires ;
   • My Account - paramètres du compte.

3. Pour créer un prototype, cliquez sur Create. Dans la fenêtre Create a new prototype qui s'ouvre, spécifiez les paramètres :

   

   • Name - nom du prototype (application) ;
   • ScreenSize - taille de l'écran : Smartphone, Smartphone (Max), Tablet (Vertical), Tablet (Horizontal), Desktop, ou Custom (dimensions personnalisées).

   Cliquez sur Create — le designer visuel s'ouvrira.

   Remarque

   La taille de l'écran est spécifiée en points, et non en pixels.

4. Dans le designer visuel, vous créez la conception du prototype : écrans, widgets et transitions entre eux.

   

   Éléments principaux de l'éditeur :

   • Basculeur de mode Design / Prototype — permet de passer de la conception d'interface à la configuration des liens interactifs ;
   • Design Tokens — création et gestion des design tokens ;
   • Export Code — exportation du code du prototype ;
   • Bouton Share — publication du prototype et fourniture d'un accès via un lien ;
   • Contrôle du zoom (100 %) et sélection du prototype actif dans le coin supérieur gauche.

   Remarque

   Des informations détaillées sur l'utilisation de Quant-UX sont disponibles dans la documentation pour les développeurs, et les instructions de déploiement auto-hébergé sont disponibles sur le dépôt GitHub du projet.

Commande de Quant-UX via l'API¶

Pour installer ce logiciel en utilisant l'API, suivez ces instructions.