Headless CMS

Definitions & benefits

Tools & Concepts

Open source

Features

Authentication

Custom plugins & Marketplace

Webhooks

Multilingual CMS

APIs

Dynamic Zones

User roles & permissions

Content Modeling

Security & Privacy

Use Cases

Ecommerce

Blog

Forum

About Strapi

Life at Strapi

Releases & Roadmap

Events

Community

News

The Tutorials section covers an introduction to Strapi, some advanced technical content, product updates and releases. From basic workaround to in-depth development guides. 

Tutorials

How tos

Get all the latest updates, news and events.

Subscribe to the newsletter 📣

Configuring Strapi and MySQL

Cretu is working as data processor and is interested in Python, Web Development, Data analysis.

## Introduction

In case you are a gamer and an avid programmer too. You've come in the right spot. We will try to reproduce a 1$ version of the popular gaming stats site [https://eune.op.gg/](https://eune.op.gg/).

Along the way, in this article, you will learn how to create a custom API endpoint with Strapi. For the endpoint, a custom action will be defined too to be able to fetch external data. We will also enable the GraphQL plugin and allow the custom API endpoint to query through GraphQL with custom schema and resolvers.

You can download the backend here: [Github repository](https://github.com/RazvanCretu/backend), and we will integrate it with a NextJs frontend project to display our gaming statistics nicely.

## What is Graphql?

As stated on the official GraphQL [page](https://graphql.org/), it is nothing more than a query language for APIs. GraphQL allows **a client (frontend page)** to retrieve only the data it needs from an API and nothing more, making it a faster and scalable way to power complex applications.

It was firstly developed by Facebook and became open-source in 2015.

## Prerequisites

1. yarn/npm - vlatest
2. Strapi - vlatest
3. NextJs - vlatest

Before starting on building the app, make sure that you already have a Riot Games account. If not, you can easily create one or use the social login button. You will need an account to be able to generate an API key on the dashboard [page](https://developer.riotgames.com/).

Once you have generated the key, make sure to store it in a `.env` file so it is not publicly exposed inside the code, and keep it secret.

## Building the app

Now that everything is set up let's get our hands dirty and start on coding. The first thing you would want to do is pick an easy and accessible location to store our backend/frontend projects. Mine will reside under `C:\Projects`.

Make sure to create the **frontend** and **backend** folders first.

### Backend set-up

For the backend part, let's begin with a simple Strapi quickstart application. 

Open a terminal window and navigate under `C:\Projects\backend`. Once in the desired location, run the following command:

```bash
    yarn create strapi-app <name> --quickstart
```

It will create all the files and configurations needed to start coding once the project is created directly. The default database that will be used is SQLite.

As required, make sure to add the following packages after the installation is complete `yarn add axios strapi-plugin-graphql`. The latter one will download and install the GraphQL plugin for your Strapi app.

Once you've created your admin profile and managed to log in to the admin page: http://localhost:1337/admin, the next thing we will be creating the custom API. To do so, we will be using the Strapi CLI capabilities, or you can do it manually if you prefer so.

Make sure that you are located under the `root` directory of your backend project, and inside your terminal, run the following command:

```bash
    strapi generate:api riot
```

For this article, I won't be needing the **model's** folder so you could delete it and all its content under `.\backend\api\riot\models`. This way, it won't show up on the sidebar of the admin panel as we don't necessarily need it there for now.

**Custom routes**

Now let's start creating our custom route. Inside the following file `.\api\riot\config\routes.json`, you can overwrite all the generated routes with the following code:

```
    {
      "routes": [
        {
          "method": "GET",
          "path": "/summoner/:summoner",
          "handler": "summoner.findSummonerByName",
          "config": {
            "policies": []
          }
        }
      ]
    }
```


Each time a request is sent to the endpoint `localhost:1337\summoner\:summoner`, the controller handler action `findSummonerByName` will be called.

**Controller**

Now let’s define our custom controller action. Make sure to copy the following bits of code inside `.\api\riot\controllers\summoner.js`:

```
    "use strict";
    module.exports = {
      findSummonerByName: async (ctx) => {
        try {
          const summoner = ctx.params.summoner || ctx.params._summoner;
          const profile = await strapi.services.riot.summoner(summoner);
          const games = await strapi.services.riot.games(profile.puuid);
          return { ...profile, games: games };
        } catch (err) {
          return err;
        }
      },
    };
```


Please take note that inside our controller, we're making use of two custom services. These services are created to fetch the required data from the Riot servers and return it to our API. You can also make use of them anywhere you want inside your Strapi application.

**Services**

Now let's take a look at our services code that is under `.\api\riot\services\riot.js`

```
    const axios = require("axios");
    
    const fetchRiot = async (uri) => {
      const { data } = await axios.get(uri, {
        headers: { "X-Riot-Token": process.env.RIOT_KEY },
      });
      return data;
    };
    
    module.exports = {
      summoner: async (name) => {
        // Setup e-mail data.
        try {
          const data = await fetchRiot(
            `https://eun1.api.riotgames.com/lol/summoner/v4/summoners/by-name/${name}`
          );
          return data;
        } catch (err) {
          return err;
        }
      },
      games: async (puuid) => {
        try {
          const data = await fetchRiot(
            `https://europe.api.riotgames.com/lol/match/v5/matches/by-puuid/${puuid}/ids?start=0&count=5`
          );
          const games = await Promise.all(
            data.map(async (id) => {
              const {
                info: {
                  gameCreation,
                  gameDuration,
                  gameId,
                  gameMode,
                  participants,
                },
              } = await fetchRiot(
                `https://europe.api.riotgames.com/lol/match/v5/matches/${id}`
              );
              return {
                gameCreation: gameCreation,
                gameDuration: gameDuration,
                gameId: gameId,
                gameMode: gameMode,
                ...participants.filter((item) => {
                  return item.puuid == puuid;
                })[0],
              };
            })
          );
          return games;
        } catch (err) {
          return err;
        }
      },
    };
