Первое fullstack-приложение: как собрать всё и не бросить программирование

Когда новичок впервые слышит слово fullstack, может показаться, что сейчас придётся одновременно стать фронтендером, бэкендером, дизайнером, тестировщиком, администратором базы данных и человеком, который понимает, почему Docker опять не запускается.

На самом деле первое fullstack-приложение может быть очень простым.

Например:

• список задач;

• трекер привычек;

• приложение для заметок;

• каталог фильмов;

• личная библиотека;

• учёт расходов;

• мини-блог.

Главная задача первого проекта — не создать нового конкурента Telegram. Нужно понять, как разные части приложения общаются между собой.

Спойлер: кнопка на странице сама по себе ничего в базу данных не сохраняет. Было бы слишком легко.

Что вообще означает fullstack? 🧩

Fullstack-приложение обычно состоит из трёх основных частей: frontend, backend и базы данных.

Frontend

Frontend — это всё, что видит пользователь:

• страницы;

• кнопки;

• формы;

• списки;

• меню;

• сообщения об ошибках;

• загрузочный спиннер, который иногда крутится дольше, чем хотелось бы.

Frontend получает действия пользователя и отправляет запросы на сервер.

Backend

Backend получает запросы, проверяет данные и решает, что с ними делать.

Например, сервер может:

• создать новую задачу;

• удалить заметку;

• зарегистрировать пользователя;

• проверить пароль;

• вернуть список товаров;

• запретить пользователю редактировать чужой проект.

Именно на backend обычно находится основная логика приложения.

База данных

База данных хранит информацию:

• пользователей;

• задачи;

• публикации;

• комментарии;

• настройки;

• покупки;

• результаты обучения.

Без базы данных приложение может забывать всё после перезапуска. Получается не трекер задач, а цифровая рыбка с памятью на три секунды.

Как работает fullstack-приложение?

Представим, что мы создаём обычный список задач.

Пользователь вводит задачу «Купить кофе» и нажимает кнопку «Добавить».

После этого происходит целая цепочка событий:

1. Frontend получает текст из поля.

2. Frontend отправляет запрос на backend.

3. Backend проверяет, что задача не пустая.

4. Backend сохраняет её в базу данных.

5. База данных возвращает созданную запись.

6. Backend отправляет результат обратно.

7. Frontend показывает новую задачу на экране.

Пользователь видит одну новую строчку. Приложение в это время проходит небольшой квест из семи этапов.

Выбираем проект, который реально можно закончить

Первая ошибка новичка — выбрать слишком большой проект.

Кажется логичным сразу создать:

• социальную сеть;

• маркетплейс;

• музыкальный сервис;

• мессенджер;

• платформу онлайн-обучения;

• «что-то вроде YouTube, только лучше».

Через несколько дней в проекте уже появляются авторизация, роли, WebSocket, микросервисы и папка new_project_final_real. А работающей кнопки добавления записи всё ещё нет.

Для первого fullstack-приложения достаточно четырёх действий:

• создать запись;

• получить список записей;

• изменить запись;

• удалить запись.

Эти операции называют CRUD:

• Create — создание;

• Read — получение;

• Update — изменение;

• Delete — удаление.

Если приложение умеет выполнять эти действия, у вас уже есть полноценная основа.

Какой стек выбрать новичку?

Единственного правильного стека не существует. Но для первого проекта лучше использовать технологии, которые не заставят вас изучать пять языков одновременно.

Frontend

• HTML;

• CSS;

• JavaScript;

• React или Vue, если вы уже знакомы с одним из них.

Использовать фреймворк необязательно. Первое приложение вполне можно собрать на обычном JavaScript.

Backend

• Node.js;

• Express или другой простой серверный фреймворк.

Преимущество такого подхода в том, что frontend и backend можно писать на JavaScript.

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

База данных

Для начала подойдут:

• SQLite — простой вариант для локального проекта;

• PostgreSQL — более серьёзная база данных, которая часто используется в реальных приложениях.

Начать можно с SQLite, а затем перейти на PostgreSQL, когда базовые процессы станут понятны.

Шаг 1. Сначала соберите интерфейс

Создайте простую страницу:

• поле для ввода;

• кнопку добавления;

• список задач;

• кнопку удаления возле каждой задачи.

На этом этапе сервер пока не нужен. Добавьте временный массив:

const tasks = [
  { id: 1, title: "Изучить frontend" },
  { id: 2, title: "Не испугаться backend" }
];

Выведите элементы массива на страницу. Так вы отдельно проверите, что интерфейс работает и умеет отображать данные.

