Récemment, de nombreux amis issus de formations littéraires ont essayé d'utiliser Codex pour développer leurs propres produits.
Les deux articles précédents expliquaient comment utiliser Codex ; celui-ci se concentre sur l'application pratique : comment l'utiliser pour créer un Mini Programme WeChat.
Commençons par regarder le résultat. Cette fois, nous avons construit un Mini Programme de suivi de lecture appelé "Une Page". Voici son interface d'exécution dans les outils de développement WeChat.
L'ensemble du processus, de l'idée à un Mini Programme utilisable, peut être divisé en ces étapes :
Conception du prototype Figma → Génération de code Codex → Simulation dans les outils de développement → Aperçu mobile → Soumission pour audit et publication.
Figma est chargé de déterminer l'apparence des pages et la destination des boutons ; Codex écrit le design en code ; les outils de développement WeChat sont utilisés pour exécuter, vérifier et envoyer le Mini Programme sur un téléphone pour un aperçu. Après avoir préparé votre propre compte Mini Programme, vous le soumettez pour audit et le publiez via le backend WeChat.
1. Qu'est-ce que Figma et pourquoi l'utiliser en premier ?
Figma est un outil de conception d'interface et de collaboration couramment utilisé pour concevoir des pages d'applications, de sites Web et de Mini Programmes. Les designers l'utilisent pour la mise en page, les couleurs et les boutons ; les chefs de produit l'utilisent pour discuter des flux d'opérations ; les développeurs consultent les dimensions de conception, l'espacement et les ressources pour implémenter les pages.
Il peut également créer des prototypes de produits cliquables. Par exemple, lier un bouton de la page d'accueil à une autre page afin qu'un clic déclenche un saut, vous permettant de tester à l'avance si l'opération est fluide.
C'est exactement ce pour quoi nous l'utilisons cette fois. Avant d'écrire du code, vous pouvez voir plusieurs pages ensemble et discuter si un bouton est bien placé ou si un écran est trop encombré.
Auparavant, cette maquette de conception était généralement confiée à un développeur. Maintenant, vous pouvez donner la maquette confirmée à Codex pour qu'il écrive le code. Les designers peuvent partir de Figma, qu'ils connaissent bien ; ceux qui utilisent déjà Codex peuvent lui faire générer une ébauche d'abord, puis l'ajuster dans Figma.
C'est ainsi que "Une Page" a été créé. Nous avons d'abord déterminé les trois pages principales — Bibliothèque, Enregistrement et Statistiques — puis nous avons unifié la palette de couleurs et la mise en page.
Voici la présentation du design. Un blanc crème est utilisé pour l'arrière-plan, un bleu foncé pour le texte et les boutons principaux, et un vert clair pour mettre en évidence l'opération en cours. La page d'accueil place le livre en cours de lecture à l'endroit le plus visible, tandis que les informations statistiques sont placées sur une page séparée pour ne pas submerger l'utilisateur de chiffres dès l'ouverture.
Cette étape concerne l'effet global. Une fois que vous êtes satisfait des couleurs, des tailles de police et des dispositions des pages, vous passez à l'étape suivante.
2. Laissez Codex générer une ébauche et compléter le prototype dans Figma
Même si vous ne savez pas dessiner des interfaces, vous pouvez commencer par un besoin clair. Par exemple, cette fois, je voulais un journal de lecture avec beaucoup d'espace blanc, où je pourrais voir le livre que je lis, enregistrer facilement ma progression et consulter mon historique de lecture.
Dites à Codex vos besoins et votre direction visuelle ensemble :
1Je veux créer un Mini Programme WeChat appelé "Une Page" pour le suivi de lecture.2Veuillez d'abord concevoir trois pages : Page d'accueil Bibliothèque, Enregistrement de lecture et Statistiques de lecture. N'écrivez pas encore de code fonctionnel.34Le style visuel doit ressembler à un journal de lecture silencieux :5Arrière-plan blanc crème, texte bleu foncé, zones clés vert clair, avec beaucoup d'espace blanc.6La page d'accueil doit mettre en évidence le livre en cours de lecture et le point d'entrée pour l'enregistrement. Les autres pages doivent conserver le même style visuel.7Utilisez des graphiques géométriques originaux pour les couvertures de livres ; utilisez du contenu fictif pour les exemples de livres.89Tout d'abord, donnez-moi une image d'aperçu des trois pages côte à côte.10Ensuite, générez trois fichiers SVG indépendants de 390×844, en conservant les groupes de texte, de graphiques et de boutons intacts pour un ajustement ultérieur dans Figma. Veuillez nommer les boutons principaux individuellement.
Demander une sortie SVG vous permet de placer le design dans Figma. SVG est un format graphique vectoriel ; dans ce cas, l'importer fournit du texte, des graphiques et des groupes qui peuvent être sélectionnés et ajustés individuellement.
Après avoir obtenu l'ébauche, modifiez-la jusqu'à ce que vous soyez satisfait. Soyez aussi précis que possible dans vos commentaires, par exemple "réduisez un peu le titre de la page d'accueil", "unifiez les boutons principaux en bleu foncé" ou "agrandissez la couverture du livre". Une fois les trois pages satisfaisantes, gérez l'interaction du prototype.
Mettre le design dans Figma
Ouvrez un fichier de conception Figma, cliquez sur le "+" à côté de Pages sur la gauche et créez une nouvelle page.
Dans cet exemple, l'importation est effectuée en copiant le contenu SVG et en le collant sur le canevas Figma. Nommez les trois plans de travail "01-Page d'accueil Bibliothèque", "02-Enregistrement de lecture" et "03-Statistiques de lecture", et disposez-les horizontalement. Après avoir sélectionné un plan de travail, vérifiez la largeur et la hauteur dans le panneau Design à droite.
Si c'est la première fois que vous ouvrez Figma, identifiez ces zones : Liste des calques à gauche, Canevas au milieu, panneau Design à droite pour l'apparence, et Prototype pour définir les interactions. Pour modifier un texte ou un bouton, sélectionnez-le d'abord dans la liste des calques.
N'oubliez pas de vérifier les polices après l'importation. Les polices peuvent être remplacées en fonction de l'environnement, ce qui peut modifier le retour à la ligne des titres et la largeur du texte. Le rendu des polices dans la maquette de conception et le Mini Programme différait cette fois, ils devaient donc être vérifiés séparément.
Ajouter des sauts aux boutons
Prenons l'exemple de la carte "Continuer la lecture" sur la page d'accueil. Sélectionnez-la, passez à Prototype en haut à droite et cliquez sur le "+" à côté de Interactions.
Dans le panneau Interaction qui s'affiche, définissez ces trois options :
- Déclencheur : Sélectionnez "Au clic".
- Action : Sélectionnez "Naviguer vers".
- Destination : Sélectionnez "02-Enregistrement de lecture" (le plan de travail cible).
Le bouton d'enregistrement sur la page d'enregistrement renvoie à la page d'accueil, et l'icône de statistiques sur la page d'accueil renvoie à la page des statistiques. L'image ci-dessous montre la configuration pour l'entrée des statistiques.
Cliquez sur l'icône triangulaire "Présenter" en haut à droite pour ouvrir la démo du prototype. Cliquez depuis la page d'accueil et revenez pour tester les itinéraires entre les pages.
Le prototype Figma montre les sauts ; la saisie réelle, l'enregistrement et les mises à jour des données seront implémentés par le code du Mini Programme ensuite.
3. Le design est prêt ; où utiliser MCP ?
MCP est utilisé à l'étape de transmission du design Figma à Codex. Une fois connecté, Codex peut lire la structure de conception, les styles et les ressources du plan de travail sélectionné et continuer l'implémentation en fonction de la maquette de conception.
Si vous savez déjà utiliser Figma et que vous avez une maquette prête, vous pouvez commencer directement ici. Sélectionnez le plan de travail que vous souhaitez implémenter, copiez le lien contenant les informations du nœud de ce plan de travail et envoyez-le à Codex avec la connexion Figma activée.
1Veuillez lire le contexte de conception et les captures d'écran de ce plan de travail via Figma MCP.2Expliquez d'abord la structure de la page, les tailles de police, les couleurs, l'espacement et les ressources que vous avez lus.3Dites-moi clairement s'il y a des parties que vous ne pouvez pas lire ; ne devinez pas.45Ensuite, nous allons créer un Mini Programme WeChat natif en utilisant WXML, WXSS, JavaScript et JSON.6Veuillez l'implémenter selon cette pile technologique, en réutilisant les styles et ressources existants du projet.7Terminez d'abord la page d'accueil, puis continuez avec les autres pages après confirmation.
Assurez-vous de spécifier "Mini Programme WeChat natif". Les informations de conception fournies par Figma doivent être implémentées en fonction de la plateforme cible ; vous ne pouvez pas simplement utiliser du code Web pour un Mini Programme.
Dans cet exemple, le design a été importé dans Figma via SVG, et le code suit le même fichier de conception et les mêmes ressources ; MCP est un moyen de combler le fossé lorsqu'une maquette de conception Figma existe déjà. Quelle que soit la méthode, ce qui est transmis à Codex doit être un design confirmé.
4. Écrire le design dans un Mini Programme
Ouvrez le dossier du projet dans Codex, placez les fichiers de conception et les ressources de couverture de livre, et vous pouvez commencer l'implémentation.
À cette étape, en plus de spécifier la technologie, vous devez indiquer clairement ce que vous voulez recevoir : un projet qui peut être directement importé dans les outils de développement WeChat.
1Veuillez compléter le Mini Programme WeChat natif basé sur le design confirmé de "Une Page".23Utilisez WXML, WXSS, JavaScript et JSON.4Placez le code dans le dossier miniprogram et fournissez app.json et project.config.json pour garantir qu'il peut être directement importé dans les outils de développement WeChat.56Implémentez les pages Bibliothèque, Enregistrement de lecture, Statistiques et Ajouter un livre.7Suivez la palette de couleurs, la mise en page et les ressources de couverture de livre originales confirmées.8Enregistrez les données localement en utilisant wx.setStorageSync pour l'instant, et lisez-les lors de la réouverture.9Ajoutez la validation des entrées, les états vides et les invites d'échec d'enregistrement.1011Vérifiez le code une fois terminé et dites-moi quel répertoire importer et comment compiler.12S'il y a des éléments que je dois configurer, veuillez les lister séparément.
Dans le projet généré par Codex, WXML gère la structure de la page, WXSS gère les styles, JavaScript gère les clics et l'enregistrement, et JSON configure les chemins des pages. Une fois que vous reconnaissez ce que fait chaque fichier, vous pouvez comprendre le répertoire livré.
Ne soyez pas submergé ici ; laissez simplement Codex résoudre le problème pour vous. Vous n'avez pas besoin de comprendre le code ; copiez simplement les invites, déposez votre maquette de conception et changez-la avec votre propre nom.
5. Mettez-le dans les outils de développement WeChat et voyez s'il fonctionne
Après avoir installé et vous être connecté aux outils de développement WeChat, sélectionnez "Importer un projet" dans le menu "Projet" et trouvez le dossier miniprogram généré par Codex.
Le nom du projet peut être ce que vous voulez. L'AppID est l'identité de ce Mini Programme : vous pouvez utiliser le compte de test fourni par l'outil pour un apprentissage local, mais vous devez passer à votre propre AppID de Mini Programme lorsque vous vous préparez à publier. Pour cet exemple, sélectionnez "Ne pas utiliser les services cloud" pour le backend.
Cliquez sur "Créer", entrez dans le projet et attendez la compilation. Une fois le simulateur à droite affiche la page, vous pouvez l'opérer directement avec votre souris. Après que Codex a modifié le code, recompilez pour voir les résultats.
Ici, vérifiez principalement trois choses : si les pages sont désalignées, si les boutons mènent aux bonnes pages et si le contenu saisi peut être enregistré. Basculez également la taille d'écran du simulateur pour voir si les titres longs, les zones de saisie et la navigation inférieure sont à l'étroit.
Si des problèmes surviennent, envoyez le texte d'erreur ou la capture d'écran à Codex, ainsi que ce que vous venez de faire et ce à quoi vous vous attendiez. Par exemple :
1Ceci est une capture d'écran d'une erreur dans les outils de développement WeChat.2Lorsque j'entre dans la page d'enregistrement depuis la page d'accueil, la couverture du livre ne s'affiche pas.3Veuillez vérifier le chemin de l'image et le moment du chargement de la page. Corrigez-le tout en conservant la mise en page existante inchangée.
Dans ce cas, nous avons effectivement rencontré un problème de chargement d'image : le code commençait à concaténer l'adresse de l'image avant que les données de la page ne soient prêtes, ce qui entraînait un nom de couverture de livre manquant dans le chemin. Dire au code d'attendre que les données soient prêtes avant d'afficher l'image a résolu le problème.
Des problèmes similaires ne vous obligent pas à étudier le code à partir de zéro, mais vous devez indiquer clairement où ils se produisent. Après la correction, revenez au simulateur, répétez l'opération et confirmez que tout est revenu à la normale.
6. Du simulateur informatique à l'aperçu mobile et à la publication
Une fois qu'il fonctionne sur l'ordinateur, vérifiez-le sur votre téléphone.
En utilisant un AppID avec les autorisations appropriées, cliquez sur "Aperçu" en haut des outils de développement, attendez la génération du code QR, puis scannez-le avec un compte WeChat autorisé. Concentrez-vous sur la taille de la police sur le téléphone, si le clavier bloque la zone de saisie lorsqu'il apparaît et si les boutons du bas sont faciles à atteindre.
Dans cet exemple, les données sont enregistrées localement, donc les enregistrements dans le simulateur ne seront pas automatiquement synchronisés avec le téléphone. Vous devez ressaisir le contenu de test sur le téléphone ; si vous souhaitez conserver des données sur plusieurs appareils à l'avenir, vous pouvez ajouter des fonctions de synchronisation cloud ou de sauvegarde.
Lorsque vous êtes prêt à ce que des amis l'essaient, cliquez sur "Télécharger" en haut des outils de développement, puis allez dans le backend du Mini Programme de la plateforme de comptes officiels WeChat. Entrez dans la gestion des versions, trouvez la version de développement correspondante, définissez-la comme version d'essai et ajoutez des membres d'essai. Les membres d'essai ont besoin des autorisations appropriées.
Une fois confirmé comme utilisable, soumettez-le pour audit dans le backend et publiez-le après approbation. Remplissez les informations du compte et les catégories de service comme demandé par le backend ; vous n'avez pas besoin de Codex pour effectuer ces opérations de compte pour vous.
Cet exemple a atteint le stade où il peut être exécuté dans les outils de développement. Les lecteurs peuvent procéder à l'aperçu mobile, au téléchargement et à la soumission pour audit en utilisant leurs propres comptes Mini Programme.
Relier l'ensemble du processus
Tout d'abord, utilisez Figma pour déterminer les pages et les sauts de boutons jusqu'à ce que vous soyez satisfait du design ; puis donnez le fichier de conception ou le lien du plan de travail à Codex pour qu'il l'écrive dans un Mini Programme WeChat ; importez-le ensuite dans les outils de développement pour simuler, exécuter et vérifier les erreurs ; enfin, prévisualisez-le sur un téléphone et téléchargez-le, auditez-le et publiez-le après confirmation.
À l'avenir, que vous créiez un outil de suivi, une application de recettes ou d'autres petits utilitaires, vous pouvez toujours suivre ce flux de travail. Si le design n'est pas satisfaisant, revenez à Figma pour l'ajuster ; s'il y a un problème fonctionnel, donnez l'opération spécifique et l'erreur à Codex, puis confirmez les résultats de la modification dans les outils de développement.
Je suis Miles, un expert en algorithmes d'IA qui est passé d'une grande entreprise technologique à un FDE. J'ai travaillé sur la R&D, l'optimisation et le déploiement d'algorithmes, ainsi que sur la formation en entreprise. Suivez-moi @miles_mazy pour grandir ensemble et gagner de l'argent ensemble.
