Пять шагов, которые вам нужно выполнить - это не ракетостроение, но это может сломать ваш продукт.

Я потерпел неудачу в большем количестве предприятий, которые могу сосчитать, но это был мой последний. Как говорит Уоррен Баффет, нужно оказаться правым только один раз. В процессе я научился быстро отправлять и разлюбил свои идеи и инструменты. Вот краткий список инструментов, которые вы можете использовать для быстрой и эффективной доставки вашей панели управления SaaS.

Ситуация

Вы или ваша основная команда придумали новый алгоритм, скопировали и пометили некоторые данные и т. Д. Вы думаете, что другие будут платить за доступ к этому. Если не сосредоточиться на скорейшем подтверждении этой гипотезы, ваша игра погибнет. Изобретения колеса - одна из главных причин неудачных продуктов и разбитых мечтаний.

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

Вы просто парень, у которого есть мечта. Научитесь принимать это, отпустите потребность в контроле и сильно делегируйте полномочия. Когда вы пытаетесь следовать обычаю в областях, которые не являются частью вашего основного бизнеса, маленький Парето (принцип - идея, что 80% ваших побед - это 20% ваших усилий) начинает плакать.

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

Давайте посмотрим на пару вещей, которые вам нужно будет реализовать, чтобы извлечь пользу из вашего основного продукта. Сюда входит реализация пользовательского интерфейса, управление пользователями, обработка данных и доступ к ним и, наконец, объединение всего (архитектура). Конечно, каждое современное приложение должно иметь возможность быстро доставлять изменения, поэтому мы рассмотрим, как реализовать конвейер CI / CD. Я преодолел все эти препятствия менее чем за неделю, но мне потребовалось немало времени, чтобы наладить этот процесс. Наслаждаться!

Адаптивный UI / UX

Проблема

Какое отношение имеет игра с бутстрапом к данным, которые вы продаете своим клиентам? Совершенно верно, но вот ваши инженеры потратили бесчисленное количество часов, чтобы добиться этого.

Typeform не может обслуживать даже мобильных пользователей - это 58% пользователей, просматривающих Интернет, банкомат (источник). Они существуют с 2012 года.

Решение

Как было сказано выше, перестаньте изобретать колесо. Выбирайте что-то, что работает прилично, из коробки. Есть масса бесплатных решений. Я использовал Adminator в своих проектах, но Google может просветить вас дальше.

В нем есть все, о чем вы могли мечтать, чтобы смоделировать и создать отзывчивую панель администратора, подобную той, которая нужна вашему SaaS.

При издевании над интерфейсом вы можете отправить его на удаленный сервер, чтобы члены команды обсудили это. Adminator использует webpack - вы можете экспортировать сборку своего смоделированного интерфейса и использовать экспресс-сервер плюс развертывание heroku, чтобы предоставить сборку миру! Теперь у вас есть конвейер CI / CD для вашего макета!

Управление пользователями

Проблема

Какое отношение к сути вашего стартапа имеет танец вокруг учетных записей пользователей?!? Вот крупный провал: index.co, сделанный The Next Web. Пароль для сброса не работает, как и интеграция OAuth. Можно было бы ожидать большего от продукта, который стоит 25 долларов в месяц.

Первый веб-сайт с функцией учетной записи, вероятно, появился 20 лет назад. Это не должно быть так сложно, правда? Спросите у Auth0, который только что получил статус единорога, решение этой проблемы. И все равно "из коробки" не работает.

Решение

Я обнаружил, что Firebase может мне очень помочь. Он обрабатывает все, что вы от него ожидаете. Зарегистрируйтесь и войдите с помощью ряда методов (классический адрес электронной почты / пароль, учетная запись Google / Fb и т. Д.). Функция проверки адреса электронной почты. Проверка номера телефона. Забыл пароль.

Он даже поставляется с внутренним решением для управления пользователями, так что вы можете отключать или удалять учетные записи. Это также может быть полезно, если вы хотите утвердить пользователей вручную - просто сохраните переменную в учетной записи пользователя и по умолчанию установите значение «notApproved».

Другой вариант использования, с которым я столкнулся, - это сбор некоторых данных от пользователя перед регистрацией. Я решил эту проблему, связавшись с опросом Typeform и используя веб-перехватчик, когда форма будет заполнена.

Хранение, получение и контроль доступа данных

Проблема

Спросите себя: «Будет ли масштабироваться мое решение для хранения данных?» когда у вас едва есть первые 20 клиентов - слова, которые не следует произносить. Что убьет ваш стартап SaaS, так это высокая стоимость привлечения клиентов и низкая жизненная ценность или высокий уровень оттока клиентов. Я говорю ИЛИ, потому что одного достаточно.

Забудьте об идеологии, давайте на минутку поговорим о практике. Чтобы представить это в перспективе - каковы самые большие развертывания nosql, о которых вы знаете? У Fifa работает около 250 серверов для хранения данных в кластерах MongoDB (источник). Это ТОЛЬКО 250 серверов. Кластеры примерно в 100 экземпляров являются нормальным явлением для крупных развертываний (источник).

