Тази статия първоначално беше публикувана в моя стар блог.
Създаването на междуплатформено десктоп приложение може да бъде предизвикателство, но проектът 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 framework. Можете да използвате 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 Cloud се състои от множество продуктови услуги. Всяка от тези продуктови услуги има собствен 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 framework“. Наистина исках да използвам „Framework на Office UI Fabric“, но поради ограничение на лиценза не ми е позволено да използвам Office UI Fabric в контекста на това настолно приложение.
Резюме
Беше страхотно изживяване в разработването на това настолно приложение и се надявам да ви хареса кодът на приложението. Виждам голямо бъдеще за проектите Electron и Angular. Наистина съм развълнуван да видя какво още мога да направя с Angular 2.0 и API на Office 365. Ако имате обратна връзка, моля, уведомете ме чрез коментара на статията, Twitter или Страницата с проблеми в GitHub.
