Google rompe las APPs profesionales por IA GRATIS en minutos 🔥

00:00:00 Il fut un temps où il fallait une tempête pour allumer un feu. Aujourd'hui, une simple

00:00:05 étincelle bien placée suffit. Wel semblait vaciller sous le poids des mises à jour constantes de

00:00:10 ses concurrents, mais en coulisses, l'entreprise préparait discrètement son coup de maître. Duel vient de

00:00:16 révolutionner le développement d'applications avec deux de ses produits phares, optimisés par Gemini :

00:00:20 Stitch 2.0, désormais doté d'agents, et Google AI Studio, enrichi de nouvelles intégrations.

00:00:26 Je les utilise quotidiennement depuis la sortie de ces mises à jour et, honnêtement,

00:00:30 leur combinaison permet de réaliser le travail d'une équipe entière.

00:00:39 Pour vous le prouver, nous allons passer en revue l'intégralité du nouveau flux de travail de création d'applications : depuis

00:00:43 Idealla, en passant par la création automatique du design, la mise à disposition fonctionnelle, l'ajout de bases de données et

00:00:48 d'inscriptions, l'intégration des liens de paiement, la publication, et même la mise à l'échelle et la distribution. Le plus intéressant, c'est que

00:00:54 vous pouvez faire tout cela dès aujourd'hui, car grâce aux nouvelles mises à jour de Gemini,

00:00:58 créer une application professionnelle et évolutive est plus simple que jamais, et c'est

00:01:05 entièrement gratuit. Tentant, n'est-ce pas ? Voyons la première étape.

00:01:15 Dans cette première étape, nous allons transformer une idée d'application en

00:01:19 une interface visuellement attrayante. Grâce à une récente

00:01:24 mise à jour de Yemini, plus besoin de cliquer ! Pour voir comment cela fonctionne, passons

00:01:28 à Stitch 2.0, la nouvelle plateforme, entièrement repensée comme vous pouvez le constater

00:01:34 . Mais il ne s'agit pas d'une simple refonte. En cliquant sur la

00:01:39 section « Nouveau Stitch », nous découvrons cinq améliorations majeures : l'utilisation

00:01:44 du canevas IA natif, la création de tous les designs avec un agent disposant de

00:01:49 tout le contexte, même par appel vocal interactif,

00:01:55 et la génération plus rapide de prototypes, ainsi que la conception complète du système. Pour voir

00:02:01 concrètement ce que cela signifie, retournons à Stitch. Je vais

00:02:06 lancer un appel pour vous faire part d'une idée qui me trotte dans la tête. Bonjour. Dis,

00:02:11 euh, je voulais te demander si on pouvait avoir cette conversation en espagnol ? Bien sûr. Qu'est-ce

00:02:15 que tu as en tête ? J'ai une idée qui pourrait être très intéressante.

00:02:21 Il s'agit de Nutravi, une application qui offrirait

00:02:25 aux utilisateurs une vue d'ensemble complète de leur alimentation. Elle

00:02:31 pourrait inclure des régimes axés sur la forme physique et même être

00:02:36 collaborative, permettant le partage de régimes et de recettes. Mais ce n'est pas tout.

00:02:42 J'aimerais aussi une section avec une carte des restaurants à proximité,

00:02:47 ou des restaurants recommandés par des amis, et surtout, la possibilité de les sélectionner en fonction

00:02:53 de leurs plats. J'adore cette vision globale de

00:02:59 la nutrition. C'est une idée géniale ! J'adore Nutravi ! Et quelles interfaces

00:03:06 seraient essentielles pour démarrer ce projet ? Je pense qu'il faudrait

00:03:13 principalement une page d'accueil avec toutes les informations sur les régimes,

00:03:18 les objectifs, etc. Mais j'aimerais aussi voir d'autres écrans, comme une

00:03:23 section communautaire collaborative où l'on pourrait ajouter des personnes pour consulter leurs régimes alimentaires,

00:03:27 leurs restaurants préférés, etc. En plus de cela, j'aimerais que vous choisissiez deux

00:03:33 autres écrans à la fois esthétiques et fonctionnels. Un flux de travail optimal. Nous pourrions

00:03:39 créer un écran de profil personnalisé et un écran de suivi des progrès visuellement attrayant

00:03:46 . Ça vous convient ? Parfait pour moi. Créons-le. Je clique ici pour arrêter l'enregistrement,

00:03:51 car je ne veux pas qu'il y ait de modifications pendant mes explications. Mais remarquez comme

00:03:56 je suis déjà en train de créer le prototype complet de ce dont nous parlions. Je pourrais même

00:04:02 poursuivre la discussion ici pour demander d'autres modifications, idées ou recommandations. Mais

00:04:07 nous ne parlons plus d'une intelligence artificielle où l'on écrit une invite et…

00:04:10 Cela ne se contente pas de nous donner un résultat ; c'est comme si nous discutions

00:04:15 en temps réel avec un concepteur web et d'applications. Non seulement la conversation est enregistrée, mais

00:04:21 toutes les modifications sont également mises en œuvre. D'ailleurs, pendant que je vous explique cela, remarquez comment

00:04:26 ils viennent de créer l'intégralité du design du système. Je vois qu'ils ont défini une série de

00:04:32 couleurs principales, ici le vert, des couleurs secondaires et d'autres couleurs que l'

00:04:37 application utilisera. Je vois également qu'ils ont ajouté différentes polices pour l'en-tête,