```


**GraphQL schema**

The Strapi CLI does not automatically generate the following file that we will need, but you can manually create it with no worries.

So inside `.\api\riot\config\schema.graphql.js` is the place where you will need to define the custom GraphQL schema for your custom routes. Make sure to have to following code pasted inside:

```
    module.exports = {
      definition: `
          type Game {
            gameCreation: Int!,
            gameDuration: Int!,
            gameId: Int!,
            gameMode: String!,
            assists: Int!,
            kills: Int!,
            deaths: Int!,
            championName: String!,
            champLevel: Int!
            win: Boolean!
          }
      
          type Summoner {
            id: String!,
            accountId: String!,
            puuid: String!, 
            name: String!,
            profileIconId: Int!,
            revisionDate: Int!,
            summonerLevel: Int!,
            games: [Game]
          }`,
      query: `
            Summoner(summoner: String!): Summoner!
          `,
      resolver: {
        Query: {
          Summoner: {
            description: "Get the Summoner object in the Riot API.",
            resolver: "application::riot.summoner.findSummonerByName",
          },
        },
      },
    };
```


Now that everything is in place in your browser, you can navigate to the GraphQL interface: http://localhost:1337/graphql of your project and test the following query:

```
    query SummonerByName($summoner: String!){
            SummonerInfo: Summoner(summoner: $summoner ) {
            id
            puuid 
            name
            summonerLevel
            profileIconId
            games {
                    gameMode
                    gameCreation
                    gameDuration
                    assists
                    kills
                    deaths
                    championName
                    champLevel
                    win
                  }
            }
    }
