Aprenda como criar um aplicativo de notícias para Android ou iOS, usando o editor visual web do Bubble.
Nunca foi tão fácil ficar conectado com os eventos mundiais por meio de dedicados aplicativos de notícias. Com apps como Digg e Apple News, as manchetes mais recentes podem ser facilmente acessadas em qualquer dispositivo móvel.
Com o poder das ferramentas sem código, nunca foi tão fácil criar seu próprio aplicativo de notícias. Ferramentas como o Bubble tornaram o desenvolvimento de software acessível a criadores de todas as origens. Sem qualquer experiência em programação, é possível criar aplicativos dinâmicos que os usuários irão adorar. Nossos clientes estão usando o Bubble para criar lojas virtuais, aplicativos móveis e até redes sociais.
Ao longo deste post, descobriremos o processo de usar o Bubble para criar sua própria versão de um aplicativo de notícias para Android ou iOS, assim como o Apple News.
Se você está procurando criar um aplicativo de notícias dedicado, ou apenas interessado em utilizar alguns dos principais recursos do Apple News, este guia compartilhará uma visão interna sobre a criação de workflows subjacentes para seu MVP.
As etapas para criar um app de notícias tipo Apple News sem código incluem:
Índice
Fazer cadastro gratuito no Bubble
Caso ainda não tenha uma conta no Bubble.io, clique aqui para fazer seu cadastro gratuito. Siga o link para começar, então podemos criar nosso aplicativo juntos.
Ao iniciar seu projeto, você pode escolher começar criando um protótipo para o design do aplicativo ou criando os campos necessários em seu banco de dados.
Nesse caso, começaremos usando a ferramenta de design visual do Bubble para moldar a interface de usuário do nosso aplicativo. Se você está criando um aplicativo de notícias diárias tipo o Apple News, algumas das páginas principais que você deseja incluir são:
- Página de upload – Um portal onde os editores podem criar e publicar histórias
- Página inicial – Exibição de uma lista de histórias publicadas recentemente
- Página de histórias – A página para hospedar cada história individual
- Página do editor – uma página para exibir uma lista de histórias de um editor específico
Um recurso importante do Bubble é a capacidade de enviar dados entre as 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 app de notícias para Android ou iOS, você só precisará criar uma página para hospedar sua história individual. Então poderemos criar a lógica necessária para exibir apenas a história relevante em cada página quando for preciso (abordaremos isso com mais detalhes em breve).
Configurando seu banco de dados
Depois de mapear o display, você pode se concentrar na criação dos campos de dados necessários para alimentar seu aplicativo. Contaremos com esses campos para conectar os workflows por trás de seu app.
O banco de dados pré-construído do Bubble facilita a criação de diferentes tipos de dados com campos exclusivos. Ao criar um banco de dados, recomendamos dividir itens maiores em tipos de dados separados para aumentar a velocidade de seu aplicativo.
Para este exemplo, criaremos dois tipos de dados separados para cada notícia. Um tipo de dados incluirá os detalhes básicos de uma história (incluindo o título, a imagem apresentada e o editor), enquanto o outro tipo de dados incluirá arquivos de conteúdo maiores, como o conteúdo da própria história completa. Criá-los como tipos de dados separados nos permite carregar apenas as informações precisas quando são necessárias, reduzindo a quantidade de conteúdo que o editor do Bubble precisará renderizar.
Você também pode criar um único tipo de dados de história com um campo de texto para links para sites externos onde as histórias são hospedadas.
Tipos de dados e campos para um Apple News MVP:
Tipo de dados: Usuário
Campos:
- Nome
- Editores seguidos – lista de editores. Nota: Criar um campo como uma lista, com base em um tipo de dados separado, permite que você integre perfeitamente todos os seus campos de dados relevantes sem ter que criar campos adicionais.
Tipo de dados: História
Campos:
- Título
- Imagem de destaque
- Escritor
- Categoria
- Editor – Editor
- Conteúdo da história – conteúdo da história (Nota: Se seu aplicativo pretende apenas agregar conteúdo de links externos, considere a criação de um campo “link da história – texto” e crie um workflow que navegue até esses links em vez do próximo tipo de dados “conteúdo da história”.)
Tipo de dados: Conteúdo da história
Campos:
- Conteúdo da história
Tipo de dados: Editores
Campos:
- Nome
- Logotipo
- Seguidores – Lista de usuários
Dica Avançada: se você deseja simplificar ainda mais seu MVP e acelerar seu aplicativo, também pode criar manualmente uma lista de editores como um conjunto de opções em vez de um tipo de dados.
Workflows para criar um aplicativo de notícias
Com o design e o banco de dados estruturados, podemos começar a juntar tudo e tornar seu app 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: “cadastre o usuário”, “faça uma alteração no banco de dados”, etc.)
Criar a função de enviar notícias para o aplicativo
O primeiro recurso que criaremos é uma função para editores criarem e enviarem notícias à plataforma.
Na página de upload, começaremos com uma variedade de inputs que serão usados para adicionar dados no banco de dados. Esses campos podem incluir inputs de texto, um uploader de imagem e uma seleção suspensa.
Nota: Ao criar um aplicativo que requer que o texto seja marcado ou formatado, use o plugin rich text editor. Este input permitirá que os usuários personalizem o estilo do conteúdo que adicionam a este campo.
Também precisaremos configurar o menus suspenso do editor para exibir uma lista de opções dinâmicas.
Como cada novo artigo será adicionado a uma lista total de artigos de um editor, precisaremos selecionar um editor existente em nosso banco de dados.
Nota: Esta lista inicial de editores pode ser adicionada manualmente em seu banco de dados ou um conjunto fixo de editores pode ser adicionado como um conjunto de opções (option set).
Ao configurar este menu suspenso, selecionaremos o tipo de escolha como editor. Em seguida, nossa fonte de dados pesquisará nosso banco de dados, puxando uma lista de todos os editores atuais.
Por fim, definiremos a legenda da fonte para exibir o nome do editor.
Depois que um escritor tiver adicionado os detalhes relevantes em cada input da página, ele clicará no botão ‘publicar’ para criar uma nova história.
Em seguida, você vai criar um novo item em seu banco de dados, com o tipo de dados definido como história.
Mapeie os inputs na página com seus campos correspondentes em seu banco de dados.
Começaremos criando o tipo conteúdo da história, em seguida, vincularemos o tipo à história em si.
Depois, adicionaremos uma etapa extra neste workflow, criando outro item – só que desta vez criaremos a própria história.
Vinculando o conteúdo da história inicial que criamos a essa história, é possível integrar perfeitamente esses dados pelo aplicativo.
Cada vez que esse workflow é acionado, uma nova história será criada.
Exibir conteúdo dinâmico em um feed
Assim que os editores começarem a postar conteúdo em seu app de notícias, precisaremos começar a criar a lógica em sua página inicial que exibe cada história como uma lista dinâmica. 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.
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 de conteúdo como histórias.
Você também precisará definir a fonte de dados como uma lista de todas as histórias em seu banco de dados.
Também classificaremos esse grupo repetidor pela data de criação de cada história, exibindo a lista em ordem cronológica inversa.
Agora você está pronto para começar a estruturar o conteúdo dinâmico que será exibido em cada grade. Simplesmente mapeie a linha superior com o conteúdo relevante que você gostaria de mostrar, então o grupo repetidor preencherá as colunas restantes com base em seus dados existentes.
Enviando dados entre páginas
Em um grupo repetidor, também é possível criar eventos em cada linha individual. Este recurso se tornará útil ao criar recursos de navegação em sua plataforma.
A página inicial de nosso aplicativo de notícias exibe apenas uma prévia de cada história – incluindo o editor, uma imagem de destaque e o título da história. No entanto, ele não exibe o conteúdo completo de uma história até que um usuário clique para acessar a página da história.
Para exibir este conteúdo, usaremos nosso editor de workflow para enviar dados entre as páginas.
Você precisará começar criando um workflow que redirecione um usuário para a página da história quando a imagem da história for 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 para ser a página da história.
E então você precisará enviar dados adicionais a esta página para que o editor do Bubble saiba qual história única ele deve exibir. Os dados que você precisa enviar são os da história da célula atual.
Exibir conteúdo dinâmico na página da história
Quando um usuário é direcionado para uma página de história específica, você pode obter facilmente esses dados de evento e exibir o conteúdo relevante da história.
Para criar essa função, primeiro você precisará garantir que o tipo de página de destino corresponda à propriedade de dados que você está enviando no workflow. Nesse caso, você precisará definir a página da história como propriedade história.
Ao classificar o tipo de conteúdo de uma página, o Bubble pode facilmente extrair e enviar dados relevantes de fontes existentes.
Agora você pode começar a adicionar conteúdo dinâmico aos campos que exibem informações de uma história única.
Exibir todos os artigos de um editor
Depois de ler uma notícia, um usuário pode decidir exibir uma lista completa de artigos criados pelo editor.
Criar uma página separada para editores é tão fácil quanto criar nossa página inicial se você criou um tipo de dados editor (‘publisher’ data type).
Nesta página, precisaremos começar configurando o tipo de página como editor.
Em seguida, você pode copiar o grupo repetidor da página inicial e atualizar as configurações.
Nesse caso, a fonte de dados do nosso grupo repetidor pesquisará todas as histórias existentes em que o editor é o mesmo da página atual.
Seguindo um editor
O recurso principal final que criaremos para nosso MVP é a capacidade de seguir um editor na plataforma.
Na página do editor, adicionaremos um ícone para seguir. Quando este ícone é clicado, criaremos um novo workflow que faz alterações em um item no banco de dados.
O item que queremos mudar é o usuário atual, adicionando o editor da página atual à lista dos editores seguidos.
Em seguida, também precisaremos atualizar a lista de seguidores do editor da página atual – adicionando o usuário atual.
Criar novas funções em seu aplicativo de notícias
Você já está familiarizado com a criação de campos de dados personalizados e exibição de conteúdo dinâmico, então pode começar a criar novas experiências em seu aplicativo de notícias. Adicionalmente, você pode:
- Adicionar um grupo repetidor de artigos recomendados na parte inferior de cada história
- Criar uma função para os usuários marcarem histórias para ler mais tarde
- Criar uma função de pesquisa para descobrir novos artigos na plataforma.
Quanto cobrar por um aplicativo? As 3 formas de precificar um App
Aplicativo Mercado Bitcoin – Criando um APP de Cotações em Tempo Real
Exemplo de um Aplicativo Real criado em Bubble (e quanto tempo leva pra criar)
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-news-app-no-code/
