Developing News Application: Using Newsdata.io

In the past few decades, humans weren’t the only ones evolving; economies around the world and sectors associated with them too became part of this changing stage. The traditional techniques were constantly changing to keep up with the fast-paced world we live in today. Newspapers, telephones, and FMs replaced the traditional mode of seeking information or news’ and eventually with news applications. This not only carved a path for growth but also constantly pushed the boundaries with the hope of getting better and better.

To help you become a part of this constant evolution in the media sector, here is an article guiding you through the process of creating news applications.

Requirements for News Applications Development

There are two main requirements for developing news applications: choosing the right user interface and choosing the right API provider. These two factors can make or break your news application.

1. Choosing a UI: FlutterFlow

The user interface is our first step towards successful news application development. It is this step that determines the user accessibility the given news application will have. The more accessible and user-friendly the interface is, the better the news application turns out. Thus, choosing the right User Interface is one of the crucial decisions.

In this article, we are choosing ‘FlutterFlow’ as our User Interface. The FlutterFlow UI has faster development speed and reduced cost. Moreover, it is known to provide enhanced user experience along with offline functionality. This platform has a growing and active user base, which results in quick troubleshooting and efficient problem handling.

Check Out FlutterFlow to familiarize yourself with the tool.

2. Choosing API Provider: Newsdata.io

The second crucial decision involves choosing the API responsible for fetching data from different sources. APIs are not only responsible for data extraction but also for data analysis as well. The pre-build features of the API allow you to focus more on developing the news application.

In this article, we are choosing ‘Newsdata.io’ as the News API for extracting data from various sources. There are many reasons to justify why Newsdata.io is one of the best data extractors. The extensive coverage of 80,000 news sources, along with the user-friendly UI, proves to be of great benefit. Moreover, you can also customize the data you extract as per your requirements.

Check out NewsData.io to learn more about the platform.

Setting Up the Application

This section of the blog will guide you on how to develop your news application. Follow along, and you will have a brand new news application in no time.

1. FlutterFlow Account Setup

Before we proceed further, we need to set up our FlutterFlow account. To guide you through this, follow the steps mentioned below.

• Navigate to the FlutterFlow website and find the ‘Sign In/Start for Free’ option on the top right.
• Create your account if you are a first-time user.
• Now, fill out the pop-up form and choose the ‘+ Create New’ option to start a new project.
• You can now choose a blank screen or look through templates available for your project.
• Once you have named your project, the website will give an introduction to its features. After this, you will then be redirected to the canvas area, where the actual application building will take place.

2. News Application UI

For the ease of elaborating the process, we are going to skip to the steps to create the Main Screen. You can add more pages and utilize the available page templates for your other pages.

Now, to set up a basic UI of main screen for your news application, here are the steps that you need to follow:

• On entering your project in FlutterFlow, you will be displayed a blank screen with a dashboard, widget palette, and widget tree on the left side.
• From the ‘Build’ section, choose the ‘Widget Palette’ option.
• From the Elements Bar displayed, drop down the ‘ListView’ element present in the Layout Element onto the canvas. You can also adjust the spacing, alignment, and other settings from the properties panel displayed on the right side of the screen.
• To the ListView, add the child widget of the ‘Container’ from the Layout Elements.
• To the container, add more child widgets: Image and Texts from the Commonly Used Elements.

(Refer to Image in the above section for ease in navigation)

NOTE: These child widgets will be wrapped as per your preferences about how you want news headlines to be displayed.

If you want the image to be displayed right next to the title and description of the news, the child widgets will be wrapped in a row. If you want the image to be displayed at the top, followed by the title and description of the news headline, the child widgets will be wrapped in a column.

3. API Integration

To ensure smooth integration, make sure to register on Newsdata.io. Once you have registered, you can access your API Key from the dashboard and use the same in API integration.

Now, to integrate your news application with the API provider, i.e., Newsdata.io, in this case, follow the steps given below.

