How to Build a NBA News Scrapper Using Python

Introduction

In this tutorial, we will be building a web scrapper using Python to fetch the latest NBA news from all around the world. We will then wrap the scrapper with Flask to make a colorful web app.

Install modules

In this tutorial, we will be using Flask as our web server and requests library which we will use to make web requests. To install these modules run the commands below.

pip3 install Flask 

pip3 install requests

File structure

Create a folder called flask-nba which will contain our project files and inside create a folder called templates and insert a file called index.html.

Import modules

Inside the flask-nba folder create a file called app.py and import the following modules as shown below.

from flask import Flask, render_template
import requests

Initialize

Now let’s initialize our application, to do so add the code below.

app = Flask(__name__)

Create view

Let’s now create our view to scrape the data. Add the code below.

@app.route('/')
def index():
    url = "https://nba-latest-news.p.rapidapi.com/articles"

    headers = {
        "X-RapidAPI-Key": "f516ac8ed2msha55e4e0253b0e20p116b41jsn115b2b29fbb6",
        "X-RapidAPI-Host": "nba-latest-news.p.rapidapi.com"
    }

    response = requests.request("GET", url, headers=headers).json()
    data = []
    for i in response:
        title = i['title']
        url = i['url']
        source = i['source']
        data.append({'title': title, 'url': url, 'source': source})
        
    return render_template("index.html",data=data)


if __name__ == "__main__":
    app.run(debug=True)

The above code uses an API from RapidAPI available here. You first need to register in RapidAPI and subscribe to this API. Next, we request articles then the response from the API is then sent to the template.

Create template

Now in the index.html file we created earlier let’s add the following code below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .title{
            text-align: center;
        }
        body {
        background-color: #F9F9F9;
        font-family: Arial, Helvetica, sans-serif;
      }
      header {
        background-color: #E03939;
        color: white;
        padding: 20px;
        text-align: center;
      }
      h1 {
        font-size: 36px;
        margin: 0;
      }
      h2 {
        font-size: 24px;
        margin: 10px 0;
      }
      /* Style the articles */
      .article {
        background-color: white;
        border: 1px solid #DDD;
        border-radius: 4px;
        box-shadow: 0px 2px 4px #CCC;
        margin: 20px;
        padding: 20px;
      }
      .article h2 {
        color: #E03939;
      }
      .article p {
        color: #777;
        font-style: italic;
        margin: 10px 0;
      }
      .article a {
        color: #E03939;
        text-decoration: none;
      }
      .article a:hover {
        text-decoration: underline;
      }
    </style>
    <div class="title">
        <h2>NBA LATEST NEWS</h2>
    </div>
    <div class="container">
        {% for i in data %}
            <div class="article">
                <h2>{{ i.title }}</h3>
                <p>{{ i.source }}</p>
                <a href="{{ i.url }}">Read More</a>
            </div>
            
        {% endfor %}
    </div>
</body>
</html>

The above template displays data from the API that is the article title, its source, and the link to the whole article.

Run

Now let’s run our application, to do so, run the command below.

python3 app.py

Results

After our server is up and running we should be able to access our application at this address [ http://127.0.0.1:5000 ]. Here is NBA news displayed as shown below.