Поделиться через

Подробное руководство по настройке

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

Подсказка

Если вы не хотите выполнять действия вручную, попросите GitHub Copilot помочь вам выполнить эту работу. Репозиторий Starter-Kit с поддержкой ИИ, и Copilot поможет вам интерактивно выполнить настройку. Попробуйте выполнить следующую команду: "Помогите мне приступить к работе с этим репозиторием и запустить пример HelloWorld".

Шаг 1. Запуск скрипта установки

Сценарий установки автоматизирует большую часть конфигурации (регистрация приложений, значения по умолчанию и т. д.).

# From the repo root
pwsh ./scripts/Setup/Setup.ps1 -WorkloadName "Org.MyWorkload"

Примечания к скрипту установки:

  • Имя рабочей нагрузки должно соответствовать формату Organization.WorkloadName. Для разработки используйте Org.[YourWorkloadName].
  • Если повторно используется существующее приложение Microsoft Entra, убедитесь, что URI перенаправления SPA настроены, как описано в руководстве по настройке репозиториев вручную.
  • В macOS/Linux используйте pwsh для запуска скриптов.
  • Убедитесь, что для политики выполнения PowerShell задано значение "Неограниченные" и файлы будут разблокированы, если вам будет предложено запустить файлы PowerShell.
  • Следуйте указаниям, которые предоставляет скрипт, чтобы все настроить.

Сценарий установки может выполняться несколько раз. Если значения уже присутствуют, вам будет предложено перезаписать их. Если вы хотите перезаписать все, используйте параметр Force.

Замечание

Если возникают ошибки установки, ознакомьтесь с ошибкой установки PowerShell в разделе устранения неполадок ниже.

Подсказка

Если у вас возникли проблемы с скриптом автоматической установки, вы можете следовать руководству по настройке вручную .

Шаг 2. Запуск среды разработки

Запустите сервер разработки (интерфейсный интерфейс + API) и зарегистрируйте локальный экземпляр в Fabric с помощью DevGateway.

# Terminal 1: start local dev server
pwsh ./scripts/Run/StartDevServer.ps1

# Terminal 2: start DevGateway to register your local instance with Fabric
pwsh ./scripts/Run/StartDevGateway.ps1

Шаг 3. Включение функций разработчика в Fabric

Перейдите на портал Fabric и настройте необходимые параметры:

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

Перейдите к параметрам портала администрирования и включите следующие параметры клиента:

  • Администраторы мощностей и сотрудники могут добавлять и удалять дополнительные рабочие нагрузки
  • Администраторы рабочей области могут разрабатывать рабочие нагрузки партнеров
  • Пользователи могут видеть и работать с дополнительными рабочими нагрузками, которые не проверяются корпорацией Майкрософт

Снимок экрана: параметры клиента.

3.2 Включите режим разработчика Fabric:

Перейдите к параметрам разработчика Fabric и включите режим разработчика Fabric:

Снимок экрана: режим разработчика Fabric.

Теперь вы готовы создать свой первый объект Hello World в Fabric.

Шаг 4. Тестирование элемента HelloWorld

Вы можете получить доступ к рабочей нагрузке из Концентратора рабочей нагрузки (найдите имя рабочей нагрузки) или перейти напрямую. Затем создайте элемент Hello World.

Steps:

  1. Open Fabric Workload Hub: найдите рабочую нагрузку (например, Org.MyWorkload).

    • Прямая навигация: https://app.fabric.microsoft.com/workloadhub/detail/<WORKLOAD_NAME>?experience=fabric-developer
    • Замените <WORKLOAD_NAME> фактическим именем рабочей нагрузки (например, Org.MyWorkload)

  2. Создайте новый элемент: выберите тип элемента Hello World и выберите рабочую область разработки.

  3. Проверка функциональности: откроется редактор; убедитесь, что элемент работает должным образом и отображается как собственный артефакт в рабочей области.

Поздравляю! Вы создали первый элемент из среды разработки.

Шаг 5. Начало написания кода

Теперь, когда все настроено, можно приступить к созданию собственных пользовательских элементов. Следуйте нашему комплексному руководству, чтобы узнать, как создать пользовательские элементы Fabric:

