Создавайте облачные бизнес-приложения Office 365 в Visual Studio 2013

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

Чтобы удовлетворить основные требования этих приложений, вам нужна платформа, которая предоставляет набор сервисов. Кроме того, требуется инструментальный набор, позволяющий быстро создавать такие приложения и интегрировать их в существующие процессы DevOps вашей организации.

В этой статье мы покажем, как Visual Studio 2013 помогает создавать эти современные бизнес-приложения. Мы создадим приложение для подбора кадров, которое управляет объявлениями о приеме на работу и кандидатами на различные должности и формирует такую среду, которая бесшовно расширяет платформы Office 365 и Windows Azure и использует сервисы Office 365, например для идентификации и взаимодействия с социальными сетями.

Мы также продемонстрируем, как Visual Studio помогает продуктивно работать в полном жизненном цикле облачного бизнес-приложения (Cloud Business App) — от компиляции, выполнения и тестирования до публикации и использования непрерывной интеграции (continuous integration).

Создание нового проекта

Начнем с запуска Visual Studio 2013. Щелкните File | New Project. Шаблон Cloud Business App доступен в узле Apps в разделах Office/SharePoint для узлов Visual Basic и Visual C# (рис. 1). Эта категоризация основана на языке, применяемом в промежуточном уровне; клиент пишется на HTML и JavaScript.

Рис. 1. Создание нового проекта Cloud Business App в Visual Studio 2013

Cloud Business App включает четыре проекта:

• проект Server, который является базовым ASP.NET-проектом, применяемым для добавления таблиц и подключения к источникам данных;
• проект стандартного приложения для SharePoint, обеспечивающий соединение с Office 365;
• проект HTMLClient на JavaScript, в котором вы определяете UI своего приложения (экраны);
• сам проект Cloud Business App, который связывает все эти проекты воедино. Структуру этого проекта в Visual Studio можно посмотреть на рис. 2.

Рис. 2. Структура Cloud Business App

Мы подробно объясним, как использовать каждый из этих проектов.

Определение модели данных

Данные занимают центральное место в любом бизнес-приложении. Облачные бизнес-приложения поддерживают множество способов взаимодействия с этими данными. Начнем с определения новой модели данных в Table Designer. Потом мы развернем эту модель в Windows Azure SQL Database. С помощью Table Designer мы определим сущность Candidate. В табл. 1 показаны детали модели данных. Сущности состоят из свойств, которые являются либо простыми типами данных вроде string или integer, либо бизнес-типами, такими как URL, Email Address или Person. Специфическая логика проверки и уникальные визуализации встроены в инструментарий Visual Studio и исполняющую среду.

Табл. 1. Подробные сведения по сущности Candidate

Cloud Business App является приложением SharePoint. У него есть доступ к данным в тенанте Office 365, где оно выполняется. Сотрудники, имеющие дело с информацией, ежедневно используют SharePoint для создания, управления и обмена данными в среде коллективной работы. В нашем сценарии мы предполагаем, что список SharePoint в данный момент используется для отслеживания открытых вакансий. Этот список, включая введенные в него данные, показан на рис. 3.

Рис. 3. Список вакансий в SharePoint

Давайте подключим данные к этому списку с помощью операции Add Data Source в контекстном меню для папки Data Sources. На первой странице мастера выберите SharePoint и введите URL сайта SharePoint, для которого вы собираетесь вести разработку. (Если у вас нет сайта SharePoint для разработки, вы можете получить его с сайта dev.office.com — при наличии подписки на MSDN им можно пользоваться бесплатно в течение года.) На следующей странице представлены все списки и библиотеки документов, доступные на данном сайте SharePoint. Импортируйте список Job Postings, выбрав его и закончив диалог.

Корреляция данных из двух разных источников (в данном случае из SharePoint и SQL) и написание бизнес-логики, которая работает с ними обоими, — одна из самых мощных функций, которые вы получаете при создании облачных бизнес-приложений. Добавим связь между Candidates и Job Postings, используя Table Designer. И установим отношение «один ко многим» с помощью операции Add Relationship в Table Designer. Мы укажем, что каждый Candidate применим только к одному Job Posting. На рис. 4 показана точная конфигурация этого отношения. Теперь, когда мы определили модель данных, переключимся на UI для этого приложения.

Рис. 4. Отношение «один ко многим» между кандидатами и вакансиями

Проектирование UI

