Инструкция: Как сделать из идеи MVP продукта

Привет, в статье попробуем разобраться как можно (и нужно!) воплощать свои задумки и идеи, косвенно коснёмся темы "лоу-кода" в практическом разрезе, пройдём по примеру создания процесса по учёту расходов и рассмотрим несколько групп популярных инструментов.

Как-то я прочитал, что наш мозг создан генерировать идеи, но при этом он их плохо хранит. Что хуже (рассуждаю я дальше), воплощают свои идеи ещё меньшее количество людей. Причём на мой взгляд барьер становится всё больше психологический, чем технический.

К примеру, захотели вы на свой день рождения разослать своим друзьям приглашение в виде сайта-открытки: когда и куда приходить, карта, время, 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
  

В нашем примере мы использовали лишь пару инструментов, чтобы у вас появилось представление о том, сколько их и в каких областях, вот картинка с просторов интернета:

Tilda, carrd.co, Webflow, Landen, MailChimp, и куча других - создать лендинг, личный кабинет и простой CRM.

Как и в примере с приглашением, идеально подойдут для стандартной страницы с описанием, ценами и формой для запроса. Конечно можно просто сделать бизнес-аккаунт в instagram и whatsapp.

Mailgun, Mailchimp, Litmus - Email-рассылки и обработка писем.

Списки рассылки, формы отписки, обработка адресов и статистика кликов.

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-сертификаты покрываются самим сервисом.
  

Code, Fibery. - сделать умные документы.

Coda выделяется работой с данными, actions, таблицами, связями между этим все. Можно забить значения в одном документе, а указанный человек получит e-mail уведомление, и данные скопируются в таблицу. Стоит отметить, что Coda достаточно сложный для старта инструмент.

Figma - Дизайн и создание кликабельных прототипов

Надеюсь вы уже знакомы с фигмой, для меня самого 1,5 года назад это было открытие. Помню, как мы участовали в мероприятии по типу хакатона. Атмосфера гонки, ажиотажа, вот это всё. Дизайнер присылает мне ссылку в фигме с макетами приложения на iOS, и говорит мне адаптировать текст, подогнать картинки, поправить хронологию, выгрузить и прокрутить на экране. И всё это буквально за пару минут. Сейчас у меня в фигме 1000 и 1 черновик для всяких мелких и средних задач.

Надеюсь, статья вдохновит вас реализовывать свои идеи, а не откладывать их в никуда. Пару ссылок, где можно ещё посмотреть кейсы применения:

NoCodeList, nocode.tech

PS в статье умышленно не рассмотрены enterprise решения по low-code, но это не значит, что их нет, просто это немного другой мир. Если интересно, можно например посмотреть и потыкать в платформу Mendix.

#selectel_инструкция