Como criar um aplicativo de notícias sem programar

Confira neste artigo:

Compartilhe

Apple News Sem Codar

Aprenda como criar um aplicativo de notícias para Android ou iOS, usando o editor visual web do Bubble.

Como criar um aplicativo de notícias Apple News

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:

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
Como criar um aplicativo de notícias Apple News

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.
Como criar um aplicativo de notícias Tipos de dados e campos

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”.)
Como criar um aplicativo de notícias Tipos de dados e campos

Tipo de dados: Conteúdo da história

Campos:

  • Conteúdo da história
Como criar um aplicativo de notícias Tipos de dados e campos

Tipo de dados: Editores

Campos:

  • Nome
  • Logotipo
  • Seguidores – Lista de usuários
Como criar um aplicativo de notícias Tipos de dados e campos

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.

Bubble News Aggregator App Story Submission UI

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.

Bubble News Aggregator App Dropdown Menu Walkthrough

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.

Bubble News Aggregator App Story Publish Button Workflow

Em seguida, você vai criar um novo item em seu banco de dados, com o tipo de dados definido como história.

Bubble News Aggregator App Workflow Tutorial

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.

Bubble News Aggregator App Publish Story Workflow Tutorial

Depois, adicionaremos uma etapa extra neste workflow, criando outro item – só que desta vez criaremos a própria história.

Bubble Apple News Clone No Code Walkthrough

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.

Bubble Apple News Clone Dynamic Story Feed Example

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.

Bubble Apple News Clone No Code News Feed Tutorial

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.

Como criar um aplicativo de notícias sem pogramar

Ao criar este workflow, use um evento de navegação para enviar um usuário a outra página.

Como criar um aplicativo de notícias sem pogramar

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.

Como criar um aplicativo de notícias sem pogramar

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.

Bubble Apple News Clone No Code Dynamic Page Tutorial

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.

Bubble Dynamic news app Story Page image feature walkthrough

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.

Bubble Apple News Clone No Code Publisher Dynamic Page Tutorial

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.

Bubble News Aggregator Publisher Page Content Tutorial

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.

Bubble News Aggregator Publisher Follow Feature Tutorial

O item que queremos mudar é o usuário atual, adicionando o editor da página atual à lista dos editores seguidos.

Bubble News Aggregator Publisher Following Workflow Example

Em seguida, também precisaremos atualizar a lista de seguidores do editor da página atual – adicionando o usuário atual.

Bubble News Aggregator Publisher Following Workflow Tutorial

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/

Quer aprender mais sobre

Desenvolvimento de Aplicativos No-Code?

Comece por essa
Masterclass Gratuita

Uma aula gratuita onde você irá aprender tudo sobre o que No Code, Low Code, Bubble, FlutterFlow, programação visual, desenvolvimento sem código, quais as melhores ferramentas, o que é possível criar, e muito mais. Clique no botão abaixo para acessar essa aula 100% online e 100% gratuita: QUERO ASSISTIR A MASTER CLASS GRATUITA

Me Siga no Youtube @RenatoAsse

Me siga no YouTube para receber toda semana novos vídeos ensinando tudo sobre desenvolvimento visual de aplicativos e No-Code. SIGA O CANAL NO YOUTUBE

Inscreva-se na
Comunidade Sem Codar

Um curso online com centenas de aulas passo-a-passo do zero, e ganhe acesso ao grupo exclusivo dos membros para tirar dúvidas sobre Bubble, FlutterFlow, AppGyver e desenvolvimento No Code e Low Code: ENTRAR NA COMUNIDADE SEM CODAR

Junte-se a nós e fique por dentro

Assine a News SemCodar