В современном мире больше не достаточно создавать UI, которые просто работают. Пользователи ждут от приложений, что они будут работать на широком спектре устройств — от смартфонов и планшетов до традиционных настольных ПК. Они также ожидают, что приложения будут поддерживать интенсивный ввод данных как с клавиатуры, так и сенсорными средствами. Приложения должны выглядеть согласованно в рамках компании и иметь фирменное оформление. Cloud Business Apps предоставляют вам шаблоны, разметки и элементы управления, с помощью которых очень легко решать эти нетривиальные задачи.

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

Добавьте первый экран, выбрав операцию Add Screen в контекстном меню для папки Screens в проекте HTMLClient. В диалоге шаблонов экранов предлагаются три шаблона, которые можно использовать как хорошие отправные точки. Для первого экрана мы воспользуемся шаблоном Browse Data Screen. Убедитесь, что в раскрывающемся списке Screen Data выбрана сущность Candidate и закончите диалог.

Данные занимают центральное место в любом бизнес-приложении. Облачные бизнес-приложения поддерживают множество способов взаимодействия с этими данными.

Screen Designer, приведенный на рис. 5, состоит из двух частей. Данные, связываемые с экраном, показываются на боковой панели слева, а иерархическое представление вашего экрана — в основной области.

Рис. 5. Screen Designer, отображающий экран Browse Candidates

Выберите List в Screen Designer и настройте Item Tap Action из списка его свойств. Вместо написания своего метода на JavaScript вы можете выбрать нужный из набора часто используемых предопределенных методов. Выберите Candidates.viewSelected и следуйте указаниям мастера для создания экрана подробных сведений (details screen). Вернитесь к первому экрану, выберите Command Bar и добавьте новую кнопку. На этот раз задействуйте метод Candidates.addAndEditNew и создайте экран Add Edit Details.

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

Поэтому мы выберем список плиток, который позволяет лучше использовать свободное место на экране и хорошо масштабируется под экраны разных размеров. Удалите из узла списка плиток все дочерние элементы, кроме Name, Phone и Email. Наконец, выберите более качественную визуализацию для команды из набора значков, изменив свойство Icons в списке свойств.

Приложение в действии

Пора взглянуть на выполняемое приложение. Нажмите F5 в Visual Studio, чтобы запустить его в браузере. При первом развертывании приложения на вашем сайте разработки для SharePoint, появится диалог с запросом на одобрение набора разрешений. При последующих нажатиях F5 этот этап будет пропускаться, если только вы не измените проект SharePoint в своем решении.

Приложение загружается, используя архитектуру Single-Page Application (SPA) с UI, полностью визуализируемым кодом на клиентской стороне. Взаимодействие с сервером осуществляется через асинхронные вызовы, что обеспечивает быстроту работы UI и его адаптивность. Один из примеров, где вы можете увидеть это, — список кандидатов на начальном экране, который использует прокрутку с приращением (incremental scrolling). Когда вы достигаете конца списка, в фоне динамически загружается следующий набор элементов без блокировки UI.

Все разметки хорошо адаптируются к разным форм-факторам, используя принципы адаптивного дизайна (responsive design techniques). Изменение размера окна браузера позволяет быстро увидеть, как будет выглядеть приложение на смартфоне или планшете (рис. 6). Все оптимизировано для сенсорного ввода, но так же хорошо работает на настольном ПК с использованием клавиатуры и мыши.

Рис. 6. Все три экрана облачного бизнес-приложения, выполняемого на мобильном устройстве

Теперь добавим нового кандидата. Отображаемый диалог предоставляет ожидаемый набор полей ввода и средство выбора, которое позволяет выбрать вакансию (Job Position) из присоединенного списка SharePoint. Выберите значение ReferredBy, используя автоматически заполняемое текстовое окно, в котором показываются предложения на основе каталога пользователей в вашей организации, например из Active Directory.

Дополнительную интеграцию с Office 365 вы заметите на экране подробных сведений, который сообщает информацию о присутствии (presence information) по каждой персоне. Карта контактов Lync отображает подробную информацию и обеспечивает богатое взаимодействие, например инициацию беседы через мгновенный обмен сообщениями (IM), отправку электронной почты или планирование встреч.

Поля, которые отслеживают, когда и кем была создана сущность и когда она была изменена в последний раз, добавляются автоматически. Это помогает соблюдать общие требования аудита без написания какого-либо кода. Если эти поля не требуются в вашем сценарии, можете переключиться обратно в Screen Designer, не останавливая приложение, удалить их и сохранить экран. Обновите окно своего браузера — перезапускать приложение в Visual Studio не нужно, так как все изменения мгновенно отражаются в приложении.

