{"id":48785,"date":"2025-03-04T07:10:23","date_gmt":"2025-03-04T10:10:23","guid":{"rendered":"\/tutoriais\/?p=48785"},"modified":"2025-05-16T19:27:03","modified_gmt":"2025-05-16T22:27:03","slug":"criar-web-app-com-hostinger-horizons","status":"publish","type":"post","link":"\/br\/tutoriais\/criar-web-app-com-hostinger-horizons\/","title":{"rendered":"Como criar um web app usando a Hostinger Horizons"},"content":{"rendered":"<p class=\"wp-block-paragraph\"><strong>A Hostinger Horizons <\/strong>&eacute; uma ferramenta de IA que permite <strong>criar web apps sem mexer em c&oacute;digo<\/strong>. Por exemplo: se voc&ecirc; precisa de um aplicativo de fitness para criar planos de exerc&iacute;cios personalizados ou de uma ferramenta de gerenciamento de pessoal para uma organiza&ccedil;&atilde;o sem fins lucrativos, <strong>basta digitar seus pedidos<\/strong> e a Hostinger Horizons cuidar&aacute; do resto.<\/p><p class=\"wp-block-paragraph\">Por isso, a Horizons &eacute; uma excelente op&ccedil;&atilde;o para criadores de web apps iniciantes, mesmo sem nenhuma experi&ecirc;ncia em programa&ccedil;&atilde;o. Quem tamb&eacute;m pode se beneficiar s&atilde;o microempreendedores com or&ccedil;amento limitado, pois &eacute; poss&iacute;vel criar aplicativos totalmente funcionais sem contratar desenvolvedores.<\/p><p class=\"wp-block-paragraph\">Neste guia, voc&ecirc; aprender&aacute; a criar um web app usando a Hostinger Horizons, desde a configura&ccedil;&atilde;o do seu primeiro projeto at&eacute; o lan&ccedil;amento para o p&uacute;blico. Voc&ecirc; descobrir&aacute; como melhorar seus prompts para obter resultados aprimorados, usar os principais recursos de forma eficaz e otimizar a funcionalidade do seu aplicativo para atender &agrave;s suas necessidades. Vamos l&aacute;?<\/p><p>\n\n\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-criando-um-web-app-em-seis-passos-com-a-hostinger-horizons\"><strong>Criando um web app em seis passos com a Hostinger Horizons<\/strong><\/h2><p class=\"wp-block-paragraph\">Para ilustrar melhor o processo de cria&ccedil;&atilde;o de um web app com a Hostinger Horizons, neste tutorial criaremos um <strong>web app de fitness <\/strong>que gera planos personalizados de exerc&iacute;cios e dieta com base nos dados do usu&aacute;rio (como idade, altura, peso, n&iacute;vel de atividade e condi&ccedil;&otilde;es de sa&uacute;de existentes).<\/p><p class=\"wp-block-paragraph\">Se voc&ecirc; estiver trabalhando em um outro tipo de web app, basta ajustar os prompts e os recursos de acordo.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-registre-se-e-crie-um-novo-projeto\"><strong>1. Registre-se e crie um novo projeto<\/strong><\/h3><p class=\"wp-block-paragraph\">Comece visitando a <a href=\"\/br\/horizons\">p&aacute;gina oficial da Hostinger Horizons<\/a> e escolha um plano que atenda &agrave;s suas necessidades. A partir de<strong> R$ 58,99\/m&ecirc;s<\/strong>, todos os nossos planos oferecem os mesmos recursos para criar seus web apps, bem como <strong>um m&ecirc;s de hospedagem gratuita<\/strong>. A diferen&ccedil;a est&aacute; nos limites de mensagens por m&ecirc;s que voc&ecirc; pode trocar com a IA, que v&atilde;o at&eacute; <strong>500 mensagens<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a74712c1172f\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a74712c1172f\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"559\" 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\/53\/2025\/03\/Hostinger-horizons-pagina-oficial-1.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-48845\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2025\/03\/Hostinger-horizons-pagina-oficial-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2025\/03\/Hostinger-horizons-pagina-oficial-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2025\/03\/Hostinger-horizons-pagina-oficial-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2025\/03\/Hostinger-horizons-pagina-oficial-1.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\">Observe que, no momento, a Hostinger Horizons est&aacute; em fase <strong>inicial de acesso<\/strong>, portanto, voc&ecirc; pode se deparar com alguns erros ao us&aacute;-lo. Mas n&atilde;o se preocupe: n&oacute;s oferecemos uma <strong>garantia de reembolso em at&eacute; 30 dias<\/strong>, que permite que voc&ecirc; cancele a qualquer momento se mudar de ideia.<\/p><figure class=\"wp-block-image size-large\"><a href=\"\/br\/horizons\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2025\/03\/BR_Horizons_in-text-banner.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-48828\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2025\/03\/BR_Horizons_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2025\/03\/BR_Horizons_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2025\/03\/BR_Horizons_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2025\/03\/BR_Horizons_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><p class=\"wp-block-paragraph\">Depois de concluir o pagamento, v&aacute; at&eacute; o <strong>hPanel <\/strong>e clique em <strong>Gerenciar<\/strong> ao lado do plano rec&eacute;m-adquirido.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a74712c157f0\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a74712c157f0\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"947\" height=\"254\" 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\/53\/2025\/02\/image8.png\/public\" alt='Bot&atilde;o \"Gerenciar\" em destaque na se&ccedil;&atilde;o \"Hospedagem\" do hPanel\n' class=\"wp-image-48788\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2025\/02\/image8.png\/w=947,fit=scale-down 947w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2025\/02\/image8.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2025\/02\/image8.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2025\/02\/image8.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 947px) 100vw, 947px\" \/><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\">Em seguida, clique em <strong>Adicionar Site <\/strong>e selecione <strong>Hostinger Horizons<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a74712c1a6fe\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a74712c1a6fe\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"944\" height=\"541\" 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\/53\/2025\/02\/image1.png\/public\" alt=\"Op&ccedil;&atilde;o de Adicionar Site no hPanel com Hostinger Horizons em destaque\n\" class=\"wp-image-48789\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2025\/02\/image1.png\/w=944,fit=scale-down 944w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2025\/02\/image1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2025\/02\/image1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2025\/02\/image1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 944px) 100vw, 944px\" \/><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-explore-a-ferramenta\"><strong>2. Explore a ferramenta<\/strong><\/h3><p class=\"wp-block-paragraph\">&Eacute; hora de come&ccedil;ar a usar a Hostinger Horizons .<\/p><p class=\"wp-block-paragraph\">Voc&ecirc; ver&aacute; um campo de texto onde poder&aacute; escrever seu prompt em <strong>mais de 80 idiomas<\/strong>. Depois de descrever como deseja o seu web app, pressione <strong>Enter<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a74712c2259a\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a74712c2259a\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" 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\/2\/2025\/02\/hostinger-horizons-prompt-field.png\/w=1024,h=1024,fit=scale-down\" alt=\"Tela principal do Hostinger Horizons com prompt indicando para a ferramenta criar um web app de fitness\n\" class=\"wp-image-123663\"><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\">A Hostinger Horizons levar&aacute; alguns instantes para processar seu prompt. Quando estiver pronto, o painel de controle se dividir&aacute; em duas partes:<\/p><ul class=\"wp-block-list\">\n<li><strong>Painel esquerdo <\/strong>&ndash; cont&eacute;m a troca de mensagens com a IA, onde voc&ecirc; pode digitar prompts adicionais para adicionar mais recursos ou aprimorar seu web app.<\/li>\n\n\n\n<li><strong>Painel direito <\/strong>&ndash; mostra uma visualiza&ccedil;&atilde;o em tempo real do seu aplicativo &agrave; medida que voc&ecirc; faz ajustes. Voc&ecirc; pode interagir com os elementos para testar sua funcionalidade.<\/li>\n<\/ul><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a74712c29eed\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a74712c29eed\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" 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\/2\/2025\/02\/hostinger-horizons-dashboard.png\/w=1024,h=1024,fit=scale-down\" alt=\"Painel de controle do Hostinger Horizons\n\" class=\"wp-image-123664\"><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\">No canto superior direito do painel, voc&ecirc; encontrar&aacute;:<\/p><ul class=\"wp-block-list\">\n<li><strong>Mensagens restantes <\/strong>&ndash; mostra o n&uacute;mero de mensagens restantes em seu plano.<\/li>\n\n\n\n<li><strong>Implantar <\/strong>&ndash; o bot&atilde;o para publicar seu web app, tornando-o acess&iacute;vel ao p&uacute;blico.<\/li>\n<\/ul><h3 class=\"wp-block-heading\" id=\"h-3-defina-o-objetivo-do-seu-web-app\"><strong>3. Defina o objetivo do seu web app<\/strong><\/h3><p class=\"wp-block-paragraph\">A Hostinger Horizons se baseia em prompts (isto &eacute;, instru&ccedil;&otilde;es escritas em linguagem natural) para gerar o web app que voc&ecirc; tem em mente. Portanto, quanto mais precisos forem seus prompts, melhores ser&atilde;o os resultados.<\/p><p class=\"wp-block-paragraph\">Ao definir o objetivo do seu web app, inclua esses detalhes para que a Hostinger Horizons entenda sua ideia logo de cara:<\/p><ul class=\"wp-block-list\">\n<li><strong>Objetivo do aplicativo <\/strong>&ndash; indique claramente o problema que seu web app resolve. Por exemplo, &ldquo;ajudar os usu&aacute;rios a acompanhar o progresso do seu condicionamento f&iacute;sico&rdquo;.<\/li>\n\n\n\n<li><strong>Recursos principais <\/strong>&ndash; liste as fun&ccedil;&otilde;es essenciais que voc&ecirc; deseja incluir, como login de usu&aacute;rios, formul&aacute;rios, pain&eacute;is ou relat&oacute;rios.<\/li>\n\n\n\n<li><strong>Prefer&ecirc;ncias de interface <\/strong>&ndash; especifique os elementos de design, como layout, esquema de cores e est&eacute;tica geral.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Aqui est&aacute; um exemplo de prompt inicial para criar uma plataforma de fitness que gera planos personalizados de exerc&iacute;cios e dietas:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\"Crie uma plataforma de fitness que ofere&ccedil;a planos personalizados de exerc&iacute;cios e dietas com base nos dados do usu&aacute;rio. O aplicativo deve permitir que os usu&aacute;rios digitem sua idade, altura, peso, n&iacute;vel de atividade e condi&ccedil;&otilde;es de sa&uacute;de. Com base nesses dados, ele deve sugerir cronogramas de exerc&iacute;cios personalizados e recomenda&ccedil;&otilde;es de refei&ccedil;&otilde;es. Inclua um painel de controle f&aacute;cil com formul&aacute;rios de entrada, um rastreador de progresso e uma interface visualmente atraente, com um layout limpo e moderno e uma paleta de cores azul e roxa.\"<\/pre><p class=\"wp-block-paragraph\">Como qualquer outra ferramenta de IA, o primeiro resultado da Hostinger Horizons pode n&atilde;o ser perfeito, independentemente de qu&atilde;o detalhado tenha sido seu prompt inicial. A ideia &eacute; que, a partir dessa vers&atilde;o inicial do web app criada pela ferramenta, voc&ecirc; v&aacute; aprimorando seu projeto com prompts adicionais. &Eacute; isso que veremos a seguir.<\/p><h3 class=\"wp-block-heading\" id=\"h-4-personalize-o-design-de-seu-projeto\"><strong>4. Personalize o design de seu projeto<\/strong><\/h3><p class=\"wp-block-paragraph\">A pr&oacute;xima etapa envolve personalizar o design do aplicativo. Al&eacute;m de tornar seu web app mais atraente, esse processo tamb&eacute;m inclui a adi&ccedil;&atilde;o de elementos importantes para a navega&ccedil;&atilde;o e a funcionalidade do projeto.<\/p><p class=\"wp-block-paragraph\">Aqui est&atilde;o alguns dos componentes de front-end mais importantes a serem inclu&iacute;dos em seu aplicativo:<\/p><ul class=\"wp-block-list\">\n<li><strong>Menus <\/strong>&ndash; &aacute;reas como uma barra lateral, uma aba ou um menu suspenso que cont&ecirc;m atalhos para diferentes p&aacute;ginas.<\/li>\n\n\n\n<li><strong>Formul&aacute;rios <\/strong>&ndash; campos que permitem que os usu&aacute;rios insiram dados, como um endere&ccedil;o de e-mail ou uma imagem.<\/li>\n\n\n\n<li><strong>P&aacute;ginas <\/strong>&ndash; janelas em tela cheia contendo diferentes configura&ccedil;&otilde;es e informa&ccedil;&otilde;es.<\/li>\n\n\n\n<li><strong>Bot&otilde;es <\/strong>&ndash; elementos que executam determinadas a&ccedil;&otilde;es, como o envio de dados ou a navega&ccedil;&atilde;o para outra p&aacute;gina.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Se voc&ecirc; j&aacute; tiver um <strong>wireframe <\/strong>que detalhe o layout do web app e o posicionamento dos elementos, &eacute; poss&iacute;vel fazer o upload dele na Hostinger Horizons como um prompt. Com isso, seus resultados ser&atilde;o mais precisos.<\/p><p class=\"wp-block-paragraph\">Caso contr&aacute;rio, voc&ecirc; pode usar um prompt de texto, como no exemplo abaixo:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">Crie uma p&aacute;gina de login onde os usu&aacute;rios possam acessar suas contas. Nela, inclua um bot&atilde;o que redirecione os usu&aacute;rios para a p&aacute;gina de inscri&ccedil;&atilde;o onde eles poder&atilde;o criar uma nova conta, caso n&atilde;o tenham uma.<\/pre><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a74712c313e0\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a74712c313e0\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" 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\/2\/2025\/02\/hostinger-horizons-creates-a-web-app-login-page.png\/w=1024,h=1024,fit=scale-down\" alt=\"Criando uma p&aacute;gina de login para web app no Hostinger Horizons\n\" class=\"wp-image-123665\"><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\">Lembre-se de adicionar mais detalhes sobre o design de seu aplicativo, como cores, tamanho do texto e estilo da fonte. Para obter inspira&ccedil;&otilde;es e orienta&ccedil;&otilde;es, confira nosso tutorial com dicas de web design.<\/p><h3 class=\"wp-block-heading\" id=\"h-5-aprimore-a-logica-e-a-estrutura\"><strong>5. Aprimore a l&oacute;gica e a estrutura<\/strong><\/h3><p class=\"wp-block-paragraph\">Agora que voc&ecirc; j&aacute; tem o design definido, vamos refinar a funcionalidade do aplicativo. O processo continua o mesmo: voc&ecirc; vai digitando prompts sobre os aspectos que deseja melhorar.<\/p><p class=\"wp-block-paragraph\">Durante essa fase, &eacute; importante focar na l&oacute;gica e nos recursos do seu aplicativo. Algumas das mais comuns s&atilde;o:<\/p><ul class=\"wp-block-list\">\n<li><strong>L&oacute;gica de opera&ccedil;&atilde;o <\/strong>&ndash; as regras subjacentes do seu aplicativo. Por exemplo, seu web app de condicionamento f&iacute;sico deve fornecer recomenda&ccedil;&otilde;es diferentes de acordo com os dados de sa&uacute;de inseridos.<\/li>\n\n\n\n<li><strong>&Aacute;rvore de decis&atilde;o <\/strong>&ndash; o fluxo do seu aplicativo com base nas decis&otilde;es dos usu&aacute;rios. Por exemplo, se um usu&aacute;rio selecionar um determinado menu, uma p&aacute;gina predeterminada dever&aacute; ser exibida.<\/li>\n\n\n\n<li><strong>Tratamento de eventos <\/strong>&ndash; a rea&ccedil;&atilde;o &agrave;s a&ccedil;&otilde;es do usu&aacute;rio, como cliques, deslizes e pressionamentos de teclas. Por exemplo, um bot&atilde;o do tipo interruptor deve ter seu estado alterado ap&oacute;s o clique.<\/li>\n\n\n\n<li><strong>Fluxo de dados <\/strong>&ndash; o tratamento dos dados dos usu&aacute;rios digitados em formul&aacute;rios, validados ou enviados. Por exemplo, uma senha de usu&aacute;rio deve ser uma cadeia de texto que corresponda &agrave; entrada do banco de dados.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Ao escrever prompts para a Hostinger Horizons, certifique-se de descrever claramente a l&oacute;gica ou o recurso que voc&ecirc; deseja aprimorar. Procure dar todo o contexto poss&iacute;vel &agrave; IA, pois isso ajuda a produzir um resultado mais preciso.<\/p><p class=\"wp-block-paragraph\">Aqui est&aacute; um exemplo r&aacute;pido para refinar o fluxo de dados:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">Verifique os campos de endere&ccedil;o de e-mail e senha na p&aacute;gina de login. Certifique-se de que eles s&oacute; aceitem sequ&ecirc;ncias de textos que correspondam a entradas existentes no banco de dados.\n\nSe os dados inseridos n&atilde;o corresponderem a nenhuma entrada do banco de dados, retorne uma mensagem de erro dizendo: \"E-mail ou senha inv&aacute;lidos.\" Se as informa&ccedil;&otilde;es fornecidas forem v&aacute;lidas, redirecione o usu&aacute;rio para o painel principal.<\/pre><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a74712c37ff0\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a74712c37ff0\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" 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\/2\/2025\/02\/hostinger-horizons-adds-an-error-logic.png\/w=1024,h=1024,fit=scale-down\" alt=\"Adicionando uma l&oacute;gica de erro ao web app no Hostinger Horizons\n\" class=\"wp-image-123666\"><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\">Em seguida, verifique se a Hostinger Horizons configurou corretamente a l&oacute;gica e a funcionalidade do seu aplicativo, testando-as no painel de visualiza&ccedil;&atilde;o. Isso tamb&eacute;m te ajudar&aacute; a identificar se algum recurso est&aacute; faltando.<\/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                    Dica                <\/p>\n            <\/div>\n            <p class=\"protip__content\"> Para obter resultados melhores e mais precisos, foque em aprimorar um aspecto de seu web app de cada vez.<\/p>\n                    <\/div>\n        \n\n\n\n<\/p><h3 class=\"wp-block-heading\" id=\"h-6-conecte-seu-aplicativo-a-um-banco-de-dados\"><strong>6. Conecte seu aplicativo a um banco de dados<\/strong><\/h3><p class=\"wp-block-paragraph\">Um banco de dados permite que seu web app colete e armazene dados do usu&aacute;rio. Isso &eacute; essencial se o seu aplicativo tiver recursos como registro e contas de usu&aacute;rios, por exemplo.<\/p><p class=\"wp-block-paragraph\">A Hostinger Horizons permite que voc&ecirc; configure facilmente um banco de dados para seu aplicativo usando o <strong>Supabase<\/strong>.<\/p><p class=\"wp-block-paragraph\">Para isso, v&aacute; at&eacute; a <a href=\"https:\/\/supabase.com\/dashboard\/sign-up\" target=\"_blank\" rel=\"noopener\">p&aacute;gina de registro<\/a> do Supabase e crie uma nova conta. Crie uma nova organiza&ccedil;&atilde;o e selecione um plano &mdash; o plano gratuito &eacute; suficiente para um aplicativo b&aacute;sico e de pequena escala. Em seguida, crie um novo projeto digitando seu nome, a senha do banco de dados e a regi&atilde;o.<\/p><p class=\"wp-block-paragraph\">Em seguida, voc&ecirc; ir&aacute; para a p&aacute;gina do novo projeto. Nesse menu, copie o <strong>URL do projeto <\/strong>e <strong>a chave de API<\/strong>, que usaremos para conectar o banco de dados ao aplicativo.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a74712c3b27c\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a74712c3b27c\" 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\/53\/2025\/02\/image5.png\/w=1024,h=1024,fit=scale-down\" alt=\"Coletando credenciais de banco de dados no Supabase\n\" class=\"wp-image-48794\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2025\/02\/image5.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2025\/02\/image5.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2025\/02\/image5.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2025\/02\/image5.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\">Em seguida, pe&ccedil;a &agrave; Hostinger Horizons para configurar o back-end do seu aplicativo usando as credenciais que voc&ecirc; copiou do Supabase. Aqui est&aacute; um exemplo do prompt:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">Conecte o aplicativo ao meu banco de dados Supabase. Aqui est&atilde;o as credenciais:\n\n- URL do projeto: url-do-projeto.com\n\n- Chave da API: chave-da-api<\/pre><p class=\"wp-block-paragraph\">Em seguida, crie as tabelas necess&aacute;rias e conecte-as aos campos correspondentes no aplicativo.<\/p><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>Importante! <\/strong>Como conectar um banco de dados e desenvolver a l&oacute;gica do seu aplicativo s&atilde;o tarefas complexas, voc&ecirc; provavelmente precisar&aacute; refinar a conex&atilde;o com prompts adicionais. Sempre aprimore suas instru&ccedil;&otilde;es e teste novamente as altera&ccedil;&otilde;es para garantir que seu aplicativo esteja funcionando corretamente.\n            <\/p><\/div>\n\n\n\n<\/p><h3 class=\"wp-block-heading\" id=\"h-7-teste-e-publique-seu-web-app\"><strong>7. Teste e publique seu web app<\/strong><\/h3><p class=\"wp-block-paragraph\">Agora, seu web app j&aacute; deve estar totalmente desenvolvido e funcional. Antes de finaliz&aacute;-lo, verifique todos os recursos e a navega&ccedil;&atilde;o para ter certeza de que tudo est&aacute; funcionando corretamente.<\/p><p class=\"wp-block-paragraph\">Na Hostinger Horizons, voc&ecirc; pode interagir com seu web app diretamente no menu de visualiza&ccedil;&atilde;o, localizado no painel direito.<\/p><p class=\"wp-block-paragraph\">Aqui est&aacute; uma lista do que voc&ecirc; deve verificar no teste final do web app :<\/p><ul class=\"wp-block-list\">\n<li><strong>Funcionalidade <\/strong>&ndash; todos os recursos devem funcionar corretamente. Isso inclui a capacidade de executar <a href=\"https:\/\/www.geeksforgeeks.org\/crud-full-form\/\" target=\"_blank\" rel=\"noopener\">opera&ccedil;&otilde;es de banco de dados CRUD<\/a> e a l&oacute;gica de opera&ccedil;&atilde;o.<\/li>\n\n\n\n<li><strong>Navega&ccedil;&atilde;o <\/strong>&ndash; o fluxo do seu aplicativo e a funcionalidade dos elementos de navega&ccedil;&atilde;o. Por exemplo, se voc&ecirc; clicar em <strong>Login<\/strong>, dever&aacute; ir para o painel principal.<\/li>\n\n\n\n<li><strong>Visibilidade <\/strong>&ndash; a apar&ecirc;ncia do seu web app no desktop e em dispositivos m&oacute;veis. Certifique-se de que todos os elementos estejam dimensionados corretamente e tenham intera&ccedil;&atilde;o f&aacute;cil.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Por fim, vamos implantar o aplicativo. Como a Hostinger Horizons inclui um m&ecirc;s gr&aacute;tis do nosso <a href=\"\/br\/hospedagem-de-sites\">plano Premium de hospedagem<\/a>, voc&ecirc; pode publicar imediatamente seu web app, bastando clicar no bot&atilde;o <strong>Publicar <\/strong>no canto superior direito.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a74712c419bc\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a74712c419bc\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" 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\/2\/2025\/02\/the-deploy-button-on-hostinger-horizons.png\/w=1024,h=1024,fit=scale-down\" alt='Interface do Hostinger Horizons com bot&atilde;o \"deploy\" em destaque\n' class=\"wp-image-123669\"><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\">A Hostinger Horizons publicar&aacute; seu projeto usando um dom&iacute;nio tempor&aacute;rio. Antes de conectar seu pr&oacute;prio dom&iacute;nio, vamos concluir mais alguns testes adicionais.<\/p><p class=\"wp-block-paragraph\">Comece verificando <strong>a compatibilidade entre navegadores<\/strong>. Para isso, acesse seu web app em diferentes navegadores e dispositivos para verificar se h&aacute; algum problema.<\/p><p class=\"wp-block-paragraph\">Em seguida, verifique seu <strong>desempenho <\/strong>e a velocidade de carregamento usando uma ferramenta de benchmark, como o <a href=\"https:\/\/gtmetrix.com\/\" target=\"_blank\" rel=\"noopener\">GTMetrix<\/a>. Se o resultado estiver abaixo do ideal, pe&ccedil;a &agrave; Hostinger Horizons para otimizar o c&oacute;digo.<\/p><p class=\"wp-block-paragraph\">Se tudo estiver nos conformes, volte ao menu <strong>Sites <\/strong>no hPanel para conectar seu dom&iacute;nio ao web app.<\/p><p class=\"wp-block-paragraph\">&Eacute; isso a&iacute;! Parab&eacute;ns, voc&ecirc; criou e publicou seu web app usando o Hostinger Horizons.<\/p><h2 class=\"wp-block-heading\" id=\"h-conclusao\"><strong>Conclus&atilde;o<\/strong><\/h2><p class=\"wp-block-paragraph\">A Hostinger Horizons &eacute; uma plataforma de IA que permite desenvolver um web app completo sem mexer em programa&ccedil;&atilde;o. Basta digitar as instru&ccedil;&otilde;es e a ferramenta criar&aacute; qualquer aplicativo que voc&ecirc; tenha em mente.<\/p><p class=\"wp-block-paragraph\">Neste artigo, explicamos as etapas gerais para criar um web app usando a Hostinger Horizons. Aqui est&aacute; um resumo:<\/p><ol class=\"wp-block-list\">\n<li>Selecione um plano da <strong>Hostinger Horizons <\/strong>e inicie um novo projeto no hPanel.<\/li>\n\n\n\n<li>Familiarize-se com a interface da ferramenta.<\/li>\n\n\n\n<li>Digite seu primeiro prompt para definir o objetivo principal do seu web app.<\/li>\n\n\n\n<li>Personalize o layout, o design e os componentes de front-end de seu projeto.<\/li>\n\n\n\n<li>Refine a l&oacute;gica e a estrutura de opera&ccedil;&atilde;o do seu aplicativo para garantir uma funcionalidade perfeita.<\/li>\n\n\n\n<li>Crie um banco de dados <strong>Supabase <\/strong>e pe&ccedil;a &agrave; Hostinger Horizons para conect&aacute;-lo ao seu aplicativo.<\/li>\n\n\n\n<li>Teste seu aplicativo e coloque-o no ar usando o plano de hospedagem <strong>Premium <\/strong>da Hostinger.<\/li>\n<\/ol><p class=\"wp-block-paragraph\">Simples, n&atilde;o &eacute;? Agora &eacute; sua vez: hora de desenvolver seu primeiro web app usando o Hostinger Horizons.<\/p><p class=\"wp-block-paragraph\">Se voc&ecirc; tiver alguma d&uacute;vida, n&atilde;o hesite em usar a se&ccedil;&atilde;o de coment&aacute;rios aqui abaixo ou consultar nosso artigo com perguntas frequentes sobre a Hostinger Horizons. Boa sorte!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A Hostinger Horizons &eacute; uma ferramenta de IA que permite criar web apps sem mexer em c&oacute;digo. Por exemplo: se voc&ecirc; precisa de um aplicativo de fitness para criar planos de exerc&iacute;cios personalizados ou de uma ferramenta de gerenciamento de pessoal para uma organiza&ccedil;&atilde;o sem fins lucrativos, basta digitar seus pedidos e a Hostinger Horizons [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/br\/tutoriais\/criar-web-app-com-hostinger-horizons\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":356,"featured_media":48846,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"Crie um web app com a Hostinger Horizons: guia passo a passo","rank_math_description":"Aprenda a criar um web app usando a Hostinger Horizons: 1. Crie um novo projeto 2. Explore sua interface 3. Defina o objetivo do seu web app e mais.","rank_math_focus_keyword":"Criar web app com Hostinger Horizons","footnotes":""},"categories":[],"tags":[],"class_list":["post-48785","post","type-post","status-publish","format-standard","has-post-thumbnail","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}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/48785","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/users\/356"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/comments?post=48785"}],"version-history":[{"count":11,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/48785\/revisions"}],"predecessor-version":[{"id":50016,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/48785\/revisions\/50016"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media\/48846"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media?parent=48785"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/categories?post=48785"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/tags?post=48785"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}