Playground и демо-приложения

Чтобы протестировать код карточки и посмотреть ее превью, используйте DivKit Playground: редактор в браузере и приложения для Android, iOS и Flutter.

Web

Чтобы протестировать ваш код и посмотреть HTML-превью карточек, используйте DivKit Web Playground. В DivKit Web Playground доступна библиотека с примерами различных элементов: вы можете отредактировать код любого примера и отобразить результат в браузере или экране мобильного устройства.

Чтобы создать HTML-превью карточки:

  1. В левой части страницы добавьте код прототипа карточки в формате JSON или TypeScript.
  2. Чтобы использовать готовые примеры, нажмите кнопку Samples и выберите элемент из библиотеки. Примеры можно редактировать и дорабатывать.
  3. В правой части страницы выберите разрешение и тип экрана, для которого отобразится прототип карточки. Если в коде есть ошибки, они отобразятся в разделе Errors под превью карточки.
  4. Чтобы открыть структуру карточки, в правом нижнем углу нажмите кнопку Structure.

Посмотреть результат на вашем устройстве

Чтобы смотреть результат изменения JSON в приложении для Android или iOS, свяжите с ним редактор:

  1. Установите приложение DivKit Playground для Android или iOS на ваше устройство.

  2. Выберите demo в приложении для Android или playground в приложении для iOS.

  3. В DivKit Web Playground нажмите кнопку Share.

  4. Отсканируйте в приложении QR-код либо вставьте адрес из поля Link to json. В приложении для Android сканер открывается кнопкой , в приложении для iOS он включается в разделе settings.

Android

Чтобы протестировать ваш код и посмотреть превью карточки на устройстве Android, используйте приложение DivKit Playground. Вы можете добавить в приложение код карточки в формате JSON или открыть ссылку на него:

  1. Установите приложение DivKit Playground.

  2. Выберите demo.

  3. Добавьте карточку одним из способов:

    • вставьте код в формате JSON или ссылку на прототип карточки в поле ввода;
    • откройте ссылку из редактора DivKit Web Playground;
    • выберите файл в формате JSON на устройстве.

    Совет

    Для создания кода карточки вы можете использовать библиотеку примеров DivKit Web Playground.

  4. Чтобы посмотреть результат, нажмите кнопку show the result.

iOS

Чтобы протестировать ваш код и посмотреть превью карточки на устройстве iOS, используйте приложение DivKit Playground. Приложение открывает карточку по ссылке на ее описание в формате JSON:

  1. Скачайте исходные файлы DivKit Playground из репозитория, скомпилируйте и установите приложение на устройство.

  2. Выберите playground.

  3. Добавьте карточку одним из способов:

    • вставьте ссылку на прототип карточки в поле ввода;
    • откройте ссылку из редактора DivKit Web Playground или отсканируйте ее QR-код. Сканер QR-кодов включается в разделе settings.

    Совет

    Для создания кода карточки вы можете использовать библиотеку примеров DivKit Web Playground.

  4. Чтобы посмотреть результат, нажмите кнопку load json.

Flutter

Чтобы протестировать ваш код и посмотреть превью карточки на устройстве Android или iOS, используйте приложение DivKit Playground. Вы можете добавить в приложение код карточки в формате JSON или открыть ссылку на него:

  1. Установите Flutter

  2. Скачайте исходные файлы DivKit из репозитория

  3. Запустите Playground App:

    flutter run -t example/lib/main.dart

  4. Выберите demo.

    1. Добавьте JSON-код верстки, вставив его из буфера обмена в поле ввода

      Совет

      Для создания кода карточки вы можете использовать библиотеку примеров DivKit Web Playground.

    2. Чтобы посмотреть результат, нажмите кнопку show the result.

  5. Выберите samples, чтобы посмотреть возможности клиента DivKit на Flutter.

Подключение DivKit в собственный Flutter-проект описано в разделе Flutter.

Узнать больше

Вы можете обсуждать интересующие вас темы в сообществе пользователей DivKit в Telegram: https://t.me/divkit_community_ru.

Репозиторий DivKit

Предыдущая
Типовая структура
Следующая
Инструкция