Привет, с вами Данил Губанов — backend-разработчик в Точке. Сегодня я расскажу о сервисах, которые позволяют разработать целое приложение, при этом не требуя кода. В этой статье я буду говорить о Glide и Lucidchart, а во второй части материала расскажу про Google Sheets и Notion. Почему я буду рассказывать о них? Потому что они простые и доступные. С их помощью я за несколько часов смог создать телеграм-бота и небольшое приложение с админкой без единой строчки кода.

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

Поехали.

1. Lucidchart

Lucidchart — это приложение для построения диаграмм, которое позволяет пользователям совместно их рисовать, редактировать и обмениваться ими. Внешне этот сервис очень похож на Miro. Но в Lucidchart мы можем не просто создать и заполнить карточки текстом, но и связать их между собой, чтобы получилась цепочка, в которой один блок логически вытекает из другого.

В качестве примера работы с этим сервисом расскажу, как мы с командой энтузиастов работали над креативным проектом «На старинном заводе» в городе Сысерти Свердловской области. Нашей задачей было сделать развлекательный бот. Смысл его в следующем: люди в Telegram отвечают на вопросы, связанные с историей завода. В результате бот выдавал название профессии из 18 века, которая могла бы быть у человека, прошедшего тест. Например — писарь, накладчик или плавильщик.

Сервис позволяет связывать блоки между собой
Сервис позволяет связывать блоки между собой

Почему мы выбрали именно Lucidchart для этого?

Во-первых, формат этого сервиса идеально подходит под интерфейс чат-ботов.

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

Ещё один важный момент — здесь можно одновременно работать целой командой. В Lucidchart есть кнопка Share, которая позволяет добавить к проекту участников, которые также могут вписывать текст в блоки и соединять их между собой, выстраивая нужную логику.

В Lucidchart можно выстраивать огромные блок-схемы
В Lucidchart можно выстраивать огромные блок-схемы

Конечно, текст для каждого блока можно писать в самом Lucidchart. Но мы пошли немного другим путём и сначала написали весь текст в Word, а затем уже перенесли его в блоки.

Текст для блоков лучше заранее написать в Word: 
так процесс создания чат-бота не будет тормозиться
Текст для блоков лучше заранее написать в Word: так процесс создания чат-бота не будет тормозиться

Личный лайфхак: чтобы было проще составить бота, рекомендую сначала записать результаты, которые он будет выдавать пользователям. И уже к ним «подтягивать» вопросы, которые логически приведут к финальному ответу. Каждый блок можно назначить на различное действие. Например, отправка картинки — это отдельное действие, и блок отправки можно использовать как отдельный.

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

Так выглядит блок-схема с текстом для бота
Так выглядит блок-схема с текстом для бота

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

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

При использовании этого инструмента и кода обработки, полученный «лист» можно загрузить куда угодно и написать логику, какую захочешь. Lucidechart останется тогда как визуализация данных, а вся обработка останется на вашей стороне (это позволяет функция экспорта в GoogleSheets, например, или даже просто выгрузка в CSV: как в нашем случае).

А из минусов: Lucidchart даёт только 7 дней бесплатного тестового периода. Далее сервис становится платным.

2. Glide

В отличии от Lucidchart в Glide можно создать целое приложение без кода, доступное и как сайт для desktop, и как PWA для телефонов. Да, это будет не супер-сложное приложение, но для многих целей вполне подойдёт. Тем более, работа с Glide настолько проста, что создать сервис с нуля можно буквально за десять минут.

Для начала поясню на конкретном примере, для каких целей можно использовать Glide. В университете мне нужно было сделать приложение, которое автоматизировало бы работу администраторов и наставников одного проекта. Для того, чтобы собрать отчёты о мероприятиях и фидбэк, нужна была отдельная площадка. Конечно, для таких целей нет смысла писать сложный код, чтобы разработать целое приложение.

Проект «Наставники», который разработали с помощью Glide
Проект «Наставники», который разработали с помощью Glide

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

Сервис позволяет подгружать статьи из Дзена
Сервис позволяет подгружать статьи из Дзена