Это важный принцип разработки: не пытайтесь одновременно чинить frontend, backend, базу данных и свою веру в человечество.

Шаг 2. Создайте сервер

Теперь нужен backend, который будет принимать запросы. Установите Node.js, создайте проект и добавьте Express.

Простейший сервер может выглядеть так:

import express from "express";

const app = express();

app.use(express.json());

app.get("/tasks", (request, response) => {
response.json([
{ id: 1, title: "Собрать первое приложение" }
]);
});

app.listen(3000, () => {
console.log("Сервер запущен");
});

Маршрут /tasks возвращает список задач. Если открыть его в браузере или вызвать через frontend, сервер отправит JSON:

[
  {
    "id": 1,
    "title": "Собрать первое приложение"
  }
]

Поздравляем: у вас появился backend.

Он пока умеет примерно столько же, сколько калькулятор без кнопок, но начало положено.

Шаг 3. Соедините frontend и backend

На frontend можно отправить запрос с помощью fetch:

async function loadTasks() {
  const response = await fetch("http://localhost:3000/tasks");
  const tasks = await response.json();

console.log(tasks);
}

loadTasks();

Теперь frontend получает данные не из временного массива, а с сервера.

Это один из главных моментов во всём проекте. До этого у вас были две отдельные части. Теперь они начали разговаривать.

Иногда разговор будет заканчиваться ошибкой CORS, но это уже настоящие fullstack-отношения.

Шаг 4. Добавьте создание задач

Создадим серверный маршрут, который принимает новую задачу:

app.post("/tasks", (request, response) => {
  const task = {
    id: Date.now(),
    title: request.body.title
  };

response.status(201).json(task);
});

На frontend отправим POST-запрос:

async function createTask(title) {
  const response = await fetch("http://localhost:3000/tasks", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({ title })
  });

return response.json();
}

Теперь пользователь вводит текст, frontend отправляет его на backend, а backend создаёт новую задачу.

Пока данные ещё не сохраняются после перезапуска сервера. Для этого понадобится база данных.

Шаг 5. Подключите базу данных

Сначала создайте таблицу задач. Упрощённо она может выглядеть так:

CREATE TABLE tasks (
  id INTEGER PRIMARY KEY,
  title TEXT NOT NULL,
  completed BOOLEAN DEFAULT FALSE
);

Теперь вместо временного массива сервер будет:

• добавлять задачи в таблицу;

• получать задачи из таблицы;

• обновлять их;

• удалять их.

Не пытайтесь сразу построить идеальную структуру базы данных. Для первого проекта достаточно одной или двух таблиц.

Таблица пользователей, система ролей, история изменений, журнал действий и резервный кластер могут немного подождать. Ваш список покупок пока справится без инфраструктуры международного банка.

Шаг 6. Добавьте удаление и редактирование

Для удаления можно использовать маршрут:

DELETE /tasks/:id

Для изменения:

PATCH /tasks/:id

Например, когда пользователь отмечает задачу выполненной, frontend отправляет запрос:

await fetch(`http://localhost:3000/tasks/${taskId}`, {
  method: "PATCH",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    completed: true
  })
});

Backend получает id, находит нужную задачу и обновляет её в базе данных.

Теперь у вас есть CRUD. А значит, технически первое fullstack-приложение уже собрано.

Можно торжественно закрыть 38 вкладок с документацией. Хотя бы половину.

Где учиться, чтобы проект не остался в папке «когда-нибудь»?

Главная проблема первого fullstack-приложения обычно не в сложности технологий.

Проблема в том, что между просмотром урока и самостоятельным написанием кода находится огромная пропасть.

Можно посмотреть десять видео про API и всё равно зависнуть перед пустым файлом server.js.

Поэтому программирование важно изучать через практику.

В приложении Кодик можно проходить уроки, выполнять упражнения и сразу закреплять знания кодом. Такой формат помогает не просто запоминать команды, а понимать, как использовать их в собственных проектах.

Изучили JavaScript — написали код. Разобрались с функциями — выполнили практическое задание. Познакомились с frontend — собрали часть интерфейса.

Так постепенно появляется навык, из которого уже можно собрать настоящее fullstack-приложение.

Также у Кодика есть сообщество в Telegram-канале. Там выходят полезные посты, разборы терминов, советы для начинающих разработчиков и материалы, которые удобно читать для повторения программирования.

Иногда один короткий пост помогает вспомнить тему быстрее, чем очередное двухчасовое видео с названием «ВЕСЬ JAVASCRIPT ЗА ОДИН УРОК».