Создание приложения Experience Builder и добавление виджетов

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

Создание пустого веб-интерфейса

Вы начнете с создания пустого веб-приложениям интерфейса.

  1. Войдите под учётной записью организации ArcGIS.
    Примечание:

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

  2. Щелкните вкладку Ресурсы и щелкните Создать приложение.

    Кнопка Создать приложение

  3. Выберите Experience Builder.

    Опция Experience Builder

  4. На главной странице щелкните Создать новое.

    Кнопка Создать новую

    Появится страница Шаблон, отображающая галерею опций шаблона. Шаблоны - это предустановленные компоновки и темы для создаваемых вами приложений. Для этого приложения вы будете использовать шаблон Пустой.

  5. На вкладке По умолчанию найдите шаблон Пустое полноэкранное и щелкните Создать.

    Шаблон Пустое полноэкранное

    Приложение открывается в конструкторе, показывая пустой холст. Вы переименуете свое приложение, указав более значимое название.

  6. На ленте щелкните Untitled experience 1 и введите State health demographics.
    Примечание:

    Заголовок по умолчанию может отличаться.

    Переименование приложения

    Веб-интерфейс теперь готов для добавления виджетов. Виджеты подразделяются на категории в зависимости от их функциональности, например, Ориентированный на карту, Ориентированный на данные или Элементы страницы.

Добавление виджетов в приложение

Далее вы добавите в приложение виджет Business Analyst, виджет карта и виджет текст.

  1. На панели Вставить виджет в разделе Ориентированный на карту перетащите виджет Business Analyst на холст.

    Виджет перетаскивается на холст

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

  2. На панели Business Analyst в разделе Режим щелкните Предустановленный.

    Режим Предустановленный

    Далее вы дополните виджет Business Analyst виджетами Карта и Текст.

  3. На панели Вставить виджет в разделе Ориентированный на карту перетащите виджет Карта на холст.

    Виджет Карта перетаскивается на холст

  4. На панели Элементы страницы перетащите виджет Текст на холст.
  5. Расположите виджеты Текст и Карта так, чтобы они были одинаковой ширины и занимали примерно одну треть холста с левой стороны. Измените размер виджета Business Analyst, чтобы использовать оставшееся пространство на холсте.

    Компоновка приложения

    Теперь внешний вид приложения сбалансирован. Вы всегда можете изменить размещение виджетов, но пока это выглядит хорошо.

Вы создали приложение в Experience Builder, добавили в него три виджета и разработали внешний вид вашего приложения и размещение виджетов. Виджетам в настоящее время назначены функции по умолчанию. Далее вы настроите конфигурацию виджетов в соответствии с потребностями вашего бизнеса.


Настройка виджета Business Analyst и публикация приложения

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

Примечание:

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

Настройка виджетов

Вы настроите виджет Business Analyst для проекта департамента здравоохранения, связав его с картой и задав предопределенное местоположение. Вы также выберете инфографику, отображаемую в вашем приложении, и установите заголовок.

  1. На канве щелкните виджет Business Analyst, чтобы выбрать его.

    Откроется панель Business Analyst. На этой панели вы можете настроить виджет по своему усмотрению.

  2. В ниспадающем меню Выбрать виджет Карта выберите Карта.

    Опция Карта

  3. В разделе Настройки местоположений убедитесь, что выбрано США и щелкните Установить местоположение.

    Кнопка Установить местоположение

    Откроется панель Установить местоположение. На этой панели вы можете определить географическую область для вашей инфографики. В этом примере вы будете использовать больницу системы здравоохранения Канзасского университета в качестве своего местоположения.

  4. В поле поиска введите 1700 SW 7th St. и щелкните результат поиска в Топике, штат Канзас.

    Результаты поиска адреса

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

  5. На панели виджета Business Analyst щелкните Установить буферы.

    Опция Установить буферы

    Откроется панель Установить буферы.

  6. На панели Установить буферы щелкните Время в пути и щелкните Применить.

    Опция буфера Время в пути

    Далее вы выберете инфографику по умолчанию, отображаемую в вашем приложении. Поскольку цель приложения - показать демографическую информацию и информацию, связанную со здоровьем, вы выберете инфографику с этими переменными.

  7. На панели Business Analyst щелкните Выбрать инфографику.

    Опция Выбрать инфографику

    Откроется панель Выбрать инфографику.

  8. Разверните категорию Инфографика Esri и выберите Health Care and Insurance Statistics.

    Ниспадающий список Инфографика

    Инфографика появится в виджете.

    Пример инфографики

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

  9. Дважды щелкните виджет Текст и введите Health Care and Insurance Report.

    Виджет Текст с новым текстом

  10. В виджете Текст выделите слово текст. На панели Текст измените размер шрифта на 28 пикселов, щелкните кнопку Полужирный и щелкните кнопку По центру, чтобы выровнять текст по центру.

    Настройки текста

    На канве обновляется текст.

    Обновленный текст в виджете

  11. На ленте щелкните кнопку Сохранить.

    Кнопка Сохранить

    Вы настроили приложение по своему вкусу и теперь готовы просмотреть его в режиме просмотра в реальном времени и опубликовать.