00:04:42 le corps du texte, les étiquettes, l'apparence des boutons, leurs couleurs d'affichage,

00:04:48 les icônes, la barre de recherche, etc. Grâce à toutes ces informations,

00:04:54 je conçois ici l'application complète en suivant

00:04:59 les instructions système qu'ils ont créées. Ici, comme vous pouvez le voir, nous avons trois options : l'

00:05:03 écran d'accueil, que nous avons déjà vu, et deux autres. Pour y voir

00:05:09 plus clair, je vais cliquer directement sur cette icône afin de générer un prototype. Je vais donc

00:05:14 cliquer dessus, et quelques secondes plus tard, j'aurai cette application qui

00:05:19 simule les fonctionnalités pour que nous puissions voir comment le design fonctionnerait. Ici, nous pouvons voir cet

00:05:24 écran d'accueil avec nos niveaux d'énergie, d'hydratation et d'apport alimentaire, ainsi que les

00:05:29 principaux macronutriments. Nous avons un autre onglet, « Communauté », où nous pouvons voir toutes les personnes qui

00:05:34 interagiront avec l'application. Nous pouvons également voir une section de progression affichant notre

00:05:39 progression personnelle et une page de profil vraiment réussie.

00:05:45 Et comme vous le voyez, il n'a fallu que quelques secondes pour obtenir un prototype

00:05:50 fantastique, sans même avoir à taper ou cliquer sur un seul mot.

00:05:56 Nous avons simplement interagi, et l'agent s'est chargé du reste. Mais nous pouvons

00:06:01 l'améliorer et même apporter des modifications plus importantes. Nous pourrions le faire en cliquant sur

00:06:05 la section « Modifier » pour modifier chacune des sections souhaitées, bien que je

00:06:10 vais effectuer des changements plus significatifs. Pour ce faire, je vais revenir en arrière et, même si je

00:06:15 pourrais vous demander de modifier un élément précis que je sélectionne pour que vous compreniez le contexte,

00:06:20 je vais plutôt vous compliquer la tâche en apportant des modifications plus globales. Je reprends donc

00:06:25 l'appel et je vous explique. Hé, de quoi distinguons-nous les points suivants ? Bonjour. N'oubliez pas

00:06:31 de toujours me parler en espagnol ? Bien sûr, je parlerai en Perfecto. Bon, écoutez, deux

00:06:37 points importants. J'aime beaucoup le design, mais il manque une fonctionnalité très intéressante :

00:06:42 les cartes et les restaurants, d'accord ? Pouvoir trouver des restaurants sur une carte. Je

00:06:47 ne sais pas si je devrais l'intégrer à un cinquième écran ou si on pourrait l'ajouter à l'un des

00:06:52 écrans existants. Je ne sais pas si ce serait l'écran de la communauté ou l'écran d'accueil. Qu'en pensez-vous ?

00:06:56 On pourrait créer un nouvel écran dédié aux cartes et aux restaurants. Ce serait génial. Cela permettrait de

00:07:03 structurer la navigation et de la rendre beaucoup plus intéressante. D'accord, voyons, faisons cela. Qu'en

00:07:09 pensez-vous ? Commençons donc par configurer ces cinq écrans. Cependant, j'aimerais que vous

00:07:14 recommenciez, car je souhaite l'adapter à un ordinateur ; autrement dit, je voudrais

00:07:18 une version verticale plus grande. Pourriez-vous recommencer ? Je vais raccrocher et

00:07:24 regarder en bas à gauche ; si je clique, je vois que je vais créer

00:07:29 ces cinq écrans. Quelques secondes plus tard, et du premier coup, tous les écrans seront prêts.

00:07:35 Voici, par exemple, l'écran de la communauté, qui prend en compte tous les détails,

00:07:39 comme la possibilité de publier, la présence de restaurants à proximité et d'autres informations,

00:07:44 telles que le partage de recettes avec leurs macronutriments. Ensuite, nous avons la

00:07:49 page d'accueil, assez simple, mais fonctionnelle, avec des indicateurs clés, des recommandations,

00:07:55 des recettes, etc. Puis, nous avons ce qui serait le profil utilisateur, mais adapté aux ordinateurs.

00:08:01 Avant-dernier, nous avons l'écran de progression, qui affiche également des indicateurs afin que nous puissions…

00:08:06 Pour garder une trace. Et enfin, voici la carte que nous avons demandée, où nous pouvons

00:08:11 sélectionner les restaurants qui correspondent à notre régime alimentaire actuel. Voyez,

00:08:17 rien qu'en parlant, nous avons pu effectuer un changement global, même si nous pouvons aussi

00:08:22 faire des ajustements précis. Pour cela, j'ai dézoomé un peu, car nous allons demander une dernière

00:08:27 modification avant de rendre le tout fonctionnel, afin que vous puissiez voir comment nous pouvons faire des choses spécifiques. Pour ce faire,

00:08:32 je vais rejoindre un appel, et pendant l'appel, je cliquerai sur différentes zones pour que vous puissiez

00:08:36 voir ce que je veux changer. Bonjour. Écoutez, parlons en espagnol, et je vais aussi

00:08:43 demander quelques modifications car, bien que les différents écrans que vous avez créés pour

00:08:48 l'application de bureau soient très bien, remarquez que sur des écrans comme l'écran de la communauté,

