Что такое виджет и как им пользоваться
Разработчики софта и владельцы сайтов стараются упростить процесс взаимодействия со своим продуктом. Одним из эффективных способов оптимизации такого взаимодействия является внедрение виджетов, под которыми подразумеваются как небольшие приложения для операционных систем, так и элементы сайтов.
В этой статье я разберу основные положения о виджетах, расскажу об их типах и о том, как начать ими пользоваться, чтобы оптимизировать сайт или упростить работу в операционной системе.
Значение слова «виджет»
Виджет – небольшое графическое приложение или сопроводитель к полноценному ПО, которое выводится на рабочий стол компьютера или главный экран смартфона/планшета. Также виджеты используются на сайтах, это относится к небольшим рекламным интеграциям, таймерам, формам связи и другим мелочам, о которых вы узнаете в отдельном разделе этого материала.
Основные разновидности виджетов
Выше вы узнали, что виджеты бывают разными. Давайте более детально разберемся с их типами, чтобы понимать разницу, сферы использования и преимущества этих небольших инструментов.
Виджеты для рабочего стола (desktop-widgets)
Наиболее распространенными среди обычных пользователей считаются виджеты для рабочего стола компьютера или главного экрана мобильного устройства. Такие приложения или дополнения можно назвать desktop-widgets, из чего становится понятно их основное предназначение.
Рассмотрим сначала виджеты для компьютера под управлением Windows (в новой macOS и многих дистрибутивах Linux они также поддерживаются). Продукт Microsoft раньше поддерживал сторонние гаджеты (синоним виджетов), в Windows 7 было даже встроенное приложение с разными окнами, которые выводили как полезную информацию, так и мини-игры.
Позже разработчики ОС отказались от них (оказывается, виджеты были небезопасны) и « выпилили » из операционной системы все эти десктопные окна. Теперь у пользователей Windows остается только один вариант – установить дополнительные приложения для работы с ними. Существуют программы, специализирующиеся исключительно на виджетах и позволяющие добавлять любые вспомогательные экраны, а также настраивать их как угодно не только в плане внешнего вида, но и функционально.
Одним из лучших решений считается Rainmeter. При желании вы можете перейти на официальный сайт разработчиков и ознакомиться с функциональностью данного решения. Приведенная выше программа упомянута исключительно в качестве примера.
Если с компьютерами все понятно, то вот виджеты на телефоне хоть и работают похоже, но имеют свои особенности. В мобильных ОС есть стандартные гаджеты, которые реализованы совершенно по-разному. В iOS даже решения от сторонних разработчиков выглядят стандартизировано и позволяют создать приятную композицию из нескольких разных виджетов, размещенных на главном экране.
С Android все сложнее, поскольку в нем нет никаких ограничений или рекомендаций по внешнему виду и функциональности виджетов. При должном подходе можно сформировать их гармоничное отображение, но на это уйдет больше времени.
По поводу функциональности стоит тоже немного поговорить. На iOS многие виджеты не просто позволяют просмотреть общую информацию о погоде или заряде аккумулятора, что и без этого инструмента делается за несколько секунд. Многие из них позволяют выполнить некоторые простые операции и всячески взаимодействовать с программами, сопровождением для которых они являются. В Android многие подобные гаджеты вообще бесполезны или выполняют те функции, которые можно реализовать и без них, сделав всего пару нажатий внутри целевого приложения.
Добавление виджетов в мобильных ОС происходит при помощи ленты оболочки или самой операционной системы, о чем более детально пойдет речь в одном из следующих разделов статьи.
Виджеты для сайтов (web-widgets)
Вторая разновидность рассматриваемых элементов – web-widgets. Пользователь может видеть подобные приложения при просмотре современных сайтов. Их тематика напрямую зависит от направления сайта, ведь никому не нужно добавлять виджет обратного звонка в онлайн-кинотеатр.
Подобные решения не только делают сайт красивее и удобнее в плане функциональности, но и позволяют удержать клиента, повторно привлечь его внимание, оказать быструю консультацию или выполнить еще множество разных действий. Далее я рассмотрю два популярных типа веб-виджетов, чтобы вы имели общее представление об их работе.
Виджет обратного звонка
Некоторые сайты специализируются на продажах, поэтому часто общаются с клиентами по телефону для обсуждения деталей заказа. Виджет обратного звонка представляет собой активное окно, всплывающее в определенный момент, например, когда юзер хочет покинуть сайт. Обычно в этом окне присутствует сообщение о том, что вам перезвонят в течение минуты и дадут скидку, нужно только оставить номер телефона.
Упомяну и такое дополнение для сайтов, как форма отправки сообщений. Это может быть обратная связь или диалог (чат) с представителем компании в режиме реального времени, например, когда нужно получить быструю поддержку.
Считается, что данные элементы благоприятно сказываются на заинтересованности пользователя, повышают конверсию и продажи. Такие виджеты можно заказать у специализированных компаний или сделать самому при наличии соответствующих знаний.
Таймер обратного отсчета
В качестве второго популярного варианта рассмотрю таймер обратного отсчета. По названию этого виджета уже понятно его предназначение – он не является активным и всего лишь отображает на экране время до окончания или начала какого-либо события. Это может быть виджет срока до окончания акции или начала распродажи.
Таймер обратного отсчета хоть и считается виджетом, но иногда встраивается на сайт как GIF или другой тип анимации, что уже зависит от реализации поставленной задачи веб-разработчиком. Существуют даже специальные онлайн-сервисы, позволяющие в несколько кликов создать уникальный виджет обратного отсчета, выбрать для него оформление и получить HTML-код для вставки на сайт.
Что такое лента виджетов и как ей пользоваться
Выражение «лента виджетов» по большей части относится к мобильным устройствам. Если говорить об Android, то там разработчики оболочки самостоятельно решают, как реализовать такую ленту и какие функции для нее добавить. Собственно, они и определяют количество и тематику встроенных виджетов.
Сама лента появляется после долгого тапа по главному экрану телефона или планшета. Зажмите один из виджетов и перетащите его в любое удобное место на главном экране. Сделайте то же самое с любым другим приложением, создав тем самым композицию. Теперь вы можете быстро воспроизводить музыку, искать в Google, видеть погоду и многое другое.
Установка виджетов на смартфоне
Многие мобильные приложения предлагают свои виджеты, с которыми вы можете ознакомиться, открыв ленту (об этом написано выше). Однако такие инструменты не всегда оказываются полезными или же не удовлетворяют потребности юзера. Тогда хорошим вариантом будет поиск соответствующих решений в Play Market или App Store.
Вы можете найти целый набор различных дополнений на разные случаи жизни. Ознакомьтесь с существующими решениями в магазинах приложений и выберите те, которые подойдут именно вам.
Приложения сообщений
Раз уже говорим о мобильных операционных системах, затронем и приложения сообщений. По умолчанию в Android и iOS установлена программа «Контакты»/«Телефон». В ленте для нее можно выбрать виджет быстрой отправки сообщений и добавить его несколько раз на главный экран, указав для каждого ярлыка свой контакт. К подобным решениям относятся и инструменты от сторонних разработчиков, выводящие текст прямо на главный экран или обладающие другими функциями, упрощающими отправку сообщений.
Теперь вы знаете, что виджеты используются не только на компьютерах и смартфонах, но и на разных сайтах. Вы получили основную информацию о том, как устроены подобные решения и какие функции выполняют. Если вы являетесь начинающим вебмастером, полезно будет узнать, как добавлять активные окна на сайт, что значительно улучшит его функциональность и позволит вам набраться опыта в плане разработки.
Разработка виджета под Android
Подготовка
Для разработки была выбрана Android Stuido.Продукт еще очень сырой, не все разработчики готовы на него перейти, но отличная работа Preview и широкие возможности системы сборки Gradle берут верх над всеми недочетами. Поэтому мы рискнули попробовать, и, как оказалось, не зря.
Для тестирования, помимо непосредственной отладки на тестовом смартфоне, мы также использовали программные эмуляторы. Стандартным пользоваться достаточно проблематично, были рассмотрены различные высокопроизводительные эмуляторы Android-x86, AndroVM, Genymotion, Manymo и другие. В итоге мы выбрали Genymotion — он подкупил своей простотой установки и скоростью работы Android-x86, подробная инструкция по настройке и установке — необходим для тестирования на устройствах с Android 4.0 и ниже.
Данные эмуляторы отлично работают под различными ОС: Linux, Mac, Windows, у разработчиков бывают разные предпочтения, а переубеждать их неправильно, так что кроссплатформенные инструменты выручают.
Также эти программы помогают при автоматизированном тестировании: тесты написаны с использованием Android Instrumentation Framework, JUnit, Robotium. Подробнее об этом в следующей статье, которую мы опубликуем в ближайшее время 🙂
Проектирование
Итак, мы хотим, чтобы пользователь видел поисковую форму, кнопку голосовых запросов, а при увеличении доступного размера виджета — анонсы актуальных новостей.
По данным Google Play, в мире зарегистрировано около 4500 видов различных устройств с поддержкой Android.
Помимо разрешения экрана, эти устройства могут различаться диагоналями и плотностью точек на единицу площади (ppi). К счастью, задачу можно упростить и для определения размеров элементов виджета использовать аппаратно-независимые пиксели — dp. Большинство смартфонов используют сетку 4×4, для 7-дюймовых планшетов сетка может быть 6×6, да еще и сам размер ячейки зависит от лаунчера и версий API Android. В таблице мы привели получившиеся размеры в dp для различных устройств:
| Samsung GT-i9000 | Nexus 4 | Samsung Tab | Nexus 7 | |
|---|---|---|---|---|
| 1 x 1 | 64 x 58 | 64 x 58 | 74 x 74 | 80 x 71 |
| 2 x 2 | 144 x 132 | 152 x 132 | 148 x 148 | 176 x 159 |
| 4 x 3 | 304 x 206 | 328 x 206 | 296 x 222 | 368 x 247 |
Можно отталкиваться от формул:
для API младше 14 размер = (74 x количество ячеек) — 2
для последних версий размер = (70 x количество ячеек) — 30
Если во время тестирования вы сталкиваетесь с проблемами на каком-то конкретном устройстве, например при смене ориентации экрана, то проще добавить отдельный layout или указать нужный размер в dimens.xml, чем пытаться подогнать параметры. Еще на этапе проектирования обратите внимание на повторно используемые элементы, чтобы при разработке вынести их в отдельные layout, а для вставки в необходимое место используйте Include. В нашем приложении данную технологию использовали для новостей, и для реализации тени у некоторых элементов home_news_row.xml:
Реализация
Данные для виджета мы получаем с сервера в JSON — все достаточно просто и подробно описано в документации. Если у виджета установлен минимальный размер (поисковая строка и иконка голосового запроса), то анонсы актуальных новостей мы не запрашиваем, а при увеличении виджета сначала проверяем, есть ли закэшированные актуальные новости, после чего берем имеющиеся данные, тем самым экономя трафик и батарейку.
Проанализировав текущее распространение версий Android мы выяснили, что версия 2.2 все еще актуальна и ее необходимо поддерживать. К сожалению, поддержка изменения размеров виджета доступна только с версии 3.0, поэтому для более старых версий сделаем статичную версию развернутого виджета. Доля устройств версий 3.x на текущий момент несущественна, и мы решили реагировать на изменение размера виджета начиная с Android 4.1 c помощью метода onAppWidgetOptionsChanged. Но не все с ним гладко: он не срабатывает в некоторых модифицированных прошивках. Пришлось искать альтернативное решение, и оно нашлось: мы использовали событие com.sec.android.widgetapp.APPWIDGET_RESIZE в методе onReceive():
При установке виджета на домашний экран, пользователь может выбрать в настройках цвет и прозрачность. В данной реализации нет нечего сложного, но есть один нюанс: уровень прозрачности необходимо добавить к выбранному цвету. Например, вот так это реализовано у нас:
Полученный цвет с уровнем прозрачности применяется к элементу виджета. В нашем случае мы просто устанавливаем setBackgroundColor() у LinearLayout.
Также бывают ситуации, когда в альбомном режиме размер ячейки виджета получается меньше, чем в портретном, в связи с чем текст заданной длины уже не помещается. Можно попробовать уменьшить размер текста, но на устройствах с низким разрешением он становится нечитаемым. В связи с этим при смене ориентации мы просто уменьшаем в layout альбомного режима количество выводимых строк text.setMaxLines(2), а размер шрифта оставляем прежним:
Последнее свойство добавляет в конце строки многоточие.
Для того, чтобы наш виджет было легче найти в списке установленных, нужен последний штрих: подготовка картинок-превью, или previewImage. Можно попытаться воспроизвести итоговый виджет в графическом редакторе, мы же воспользовались приложением Widget Preview.
Как создать свои собственные виджеты для Android
Доброго времени суток. В этой статье разберём способ как создать свой собственный виджет для Android. Виджеты — это минимальные версии приложений, которые запускаются прямо на главном экране Android и могут быть чрезвычайно полезными. Большинство приложений в наши дни предлагают поддержку виджетов, вы можете легко получить к ним доступ прямо с домашнего экрана телефона. Однако, если вас не устраивает то, что доступно, вы всегда можете создать свои собственные виджеты для Android.
Как создать свои собственные виджеты для Android
Добавить новые виджеты на экран Android довольно просто. Нажмите и удерживайте пустое место на главном экране. Ниже появится меню. Выберите ярлык «Виджеты». На некоторых моделях нужно сделать свайп двумя пальцами по экрану телефона.
Вы попадете в список доступных виджетов вашего смартфона. Большинство приложений предлагают несколько вариантов. Выберите виджет, который хотите использовать, затем нажмите на него и перетащите на главный экран.
Некоторые виджеты предлагают параметры настроек, которые позволяют персонализировать их.
Как создать свой собственный виджет для Android
Приложение также включает в себя библиотеку встроенных шаблонов виджетов, которые вы можете использовать или изменять в соответствии с вашими потребностями. Поэтому, если не хотите создавать новый виджет с нуля, можете просто воспользоваться тем, что вам предоставляет приложение.
Персонализация своего виджета
Вызовите список доступных виджетов на вашем устройстве, как было написано выше. Прокрутите вниз, пока не найдете шаблоны виджетов KWGT, и выберите виджет из опций.
Перетащите его на главный экран.
Нажмите на пустой виджет, чтобы открыть его в приложении KWGT, затем нажмите на кнопку «Создать».
Вы попадёте в раздел редактирования, в котором есть шесть вкладок: «Элементы», «Фон», «Слой», «Глобальные элементы», «Ярлыки» и «Сенсорный экран». Каждая вкладка позволяет вам настроить определенный аспект виджета.
В настоящее время ваш виджет представляет собой просто пустой контейнер, который необходимо заполнить различными объектами. Но сначала вы должны добавить фон в свой новый виджет. Нажмите на вкладку фона и выберите цвет.
Читайте также Интересные статьи:
В качестве альтернативы вы можете использовать изображение с вашего устройства.
Как создать свои собственные виджеты для Android — д обавление объектов
Затем нажмите «Элементы», для добавления элементов в свой виджет. Это кнопка «+» в правом верхнем углу.
Вы попадёте на панель, где сможете выбрать различные объекты для добавления в виджет.
После того, как изображение или текст было добавлено в виджет, вы можете настроить его как вам угодно, редактировать текст, цвет, расположение, шрифт и так далее.
Вот такой простой виджет у меня получился.
Заключение
KWGT Kustom Widget Maker — в этой программе есть огромное количество возможностей для тех пользователей, которые хотят поэкспериментировать над своим рабочим столом Android и создать свои собственные виджеты, а также сделать его действительно уникальным. В KWGT Kustom Widget Maker присутствуют макеты и дополнительные настройки для таких типов виджетов, как астрономическая информация, мировое время, батарея, погода, текстовые виджеты, состояние памяти, карты, аналоговые часы и многое, многое другое. Всё это можно настраивать: изменять шрифты, добавлять эффекты, размеры всех элементов или даже делать виджеты в 3D, добавлять анимации.
Опыт разработки виджетов для сторонних сайтов
Если ваш продукт предоставляет услуги для бизнеса, рано или поздно появится задача создать встраиваемый виджет для сайтов клиентов. Это может быть виджет покупки билетов, прогноза погоды, курса валют, отзывов, комментариев и много чего другого.
В этой статье разберемся, как же сделать качественный виджет, который можно будет легко поддерживать и расширять.
Библиотека
Не нужно думать, что виджет у вас будет один.
Даже если сейчас это так и других виджетов не предвидится. Или вы уверены, что один виджет может устанавливаться один раз на страницу.
Главная сложность разработки виджетов для сторонних сайтов — сразу верно заложить архитектуру так, чтобы при развитии виджетов не нужно было изменять код, установленный на сайтах. Убедить пользователей виджета заменить код довольно сложно, долго и вызывает волну негатива.
Поэтому сразу проектируем код таким образом, чтобы он позволял вставлять неограниченное число разных виджетов на одну страницу без ограничений. Первое, что приходит в голову: «а давайте просто выведем iframe с нашего сайта?». И сделаем код вида:
И это будет большой ошибкой по нескольким причинам.
Невозможность расширения
У iframe довольно много ограничений, связанных с защитой конфиденциальности в браузере. Даже просто растянуть iframe под размер его содержимого без внешнего javascript кода не получится. Стилизовать можно будет только то, что лежит непосредственно в iframe, на сам тэг и его обертку никак нельзя будет повлиять.
Может, для начала это не критично, но по мере развития в это легко можно упереться, а код на сайтах уже установлен.
Про то, какие проблемы есть в работе с iframe и их решении, поговорим попозже.
Лишние запросы на бэкенд
Если на сайт будет установлено 5 таких одинаковых виджетов, то на ваш сервер придет 5 одинаковых запросов, хотя по факту нужен был только один. Конечно, можно сделать кеш на nginx и не пропускать запрос дальше, но зачем нам самим себе делать паразитные запросы? С таким кодом изменить логику получения данных не получится без изменения кода вставки виджета. Если виджет будет установлен на десятках сайтов, даже не самых популярных, в сумме они могут давать заметную нагрузку.
А как надо делать?
Если вы когда-нибудь устанавливали на сайт какой-нибудь виджет, например, от ВК, то могли заметить, что код виджета разделен на две части: библиотеку (SDK) и инициализацию виджетов:
В целом, хорошая практика — посмотреть, как делают другие, так можно сразу перескочить через множество граблей. В этом коде все хорошо, кроме того, что он не асинхронный. Это их право — давать вставлять по умолчанию код, который может заблокировать загрузку страницы, но мы так делать не будем, попозже поговорим об этом. Нам в этом коде важна идея.
Мы видим, что для вставки любого виджета нужно один раз подключить SDK и добавить один пустой тэг с инициализацией виджета. А дальше все делает javascript: он может делать любые запросы и любое их количество на бэкенд, и разработчики виджета могут в любой момент эту логику изменить без изменения кода виджета на сайте. В итоге из html на сайте для виджета должен быть только пустой контейнер с уникальным id. Чтобы не томить вас ожиданием, давайте сразу напишем пример SDK и рендер простого виджета.
А потом поговорим о том, что же у нас получилось и на что стоит обратить внимание.
Выглядит страшно и как-то избыточно, давайте разбираться, зачем все это.
Асинхронность
Сразу в глаза бросается атрибут async у тэга script. Он позволит браузеру не ждать загрузки нашего скрипта и продолжить отрисовывать сайт. Это важно: если по каким-то причинам наш скрипт будет недоступен (недоступен сервер, фаервол компании), это не должно влиять на скорость загрузки сайта клиента. Но все не так просто. Раз скрипт загружается асинхронно, это значит, что когда браузер дойдет до места, где инициализируется наш виджет, наш SDK может быть еще не загружен, и если просто вызвать метод из библиотеки — будет ошибка, причем плавающая, в зависимости от того, успел загрузиться скрипт или нет.
Поэтому в месте вызова виджета мы должны обработать оба сценария, когда SDK загрузилось и еще нет.
В первом случае мы просто вызываем функцию init(). Во втором — откладываем выполнение этой функции до момента, когда скрипт загрузится, добавляя замыкание в очередь. А последней строчкой в нашем SDK вызывается метод runInitCallbacks, который как раз и выполнит все отложенные инициализации.
Тут же есть защита от повторного подключения SDK, ведь пользователи могут проигнорировать ваши требования и вставить скрипт библиотеки десять раз.
Теперь наш код запускается всегда и не блокирует отрисовку страницы!
Изоляция
Название объекта SDK и id контейнеров должны быть уникальными, ведь наш код будет выполняться на совершенно разных сайтах. Ни в коем случае нельзя нарваться на совпадения. ID контейнеров желательно генерировать уникальными, например, через uniqid(). Нельзя надеяться и на сторонние библиотеки, установленные на сайте, и совсем не желательно приносить их с собой. Да, я о jQuery, как вы уже догадались.
Код виджетов должен быть легковесным и универсальным, сейчас уже не сложно писать кроссбраузерный код нативно. Кроме того, я настоятельно рекомендую использовать TypeScript, но это есть множество причин.
На кодировку сайта тоже не стоит полагаться, и даже в наше время встречаются сайты на cp1251. Поэтому кодировку скрипта нужно явно задать в ответе сервера в заголовке Content-Type.
Код, написанный нами выше, позволяет не останавливаться на одном виджете: сейчас у нас есть только myCompanyApi.button(), но ничего не мешает добавить другие виджеты.
Кеширование
Мы будем постоянно дорабатывать наш SDK, но браузеры кэшируют скрипты, если разработчик не дал других инструкций. Мы должны сами задать время, на которое можно кешировать нашу библиотеку, через заголовок Expires, например, час — адекватное время. С кешированием на фронтенде разобрались, теперь поговорим про бэкенд. Как уже обсуждали выше, обслуживание запросов со сторонних виджетов может создавать ощутимую нагрузку просто от количества сайтов, где виджеты установлены. Но чаще всего данные для всех пользователей в этих виджетах одинаковые, нет смысла запускать приложение, а тем более ходить в базу данных за ними на каждый запрос. Такие запросы вообще дальше nginx можно не пропускать, настроив кеширование на нем.
Если для отрисовки виджета нужны данные с бэкенда, но в целом можно отрисовать минимальную версию и без него (например, кнопку покупки билетов, но без признака наличия), хорошим тоном будет сделать fallback: если данные не загрузились за полсекунды, рисовать обрезанную версию виджета, а как только данные получены — дорисовывать. Это визуально ускорит загрузку и покажет виджет даже без работающего бэкенда (вдруг он при взаимодействии уже поднимется?).
Немного про iframe
Iframe — по сути, отображение сайта в сайте. Вернемся к нашему кейсу с кнопкой покупки билетов. Если мы хотим при клике открывать попап со страницей выбора места — без iframe нам не обойтись. Какие же там есть нюансы?
Неработающие cookie
Уже давно многие браузеры по умолчанию начинают запрещать использование cookie для сторонних сайтов (это когда домен iframe отличается от родительского сайта). Это значит, что при переходе между страницами внутри фрейма не получится отследить сессию (localStorage тоже не работает).Тут выход простой — не перезагружать страницы и делать SPA. Идентификатор сессии можно будет легко сохранить в переменной в js.
Общение с SDK
Часто требуется организовать общение нашего SDK с приложением внутри iframe, например, мы хотим при открытии виджета растянуть размер фрейма под размер контента. Для этого нам нужно сообщить размер контента из iframe в родительское окно. Это можно легко сделать через postMessage. Будьте внимательны при передаче конфиденциальных данных и верно указывайте targetOrigin, иначе данные могут «подслушать» другие сайты.
Спасибо за внимание, надеюсь, вы узнали для себя что-то новое.
