How To Build A News App With No Code

It’s never been easier to stay connected with world events through dedicated news aggregator apps. With products like Digg and Apple News, the latest headlines are easily accessible across any mobile device.

With the power on no-code tools, it’s also never been easier to build a mobile news app of your own. Tools like Bubble have made software development accessible to makers of all backgrounds. Without any coding experience, it’s possible to dynamic applications that users will love. Our customers are using Bubble to build marketplaces, mobile apps, and even social networks.

Throughout this post, we’ll uncover the process of using Bubble to build your own version of a mobile news aggregator app, just like Apple News.

Whether you’re looking to build a dedicated news app, or you’re just interested in utilizing some of the core features from Apple News, this guide will share an inside look into building the underlying workflows for your MVP.

The steps to building an Apple News with no code include:

Get Started

To get started, you’ll need to first register your free Bubble account.  Follow the link below to get started, then we can build our product together.

We also recommend completing our introductory lessons, which will guide you through the step-by-step process of the most common Bubble features. This will help you get a running start when building your Apple News clone.

When kickstarting your project, you can choose to begin by wireframing your product design, or building the necessary fields within your database.

In this case, we’ll start by using Bubble’s visual design tool to shape the user-interface of our platform. If you’re replicating a version of Apple News, some of the core pages you’ll want to include are:

• Upload page - A portal where publishers can create and publish stories
• Home page - Displaying a list of recently published stories
• Story page - A page to host each individual story
• Publisher page - A page to display a list of stories from a specific publisher
  

A major feature within Bubble is the ability to send data between pages. This allows you to create one generic version of a page, then dynamically display the relevant content from your database when it’s required.

In the case of your Apple News clone, you’ll only need to create one page to host your individual story. We can then write the necessary logic to display only the relevant story on each page when it’s needed (we’ll cover this in more detail soon).

Configuring your database

Once you’ve mapped out the display of your product, you can focus on creating the necessary data fields to power your application. We’ll rely on these fields to connect the workflows behind your product.

Bubble’s pre-built database makes it easy to create different data types with unique fields. When creating a database, we recommend splitting larger items into separate data types to enhance the speed of your application.

Advanced Tip: you can also use option sets for basic information that is universal and public to enhance the speed of your application.

For this example, we’ll create two separate data types for each news story. One data type will include the basic details of a story (including the title, the featured image, and publisher), while the other data type will include larger content files like the content of the full story itself. By creating these as separate data types, it allows us to only load the necessary information when it’s needed, reducing the amount of content the Bubble editor will need to render.

You can also create a single story data type with a text field for links to external websites where stories are hosted.

When building Apple News as an MVP, we’ll create the following data types & fields:

Data type: User

Fields:

• Name
• Following publishers - list of publishers. Note: Creating a field as a list based on a separate data type allows you to seamlessly integrate all of its relevant data fields without having to create additional fields

Data type: Story

Fields:

• Title
• Featured image
• Writer
• Category
• Publisher - Publisher
• Story content - story content (Note: If your app only intends to aggregate content from external links, consider building a field "story link - text" and build a workflow that navigates to these links instead of the next "story content" data type.)

Data type: Story content

Fields:

• Story content

Data type: Publisher

Fields:

• Name
• Logo
• Followers - List of users

Advanced Tip: if you want to further simplify your MVP and speed up your app, you can also manually create a list of Publishers as an option set instead of a data type.

Building workflows

Now that you’ve structured both the design and database of your application, it’s time to start stitching everything together and making your app functional.

In Bubble, the main way to do this is with workflows. Each workflow happens when an event occurs (e.g. a user clicks on a button), and then runs a series of “actions” in response (e.g. “sign the user up”, “make a change to the database”, etc.)

Creating a news story

The first feature we’ll build is a function for publishers to create and upload news stories to the platform.

On the upload page, we’ll start by adding a variety of input elements that will be used to add data into our database. These fields can include text inputs, an image uploader, and a dropdown selection.

Note: When building a product that requires text to be marked-up or formatted, we recommend using the rich text editor plugin. This input element will allow users to customize the style of content they add into this field.

We’ll also need to configure the publisher dropdown menu to display a list of dynamic choices.

As each new article will be added to a publishers list of total articles, we’ll need to select an existing publisher from our database.

Note: This initial list of publishers can be manually added into your database or a fixed set of publishers can be added as an option set.

