Aprenda como vender ingressos online com um site tipo Eventbrite no code, usando o editor visual web Bubble.
Os eventos são uma forma poderosa de reunir comunidades para aprender, compartilhar experiências ou desfrutar da companhia umas das outras. Com ferramentas como Facebook events, Meetup e Eventbrite, nunca foi tão fácil usar uma solução existente para hospedar seu próprio evento.
Mas e se você for um criador que deseja fazer sua própria plataforma de eventos?
Felizmente, também é mais fácil do que nunca começar a desenvolver sua própria plataforma personalizada de eventos. Com ferramentas no code como o Bubble, os criadores de qualquer origem podem criar rapidamente um software poderoso para facilitar seus próprios eventos comunitários.
A plataforma única da Bubble simplificou o processo de desenvolvimento de software sem ter que escrever uma única linha de código. Usamos o Bubble para criar sites, diretórios e até redes sociais.
Ao longo deste guia, vamos destacar como criar as seguintes características principais de Eventbrite:
- Permitindo aos usuários criar e publicar eventos
- Exibindo uma lista de eventos em um feed da página inicial
- Hospedar detalhes do evento em uma página autônoma dinâmica
- Criar suporte para venda de bilhetes
As etapas para criar um Eventbrite no code incluem:
Índice
Faça seu cadastro gratuito no Bubble.
Caso ainda não tenha uma conta no Bubble.io, clique aqui para fazer seu cadastro gratuito, então você pode acompanhar enquanto criamos nosso aplicativo juntos.
Isso o ajudará a começar o trabalho ao criar seu site de vendas de ingressos.
Para este site, você precisará saber como criar e editar contas de usuário, o que já abordamos em nossos outros guias de instruções.
Ao iniciar seu projeto, você pode escolher começar criando um protótipo para o design do produto ou criando os campos necessários em seu banco de dados.
Neste caso, começaremos usando a ferramenta de design visual do Bubble para moldar a interface de usuário do nosso produto. Se você estiver baseando sua plataforma no Eventbrite, algumas das páginas principais que desejará incluir são:
- Uma página inicial – Apresentando uma lista de eventos
- Uma página para upload de eventos – Um portal onde os usuários podem criar e publicar eventos para a comunidade
- Uma página de evento individual – Exibindo todos os detalhes de um evento visualizado. Também vamos integrar nosso formulário de pagamento nesta página.
Um recurso importante do Bubble é a capacidade de enviar dados entre páginas. Isso permite que você crie uma versão genérica de uma página e, em seguida, exiba dinamicamente o conteúdo relevante de seu banco de dados quando for necessário.
No caso do seu site de eventos no code, você só precisará fazer uma página para hospedar seus eventos individuais. Podemos então criar a lógica necessária para exibir apenas o conteúdo do evento relevante em cada página quando for necessário (abordaremos isso com mais detalhes em breve).
Configurando seu banco de dados
Depois de mapear a exibição de seu produto, você pode se concentrar na criação dos tipos de dados necessários para alimentar seu aplicativo. Contaremos com esses tipos de dados e campos para conectar os workflows por trás de seu produto.
O banco de dados pré-construído do Bubble facilita a criação de diferentes tipos de dados com campos exclusivos. Ao criar o Eventbrite como um MVP, precisaremos dos seguintes tipos de dados e campos:
Tipo de dados: Eventos
Campos:
- Título
- Descrição
- Imagem apresentada
- Local
- Data
- Custo
- Categoria – Lista
- Participantes – Lista de usuários. Nota: Criar um campo baseado em lista, em um tipo de dados separado, permite que você integre perfeitamente todos os seus campos de dados relevantes, sem ter que criar valores de campo adicionais.
Tipo de dados: Usuário
Campos:
- Nome
- Endereço
- Eventos participados – Lista de eventos
Criando workflows
Agora que você estruturou o design e o banco de dados para seu aplicativo, é hora de começar a juntar tudo – tornando seu site funcional.
No Bubble, a principal maneira de fazer isso é com “workflows”. Cada workflow acontece quando ocorre um “evento” (ex: um usuário clica em um botão) e, em seguida, executa uma série de “ações” em resposta (ex: “inscreva o usuário”, “faça uma alteração no banco de dados”, etc. )
Publicando novos eventos
Um dos principais recursos do Eventbrite é a capacidade dos usuários de publicar seus eventos na plataforma da comunidade.
Você pode começar a criar esse processo na página de upload de eventos usando uma combinação de inputs, incluindo campos de texto livre, uploaders de imagem, seleções suspensas ou campos de seleção múltipla.
Depois que um usuário adiciona os detalhes relevantes em cada input, ele clica no botão criar para acionar uma nova entrada em seu banco de dados. Este clique de botão será a ação necessária para criar seu workflow.
Usando o editor de workflow, você pode optar por criar um novo item em seu banco de dados. Neste caso, estaremos criando um novo evento.
Você precisará então começar a adicionar dados aos campos relevantes em seu banco de dados. Mapeie cada input que deseja criar em relação ao campo de dados correspondente.
Exibir eventos em sua página inicial
Depois que os usuários começarem a publicar eventos na plataforma, você estará pronto para exibir cada item em um feed na página inicial. Isso pode ser obtido utilizando nosso elemento de grupo repetidor.
Grupos repetidores se integram ao seu banco de dados para exibir e atualizar uma lista de conteúdo dinâmico relevante.
Ao usar um grupo repetidor, você precisará primeiro vincular o elemento a um tipo de dados em seu banco de dados. Neste caso, você classificará o tipo como um evento.
Você também precisará definir a fonte de dados como uma lista de todos os eventos enviados do seu banco de dados. Se desejar segmentar um grupo repetidor por uma categoria de evento específica, você pode adicionar uma restrição extra à sua fonte de dados.
Agora você pode começar a estruturar o conteúdo dinâmico que será exibido em cada grade. Simplesmente mapeie a primeira coluna com o conteúdo relevante que você gostaria de mostrar. O grupo repetidor preencherá as colunas restantes com base em seus dados existentes.
Criando eventos de navegação
Dentro de um grupo repetidor, também é possível criar eventos dentro de cada coluna individual.
Este recurso se tornará útil ao criar funções de navegação em sua plataforma. Como a página inicial da Eventbrite exibe apenas uma visão geral de cada evento (incluindo seu título, imagem, data e preço), você precisará exibir todos os detalhes do evento para cada item exclusivo em uma página dedicada.
Este conteúdo adicional precisará ser hospedado na sua página do evento individual.
Para potencializar essa ação, você começará criando um workflow que redireciona um usuário para sua página de evento quando a imagem dos grupos repetidores é clicada.
Ao criar este workflow, use um evento de navegação para enviar um usuário a outra página. A partir daqui, selecione o tipo da página de destino como a página do evento.
Em seguida, você precisará enviar dados adicionais a esta página para que o editor do Bubble saiba qual evento específico exibir. Os dados que você precisa exibir são os do evento da célula atual.
Exibir conteúdo dinâmico em uma página de eventos
Quando um usuário é direcionado para uma página de evento específica, você pode obter facilmente esses dados de evento do seu workflow para exibir o conteúdo relevante.
Antes de criarmos esse workflow, você primeiro precisa garantir que o tipo da página corresponda à propriedade de dados que está enviando por meio da lógica de eventos. Nesse caso, você precisará definir a página do evento como o tipo evento.
Agora você pode começar a adicionar conteúdo dinâmico em seus elementos de página, exibindo as informações do evento que foi enviado em seu workflow.
Comprando ingressos para eventos
Quando um usuário visita a página de um evento e decide comprar um ingresso, precisaremos criar uma função para dar suporte ao processo de pagamentos.
Usando o Bubble, é possível aproveitar o poder de vários plug-ins para aceitar pagamentos e processar pedidos com facilidade.
Neste guia, usaremos o plug-in Stripe.js para processar pagamentos com cartão de crédito por meio do Stripe.
Nota: Depois de integrar este plug-in, você precisará primeiro configurar suas chaves de API nas configurações do plug-in.
Para começar a aceitar pagamentos, você deve criar uma interface de suporte ao checkout, permitindo que os usuários adicionem suas informações do cartão de crédito. Para o bem do nosso MVP, adicionaremos esses campos relevantes abaixo do botão de compra.
Você também precisará adicionar um elemento de token Stripe ao lado do formulário de pagamento. Este elemento não será visível para seus usuários finais, mas é essencial para alimentar uma nova transação no Stripe.
Em seguida, criaremos um novo workflow que aciona um pagamento Stripe quando o ‘botão comprar’ é clicado.
Você começará selecionando o evento ‘converter cartão em Stripetoken A’. Nesse evento, você precisará configurar os inputs do cartão de crédito para corresponder à estrutura de pagamento do Stripe.
Depois que um cartão foi convertido em token Stripe, podemos criar um workflow adicional que processa automaticamente esse token da conta bancária de um usuário.
Quando um token Stripe para uma conta bancária for criado, você usará o evento ‘Stripe.js – charge – create’ para verificar esse token, bem como o valor final que será pago (incluindo a moeda).
Recursos adicionais
Depois de familiarizar-se com a criação de campos de dados personalizados e exibição de conteúdo dinâmico, você pode começar a ser criativo com os recursos que adiciona à sua plataforma de eventos e ingressos no code.
Para alguns recursos adicionais, você pode:
- Criar um recurso de acompanhamento para que os usuários monitorem novos eventos de seus anfitriões favoritos
- Adicionar suporte para os usuários publicarem perguntas nas páginas de eventos
- Adicionar restrições de número de ingressos
- Adicionar níveis diferentes para preços de ingressos
Quer saber mais sobre o Movimento Sem Codar? Veja também:
- Criar um App Nativo Offline integrado à sua Aplicação Web (Thunkable e Bubble.io)
- Criando uma Biblioteca de Vídeos no Bubble (Renaflix Parte 2)
- GATEWAYS DE PAGAMENTO: As melhores taxas para pagamentos online (2020)
ATENÇÃO: Este é um tutorial traduzido para Português a partir do original em Inglês. O Bubble possui dezenas de tutoriais ensinando a criar aplicativos de forma 100% visual, sem precisar programar.
Acesse aqui todos os tutoriais: https://bubble.io/how-to-build
Acesse aqui a versão original deste tutorial em inglês: https://bubble.io/blog/build-no-code-eventbrite-clone/