00:08:53 qui est celui-ci, et l'écran d'accueil, nous avons en fait deux menus. Nous en avons un en haut

00:08:59 et un autre sur le côté. Je garderais l'un des deux, celui que vous jugez le plus approprié. Par ailleurs

00:09:03 , je pense qu'il serait intéressant que la page « Progression » affiche des indicateurs et

00:09:10 des graphiques plus percutants et pertinents pour

00:09:15 les personnes au régime, afin qu'elles puissent mieux contrôler leur

00:09:19 alimentation. De plus, j'aimerais que toutes les interfaces de la

00:09:23 version bureau soient en espagnol. Est-ce possible ? Bien sûr.

00:09:28 C'est une excellente idée. La simplification des menus rendra l'interface plus fluide et élégante

00:09:33 , et les indicateurs de progression seront bien plus parlants. Je vais donc apporter les modifications que

00:09:39 vous avez mentionnées. Et, surprise, quelques secondes plus tard,

00:09:44 nous avions déjà une copie de chaque écran. Voici la

00:09:48 version anglaise, et à droite, la version espagnole. Le menu n'est plus

00:09:53 dupliqué. Il est simplement affiché à gauche, car je

00:09:57 leur avais signalé sa duplication dans la version originale ; ils ont donc pris en compte cette modification. Voilà, la

00:10:00 fonctionnalité de changement de langue est désormais disponible sur tous les écrans. De plus, nous avons amélioré

00:10:06 les graphiques, très utiles pour le suivi nutritionnel

00:10:11 , afin de les rendre plus attrayants. Maintenant que tout est en place, je

00:10:17 peux sélectionner les écrans de mon application,

00:10:22 ici les cinq derniers en espagnol. Je vais également importer la

00:10:28 maquette que j'ai créée précédemment. Même si je pourrais la modifier entièrement,

00:10:32 j'aime bien le résultat. Grâce à tout cela, nous serons

00:10:37 prêts à la rendre fonctionnelle en un temps record. Regardez tout ce que nous avons pu concevoir jusqu'à présent,

00:10:41 simplement grâce à une conversation et un outil unique. Il est plus important que jamais de choisir

00:10:46 le modèle idéal et de savoir comment interagir avec lui. Mais face à la multitude de modèles d'IA,

00:10:52 lequel choisir ? Pour répondre à cette question, je vous présente

00:10:57 Mamuth AI, un outil d'IA qui regroupe tous les

00:11:01 modèles haut de gamme. D'ici, vous pourrez accéder aux meilleurs modèles sans avoir à

00:11:06 vous inscrire séparément à chaque service, notamment des modèles de référence comme Cloud, OpenI,

00:11:11 Yemini et bien d'autres. Ils proposent également d'autres formats tels que la génération d'images,

00:11:17 des modèles de recherche, des modèles de raisonnement et des modèles légers à réponse rapide.

00:11:22 Comme vous pouvez le constater, des modèles vidéo ont également été ajoutés. Il vous suffit de cliquer sur l'un

00:11:27 d'eux, d'ajouter une promotion et de valider : la vidéo s'affichera directement ici. Ainsi, vous

00:11:33 pouvez centraliser tous les modèles grâce à un

00:11:39 abonnement unique et sans engagement, à partir de 10 € par mois. Mamai, sponsor de cette vidéo, a

00:11:45 fourni un lien spécial (que je vous joins dans la description ci-dessous) pour que vous puissiez l'essayer

00:11:49 vous-même. Passons maintenant à la deuxième étape de la création de notre application.

00:11:58 Nous allons maintenant transformer toutes les maquettes créées à l'étape précédente

00:12:02 en une application pleinement fonctionnelle. Nous allons non seulement rendre chaque menu

00:12:06 fonctionnel, mais aussi l'adapter en ajoutant

00:12:11 des bases de données, des enregistrements, etc. Et tout cela en un seul clic. Pour ce faire, nous devons

00:12:16 passer à la nouvelle version de Google AI Studio Build. Cette plateforme

00:12:22 peut sembler similaire à la précédente, mais elle est différente car elle intègre

00:12:27 de nouvelles plateformes puissantes comme Farbase, un outil qui nous permet d'

00:12:32 ajouter des bases de données et l'authentification en un seul clic. Nous allons donc

00:12:37 importer tout ce que nous avons conçu dans Stitch 2.0 dans cette nouvelle version de Google AI

00:12:43 Studio pour le rendre fonctionnel avec des bases de données, des enregistrements, etc. Pour cela, je

00:12:49 retourne dans Stitch. Je vais sélectionner les cinq écrans que je

00:12:55 souhaite créer, puis cliquer sur le bouton Exporter. Nous conservons l'

00:13:01 option Google AI Studio, cliquons sur le bouton « Créer avec Google AI Studio », et observons

00:13:08 ce qui se passe : tout ce qu'il a créé est automatiquement joint,

00:13:13 y compris chaque image de chaque maquette, le code HTML associé à chaque image, et

00:13:19 nous pourrons ajouter d'autres informations ultérieurement. Imaginons que je

00:13:24 veuille joindre cette section de conception système, par exemple. Je peux faire

00:13:29 un clic droit, sélectionner l'option « Télécharger », et une fois le point MD obtenu,

00:13:35 si je clique dessus, je peux voir la décomposition complète de la conception, y compris les composants,

00:13:42 les polices, les couleurs, etc. À partir de là, je peux également cliquer sur l'icône « + »,

