Инструкция: Как сделать из идеи MVP продукта
Привет, в статье попробуем разобраться как можно (и нужно!) воплощать свои задумки и идеи, косвенно коснёмся темы "лоу-кода" в практическом разрезе, пройдём по примеру создания процесса по учёту расходов и рассмотрим несколько групп популярных инструментов.
Intro
Как-то я прочитал, что наш мозг создан генерировать идеи, но при этом он их плохо хранит. Что хуже (рассуждаю я дальше), воплощают свои идеи ещё меньшее количество людей. Причём на мой взгляд барьер становится всё больше психологический, чем технический.
К примеру, захотели вы на свой день рождения разослать своим друзьям приглашение в виде сайта-открытки: когда и куда приходить, карта, время, wish-лист и т.д. Лет 15 назад не программисту и в голову не пришло воплощать такую задумку. А сейчас, открыли Тильду, выбрали шаблоны, написали свой текст, сверили черновик, отправили ссылку и готово (бесплатно!).
Вместо Тильды можно использовать любой другой инструмент (о них ниже).
Такие инструменты, которые упрощают разработку за счёт полного/частичного использования визуальных (и не только) элементов (конструкторов) вместо программирования называют low-code, no-code, zero-code. Зачастую все эти определения используют в перемешку, но по задумке:
- low-code сочетает в себе both world - то есть и визуальные элементы, так и возможность написать код;
- no-code/zero-code - не предполагают (по крайней мере в явном виде) использования кода со стороны пользователя вообще.
Для удобства в статье я буду упоминать только low-code. Прелесть в том, что нам пользователям не надо погружаться во все эти парадигмы, рассуждать о глобальной революции в индустрии и воспринимать волны развития технологий.
Технической порог входа для создания своего приложения (прототипа) снижается.
Конечно, придумать, спроектировать, подобрать сервисы и построить приложение - всё ещё целый процесс, требующий усилий.
В чём основные плюсы такого подхода и зачем нужно MVP приложений?:
- Собираем минимально жизнеспособные продукты быстро и дешево (иногда бесплатно), а не «пилим продукт» полгода
- Не изобретаем велосипеды, а переиспользуем готовые шаблоны и наработки
- Оцениваем востребованность будущего продукта
- Тестируем гипотезы, собираем и анализируем метрики
Создаём свой аналог приложения по учёту финансов
Предположим популярные приложения нам не подходят, мы хотим подстроить что-то под себя или мы не хотим платить. Давайте будем отправлять сообщение нашему боту в телеграмм, а он будет складывать их в табличку, где мы сможем как-то дальше с ними работать. Телеграмм удобен, всегда под рукой (телефон/desktop), постоянно пользуемся.
Для реализации нам потребуется:
- Создать бота в телеграмме, через официального телеграмм-бота
- Зарегистрироваться в Integromat
- Создать заготовку таблицы с расходами в Google Sheets
И так, создаём новый сценарий в Integromat:
Выбираем наши сервисы из поиска:
Webhook нужен для обработки сообщений из телеграмма. Он же будет лежать в начале нашего сценария. Вытаскиваем иконки из интерфейса:
Открываем вебхук, записываем своё название и копируем адрес:
Дальше самая сложная часть нашей low-code задумки - надо настроить телеграмм бота, используя официальную документацию. Мы хотим, чтобы все сообщения которые получает наш бот, отправлялись на скопированный адрес, для этого используем метод setWebhook. Сделаем это через JS-консоль в браузере.
Открываем в страницу:
Вместо (токен вашего бота) вам надо тут и ниже подставить токен своего бота. Тыкаем правой кнопкой мыши по странице и нажимаем Inspect. Открывается окно справо, выбираем Console и вводим:
Теперь если мы всё правильно настроили, после отправки сообщения в бот, в integromat в нашем модуле веб-хука отобразиться сообщение Successfuly determined.
Из сообщения, которое получил бот забираем цифры и отправляем строкой в таблицу. В Add row, авторизуемся и выбираем таблицу и страницу. Указываем в какую ячейку, что отправляется:
- Первый столбец — дата, его необходимо преобразовать от формата timestamp к формату DD.MM.YYYY
- Второй столбец — сумма
Попробуем отправить сообщение в наш бот, и посмотреть что запишется в табличку:
Дальше можно усложнить сценарии, писать боту не только сумму, но и категорию трат (например кофе), и сделать так чтобы бот возвращал ещё какой-нибудь наш баланс. "Вот вам молоток, вот вам гвозди. Смотрите мы с вами забили гвоздь в стену. Теперь давайте сами, постройте ракету."
У меня получилась такая схема:
Попробуйте проделать эти шаги самостоятельно, вам потребуется:
- Добавить новое поле c суммой всех трат на Google Sheets и новый столбец с категорией затрат (Например столбец Описание)
- В Настройках кружочка Reply Telegram добавить бота (bot-token) и текст с ответом (например "Суммарные траты Ячейка X из Google Sheets")
- В настройках кружочка Google Sheets добавить разбивку сообщения на сумму (цифру) и описание (текст) - например разбить сообщение по пробелам. Потребуется команды get (), split (), message:text, slice(), space
Инструменты
В нашем примере мы использовали лишь пару инструментов, чтобы у вас появилось представление о том, сколько их и в каких областях, вот картинка с просторов интернета:
Как и в примере с приглашением, идеально подойдут для стандартной страницы с описанием, ценами и формой для запроса. Конечно можно просто сделать бизнес-аккаунт в instagram и whatsapp.
Списки рассылки, формы отписки, обработка адресов и статистика кликов.
Airtable - хранить и обрабатывать данные.
Airtable похож на продвинутый Эксель. Интеграции с популярными сервисами присутствуют. Если вы совсем не хотите писать код - тут можно. Буквально на днях Airtable получил $185M. Так что присмотритесь, сервис будет взлетать и дальше.
Integromat, Zapier, Automate.io, Parabola, IFTTT, Clay n8n.io - собрать всё в единый сценарий работы.
Интергромат мы использовали в нашем примере, на мой взгляд очень крутой инструмент. Если готовы потратить пару вечеров, то сможете дойти до уровня автоматической генерации pdf документов, автореплаев на e-mail.
Если использовать Airtable в Integromat, то можно собрать процесс по учёту расходов сканируя чеки:
- Фотографируем документы приложением сканером (например Scanner Pro).
- Сохраняем документ в облачный диск (Google, Dropbox, Яндекс - что вам по душе, и то с чем работает Integromat :D) в папку с категорией расхода
- Дальше в Integromat выстраиваем процесс: парсим данные, тип расхода, название, сумму и складываем в табличку AirTable (можно начать c Google Sheet).
Другие приложения работают по походим принципам, и также предлагают готовые шаблоны:
Gumroad - цифровые продажи.
Невероятно удобен для продажи книг, изображений, музыки, документов. Можно делать промокоды, акции, продавать наборами и связываться с покупателями, если они того захотят.
Cloudflare - инфраструктура.
Поможет обеспечить/заменить:
- Google Analytics — сервис предоставит количество посетителей и географию, если не хотите чтобы гугл следил за вашими пользователями.
- Защиту от ботов — капчи и и дургие приблуды
- Let's Encrypt — SSL-сертификаты покрываются самим сервисом.
Coda выделяется работой с данными, actions, таблицами, связями между этим все. Можно забить значения в одном документе, а указанный человек получит e-mail уведомление, и данные скопируются в таблицу. Стоит отметить, что Coda достаточно сложный для старта инструмент.
Figma - Дизайн и создание кликабельных прототипов
Надеюсь вы уже знакомы с фигмой, для меня самого 1,5 года назад это было открытие. Помню, как мы участовали в мероприятии по типу хакатона. Атмосфера гонки, ажиотажа, вот это всё. Дизайнер присылает мне ссылку в фигме с макетами приложения на iOS, и говорит мне адаптировать текст, подогнать картинки, поправить хронологию, выгрузить и прокрутить на экране. И всё это буквально за пару минут. Сейчас у меня в фигме 1000 и 1 черновик для всяких мелких и средних задач.
Заключение
Надеюсь, статья вдохновит вас реализовывать свои идеи, а не откладывать их в никуда. Пару ссылок, где можно ещё посмотреть кейсы применения:
PS в статье умышленно не рассмотрены enterprise решения по low-code, но это не значит, что их нет, просто это немного другой мир. Если интересно, можно например посмотреть и потыкать в платформу Mendix.