Conteúdo[Esconder][Mostrar]
- O que é o Bubble.io?
- O que é programação visual?
- Que tipos de aplicativos você pode desenvolver?
Criando um aplicativo com Bubble (Tutorial)+-
- 1. Introdução
- 2. Configurando o banco de dados
- 3. Criação de fluxos de trabalho
- 4. Criando uma notícia
- 5. Exibindo conteúdo dinâmico no feed
- 6. Envio de dados entre páginas
- 7. Exibindo conteúdo dinâmico na página da história
- 8. Exibindo o artigo do editor
- 9. Seguir editores
- 10. Recursos adicionais que você pode adicionar
- 11. O resultado
- Prós
- Desvantagens
- Preços
- Conclusão
Recentemente me interessei por outras abordagens de desenvolvimento web além de HTML, CSS e JavaScript.
Com o crescente cenário sem código, não foi surpreendente descobrir que existem várias alternativas para as abordagens mais padronizadas para o desenvolvimento de aplicativos da web.
Você deve estar familiarizado com algumas das plataformas CMS mais conhecidas, como o WordPress, que são praticamente livres de código. Mas, se você deseja criar aplicativos da Web, essas plataformas podem parecer restritivas.
Aqui apresento a você o Bubble.io, um poderoso ferramenta sem código que permite criar aplicativos da Web como nunca antes.
Vamos explorá-lo em profundidade!
O que é a Bolha.io?
Bubble é uma plataforma não técnica que combina uma linguagem de programação visual e um estrutura de desenvolvimento web.
Os usuários podem usar essas ferramentas de programação para construir aplicativos on-line exclusivos, alterar bancos de dados e processos, adicionar componentes de página (imagens, texto, formulários de entrada, mapas) e projetar suas interfaces.
É um mercado onde você pode descobrir modelos, plug-ins e serviços ideais para ajudá-lo a criar produtos fortes.
Sem ter que configurar uma estrutura de programação típica, você pode criar qualquer coisa, desde um marketplace até uma rede social e um CRM (Customer Relationship Management) usando o Bubble.
Ele oferece aos clientes a capacidade de criar e personalizar seus aplicativos usando uma interface amigável e um editor de apontar e clicar.
Você pode usá-lo em conjunto com serviços que fornecem uma API REST, como Facebook, SQL, análises e aplicativos de pagamento. Ele permite que os usuários dediquem tempo para melhorar a funcionalidade e a aparência de seus aplicativos para que fiquem bem em tablets e dispositivos móveis.
É apropriado para todos os portes de negócios, de pequeno a médio e grande porte; e acessível para Windows, Mac e web.
O que é programação visual?
A programação visual é essencialmente o que parece. Em vez de programar manualmente escrevendo código, você faz isso graficamente clicando e arrastando componentes para as páginas.
Não se deixe enganar por essa breve descrição.
Não é como qualquer outro aplicativo de corte de biscoitos ou ferramenta de criação de sites que você encontrou online. A maioria dos criadores de aplicativos exige que você confie em modelos básicos e tenha uma funcionalidade extremamente limitada; eles só permitem que você desenvolva tipos específicos de aplicativos e limitam sua personalização.
Embora a noção de “programação visual” e “arrastar e soltar” pareça fácil no Bubble, ela é tremendamente poderosa.
Seu ambiente de programação visual não apenas permite arrastar objetos como texto, gráficos, entradas e muito mais para uma página, mas também permite configurar o que esses elementos fazem.
O que a Bolha faz?
O objetivo principal do Bubble é permitir que qualquer pessoa crie aplicativos da web sem ter que escrever código.
No entanto, embora isso forneça uma declaração de objetivo facilmente lembrada, deixa de fora uma parte significativa da história. O caminho da ideia ao mercado é mais complicado do que apenas criar linhas de código.
Uma equipe de profissionais altamente treinados trabalhando em certas seções da criação, crescimento e manutenção do aplicativo é necessária no desenvolvimento convencional. Considere isto.
O que cada aplicativo exige?
- Segurança para garantir que ninguém tenha acesso não autorizado aos dados.
- Um banco de dados para armazenar e recuperar informações como itens, artigos e atualizações de mídia social.
- Escalabilidade para permitir o desenvolvimento sem impedimentos da base de usuários e do volume de dados.
- Uma interface de usuário agradável para tornar o aplicativo atraente e fácil de usar.
- Integração com diversos serviços e sistemas.
Bubble substitui muito mais do que um codificador. Ele fornece todos esses serviços de maneira visualmente atraente e altamente automatizada, tornando concebível, se não simples, que uma única pessoa lide com tudo.
Enquanto as plataformas anteriores sem código tentaram substituir a codificação de várias maneiras. Seu conceito é remover o máximo de barreiras possível para que um aplicativo chegue ao mercado, lidando com tudo, desde design responsivo e animações até hospedagem, implantação de versão, segurança e operações de banco de dados.
Usando o conector de API para conectar o Bubble a outros serviços
Seu conector de API é provavelmente o plugin mais importante do mercado. Como o nome indica, isso permite que você se conecte a outros aplicativos e serviços para compartilhar ações e dados.
Em vez de se aprofundar nas especificações técnicas de como isso funciona, considere estes exemplos do que as APIs podem realizar:
- Obtendo acesso a aprendizado de máquina métodos como reconhecimento de imagem e tradução.
- Obtenha as informações meteorológicas mais recentes de qualquer lugar da Terra.
- Quando um evento é acionado no Bubble, as informações são trocadas entre os sistemas, como estabelecer um lead em seu CRM ou um compromisso em seu Google Agenda.
- Reserve um voo ou uma estadia em hotel em qualquer lugar do mundo.
- Obtenha o número de telefone, localização, fotografias, logotipo e comentários de qualquer empresa no Google Maps.
Usando plugins para aprimorar recursos nativos
Tecnicamente, ele mistura módulos de código JavaScript, CSS e HTML em um nó funcional. Aplicativo escrito em JS.JSON serve como base para sua própria linguagem.
Embora você não precise entender completamente essa terminologia para construir aplicativos, eles indicam um fato importante: ele adere a padrões da Web conhecidos e reconhecidos, permitindo que os desenvolvedores aprimorem consideravelmente sua funcionalidade nativa.
Isso já é visto no site do plugin, onde estão disponíveis centenas de extensões gratuitas e pagas para a funcionalidade básica. Isso também implica que, se você chegar a um ponto em que seus recursos fundamentais sejam insuficientes, haverá muitos especialistas em JavaScript dispostos a apresentar uma solução sob medida para você.
Que tipos de aplicativos você pode desenvolver?
Você pode criar uma ampla gama de aplicativos, alguns dos quais são fornecidos abaixo.
- Apps para mercados especializados com uma comunidade.
- Aplicativos para quadros de empregos em diversos setores.
- Software para pessoal hospitalar.
- Software de ponto de venda para lojas físicas.
- Software de consultório odontológico com etiqueta branca.
- Inventário de negócios pessoais e software de atendimento ao cliente.
- Aplicativos de agregação de imóveis voltados para corretores e clientes.
- Apps para eventos e cursos do mercado (e até barcos).
- Os certificados profissionais exigem aplicativos de teste internos.
- Aplicações para socorristas.
- Software de gestão de funcionários para uso interno.
Para ser honesto, a plataforma não foi projetada para fazer tudo. Pode não ser a escolha ideal se você estiver projetando um aplicativo de jogo com visuais e movimentos complexos. Além disso, se você estiver criando um aplicativo nativo (um para lojas de aplicativos), precisará integrá-lo a outro serviço de terceiros.
Características chave
O Bubble está repleto de recursos. Não poderemos abordá-los todos aqui, mas tentaremos cobrir os mais essenciais.
1. Plugins
Ele permite que você inclua funcionalidades de várias ferramentas na Internet em seu aplicação web. Por exemplo, se você deseja que seus usuários façam login usando a conta do Facebook, você pode usar o plug-in do Facebook para fazer isso.
2. Desenvolva
Ele permite que você construa aplicativos multiusuários dinâmicos para navegadores de desktop e móveis, bem como todas as ferramentas necessárias para construir um site semelhante ao Instagram ou Airbnb.
3. Projeto
Você pode criar layouts compatíveis com dispositivos móveis e conteúdo dinâmico para dar os toques finais a um produto que você terá prazer em exibir para outras pessoas.
4. hospedagem
Nunca mais se preocupe com a manutenção, infraestrutura ou operações do servidor.
Ele cuida da implantação e da hospedagem para você de maneira segura e protegida. O número de usuários, volume de tráfego e armazenamento de dados são irrestritos.
Criando um aplicativo com Bubble (Tutorial)
Vamos agora entrar em ação e explorar como você pode criar um aplicativo de notícias no Bubble.
1. Introdução
Para começar, você deve primeiro registre-se para uma conta gratuita no Bubble.
Começaremos usando a ferramenta de design visual do Bubble para moldar a nossa plataforma interface com o usuário. Algumas das principais páginas a serem incluídas são fornecidas abaixo:
- Página de upload – Um site onde os editores irão desenvolver e distribuir artigos.
- Página inicial – Uma lista de histórias publicadas recentemente é exibida.
- Página narrativa – Uma página onde cada história única pode ser encontrada.
- Página do editor- Uma página para exibir uma lista de contos de um determinado editor.
2. Configurando o banco de dados
Depois de definir a exibição do seu produto, você pode se concentrar na criação dos campos de dados que alimentarão seu aplicativo. Usaremos esses campos para vincular os fluxos de trabalho subjacentes ao seu produto.
Para este exemplo, estabeleceremos dois tipos de dados distintos para cada notícia. Um tipo de dados conterá os fatos básicos de uma história (como título, imagem em destaque e editora), enquanto o outro tipo de dados conterá arquivos de conteúdo maiores, como toda a narrativa em si.
Ao defini-los como tipos de dados discretos, só podemos carregar as informações necessárias quando necessário, limitando a quantidade de material que o editor de bolhas precisará produzir.
Os seguintes tipos de dados e campos serão criados:
Tipo de dados: Utilizador
Campos:
- Nome
- Os seguintes editores são uma lista de editores. Observação importante: a criação de um campo como uma lista com base em um tipo de dados distinto permite que você incorpore todos os seus campos de dados essenciais sem esforço, sem precisar criar campos extras.
Tipo de dados: História
Campos:
- Título
- Imagem em destaque
- Escritor
- Categoria
- Publisher
- Conteúdo da história
Tipo de dados: Conteúdo da história
Campos:
- Conteúdo da história
Tipo de dados: Publisher
Campos:
- Nome
- Logotipo
- Seguidores
3. Criação de fluxos de trabalho
Agora que você organizou o design e o banco de dados do seu aplicativo, é hora de começar a juntar tudo e fazê-lo funcionar.
Os fluxos de trabalho são o principal método para fazer isso no Bubble.
Cada fluxo de trabalho ocorre quando ocorre um evento (por exemplo, um usuário clica em um botão) e, em seguida, executa uma sequência de “ações” em resposta (por exemplo, “inscrever o usuário”, “fazer uma alteração no banco de dados” e assim por diante) .
4. Criando uma notícia
O primeiro recurso que oferecemos é uma ferramenta que permite que os editores escrevam e publiquem notícias no site.
Na página de upload, começaremos incorporando muitos itens de entrada que serão aplicados para inserir dados em nosso banco de dados. Entradas de texto, um carregador de imagem e uma seleção suspensa são exemplos desses campos.
Também precisaremos personalizar o menu suspenso do editor para exibir uma lista de opções dinâmicas. Como cada novo artigo será adicionado à lista de artigos totais de um editor, precisaremos escolher um editor existente em nosso banco de dados.
Ao definir este menu suspenso, escolheremos o tipo de opções para ser um editor.
Depois disso, nossa fonte de dados examinará nosso banco de dados e retornará uma lista de todas as publicações atuais. Por fim, alteraremos a legenda da fonte para incluir o nome do editor.
Depois que um escritor inserir as informações necessárias em cada entrada na página, ele clicará no botão publicar para gerar um novo conto.
Então, dentro de seu banco de dados, você criará uma coisa nova com o tipo de dados definido como narrativo.
Em seguida, precisaremos começar a preencher nosso banco de dados com os campos necessários. Conecte cada um dos componentes de entrada na página às suas respectivas colunas de banco de dados.
Primeiro, criaremos o tipo de conteúdo da história, que finalmente será vinculado ao próprio conto.
A seguir, adicionaremos mais uma etapa a esse procedimento, gerando outra coisa – desta vez, o próprio conto.
É possível integrar esses dados sem esforço em toda a sua plataforma integrando o primeiro material narrativo que desenvolvemos com este conto.
Um novo conto será produzido cada vez que este procedimento for ativado.
5. Exibindo conteúdo dinâmico no feed
Assim que os editores começarem a enviar material para seu aplicativo móvel, precisaremos começar a criar a lógica em sua página inicial que mostra cada artigo como uma lista dinâmica. Isso pode ser feito empregando nosso elemento de grupo de repetição.
Grupos de repetição trabalham com seu banco de dados para apresentar e atualizar uma lista de material dinâmico.
Ao aplicar um grupo de repetição, você deve primeiro vincular o elemento a um tipo de dados em seu banco de dados.
Nesse caso, você categorizará o tipo de material como contos. Você também precisará fornecer a fonte de dados como uma lista de todas as tabelas em seu banco de dados.
Também organizaremos esse grupo recorrente pela data de início de cada história, mostrando a lista em ordem cronológica inversa. Agora você pode começar a organizar o material dinâmico que aparecerá em cada grade.
Basta preencher a linha superior com o material apropriado que você deseja exibir e esse poderoso elemento preencherá as colunas restantes com dados de seu banco de dados atual.
6. Envio de dados entre páginas
Também é possível construir eventos dentro de cada linha de um grupo de repetição. Ao desenvolver recursos de navegação para sua plataforma, essa funcionalidade será útil.
A página inicial do nosso aplicativo de notícias mostra apenas uma prévia de cada história, incluindo o editor, uma imagem em destaque e o título da história.
No entanto, ele não exibe todo o conteúdo de um artigo até que o usuário clique na página da história. Usaremos nosso editor de fluxo de trabalho para transmitir dados entre páginas para exibir este material.
Para começar, crie um processo que envie um usuário para a página da história quando a imagem de uma história for clicada.
Use um evento de navegação para transferir um usuário para outra página durante o desenvolvimento desse processo.
Escolha o tipo de página de destino para ser a página narrativa no menu suspenso. Você precisará fornecer mais informações a esta página para que o editor de bolhas entenda qual conto exclusivo mostrar.
A informação que você precisa fornecer vem do conto das células atuais.
7. Exibindo conteúdo dinâmico na página da história
Você pode recuperar facilmente esses dados de eventos e mostrar o material relevante da narrativa quando um usuário é enviado para uma determinada página de história.
Para criar essa função, você deve primeiro verificar se o tipo de página de destino corresponde à propriedade de dados que você está entregando por meio do fluxo de trabalho. Nessa situação, você deve associar a página da história a uma propriedade da história.
Ele pode simplesmente extrair e fornecer dados apropriados de fontes existentes categorizando o tipo de conteúdo em uma página.
Agora você pode começar a inserir material dinâmico em campos que exibem informações de uma única tabela.
8. Exibindo o artigo do editor
Depois de ler uma notícia, o usuário pode optar por examinar todo o catálogo de artigos do editor. Se você desenvolveu um tipo de dados de editor, criar uma página separada para editores é tão simples quanto criar nossa página inicial original.
Nesta página, precisaremos começar definindo o tipo de página como editor.
Em seguida, copie o grupo de repetição da página inicial e edite as configurações.
Nesse caso, a fonte de dados do nosso grupo de repetição procurará todos os artigos existentes cujo editor seja o editor da página atual.
9. Seguir editores
O terceiro recurso fundamental que criaremos para nosso MVP é a capacidade de seguir um editor na plataforma. Adicionaremos um botão seguir na página do editor. Quando clicarmos neste ícone, iniciaremos um novo processo que modifica uma coisa.
Adicionar o editor da página atual à sua lista de publicações a seguir alterará o usuário atual.
Depois disso, precisaremos atualizar a lista de seguidores do editor da página atual adicionando o usuário atual.
10. Recursos adicionais que você pode adicionar
Agora que você se sente à vontade para criar campos de dados personalizados e apresentar informações dinâmicas, pode ser criativo com as experiências que cria para seu produto. Você também pode incluir:
- Crie um recurso que permita aos usuários salvar conteúdo para leitura posterior.
- Na parte inferior de cada peça, forneça uma coleção recorrente de artigos sugeridos.
- Crie uma ferramenta de pesquisa para ajudar as pessoas a encontrar novos conteúdos no site.
11. O resultado
Seu aplicativo final será algo assim.
Prós
- A capacidade de se conectar a muitas APIs e plugins.
- Um aplicativo fácil de usar e sem código.
- Pessoas sem experiência em programação se beneficiarão com isso.
- Ferramentas de design que são versáteis e poderosas.
- Processamento rápido de consultas.
Desvantagens
- Maior confiabilidade.
- A velocidade de processamento de dados é lenta.
- O desempenho é limitado.
Preços
O plano gratuito permite que você conheça a plataforma e desenvolva seu aplicativo.
As assinaturas pagas incluem extras como white-labeling, um domínio personalizado, acesso à API Bubble e capacidade de servidor reservada, listados abaixo.
- Pessoal – $ 25/mês (pago anualmente) ou $ 29/mês (pago mensalmente).
- Profissional – $ 115/mês (pago anualmente) ou $ 129/mês (pago mensalmente).
- Produção – $ 475/mês (pago anualmente) ou $ 529/mês (pago mensalmente).
Comece a usar o Bubble gratuitamente
Conclusão
Bubble é uma excelente alternativa para construir aplicações web que só podem mostrar informações ou ter uma interface de usuário mínima.
É bastante simples de usar, e os tutoriais fornecidos pelo Bubble são extremamente úteis. Seu editor visual online que permite projetar aplicativos da web com base em suas preferências.
E a melhor parte é que você não precisa de nenhuma experiência ou conhecimento em programação. O Bubble é apropriado para todos, independentemente de você saber codificar ou não.
No entanto, o entendimento prévio das linguagens front-end pode lhe dar uma vantagem, pois permite que você descubra rapidamente o que está fazendo em relação à manipulação de eventos.
Então, o que você acha das capacidades do Bubble?
Deixe-nos saber nos comentários!
arbehi
É possível criar uma loja para vender produtos usando a ferramenta bubble.io?