00:13:46 sélectionner « Importer des fichiers », ouvrir le fichier, et il sera également joint. Ainsi,

00:13:53 Google AI Studio dispose de tout le contexte nécessaire pour créer notre application. Il

00:13:58 ne nous reste plus qu'à ajouter les fonctionnalités souhaitées. Pour ce faire,

00:14:02 notez qu'à partir de là, un simple clic dans cette section permet déjà

00:14:07 de lier Fire Store pour la base de données et Firebase pour l'authentification. En plus de cela, je pourrais

00:14:12 ajouter de la musique et d'autres éléments, mais je vais le laisser tel quel, car je n'ajouterai

00:14:17 que le strict nécessaire : la recherche d'informations sur Google, l'utilisation

00:14:24 de Google Maps pour la section restaurants que nous avons ajoutée précédemment, et

00:14:28 l'intelligence artificielle de Gemini. Je le sélectionne donc,

00:14:33 et dans la section des invites, même si je pourrais le laisser tel quel, je peux aussi cliquer sur le

00:14:37 microphone pour ajouter d'autres éléments. Voyez, en plus de créer ces designs visuellement,

00:14:43 une application interactive, je souhaite que chaque bouton et chaque menu soit parfaitement fonctionnel.

00:14:49 Notez également que pour la section cartes, vous avez un écran, c'est-à-dire une page spécifique où

00:14:54 s'afficheront les restaurants et la carte elle-même. Intégrez-le donc dans cette section, et pour le reste,

00:14:59 comme je l'ai mentionné précédemment, assurez-vous qu'il soit parfaitement fonctionnel tout en conservant exactement le

00:15:05 design visuel associé à cette conversation. Je fais une pause ici, et quelques secondes plus tard, regardez le résultat

00:15:11 . Au lieu d'une simple transcription, tout a été réinterprété

00:15:16 en une invite parfaitement structurée. Il suffit de cliquer

00:15:21 sur « Générer » pour que Google Studio lance le traitement. Pendant le développement,

00:15:28 remarquez comment le menu permettant d'activer les bases de données d'identification avec Firebase s'est ajouté automatiquement

00:15:33 . Je dois simplement sélectionner l'

00:15:37 emplacement de stockage. Los Angeles apparaît par exemple, mais je vais

00:15:41 choisir un emplacement plus proche, comme l'Allemagne. Je clique sur « Activer », et en

00:15:48 un clic, tout est prêt pour l'intégration. Il ne reste plus qu'à

00:15:53 patienter ; quelques minutes plus tard, le système nous indiquera que l'implémentation est terminée.

00:15:58 Le design a été créé avec Urabi, et les modifications suivantes y ont été apportées pour le rendre fonctionnel. Pour

00:16:03 mieux visualiser le tout, je vais cliquer sur ce bouton. Dès mon arrivée sur la page, je vois un

00:16:09 écran de connexion que je peux utiliser directement avec un compte Google.

00:16:14 YiniNine 3 a réinterprété cette fonctionnalité à partir d'un design de Way Studio, car nous ne disposions pas de ce design.

00:16:20 Nous pourrions cependant retourner chez Stitch, leur demander de créer cet écran et ainsi

00:16:25 gérer également le design final qui sera utilisé pour la connexion et l'inscription.

00:16:30 À ce propos, notez que grâce à la technologie Firebase, toutes

00:16:35 les données sont désormais protégées par chiffrement. Pour vérifier que cela fonctionne, je vais cliquer sur «

00:16:39  Continuer avec Google ». Une fenêtre contextuelle s'ouvre, et lorsque je sélectionne mon compte Google, vous verrez que

00:16:45 nous sommes maintenant sur le site web. Je vais directement accéder à la page d'accueil.

00:16:51 On y retrouve les thèmes du jour : consommation d'énergie, macronutriments, hydratation

00:16:56 , ainsi qu'une recette d'exemple et des conseils. C'est quasiment identique à

00:17:03 la version originale, avec les mêmes blocs. On trouve également

00:17:08 un onglet Communauté pour les interactions. La carte, qui

00:17:14 affiche quelques lieux à titre d'exemple, nécessite une clé API Google Maps. Cependant,

00:17:19 nous pourrions nous la procurer pour la rendre visible, ou même développer

00:17:24 une version sans API. Nous y reviendrons plus tard.

00:17:29 En continuant d'explorer l'application, on découvre la section Progression, qui, comme

00:17:33 vous pouvez le constater, est une copie conforme de la version originale. On y trouve l'évolution du poids,

00:17:38 la précision nutritionnelle, l'adhésion au régime, les objectifs atteints et le conseil du jour

00:17:44 . La section Profil, quant à elle, présente quelques

00:17:49 différences par rapport à la version originale. Nous avons ensuite une configuration qui n'était pas prévue initialement,

00:17:54 mais Gemini 3 l'a parfaitement réinterprétée et intégrée à la conception globale que nous avions déjà créée

00:18:00 pour générer ses propres écrans. En bas à gauche, un

00:18:05 bouton « Enregistrer un aliment » permet, en cliquant dessus, d'ouvrir une fenêtre contextuelle où je peux scanner

00:18:09 l'aliment, l'ajouter manuellement ou simplement sélectionner une suggestion.

00:18:15 Ainsi, nous ne nous contentons plus de coder à partir d'un script ;

00:18:20 nous pouvons concevoir l'application que nous avions imaginée, en gardant le contrôle, et