📖 Руководство по созданию пользовательских элементов Fabric: В этом руководстве приведены два подхода к созданию элементов:

  • Подход с использованием ИИ: Используйте GitHub Copilot для интерактивного руководства (рекомендуется для начинающих разработчиков)
  • Подход к скриптам вручную. Использование автоматизированных сценариев PowerShell для быстрого установки (рекомендуется для опытных разработчиков)

Параметры быстрого запуска:

  • Обновите существующий редактор HelloWorld: Workload/app/items/HelloWorldItem/HelloWorldItemEditor.tsx
  • Или создайте каркас нового элемента с помощью сценария: ./scripts/Setup/CreateNewItem.ps1

Удачной работы с кодом! 🚀

Лучшие практики

  • Форкните репозиторий: Форкните репозиторий Starter-Kit и используйте свой форк в качестве основы для вашего проекта.
  • Поддерживайте синхронизацию: поддерживайте синхронизацию вашего форка с основным репозиторием, чтобы получать улучшения.
  • Обеспечение согласованности структуры проекта. Сохраните структуру проекта Starter-Kit и шаблоны организации, чтобы обеспечить совместимость с будущими обновлениями и обеспечить четкость кода.
  • Обычная интеграция Starter-Kit: регулярно интегрируйте изменения кода из Starter-Kit в проект, чтобы воспользоваться исправлениями ошибок, новыми функциями и обновлениями системы безопасности. Настройте процесс для регулярного просмотра и объединения изменений из вышестоящего репозитория (ежемесячно или ежеквартально).
  • Проверьте манифесты раньше. Проверьте манифест рабочей нагрузки рано и следуйте разрешениям с минимальными привилегиями.
  • Используйте контейнеры разработки: используйте контейнеры разработки или Codespaces для согласованной, временной среды.
  • Используйте предоставленные скрипты: используйте предоставленные скрипты (setup, StartDevServer, StartDevGateway) для автоматизации установки и ежедневного рабочего процесса.

Устранение распространенных проблем

Ошибка установки PowerShell

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

Снимок экрана: ошибка установки PowerShell.

Ошибка политики выполнения скрипта

Если вы столкнетесь с: cannot be loaded because the execution policy is unrestricted

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

Порт 5173 используется

Если DevServer не может запуститься на порту 5173, найдите и завершите процесс:

# Find process using port
Get-Process -Id (Get-NetTCPConnection -LocalPort 5173).OwningProcess

# Terminate process
Stop-Process -Id <ProcessId> -Force

Ошибки зависимостей

Если возникают ошибки, связанные с отсутствием зависимостей:

# From Workload folder
cd Workload
npm install

Проблемы с проверкой подлинности DevGateway

Если при запуске DevGateway проверка подлинности завершается ошибкой:

  1. Проверьте URI перенаправления для регистрации приложения в Microsoft Entra
  2. Убедитесь, что параметры клиента разрешают необходимые функции разработчика
  3. Убедитесь, что вы вошли в правильный клиент в DevGateway

Подробные сведения об устранении неполадок см. в файле README репозитория Starter-Kit.

Важные заметки

Новые ограничения доступа к локальной сети Chrome

Google ввел новые ограничения на доступ к локальной сети (LNA) в Chrome, которые нарушат работу локальной разработки при использовании DevServer. Эти ограничения не позволяют веб-сайтам получать доступ к локальным сетевым ресурсам без явного разрешения пользователя.

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

  1. Перейдите к chrome://flags/#local-network-access-check в Chrome
  2. Установите для флага значение "Отключено"
  3. Перезапуск Chrome

Почему это необходимо: новые ограничения блокируют обмен данными между рабочей нагрузкой, работающей в Fabric, и локальным сервером DevGateway, который является важным для рабочего процесса разработки.

Дополнительные ресурсы:

Это важно

Без отключения этого флага локальная разработка с помощью DevGateway не будет работать в Chrome. Это изменение конфигурации требуется только для сред разработки.

Дальнейшие шаги

  • Last updated on