Я занимаюсь разработкой браузерных расширений для различных сфер бизнеса уже около 5 лет. Недавно я решил написать свое расширение и вывести его в свет. Таким образом получился Aperture. О процессе разработки и раскрутке и пойдет речь.
Ключевые клиенты компании в которой я работаю это кэшбек-сервисы. Кэшбековые расширения позволяют пользователям следить за состоянием сэкономленных денег не заходя не сайт и активировать кэшбек прямо из интернет-магазина. Это основной функционал, который сильно облегчает жизнь пользователя. Из примеров - Rakuten. Разработка расширений мне очень интересна, но заниматься одним направлением не хотелось и я решил разработать свое приложение.
Идея
Aperture - это простое расширение которое позволяет записывать видео с экрана компьютера и редактировать его. Идея создания такого функционала вылилась из моего образования инженера-радиоэлектронщика. В университете у моих “коллег” по направлению преподавали “обработку видео сигналов“ - математическое представление различных фильтров (ч/б, сепия, блюр и т. п.) и применение их к изображениям. Я заинтересовался этим и начал изучать как подобное можно применить в вебе.
Если не вдаваться особо в технологические подробности фронтенд-разработки, то можно взять объект Canvas и обрабатывать каждый пиксель картинки с помощью алгоритма вышеописанных фильтров. Дальше я познакомился с технологией WebRTC и возможностями браузерных расширений записывать видео с экрана и вебкамеры. Так появился MVP моего расширения. Оно записывало видео с экрана и сохраняло его на компьютер пользователя.
Дальше - больше. Я решил изучить уже имеющиеся приложениями на “рынке”, их возможности, достоинства и недостатки. Самое популярное расширение подобного рода сейчас это Screencastify. Из крутых фишек - запись видео с экрана вместе с вебкой (картинка в картинке), редактирование: кроп и обрезка видео, возможность заливать видео в Google Drive и в YouTube. Из минусов - ограничение по длительности записи видео, ватермарки и отсутствие редактора в бесплатной версии. Также люди жаловались, что в случае если записываешь видео большой длительности и потом обрабатываешь в редакторе, то рендерится оно очень долго.
Функционал приложения
Исходя из изученного я добавил в свое приложение простейший редактор. Его особенность в том, что он не обрабатывает видео, а собирает куски отснятого видео и сразу же их сохраняет. Проблема в том, что таким образом можно обрезать видео только с конца, ибо начальные файлы не содержат необходимых метаданных. Это некий баг Хрома, который, я надеюсь, когда-нибудь поправят и тогда можно будет сделать супер оптимизированную обрезку видео.
Немного о том как это работает. Для записи видео в файл существует класс MediaRecorder, он может записывает видео кусками (chunks) которые представляют из себя Blob-файлы с медиа-данными, таким образом я записываю массив из чанков по 1 секунде, а когда пользователь хочет обрезать видео просто удаляю ненужные! Таким образом никакой рендеринг не требуется и редактирование работает налету.
Немного отойдя от темы скажу каким я вижу хорошее приложение с точки зрения пользователя. В первую очередь это дизайн - лаконичный и понятный. Интерфейс: любая цель пользователя должна выполняться за пару кликов. Поэтому в моем приложение чтобы начать запись нужно кликнуть один раз на иконку, разрешить запись - и магия началась. После записи пользователя автоматически кидает на страницу с редактором, где он в пару кликов может отредактировать видео и сохранить его к себе на компьютер или залить в облако и поделиться с друзьями. Видео сохраненные в облаке также отображаются в Галерее откуда можно их потом скачать или удалить.
Бесплатная раскрутка и монетизация
Когда MVP достиг адекватного вида, я залил его в WebStore и начал искать пути раскрутки. Если для мобильных приложений существует множество площадок, где можно о нем “рассказать”, то с расширениями все сложнее. Я задействовал ProductHunt и не ошибся. За первый день я набрал 90 “лайков”, оно попало в тренды и судя по всему понравилось пользователям. Мне как разработчику было очень приятно! Если в первые дни установки расширения были около 20-30, то после PH они выросли до 100. А потом “счетчик” сошел с ума и за пару-тройку дней расширение набрало около 3 тыс. пользователей. Как оказалось какой-то добрый японец написал обзор на мое расширение на сайте Gigazine. Это достаточно известный новостной сайт в Японии, но я само собой услышал про него впервые.
Кстати касательно названия приложения и цветовой схемы. Мне очень нравится игра Portal. Поэтому название вышло из Aperture Laboratories, а основные цвета - голубой и желтый - это цвета порталов Portal Gun’а.
После того как количество пользователей перевалило за 5 тыс. друзьями мне начали говорить про монетизацию. В WebStore есть несколько вариантов платного распространения расширений: разовая покупка, платежи в приложении и подписка на месяц или год.
Для начала я посмотрел какими инструментами пользуются местные “гиганты” - в основном это были in-app payments. Я думаю это привлекательно для пользователя, потому что он может познакомиться с приложением и в случае если ему нужен дополнительный функционал - приобрести его. Но это относительно затратно с точки зрения внедрения в приложение да и многие разработчики уж слишком режут функционал, чтобы выбить эти самые покупки.
Разовые платежи я не стал рассматривать потому что планировал развивать приложение, да и в будущем нужно будет платить за облако каждый месяц. Я решил что маленькому приложению - маленькая подписка. Никто не будет покупать годовую подписку на расширение, если это не какой-то уже супер известный мастодонт рынка. Я выбрал месячную подписку - ценник минимальный (около $0.99), примерно в сумме в 2-3 раза меньше чем у приложений с аналогичным функционалом. Я думал что включение монетизации полностью отпугнет пользователей, но нет, установки упали раз в 10-20, но народ скачивает приложение. Сейчас в день выходит от 1 до 5.
Дальше - больше
Какие выводы я сделал из этой истории:
- Нужно определиться с направлением, которое будет вам интересно, чтобы не сгореть на полпути и не забить на разработку
- Изучите существующие решения и реализуйте в своем приложении все что вам понравилось как пользователю
- Создайте MVP и получите фидбек от пользователей - это позволит вам гибко “доработать” свое приложение
- Начните с бесплатных площадок для раскрутки
- Дизайн и UX важная часть вашего приложения, разработчики часто про это забывают :)
- Развивайте приложение, добавляйте новый функционал
В дальнейшем я планирую плотнее заняться раскруткой приложения и расширить функционал. Недавно я добавил возможность делать скриншоты видимой части страницы, хочу превратить это в возможность захвата всей страницы в виде изображения.
Также сейчас я занимаюсь новым приложением, по сути это такой скрапер данных с соцсетей. Вы можете сохранять изображения и видео из Instagram и TikTok (да-да хайп) в приложение и скачивать их себе.
Спасибо за внимание к моей статье! Если вам интересна разработка расширений - обращайтесь, любая идея реализуема! :)