или что общего между сайтом и капучино
Вступление
Почти каждый айтишник хоть раз объяснял родственникам разницу между фронтендом и бэкендом. Кто-то говорил: "фронт — это то, что ты видишь", кто-то — "бэк — это сервер", а кто-то просто делал глоток кофе и переводил тему.
А теперь представьте: вы — кофемашина, а ваш любимый гость — это пользователь сайта. Гость нажимает кнопку “Эспрессо” — и магия начинается.
📱 Фронтенд — красивая панель с кнопками
Фронтенд — это то, что видит пользователь: кнопочки, меню, анимации. Он не делает кофе, но даёт вам выбрать, какой.
Задача 1: Создаём HTML-интерфейс кофемашины
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Кофемашина 3000</title>
</head>
<body>
<h1>Выберите напиток</h1>
<button onclick="order('espresso')">Эспрессо</button>
<button onclick="order('latte')">Латте</button>
<button onclick="order('capuccino')">Капучино</button>
<div id="status"></div>
<script>
function order(type) {
fetch(`/make-coffee?type=${type}`)
.then(res => res.text())
.then(data => {
document.getElementById("status").innerText = data;
});
}
</script>
</body>
</html>
💬 Комментарий
– HTML: это панель кофемашины
– Кнопки: как сенсор на экране
– fetch(...): это вызов официанта с заказом (или, по-научному, запрос к backend’у)
🔧 Бэкенд — мозг и сердце системы
Бэкенд — это то, что делает кофе. Получает заказ, ищет ингредиенты, варит, возвращает результат.
Мы сделаем его на Python с Flask:
Задача 2: Простой бэкенд
from flask import Flask, request
app = Flask(__name__)
@app.route("/make-coffee")
def make_coffee():
coffee_type = request.args.get("type")
if coffee_type not in ["espresso", "latte", "capuccino"]:
return "Такого напитка нет в меню ☹️"
return f"☕ Ваш {coffee_type.capitalize()} готов!"
💬 Комментарий
– /make-coffee — это вход в нашу кухню
– request.args.get("type") — официант передал заказ
– Мы проверяем, что умеем делать такой кофе
– Возвращаем: “Ваш кофе готов!”
🔄 Взаимодействие фронта и бэка
- Нажимаешь кнопку на сайте (фронтенд)
- JS вызывает fetch(...) с нужным типом кофе
- Flask принимает запрос
- Возвращает строку с результатом
- JS отображает это на сайте
⚙️ Задача 3: Добавим ожидание (симуляция времени приготовления)
import time
@app.route("/make-coffee")
def make_coffee():
coffee_type = request.args.get("type")
if coffee_type not in ["espresso", "latte", "capuccino"]:
return "Такого напитка нет в меню ☹️"
time.sleep(2) # Ждём 2 секунды
return f"☕ Ваш {coffee_type.capitalize()} готов!"
💬 Пользователь теперь чувствует, что “кофе действительно готовится”, как в настоящей машине.
🔐 Задача 4: Приватные напитки (авторизация)
Добавим проверку — кофе можно заказать только по паролю:
@app.route("/make-coffee")
def make_coffee():
secret = request.args.get("pass")
if secret != "admin123":
return "⛔ Доступ запрещен"
coffee_type = request.args.get("type")
...
💬 Хочешь секретный латте с ванилью? Нужен пароль.
📦 Задача 5: Храним заказы в базе данных
Добавим SQLite для хранения истории заказов:
import sqlite3
@app.route("/make-coffee")
def make_coffee():
coffee_type = request.args.get("type")
conn = sqlite3.connect("orders.db")
c = conn.cursor()
c.execute("CREATE TABLE IF NOT EXISTS orders (id INTEGER PRIMARY KEY, type TEXT)")
c.execute("INSERT INTO orders (type) VALUES (?)", (coffee_type,))
conn.commit()
conn.close()
return f"☕ Ваш {coffee_type} готов!"
💬 Теперь наша кофемашина не просто делает кофе, а ещё ведёт статистику продаж! Как в реальном бизнесе.
📊 Фронтенд с историей заказов
<button onclick="getOrders()">Посмотреть заказы</button>
<script>
function getOrders() {
fetch('/orders')
.then(res => res.json())
.then(data => {
document.getElementById("status").innerText =
"История заказов: " + data.map(e => e.type).join(', ');
});
}
</script>
И на бэке:
from flask import jsonify
@app.route("/orders")
def orders():
conn = sqlite3.connect("orders.db")
c = conn.cursor()
c.execute("SELECT type FROM orders")
data = [{"type": row[0]} for row in c.fetchall()]
conn.close()
return jsonify(data)
🎓 Итого: что такое frontend и backend
💡 Практика для читателя
- Добавь новые напитки и кастомизации (сиропы, размеры)
- Сделай вход по логину/паролю
- Добавь цену и общую выручку
- Сделай фронт на React или Vue
- Разверни на Railway, Render или Heroku
☕ Заключение
Frontend — это интерфейс пользователя.
Backend — это всё, что происходит "за барной стойкой".
А ты — тот, кто умеет всё это кодить и делать магию!
Хочешь следующую статью про:
- WebSocket в кофемашине (уведомления о готовности)
- AI-бариста (нейросеть выбирает напиток)
- Реальный деплой на сервер?
Пиши — все напишу и расскажу.