Перед вами продолжение цикла статей о разработке контекстных приложений для Office 365. В этой статье цикла Мария Горелкина — эксперт по стратегическим технологиям — рассказывает о создании приложений Office 365 на рабочих местах OSX, Linux или Windows с помощью Visual Studio Code. Все статьи колонки «Офис как Платформа» вы всегда можете найти по ссылке #officeplatform — Владимир Юнев.Visual Studio 2015 предоставляет специальные инструменты, которые могут помочь разрабатывать контекстные приложения для Outlook, Word, Excel, PowerPoint, для любых клиентов Office: веб-версии, Office для Windows, OS X и т.д.
Однако, для обладателей устройств под OS X и Linux так же существует сценарий разработки приложений для Office c помощью кроссплатформенного редактора кода Visual Studio Code. О нем, на примере OS X, и пойдет речь.
Подход к разработке приложений под офис и типы контекстных приложений мы уже описывали в предыдущем выпуске: Office как Платформа, выпуск №1
Напомню только основную идею.
Контекстные приложения Office запускаются внутри офисных приложений и могут взаимодействовать с ними через JavaSript API.
Получается, что контекстное приложение Office (Office Add-In) является простым веб-приложением, которое можно размезстить где угодно. Файл manifest.xml объясняет офисному приложению где располагается созданное веб-приложение и как нужно с ним взаимодействовать. Приложение Office самостоятельно заботится о размещении контекстного приложения внутри себя.
Подготовка среды
Для создания проекта контекстного приложения, включающего в себя необходимые файлы и зависимости, воспользуемся кодогенератором Yeoman Office generator. К тому же, нам понадобится заранее установить несколько дополнительных зависимостей: NPM, Bower, Yeoman, Yeoman Office generator, Gulp, TSD.
npm install -g bower yo gene</B><B>rator-office gulp tsd
Заранее создадим папку для проекта, в которой запустим генератор:
mkdir mytestaddin && cd $_
Создание контекстного приложения
Запускаем Yomen Office: yo office.
Укажем имя, папку проекта, тип контекстного приложения и технологии, которые будем использовать для его создания:
Теперь обновим файл manifest.xml, созданный генератором. Тот самый файл, который позволит передать детали нашего контекстного приложения в Office приложение.
Откроем проект в VS Code и файл manifest.xml:
Обновим URL на адрес, где будет размещен проект веб-приложения. Например, локально: localhost:8443/[path-to-add-in]
Офисные приложения должны работать по HTTPS. Поэтому, для разработки, отладки и размещения контекстного приложения локально необходимо обеспечить доступ к веб-приложению через HTTPS. Сделаем это с помощью gulp-webserver.
Yeomen Office добавил в проект файл gulpfile.js в качестве задачи serve-static. Запустим веб-сервер:
gulp serve-static
HTTPS сервер запустится по адресу: localhost:8443.
Веб-сервер можно запустить и через VS Code с помощью Ctrl+Shift+P -> Run Task -> serve-static -> Enter.
Если перейти в браузере по указанному URL контекстного приложения, можно увидеть, что оно запущено.
Используем VS Code
Yeoman Ofiice при создании проекта подготовил jsconfig.json файл. Этот файл VS Code будет использовать для вывода всех JavaScript файлов в в проекте, избавляя от необходимости включать повторяющиеся блоки кода
/// <reference path="../App.js" />
VS Code позволяет использовать TypeScript расширения для файлов (*.d.ts) для поддержки IntelliSense. Кодогенератор добавил файл tsd.json с сылками на сторонние библиотеки, выбранного типа проекта.
Необходимо только выполнить команду:
tsd install
Отладка
Для отладки клиентской части контекстного приложения можно использовать веб-клиент Office и инструменты разработки в браузере, отлаживая так же, как клиентскую часть обычного JavaScript приложения.
Если для серверной части используется Node.js или ASP.NET 5, в VS Code поддерживается отладка для этих платформ.
Установка контекстного приложения
Для использования контекстных приложений в Office нужно с помощью manifest.xml файла зарегистрировать их в магазине или установить на портале office 365 своей организации. В таком случае, у пользователей по всему миру или конкретно в вашей компании появится возможность подключить его и использовать для повседневных задач, связанных с офисными приложениями.
Например, любые контекстные приложения могуть быть установлены в каталог приложений Office 365 вашей организации. Для этого администратору в SharePoint Admin Center необходимо выбрать Apps->App Catalog->Apps for Office и загрузить manifest.xml файл вашего приложения.
В зависимости от типа контекстного приложения, которое вы создали, пользователи смогут добавить его в одно из своих офисных приложений путем Insert->Office Add-ins.
Полезные ссылки
Авторам
Друзья, если вам интересно поддержать колонку своим собственным материалом, то прошу написать мне на vyunev@microsoft.com для того чтобы обсудить все детали. Мы разыскиваем авторов, которые могут интересно рассказать про разработку под Office и другие темы.
Об авторе
Мария Горелкина
эксперт по стратегическим технологиям, Microsoft
За время работы в ИТ-индустрии занимала роль технического консультанта в таких ведущих компаниях, как Microsoft и HP. В сферу основных технологических интересов входит организация процесса разработки, разработка под Windows, возможности современных технологий для создания кросс-платформенных приложений.
Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.