[Tut] How I Designed a News Aggregator Web Application Using Django

[xSicKxBot]

How I Designed a News Aggregator Web Application Using Django

Rate this post

A news aggregator is simply a web application that aggregates or collects news articles from different websites and presents them in a single location so that users can visit the location (website) and click on the link to read news of interest. This saves time and resources.

In this project article, we will learn how to design a news aggregator web application using the Django framework. Specifically, we will scrape the web for news articles using a Python module, and have them displayed on our Django web application.

This is something similar to the News App designed using the Flask framework in previous tutorial projects.

Setting up Django



Follow these steps to set up Django in your Ubuntu terminal:

Code:

$ mkdir project $ cd project $ python3 -m venv .venv $ source .venv/bin/activate (.venv) $ pip install django requests bs4 (.venv) $ django-admin startproject newsAggregator . (.venv) $ python3 manage.py startapp news (.venv) $ python3 manage.py migrate (.venv) $ python3 manage.py runserver

Remember, the Django project is created in the project folder as indicated by the dot command. Run the local server to confirm that the installation went successfully.



Creating Views

Code:

from django.shortcuts import render import requests from decouple import config API_KEY = config('NEWS_API_KEY') COUNTRY = 'us' def news_lists(request): if request.method == 'POST': url = f'https://newsapi.org/v2/top-headlines?country={COUNTRY}&apiKey={API_KEY}' res = requests.get(url).json() news_articles = res['articles'] context = { 'news_articles': news_articles } return render(request, 'home.html', context) return render(request, 'home.html'

We import the

Code:

requests

module which is an essential tool for retrieving data from a webpage. We use the Python-decouple module to load environment variables. The first variable is the News API key. If you have read the project tutorial where I used the Flask framework to create a similar project, you are expected to have your API key.



Create a

Code:

.env

file to save your environment variables. Inside the file, write this:

Code:

API_KEY = 'Your API key' DJANGO_SECRET_KEY = 'Secret Key'

The Second environment variable is Django’s secret key found in the

Code:

settings.py

file. The instruction from Django is to keep the secret key secret.

Of course, this applies to deploying an app to a production server. But since I will be pushing the files to GitHub, I have to follow best practices by keeping it secret and loading it as an environment variable.

Another Python module, Python-dotenv is working behind the scene to make all these possible. If you start the server without installing the module, you may get an error message from Django.

Back to the view function, if the request method is POST, we use the requests module to fetch current news from a defined country. You can change it to use any country of your choice. We then save the response in a dictionary form and render it to the

Code:

home.html

webpage.

Creating Templates



We will create a

Code:

home.html

file inside a templates folder. So, create the folder and the file.

Code:

<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" /> <title>Django News Headline</title> </head> <body> <h1 class="text-center mt-4 mb-5">Django News Headlines</h1> <div class="row mt-5"> <div class="col-md-2"></div> <div class="col-md-8"> <div class="row"> {% for news in news_articles %} <div class="col-md-4 mb-5"> <div class="card" style="width: 18rem"> <img src="{{ news.urlToImage }}" class="card-img-top" alt="..." /> <div class="card-body"> <h5 class="card-title">{{ news.title }}</h5> <p class="card-text">{{ news.description }}</p> <a href="{{ news.url }}" class="btn btn-primary">Read More</a> </div> </div> </div> {% endfor %} </div> </div> <div class="col-md-2"></div> </div> <!-- Bootstrap Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous" ></script> </body> </html>

Going back to the view function, you will notice the variable

Code:

news_articles

.

When the response was converted to JSON, the news content was found in

Code:

res['articles']

. Having stored it in the news_articles, we simply use Django’s

Code:

for

-loop to iterate through the articles. This is also similar to what we did using the Flask framework.

Each iteration displays the news title, image, description, and a link to read more

Registering Apps and URLs



Go to the

Code:

settings.py

file. If you will be pushing your code to GitHub, remove the Django secret key, store it in the

Code:

.env

file, and load it using the

Code:

Python-decouple

module.

Code:

from pathlib import Path import os from decouple import config SECRET_KEY = config('DJANGO_SECRET_KEY') # Build paths inside the project like this: BASE_DIR / 'subdir'. BASE_DIR = Path(__file__).resolve().parent.parent # Quick-start development settings - unsuitable for production # See https://docs.djangoproject.com/en/4.1/howto/deployment/checklist/ # SECURITY WARNING: keep the secret key used in production secret! SECRET_KEY = SECRET_KEY

Scroll down to the

Code:

INSTALLED_APPS

section, and register the news app.

Code:

INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'news', ]

Scroll down to the TEMPLATES section, and also let Django know of an existing templates folder.

Code:

TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [os.path.join(BASE_DIR, 'templates')], #add these 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], }, }, ]

Next is the URLs. Go to the project-level

Code:

urls.py

file.

Code:

from django.contrib import admin from django.urls import path, include urlpatterns = [ path('admin/', admin.site.urls), path('', include('news.urls')), ]

This also informs Django of an existing app-level URLs. Finally, let’s create the app-level

Code:

urls.py

file. This time, inside the news folder.

Code:

from django.urls import path from .views import news_lists urlpatterns = [ path('', news_lists, name='home'), ]

The

Code:

news_lists()

is our view function. The URL will be referred to as home in templates files where necessary.

Everything is done and dusted. Let’s start the local server. Run

Code:

python3 manage.py runserver

in your terminal.



Conclusion

Having gone through this project, no doubt, you will appreciate the simplicity Flask has compared with Django.

However, Django can be used to create web apps far more complex than the Flask framework. What we just did with Django is for learning’s sake, to improve our Python skills. You have learned a thing or two.

Use that knowledge to create a similar app and share it with the world!

Recommended: How I created a News Application using the Flask Framework