Создайте веб-приложение на Python Flask с помощью TakeShape, GraphQL и React - UPROGER

Takeshape — это Headless CMS, предоставляющий набор API-интерфейсов, которые разработчики могут использовать для создания пользовательских приложений. Он предлагает API GraphQL для получения данных и управления контентом и интеграциями. В этом руководстве вы узнаете, как использовать TakeShape с Python и создать приложение React для отображения сообщений блога в frontend-составляющей.

Установка

Для начала давайте установим необходимые библиотеки Python:

pip install requests
pip install graphqlclient

Теперь давайте создадим новый файл takeshape.py и импортируем необходимые библиотеки:

import requests
from graphqlclient import GraphQLClient

Далее мы настроим экземпляр GraphQLClient и выполним аутентификацию с помощью нашего ключа API:

client = GraphQLClient('https://api.takeshape.io/project/<project_id>/graphql')
client.inject_token('<api_key>')

Поменяйте <project_id> и <api_key> на ваши фактические ID и ключ API. Вы можете найти их в своей учетной записи TakeShape.

Запрос данных

Давайте теперь запросим данные из нашего экземпляра TakeShape. В этом примере мы получим список сообщений для блога:

query = '''
  query {
    getBlogPosts {
      items {
        _id
        title
        content
      }
    }
  }
'''
result = client.execute(query)
print(result)

Этот запрос извлечёт список сообщений блога вместе с их полями _id, title и content. Вы можете настроить этот запрос для получения других полей или фильтрации данных на основе определённых критериев.

Изменение данных

Помимо запроса данных, мы также можем изменять данные с помощью API TakeShape. Например, мы можем создать новый пост в блоге, используя следующее изменение:

mutation = '''
  mutation CreateBlogPost($title: String!, $content: String!) {
    createBlogPost(input: {
      title: $title,
      content: $content
    }) {
      _id
      title
      content
    }
  }
'''
variables = {
  "title": "New Blog Post",
  "content": "This is the content of my new blog post."
}
result = client.execute(mutation, variables)
print(result)

Этот код создаст новую запись в блоге с указанным заголовком и содержанием. Вы можете настроить его для создания других типов контента или обновления существующего.

Создание веб-приложений, использующих несколько технологий, может быть сложной задачей. Однако сочетание Flask, Python, React и TakeShape может упростить процесс разработки и повысить производительность вашего приложения. В этой статье мы покажем, как использовать эти технологии для создания простого веб-приложения.

Требования

Python установлен на вашем локальном компьютере.
Node.js и npm установлены на вашем локальном компьютере.
Учётная запись TakeShape и ключ API.

Учётная запись TakeShape и ключ API

Перейдите на сайт https://www.takeshape.io/ и создайте учётную запись Takeshape:

Создайте веб-приложение на Python Flask с помощью TakeShape, GraphQL и React

Создайте новый проект TakeShape с шаблоном Simple Blog:

Дайте ему подходящее имя:

Вы сможете увидеть экран настроек проекта:

На левой боковой панели перейдите в раздел API Keys и нажмите кнопку New API Key в правом верхнем углу:

Дайте API-ключу желаемое имя. Вы можете выбрать, какие разрешения вы хотите для ключа API. Для этого проекта вы можете выбрать чтение в качестве разрешения:

В API в Workbench вы можете увидеть различные формы/схемы, которые вы можете запросить, а также образец запроса. Вы можете скопировать этот запрос, чтобы передать его в Flask API:

Вы также можете изменить этот запрос в соответствии с вашими требованиями и получать только необходимые данные, увеличивая скорость их приёма.

Настройка Backend-составляющей

Давайте начнём настраивать серверную часть нашего приложения, используя Flask и Python. Сначала создайте новый каталог и перейдите к нему в терминале:

mkdir Python_Takeshape_React_GraphQL
cd Python_Takeshape_React_GraphQL

Затем создайте виртуальную среду, чтобы изолировать ваши зависимости:

python -m venv env

Активируйте виртуальную среду:

source env/bin/activate

Установите Flask и библиотеку запросов:

pip install flask requests

Создайте новый файл app.py и добавьте в него следующий код:

from flask import Flask, jsonify
import requests

app = Flask(__name__)

@app.route('/api/posts')
def get_posts():
    response = requests.get('https://api.takeshape.io/project/<project ID>/graphql', headers={
        'Authorization': 'Bearer ' + '<bearer token>',  
        'Content-Type': 'application/json'
    }, json={
        'query': '''
          {
          getPostList {
            items {
              _id
              author {
                _id
                biography
                name
                slug
              }
              body
              deck
              featureImage {
                _id
                caption
                credit
                description
                filename
                mimeType
                path
                sourceUrl
                title
                uploadStatus
              }
              slug
              tags {
                _id
                name
              }
              title
            }
            total
          }
        }
        '''
    })

    print("RESPONSE",response)
    response.raise_for_status()
    print(response.json())
    posts = response.json()['data']['getPostList']['items']  
    
    print(posts)
    return jsonify(posts)

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

Поменяйте <project_id> и <api_key> на ваши фактические ID проекта и ключ API. Этот код настроит приложение Flask, которое извлекает список сообщений блога из TakeShape с помощью API GraphQL.

Запустите Flask приложение :

export FLASK_APP=app.py
flask run

Теперь, если вы перейдёте по адресу http://localhost:5000/api/posts, вы должны увидеть в своём браузере список сообщений блога в формате JSON.

Настройка Frontend-составляющей

Далее мы настроим внешний интерфейс нашего приложения с помощью React.

Создайте новый каталог client внутри каталога Python_Takeshape_React_GraphQL:

mkdir client
cd client

Инициализируйте новое приложение React:

npx create-react-app .

Установите необходимые пакеты:

npm install axios react-router-dom

Создайте новый файл Posts.js и добавьте в него следующий код:

import React, { useEffect, useState } from "react";
import axios from "axios";
const Posts = () => {
  const [posts, setPosts] = useState([]);
  const getPosts = () => {
    const url = "http://localhost:5000/api/posts";
    axios
      .get(url)
      .then((res) => {
        console.log(`response received as \n ${res.data}`);
        setPosts(res.data);
      })
      .catch((err) => console.log(err));
  };
  useEffect(() => {
    console.log("in useEffect");
    getPosts();
  }, []); 
 return (
    <div>
      <h1>Posts obtained</h1>
      {posts.map((post) => (
        <li>
          {post["title"]} : {post["author"]["name"]}
          <br></br>
          <br></br>
          {/* {post["body"]["blocks"]["deck"]} */}
          {post["deck"]}
          <br></br>
          <br></br>
          <br></br>
        </li>
      ))}
    </div>
  );
};
export default Posts;

Создайте новый файл App.js в каталоге src и добавьте в него следующий код. Вы можете видеть, что компонент Posts был импортирован в компонент App.

import "./App.css";
import React from "react";
import Posts from "./components/Posts";

const App = () => {
  return (
    <div>
      <h1>Blog Posts</h1>

      <Posts />
    </div>
  );
};

export default App;

Тестирование приложения

Учитывая, что внутренний сервер Flask уже работает на port 5000, вы можете запустить frontend для получения данных из backend и отображения сообщений в блоге.

Запустите приложение React:

npm start

Теперь, если вы перейдёте по адресу http://localhost:3000 в своём браузере, вы должны увидеть список сообщений блога, отображаемых на странице.

Полный код проекта будет доступен по этой ссылке

Заключение

В этой статье мы продемонстрировали, как использовать Flask, Python, React и TakeShape для создания простого веб-приложения, которое получает список сообщений блога из TakeShape с помощью GraphQL API. Объединив эти технологии, мы создали приложение, использующее сильные стороны каждой технологии. С этой основой вы можете продолжить создание своего приложения с дополнительными функциями и функциями.