00:18:25 créer ensuite chaque écran de manière fonctionnelle et stratégique. Pour en revenir à l'outil,

00:18:29 notez que de nouveaux éléments sont apparus, et qu'il les gère très bien,

00:18:34 car ils n'étaient pas prévus au départ. Par exemple, si je continue et sélectionne

00:18:37 l'avocat, remarquez comment le poids moyen s'affiche de manière très visuelle, et que

00:18:42 nous pouvons le modifier, ainsi que les macronutriments de cet aliment. Je clique sur

00:18:46 « Continuer », puis je peux l'enregistrer de manière très simple et visuelle. Mais si vous regardez

00:18:53 les détails, vous constaterez que l'application a apporté plusieurs modifications par rapport aux designs originaux, même si

00:18:58 je ne l'avais pas configurée. Par exemple, sur la gauche, il y a

00:19:02 un mode sombre, que j'apprécie personnellement, mais si vous regardez Stitch, vous verrez

00:19:06 que cette bande était blanche, alors que le reste des éléments était exactement les mêmes.

00:19:11 C'est généralement un peu aléatoire, car parfois, lorsqu'on demande à l'application de reproduire

00:19:15 le design, elle peut apporter plus de modifications que prévu. Sachez toutefois qu'il est toujours possible de forcer une

00:19:21 reproduction plus fidèle. Pour vous le montrer, j'ai recréé l'application avec un autre compte, et

00:19:27 vous remarquerez que la page d'accueil est complètement différente. Ensuite, la section Communauté

00:19:31 est elle aussi très différente. La carte est également très différente de ce que nous avions. Il est vrai

00:19:37 que je la préfère même un peu, mais ce n'était pas le design que nous avions proposé, tout comme

00:19:41 la barre de progression et l'écran de profil. Et c'est un point que nous devrions corriger si nous voulions…

00:19:47 Bon, on peut toujours itérer. Pour ce faire, revenons à l'application qui a

00:19:51 le mieux fonctionné au premier essai, celle-ci, et je vais la déminimiser. Remarquez que

00:19:57 nous pouvons ajouter des modifications via la section Pro. Imaginez que mon écran d'accueil soit différent.

00:20:02 Je peux alors aller sur l'écran d'accueil, faire un clic droit, copier le code,

00:20:07 le coller ici, et de même, faire un clic droit et simplement copier

00:20:12 pour que l'image soit déjà jointe lorsque je clique sur coller. Ainsi

00:20:18 , nous pouvons indiquer à l'application que l'écran d'accueil doit être identique aux pièces jointes,

00:20:23 et donc forcer l'affichage s'il diffère légèrement du design original.

00:20:28 En vous expliquant cela, je me suis aperçu que le menu a également été déplacé de la gauche

00:20:33 vers le bas, mais je pense que c'est une bonne chose, car cela permet une adaptation

00:20:37 à plusieurs appareils. Pour vérifier que l'adaptation a bien été effectuée, je vais

00:20:41 zoomer à nouveau. Nous avons déjà vu le rendu sur ordinateur, je vais donc

00:20:46 passer à la version mobile. Remarquez qu'un simple clic modifie instantanément

00:20:51 toute la conception, y compris les menus en bas de l'écran : Communauté, Cartes, Processus et

00:20:58 Profil. De retour à l'écran d'accueil, je retrouve ce bouton en

00:21:02 bas à droite, me permettant d'ajouter des aliments. Pour le vérifier,

00:21:07 je peux également faire pivoter l'écran. Je peux aussi voir le rendu

00:21:12 sur tablettes, très similaire à la version ordinateur. Comme

00:21:17 vous le voyez, même sans aucune indication de notre part concernant

00:21:22 l'affichage sur appareils mobiles, Gemini l'a réinterprété, adapté et optimisé

00:21:28 pour chaque appareil. L'intelligence artificielle nous offre aujourd'hui des possibilités immenses

00:21:32 . Cette technologie progresse à un rythme toujours plus soutenu, tout en simplifiant

00:21:37 les processus. Pour rester à la pointe et optimiser vos processus, découvrez

00:21:42 mon programme intensif d'IA. C'est pourquoi nous lançons

00:21:47 la dernière édition de notre programme quinquennal. Les inscriptions sont ouvertes

00:21:53 jusqu'au 30 avril. Les cours débuteront le

00:21:58 6 mai et vous bénéficierez de deux mois de

00:22:04 formation personnalisée et pratique en visioconférence. Je répondrai à toutes vos questions. Sur le site web, vous

00:22:08 trouverez toutes les informations détaillées, ainsi que des témoignages d'anciens élèves

00:22:14 . Vous pourrez ainsi découvrir leurs impressions sur nos cours.

00:22:20 Le lien se trouve dans la description ci-dessous. Maintenant que nous avons abordé ce point, passons à l'étape suivante : l'amélioration de notre application.

00:22:28 Tout ce que nous avons accompli dans Google Studio est considérable ;

00:22:32 nous avons transformé une simple maquette en une application fonctionnelle. Pour

00:22:37 aller plus loin, la solution idéale serait d'utiliser une plateforme comme Google Antigravity,

00:22:41 que vous pouvez télécharger gratuitement.

00:22:46 En cliquant dessus, vous verrez qu'elle est disponible pour Mac, Windows et Linux. Nous allons donc

00:22:51 télécharger l'intégralité du projet créé dans Google AI Studio afin de poursuivre son développement