```

Make sure that you also set the `summoner` variable with your account's summoner `name` or any existing summoner `name` if you prefer.

If you managed to follow along correctly, it should return all the requested data successfully.


> Take note that for our custom GraphQL Types we only declared less fields than returned from our REST endpoint. That’s the power of GraphQL as it can return only the required fields as oppose to the REST endpoint that returns all the fields available. This way your frontend site won’t be loaded with unnecessary data.

Make sure that you also have a look over the Strapi [documentation](https://strapi.io/documentation/developer-docs/latest/development/plugins/graphql.html#customize-the-graphql-schema) on customizing the GraphQL schema.

### Frontend Setup

Awesome! Now that our backend is ready, let's jump straight into our frontend page.

For the frontend page, we will be using NextJs. You can start a new project by running the following command `yarn create next-app <name>` under `C:\Projects\frontend`, and it will automatically bootstrap all the files and configurations needed so you can start on coding.

After the installation is done, make sure to add the following dependencies that we will use through the application `yarn add @apollo/react-hooks @emotion/react @emotion/styled apollo-boost axios graphql`.

**Home page**

We will be using the already generated structure for the home page to render our main part of the app.

As a first step, into `.\frontend\pages\index.js` you can simply copy and paste the below code:

```
    import Head from "next/head";
    import Image from "next/image";
    import styles from "../styles/Home.module.css";
    import styled from "@emotion/styled";
    import Query from "../components/Query";
    import SUMMONER_QUERY from "../queries/summoner/summoner";
    
    const Summoner = styled.div`
      flex-direction: column;
      p {
        padding: 0;
        margin: 0;
        line-height: 1.5;
      }
      img {
        margin-bottom: 10px;
        border-radius: 50px 50px;
      }
    `;
    const Container = styled.div`
      display: flex;
      justify-content: center;
      padding-top: 35vh;
    `;
    const Stats = styled.div`
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    `;
    export default function Home() {
      return (
        <div className={styles.container}>
          <Head>
            <title>Create Next App</title>
            <meta name="description" content="Generated by create next app" />
            <link rel="icon" href="/favicon.ico" />
          </Head>
          <Container>
            <main className={styles.main}>
              <Query query={SUMMONER_QUERY} summoner="TwistedPot">
                {({ data: { SummonerInfo } }) => {
                  return (
                    <div>
                      <Summoner className={styles.grid}>
                        <img
                          src={`http://ddragon.leagueoflegends.com/cdn/11.15.1/img/profileicon/${SummonerInfo.profileIconId}.png`}
                          alt="Image"
                          height="100"
                          width="100"
                        />
                        <p>{SummonerInfo.name}</p>
                        <p>Level: {SummonerInfo.summonerLevel}</p>
                      </Summoner>
                      <div className={styles.grid}>
                        {SummonerInfo.games.map((game) => {
                          return (
                            <div className={styles.card} key={game.gameCreation}>
                              <Stats>
                                <div
                                  style={{
                                    display: "flex",
                                    flexDirection: "row",
                                    justifyContent: "center",
                                    alignItems: "center",
                                  }}
                                >
                                  <img
                                    src={`http://ddragon.leagueoflegends.com/cdn/11.15.1/img/champion/${game.championName}.png`}
                                    alt="Image"
                                    height="50"
                                    width="50"
                                    style={{
                                      borderRadius: "50px 50px",
                                    }}
                                  />
                                  <p
                                    style={{
                                      paddingLeft: "25px",
                                    }}
                                  >
                                    {game.championName}
                                  </p>
                                </div>
                                <div
                                  style={{
                                    display: "flex",
                                    flexDirection: "row",
                                    justifyContent: "center",
                                    alignItems: "center",
                                    padding: "10px 0px",
                                  }}
                                >
                                  <img
                                    src={`http://ddragon.leagueoflegends.com/cdn/5.5.1/img/ui/score.png`}
                                    alt="Image"
                                    height="25"
                                    width="25"
                                  />
                                  <p>
                                    {game.kills +
                                      "/" +
                                      game.deaths +
                                      "/" +
                                      game.assists}
                                  </p>
                                </div>
                                <div
                                  style={{
                                    display: "flex",
                                    flexDirection: "column",
                                    width: "100%",
                                  }}
                                >
                                  <p>Champion Level: {game.champLevel}</p>
                                  <p>Mode: {game.gameMode}</p>
                                  <p>
                                    Duration:{" "}
                                    {Math.round(game.gameDuration / 1000 / 60)}{" "}
                                    minutes.
                                  </p>
                                  <p>Result: {game.win ? "Win" : "Lose"}</p>
                                </div>
                              </Stats>
                            </div>
                          );
                        })}
                      </div>
                    </div>
                  );
                }}
              </Query>
            </main>
          </Container>
          <footer className={styles.footer}>
            <a
              href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
              target="_blank"
              rel="noopener noreferrer"
            >
              Powered by{" "}
              <span className={styles.logo}>
                <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
              </span>
            </a>
          </footer>
        </div>
      );
    }