• Navigate to ‘API Calls’ from the Navigation Menu.
• From here, choose the ‘+ Add’ option given at the top and select the ‘Create API Call’ option.
• Now, in the ‘API Call Name’ section, add the name you want to give your call. Right below that is an option to select the ‘Method Type’, which would be GET in our case.
• Once the method type is selected, proceed to add the ‘API URL’ provided in the Newsdata.io documentation.

• Proceed to test your API call by choosing ‘Test API Call’ from the ‘Response & Test’ section.
• Scroll down to the JSON Path column; from here, choose ‘+ Add JSON Path’ and in the JSONPath, add ‘$.results’.
  Once you have inserted the JSON Path, you will see the Response Preview, showing the content that will be fetched using this path.

NOTE: In this news application, we have added only a few response objects available for fetching data from Newsdata.io. If you wish to add more response objects, you can do that using the following command:

‘$.results[:].Response_object’

You can also look through the ‘Recommended’ section for more JSON Paths that you can add.

• Save changes made in the ‘API Calls’ section.

4. Final Step 

Once you are done setting up the API, follow these steps to ensure that the data is fetched and made compatible with the UI of your news application.

• Select the ‘ListView’ Widget from the Widget Tree in the Build section.
• Navigate to the properties panel displaying ‘ListView Widget Properties’.
• Select ‘Backend Query’ from the Page Properties panel and select the ‘Add Query’ option displayed.
• In the ‘Query Type’ pop-up, select the ‘API Call’ option from the drop-down menu.
• In the API Call Query type, Select the ‘APIName’ you gave your API call while setting up API.
• Press the ‘Confirm’ button to proceed further.

Once the backend query is set up, we will proceed with setting up the ‘Generate Dynamic Children’.

• Select the ‘Generate Dynamic Children’ option right next to the Backend Query option in the Page Properties panel.
• Insert the ‘Variable Name’, which will describe what each variable is or contains. Once the variable name is assigned, proceed to set the ‘value’.
• From the drop-down menu, choose the ‘APIName Response’ option. From there, set the ‘API response options’ as ‘JSON Body’ and ‘Available Options’ as ‘JSON Path’. Following this, proceed to add the ‘JSON Path’, the same as what you added while setting up the API.

• Confirm and save the generated dynamic children.
• You will see a pop-up informing you how you can edit the first child in ListView.

The last part is the setting where you want the information to be displayed.

• Click on ‘Title’ and navigate to its widget properties.
• From the variable settings, choose the ‘APIName Response’ option. From there, set ‘Available Options’ as ‘API Response Options’, ‘API Response Options’ as ‘JSON Body’, and ‘Available Options’ as ‘JSONPath’. Now, insert ‘$.results[:].title’ as the ‘JSON Path’.
• Confirm and repeat the same for ‘Description’. The only difference is that the ‘JSONPath’ for Description will be ‘$.results[:].description’.

• We will do the same with the image widget too. While the process remains the same, the ‘JSONPath’ will be ‘$.results[:].image_url’.

Once all these steps are done, you can run your application in ‘Test Mode’ by selecting the option from the toolbar.

Conclusion

Following these steps would be sufficient to help develop basic news applications. You can customize your news application to meet your needs. You can also look through the detailed FlutterFlow documentation for guidance.

Frequently Asked Questions

Q1. How can I access news data from Newsdata.io?

To access data from Newsdata.io, you can sign up for an account and use the dashboard to fetch the data you want. You can also access the data using the Python library or by making direct API requests.

Q2. How frequently is the news data updated on Newsdata.io?

The news data is updated every minute on the Newsdata.io platform.

Q3. What are the benefits of developing news applications?

There are several benefits to developing news applications. Some of those are increased engagement and visibility via push notifications, increased revenue channels, a personalized user experience via customizable news delivery, and increased interactive multimedia interaction.

Q4. What are the best news APIs for news application development?

Bing News API, Mediastack, and Newsdata.io are among the best news APIs for developing news applications.

Q5. What programming languages does Newsdata.io support?

Newsdata.io doesn’t particularly support any programming, but they do provide well-documented client libraries in two commonly used languages: Python and PHP.

Q6. How can I make my news application better?

You can make your news application better by focusing more on the categorization of the content, developing a user-friendly interface, and ensuring efficient data usage.