Добавление бизнес-логики

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

В Office 365 разработчики могут обращаться к Active Directory через сервис User Profile. В этом строго типизированном API имеются наиболее часто используемые свойства, такие как отдел пользователя. Через центр администрирования SharePoint можно добавлять в сервис User Profile собственные свойства, специфичные для вашей организации. Кроме того, вы можете получать их в коде, используя стандартные SharePoint API для прямого обращения к сервису User Profile.

Бизнес-логика пишется на промежуточном уровне, который представлен проектом сервера в этом решении. Раскрывающийся список Write Code в Table Designer предоставляет обширный набор точек входа в конвейер данных вашего приложения. Здесь мы обрабатываем событие проверки (validate event) и используем объект Application для запроса отдела текущего пользователя, вошедшего в систему:

if (entity.InterviewDate !=
  null && Application.Current.User.Department != "HR") {
  results.AddPropertyError("Only HR can schedule interviews",
  entity.Details.Properties.InterviewDate);
}

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

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

Интеграция с социальными сетями

Социальные сети используются для общения и коллективной работы. Пользователи ожидают от современных бизнес-приложений интеграции с социальными сетями. Cloud Business Apps обеспечивают такую интеграцию с помощью нескольких щелчков мышью, используя функцию Newsfeed в SharePoint. В этой первой версии вы должны сконфигурировать SharePoint на использование SharePoint Newsfeed вместо Yammer.

Параметры этапа разработки Откройте сущность Candidate в Table Designer и просмотрите окно Properties. В разделе Social есть параметры для генерации публикации в Newsfeed при создании и обновлении сущности. Включите оба параметра. Вы можете контролировать, какие свойства будут инициировать обновление в социальной сети, используя ссылку Choose post triggers. Выберите только триггер публикации InterviewDate, как показано на рис. 7. Свойство Summary позволяет выбрать, какие данные о сущности будут показаны в публикации.

Рис. 7. Свойства Social и диалог Post Triggers

Newsfeed в период выполнения Запустите приложение, чтобы увидеть сконфигурированную вами интеграцию с социальными сетями. Обратите внимание на ссылки Newsfeed и Follow в верхнем правом углу. Ссылка Newsfeed открывает новое окно со страницей, которая отображает действия приложения. Считайте его внутренним социальным каналом приложения. На странице Newsfeed имеется запись по каждому только что созданному Candidate и каждому Candidate, для которого изменена дата интервью. Щелкнув публикацию, вы перейдете прямо на экран подробных сведений о данном кандидате. Кроме того, можно начать новую беседу, поставить «лайк» (Like) или ответить на любую публикацию (Reply). Добавьте новый Candidate или смените дату интервью для существующего Candidate, чтобы увидеть примеры действий, выполняемых на странице Newsfeed (рис. 8).

Рис. 8. Страница Newsfeed в облачном бизнес-приложении

Параметр Newsfeed полезен, если вы хотите наблюдать за действиями в приложении, но есть более простой способ отслеживать его операции на регулярной основе. Щелчок ссылки Follow на начальном экране приведет к тому, что те же посты и беседы в социальных сетях будут публиковаться в персональном Newsfeed пользователя. Это дает возможность пользователю следить за тем, что происходит в этом приложении или любом другом Cloud Business App, Person либо Document из централизованного места.

Публикация

Теперь, когда вы создали и локально протестировали приложение, его нужно развернуть для других сотрудников организации. Выберите Publish из контекстного меню для проекта Cloud Business App в Solution Explorer. В диалоге публикации вы сможете указать ряд параметров: метод хостинга SharePoint, хостинг сервисов приложения, соединения с данными и аутентификацию средствами SharePoint.

Давайте пойдем по оптимальному пути публикации Cloud Business App в Office 365, используя защищенный Windows Azure Web Site для хостинга сервисов приложения и Windows Azure SQL Database для хостинга базы данных.

Вы можете опубликовать приложение в Office Store или в каталоге приложений своей компании. Если целью было создание приложения, доступного для всех, имеет смысл выбрать Office Store. Если приложение предназначено только для внутреннего использования в организации, тогда лучший вариант — каталог приложений. Этот каталог позволяет автоматически распространять приложение на множество сайтов в организации. Это упрощает получение приложения конечными пользователями и управляющим персоналом. На деле существует только один экземпляр приложения, даже если пользователи могут обращаться к нему со множества других сайтов.

