Эта статья изначально была опубликована в моем старом блоге.
Создание кроссплатформенного настольного приложения может быть сложной задачей, но проект GitHub Electron упрощает это. С помощью Angular 2.0 и Office 365 я покажу вам, как создать рабочий стол Office 365 с помощью Electron.
Код проекта доступен на GitHub: https://github.com/Cecildt/angular2-O365-desktop-app
Вы можете выполнить форк кода или оставить отзыв на странице проблем GitHub.
GitHub Electron
Проект GitHub Electron был создан GitHub для простого создания настольных приложений с кроссплатформенной поддержкой. Он возник из их текстового редактора Atom. Electron позволяет создавать кроссплатформенные настольные приложения с использованием веб-технологий. На основе Electron были созданы различные другие популярные приложения, такие как Slack и Visual Studio Code. Больше указано на сайте Electron.
Если вы хотите узнать больше о GitHub Electron, перейдите по этой ссылке: http://electron.atom.io/
Угловой 2.0
Angular 2.0 - это полная переработка фреймворка Angular JavaScript. Вы можете использовать TypeScript для написания вашего приложения, а Angular 2.0 позволяет вам разбивать ваше приложение на более мелкие компоненты, которые упрощают работу. В Angular 2.0 есть больше возможностей, которые я рекомендую вам прочитать.
Если вы хотите узнать больше об Angular 2.0, перейдите по этой ссылке: https://angular.io/
Я также хотел бы отметить, что следующие статьи и видео вдохновили меня и помогли мне выделить в создании этого приложения:
- Angular2 и Office365 с унифицированными API ADAL
- Создайте настольное приложение с Angular 2 и Electron
- Angular 2.0 и Microsoft Graph (включая видео)
API-интерфейсы Office 365
Облачная служба Microsoft Office 365 состоит из нескольких продуктовых служб. У каждой из этих продуктовых служб есть собственный REST API, который вы можете вызывать в своем приложении. Microsoft представила унифицированный API Graph API, который упрощает взаимодействие с различными сервисами продуктов внутри Office 365.
В настольном приложении я решил использовать единый REST API: https://graph.microsoft.io/
Приложение
Я решил, что настольное приложение должно быть простым, поскольку я создал его в качестве учебного опыта, а также облегчил понимание другими. Приложение использует поток неявной проверки подлинности в Azure Active Directory для вашего клиента Office 365. Вам необходимо зарегистрировать приложение в Azure Active Directory как собственное приложение с необходимыми разрешениями. Пошаговая инструкция по регистрации приложения представлена в файле Readme.md в исходном коде проекта.
Приложение отображает следующие области Office 365 для вошедшего в систему пользователя:
- Файлы OneDrive для бизнеса
- Контакты
- Группы
- Письма
- Блокноты OneNote
- Задания
- Популярный контент
- Пользователи организации
Это только начало приложения, и в будущем я хочу получить уникальный опыт в этих областях. Вот некоторые будущие улучшения для приложения:
- Установите параметры главного меню Electron.
- Улучшение обработки ошибок.
- Реализуйте лучший дизайн для каждого раздела.
- Кнопка ручного обновления для пользователя.
- Добавить подкачку контента.
- Добавьте D3.js для компонентов приборной панели
- Задача настройки производственных сборок.
- Создавать модульные тесты (показать модульное тестирование Angular 2.0).
Пользовательский интерфейс приложения основан на Материальном дизайне Google. В частности, я использую фреймворк Material Design Lite. Я действительно хотел использовать Office UI Fabric framework, но из-за ограничений лицензии мне не разрешено использовать Office UI Fabric в контексте этого настольного приложения.
Резюме
Это был большой опыт разработки этого настольного приложения, и я надеюсь, вам понравится код приложения. Я вижу большое будущее для проектов Electron и Angular. Мне очень интересно узнать, что еще я могу сделать с Angular 2.0 и API-интерфейсами Office 365. Если у вас есть отзывы, дайте мне знать в комментариях к статье, в Twitter или на странице проблем GitHub.
