Cоздатьмобильноеприложениедляавторов
По итогам первой встречи задача была сформулирована так: создать мобильное приложение, в котором автор может работать с длинными текстами и добавлять к ним любое количество мультимедиа в любом порядке. Для этого нужно было:
- создать текстовый редактор для работ с большими объемами данных;
- добавить поддержку всех форматов мультимедиа;
- реализовать удобный механизм drag-and-drop для блоков контента;
- обеспечить корректную работу приложения на восьми языках.
Мы предложили кроссплатформенную разработку мобильного приложения на Flutter, чтобы сократить время выхода продукта на рынок и сэкономить бюджет.
РазработкамобильногоприложениянаFlutter
Аналитика
Команда начала проект с изучения готовых решений для текстовых редакторов. Мы посмотрели доступные библиотеки и фреймворки.
Результаты анализа:
- большинство редакторов используют WebView и JavaScript, а это снижает производительность и не подходит для больших текстов;
- другие библиотеки работают нестабильно и не дают нужной гибкости работы с медиа-контентом.
Когда увидели, что подходящих готовых вариантов нет, мы приняли решение создать собственный текстовый редактор с нуля.
Дизайн
На старте проекта заказчик хотел, чтобы приложение выглядело как мессенджер, где каждая публикация состоит из цепочки сообщений. Мы провели аналитику и стало ясно, что такой формат мешает восприятию истории, она как бы дробиться на части и ее неудобно читать. Мы предложили перейти к формату ленты — ближе к Reddit или Пикабу,что удобно и привычно пользователям.
Разработка
Для реализации проекта выбрали Flutter. Разработка текстового редактора с форматированием, стилями и вставкой медиа — это десятки тысяч человеко-часов, но Flutter позволяет сократить этот объем. У фреймворка есть мощные инструменты для рендеринга (отображения) текста, работы с клавиатурами Android и iOS и удобное управление полями ввода. А открытые решения — Flutter-редакторы Fleather и Quill — ускорили старт проекта. Но даже с такой технической базой задача остается непростой.
Текстовые редакторы — одна из самых трудных областей UI-разработки. Текстовый ввод включает много скрытых технических нюансов:
- Курсор и навигация — на уровне кода нужно учесть множество условий и исключений, чтобы курсор двигался плавно и предсказуемо при любых сценариях.
- Unicode и сложные символы. Современный текст уже не мыслим без эмодзи. Но один такой «символ» может состоять из 5–7 кодовых точек. Ошибка в их обработке легко приводит к повреждению текста.
- Многоязычный ввод. В разных языках (особенно в тех, в которых используются иероглифы) и системах (Android и iOS) клавиатура ведет себя по-разному, поэтому ее работа требует отдельной настройки.
- Различия платформ. Flutter — кроссплатформенный фреймворк и сглаживает различия между Android и iOS, но добиться полной идентичности поведения можно только через нативную доработку.
- Ожидания пользователей. Все привыкли к стабильности редакторов вроде Notes или Google Docs — и ждут такого же поведения от любого приложения. Повторить этот уровень комфорта — непросто.
Но это был лишь верхний уровень сложностей. "Под капотом" ждали не менее серьезные задачи — архитектура, хранение данных и производительность.
Во многих мобильных приложениях хватает простых структур данных — списков или пар «ключ–значение». Для Tvap story этого было мало. Редактору нужна была древовидная структура. Она позволяет быстро обрабатывать частичные изменения и работать с вложенными элементами.
Команда также изучила возможные узкие места Flutter. Часть ограничений удалось учесть заранее, а часть проявилась уже в процессе разработки. Далее расскажем, как мы решили эти проблемы.
Работа с вводом текста
Перед нами стояла еще одна задача: реализовать стабильную работу с вводом текста и редактированием блоков в приложении, что также было непросто.
Чтобы элементы можно было свободно перетаскивать между собой, каждый блок (текстовый и медиа-) в редакторе связан с моделью данных через GlobalKey. Еще один GlobalKey используется в SliverReorderableList. Такая связка позволяет перемещать элементы. Подход не идеален, но надежно решает задачу в рамках проекта.
Во Flutter ввод текста управляется структурой TextEditingValue (и на Android, и в Dart-части). Она содержит три параметра:
- text — сам текст,
- selection — позицию курсора или диапазон выделения,
- composing — это участок текста, который пользователь редактирует прямо сейчас. Например, когда набираешь слово «Привет ми», система выделяет «ми» как composing — она понимает, что слово еще не закончено, и предлагает автозамену или варианты продолжения.
При этом сам Flutter не умеет работать с composing. Подсказки слов, автозамена и предиктивный ввод — это зона ответственности самой платформы, Android или iOS. Поэтому, чтобы добиться поведения как в системных редакторах, требуется участие разработчиков на уровне нативного кода.
Кстати, есть один интересный (и не самый очевидный) момент. На многих Android-устройствах нельзя передать между клавиатурой и приложением больше 512 килобайт текста. Это ограничение системного интерфейса Binder IPC. Поэтому реализовать идеально стабильную работу с очень большими текстами невозможно. Когда TextEditingValue превышает лимит, система перестает корректно передавать данные. При проектировании редактора важно учитывать этот порог и не допускать перегрузки.
Обработка медиа
По задумке заказчика, в Tvap story можно добавлять видео, фото и аудио любого объема. Однако существующие форматы изображений и видео, как и кодеки, сильно различаются. Чтобы избежать ошибок и потери качества, все медиа в приложении приводятся к единому стандарту (в тех случаях, когда это не нарушает требования UX и авторского права).
Для создания предпросмотра видео в проект интегрирована библиотека FFmpeg (через пакет ffmpeg_kit_flutter_full). Мы доработали механизм обработки — добавили ограничение по длительности и предварительную проверку разрешения и битрейта, чтобы сократить время рендеринга и избежать перегрузки системы.
Мы разработали мобильное приложение с хранением данных в Selectel S3. Каждая история может включать десятки медиафайлов, поэтому реализовали умную подгрузку: контент загружается только в момент просмотра. Телефон не перегружается, память не забивается — все остается на сервере.
Тестирование
Особое внимание мы уделили работе редактора под высокой нагрузкой. Протестировали экстремальные сценарии. Редактор справляется с объемами текста до 180 МБ. Это огромный размер, но система выдерживает такую нагрузку.
Передача таких данных занимает до 10 секунд при хорошем соединении. Частота кадров падает, но остается на приемлемом уровне. Если кто-то захочет написать роман на 180 МБ приложение TVAP story станет подходящей площадкой для такой задачи.
Похожиепроекты
Результатразработкимобильногоприложениядляписателей
Итог проекта — мы разработали кроссплатформенное мобильное приложение на Flutter для творческих людей. Платформа позволяет объединить текст и мультимедиа в одной публикации и дает авторам больше свободы самовыражения.
Ключевые показатели, которых мы достигли на проекте:
- создали кастомный высокопроизводительный текстовый редактор;
- добились стабильной скорости отрисовки кадров 60 fps даже при больших объемах данных.
- обеспечили время обработки крупных файлов от 3 МБ за 3-5 мс, а для небольших документов — около 1 мс.
- создали гибкую структуру публикаций: текст и мультимедиа размещаются блоками, которые можно располагать в любом порядке.
- внедрили механизм drag-and-drop контентных блоков, аналогичный монтажу на таймлайне.
- реализовали умную подгрузку медиа через Selectel S3;
- добавили поддержку восьми языков, включая китайский и японский;
- протестировали редактор на экстремальных объемах данных — до 180 МБ текста.
Приложение вышло в App Store 12 февраля 2025 года. Сейчас продукт находится на стадии анализа и обратной связи. Команда собирает пользовательские данные и формирует пул задач для следующего этапа развития.
В ближайших планах:
- добавить комментарии, лайки;
- создать веб-версию для авторов, которым удобнее писать с клавиатуры;
- внедрить монетизацию;
- интегрировать нейросеть, которая поможет при написании историй, сможет генерировать фото и видео, займется модерацией контента.
Производительность:какмыдержали60fps
Главной целью проекта было получить такой уровень плавности интерфейса, при которой он реагирует быстро, а анимации выглядят ровно и без рывков. То есть нам нужно было добиться стабильных 60 кадров в секунду даже при работе с текстами до 3 МБ (для примера, “Война и мир” Л.Толстого 3~4 мб). Предварительные расчеты были такие: при 60 fps на каждый кадр отводится всего 16 мс. Но это — в «вакууме». В реальности все это время займут алгоритмы, парсеры и логика редактора, и Flutter просто не успеет отрендерить кадр. И тогда плавной работы не получится.
Мы задали для себя ориентиры по скорости обработки. Эти значения стали базовыми маркерами для контроля нагрузки и стабильности работы:
- для текстов до 100 КБ — не больше 1 мс на все операции,
- для крупных файлов от 3 МБ и выше — до 3–5 мс.
Главное было понять, сколько ресурсов тратит сам редактор, без учета нагрузки системы вокруг него. Делали замеры с помощью Stopwatch, чтобы понять, время каждой операции внутри редактора. В среднем — менее 100 мкс: даже не миллисекунда, а всего десятая ее часть!
В эти несколько миллисекунд работы редактора входят:
- отрисовка внутренней модели («дерева», где хранится история текста),
- обработка событий от пользователя,
- применение изменений к модели.
Технологии
Кейсы,которымимыгордимся