Хостинг в SharePoint Выберите вариант Provider-hosted, который дает больше контроля над тем, как вы развертываете различные части приложения. Кроме того, он обеспечивает более широкое наблюдение за тем, как работает приложение, упрощает масштабирование разных уровней приложения и обеспечивает полный контроль за жизненным циклом данных приложения.

Хостинг сервисов приложения Теперь вы должны решить, где будет осуществляться хостинг сервисов приложения — в Windows Azure или на IIS-сервере. Windows Azure — самый простой и быстрый способ создания среды хостинга. Вам не нужно настраивать аппаратное обеспечение или даже конфигурировать IIS, так как Windows Azure сделает все это за вас.

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

Вкладка Service Type (рис. 9) предоставляет варианты для использования как Windows Azure Web Site или Cloud Service. Выберите вариант Web Site. Он отлично подходит для облачных бизнес-приложений, так как позволяет быстро распространять приложение, обеспечивает низкую стоимость хостинга и упрощает вертикальное масштабирование приложения, если оно станет популярным. Вариант Windows Azure Web Site по-прежнему дает доступ к другим сервисам Windows Azure, таким как базы данных SQL, кеширование, хранилище BLOB и шина сервисов.

Рис. 9. Диалог публикации

Далее выберите конкретный Windows Azure Web Site, который вы хотели бы задействовать. Если в списке ничего нет или если вам нужно создать новый Web Site, используйте ссылку на портале Windows Azure. Наконец, укажите HTTPS, чтобы надежно шифровать коммуникации.

Соединения с данными  Теперь пора сконфигурировать подключение к базе данных для приложения. Если вы уже связали базу данных SQL с Web Site, то строка подключения будет корректно заполнена. Если нет, можно создать новый связанный ресурс, следуя схеме, описанной в статье «How to Configure Web Sites» из документации Windows Azure по ссылке bit.ly/151m3GM. Вы также могли бы просто использовать строку подключения от существующей базы данных SQL. На вкладке Attached Data Sources убедитесь, что соединение указывает на правильную конечную точку, — зачастую конечные точки соединения отличаются в зависимости от того, публикуете вы приложение в производственной или в какой-то другой среде.

Аутентификация SharePoint  Последнее, что вы должны сконфигурировать, — тип аутентификации SharePoint. Это необходимо, чтобы разрешить взаимодействие сервисов приложения, размещенных на веб-сервере (в данном случае в Windows Azure), с SharePoint. На вкладке SharePoint Authentication выберите Use a client secret, поскольку вы используете Office 365. Чтобы задействовать этот тип аутентификации, вы должны получить Client Id и Client Secret. По сути, это идентификатор пользователя и пароль для приложения. Они требуются для использования Open Authorization (OAuth), которая является открытым стандартом для авторизации приложений.

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

• войдите на сайт Office 365 SharePoint, на котором вы планируете развернуть приложение и перейдите на http://имя вашего сайта SharePoint/_layouts/15/appregnew.aspx (на рис. 10 показана страница AppRegNew.aspx);
• щелкните кнопку Generate как для Client Id, так и для Client Secret;
• введите имя приложения как Title и домен для Windows Azure Web Site как App Domain;
• оставьте текстовое поле Redirect URI пустым и щелкните кнопку Create.

Рис. 10. Страница AppRegNew.aspx

Вернитесь в диалоговое окно публикации в Visual Studio, скопируйте Client Id и Client Secret со страницы подтверждения AppRegNew.aspx. На следующей вкладке уже должен быть указан URL вашего Windows Azure Web Site.

Публикация облачного бизнес-приложения Теперь вы должны увидеть вкладку Summary, на которой перечисляются все только что сконфигурированные вами параметры. Щелкните кнопку Publish для публикации Cloud Business App по различным конечным точкам. По окончании развертывания откроется окно File Explorer, где будет показан файл .app. Это пакет SharePoint-приложения, который вы должны загрузить в свой каталог приложений. Чтобы узнать больше об этом, см. статью по ссылке bit.ly/1bnIrRY.

Непрерывная интеграция может сэкономить вам время за счет автоматической публикации приложения на протяжении всего процесса разработки.

К этому моменту приложение находится в каталоге, и вы можете установить его на одном или нескольких сайтах.

Непрерывная интеграция

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

