{"id":38333,"date":"2025-03-04T09:45:48","date_gmt":"2025-03-04T09:45:48","guid":{"rendered":"\/tutoriels\/?p=38333"},"modified":"2025-03-05T14:08:52","modified_gmt":"2025-03-05T14:08:52","slug":"creer-une-application-web-avec-hostinger-horizons","status":"publish","type":"post","link":"\/fr\/tutoriels\/creer-une-application-web-avec-hostinger-horizons\/","title":{"rendered":"Comment cr\u00e9er une application web avec Hostinger Horizons"},"content":{"rendered":"<p class=\"wp-block-paragraph\"><strong>Hostinger Horizons <\/strong>est un outil aliment&eacute; par l&rsquo;IA qui vous permet de <strong>cr&eacute;er des applications web sans &eacute;crire une seule ligne de code<\/strong>. Que vous ayez besoin d&rsquo;une application de fitness pour des plans d&rsquo;entra&icirc;nement personnalis&eacute;s ou d&rsquo;un outil de gestion des b&eacute;n&eacute;voles pour une organisation &agrave; but non lucratif, il <strong>vous suffit de saisir vos invites <\/strong>et Hostinger Horizons s&rsquo;occupera du reste.<\/p><p class=\"wp-block-paragraph\">C&rsquo;est un excellent choix pour les cr&eacute;ateurs d&rsquo;applications web d&eacute;butants qui n&rsquo;ont pas d&rsquo;exp&eacute;rience en mati&egrave;re de codage. Les solopreneurs disposant d&rsquo;un budget limit&eacute; peuvent &eacute;galement en b&eacute;n&eacute;ficier, car ils peuvent cr&eacute;er des applications enti&egrave;rement fonctionnelles sans faire appel &agrave; des d&eacute;veloppeurs.<\/p><p class=\"wp-block-paragraph\">Dans ce guide, vous apprendrez &agrave; cr&eacute;er une application Web &agrave; l&rsquo;aide de Hostinger Horizons, de la mise en place de votre premier projet &agrave; son lancement pour un acc&egrave;s public. Vous d&eacute;couvrirez comment affiner vos messages-guides pour obtenir de meilleurs r&eacute;sultats, utiliser efficacement les fonctions cl&eacute;s et optimiser les fonctionnalit&eacute;s de votre application en fonction de vos besoins.<\/p><h2 class=\"wp-block-heading\" id=\"h-creer-une-application-web-en-sept-etapes-avec-hostinger-horizons\"><strong>Cr&eacute;er une application web en sept &eacute;tapes avec Hostinger Horizons<\/strong><\/h2><p class=\"wp-block-paragraph\">Pour mieux illustrer le processus de cr&eacute;ation d&rsquo;une application Web avec Hostinger Horizons, nous allons cr&eacute;er dans ce tutoriel une <strong>application web de fitness <\/strong>qui g&eacute;n&egrave;re des plans d&rsquo;entra&icirc;nement et de r&eacute;gime personnalis&eacute;s en fonction des donn&eacute;es de l&rsquo;utilisateur (telles que l&rsquo;&acirc;ge, la taille, le poids, le niveau d&rsquo;activit&eacute; et les probl&egrave;mes de sant&eacute; existants).<\/p><p class=\"wp-block-paragraph\">Si vous travaillez sur un autre type d&rsquo;application web, n&rsquo;h&eacute;sitez pas &agrave; adapter les invites et les fonctionnalit&eacute;s en cons&eacute;quence.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-s-inscrire-et-demarrer-un-nouveau-projet\"><strong>1. S&rsquo;inscrire et d&eacute;marrer un nouveau projet<\/strong><\/h3><p class=\"wp-block-paragraph\">Commencez par visiter la <a href=\"https:\/\/www.hostinger.com\/fr\/horizons\">page officielle de Hostinger Horizons<\/a> et choisissez un plan qui correspond &agrave; vos besoins. &Agrave; partir de<strong> 19,99 \u20ac\/mois<\/strong> , tous nos plans offrent les m&ecirc;mes fonctions de cr&eacute;ation d&rsquo;applications Web et <strong>un mois d&rsquo;h&eacute;bergement gratuit<\/strong>. La diff&eacute;rence r&eacute;side dans les limites mensuelles de messages, qui vont jusqu&rsquo;&agrave; <strong>1 000 messages<\/strong>.<\/p><p class=\"wp-block-paragraph\">Veuillez noter que Hostinger Horizons est actuellement en phase d&rsquo;<strong>acc&egrave;s anticip&eacute; <\/strong>et qu&rsquo;il est donc possible que vous rencontriez des erreurs lors de son utilisation. Mais ne vous inqui&eacute;tez pas &ndash; vous b&eacute;n&eacute;ficiez d&rsquo;une <strong>garantie satisfait ou rembours&eacute; de 30 jours<\/strong>, qui vous permet d&rsquo;annuler &agrave; tout moment si vous changez d&rsquo;avis.<\/p><figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.hostinger.com\/fr\/horizons\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/FR_Horizons_in-text-banner-1024x300-1.png\/public\" alt=\"\" class=\"wp-image-41441\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/FR_Horizons_in-text-banner-1024x300-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/FR_Horizons_in-text-banner-1024x300-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/FR_Horizons_in-text-banner-1024x300-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/03\/FR_Horizons_in-text-banner-1024x300-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><p class=\"wp-block-paragraph\">Apr&egrave;s avoir effectu&eacute; votre paiement, rendez-vous sur le <strong>tableau de bord hPanel <\/strong>et s&eacute;lectionnez <strong>Sites Web <\/strong>&rarr; <strong>Liste des sites<\/strong> dans la barre lat&eacute;rale gauche. Ensuite, cliquez sur <strong>Ajouter un site web<\/strong> et choisissez <strong>Hostinger Horizons<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a761fa3c77a6\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a761fa3c77a6\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"327\" height=\"476\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/02\/ajouter-site-web-bouton.png\/public\" alt=\"Le menu Hostinger Horizons dans hPanel\" class=\"wp-image-38396\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/02\/ajouter-site-web-bouton.png\/w=327,fit=scale-down 327w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/02\/ajouter-site-web-bouton.png\/w=206,fit=scale-down 206w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/02\/ajouter-site-web-bouton.png\/w=103,fit=scale-down 103w\" sizes=\"(max-width: 327px) 100vw, 327px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><h3 class=\"wp-block-heading\" id=\"h-2-naviguer-dans-l-interface-de-l-outil\"><strong>2. Naviguer dans l&rsquo;interface de l&rsquo;outil<\/strong><\/h3><p class=\"wp-block-paragraph\">Il est temps de <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/demarrer-avec-hostinger-horizons\/\">commencer avec Hostinger Horizons<\/a>.<\/p><p class=\"wp-block-paragraph\">Vous verrez un champ de texte dans lequel vous pourrez &eacute;crire votre message dans <strong>plus de 80 langues<\/strong>. Apr&egrave;s avoir d&eacute;crit votre application web, appuyez sur <strong>Entr&eacute;e<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a761fa3c975a\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a761fa3c975a\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"966\" height=\"746\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/02\/horizons-interface.png\/public\" alt=\"Le champ prompt dans Hostinger Horizons\" class=\"wp-image-38397\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/02\/horizons-interface.png\/w=966,fit=scale-down 966w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/02\/horizons-interface.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/02\/horizons-interface.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/02\/horizons-interface.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 966px) 100vw, 966px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Hostinger Horizons prendra quelques instants pour traiter votre demande. Une fois pr&ecirc;t, le tableau de bord se divise en deux volets :<\/p><ul class=\"wp-block-list\">\n<li><strong>Volet de gauche <\/strong>&ndash; saisissez ici des invites suppl&eacute;mentaires pour ajouter des fonctionnalit&eacute;s ou affiner votre application web. Sous le champ de saisie, vous trouverez le nombre de cr&eacute;dits de messages restants dans votre offre.<\/li>\n\n\n\n<li><strong>Volet de droite <\/strong>: il affiche un aper&ccedil;u en temps r&eacute;el de votre application au fur et &agrave; mesure que vous effectuez des ajustements. Vous pouvez interagir avec les &eacute;l&eacute;ments pour tester leur fonctionnalit&eacute;.<\/li>\n<\/ul><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a761fa3cb6e8\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a761fa3cb6e8\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"450\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/02\/HH-prompting.png\/w=1024,h=1024,fit=scale-down\" alt=\"Le tableau de bord du projet Hostinger Horizons\" class=\"wp-image-38400\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/02\/HH-prompting.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/02\/HH-prompting.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/02\/HH-prompting.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/02\/HH-prompting.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Dans le coin sup&eacute;rieur droit du tableau de bord, vous trouverez le bouton <strong>D&eacute;ployer<\/strong> pour lancer votre application web et la rendre accessible au public.<\/p><h3 class=\"wp-block-heading\" id=\"h-3-definir-l-objectif-de-votre-application-web\"><strong>3. D&eacute;finir l&rsquo;objectif de votre application web<\/strong><\/h3><p class=\"wp-block-paragraph\">Hostinger Horizons s&rsquo;appuie sur des invites bien structur&eacute;es pour g&eacute;n&eacute;rer l&rsquo;application web que vous avez imagin&eacute;e. Ainsi, plus vos invites sont pr&eacute;cises, meilleurs sont les r&eacute;sultats.<\/p><p class=\"wp-block-paragraph\">Lorsque vous d&eacute;finissez l&rsquo;objectif de votre application web, incluez ces d&eacute;tails cl&eacute;s afin que Hostinger Horizons comprenne votre id&eacute;e :<\/p><ul class=\"wp-block-list\">\n<li><strong>Objectif de l&rsquo;application <\/strong>&ndash; &eacute;noncez clairement le probl&egrave;me que r&eacute;sout votre application web, par exemple &ldquo;aider les utilisateurs &agrave; suivre leurs progr&egrave;s en fitness&rdquo;.<\/li>\n\n\n\n<li><strong>Fonctionnalit&eacute;s de base <\/strong>&ndash; listez les fonctions essentielles que vous souhaitez inclure, telles que la connexion des utilisateurs, les formulaires, les tableaux de bord ou les rapports.<\/li>\n\n\n\n<li><strong>Pr&eacute;f&eacute;rences en mati&egrave;re d&rsquo;interface utilisateur <\/strong>&ndash; soyez pr&eacute;cis sur les &eacute;l&eacute;ments de conception tels que la mise en page, la palette de couleurs et l&rsquo;esth&eacute;tique g&eacute;n&eacute;rale.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Voici un exemple d&rsquo;invite pour une plateforme de fitness qui g&eacute;n&egrave;re des plans d&rsquo;entra&icirc;nement et de r&eacute;gime personnalis&eacute;s :<\/p><pre class=\"wp-block-preformatted\">Cr&eacute;ez une plateforme de fitness offrant des programmes d'entra&icirc;nement et des plans alimentaires personnalis&eacute;s en fonction des donn&eacute;es des utilisateurs. L'application doit permettre de saisir l'&acirc;ge, la taille, le poids, le niveau d'activit&eacute; et les conditions de sant&eacute;. &Agrave; partir de ces informations, elle g&eacute;n&egrave;rera des routines de fitness et des recommandations alimentaires adapt&eacute;es. Int&eacute;grez un tableau de bord intuitif avec des formulaires de saisie, un suivi des progr&egrave;s et une interface visuellement attrayante avec un design &eacute;pur&eacute;, moderne et une palette de couleurs bleu sarcelle et violet.<\/pre><p class=\"wp-block-paragraph\">Comme tout autre outil d&rsquo;intelligence artificielle, le premier r&eacute;sultat de Hostinger Horizons peut ne pas &ecirc;tre parfait, m&ecirc;me si votre demande initiale &eacute;tait tr&egrave;s d&eacute;taill&eacute;e. Nous pouvons nous appuyer sur cette premi&egrave;re it&eacute;ration de l&rsquo;application en saisissant des messages de suivi.&nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"h-4-personnalisez-la-conception-de-votre-projet\"><strong>4. Personnalisez la conception de votre projet<\/strong><\/h3><p class=\"wp-block-paragraph\">L&rsquo;&eacute;tape suivante consiste &agrave; personnaliser la conception de l&rsquo;application. En plus de rendre votre application plus attrayante sur le plan visuel, ce processus implique l&rsquo;ajout d&rsquo;&eacute;l&eacute;ments importants pour la navigation et la fonctionnalit&eacute;.<\/p><p class=\"wp-block-paragraph\">Voici quelques-uns des composants frontaux importants &agrave; inclure dans votre application :<\/p><ul class=\"wp-block-list\">\n<li><strong>Menus <\/strong>&ndash; zones telles qu&rsquo;une barre lat&eacute;rale, un onglet ou un menu d&eacute;roulant qui contiennent des raccourcis vers diff&eacute;rentes pages.&nbsp;&nbsp;<\/li>\n\n\n\n<li><strong>Formulaires <\/strong>&ndash; champs permettant aux utilisateurs de saisir des donn&eacute;es, telles qu&rsquo;une adresse &eacute;lectronique ou une image.&nbsp;<\/li>\n\n\n\n<li><strong>Pages <\/strong>&ndash; fen&ecirc;tres plein &eacute;cran contenant diff&eacute;rents param&egrave;tres et informations.&nbsp;<\/li>\n\n\n\n<li><strong>Boutons <\/strong>&ndash; &eacute;l&eacute;ments permettant d&rsquo;effectuer certaines actions, comme l&rsquo;envoi de donn&eacute;es ou la navigation vers une autre page.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Si vous disposez d&rsquo;un <strong>wireframe <\/strong>d&eacute;taillant la disposition de l&rsquo;application et l&rsquo;emplacement des &eacute;l&eacute;ments, vous pouvez le t&eacute;l&eacute;charger vers Hostinger Horizons en tant qu&rsquo;invite. Vous obtiendrez ainsi un r&eacute;sultat plus pr&eacute;cis.<\/p><p class=\"wp-block-paragraph\">Sinon, utilisez une invite textuelle, comme dans l&rsquo;exemple suivant :&nbsp;<\/p><pre class=\"wp-block-preformatted\">Cr&eacute;ez une page de connexion o&ugrave; les utilisateurs peuvent acc&eacute;der &agrave; leur compte. Incluez ici un bouton qui redirige les utilisateurs vers la page d'inscription o&ugrave; ils peuvent cr&eacute;er un nouveau compte s'ils n'en ont pas.<\/pre><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a761fa3cd5ac\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a761fa3cd5ac\" class=\"aligncenter size-large is-resized wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"461\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/02\/creation-page-connexion.png\/w=1024,h=1024,fit=scale-down\" alt=\"Hostinger Horizons cr&eacute;e une page de connexion &agrave; une application Web\" class=\"wp-image-38401\" style=\"width:840px;height:auto\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/02\/creation-page-connexion.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/02\/creation-page-connexion.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/02\/creation-page-connexion.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/02\/creation-page-connexion.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">N&rsquo;oubliez pas d&rsquo;ajouter des d&eacute;tails sur la conception de votre application, tels que les couleurs, la taille du texte et le style de police. <\/p><h3 class=\"wp-block-heading\" id=\"h-5-affiner-la-logique-et-la-structure\"><strong>5. Affiner la logique et la structure<\/strong><\/h3><p class=\"wp-block-paragraph\">Maintenant que la conception est &eacute;tablie, il s&rsquo;agit d&rsquo;affiner les fonctionnalit&eacute;s de l&rsquo;application. Le processus reste le m&ecirc;me : vous fournissez des messages de suivi sur les aspects que vous souhaitez am&eacute;liorer.&nbsp;<\/p><p class=\"wp-block-paragraph\">Au cours de cette &eacute;tape, les points &agrave; am&eacute;liorer sont g&eacute;n&eacute;ralement li&eacute;s &agrave; la logique et aux fonctionnalit&eacute;s de votre application. Voici quelques-uns des domaines les plus courants :<\/p><ul class=\"wp-block-list\">\n<li><strong>Logique m&eacute;tier <\/strong>&ndash; les r&egrave;gles sous-jacentes de votre application. Par exemple, votre application de fitness doit donner des recommandations diff&eacute;rentes en fonction des donn&eacute;es de sant&eacute; que vous avez saisies.&nbsp;<\/li>\n\n\n\n<li><strong>Arbre de d&eacute;cision <\/strong>&ndash; le flux de votre application bas&eacute; sur les d&eacute;cisions des utilisateurs. Par exemple, si un utilisateur s&eacute;lectionne un certain menu, une page pr&eacute;d&eacute;termin&eacute;e doit s&rsquo;afficher.&nbsp;<\/li>\n\n\n\n<li><strong>Traitement des &eacute;v&eacute;nements <\/strong>&ndash; r&eacute;action aux actions de l&rsquo;utilisateur, telles que les clics, les glissements et les pressions de touches. Par exemple, une bascule doit s&rsquo;enclencher lorsqu&rsquo;on clique dessus.<\/li>\n\n\n\n<li><strong>Flux de donn&eacute;es <\/strong>&ndash; traitement des donn&eacute;es de l&rsquo;utilisateur lorsqu&rsquo;elles sont transmises par des formulaires, valid&eacute;es ou t&eacute;l&eacute;charg&eacute;es. Par exemple, le mot de passe d&rsquo;un utilisateur doit &ecirc;tre une cha&icirc;ne de texte correspondant &agrave; l&rsquo;entr&eacute;e de la base de donn&eacute;es.&nbsp;<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Lorsque vous <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/prompting-avec-hostinger-horizons\/\">r&eacute;digez des prompts pour Hostinger Horizons<\/a> , assurez-vous de d&eacute;crire clairement la logique ou la fonction que vous souhaitez am&eacute;liorer. En donnant plus de contexte &agrave; l&rsquo;IA, vous l&rsquo;aidez &agrave; produire un r&eacute;sultat plus pr&eacute;cis.<\/p><p class=\"wp-block-paragraph\">Voici un exemple rapide pour affiner le flux de donn&eacute;es :<\/p><pre class=\"wp-block-preformatted\">V&eacute;rifiez les champs de l'adresse &eacute;lectronique et du mot de passe sur la page de connexion. Assurez-vous qu'ils n'acceptent que des cha&icirc;nes de texte correspondant &agrave; des entr&eacute;es de base de donn&eacute;es existantes.&nbsp;<br><br>Si les donn&eacute;es saisies ne correspondent &agrave; aucune entr&eacute;e de la base de donn&eacute;es, un message d'erreur est renvoy&eacute; : \"Adresse e-mail ou mot de passe invalide\". Si les informations fournies sont valides, l'utilisateur est redirig&eacute; vers le tableau de bord principal.<\/pre><figure data-wp-context='{\"imageId\":\"6a761fa3cf223\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a761fa3cf223\" class=\"wp-block-image size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"456\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/02\/erre-connexion.png\/w=1024,h=1024,fit=scale-down\" alt=\"Hostinger Horizons ajoute une logique d'erreur\" class=\"wp-image-38402\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/02\/erre-connexion.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/02\/erre-connexion.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/02\/erre-connexion.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/02\/erre-connexion.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><p class=\"wp-block-paragraph\">Ensuite, v&eacute;rifiez si Hostinger Horizons a correctement configur&eacute; la logique et les fonctionnalit&eacute;s de votre application en les testant dans l&rsquo;aper&ccedil;u. Cela vous aidera &eacute;galement &agrave; identifier les fonctionnalit&eacute;s manquantes.&nbsp;<\/p><p>\n\n\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Conseil de pro                <\/p>\n            <\/div>\n            <p class=\"protip__content\">Pour obtenir les r&eacute;sultats les meilleurs et les plus pr&eacute;cis, affinez un aspect de votre candidature &agrave; la fois. <\/p>\n                    <\/div>\n        \n\n\n\n<\/p><h3 class=\"wp-block-heading\" id=\"h-6-connecter-votre-application-a-une-base-de-donnees-optionnel\"><strong>6. Connecter votre application &agrave; une base de donn&eacute;es<\/strong> (optionnel)<\/h3><p class=\"wp-block-paragraph\">Une base de donn&eacute;es permet &agrave; votre application web de collecter et de stocker les donn&eacute;es des utilisateurs. C&rsquo;est essentiel si votre application comporte des fonctions telles que l&rsquo;enregistrement des utilisateurs.&nbsp;<\/p><p class=\"wp-block-paragraph\">Hostinger Horizons vous permet de configurer facilement une base de donn&eacute;es pour votre application &agrave; l&rsquo;aide de <strong>Supabase<\/strong>.&nbsp;<\/p><p class=\"wp-block-paragraph\">Pour ce faire, rendez-vous sur la <a href=\"https:\/\/supabase.com\/dashboard\/sign-up\" target=\"_blank\" rel=\"noopener\">page d&rsquo;inscription<\/a> de Supabase et cr&eacute;ez un nouveau compte. Cr&eacute;ez une nouvelle organisation et choisissez un plan &ndash; le plan gratuit est suffisant pour une application de base &agrave; petite &eacute;chelle. Cr&eacute;ez ensuite un nouveau projet en saisissant son nom, le mot de passe de la base de donn&eacute;es et la r&eacute;gion.<\/p><p class=\"wp-block-paragraph\">Vous devriez &ecirc;tre redirig&eacute; vers la page du nouveau projet. Dans ce menu, copiez l&rsquo;<strong>URL de votre projet <\/strong>et la <strong>cl&eacute; API<\/strong>, que nous utiliserons pour connecter la base de donn&eacute;es &agrave; votre application.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a761fa3d14b3\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a761fa3d14b3\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"363\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/02\/supabase.png\/w=1024,h=1024,fit=scale-down\" alt=\"Identifiants de la base de donn&eacute;es Supabase\" class=\"wp-image-38403\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/02\/supabase.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/02\/supabase.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/02\/supabase.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/02\/supabase.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Ensuite, demandez &agrave; Hostinger Horizons de configurer le back-end de votre application en utilisant les informations d&rsquo;identification que vous avez copi&eacute;es de Supabase. Voici un exemple d&rsquo;invite :<\/p><pre class=\"wp-block-preformatted\">Connectez l'application avec ma base de donn&eacute;es Supabase. Voici les informations d'identification :<br><br>URL du projet : URL-de-votre-projet<br><br>Cl&eacute; API : votre-cl&eacute;-API<br><br>Ensuite, cr&eacute;ez les tables n&eacute;cessaires et reliez-les aux champs correspondants dans l'application.<\/pre><p>\n\n\n<div class=\"announcement-block announcement-block--important\">\n            <span class=\"announcement-block__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                          d=\"M12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5ZM13.637 7.65198C13.637 6.74791 12.9041 6.01501 12 6.01501C11.0959 6.01501 10.363 6.74791 10.363 7.65198C10.5335 9.53749 10.875 13.383 10.875 13.383C10.875 14.0043 11.3787 14.508 12 14.508C12.6213 14.508 13.125 14.0043 13.125 13.383V13.38L13.637 7.65198ZM11.9927 15.714C11.3714 15.714 10.8677 16.2177 10.8677 16.839C10.8677 17.4603 11.3714 17.964 11.9927 17.964H12.0073C12.6286 17.964 13.1323 17.4603 13.1323 16.839C13.1323 16.2177 12.6286 15.714 12.0073 15.714H11.9927Z\"\n                          fill=\"#FEA419\"\/>\n                <\/svg>\n                Important\n            <\/span>\n            <p class=\"announcement-block__content\">\n                <strong>Important !<\/strong> &Eacute;tant donn&eacute; que la connexion &agrave; une base de donn&eacute;es et le d&eacute;veloppement de la logique de votre application sont des t&acirc;ches complexes, vous devrez probablement donner des invites suppl&eacute;mentaires. Affinez toujours vos instructions et testez les modifications pour garantir le bon fonctionnement de votre application.\n            <\/p><\/div>\n\n\n\n<\/p><h3 class=\"wp-block-heading\" id=\"h-7-tester-et-deployer-votre-application-web\"><strong>7. Tester et d&eacute;ployer votre application web<\/strong><\/h3><p class=\"wp-block-paragraph\">&Agrave; ce stade, votre application devrait &ecirc;tre enti&egrave;rement d&eacute;velopp&eacute;e et fonctionnelle. Avant de la finaliser, v&eacute;rifiez toutes les fonctionnalit&eacute;s et la navigation pour vous assurer qu&rsquo;elles fonctionnent correctement.&nbsp;<\/p><p class=\"wp-block-paragraph\">Dans Hostinger Horizons, vous pouvez v&eacute;rifier et interagir avec votre candidature directement &agrave; partir du menu de pr&eacute;visualisation situ&eacute; dans le volet de droite.<\/p><p class=\"wp-block-paragraph\">Voici une liste de contr&ocirc;le des &eacute;l&eacute;ments &agrave; v&eacute;rifier lors du testing de l&rsquo;application web&nbsp; :<\/p><ul class=\"wp-block-list\">\n<li><strong>Fonctionnalit&eacute; <\/strong>&ndash; toutes les fonctionnalit&eacute;s doivent fonctionner correctement dans l&rsquo;environnement r&eacute;el. Cela inclut la capacit&eacute; d&rsquo;effectuer des <a href=\"https:\/\/www.geeksforgeeks.org\/crud-full-form\/\" target=\"_blank\" rel=\"noopener\">op&eacute;rations CRUD sur la base de donn&eacute;es<\/a> et la logique commerciale.&nbsp;<\/li>\n\n\n\n<li><strong>Navigation <\/strong>&ndash; le flux de votre application et la fonctionnalit&eacute; des &eacute;l&eacute;ments de navigation. Par exemple, si vous cliquez sur <strong>Connexion<\/strong>, vous devez &ecirc;tre redirig&eacute; vers le tableau de bord principal.&nbsp;<\/li>\n\n\n\n<li><strong>Visibilit&eacute; <\/strong>&ndash; l&rsquo;apparence de votre application web sur les t&eacute;l&eacute;phones mobiles et les ordinateurs de bureau. Assurez-vous que tous les &eacute;l&eacute;ments sont correctement dimensionn&eacute;s et utilisables.&nbsp;<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Maintenant, d&eacute;ployons l&rsquo;application. Comme Hostinger Horizons est fourni avec notre plan d&rsquo;<a href=\"https:\/\/www.hostinger.com\/fr\/hebergement-web\">h&eacute;bergement web Business<\/a>, vous pouvez imm&eacute;diatement publier votre application Web au public en cliquant simplement sur le bouton <strong>Deploy <\/strong>en haut &agrave; droite.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a761fa3d3b21\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a761fa3d3b21\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1160\" height=\"772\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/02\/deployer-votre-app-02-27-2025_05_35_PM.png\/w=1024,h=1024,fit=scale-down\" alt=\"Le bouton D&eacute;ployer sur Hostinger Horizons\" class=\"wp-image-38404\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/02\/deployer-votre-app-02-27-2025_05_35_PM.png\/w=1160,fit=scale-down 1160w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/02\/deployer-votre-app-02-27-2025_05_35_PM.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/02\/deployer-votre-app-02-27-2025_05_35_PM.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/02\/deployer-votre-app-02-27-2025_05_35_PM.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2025\/02\/deployer-votre-app-02-27-2025_05_35_PM.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1160px) 100vw, 1160px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Hostinger Horizons publiera votre projet en utilisant un domaine temporaire. Avant de connecter votre propre domaine, nous allons effectuer quelques tests suppl&eacute;mentaires.<\/p><p class=\"wp-block-paragraph\">Commencez par v&eacute;rifier la <strong>compatibilit&eacute; entre les navigateurs<\/strong>. Pour ce faire, acc&eacute;dez &agrave; votre application sur diff&eacute;rents navigateurs web et appareils pour voir si des probl&egrave;mes surviennent.&nbsp;<\/p><p class=\"wp-block-paragraph\">Ensuite, v&eacute;rifiez ses<strong> performances <\/strong>et sa vitesse de chargement &agrave; l&rsquo;aide d&rsquo;un outil d&rsquo;analyse comparative comme <a href=\"https:\/\/gtmetrix.com\/\" target=\"_blank\" rel=\"noopener\">GTMetrix<\/a>. Si le r&eacute;sultat n&rsquo;est pas optimal, demandez &agrave; Hostinger Horizons d&rsquo;optimiser le code.&nbsp;<\/p><p class=\"wp-block-paragraph\">Si tout semble correct, retournez au menu <strong>Sites web <\/strong>dans hPanel pour connecter votre domaine &agrave; l&rsquo;application web.<\/p><p class=\"wp-block-paragraph\">Voil&agrave;, c&rsquo;est fait ! F&eacute;licitations, vous avez cr&eacute;&eacute; et publi&eacute; une application Web &agrave; l&rsquo;aide d&rsquo;Hostinger Horizons.<\/p><h2 class=\"wp-block-heading\" id=\"h-conclusion\"><strong>Conclusion<\/strong><\/h2><p class=\"wp-block-paragraph\">Hostinger Horizons est une plateforme aliment&eacute;e par l&rsquo;IA qui vous permet de d&eacute;velopper une application web compl&egrave;te sans codage. Il vous suffit d&rsquo;entrer des invites et cet outil cr&eacute;era n&rsquo;importe quelle application que vous avez en t&ecirc;te.<\/p><p class=\"wp-block-paragraph\">Dans cet article, nous avons expliqu&eacute; les &eacute;tapes g&eacute;n&eacute;rales de la cr&eacute;ation d&rsquo;une application web avec Hostinger Horizons. Voici un r&eacute;capitulatif :<\/p><ol class=\"wp-block-list\">\n<li>Inscrivez-vous chez <strong>Hostinger Horizons <\/strong>et d&eacute;marrez un nouveau projet via le tableau de bord hPanel.&nbsp;<\/li>\n\n\n\n<li>Familiarisez-vous avec l&rsquo;interface utilisateur de l&rsquo;outil.&nbsp;<\/li>\n\n\n\n<li>Entrez dans l&rsquo;invite initiale pour d&eacute;finir l&rsquo;objectif principal de votre application web.<\/li>\n\n\n\n<li>Personnalisez la pr&eacute;sentation, la conception et les composants frontaux de votre projet.<\/li>\n\n\n\n<li>Affinez la logique et la structure de votre application afin d&rsquo;en assurer le bon fonctionnement.&nbsp;<\/li>\n\n\n\n<li>Cr&eacute;ez une base de donn&eacute;es <strong>Supabase <\/strong>et demandez &agrave; Hostinger Horizons de la connecter &agrave; votre application.<\/li>\n\n\n\n<li>Testez votre application et d&eacute;ployez-la au public en utilisant le plan d&rsquo;h&eacute;bergement <strong>Business <\/strong>d&rsquo;Hostinger.<\/li>\n<\/ol><p class=\"wp-block-paragraph\">C&rsquo;est simple, non ? Allez-y et essayez de d&eacute;velopper votre propre application web avec Hostinger Horizons.&nbsp;<\/p><p class=\"wp-block-paragraph\">Si vous avez des questions sur cet outil, posez-les dans la section des commentaires ci-dessous ou consultez notre article <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/faq-hostinger-horizons\/\">FAQ sur Hostinger Horizons<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hostinger Horizons est un outil aliment&eacute; par l&rsquo;IA qui vous permet de cr&eacute;er des applications web sans &eacute;crire une seule ligne de code. Que vous ayez besoin d&rsquo;une application de fitness pour des plans d&rsquo;entra&icirc;nement personnalis&eacute;s ou d&rsquo;un outil de gestion des b&eacute;n&eacute;voles pour une organisation &agrave; but non lucratif, il vous suffit de saisir [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/fr\/tutoriels\/creer-une-application-web-avec-hostinger-horizons\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":355,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Cr\u00e9er une application web avec Hostinger Horizons : guide complet","rank_math_description":"Apprenez \u00e0 cr\u00e9er une application web avec Hostinger Horizons : 1. Lancer un projet 2. Explorer l'interface 3. D\u00e9finir son objectif et plus.","rank_math_focus_keyword":"comment cr\u00e9er une application web avec Hostinger Horizons","footnotes":""},"categories":[],"tags":[],"class_list":["post-38333","post","type-post","status-publish","format-standard","hentry"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-make-a-web-app-with-hostinger-horizons","default":1},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/criar-web-app-com-hostinger-horizons","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/creer-une-application-web-avec-hostinger-horizons","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/como-crear-una-aplicacion-web-con-hostinger-horizons","default":0},{"locale":"de-DE","link":"https:\/\/www.hostinger.com\/de\/tutorials\/web-app-erstellen-hostinger-horizons","default":0},{"locale":"it-IT","link":"https:\/\/www.hostinger.com\/it\/tutorial\/come-creare-un-app-web-con-hostinger-horizons","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/how-to-make-a-web-app-with-hostinger-horizons","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-make-a-web-app-with-hostinger-horizons","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-make-a-web-app-with-hostinger-horizons","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/how-to-make-a-web-app-with-hostinger-horizons","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/como-crear-una-aplicacion-web-con-hostinger-horizons","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/como-crear-una-aplicacion-web-con-hostinger-horizons","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/como-crear-una-aplicacion-web-con-hostinger-horizons","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/criar-web-app-com-hostinger-horizons","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/38333","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/users\/355"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/comments?post=38333"}],"version-history":[{"count":14,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/38333\/revisions"}],"predecessor-version":[{"id":38819,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/38333\/revisions\/38819"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/media?parent=38333"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/categories?post=38333"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/tags?post=38333"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}