```


If you try to run the project with `yarn dev`, you will probably get some errors. That's because to continue, we will need to create a couple more things.

**Query component**

The first thing is to create a reusable Query component that we can use anywhere in our code to fetch the `\graphql` endpoint. The inspiration for the Query component was drawn from [this](https://strapi.io/blog/build-a-blog-with-react-strapi-and-apollo) blog post. 

So [Maxime](https://strapi.io/blog/build-a-blog-with-react-strapi-and-apollo) deserves all the credits that I could stay DRY.

Make sure to have the following file created `.\frontend\components\Query\index.js`

```
    import React from "react";
    import { useQuery } from "@apollo/react-hooks";
    const Query = ({ children, query, summoner }) => {
      const { data, loading, error } = useQuery(query, {
        variables: { summoner: summoner },
      });
      if (loading) return <p>Loading...</p>;
      if (error) return <p>Error: {JSON.stringify(error.message)}</p>;
      return children({ data });
    };
    export default Query;
```

It has been slightly modified so that it matched our needs.

**The Query**

The second thing that we will be needed is the actual query that we will use inside the Query component. You can use the GraphQL Interface that is available under [http:\\localhost:1337\graphql](http://localhost:1337/graphql) to build the query.

For the query, make sure to create the following file `.\frontend\queries\summoner\summoner.js`

```
    import gql from "graphql-tag";
    const SUMMONER_QUERY = gql`
      query SummonerByName($summoner: String!) {
        SummonerInfo: Summoner(summoner: $summoner) {
          id
          puuid
          name
          summonerLevel
          profileIconId
          games {
            gameMode
            gameCreation
            gameDuration
            assists
            kills
            deaths
            championName
            champLevel
            win
          }
        }
      }
    `;
    export default SUMMONER_QUERY;