Team Foundation Server Чтобы задействовать преимущества непрерывной интеграции для Cloud Business Apps, вам потребуется либо Visual Studio Team Foundation Server (TFS) 2013, установленный на предприятии, либо TFS в облаке — Team Foundation Service (tfs.visualstudio.com). Если вы используете TFS 2013 на предприятии, обязательно скачайте шаблон TFS-процесса сборки и установите его для вашего группового проекта. В настоящее время новый шаблон процесса поддерживает только развертывание SharePoint-части Cloud Business App на сайтах SharePoint, размещенных в Office 365. Сайты SharePoint на предприятии пока не поддерживаются.

Создание определения процесса сборки Это определение описывает процесс непрерывной интеграции и состоит из шаблона процесса сборки (файла .xaml, определяющего рабочий процесс) и конфигурационных данных, уникальных для вашей среды. Чтобы создать новое определение сборки в Visual Studio, убедитесь, что вы подключены к компьютеру с TFS и что ваше приложение зарегистрировано в системе контроля версий исходного кода. На панели Builds в Team Explorer выберите New Build Definition.

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

• General Позволяет указать название, описание и правила обработки очереди.
• Trigger Позволяет указать, когда нужно запускать определение сборки. Вы можете выбрать вариант запуска вручную, пока не убедитесь, что это определение работает, как ожидалось.
• Source Settings Позволяет указать, что вы компилируете.
• Build Defaults Позволяет указать контроллер сборки, который будет обрабатывать определение сборки, и место размещения вывода.
• Process Позволяет указать используемый шаблон процесса сборки и параметры, передаваемые в рабочий процесс.
• Retention Policy Позволяет указать, сколько времени следует хранить результаты вывода от процесса сборки.

Три новых параметра для определения сборки Cloud Business App расположены на вкладке Process. Сначала выберите шаблон процесса сборки, созданный для Cloud Business Apps. Щелкните Show details и выберите либо шаблон TfvcContinuousDeploymentTemplate.12.xaml, либо шаблон GitContinuousDeploymentTemplate.12.xaml. Раскройте раздел Deployment Settings для настройки новых параметров (показаны на рис. 11).

• Path to Deployment Settings Этот параметр содержит путь к XML-файлу, где хранится информация для публикации Cloud Business App, в том числе строка подключения к внутренней базе данных и конечные точки для любых присоединенных источников данных.
• SharePoint Deployment Environment Name Этот параметр содержит SharePoint URL, имя пользователя и пароль, применяемые при соединении с сервером SharePoint, на котором будет опубликовано приложение.
• Windows Azure Deployment Environment Name Этот параметр содержит информацию, необходимую для подключения к подписке Windows Azure.

Рис. 11. Диалог для определения сборки

Queue a Build Definition Теперь, когда вы предоставили необходимые конфигурационные данные для использования непрерывной интеграции, можно запускать процесс сборки. Найдите только что созданное определение сборки в панели Builds и выберите из контекстного меню Queue New Build. Оставьте все, как есть в этом диалоге, и поставьте сборку в очередь. Она будет запущена контроллером сборки, как только он освободится.

Чтобы увидеть сборки в Build Explorer, выберите View My Builds из раскрывающегося списка Actions на панели Builds. Вы заметите, что в Build Explorer есть две вкладки: одна — для поставленных в очередь, обрабатываемых и недавно завершенных сборок, а другая — для сборок, законченных ранее. Вы можете просмотреть журнал для любой сборки, выбрав ее в Build Explorer, в том числе изучить дополнительную диагностическую информацию, если сборка прошла неудачно.

Приступайте прямо сегодня

Мы показали высокопродуктивные среды для определения данных и экранов, которые позволяют быстро создавать приложения и тут же запускать их в работу. Приложение имеет профессионально выглядящий UI, который соответствует SharePoint, и интегрируется с набором сервисов Office 365, таких как данные о присутствии через Lync, карта контактов, выбор нужного сотрудника и взаимодействие с социальными сетями. Мы продемонстрировали, как использовать Microsoft .NET Framework для настройки вашего приложения, его публикации и конфигурирования непрерывной интеграции как части вашего процесса разработки.

Приступайте к созданию облачных бизнес-приложений прямо сегодня. Вам понадобятся лишь Visual Studio 2013 и подписка на Office 365 уровня разработчика для использования изолированной среды разработки. Подписчики MSDN имеют право на разовую, годовую, однопользовательскую подписку Office 365 Developer. Чтобы узнать больше, пройдите по ссылке bit.ly/1fvYeAT.