Como criar um web app usando a Hostinger Horizons
A Hostinger Horizons é uma ferramenta de IA que permite criar web apps sem mexer em código. Por exemplo: se você precisa de um aplicativo de fitness para criar planos de exercícios personalizados ou de uma ferramenta de gerenciamento de pessoal para uma organização sem fins lucrativos, basta digitar seus pedidos e a Hostinger Horizons cuidará do resto.
Por isso, a Horizons é uma excelente opção para criadores de web apps iniciantes, mesmo sem nenhuma experiência em programação. Quem também pode se beneficiar são microempreendedores com orçamento limitado, pois é possível criar aplicativos totalmente funcionais sem contratar desenvolvedores.
Neste guia, você aprenderá a criar um web app usando a Hostinger Horizons, desde a configuração do seu primeiro projeto até o lançamento para o público. Você descobrirá como melhorar seus prompts para obter resultados aprimorados, usar os principais recursos de forma eficaz e otimizar a funcionalidade do seu aplicativo para atender às suas necessidades. Vamos lá?
Criando um web app em seis passos com a Hostinger Horizons
Para ilustrar melhor o processo de criação de um web app com a Hostinger Horizons, neste tutorial criaremos um web app de fitness que gera planos personalizados de exercícios e dieta com base nos dados do usuário (como idade, altura, peso, nível de atividade e condições de saúde existentes).
Se você estiver trabalhando em um outro tipo de web app, basta ajustar os prompts e os recursos de acordo.
1. Registre-se e crie um novo projeto
Comece visitando a página oficial da Hostinger Horizons e escolha um plano que atenda às suas necessidades. A partir de R$ 58,99/mês, todos os nossos planos oferecem os mesmos recursos para criar seus web apps, bem como um mês de hospedagem gratuita. A diferença está nos limites de mensagens por mês que você pode trocar com a IA, que vão até 1.000 mensagens.
Observe que, no momento, a Hostinger Horizons está em fase inicial de acesso, portanto, você pode se deparar com alguns erros ao usá-lo. Mas não se preocupe: nós oferecemos uma garantia de reembolso em até 30 dias, que permite que você cancele a qualquer momento se mudar de ideia.
Depois de concluir o pagamento, vá até o hPanel e clique em Gerenciar ao lado do plano recém-adquirido.
Em seguida, clique em Adicionar Site e selecione Hostinger Horizons.
2. Explore a ferramenta
É hora de começar a usar a Hostinger Horizons .
Você verá um campo de texto onde poderá escrever seu prompt em mais de 80 idiomas. Depois de descrever como deseja o seu web app, pressione Enter.
A Hostinger Horizons levará alguns instantes para processar seu prompt. Quando estiver pronto, o painel de controle se dividirá em duas partes:
- Painel esquerdo – contém a troca de mensagens com a IA, onde você pode digitar prompts adicionais para adicionar mais recursos ou aprimorar seu web app.
- Painel direito – mostra uma visualização em tempo real do seu aplicativo à medida que você faz ajustes. Você pode interagir com os elementos para testar sua funcionalidade.
No canto superior direito do painel, você encontrará:
- Mensagens restantes – mostra o número de mensagens restantes em seu plano.
- Implantar – o botão para publicar seu web app, tornando-o acessível ao público.
3. Defina o objetivo do seu web app
A Hostinger Horizons se baseia em prompts (isto é, instruções escritas em linguagem natural) para gerar o web app que você tem em mente. Portanto, quanto mais precisos forem seus prompts, melhores serão os resultados.
Ao definir o objetivo do seu web app, inclua esses detalhes para que a Hostinger Horizons entenda sua ideia logo de cara:
- Objetivo do aplicativo – indique claramente o problema que seu web app resolve. Por exemplo, “ajudar os usuários a acompanhar o progresso do seu condicionamento físico”.
- Recursos principais – liste as funções essenciais que você deseja incluir, como login de usuários, formulários, painéis ou relatórios.
- Preferências de interface – especifique os elementos de design, como layout, esquema de cores e estética geral.
Aqui está um exemplo de prompt inicial para criar uma plataforma de fitness que gera planos personalizados de exercícios e dietas:
"Crie uma plataforma de fitness que ofereça planos personalizados de exercícios e dietas com base nos dados do usuário. O aplicativo deve permitir que os usuários digitem sua idade, altura, peso, nível de atividade e condições de saúde. Com base nesses dados, ele deve sugerir cronogramas de exercícios personalizados e recomendações de refeições. Inclua um painel de controle fácil com formulá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."
Como qualquer outra ferramenta de IA, o primeiro resultado da Hostinger Horizons pode não ser perfeito, independentemente de quão detalhado tenha sido seu prompt inicial. A ideia é que, a partir dessa versão inicial do web app criada pela ferramenta, você vá aprimorando seu projeto com prompts adicionais. É isso que veremos a seguir.
4. Personalize o design de seu projeto
A próxima etapa envolve personalizar o design do aplicativo. Além de tornar seu web app mais atraente, esse processo também inclui a adição de elementos importantes para a navegação e a funcionalidade do projeto.
Aqui estão alguns dos componentes de front-end mais importantes a serem incluídos em seu aplicativo:
- Menus – áreas como uma barra lateral, uma aba ou um menu suspenso que contêm atalhos para diferentes páginas.
- Formulários – campos que permitem que os usuários insiram dados, como um endereço de e-mail ou uma imagem.
- Páginas – janelas em tela cheia contendo diferentes configurações e informações.
- Botões – elementos que executam determinadas ações, como o envio de dados ou a navegação para outra página.
Se você já tiver um wireframe que detalhe o layout do web app e o posicionamento dos elementos, é possível fazer o upload dele na Hostinger Horizons como um prompt. Com isso, seus resultados serão mais precisos.
Caso contrário, você pode usar um prompt de texto, como no exemplo abaixo:
Crie uma página de login onde os usuários possam acessar suas contas. Nela, inclua um botão que redirecione os usuários para a página de inscrição onde eles poderão criar uma nova conta, caso não tenham uma.
Lembre-se de adicionar mais detalhes sobre o design de seu aplicativo, como cores, tamanho do texto e estilo da fonte. Para obter inspirações e orientações, confira nosso tutorial com dicas de web design.
5. Aprimore a lógica e a estrutura
Agora que você já tem o design definido, vamos refinar a funcionalidade do aplicativo. O processo continua o mesmo: você vai digitando prompts sobre os aspectos que deseja melhorar.
Durante essa fase, é importante focar na lógica e nos recursos do seu aplicativo. Algumas das mais comuns são:
- Lógica de operação – as regras subjacentes do seu aplicativo. Por exemplo, seu web app de condicionamento físico deve fornecer recomendações diferentes de acordo com os dados de saúde inseridos.
- Árvore de decisão – o fluxo do seu aplicativo com base nas decisões dos usuários. Por exemplo, se um usuário selecionar um determinado menu, uma página predeterminada deverá ser exibida.
- Tratamento de eventos – a reação às ações do usuário, como cliques, deslizes e pressionamentos de teclas. Por exemplo, um botão do tipo interruptor deve ter seu estado alterado após o clique.
- Fluxo de dados – o tratamento dos dados dos usuários digitados em formulários, validados ou enviados. Por exemplo, uma senha de usuário deve ser uma cadeia de texto que corresponda à entrada do banco de dados.
Ao escrever prompts para a Hostinger Horizons, certifique-se de descrever claramente a lógica ou o recurso que você deseja aprimorar. Procure dar todo o contexto possível à IA, pois isso ajuda a produzir um resultado mais preciso.
Aqui está um exemplo rápido para refinar o fluxo de dados:
Verifique os campos de endereço de e-mail e senha na página de login. Certifique-se de que eles só aceitem sequências de textos que correspondam a entradas existentes no banco de dados. Se os dados inseridos não corresponderem a nenhuma entrada do banco de dados, retorne uma mensagem de erro dizendo: "E-mail ou senha inválidos." Se as informações fornecidas forem válidas, redirecione o usuário para o painel principal.
Em seguida, verifique se a Hostinger Horizons configurou corretamente a lógica e a funcionalidade do seu aplicativo, testando-as no painel de visualização. Isso também te ajudará a identificar se algum recurso está faltando.
Dica
Para obter resultados melhores e mais precisos, foque em aprimorar um aspecto de seu web app de cada vez.
6. Conecte seu aplicativo a um banco de dados
Um banco de dados permite que seu web app colete e armazene dados do usuário. Isso é essencial se o seu aplicativo tiver recursos como registro e contas de usuários, por exemplo.
A Hostinger Horizons permite que você configure facilmente um banco de dados para seu aplicativo usando o Supabase.
Para isso, vá até a página de registro do Supabase e crie uma nova conta. Crie uma nova organização e selecione um plano — o plano gratuito é suficiente para um aplicativo básico e de pequena escala. Em seguida, crie um novo projeto digitando seu nome, a senha do banco de dados e a região.
Em seguida, você irá para a página do novo projeto. Nesse menu, copie o URL do projeto e a chave de API, que usaremos para conectar o banco de dados ao aplicativo.
Em seguida, peça à Hostinger Horizons para configurar o back-end do seu aplicativo usando as credenciais que você copiou do Supabase. Aqui está um exemplo do prompt:
Conecte o aplicativo ao meu banco de dados Supabase. Aqui estão as credenciais: - URL do projeto: url-do-projeto.com - Chave da API: chave-da-api
Em seguida, crie as tabelas necessárias e conecte-as aos campos correspondentes no aplicativo.
Importante! Como conectar um banco de dados e desenvolver a lógica do seu aplicativo são tarefas complexas, você provavelmente precisará refinar a conexão com prompts adicionais. Sempre aprimore suas instruções e teste novamente as alterações para garantir que seu aplicativo esteja funcionando corretamente.
7. Teste e publique seu web app
Agora, seu web app já deve estar totalmente desenvolvido e funcional. Antes de finalizá-lo, verifique todos os recursos e a navegação para ter certeza de que tudo está funcionando corretamente.
Na Hostinger Horizons, você pode interagir com seu web app diretamente no menu de visualização, localizado no painel direito.
Aqui está uma lista do que você deve verificar no teste final do web app :
- Funcionalidade – todos os recursos devem funcionar corretamente. Isso inclui a capacidade de executar operações de banco de dados CRUD e a lógica de operação.
- Navegação – o fluxo do seu aplicativo e a funcionalidade dos elementos de navegação. Por exemplo, se você clicar em Login, deverá ir para o painel principal.
- Visibilidade – a aparência do seu web app no desktop e em dispositivos móveis. Certifique-se de que todos os elementos estejam dimensionados corretamente e tenham interação fácil.
Por fim, vamos implantar o aplicativo. Como a Hostinger Horizons inclui um mês grátis do nosso plano Premium de hospedagem, você pode publicar imediatamente seu web app, bastando clicar no botão Publicar no canto superior direito.
A Hostinger Horizons publicará seu projeto usando um domínio temporário. Antes de conectar seu próprio domínio, vamos concluir mais alguns testes adicionais.
Comece verificando a compatibilidade entre navegadores. Para isso, acesse seu web app em diferentes navegadores e dispositivos para verificar se há algum problema.
Em seguida, verifique seu desempenho e a velocidade de carregamento usando uma ferramenta de benchmark, como o GTMetrix. Se o resultado estiver abaixo do ideal, peça à Hostinger Horizons para otimizar o código.
Se tudo estiver nos conformes, volte ao menu Sites no hPanel para conectar seu domínio ao web app.
É isso aí! Parabéns, você criou e publicou seu web app usando o Hostinger Horizons.
Conclusão
A Hostinger Horizons é uma plataforma de IA que permite desenvolver um web app completo sem mexer em programação. Basta digitar as instruções e a ferramenta criará qualquer aplicativo que você tenha em mente.
Neste artigo, explicamos as etapas gerais para criar um web app usando a Hostinger Horizons. Aqui está um resumo:
- Selecione um plano da Hostinger Horizons e inicie um novo projeto no hPanel.
- Familiarize-se com a interface da ferramenta.
- Digite seu primeiro prompt para definir o objetivo principal do seu web app.
- Personalize o layout, o design e os componentes de front-end de seu projeto.
- Refine a lógica e a estrutura de operação do seu aplicativo para garantir uma funcionalidade perfeita.
- Crie um banco de dados Supabase e peça à Hostinger Horizons para conectá-lo ao seu aplicativo.
- Teste seu aplicativo e coloque-o no ar usando o plano de hospedagem Premium da Hostinger.
Simples, não é? Agora é sua vez: hora de desenvolver seu primeiro web app usando o Hostinger Horizons.
Se você tiver alguma dúvida, não hesite em usar a seção de comentários aqui abaixo ou consultar nosso artigo com perguntas frequentes sobre a Hostinger Horizons. Boa sorte!
Jornalista formado pela Universidade Federal da Bahia e Especialista em Marketing de Conteúdo na Hostinger, onde atuo na criação e otimização de artigos úteis, envolventes e criativos em áreas como desenvolvimento web e, marketing. Além disso, sou colaborador eventual do site MacMagazine e da editoria de cultura do Jornal A Tarde, fascinado por arte, culinária e tecnologia.
