Be Techy is a web application which aggregates Technology related news articles from multiple websites. Then presents the news articles in one location.
-
IDLE: IDE for Python
-
Django: Python Web framework
-
News API: Python client library
You can simply install django by using this command:
pip install django OR try django installation
OK after installing django you need to make account in News API, because we are going to fetch the data from their and also you need to get your api key from their. for the installation of this library you can simply use:
pip install newsapi-python Open Command Prompt you need to use this command for creating of project in django.
django-admin startproject NewsYou can change the name of the project according to your choice.
After that you need to migrate your migrate your project by this command:
python manage.py migrateNow you need to create a new app in your django project. django apps are the small pieces of a website or a web application, in django project as many apps you want you can create.
python manage.py createapp NewsApp
python manage.py startapp NewsApp
you need to add your new app in the django setting Installed App section like this .
The structure of django project:
News/
|-- News/
| |-- __init__.py
| |-- asgi.py
| |-- settings.py
| |-- urls.py
| |-- wsgi.py
|-- NewsApp/ <-- our new django app!
| |-- migrations/
| | +-- __init__.py
| |-- static/
| | +-- images
| |-- __init__.py
| |-- admin.py
| |-- apps.py
| |-- models.py
| |-- urls.py
| |-- tests.py
| +-- views.py
|-- templates/
| |-- index.html
| |-- techcrunch.html (other 5 websites)
|-- db.sqlite3
+-- manage.py
also you can see that there is a templates folder and seven html files in their, so these are the html files.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Be Techy</title>
<style>body.solid {border-style: solid;}</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style type="text/css"> @media (min-width: 1200px) {
.container{
max-width: 1290px;
}
}
span { display: flex;
justify-content: center }
.text {
font-family: verdana;
font-size: 6em;
font-weight: 700;
color: white;
text-shadow: 1px 1px 1px #919191,
1px 2px 1px #919191,
1px 3px 1px #919191,
1px 4px 1px #919191,
1px 5px 1px #919191,
1px 6px 1px #919191,
1px 7px 1px #919191,
1px 8px 1px #919191,
1px 9px 1px #919191,
1px 10px 1px #919191,
1px 18px 6px rgba(16,16,16,0.4),
1px 22px 10px rgba(16,16,16,0.2),
1px 25px 35px rgba(16,16,16,0.2),
1px 30px 60px rgba(16,16,16,0.4);
}
</style>
</head>
<body class="solid" >
{% load static %}
<div class="jumbotron" style="background-image: url({% static 'tc.jpg' %}); color:black,min-height: 300;">
{% load static %}
<img align="left" src="{% static "bte.png" %}" alt="BeTechy" style="margin-top:-25px"; height="135" width="155">
<span class="text">
BE TECHY: Latest News
</span>
</div>
<center>
<a class="btn btn-danger btn-lg" role="button" href="http://127.0.0.1:8000/TechRadar" style=" font-weight: 500;font-size: 28px; border-radius: 10px; border: none; box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2); ">Techradar</a>
<a class="btn btn-primary btn-lg" role="button" href="http://127.0.0.1:8000/techcrunch" style="font-weight: 500;font-size: 28px; border-radius: 10px; border: none; box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2); ">Techcrunch</a>
<a class="btn btn-danger btn-lg" role="button" href="http://127.0.0.1:8000/wired" style="font-weight: 500;font-size: 28px; border-radius: 10px; border: none; box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);">Wired</a>
<a class="btn btn-primary btn-lg" role="button" href="http://127.0.0.1:8000/theverge" style="font-weight: 500;font-size: 28px; border-radius: 10px; border: none; box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);">The Verge</a>
<a class="btn btn-danger btn-lg" role="button" href="http://127.0.0.1:8000/thenextweb" style="font-weight: 500;font-size: 28px; border-radius: 10px; border: none; box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);">The Next Web</a>
<a class="btn btn-primary btn-lg" role="button" href="http://127.0.0.1:8000/engadget" style="font-weight: 500;font-size: 28px; border-radius: 10px; border: none; box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);">Engadget</a>
<br>
</center><br><br>
<div class="container">
<div class="row" >
{% for new, des,i,ur in mylist %}
<div class="col-lg-4" >
<div class="thumbnail" style="border: none; box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.9);">
<a href="{{ur}}" target="_blank">
<br><h1> {{new}}</h1> <br>
<img src="{{i}}" alt="" width="390" height="240">
</a>
<br><div class="caption" style="font-size: 20px;">
<b>Description: </b>{{des}}
</div>
</div>
</div>
{% endfor %}
</div></div>
</body>
</html>techcrunch.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Techcrunch News</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style type="text/css"> @media (min-width: 1200px) {
.container{
max-width: 1290px;
}
}
span { display: flex;
justify-content: center }
.text {
font-family: verdana;
font-size: 6em;
font-weight: 700;
color: white;
text-shadow: 1px 1px 1px #919191,
1px 2px 1px #919191,
1px 3px 1px #919191,
1px 4px 1px #919191,
1px 5px 1px #919191,
1px 6px 1px #919191,
1px 7px 1px #919191,
1px 8px 1px #919191,
1px 9px 1px #919191,
1px 10px 1px #919191,
1px 18px 6px rgba(16,16,16,0.4),
1px 22px 10px rgba(16,16,16,0.2),
1px 25px 35px rgba(16,16,16,0.2),
1px 30px 60px rgba(16,16,16,0.4);
}
</style>
</head>
<body class="solid" >
{% load static %}
<div class="jumbotron" style="background-image: url({% static 'tc.jpg' %}); color:black,min-height: 300;">
{% load static %}
<img align="left" src="{% static "techcrunch.png" %}" alt="Techcrunch" style="margin-top:-0px"; height="80" width="350">
<span class="text">
Techcrunch News
</span>
</div>
<div class="container">
<div class="row">
{% for new, des,i,ur in mylist %}
<div class="col-lg-4" >
<div class="thumbnail" style="border: none; box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.9);">
<a href="{{ur}}" target="_blank">
<br><h1> {{new}}</h1> <br>
<img src="{{i}}" alt="" width="390" height="240">
</a>
<br><div class="caption" style="font-size: 20px;">
<b>Description: </b>{{des}}
</div>
</div>
</div>
{% endfor %}
</div></div>
</body>
</html>For other 5 websites do same.
Add templates to settings.py. See below picture:
And also add static folder path at the end in settings.py:
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.0/howto/static-files/
STATIC_URL = '/static/'And this is our views.py that we have created for seven url functions. One for main index page and six for other technical websites.
NewsApp\views.py:
from django.shortcuts import render
from newsapi import NewsApiClient
def index(request):
newsapi = NewsApiClient(api_key="b0f75ce660c0466a9a98c2478f8abb62")
topheadlines = newsapi.get_top_headlines(sources='TechRadar,techcrunch,wired,engadget,the-next-web,the-verge')
articles = topheadlines['articles']
desc = []
news = []
img = []
ur = []
for i in range(len(articles)):
myarticles = articles[i]
news.append(myarticles['title'])
desc.append(myarticles['description'])
img.append(myarticles['urlToImage'])
ur.append(myarticles['url'])
mylist = zip(news, desc, img, ur)
return render(request, 'index.html', context={"mylist":mylist})
def TechRadar(request):
newsapi = NewsApiClient(api_key="b0f75ce660c0466a9a98c2478f8abb62")
topheadlines = newsapi.get_top_headlines(sources='TechRadar')
articles = topheadlines['articles']
desc = []
news = []
img = []
ur = []
for i in range(len(articles)):
myarticles = articles[i]
news.append(myarticles['title'])
desc.append(myarticles['description'])
img.append(myarticles['urlToImage'])
ur.append(myarticles['url'])
mylist = zip(news, desc, img, ur)
return render(request, 'TechRadar.html', context={"mylist":mylist})
def techcrunch(request):
newsapi = NewsApiClient(api_key="b0f75ce660c0466a9a98c2478f8abb62")
topheadlines = newsapi.get_top_headlines(sources='techcrunch')
articles = topheadlines['articles']
desc = []
news = []
img = []
ur = []
for i in range(len(articles)):
myarticles = articles[i]
news.append(myarticles['title'])
desc.append(myarticles['description'])
img.append(myarticles['urlToImage'])
ur.append(myarticles['url'])
mylist = zip(news, desc, img, ur)
return render(request, 'techcrunch.html', context={"mylist":mylist})
#google-news,engadget,business-insider,wired,the-times-of-india,techcrunch,the-verge,the-next-web
def wired(request):
newsapi = NewsApiClient(api_key="b0f75ce660c0466a9a98c2478f8abb62")
topheadlines = newsapi.get_top_headlines(sources='wired')
articles = topheadlines['articles']
desc = []
news = []
img = []
ur = []
for i in range(len(articles)):
myarticles = articles[i]
news.append(myarticles['title'])
desc.append(myarticles['description'])
img.append(myarticles['urlToImage'])
ur.append(myarticles['url'])
mylist = zip(news, desc, img, ur)
return render(request, 'wired.html', context={"mylist":mylist})
def theverge(request):
newsapi = NewsApiClient(api_key="b0f75ce660c0466a9a98c2478f8abb62")
topheadlines = newsapi.get_top_headlines(sources='the-verge')
articles = topheadlines['articles']
desc = []
news = []
img = []
ur = []
for i in range(len(articles)):
myarticles = articles[i]
news.append(myarticles['title'])
desc.append(myarticles['description'])
img.append(myarticles['urlToImage'])
ur.append(myarticles['url'])
mylist = zip(news, desc, img, ur)
return render(request, 'theverge.html', context={"mylist":mylist})
def thenextweb(request):
newsapi = NewsApiClient(api_key="b0f75ce660c0466a9a98c2478f8abb62")
topheadlines = newsapi.get_top_headlines(sources='the-next-web')
articles = topheadlines['articles']
desc = []
news = []
img = []
ur = []
for i in range(len(articles)):
myarticles = articles[i]
news.append(myarticles['title'])
desc.append(myarticles['description'])
img.append(myarticles['urlToImage'])
ur.append(myarticles['url'])
mylist = zip(news, desc, img, ur)
return render(request, 'thenextweb.html', context={"mylist":mylist})
def engadget(request):
newsapi = NewsApiClient(api_key="b0f75ce660c0466a9a98c2478f8abb62")
topheadlines = newsapi.get_top_headlines(sources='engadget')
articles = topheadlines['articles']
desc = []
news = []
img = []
ur = []
for i in range(len(articles)):
myarticles = articles[i]
news.append(myarticles['title'])
desc.append(myarticles['description'])
img.append(myarticles['urlToImage'])
ur.append(myarticles['url'])
mylist = zip(news, desc, img, ur)
return render(request, 'engadget.html', context={"mylist":mylist})Also one important issue you need to create a new python file in your NewsApp django app and add these codes for url routing.
NewsApp\urls.py:
from django.urls import path
from .views import index,TechRadar, techcrunch, wired ,theverge, thenextweb, engadget
urlpatterns = [
path('', index, name = 'index'),
path('TechRadar/', TechRadar, name = 'TechRadar'),
path('techcrunch/', techcrunch, name = 'techcrunch'),
path('wired/', wired, name = 'wired'),
path('theverge/', theverge, name = 'theverge'),
path('thenextweb/', thenextweb, name = 'thenextweb'),
path('engadget/', engadget, name = 'engadget'),
]Also in your main urls.py you need to add these codes.
News\urls.py:
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('NewsApp.urls'))
]So now run your django project and this will be the result, you can use this command for runing your django project. Copy the file path which contains manage.py file.
Ex: F:\News
python manage.py runserverOpen Browser and Enter this URL:
http://127.0.0.1:8000/
Download News.rar file
Extract it.
Open the News folder.
Copy the file path which contains manage.py file.
Ex: F:\News
To run it type this in Command prompt:
python manage.py runserverOpen Browser and Enter this URL:
http://127.0.0.1:8000/
Index page:
Techcrunch :
