Play

Visão geral

O editor mobile do Bubble finalmente foi lançado e está 100% funcional, permitindo criar apps nativos com Bubble sem programação. Este vídeo apresenta uma visão completa de como usar esse recurso para transformar projetos web em aplicativos nativos prontos para lojas.

Recursos do MobileView e Mobile Reusable

No início, Marquinho mostra como acessar o MobileView e o Mobile Reusable no editor do Bubble, explicando a função de cada um: o MobileView cria uma nova página mobile; o Mobile Reusable oferece elementos reutilizáveis otimizados para apps nativos.

Carregamento de telas e performance

Uma mudança importante está na forma como o Bubble carrega as telas: em vez de recarregar o navegador entre transições, as telas do app nativo são pré-carregadas localmente, proporcionando transições instantâneas e uma experiência mais fluida.

Tipos de views disponíveis

Os quatro tipos de views disponíveis são:

  • Scrollable (rolagem vertical)
  • Not Scrollable (telas fixas)
  • Vertical List (listas verticais dinâmicas)
  • Section List (listas com seções e cabeçalhos)

Marquinho explica quando usar cada uma, com exemplos inspirados no Spotify.

Novos elementos e limitações

Outro destaque são os novos elementos e ajustes para adaptar a interface web ao novo padrão mobile. Componentes como pop-ups e dropdowns não são mais usados; em seu lugar, usam-se abas deslizantes (cheats) e listas selecionáveis. Elementos como HTML, Radio Button e Searchbox ainda não estão disponíveis, mas podem vir em futuras atualizações ou plugins.

Integração entre web e mobile

Além da parte visual, o banco de dados, APIs, workflows de backend e o consumo de unidades de processamento (WUs) são compartilhados entre o app web e o app mobile, facilitando a integração entre os dois mundos.

Reutilização de elementos da web no mobile

Marquinho também demonstra como reutilizar elementos da web no mobile via copy-paste, inclusive com workflows já configurados. No entanto, ele enfatiza que as telas precisam ser recriadas, pois web e mobile utilizam tecnologias diferentes: a web usa HTML/CSS/JS, enquanto o mobile usa React.

Pré-visualização e publicação

Por fim, o vídeo explica as formas de pré-visualização do app mobile, com destaque para o uso do app Bubble Go no celular, que permite testar sem publicar nas lojas. O processo de publicação oficial na Play Store e App Store também é possível com o novo editor, consolidando o Bubble como plataforma no-code para desenvolvimento de apps nativos.

Conclusão

Este vídeo é indispensável para quem quer criar apps nativos com Bubble e aproveitar todos os recursos apresentados.