Публикация и совместное использование приложения

Далее вы увидите приложение так, как его увидел бы пользователь в режиме реального времени. Затем вы опубликуете, протестируете приложение и предоставите к нему общий доступ.

  1. На верхней ленте щелкните Просмотр в реальном времени.

    Опция Просмотр в реальном времени

    Приложение переходит в режим просмотра в реальном времени, а кнопка меняет цвет, указывая на то, что приложение находится в режиме просмотра в реальном времени.

    Режим просмотра в реальном времени активен

    Просмотр в реальном времени позволяет вам использовать приложение так же, как пользователь приложения.

  2. В виджете Карта в поисковом окне введите Wesley Medical Center и выберите результат на 550 N Hillside Street в Уичито, штат Канзас.

    Результаты поиска медицинского центра

    Карта приблизится к Wesley Medical Center и применит буферы вокруг местоположения, соответствующие времени в пути 5, 10 и 15 минут. Инфографика отображает медицинские и страховые переменные в 5 минутах езды от учреждения.

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

  3. В строке заголовка инфографики щелкните ниспадающее меню 5 минут езды и выберите 10 минут езды.

    Опция 10 минут езды

    Инфографика обновляется, чтобы показать демографические данные в 10-минутном буфере.

    Инфографика для области 10-минутной доступности на автомобиле

    Теперь, когда вы протестировали свое приложение и оно работает хорошо, вы опубликуете его, чтобы поделиться им.

  4. На ленте щелкните кнопку Сохранить, а затем кнопку Опубликовать, чтобы опубликовать свое приложение.

    Кнопка Опубликовать

  5. На ленте щелкните кнопку Дополнительно и выберите Просмотреть опубликованный элемент.

    Опция Просмотреть опубликованный элемент

    Откроется еще одна вкладка веб-браузера, и появится приложение.

  6. Протестируйте приложение, выполнив поиск медицинского учреждения.
  7. Вернитесь на другую вкладку браузера, где ваше приложение находится в режиме редактирования.
  8. На ленте щелкните кнопку Дополнительно и выберите Копировать ссылку на опубликованный элемент.

    Опция Копировать ссылку на опубликованный элемент

    Вы скопировали ссылку на опубликованное приложение и можете поделиться ею. Однако общий доступ по умолчанию настроен для владельца, поэтому никто другой не сможет получить доступ к приложению, пока вы не измените настройки. Вы можете перейти на страницу сведений об элементе в ArcGIS Online из приложения.

  9. На ленте щелкните кнопку Дополнительно и выберите Изменить настройки публикации.

    Опция Изменить настройки публикации

    Появится страница сведений об элементе для вашего приложения.

  10. Нажмите на кнопку Общий доступ.

    Кнопка Поделиться

    Появится окно Общий доступ с различными вариантами общего доступа. В настоящее время только владелец приложения может получить к нему доступ, но вы можете изменить настройку, чтобы поделиться им со своей организацией или со всеми (для всех).

  11. В окне Общий доступ щелкните Организация и щелкните Сохранить.

    Доступ для организации.

    Теперь приложение доступно в организации, поэтому им могут пользоваться другие участники вашей организации.

В этом учебном пособии вы создали веб-приложение, ориентированное на отображение инфографики для определенного местоположения, введенного пользователем. Вы добавили виджет Business Analyst и другие виджеты, настроили их, протестировали приложение, опубликовали и поделились им. Теперь другие могут использовать ваше приложение для получения информации о медицинском обслуживании и страховании в медицинском учреждении по своему выбору.

Вы можете найти больше учебных пособий в галерее учебных пособий.