Я признаю, что вопросы, которые вы задаете, связаны с уникальной технологией хранения. Когда ваш бизнес набирает обороты, вы можете перейти от экземпляров 125 дБ к 48 и, наконец, только к 3 - поиграясь и выбрав правильную технологию (см. Источник сценария использования Adobe Behance). Это важно, потому что при больших масштабах счета быстро накапливаются. Но тебя там нет, так что тебе не о чем беспокоиться.

Вам нужен быстрый способ подключения данных к пользовательскому интерфейсу и управления доступом к нему.

Решение

Опять же, я думаю, что Firebase чрезвычайно полезен. Вы не можете управлять экземплярами базы данных, они уже есть. Кроме того, вам не нужно беспокоиться о подключении к указанным данным из внешнего интерфейса, а безопасность хорошо позаботится о вас. Как и MongoDB, он основан на документах. Вы сможете управлять данными из javascript, используя библиотеку firebase, всего за пару строк.

Доступны правила доступа к данным. Важные моменты перегиба: аутентифицированные и не аутентифицированные пользователи и прочитанные против записи. Вы также можете сгруппировать пользователей и отозвать доступ к определенному документу в своей базе данных. Или вы можете явно разрешить только одному пользователю доступ к определенному документу. Можно написать правила для автоматической настройки (так что вам не придется вручную связывать пользователей с документами).

Задание хронирования можно использовать для отправки свежих данных в Firebase. Каждый раз, когда пользователь выполняет вызов для получения данных, вы можете посчитать это и произвести соответствующую оплату.

Подводя итог, вы хотите:

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

Все это можно сделать за пару дней, если вы знаете, что делаете.

Архитектура

Итак, теперь у вас есть пара разбросанных файлов html, css и js. У вас есть веб-приложение без данных в реальном времени - это план вашей панели управления. Есть управление пользователями. У вас также есть конвейер для передачи данных, которые ваши пользователи захотят использовать. Вы правильно управляете данными. Как все собрать?

Я советую вам выбрать архитектуру React с первыми функциями с Redux для хранилища данных в памяти. Вот как это будет выглядеть.

React разделяет каждый визуальный элемент на отдельный класс / файл. Вы этого хотите, потому что хотите придерживаться принципа СУХОЙ. В админаторе меню и верхняя панель будут общими для всех элементов вашей страницы. Вы захотите использовать их, не вставляя каждый раз код.

Вам нужно управлять состоянием. Мне нравится redux - изменения состояния выполняются только с помощью чистых функций, поэтому все хорошо и предсказуемо. Между вашим магазином и вашими компонентами React существует двусторонняя привязка.

Все может идти в двух направлениях: либо ваш пользовательский интерфейс отправляет команду, которая изменяет ваше хранилище данных и данные Firebase, либо ваши данные Firebase изменяются, и ваш магазин обновляется, что требует обновления пользовательского интерфейса.

Просто и чисто, правда?

А как насчет архитектуры, ориентированной на особенности? Вот довольно наглядная картина:

Допустим, вы хотите отобразить диаграмму в своем приложении React - диаграмма имеет визуальный компонент и компонент данных. В архитектуре, ориентированной на функции, единственные файлы, к которым вам нужно будет прикоснуться, будут находиться в папке Components / CustomChart. Это делает разработку простой и масштабируемой (вы можете попросить любое количество инженеров внести изменения в ваш пользовательский интерфейс). У этого есть множество других преимуществ, и я советую вам начать немного читать по этой теме.

Инфраструктура (CI / CD, быстрое развертывание)

Теперь, когда вы собрали все вместе, пора развернуть решение. Вам понадобится промежуточная среда - место для ручного тестирования, прежде чем оно выйдет в реальный мир. И вам нужна производственная среда, в которую вы перейдете после того, как попробуете протестировать свои изменения. Вы можете добиться этого, создав два отдельных проекта Firebase и переключившись для каждого из них, переключив учетные данные на основе переменной.

Кроме того, было бы неплохо иметь способ автоматического внесения изменений. Вы можете создать сценарий в своем npm, который создает решение, переходит в папку сборки и выполняет развертывание firebase.

Выводы

Несмотря на очень высокий уровень, мы преодолели все препятствия, необходимые для запуска вашего потрясающего SaaS в мир. Я призываю вас сделать это в ближайшие 2 недели (это возможно).

Как всегда, скорость является ключевым моментом - вам нужно тестировать, улучшать и управлять воронкой, чтобы подтвердить свою гипотезу. Неужели вы создаете убийственный продукт? Достаточно ли низка стоимость привлечения клиентов, а ценность, которую вы создаете для своих пользователей, достаточно высока, чтобы иметь жизнеспособный бизнес?

Чем раньше ты узнаешь, тем лучше. Если вы только что закончили создавать свой основной продукт и хотите быстро и эффективно использовать его, вот моя панель инструментов для продукта SaaS.