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

Firebase Studio предоставляет средство предварительного просмотра, которое отображает ваше приложение в реальном времени вместе с редактором кода.

Включите и настройте среду предварительной версии

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

1. В рабочей области откройте .idx/dev.nix .

   Firebase Studio автоматически генерирует этот файл при создании нового рабочего пространства и включает все применимые среды предварительного просмотра на основе выбранного вами шаблона. Если файла нет в вашем репозитории кода Firebase Studio , создайте его, а затем установите для атрибута idx.previews значение true . Затем добавьте атрибуты конфигурации, как показано в следующем примере:

   { pkgs, ... }: {
   
     # NOTE: This is an excerpt of a complete Nix configuration example.
     # For more information about the dev.nix file in Firebase Studio, see
     # https://firebase.google.com/docs/studio/customize-workspace
   
     # Enable previews and customize configuration
     idx.previews = {
       enable = true;
       previews = {
         # The following object sets web previews
         web = {
           command = [
             "npm"
             "run"
             "start"
             "--"
             "--port"
             "$PORT"
             "--host"
             "0.0.0.0"
             "--disable-host-check"
           ];
           manager = "web";
           # Optionally, specify a directory that contains your web app
           # cwd = "app/client";
         };
         # The following object sets Android previews
         # Note that this is supported only on Flutter workspaces
         android = {
           manager = "flutter";
         };
       };
     };
   }
   

   Полный список атрибутов Nix в Firebase Studio см. в разделе Nix + Firebase Studio .

2. Перестройте свою среду:

   • На палитре команд ( Cmd+Shift+P / Ctrl+Shift+P ) запустите команду Firebase Studio : Hard Restart .
   • В уведомлении об обновлении конфигурации среды нажмите «Перестроить среду» .

   Когда вы перестраиваете среду после изменения файла dev.nix , в вашем рабочем пространстве появляется панель предварительного просмотра, отображающая одну или обе вкладки Android и Интернет , в зависимости от того, что вы включили.

Используйте предварительный просмотр приложений

Firebase Studio предлагает предварительный просмотр в Интернете на эмуляторах Chrome и Android в рабочих пространствах Flutter, которые устанавливают ваше приложение в среду предварительного просмотра. Это позволяет вам полностью, от начала и до конца, протестировать свое приложение прямо из рабочей области.

Обновите предварительный просмотр для Интернета и Android.

Firebase Studio использует функции горячей перезагрузки базовых фреймворков (например, npm run start и flutter hot-reload ), чтобы предоставить вам оптимизированный внутренний цикл разработки. Firebase Studio предоставляет следующие типы перезагрузок:

• Автоматическая горячая перезагрузка : горячая перезагрузка выполняется автоматически при сохранении файла. Горячая перезагрузка, которую иногда называют «горячей заменой модуля» (или HMR), обновляет ваше приложение без перезагрузки страницы (для веб-приложений) или без перезапуска или переустановки приложения (для эмуляторов). Этот подход полезен для сохранения активного состояния вашего приложения, но может не всегда работать должным образом.

• Полная перезагрузка вручную : этот вариант эквивалентен обновлению страницы (для веб-приложений) или перезапуску приложения (для эмуляторов). Мы рекомендуем использовать полную перезагрузку, чтобы зафиксировать существенные изменения в исходном коде, например, при рефакторинге больших фрагментов кода.

• Ручной жесткий перезапуск . Этот параметр выполняет полный перезапуск системы предварительного просмотра Firebase Studio , включая остановку и перезапуск веб-сервера вашего приложения.

Все параметры перезагрузки доступны с помощью панели инструментов предварительного просмотра или палитры команд ( Cmd+Shift+P на Mac или Ctrl+Shift+P на ChromeOS, Windows или Linux) в категории Firebase Studio .

Чтобы использовать панель инструментов предварительного просмотра, выполните следующие действия:

1. Нажмите значок «Обновить» , чтобы обновить страницу. Это требует полной перезагрузки. Для другого типа обновления щелкните стрелку рядом со значком перезагрузки, чтобы развернуть меню.

2. Выберите в меню нужный вариант обновления: «Горячая перезагрузка» , «Полная перезагрузка» или «Жесткий перезапуск» .

Поделитесь своим предварительным просмотром в Интернете с другими

Вы можете поделиться веб-предварительной версией своего приложения с другими для получения отзывов, предоставив доступ, а затем поделившись прямой ссылкой на предварительную версию:

1. В панели инструментов веб -предварительного просмотра нажмите Значок «Поделиться ссылкой для предварительного просмотра» справа от адресной строки, чтобы открыть меню общего доступа.

2. Разрешите другим пользователям доступ к вашему рабочему пространству, используя один из этих вариантов:

   • Сделать предварительный просмотр общедоступным . Сделайте предварительный просмотр вашего рабочего пространства общедоступным. Это позволит любому пользователю Интернета получить доступ к серверу предварительного просмотра, работающему в вашем рабочем пространстве, пока оно активно и до тех пор, пока вы не отключите общий доступ.

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

3. Выберите «Копировать URL-адрес предварительного просмотра» , чтобы скопировать прямую ссылку на предварительный просмотр рабочей области, которую затем можно отправить тем, от кого вы хотите получить отзыв. Вы также можете использовать появившийся QR-код, чтобы открыть предварительный просмотр на мобильном устройстве.

Настройте автосохранение и горячую перезагрузку.

По умолчанию Firebase Studio автоматически сохраняет вашу работу через секунду после того, как вы перестаете печатать, запуская автоматическую горячую перезагрузку. Если вы хотите, чтобы Firebase Studio сохраняла вашу работу с другим интервалом, измените настройку автосохранения. Вы также можете отключить автосохранение.

Следующие шаги

• Публикуйте с помощью Firebase .
• Следите за своим приложением .