Як створити WebApp з React і Flask - javascript.org.ua

Це простий посібник, як розгорнути свій власний API-сервіс за допомогою Raspberry Pi.

Вимоги

Плата Raspberry Pi (будь-яка модель Raspberry Pi, я використовую Raspberry Pi Zero W)
Попередньо встановлена операційна система Raspberry Pi OS
Для встановлення дотримуйтесь інструкцій тут
Джерело живлення 5V DC, 3A
Підключення по SSH до Raspberry Pi
Інструкції для налаштування SSH підключення можна знайти тут
Установлено Termius на локальному комп'ютері (інструмент для підключення до Raspberry Pi через SSH). Завантажте і встановіть тут
Postman для HTTP-запитів.

Налаштування Python3 на Raspberry Pi

Спочатку оновимо та оновимо ваш Raspberry Pi за допомогою цих команд:

sudo apt-get update  
sudo apt-get upgrade

Далі встановимо Python3:

sudo apt install python3  
sudo apt install python3-pip

Створіть папку, файл Python та середовище Python за допомогою цієї команди:

mkdir Flask_App  

cd Flask_App  

touch app.py  

sudo apt-get install python3-venv  

python -m venv flask_app_env  

source flask_app_env/bin/activate

Встановіть пакети Python за допомогою цієї команди:

pip3 install flask pyngrok

Встановлення Vim як редактора коду

Ми будемо використовувати редактор коду Vim для написання Python коду. Використовуйте цю команду для встановлення Vim на Raspberry Pi.

sudo apt install vim  

vi app.py

Python код

Ось код на Python:

from flask import Flask, jsonify, request  
from pyngrok import ngrok  

app = Flask(__name__)  

@app.route('/', methods=['GET'])  
def home():  
 return jsonify({'message': "Hello Word! Data from Raspberry pi Zero W."})  

if __name__ == '__main__':  
 public_url = ngrok.connect(5000)  
 print(f"Public URL: {public_url} ")  

 app.run(host='0.0.0.0', port=5000)

Пояснення коду:

Ми використовуємо фреймворк Flask для створення простого API додатку.
REST API поверне ‘message’: “Hello Word! Data from Raspberry pi Zero W.” у форматі JSON.
Flask додаток використовуватиме порт 5000 для хостингу додатку, також він виведе публічну URL-адресу, яку можна використовувати для GET запитів.

Виведення

Виведення

Ось публічна URL-адреса, надана ngrok: “https://23ea-2409-40c2-5010-fd3c-de7c-8468-6821-2d91.ngrok-free.app”

Тепер використаємо curl для локальної URL-адреси за допомогою цієї команди:

curl http://127.0.0.1:5000/

Тепер давайте відкриємо публічну URL-адресу в будь-якому веб-браузері.

Ось і все…

Тепер давайте використовуємо Postman для HTTP-запитів.

Висновок

Ми успішно розгорнули наш публічний REST API. Замість того, щоб залежати від великих хмарних сервісів, таких як AWS, Google Cloud для хостингу API, ми можемо використовувати цю техніку для хостингу власних API.

Соціальні мережі

Слідкуйте за мною на:

GitHub: https://github.com/Sakib-Dalal

LinkedIn: https://www.linkedin.com/in/sakib-dalal/
React об'єднує логіку та розмітку в одному місці: в компонентах.

JSX дозволяє писати ці компоненти, поєднуючи JavaScript логіку та розмітку, зберігаючи все організованим і легким для керування.

Різниця між HTML та JSX

Один кореневий елемент
JSX вимагає, щоб всі елементи були обгорнуті в один контейнер, наприклад, у <div> або Fragment (<>...</>), щоб уникнути помилок.
Закриття тегів
Усі теги повинні бути закритими. Наприклад:
camelCase для атрибутів
Атрибути в JSX використовують формат camelCase. Наприклад, class стає className, а stroke-width стає strokeWidth.

Backend

Тепер давайте напишемо частину backend за допомогою Flask на Python:

Створення Backend з Flask

Ініціалізація проекту для backend:
Створіть нову папку для проекту backend та перейдіть до неї:
mkdir backend && cd backend
Встановлення Flask та необхідних залежностей:
Встановіть Flask та інші бібліотеки для обробки HTTP-запитів:
pip install Flask flask-cors
Створіть файл app.py з таким вмістом:

from flask import Flask, request, jsonify  
from flask_cors import CORS  
from datetime import datetime  
import pytz  

app = Flask(__name__)  
CORS(app)  # Дозволяє CORS для frontend (React)  

@app.route('/local-time', methods=['POST'])  
def get_local_time():  
    try:  
        data = request.get_json()  
        latitude = data.get('latitude')  
        longitude = data.get('longitude')  
        country = data.get('country')  

        # Для простоти, повертаємо час Риму як приклад  
        tz = pytz.timezone("Europe/Rome")  
        now = datetime.now(tz)  
        local_time = now.strftime("%H:%M:%S")  

        return jsonify({"localTime": local_time, "country": country}), 200  
    except Exception as e:  
        return jsonify({"error": str(e)}), 500  

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

Запустіть сервер:
Після створення файлу app.py, запустіть сервер Flask за допомогою команди:
python app.py

Backend тепер працює на порту 5000 і готовий до прийому POST-запитів.

Деталі:

CORS використовується для того, щоб дозволити frontend (React) робити запити cross-origin до backend.
pytz використовується для обробки часових поясів, в даному випадку для того, щоб повернути місцевий час для Риму (змініть часовий пояс за необхідності).
Відповідь сервера є у форматі JSON з динамічно обчисленим місцевим часом.

Тепер backend налаштований за допомогою Flask і готовий відповідати на запити, що надходять від frontend React!

Запускаємо інтерфейс!

Перейдіть у директорію my-react-app і введіть у терміналі наступну команду:
npm run dev

Зазвичай Vite запускається на порту 5173, тож перевірте у терміналі, чи не знаходиться він на іншому порту.

Результат

Наше WebApp

Перекладено з: Come creare una WebApp con React + Flask