Улучшаем насмотренность

Сегодня поговорим о фреймворке для тестирования Patrol, подумаем, как адаптироваться к разным экранам, и взглянем, на что способна связка из Rust и Flutter. Приятного чтения!

Обновление Patrol

Польская команда разработчиков LeanCode с гордостью сообщила, что их проект Patrol обзавёлся шильдиком 1.0. Он был построен вокруг идеи преодолеть ограничения существующих инструментов тестирования Flutter. Фактически это расширение возможностей штатных библиотек flutter_test и integration_test.

Во-первых, это добавление нативной автоматизации. Стандартные инструменты не позволяют выполнять такие действия, как предоставление разрешений, нажатий на уведомления или вход через WebView. Это приводило к тому, что любое естественное препятствие со стороны операционной системы не позволяло нормально проводить интеграционные тесты. Причина этого в том, что среда тестирования умеет рулить только виджетами и ничего не знает об интерфейсе операционной системы.

Patrol решил эту проблему, задействуя собственные среды тестирования UI. Для Android выбрали UIAutomator, а для iOS — XCUITest. Во-вторых, были разработаны пользовательские средства поиска, позволившие писать более простой код тестов.

Первый публичный релиз имел клиент-серверную архитектуру, и работал с помощью библиотеки flutter_driver. Это было ошибкой — библиотека оказалась самым слабым звеном и создавала проблемы. Борьба с ними вынудила команду перейти на другую архитектуру. Теперь вся функциональность Patrol включается непосредственно в тестируемое приложение. Такой симбиоз сделал настройку сложнее, но решил множество проблем, а также позволил запускать тесты внутри облачных инфраструктур, например, Firebase Test Lab.

Теперь команда разработки сосредоточилась на том, чтобы ускорить написание тестов, повысить стабильность и убрать ненужные пересборки приложения. Поскольку интеграционные тесты заменяют стандартные точки входа, то для запуска трёх разных тестов потребуется трижды пересобирать приложение. При этом каждый раз будет формироваться новая точка входа. Это неудобно и будет исправлено в будущих версиях Patrol. А пока можно поддержать разработчиков звёздочкой на Github.

Адаптируемся под разные экраны

Писатели-фантасты давно мечтали о гибких и складных экранах. Инженеры, читавшие их книги, всё-таки смогли создать потребительские устройства с гибкими экранами. Яркий пример — телевизор LG OLED R, экран которого сворачивается наподобие рулонной шторы.

Производители смартфонов долго ломали голову над тем, как радикально уменьшить радиус сгиба и в итоге справились. На свет появились смартфоны Samsung Galaxy Z Fold, Huawei Mate X2 и Motorola RAZR 5G. Помимо решения сложностей с механикой, потребовалось задуматься об отображении пользовательского интерфейса.

Разработчиков мобильных приложений это тоже коснулось. Теперь приложения должны смотреться красиво даже на складных устройствах. Сам по себе Flutter вполне справляется с подгонкой под разные форматы устройств, а в документации есть рекомендации по созданию адаптивных макетов. Но чтобы существенно улучшить визуальную часть, необходимо отдать роль «первой скрипки» дизайнерам. Им нужно сходу решить несколько важных вопросов.

Форм-факторы. Угодить всем невозможно и первое, что стоит сделать — определить какие форм-факторы поддерживаются. Это позволит сразу думать над тем, как оптимизировать контент под доступный размер дисплея.

Дополнительное пространство. Из него можно извлечь много полезных возможностей, создав альтернативный макет. Самым простым вариантом будет добавить дополнительные столбцы или строки. Или же вообще трансформировать одно в другое.

Подумать о центре. Закрепить какие-либо элементы в центре экрана — неплохая идея. Так на разных устройствах приложение будет выглядеть максимально похоже. Можно даже достичь эффекта увеличения поля зрения.

Flutter-разработчику стоит помнить о таких возможностях, как Hot Reload. Это отличная точка совместной работы, ведь у дизайнеров будет возможность в реальном времени вносить небольшие коррективы и сразу видеть результат.

Также хорошим способом облегчить жизнь станет использование динамического заполнения и управления размерами шрифтов. Например, виджет Flex может динамически отображать строку или столбец, а виджет MediaQuery вернёт данные о текущем размере экрана и ориентации устройства.

У фотографов и дизайнеров есть понятие «насмотренности». Это расширение визуального опыта и наполнение своего «внутреннего каталога» в мозге примерами. Точно так же могут делать и разработчики, просматривая уже созданные приложения. Советуем взглянуть на приложение Wonderous, созданное с помощью Flutter и прочитать их статью на Medium.

Оффлайн аналог Notion

Ежедневник, органайзер, персональная вики, записная книжка и список покупок — это лишь малая часть, для чего люди используют Notion. Секрет такой универсальности кроется в том, что Notion использует принцип конструктора. Простые блоки легко редактируются и вместе создают персональное пространство любой сложности. Разработчики включили в продукт множество интеграций со сторонними сервисами, а также удобные конвертеры отдельных страниц в PDF, HTML и Markdown.

Но не у всех людей есть возможность постоянно быть онлайн. Офицеры на коммерческих судах, например, не имеют постоянного доступа к сети. А вот возможности Notion многим их них бы пригодились. Заменой может стать приложение AppFlowy.

Скажем сразу, что возможности приложения пока что сильно ограничены, но оно уже сейчас пригодно для использования. Упор делается на том, что весь контроль над данными остаётся у пользователя, а не улетают на серверы какой-либо сторонней компании.

Стек AppFlowy — это отличный коктейль из Rust и Flutter. Приложение сконцентрировано вокруг редактора, именно он был самой сложной частью при разработке. В ранних версиях роль редактора выполнял компонент flutter_quill. От этой идеи быстро отказались, поскольку возникло множество проблем с расширяемостью и согласованностью кода.

В качестве замены рассматривали super_edit, но там были свои подводные камни. В частности, базовая структура данных представляла собой список и не поддерживала вложенности. Итогом поиска альтернатив стало написание собственного компонента AppFlowy Editor. Это дало возможность изначально спроектировать нужную структуру данных. Свой опыт разработчики описали в статье «How we built a highly customizable rich-text editor for Flutter».

Митапы