Покажу работу сервиса на примере простенькой задачки. Нам нужно отображать новости из гугл-таблиц.

  1. Для начала зайдем в Google Sheet и заполним все строчки данными. Это поможет сделать красивый интерфейс.

    Пример оформления листа в сервисе Google Sheets
    Пример оформления листа в сервисе Google Sheets
  2. Уже на следующем этапе переходим в Glideapps.com и выбираем опцию «создать новый проект».

  3. Далее выбираем интеграцию с Google Sheet. Так данные из одной площадки будут автоматически перетекать на другую.

    Glide интегрируется с разными инструментами
    Glide интегрируется с разными инструментами
  4. Выбираем файл для загрузки, с которым мы будем работать и ждем, когда на экране появится панель инструментов. Кстати, можно выбрать разное оформление под проект.

  5. При переходе в карточку самой новости, наживаем на кнопку, которая перекинет нас в блок Title, где мы сможем добавить блок с описанием.

  6. Приложение готово.

Что касается оформления приложения, то Glide позволяет нам кастомизировать его, как нам захочется. Здесь мы можем изменить цветовую гамму, тему и шрифты. Из важного — мы можем сделать так, чтобы это приложение было доступно только ограниченному кругу лиц, а его пользователями они становились при переходе по ссылке-приглашению.

Можно выбрать любое оформление для вашего приложения
Можно выбрать любое оформление для вашего приложения

Публикация приложения

Здесь все предельно просто: чтобы опубликовать приложение нужно просто нажать кнопку Share → паблик. Эту ссылку мы можешь разослать всем друзьям, знакомым. За считанные минуты мы сделали приложение, которое отображает данные из Google Sheet. У Glide на английском очень продумано сделаны обучающие видео, которые помогают научиться работе с системой с нуля.

Подводя итог по Glide, могу сказать, что это отличный инструмент для создания мини-приложений. И главное — не нужно писать код. Ещё из плюсов — в нём есть кнопка, которое откроет наше приложение в десктопе в режиме планшета. Это круто, потому что приложение будет заточено не только под мобильную версию, но и под более крупные форматы.

Минус этого инструмента в том, что Glide ограничивает в бесплатной версии обновления ячеек. То есть в месяц доступно обновление через приложение 1000 записей и 500 записей на листах для просмотра.

Пример готового приложения на Glide
Пример готового приложения на Glide

Glide — это инструмент, который позволяет сделать приложение быстро и без финансовых вложений. Крутость Glide в том, что мы можем его расширять через Google Sheets. К тому же, сейчас сервис интегрируется с Airtable и Excel.

Инструменты, которые можно связать с Glide
Инструменты, которые можно связать с Glide

Подытожим:

Сегодня я рассказал о двух классных сервисах, которые позволяют создать работающие MVP, но не тратить на это много времени. Теперь у вас есть представление о том, как сделать чат-бота для Telegram и PWA приложение для ваших целей, даже если не умеете писать код.

Комментарии (7)


  1. aborouhin
    06.12.2022 17:17
    +3

    Уже на следующем этапе переходим в Glide.com и выбираем опцию «создать новый проект».

    Только не glide.com, а glideapps.com. А то я по Вашей наводке зарегистрировался в системе автоматизации документооборота риэлторов в Калифорнии и долго не мог понять, что тут не так :)


    1. gabenD Автор
      06.12.2022 18:47

      Исправились. Спасибо за наводку


  1. umutaev
    06.12.2022 18:48

    А что насчёт draw.io, вместо Lucidchart? Там, конечно, нет такого удобного шэринга, но при этом и нет ограничения в 60 блоков в бесплатной версии.


    1. gabenD Автор
      06.12.2022 18:52

      Draw.io как инструмент - практичный. Файл тоже можно открыть для редактирования и просмотра через Google Drive. Но нет интеграций с сервисами из коробки. А парсить блоки диаграммы необходимо самостоятельно.


  1. savostin
    06.12.2022 21:34

    1. Dmitrii_DAK
      07.12.2022 03:52

      А есть что-нибудь для синхронизации с банковскими приложениями и кафе и оплату заказа? Хотя бы просто проверить для своей карты? А то Adalo я пробовал - функций не хватает((


  1. js605451
    07.12.2022 06:58

    Зачем кодить, если можно не кодить?

    Что за идиотский вопрос