```


Your final site should look more or less like so:

![](https://paper-attachments.dropbox.com/s_463E7B671CD229C37792D16EEECD03C74833D7644B74B06FF6F5C895AED30656_1627252745721_image.png)

## Source code

The source code for this article can be found below:

- **Backend**  https://github.com/RazvanCretu/backend
- **Frontend**  https://github.com/RazvanCretu/frontend

## Conclusion

Congratulations for making it this far!

By the end of this tutorial, you should understand how to easily create custom routes to access external data and create a custom GraphQL schema for your routes to match your business logic.


medium_Strapi Custom Plugin-25.jpg

small_Strapi Custom Plugin-25.jpg

thumbnail_Strapi Custom Plugin-25.jpg

Strapi Custom Plugin-25.jpg

Custom Routes for External Data with GraphQL

*This article is a guest post by the amazing [**Cretu Razvan**](https://www.linkedin.com/in/razvan-cretu-8a866b151/). He’s working as data processor and wrote this blog post through the [Write for the Community](https://strapi.io/write-for-the-community) program.*


Hi there! Today I will show you how to get data from a Strapi API, analyze the data you got and in the end, push the summary data back to Strapi. All these steps will be done with the help of python and its awesome packages that will ease our work.

Let's suppose the following scenario:

-   *You are an experienced data analyst who has just been employed by an E-Commerce Business that sells various products through their online shop made with Strapi as their CMS. They asked you to help them out get more insights about their business performance and revenues.*

-   *You will need to perform multiple tasks like accessing the shop's API to get the data, clean it, perform mutations needed to get insights and also push the data back to the database that the shop uses.*

At the end of this tutorial, you should be able to easily integrate Strapi's API with python and all of its data analysis and visualizations packages available on the internet. You could flawlessly build python scripts that will perform automated plots and get your data locally to any format you would like by simply running a single command in your terminal.

To keep this tutorial simple I won't be covering how to set up your code to run it from the terminal, but you can check this tutorial right [here](https://howchoo.com/python/run-python-terminal) on how to run your script from your terminal of choice.

If you are a complete beginner to Strapi, APIs or web development make sure to check out this [article](https://strapi.io/blog/integrate-strapi-with-everything) written by Maxime to get to know more concepts about APIs and how to integrate Strapi with everything.

## Prerequisites

-   Node v12.x.x
-   Npm or yarn
-   Anaconda v3.8
-   Basic understanding of python and its data analysis tools
-   An up and running Strapi project ( Optional )

## Setup

**Strapi**

To follow along with this tutorial you will need to have a Strapi project which is already up and running. It can be an eCommerce, a blog, an inventory app or any other project you can think of.

If you don't have one already, don't worry, it will work flawlessly even with a local project. Let's build one quickly.

Using the terminal of your choice, navigate to the directory where you want your project to be stored and simply run the following line:

yarn create strapi-app my-app --quickstart

It will bootstrap an application with all you need to get started with Strapi, read more [here](https://strapi.io/documentation/v3.x/installation/cli.html) about the installation.

Once the installation is completed go to <http://localhost:1337/admin> you will be prompted to sign up to create the first admin user for your project and to log in into the administration panel.

**Collection-Types**

For the first step, you'll need to create two Collection Types (**CT**) from the Content-Types Builder. You'll need the following CTs along with their fields:

-   **Sales**:

1.  **product**: text
2.  **amount**: integer
3.  **price**: float
4.  **transaction_date**: date - datetime

-   **Summary**:

1.  **month_year**:text
2.  **month_end**: date - date
3.  **total_revenue**: number - decimal

Once you managed to create your Collection-Types go under **Settings > Administration Panel > Roles **and make sure to check the boxes on the left of the Collection-Types. Once a user with Editor role logs into the administration panel, it will be able to see on the sidebar just the Collection-Types he has rights for.

![Analyze Strapi data with Python](/uploads/analyzing_data_from_a_strapi_api_with_python_1_ca4b37e1c6.png)

For this tutorial I'll be using the Editor role which is really close to a custom "Data Analyst" role and the perfect fit for this project, it will let you see all the data created, even by others.

To make authenticated requests make sure to set the Permissions under **Settings** **>** **Users & Permissions plugin > Roles** **> Authenticated** and check the boxes for each action you want to allow for your Collection Types. They should look similar to this:

![Analyze Strapi data with Python](/uploads/analyzing_data_from_a_strapi_api_with_python_2_dda299c563.png)

In a real-life situation most of the time this data will come from a third-party service like Stripe or Shopify or any other eCommerce service a business uses and it might also contain much more different fields. For this article, we'll stick to the data I have created. It will be far than enough for you to understand the process of analyzing your Strapi data with python.

**Anaconda and python**

Anaconda is the most loved and powerful platform for data scientists. Either if you have python installed or no, you don't have to worry as it already comes along with the Anaconda distribution you'll be installing. You can download it from [here](https://www.anaconda.com/products/individual).

Also, make sure you read more on how to [install Anaconda](https://docs.anaconda.com/anaconda/install/). Once you have completed the installation you are ready to start on analyzing your Strapi data.

1.  Open up Anaconda Navigator which it was just installed along with Anaconda. It should pop-up a window like in the image below:

![Analyze Strapi data with Python](/uploads/analyzing_data_from_a_strapi_api_with_python_3_70ac78e0df.png)

Anaconda will also install by default Jupyter Notebook (and other useful data analysis tools) which we will be using to do our analysis tasks. Hit the Launch button under Jupyter Notebook and it should pop up a browser window on <http://localhost:8888>

Create a new notebook with python 3 by clicking the **new** button on the page. It should open another browser tab like so:

![Analyze Strapi data with Python](/uploads/analyzing_data_from_a_strapi_api_with_python_4_a939f68476.png)

## Data analysis

Great, now that we are done with the setup, let's begin!

To get your job done you have been granted a personal account to get access to the company's dashboard with all the rights granted based on your role.

As stated after creating the Collection-Types, once you log into the administration panel the sidebar will be different from that of an admin. In the image below you can see that our user can see just the Collection-Types it has access for:

![Analyze Strapi data with Python](/uploads/analyzing_data_from_a_strapi_api_with_python_5_ec1ca0df40.png)

To mimic the job of a data analyst we'll be using an Editor role which can manage just the Sales and Summaries Collection Types.

**Get the data**

Currently at the time of writing this article Strapi does not support any feature that let you download the data, but there's no need to worry. We will use python to interact with the API and download all the data we need to analyses.

Here's a short description of all the packages we're going to use throughout the entire process:

-   **requests** - It is a very simple library for python which easily allows you to send HTTP requests.
-   **json** - Used for encoding or decoding json data format.
-   **pandas** - A very powerful data analysis and manipulation tool built on top of python.
-   **datetime** - Python library mainly used to manipulate date and time.
-   **plotly.express** - Build plots and graphics in no time with functions from this module.
-   **pandas.tserries.offsets** - To generate the column with all the days at the end of each month we'll use the function *MonthEnd.*

Let's dive into Jupyter Notebook. One of the first things you'll have to do in your newly created notebook is to import all the libraries we'll be working with. In the first cell of your notebook make sure to run the following lines of code:

```
import requests as req

