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:
$ 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
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 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 .env file to save your environment variables. Inside the file, write this:
API_KEY = 'Your API key' DJANGO_SECRET_KEY = 'Secret Key'
The Second environment variable is Django’s secret key found in the 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 home.html webpage.
Creating Templates
We will create a home.html file inside a templates folder. So, create the folder and the file.
<!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 news_articles.
When the response was converted to JSON, the news content was found in res['articles']. Having stored it in the news_articles, we simply use Django’s 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 settings.py file. If you will be pushing your code to GitHub, remove the Django secret key, store it in the .env file, and load it using the Python-decouple module.
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 INSTALLED_APPS section, and register the news app.
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.
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 urls.py file.
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 urls.py file. This time, inside the news folder.
from django.urls import path
from .views import news_lists
urlpatterns = [
path('', news_lists, name='home'),
]
The 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 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