Make a News app with NewsApi

Nilay Paul
2 min readFeb 17, 2021

--

Let’s make a news app with Django and newsapi .

Step1 : Create a new Django project

django-admin startproject "project name"

Step 2: Create a new Django App

django-admin startapp "app name"

Step 3 :

Go to newsapi.org and create an account . After this grab the api key .

https://newsapi.org/ -> Top headlines -> Copy the url (looks like this )
https://newsapi.org/v2/top-headlines?country=us&apiKey="Your api key"

Step 4 :

Go to views.py and write this code

from django.shortcuts import renderimport requestsimport json# Create your views here.def home_view(request):url = "https://newsapi.org/v2/top-headlines?country=in&apiKey=25a911c33c9747ad965eae6348f799f8"response = requests.get(url)content_from_internet = json.loads(response.content)context={'data':content_from_internet,}return render(request,'index.html',context)

Step 5:

Go to urls.py of the main project and write

"""News URL ConfigurationThe `urlpatterns` list routes URLs to views. For more information please see:https://docs.djangoproject.com/en/3.1/topics/http/urls/Examples:Function views1. Add an import:  from my_app import views2. Add a URL to urlpatterns:  path('', views.home, name='home')Class-based views1. Add an import:  from other_app.views import Home2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')Including another URLconf1. Import the include() function: from django.urls import include, path2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))"""from django.contrib import adminfrom django.urls import path , includeurlpatterns = [path('admin/', admin.site.urls),path('',include('mynews.urls'))]

Step 6:

Create urls.py file inside the app and write..

from django.urls import path , includefrom .views import home_viewurlpatterns = [path('',home_view,name='home'),]

Step7 : Go to index.html and write ..

<!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.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"><title>News APP</title></head><body><div class="container"><div class="row">{% for onedata in data.articles %}<div class="col-sm"><div class="card " style="width: 18rem;"><img src="{{onedata.urlToImage}}" class="card-img-top" alt="{{onedata.source.name}}"><div class="card-body "><h5 class="card-title ">{{onedata.title}}</h5><p class="card-text">{{onedata.description|truncatechars:150}}</p><a href="{{onedata.url}}" target="blank" class="btn btn-primary">Read</a></div></div></div>{% endfor %}</div></div><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script></body></html>
The file structure looks like this

Now just start the server .

Final website

Do you want to see any specific blog ?

If so you can hit me up on “paulnilay4@gmail.com” . I like to post about Django , Python and Unity stuff .

Currently working on a multiplayer game with unity and machine learning with Django . If you are interested in them then you can follow my medium page .

--

--