import json

import pandas as pd

from datetime import datetime

import plotly.express as px

from pandas.tseries.offsets import MonthEnd
```

The next step we will need to log in into the administration dashboard. With the help of **requests** library, we'll make a request to the following URL: <http://localhost:1337/admin/login>

Make sure to pass your email and password assigned to you as a json argument to the request method you are using. Your code should look something like so:

```
 res = req.post(

  "http://localhost:1337/admin/login", 

  data = { 

   'email' : 'jhon.doe@gmail.com', 

   'password' : '4L4b4l4p0rt0' , 

   'Content-Type' : "application/json"

  }).json()["data"]
```

If you run the following into a Jupyter Notebook cell it should return the following:

![Analyze Strapi data with Python](/uploads/analyzing_data_from_a_strapi_api_with_python_6_ce248607e0.png)

The "token" attribute is what you need to pass as headers to the request method you are using to make an authenticated request to get all the data you need.

Try running the following lines of code:

```
sales = req.get(

  "http://localhost:1337/sales", 

  headers = {"Authorization": f"Bearer {res['token']}"}

).json()

sales
```

In terms of python it should return a list of dictionaries, each dictionary representing an entry in the sales table we have in the administration panel:

![Analyze Strapi data with Python](/uploads/analyzing_data_from_a_strapi_api_with_python_7_2d2932ff22.png)

With the help of **Pandas** library let's transform the list of dictionaries into a DataFrame for better readability. Run the following lines of code:

```
df = pd.DataFrame(sales)

df
```

Your DataFrame should look something like this:

![Analyze Strapi data with Python](/uploads/analyzing_data_from_a_strapi_api_with_python_8_cc0f92269a.png)

**Cleaning and Manipulations**

Now that we got the data from Strapi you can clearly see that the data is a bit messy and hard to read. One of the first tasks you would want to do before starting to analyze any data is to make sure that our data is clean. If you're a complete beginner on cleaning data with python make sure to check [this](https://medium.com/@rrfd/cleaning-and-prepping-data-with-python-for-data-science-best-practices-and-helpful-packages-af1edfbe2a3) article.

Simply copy the following lines of code and paste them in a new cell into your Jupyter notebook.

```
print(df.dtypes) # Display current dtypes for all columns

df = df.set_index('id') # Set the index as the id col from Strapi

df = df.drop(['created_at','updated_at'], axis= 1) # Drop unwanted columns

def format_time(x):

  return datetime.strptime(x,"%Y-%m-%dT%H:%M:%S.%fZ")

df['transaction_date'] = df['transaction_date'].apply(format_time) # Apply the custom function created above over each entry in df
```

Now that our data is clean let's move on to create our summary dataset which we'll be using later to push it back to Strapi.

To do that we will be needing some more columns in our df.

  - Copy/paste the following lines of code into a new Jupyter notebook cell and run it.

```
df['revenue'] = df['amount'] * df['price'] # Revenue generated for each transaction

df['month_year'] = pd.to_datetime(df['date']).dt.strftime('%B %y') # Get each month per year in order to do aggregations on this column.

summary = pd.DataFrame() # Store summary data.

summary['total_sales'] = df.groupby('month_year')['revenue'].sum() # Aggregate the revenue generated for each month.

summary = summary.reset_index()

