Задача
Чтобы расширить возможности нашего продукта SkyHistory, приложения для просмотра, управления, хранения, фильтрации сообщений в Skype и их поиска по дате, мы создали кроссплатформенную библиотеку графических элементов пользовательского интерфейса. Библиотека для создания пользовательских интерфейсов отвечает за отображение текстовых сообщений в Skype, чатов, в том числе групповых, и фильтров по дате.
При выполнении задачи наша команда выбрала:
- кроссплатформенный фреймворк Electron;
- Node.js для работы с бэкендом;
- формат AppX для распространения и установки приложения в Windows 8, 10, Phone 8.1, 10 Mobile, 10 IoT Core, Xbox One, HoloLens.
Подход
В случаях, когда необходимо разработать нативные графические приложения для различных операционных систем с помощью веб-технологий, задачу поможет решить фреймворк Electron. Он предоставляет платформу для разработки кроссплатформенных десктопных приложений с HTML/CSS/JavaScript и Node.js для доступа к системному API. Фреймворк уже поспособствовал созданию множества приложений, в числе которых — Atom (текстовый редактор с открытым исходным кодом), редактор исходного кода Visual Studio Code, корпоративный мессенджер Slack и другие.
Поэтому при создании кроссплатформенной библиотеки графических элементов пользовательского интерфейса команда разработчиков СКЭНД отдала предпочтение фреймворку Electron. Благодаря ему мы достаточно быстро разработали библиотеку и реализовали все необходимые функции.
Так как наша кроссплатформенная GUI-библиотека является частью продукта SkyHistory, все данные для отображения выбираются из базы данных SQLite. Для этого мы использовали уже существующий драйвер SQLite ODBC, написанный на C++ и обернутый в .NET Core Data.SQLite, для обеспечения совместимости и кроссплатформенности.
Для запуска пакета приложений в Windows Store был сформирован инсталляционный пакет в формате AppX с помощью Electron-Windows-Store CLI.
Описание
Кроссплатформенная GUI-библиотека для SkyHistory включает в себя:
- списки пользователей и групп пользователей;
- календарь для просмотра и фильтра записей по датам, месяцам и сезонам;
- панели меню и инструментов;
- элемент пользовательского интерфейса «список сообщений в беседе»;
- элементы поиска и фильтрации сообщений в Skype.
Один из главных элементов пользовательского интерфейса — «список сообщений в беседе» (message conversation list) — дает возможность:
- размещать текстовые сообщения различной длины;
- использовать специфические заголовки и подзаголовки с привязкой ко времени;
- настраивать шрифт и его параметры, например, выбирать размер, тип, цвет шрифта для собственных сообщений и сообщений других пользователей;
- динамической прокрутки.
Ключевые решения
Собрав вместе ряд элементов, мы создали библиотеку, для которой характерны следующие особенности:
- это кроссплатформенная библиотека для построения графических пользовательских интерфейсов;
- для разработки библиотеки использовался фреймворк Electron;
- использование менеджера пакетов NuGet;
- компонент .NET Core Data.SQLite стал неотъемлемой частью разработки;
- наша GUI-библиотека совместима с Windows Anniversary Update (Redstone) для загрузки приложения в формате AppX в Windows Store.
Результат
Kроссплатформенная GUI-библиотека для построения графических пользовательских интерфейсов
Кроссплатформенная GUI-библиотека для SkyHistory является единой для платформ, поддерживающих Microsoft Skype, — Windows, Linux и macOS. После выхода обновления Windows Anniversary Update (Redstone) приложения могут загружаться в Windows Store в пакетах AppX. Чтобы автоматически их установить, пользователям нужно просто дважды кликнуть на файл с расширением .appx.