Como criar um cartão de visita virtual com a Hostinger Horizons

Um cartão de visita virtual é a versão digital do tradicional cartãozinho de contato. Com ele, você não precisa lidar com pilhas de cartões de papel para fornecer seus dados a alguém — basta fornecer um link (ou código QR) que está sempre pronto para ser usado quando você precisar. Além disso, ao contrário dos cartões de visita físicos, o cartão virtual pode incluir links diretos para seus perfis nas redes sociais e para seu portfólio online.

O problema é que pode ser difícil encontrar o aplicativo ideal para fazer seu cartão de visita virtual. Alguns não oferecem recursos essenciais, outros são cheios de firulas desnecessárias e muitos não oferecem opções de personalização suficientes.

Por isso, eu decidi criar o meu próprio aplicativo. Neste artigo, vou mostrar como eu criei um web app para meu cartão de visita virtual usando a Hostinger Horizons, sem mexer em uma linha de código sequer. Vamos começar!

O que é Hostinger Horizons?

Hostinger Horizons é uma ferramenta de inteligência artificial que serve para criar web apps sem mexer em programação. Basta escrever instruções simples e a IA criará o web app que você tem em mente.

Como eu não tenho experiência avançada em linguagens de programação e não saberia escrever códigos longos e complexos para criar um web app do zero, fiquei feliz de saber que não precisaria me preocupar com a parte técnica da coisa — pois a Hostinger Horizons cuida de tudo, desde a criação até a publicação do projeto.

A ferramenta está disponível em mais de 80 idiomas, portanto, você pode começar a criar seu aplicativo simplesmente descrevendo o que deseja no idioma de sua preferência.

Melhor ainda: logo de cara, a Hostinger Horizons já está integrada com a plataforma de hospedagem da Hostinger. Desta forma, quando seu web app estiver pronto, você poderá publicá-lo instantaneamente.

Planejando seu cartão de visita virtual

Para começar meu projeto, eu anotei todas as funcionalidades e elementos de design que queria no web app do meu cartão de visita virtual. Aqui está um detalhamento do meu plano:

• Informações de contato – o web app deve permitir que eu digite meu nome, cargo, empresa, e-mail, número de telefone, site e links de mídia social por meio de um formulário fácil de usar.
• Foto de perfil e logo da empresa – o web app deve permitir que eu faça upload de uma foto minha e do logotipo da empresa para personalizar meu cartão de visita virtual.
• Personalização básica – o web app deve ser capaz de personalizar o design do meu cartão de visita selecionando diferentes estilos de fonte, cores e layouts.
• Compartilhamento – o web app deve gerar meu cartão de visita virtual como uma imagem PNG e fornecer um botão de download para facilitar o compartilhamento.
• Edição e atualização – o web app deve permitir que eu edite e atualize minhas informações facilmente a qualquer momento.

Como criar um cartão visita virtual com a Hostinger Horizons: passo a passo

Agora, vamos ver exatamente como eu usei a Hostinger Horizons para criar meu web app de cartão de visita virtual.

1. Iniciando o projeto

Para iniciar esse projeto, escolhi o plano que melhor atendia às minhas necessidades. Os planos da Hostinger Horizons partem de R$ 58,99/mês com uma garantia de reembolso de 30 dias.

Todos os planos incluem os mesmos recursos e um mês de hospedagem Business para colocar seu web app no ar. A única diferença é o limite de mensagens que você pode trocar com a ferramenta — variando de 50 mensagens no plano Explorer a 1.000 mensagens no plano mais alto.

Depois de comprar meu plano, fui até o hPanel e cliquei em Sites→ Lista de Sites na barra lateral esquerda.

Em seguida, cliquei em Adicionar site ao lado do meu novo plano de hospedagem e selecionei a opção Hostinger Horizons na lista.

A página inicial do Hostinger Horizons tem um campo para digitar a instrução que eu usarei para começar a criar meu web app.

2. Adicionando recursos básicos

Em uma instrução clara e concisa, descrevi a ideia do web app para meu cartão de visita virtual, detalhando os principais recursos e elementos de design que eu desejo. Este foi o prompt exato que eu usei:

Crie um web app de cartão de visita virtual que permita que eu insira/edite minhas informações profissionais e personalize o design do cartão. Inclua a funcionalidade de carregar minha foto de perfil e o logotipo da empresa.

Depois que apertei Enter, a ferramenta processou meu prompt e me apresentou uma versão básica do meu web app. Nesta primeira versão, o aplicativo já conta com um design limpo e campos apropriados para meus detalhes de contato, bem como áreas para fazer o upload da minha foto de perfil e o logotipo da empresa.

A ferramenta também criou uma pré-visualização ao vivo ao lado da área onde entro com meus dados, onde é possível ver meu cartão de visita virtual tomando forma à medida que eu insiro minhas informações nos campos correspondentes.

Aqui está o resultado da pré-visualização depois que preenchi todos os campos e fiz o upload das minhas imagens:

3. Melhore a interface e a experiência do usuário

Para continuar, meu objetivo era aprimorar a interface do usuário (UI) e a experiência do usuário (UX) do meu web app para torná-lo mais personalizável e funcional.

Opções de personalização

Pensei em criar uma experiência de personalização mais flexível e fácil de usar, com foco na seleção de fontes, paletas de cores e opções de layout.

Dei a seguinte instrução para que a Hostinger Horizons adicionasse alguns recursos:

Expanda a seleção de fontes, com uma opção de visualização para ver como cada fonte fica no cartão de visita virtual. Ofereça uma gama maior de opções de cores, incluindo a possibilidade de criar paletas de cores personalizadas. Ofereça diferentes opções de layout, como layouts verticais ou horizontais, e permita que os usuários ajustem o espaçamento e o alinhamento.

Após o processamento do prompt, a ferramenta adicionou algumas seções para personalizar a aparência do meu cartão de visita virtual. Foram criadas quatro abas: Conteúdo, Estilo, Layout e Espaçamento, cada uma com opções para alterar aspectos visuais do cartão de visitas.

Depois de fazer algumas personalizações em meu cartão de visita usando os recursos recém-adicionados, este é o resultado que obtive na visualização:

Funcionalidade de salvar e editar

Eu queria adicionar a possibilidade de salvar um cartão de visita para edição futura. Dessa forma, eu poderia manter meu design e continuar trabalhando nele posteriormente para fazer outras atualizações.

Para fazer isso, eu precisava de uma lógica melhor para gerenciar e editar cartões salvos. Decidi adicionar uma página inicial ao web app em que eu possa optar por Criar um novo cartão ou Editar um cartão existente. Na área de edição, incluí um botão Salvar cartão para salvar meu design atual. 

Digitei o prompt abaixo na Hostinger Horizons para implementar essas melhorias:

Adicione uma página inicial com opções para "Criar um novo cartão" ou "Editar cartão existente". Na página de edição, inclua um botão "Salvar cartão" para salvar o design atual.

A ferramenta de IA apresentou uma página inicial limpa e intuitiva, conforme minha solicitação.

Após salvar um cartão, ele é rotulado com meu nome, facilitando a localização do cartão específico que eu estou procurando.

Recurso de download fácil

Depois de projetar meu web e aprimorar o fluxo de edição, eu precisava de um recurso para compartilhar meu cartão de visita virtual. A ideia era manter as coisas simples, então decidi ter apenas uma opção de download para salvar meu cartão como uma imagem PNG.

Para isso, adicionei um botão Baixar embaixo da pré-visualização do cartão na página do editor — bastou digitar esse prompt na ferramenta de IA:

Adicione um botão "Baixar PNG" abaixo da pré-visualização do cartão na página do editor. Esse botão deve permitir que eu faça o download do meu cartão de visita virtual como uma imagem PNG com resolução ideal.

Agora, eu posso fazer o download do cartão de visita virtual que criei e compartilhá-lo com qualquer pessoa, seja enviando-o como anexo de e-mail, publicando-o nas mídias sociais, imprimindo-o ou até mesmo exibindo-o em meu site.

Publicando e testando seu web app de cartão de visita virtual

Com meu web app pronto, é hora de colocá-lo no ar. A parte boa é que a Hostinger Horizons torna esse processo basicamente instantâneo: clicando em um botão, meu aplicativo está online para ser usado por qualquer pessoa.

Ele foi publicado com um domínio temporário, mas eu posso facilmente conectar meu web app a um domínio personalizado. Para isso, basta clicar no Obter domínio na janela pop-up Publicado com sucesso ou selecionar Alterar domínio na página da lista de sites no hPanel.

Quer ver o resultado ao vivo? Confira meu web app — não precisa fazer login.

Como em qualquer projeto de desenvolvimento, encontrei alguns problemas ao longo do caminho. Por exemplo, apareceram alguns erros ao tentar adicionar opções de personalização de fontes e cores.

Por sorte, o Hostinger Horizons tem recursos robustos para solucionar erros. Simplesmente pedi que a ferramenta corrigisse o problema com o clique de um botão.

A Hostinger Horizons detectou o problema, explicou a solução proposta e corrigiu o erro por conta própria, sem nenhuma intervenção da minha parte. Depois disso, a pré-visualização voltou a funcionar normalmente.

A primeira versão do meu web app após a publicação também não estava perfeita, pois a área de visualização do cartão de visita não era responsiva e estava muito grande na tela.

Informei a Hostinger Horizons sobre o problema, e a ferramenta rapidamente o corrigiu para mim.

Essa experiência me mostrou que a Hostinger Horizons não apenas simplifica o desenvolvimento de web apps, mas também facilita a solução de problemas — mesmo que você não tenha nenhum conhecimento técnico. Se quiser mais detalhes, confira nosso guia sobre como começar a usar a Hostinger Horizons. 

Conclusão

Criar meu próprio web app para cartões de visita virtuais com a Hostinger Horizons foi uma experiência surpreendentemente divertida! Foi como ter um desenvolvedor dedicado à minha disposição, e fiquei surpreso com a qualidade da ferramenta que criei sem mexer em uma linha de código sequer.

Adorei a facilidade de personalizar o design e os recursos de acordo com minha ideia. E a melhor parte? Eu não precisei lidar com nenhum código complexo ou ferramentas de design — tudo o que eu precisei foi descrever minha visão, dando à Hostinger Horizons as instruções certas.

Se você estiver procurando uma maneira descomplicada de criar seu próprio web app, recomendo fortemente a Hostinger Horizons!

Participe de nosso canal no Discord para obter mais dicas e inspirações sobre como aproveitar a ferramenta ao máximo. Conecte-se com a comunidade, obtenha conselhos de especialistas e fique atualizado sobre os recursos mais recentes. Boa sorte!