Tech • IA • Robotique • Jeu

VIDÉO
ENFR
Aujourd'huiJouerShortsÀ la unePour vousTopicsVidéosChaînes YTArchivesRechercheFavoris

Comment créer votre première appli avec Kimi K3 (GRATUIT)

5/10
AI CodingMikey No Code15 septembre 2026 à 14:1527:29
Lecteur audio
0:00 / 0:00

INTRO

Kimmy K3 a été utilisé pour créer de zéro un outil de suivi des finances personnelles dans le navigateur, en quatre prompts successifs, produisant une application autonome en un seul fichier avec gestion des transactions, analyses, vues mensuelles et design adapté au mobile.

POINTS CLÉS

Configuration pensée pour les débutants

La création a commencé dans un chat Kimmy vide, sans code de départ, outils de développement local ni clé API. Un simple compte gratuit dans le navigateur suffisait pour accéder à K3, sélectionné dans le menu des modèles comme option par défaut pour un projet demandant plus de contexte.

Base du suivi financier en un seul fichier

Le premier prompt a généré un outil de suivi des finances personnelles dans un unique fichier HTML utilisant Tailwind CSS et du JavaScript natif. L’application de base comprenait un en-tête avec solde courant, un formulaire de transaction, des sélecteurs de catégorie et de type, un bouton d’ajout, et une liste de transactions remplie avec des exemples fictifs.

Catégories et mises à jour instantanées des transactions

Les catégories incluaient food, utilities, salary, entertainment et transport, chacune affichée avec des badges colorés. Un test avec un exemple comme des courses a confirmé que les nouvelles transactions apparaissaient immédiatement et mettaient à jour le solde courant sans rechargement de la page.

Analyses ajoutées lors de la deuxième étape

Un deuxième prompt a enrichi l’application avec trois cartes récapitulatives pour le revenu total, les dépenses totales et le solde net. La carte du solde net changeait de style selon que le solde restait positif ou passait sous zéro, ajoutant un signal visuel immédiat au tableau de bord.

Graphique des dépenses en temps réel

L’application a aussi ajouté un graphique circulaire Chart.js montrant les dépenses regroupées par catégorie. Lorsqu’une nouvelle entrée, comme Metro card topup de 40 dans transport, était soumise, le graphique se redessinait automatiquement et les totaux se recalculaient en synchronisation.

Recherche, filtres et gestion des enregistrements

Un troisième prompt a introduit une barre de recherche et des boutons de filtre pour all, income et expenses. La recherche prenait en compte à la fois les descriptions des transactions et les noms de catégories, tandis que la logique de filtre et de recherche fonctionnait ensemble pour affiner les résultats par texte et par type de transaction.

Modification et suppression avec recalcul synchronisé

Chaque ligne a reçu des contrôles edit et delete. La modification rechargeait le formulaire avec l’entrée sélectionnée, tandis que la suppression demandait d’abord une confirmation; dans les deux cas, le solde, les cartes récapitulatives, la liste des transactions et le graphique circulaire étaient mis à jour immédiatement.

Navigation mensuelle et finition du design

L’étape finale a ajouté des contrôles pour le mois précédent et suivant, avec le mois et l’année actifs affichés entre des flèches, par exemple August 2026. Tous les éléments du tableau de bord, y compris les totaux, le graphique et la liste, étaient filtrés selon le mois sélectionné, tandis que l’interface était revue avec des fonds ardoise, des cartes arrondies, un espacement plus propre et des effets au survol.

Responsive mobile et export autonome

L’application a été ajustée pour que les cartes récapitulatives s’empilent verticalement sur les petits écrans et que les graphiques et listes se redimensionnent sans défilement horizontal. Après téléchargement de index.html, l’outil fonctionnait localement dans un navigateur standard sans serveur, commande de build ni base de données, confirmant qu’il marchait comme fichier autonome.

Le prompting étape par étape a réduit les erreurs

Le workflow par étapes a été présenté comme le facteur clé du résultat. Découper le projet en base, analyses, outils de gestion puis navigation et style finaux a réduit le risque de réponses trop volumineuses, de logique contradictoire et de code incomplet, problèmes fréquents quand trop de fonctionnalités sont demandées d’un coup.

CONCLUSION

L’exercice a montré qu’une première application complète peut être créée en langage naturel via un workflow d’IA dans le navigateur lorsque les fonctionnalités sont ajoutées par étapes claires. Le résultat le plus marquant n’était pas seulement la génération de code, mais un outil de suivi des finances personnelles terminé qui continuait à fonctionner après export comme un logiciel ordinaire.

Explique-moi
Transcription complète

Sur le même sujet : AI Coding