When configuring this dropdown menu, we’ll select the type of choices to be a publisher. Next, our data source will search our database, pulling a list of all the current publishers.

Finally, we’ll set the source caption to display a publishers name.

Once a writer has added the relevant details within each on-page input, they’ll click the publish button to create a new story.

You’ll then create a new thing within your database, with the data type set to a story.

We’ll then need to start adding the relevant fields within our database. Map each of the on-page input elements with their corresponding field in your database.

We’ll first start by creating the story content type, then we’ll link this to the story itself.

Next, we’ll add an additional step to this workflow, creating another thing - only this time we’ll create the story itself.

By linking the initial story content we created with this story, it’s possible to seamlessly integrate this data across your platform.

Each time this workflow is triggered, a new story will be created.

Display dynamic content in a feed

Once publishers begin posting content to your mobile app, we’ll need to start writing the logic on your home page that displays each story as a dynamic list. This can be achieved by utilizing our repeating group element.

Repeating groups integrate with your database to display and update a list of dynamic content.

When using a repeating group, you’ll need to first link the element to a data type within your database. In this instance, you’ll classify the type of content as stories.

You’ll also need to set the data source as a list of all the stories in your database.

We’ll also sort this repeating group by the creation date of each story, displaying the list in reverse chronological order.

Now you’re ready to start structuring the dynamic content that will be displayed within each grid. Simply map out the top row with the relevant content you’d like to show, then this powerful element will populate the remaining columns based on your existing data.

Sending data between pages

Within a repeating group, it’s also possible to create events within each individual row. This feature will become useful when building navigational features across your platform.

The homepage of our news app only displays a preview of each story - including the publisher, a featured image, and the story title. It doesn’t, however, display the full content of a story until a user clicks-through to the story page.

To display this content, we’ll use our workflow editor to send data between pages.

You’ll need to start by creating a workflow that redirects a user to the story page when a story’s image is clicked.

When creating this workflow, use a navigation event to send a user to another page.

From here, select the destination page type to be the story page.

You’ll then need to send additional data to this page so the Bubble editor knows which unique story to display. The data you’ll need to send is that of the current cells story.

Display dynamic content on a story page

When a user is directed to a specific story page, you can easily pull this event data and display the relevant content from the story.

In order to build this function, you’ll first need to ensure that the destination page type matches the data property that you’re sending within the workflow. In this case, you’ll need to set the story page to a story property.

By classifying the type of content for a page, Bubble can easily pull and send relevant data from existing sources.

You can now start adding dynamic content into the fields that display information from a unique story.

Display all of a publisher's articles

After reading a news story, a user might decide to view a full list of articles created by the publisher.

Building a separate page for publishers is as easy as building our initial home page if you created a publisher data type.

On this page, we’ll need to start by configuring the page type to be a publisher.

Next, you can copy the repeating group from the home page, then update the configurations.

In this instance, the data source of our repeating group will search for all existing stories where the publisher is the current pages publisher.

Following a publisher

The final core feature we’ll create for our MVP is the ability to follow a publisher on the platform.

On the publisher page, we’ll add a follow icon. When this icon is clicked, we’ll create a new workflow that makes changes to a thing.

The thing we’ll want to change is the current user, adding the current pages publisher to their list of following publishers.

Next, we’ll also need to update the current page publishers list of followers - adding the current user.

Additional features

Now that you’re familiar with creating custom data fields and displaying dynamic content, you can start getting creative with the experiences you build within your product. Additional you can:

• Add a repeating group of recommended articles at the bottom of each story
• Create a function for users to bookmark stories to read later
• Build a search function to discover new articles across the platform.

Launch

Hiring a developer or dev team to build this application would cost thousands, if not tens-of-thousands of dollars. As you launch and grow in users, our paid plans allow you to host the product on your own custom domain, starting from as low as $25 per month. Some templates and plugins may cost more, but you can build all the functionality of a news app without any additional costs.

Templates

If you don’t want to build your Apple News clone from scratch, you can purchase one of the templates made by our community members. Some similar templates include:

• News Aggregator Like Digg by Zeroqode

Start Building

Bubble can help you build a news app or any other product you choose! It’s never been easier to build something incredible without having to code.

Ready to join the no-code movement? Register your free account here and get started today.

If you’d like additional help when building your product, our thriving community forum is a great place to source actionable advice and resources. Any maker is also encouraged to ask questions within the community to help streamline their no-code journey.