Урок 4

После этого урока вы:

• Поймёте, что такое база данных и зачем она нужна.
• Зарегистрируетесь в Firebase и создадите свой проект.
• Создадите коллекцию для хранения заявок с сайта.
• Получите конфигурационный ключ вашего проекта.
• Напишете JavaScript-код (с помощью AI), который отправляет данные из формы в Firebase.
• Протестируете отправку и проверите данные в таблице.

База данных (БД) — это место, где хранится информация, которую вы собираете с сайта. Например, когда кто-то заполняет форму заявки, его имя, телефон и email сохраняются в таблице.

Аналогия: представьте, что база данных — это электронная таблица (как Excel), но хранится она в облаке. В ней есть столбцы (поля) и строки (записи). Каждая строка — это одна заявка.

Зачем это нужно?

• Без базы данных вы не сможете сохранять информацию от пользователей.
• Сайт будет просто показывать страницу, но не будет «запоминать» данные.
• БД позволяет накапливать заявки, просматривать их и обрабатывать.

Firebase — это бесплатный сервис от Google, который даёт вам готовую базу данных и API (интерфейс для обмена данными) без необходимости писать серверный код.

Преимущества Firebase:

• Cloud Firestore — удобная база данных типа NoSQL с вложенным хранением данных.
• SDK для JavaScript — готовые функции для отправки и получения данных.
• Бесплатный тариф: 1 ГБ хранилища, 50 000 чтений и 20 000 записей в день — достаточно для небольшого лендинга.

Весь процесс выглядит так:

1. Пользователь заполняет форму на сайте.
2. JavaScript-код отправляет данные через SDK в Firebase.
3. Firebase сохраняет данные в коллекцию.
4. Вы можете просматривать все заявки в панели управления Firebase.

1.1. Регистрация

1. Перейдите на сайт firebase.google.com и нажмите Начать.
2. Зарегистрируйтесь через Google-аккаунт.

1.2. Создание проекта

1. В консоли Firebase нажмите Создать проект.
2. Введите название проекта (например, my-school-site).
3. Отключите Google Analytics для простоты (можно включить позже).
4. Нажмите Создать проект.
5. Подождите 1–2 минуты, пока проект создастся.

В Firebase данные хранятся в Cloud Firestore — это база данных типа NoSQL.

Как создать базу данных:

1. В консоли Firebase выберите Firestore Database в левом меню.
2. Нажмите Создать базу данных.
3. Выберите режим Тестовый (для начала).
4. Выберите ближайший регион.
5. Нажмите Создать.

3.1. Добавление веб-приложения

1. В консоли Firebase на главной странице проекта нажмите иконку веб (</>).
2. Введите nickname (например, my-site).
3. Нажмите Зарегистрировать приложение.

3.2. Конфигурационный объект

1. Скопируйте объект firebaseConfig — он содержит apiKey, authDomain, projectId и другие данные.
2. Сохраните его — он понадобится для JavaScript-кода.

Теперь попросите нейросеть написать код для отправки данных из формы в Firebase. Откройте DeepSeek, Qwen или используйте Giga Code и вставьте промпт:

Вставка на страницу:

1. Скопируйте полученный код.
2. Вставьте его в конец вашего index.html (перед закрывающим тегом </body>).
3. Замените объект firebaseConfig на свой (из шага 3).

5.1. Проверка локально

1. Запустите Live Server и откройте страницу.
2. Заполните форму и нажмите «Отправить».
3. Если всё правильно, вы увидите сообщение «Спасибо! Заявка отправлена.»

5.2. Проверка в Firebase

1. Перейдите в консоль Firebase, откройте коллекцию requests.
2. Вы увидите новый документ с вашими данными.

5.3. Если что-то пошло не так

• Откройте консоль браузера (F12 → Console).
• Посмотрите на ошибку.
• Скопируйте ошибку в DeepSeek и попросите исправить.

Если хотите получать уведомления о новых заявках:

6.1. Создание Telegram-бота

1. Найдите в Telegram @BotFather.
2. Напишите /newbot и следуйте инструкциям.
3. Получите токен бота (например, 123456:ABC-DEF).

6.2. Получение chat_id

1. Напишите @userinfobot и отправьте /start.
2. Он пришлёт ваш chat_id (например, 123456789).

6.3. Промпт для AI

7.1. Сохранение изменений

1. Закоммитьте все изменения (добавленный код).
2. Запушьте их на GitHub.

7.2. Проверка

1. Убедитесь, что GitHub Pages включён (ветка main, папка /root).
2. После публикации проверьте, что форма работает и на внешнем сайте.

1. Создайте ещё одну коллекцию в Firebase, например feedback (для отзывов) с полями:
   • name (строка)
   • text (строка)
   • rating (число)
   • createdAt (время)
2. Добавьте на сайт форму для отзывов и интегрируйте её с новой таблицей (используйте AI для генерации кода).
3. Настройте уведомления в Telegram при новой заявке (по желанию).
4. Закоммитьте и запушьте все изменения.
5. Пришлите ссылку на ваш сайт в чат группы.

Что мы узнали?

• Что такое база данных и зачем она нужна.
• Как работать с Firebase — регистрироваться, создавать коллекции, получать конфигурацию.
• Как отправлять данные из формы на сайте в облачную БД с помощью JavaScript.
• Как тестировать и проверять данные.

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

На следующем занятии мы разберёмся с Git, ветками и автоматическим бэкапом.