Ваш конспект

Полное руководство по созданию веб-приложения с Google AI Studio и Firebase

Ключевые тезисы:

• Создание полноценного веб-приложения с работающим бэкендом без написания кода.
• Использование Google AI Studio для генерации фронтенда и начальной настройки бэкенда.
• Интеграция Firebase для аутентификации, базы данных, хранения файлов и безопасности.
• Развертывание приложения в интернете с помощью хостинга Hostinger.
• Принципы универсальны и применимы к любому проекту, а не только к демонстрационному.

Четыре столпа реального веб-приложения

Для создания любого рабочего веб-приложения необходимы четыре ключевых компонента:

1. Аутентификация пользователей (вход/регистрация).
2. База данных (хранение данных пользователей).
3. Хранилище файлов (загрузка медиафайлов, документов).
4. Подключение всего к пользовательскому интерфейсу (интеграция фронтенда и бэкенда).

Демонстрационное приложение ClientVault (файловый портал для фрилансеров) идеально подходит для изучения этих принципов.

Формула идеального промта для AI Studio

Качество результата зависит от структуры запроса. Разбейте его на 4 части:

1. Что это такое: Название и краткое описание проекта (1-2 предложения).
2. Что ему нужно: Конкретный список страниц, функций и кнопок.
3. Внешний вид: Описание дизайна, цветов, макета простыми словами.
4. Функции бэкенда: Указание на необходимость аутентификации, базы данных, хранилища и правил безопасности. Это автоматически подключит Firebase.

Совет: Добавьте строку о включении любых других функций, необходимых для корректной работы, чтобы AI Studio заполнила пробелы.

Настройка бэкенда в Firebase Console

После сборки проекта в AI Studio и нажатия «Включить Firebase», первым делом настройте бэкенд.

Аутентификация

1. Перейдите в Firebase Console (console.firebase.google.com).
2. В меню слева: Build → Authentication → Sign-in method.
3. Добавьте провайдера «Email/Password» и включите его, чтобы пользователи могли регистрироваться.

Хранилище файлов (Firebase Storage)

1. В меню: Build → Storage.
2. При первом запуске потребуется перейти на тарифный план Blaze (оплата по факту использования с щедрым бесплатным лимитом).
3. Настройте учетную запись для оплаты (может потребоваться предоплата $10 для проверки карты, которая потом возвращается).
4. Рекомендуется установить бюджет оповещений (например, $5).
5. Создайте корзину (bucket) в «Production mode», выбрав бесплатное местоположение.

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

Тестирование и подключение интерфейса

Когда первые три столпа (аутентификация, БД, хранилище) настроены, нужно протестировать и подключить интерфейс.

Процесс:

1. Протестируйте каждую функцию приложения (регистрация, вход, загрузка файлов и т.д.).
2. Зафиксируйте все ошибки (кнопки не работают, файлы не загружаются).
3. Возвращайтесь в AI Studio и исправляйте проблемы по одной в отдельных запросах.
4. Тестируйте после каждого исправления.

Это итеративный процесс, уникальный для каждого приложения. Цель — добиться полной работоспособности всех функций.

Настройка административной панели

Владельцу приложения нужен обзор всех пользователей и данных.

Шаги:

1. Найдите User ID первого (административного) аккаунта в Firebase Console: Authentication → Users → скопируйте User UID.
2. Отправьте запрос в AI Studio на создание панели администратора, указав скопированный User ID.
3. Проверьте правила безопасности:
   • Firestore (База данных): Убедитесь, что в правилах (Rules) есть блок, разрешающий доступ вашему User ID.
   • Storage (Хранилище): Часто требуется обновить вручную. Замените правила в разделе Storage → Rules на кастомные, которые предоставляют администратору доступ ко всем файлам (не забудьте вставить свой User ID).

Готовые шаблоны запросов и правил безопасности можно найти в полном руководстве (ссылка в описании видео).

Развертывание на хостинге (Hostinger)

Чтобы приложение стало доступно в интернете, нужен хостинг.

Подготовка:

1. Сохраните проект на GitHub через настройки AI Studio.
2. Зарегистрируйтесь на Hostinger (по ссылке из описания для лучшей цены), выбрав Business-план (включает хостинг Node.js приложений).
3. Зарегистрируйте бесплатный домен на первый год.

Настройка развертывания:

1. В панели Hostinger создайте «Node.js Web App» и подключите свой GitHub-репозиторий.
2. Измените «Framework Preset» на «Vite».
3. Добавьте переменные среды (Environment Variables): Если в проекте есть функции ИИ, нужен API-ключ от Google AI Studio.
   • Создайте ключ в AI Studio: Dashboard → API Keys.
   • В Hostinger добавьте переменные: Gemini_API_key, Google_API_key, Vite_Gemini_API_Key (значение — ваш скопированный ключ).
4. Нажмите «Deploy».

Рабочий процесс обновлений

Внесение изменений в работающее приложение:

1. Внесите правки или отправьте запрос на исправление в Google AI Studio.
2. Сохраните изменения в GitHub через настройки AI Studio.
3. Hostinger автоматически обнаружит обновления в репозитории и переразвернет приложение. Вручную ничего делать не нужно.

Обзор панелей управления

• Firebase Console: Управление бэкендом (пользователи, данные, файлы, правила, аналитика использования).
• Hostinger hPanel: Управление хостингом, доменом, просмотр статуса развертывания. Используйте встроенного AI-помощника (Kodee AI) для вопросов.

Выводы:
Вы прошли полный путь от идеи до работающего веб-приложения в интернете, используя мощную связку Google AI Studio (фронтенд + автоматизация), Firebase (надежный бэкенд) и Hostinger (простой хостинг с CI/CD). Полученные знания о четырех ключевых принципах (аутентификация, БД, хранилище, интеграция) и итеративном процессе тестирования можно применить для создания любого собственного проекта.