00:22:56 directement depuis Google Antigravity. Pour ce faire, dans Studio, cliquez sur la

00:23:01 section Code, puis sur l'icône de téléchargement.

00:23:06 Le projet complet sera alors téléchargé sous forme de fichier compressé. Il

00:23:11 vous suffit ensuite de cliquer dessus pour l'extraire. Une fois le dossier

00:23:16 contenant tous les fichiers d'Antigravity ouvert, connectez-

00:23:21 vous et cliquez sur Ouvrir un dossier. Sélectionnez le dossier que vous venez de télécharger et d'extraire

00:23:26 , puis cliquez sur Ouvrir pour accéder à votre projet.

00:23:31 Vous pourrez alors, en plus de pouvoir continuer à interagir avec les agents et les différents modèles,…

00:23:37 Nous pourrons continuer à itérer, car nous disposons également de fonctionnalités avancées comme

00:23:42 les MCP. MCP signifie Model Context Protocol (Protocole de contexte de modèle) et permet d'interconnecter

00:23:48 votre outil avec des modèles ou d'autres outils d'IA de manière quasi native

00:23:53 et en quelques clics. Pour voir comment procéder, cliquez sur les trois points,

00:23:58 sélectionnez Serveurs MCP, et vous verrez alors une liste d'outils que nous pouvons

00:24:04 officiellement interconnecter. Si un outil n'est pas listé,

00:24:09 vous pouvez toujours demander à un tiers de le connecter à votre projet via MCP, et

00:24:13 nous pourrons ensuite l'interconnecter. Dans cet exemple, j'utiliserai

00:24:18 Strike, un outil officiel qui nous permet d'ajouter des passerelles de paiement à notre application afin

00:24:23 de la monétiser et de proposer différents abonnements payants. Pour l'utiliser, je

00:24:28 clique sur le bouton Installer. On me demande une clé secrète ; je

00:24:33 clique donc ici. Et pendant que j'y suis, je dois copier la clé secrète. Je vais donc

00:24:37 cliquer sur la deuxième clé, la coller dans cette section et l'enregistrer. Ensuite,

00:24:42 si je clique sur la section « Outils », un message m'indique que cette fonctionnalité est disponible et qu'elle contient tous les

00:24:46 paramètres nécessaires pour gérer Strike. Je vais donc fermer