summary['month_end'] = pd.to_datetime(summary['month_year'], format = '%B %y') + MonthEnd(0) # Use this to push back to Strapi as Date field.
```

Now that our summary dataset is created we will be using this to perform some visualizations to get better insights from it. We will also use this dataset to push data back to Strapi.

**Save your data local**

Also, before starting on analyzing the data let's create a local copy of the data. It can be any data format you would like ( e.g. excel, csv, json, sav, etc.. ). I'll be using excel for this tutorial. If you don't have Excel installed on your machine you can simply choose another format which **pandas.DataFrame** can handle and read its documentation [here](https://pandas.pydata.org/pandas-docs/stable/reference/frame.html#serialization-io-conversion) on how to use it.

I'll save the data under** C:\Data\** but it can be anywhere you want on your computer. Run the following line to save your data locally:

`summary.to_excel("C:\Data\Summary_data.xlsx", index = False)`

Now if you go under **C:\Data\ **you should be able to see the excel file with all your data from Strapi.

**Visualizations**

We will be creating our plots with the help of visualizations tool for python like ***Plotly*** which is also open-source. Make sure to check out more about this cool [library](https://plotly.com/graphing-libraries/).

Once you imported Plotly at the beginning of your Notebook like so:

`import plotly.express as px`

You can simply copy the lines below into a new cell:

```
fig = px.bar(

  summary, 

  x='month_year', 

  y='total_sales'

)

fig.update_layout(

  title = 'Time Series with Custom Date-Time Format'

)

fig.show()
```

Running the cell should generate the following bar plot you see in the images below:

![Analyze Strapi data with Python](/uploads/analyzing_data_from_a_strapi_api_with_python_9_be49ea6559.png)

![Analyze Strapi data with Python](/uploads/analyzing_data_from_a_strapi_api_with_python_10_8df39aa127.png)

If you would like to generate a line plot simply write the following:

```
fig = px.line(

  ...

)
```

The above plots are pretty straightforward and simplistic. Let's suppose the following question "How much revenue generated each product in each month?".

We can simply answer the above question with a little more complex plot from the initial dataset we got from Strapi. Run the below code lines in your Jupyter Notebook:

```

df1 = pd.DataFrame(df.groupby(['month_year','product'])['revenue'].sum()).reset_index()

df1['month_end'] = pd.to_datetime(df1['month_year'], format = '%B %y') + MonthEnd(0)

fig = px.histogram(
    df1,
    x='month_end', 
    y="revenue",
    color='product',
    title='Total revenue per product at the end of each month',
    barmode='group',
    height=500,
    labels=dict(x="Fruit", y="Amount", color="Place")
)
fig.update_xaxes(
    dtick="M1",
    tickformat="%b %y",
    ticklabelmode="period",
    tickangle = -45,
    title_text = "Month & Year",
    title_font = {"size": 15}
)
fig.update_yaxes(
    title_text = "Revenue",
    title_font = {"size": 15},
)
fig.update_layout(legend_title_text='Products')

fig.show()
```

If everything ran without any errors, you should nicely get a plot like below:

![Analyze Strapi data with Python](/uploads/analyzing_data_from_a_strapi_api_with_python_11_fcae11116c.png)

**Push back to Strapi**

Now that we are done with our visualizations we want to push our summary data back to Strapi. It can also be used to make visualizations on your personal website.

The first thing we will need to do is to transform our summary dataset into a JSON format. Each row in the dataframe will be a JSON object representing an entry in our Summaries table inside Strapi. We will need to make a **post** request for each entry we have in our summary dataset as currently, Strapi does not support creating multiple entries at once.

Inside a new cell in your jupyter notebook copy/paste the lines of code below:

```
result = summary.to_json(orient="records", date_format = 'iso') # save df as json

for data in json.loads(result):

  req.post(

    "http://localhost:1337/summaries", 

    data = json.dumps(data),

    headers = {

      "Authorization": f"Bearer {res['token']}", 

      "Content-Type": "application/json"}

  ).json()
```

Once you run the cell and hopefully didn't got any errors you should see your entries in the admin panel like so:

![Analyze Strapi data with Python](/uploads/analyzing_data_from_a_strapi_api_with_python_12_42d052eb34.png)


## Conclusion

I hope you like this article and it was useful. By the end of this, you should be able to build up an automated workflow of analyzing Strapi data with python. Also, it can be whatever data you like, even blog posts, sales from an eCommerce business or IoT data, it really depends on what you are using Strapi for.

Integrate Strapi with Python to analyze the data of your headless cms. Use tools like pandas to work with your Strapi data.

Analysing Data from

You might also be interested in...

Analyzing data from a Strapi API with Python