00:24:51 cette fenêtre, retourner à la section « Personnes », sélectionner le mode rapide et le modèle Gemini 3 Flash (

00:24:58 même si cela fonctionne avec n'importe quel modèle), puis indiquer ce qui suit : «

00:25:02  Dans ce projet, vous avez mon application Nutravi, mais j'aimerais maintenant ajouter une option premium

00:25:08 pour les utilisateurs payants. Pour cela, j'aimerais que vous ajoutiez une section avec plusieurs

00:25:13 formules d'abonnement et que vous configuriez tout cela dans Strike afin que les utilisateurs puissent payer ces produits. »

00:25:18 Je mets l'enregistrement en pause. Je vais envoyer la requête, et l'analyse commencera ici pour générer le code. Un peu

00:25:25 plus tard, nous devrions voir Strike interagir avec les MCP pour gérer notre

00:25:30 compte Stripe. Ici, je vois comment le système crée de nouveaux produits, fixe un

00:25:35 prix et effectue toute la configuration. Un peu plus tard,

00:25:39 il m'indique avoir configuré la section premium de l'application Nutravi. Plus précisément,

00:25:44 il nous informe avoir configuré deux produits : Nutravi Plus, un abonnement mensuel à 9,90 $, et

00:25:49 Elite, un abonnement annuel à environ 100 $ par an avec une réduction de 20 %.

00:25:56 Le système détaille ensuite les tâches effectuées ; je vais donc

00:26:01 appliquer les modifications. Mais avant cela, je retourne dans Straight. Cliquons

00:26:06 sur le catalogue de produits et observons la configuration des abonnements :

00:26:12 un paiement annuel automatique et un paiement mensuel automatique, sans avoir à accéder

00:26:17 à cette plateforme. Pour visualiser le résultat, je vais

00:26:22 ouvrir l'application. Ensuite, je vais exécuter différentes commandes. Pendant

00:26:27 ce temps, notez que Stripe est déjà installé (voir la

00:26:32 section Serveurs MCP). D'autres passerelles de paiement, comme PayPal, sont également disponibles

00:26:38 . Après l'ouverture, même si l'application ressemble à celle de

00:26:43 Google Assistant Studio, l'URL indique qu'elle s'exécute en local. Une

00:26:49 nouvelle option « Premium » apparaît ; je clique dessus. Plusieurs

00:26:54 formules s'affichent. L'affichage de la formule mensuelle nécessite quelques améliorations,

00:26:58 mais elle est déjà configurée : 9,99 $ par mois avec tous les

00:27:04 avantages. La formule Nutravi Elite, à 99,99 $ par an,

00:27:11 offre des avantages supplémentaires. Pour vérifier son bon fonctionnement, je vais simuler

00:27:15 l'achat de l'abonnement annuel. Je clique donc sur « Démarrer maintenant ». Et à partir d'ici,

00:27:20 vous remarquerez que cela nous mènerait directement à cette page, actuellement en phase de test mais

00:27:26 pleinement fonctionnelle sur Strive. Pour vérifier si cela fonctionne, je saisis une adresse e-mail.

00:27:30 Je saisirais les informations de ma carte bancaire de test, et si je cliquerais sur « Payer et m'abonner »,

00:27:36 le processus démarrerait. Peu après, le message « Merci de votre abonnement » s'afficherait. Ainsi, même

00:27:42 dans un environnement de test (puisque c'est le compte que j'utilise pour éviter toute confusion

00:27:47 avec le compte de production), nous pourrions itérer et tester. Si

00:27:52 cela fonctionnait, il nous suffirait de modifier la clé secrète pour utiliser celle de notre compte de production et

00:27:57 d'activer facilement une passerelle de paiement.

00:28:03 Nous pourrions également ajouter d'autres fonctionnalités directement à notre application,

00:28:07 mais nous allons maintenant voir comment la publier gratuitement.

00:28:12 Deux méthodes s'offrent à nous. D'une part, directement depuis Qay Studio, où se trouve notre projet,

00:28:18 nous pourrions cliquer sur « Partager » si nous voulions simplement qu'un

00:28:23 collègue ou un ami puisse le voir sans le publier. D'autre part,

00:28:28 nous pourrions publier l'application via cette même section afin que chacun puisse accéder à l'URL et

00:28:34 prévisualiser notre travail, sans pouvoir le modifier. Pour

00:28:39 ce faire, nous pourrions cliquer sur « Démarrer », mais notez que même si c'est gratuit,

00:28:44 un moyen de paiement serait demandé. En effet, si l'application ou le site web que nous créons génère

00:28:49 beaucoup de trafic, nous serions facturés en fonction de ce trafic.

00:28:53 Cependant, avec Google Apps Studio, nous aurons une plus grande flexibilité.

00:28:59 En cliquant sur les trois points et en sélectionnant « Serveurs MCP », nous pourrions également installer directement

00:29:04 le serveur Firebase. Je l'ai déjà installé, et il inclut plus de 40 outils pour

00:29:10 tout gérer. Ainsi, entre autres, je peux dire : « Je souhaite que vous

00:29:15 publiiez gratuitement mon application locale sur une

00:29:21 URL Farbase publique à des fins d'enregistrement. » Nous l'enverrons, et je commencerai ensuite à travailler avec cet autre

00:29:26 serveur Farbase MCP. Pendant le traitement, n'oubliez pas que Gel Antigravity vient de

00:29:32 réduire considérablement les limites d'utilisation gratuite. Donc, si vous souhaitez découvrir comment supprimer ces limites

00:29:36 et même utiliser un agent plus avancé, n'oubliez pas que j'ai déjà abordé

00:29:41 tous ces points en détail ici. Dans un instant, l'application sera opérationnelle et

00:29:47 accessible via une URL publique gratuite, pour tous.

00:29:58 Terminons par la dernière section. Nous allons voir comment distribuer

00:30:01 l'application que nous avons créée. Pour ce faire, Yemini fournit un

00:30:05 écosystème complet permettant de créer différents éléments qui nous aideront à atteindre cet objectif. Pour

00:30:11 cela, je vous recommande de commencer par retourner sur Stitch afin

00:30:15 de leur demander la documentation, quelle que soit la page sur laquelle nous allons travailler. Je vais donc

00:30:20 sélectionner toutes les pages utilisées pour mon application, c'est-à-dire

00:30:24 celles-ci, et dans la section des invites, je vais demander la génération d'un document détaillé contenant

00:30:30 toutes les informations relatives à mon application et à sa conception. Je clique sur « Générer », et un peu plus tard,

00:30:35 dans la section de chat, je vois apparaître tout ce qui a été créé dans le document : dans ce cas précis, la

00:30:39 vision produit, la stratégie, la conception, l’architecture, les composants et les prochaines étapes. En fait,

00:30:45 je vois bien ce document, alors je vais zoomer un peu. Regardez toutes

00:30:50 les informations : la vision produit, la stratégie vue précédemment,

00:30:55 l’architecture des écrans, le cercle de bien-être, et bien d’

00:31:00 autres détails que nous pouvons maintenant télécharger. Avec ce document sur notre appareil,

00:31:06 ainsi que la conception du système téléchargée, nous pouvons commencer à créer des ressources. Pour ce faire,

00:31:12 à l’aide d’outils comme Notebook LM, nous pouvons glisser-déposer les deux documents.

00:31:17 Nous pouvons également le faire depuis Google AI Studio ou même

00:31:23 depuis Google Antigravity, par exemple : « Je voudrais que vous créiez un document pour moi. »

00:31:29 Voici un résumé de mon application Nutravi. Je l'utiliserai principalement pour le partager

00:31:33 avec l'équipe et les investisseurs, et pour promouvoir mon application. Il doit donc inclure tous les détails

00:31:39 la concernant : sa description, ses fonctionnalités, etc. Je l'enverrai, et

00:31:44 peu après, j'aurai ce résumé que je pourrai copier, retourner dans mon bloc-notes,

00:31:50 cliquer sur « Ajouter des sources », coller le texte et l'insérer. Cela nous fournira cette

00:31:57 source d'information. Nous pourrions également demander d'autres types de documents selon

00:32:01 différentes approches, mais nous travaillerons avec cette documentation limitée afin que vous puissiez voir tout ce que

00:32:06 nous pouvons faire. Pour commencer, je vais renommer l'application en Appnutravi.

00:32:11 À partir de là, comme vous pouvez le constater, nous pouvons créer des présentations et des rapports complets pour

00:32:17 poursuivre notre travail sur, par exemple, la stratégie produit et une analyse plus approfondie.

00:32:22 Ensuite, nous pourrons retravailler l'application pour l'améliorer en fonction de ces recommandations et

00:32:28 des ressources que nous aurons créées. Enfin, pour revenir à la section sur la communication, notez que

00:32:33 nous pourrions également créer des infographies. Si je clique ici, je peux définir le format,

00:32:38 obtenir une génération détaillée et configurer le logiciel pour qu'il m'explique pourquoi s'abonner à Nutravi est avantageux. J'ajouterai

00:32:43 entre parenthèses qu'il doit me convaincre. Je clique sur « Générer ». Pendant le traitement, n'oubliez

00:32:48 pas que nous pouvons également lier toutes les informations de Notebook LM à Gemini

00:32:53 pour utiliser Canvas. Pour ce faire, dans Gemini, je clique sur le signe plus. Je sélectionne

00:32:58 « Importer Notebook LM », je clique sur mon application Nutravi, puis sur « Ajouter ». Ensuite, dans

00:33:04 la section Canvas, je peux indiquer une action, par exemple : « Créer un tableau de bord interactif

00:33:10 pour mon équipe marketing afin qu'elle puisse visualiser clairement les différentes

00:33:15 actions de prospection possibles lors du lancement de notre application. » Je clique sur « Envoyer ». Pendant le

00:33:20 traitement, je retourne dans Notebook LM et je constate que tout est déjà créé. Ainsi, si je clique sur

00:33:25 l'infographie, par exemple, je peux voir une image récapitulative des points clés qui

00:33:31 justifient l'abonnement à Nutravi. Mais, de manière plus détaillée, nous avons également

00:33:37 la présentation. En l'agrandissant, nous découvrons une présentation complète

00:33:42 de l'application Nutrabi, mettant en avant tous ses avantages et ceux

00:33:48 de l'écosystème Nutrabi Wellness. Quel serait le pilier fondamental du

00:33:53 suivi nutritionnel ? Comment l'application s'y prendrait-elle de façon ludique ?

00:33:57 Des fonctionnalités comme la communauté, les cartes de restaurants que nous avons demandées

00:34:01 et d'autres informations utiles sont également présentées. Au fur et à mesure, nous découvrons des informations

00:34:06 spécifiques à notre application, telles que son design et ses composants. En continuant,

00:34:12 nous trouvons des détails comme les trois formules que nous proposons : la formule gratuite,

00:34:17 la formule mensuelle à 9,90 € et la formule annuelle à 99,99 €. Ainsi, nous pouvons recueillir des informations précieuses que nous

00:34:24 pourrions présenter en interne, ou même demander à Notebook LM d'explorer différentes approches afin que

00:34:30 l'application puisse couvrir les informations que nous souhaitons présenter. De plus, à partir de là,

00:34:35 nous pouvons également sélectionner n'importe quelle diapositive et, en cliquant sur « Réviser »,

00:34:40 demander des modifications spécifiques pour chacune d'elles. De plus,

00:34:45 je constate qu'ils ont créé une application de stratégie de diffusion marketing. Celle-ci nous présente

00:34:49 tous les indicateurs clés de performance (KPI) disponibles, toutes les tactiques utilisables sur

00:34:54 les médias payants et acquis, et nous permet également d'établir une proposition de budget

00:35:01 pour chaque canal, ainsi que les sites à cibler en fonction

00:35:06 des échéances. Grâce à cette application, nous pouvons vraiment l'adapter à

00:35:11 nos besoins, que ce soit pour diffuser des informations en interne ou en externe.

00:35:17 Nous disposons également d'applications spécifiques pour la création de contenu de marque. Par exemple,

00:35:22 celle de Pomegi qui, lorsque l'on clique sur « Commencer », nous invite à cliquer…

00:35:28 Ce bouton nous permet de partager l'URL de notre application. Comme je l'ai déjà fait avec

00:35:33 Firebase et qu'elle est publique, je clique sur « Copier », je la colle dans Pomelli, je clique sur « Continuer »,

00:35:38 et quelques minutes plus tard, Pomelli aura extrait divers éléments clés tels que les polices,

00:35:43 les couleurs, les valeurs de la marque et d'autres informations que nous pouvons également modifier

00:35:49 , en tenant compte de la conception complète du système que nous avons téléchargée précédemment. Cependant

00:35:54 , je vais la laisser telle quelle. En continuant, nous pouvons maintenant demander n'importe quel type d'

00:35:59 image de marque à partir d'ici, et Pomelli aura également créé trois approches différentes par défaut, comme

00:36:05 celle-ci axée sur la santé, où nous pouvons voir de nombreuses images que nous pourrions même

00:36:10 publier sur les réseaux sociaux. Nous pouvons voir d'autres approches comme celle-ci, et enfin, si

00:36:16 aucune ne nous convient, nous pouvons également demander une autre approche,

00:36:21 différentes langues, etc., afin que Pomelli puisse créer toutes les images dont nous avons besoin. Comme nous pouvons le constater,

00:36:26 les barrières techniques de temps et d'investissement ne sont plus un problème. Maintenant,

00:36:30 l'important est de voir ce que vous voulez construire afin que nous puissions commencer à le mettre en œuvre.

Google rompe las APPs profesionales por IA GRATIS en minutos 🔥

Transcription horodatee