Обучение no-code / low-code разработке: что из себя представляет процесс обучения, с чего начать, чему учиться
Для упрощения формулировок в этом тексте, сочетание “no-code” будет означать содержательно no-code и low-code.
Это вторая статья о no-code разработке. В первой мы разобрались, что из себя представляет no-code / low-code разработка и какие бывают платформы:
В этой же статье мы поговорим о том, как учиться no-code разработке и что из себя будет представлять процесс обучения. Как и в прошлый раз, попыталась сделать статью максимально практикоориентированой.
Кому будет полезна эта статья?
- Тем, кто рассматривает для себя возможность освоения no-code разработки.
- Тем, кто не знает, с чего начать обучение.
- Тем, кто уже учится, но не уверен, куда двигаться дальше.
- Тем, кому интересненько.
Что из себя представляет обучение no-code разработке
Процесс обучения no-code разработке я бы сравнила с обучением MS Excel. Разберу на примере достаточно продвинутого инструмента для no-code разработки — Bubble.
- Глубина овладения инструментом может сильно варьироваться, например, от уровня написания простых формул до владения макросами в Excel — от уровня выстраивания простых воркфлоу до способности прикручивать сторонние сервисы и математические формулы в Bubble.
- Овладев инструментом на определенном уровне, дальше учиться значительно легче, т. к. обучение заострено на решении конкретных задач. Те, кто базово знают Excel, разберутся, как найти и применить новую формулу. Так и с no-code: поняв принципы работы, можно подобрать нужный инструмент и разобраться, как он работает.
- Всегда помогают сторонние знания и насмотренность. В Excel можно заходить без знания статистики — вы всё ещё сможете решить весомое количество своих задач, но в способностях к аналитике будете ограничены. Так и с no-code: понимание логики разработки, интеграций, различных концепций программирования сделает использование Bubble значительно эффективнее.
На последнем пункте сфокусируемся.
No-code разработка — это всё ещё разработка.
Любое взаимодействие с интерфейсом любого ИТ-решения означает, что за всем, что вы делаете и видите, стоит код. Базовые концепции программирования актуальны вне зависимости от того, кодите вы или билдите что-то без кодинга. Поэтому изучение no-code будет естественным образом отстраиваться в двух направлениях: общее понимание принципов программирования и обучение использованию конкретного no-code инструмента.
Ключевые принципы программирования, необходимые для понимания no-code разработки
Ниже будут описаны базовые понятия, связанные с разработкой ПО, которые важно понимать.
- Что такое backend и frontend?
Простым языком, фронтэнд — это то, как сервис выглядит, а бэкэнд — то, как он работает.
- На бэкэнде обеспечивается логика работы сервиса, база данных, внешние интеграции, последовательные шаги, которые выполняет компьютер по команде, отправленной пользователем из интерфейса.
- Фронтэнд же обеспечивает визуал, с помощью которого пользователь отправляет те самые “команды”.
No-code решения для разработки сайтов или приложений часто дают разработчику возможность создания бэкэнда и фронтэнда в одном окне (Bubble, Adalo), то есть предоставляют арсенал для full-stack разработки. Но не всегда, например, сервис Xano даёт возможность создания масштабируемого бэкэнда и часто используется в паре с инструментом для создания интерфейса, например, с Weweb.
- Responsive design
Делать визуальную часть в сервисах для no-code разработки не равно делать дизайн в PowerPoint. В хороших no-code платформах есть встроенная возможность быстрой адаптации экрана под размер устройства (мобилку, планшет и т. д.). А для этого есть определенные правила формирования дизайна и распределения элементов по канве, чтобы не пришлось рисовать 4 экрана под разные расширения устройства вручную, и надеяться что пятого разрешения не существует.
Чтобы понять, как устроен дизайн веб-приложения, стоит разобраться, что такое HTML и CSS.
Самый вовлекающий материал на тему - пятиминутный ролик от Webflow (платформы для создания сайтов).
Все ссылки в статье будут на материалы на англ. языке. Для перевода можете использовать функцию автоматического перевода YouTube в Яндекс Браузере или включите субтитры с переводом непосредственно в YouTube.
- Работа с базой данных
Давайте на примерах:
- Представьте, что весь текст, который вы видите на экране, тянется из таблички. Вот вы делаете маркетплейс товаров: вы не отрисовываете тысячу карточек товара, вы рисуете одну карточку и создаете тысячу копий. А данные о товарах тянутся из разных строк вашей таблички на бэке.
- Второй пример. Вы хотите знать, сколько людей нажимает на кнопку “купить”, чтобы потом посчитать конверсию в продажу. Для этого нужно, чтобы при нажатии кнопки создавалась запись в базе данных, указывающая на намерение пользователя купить товар.
Для аналитики, для организации логики приложения, для обеспечения актуальности данных на сайте без ручного ввода — для всего этого нужна некая табличка на бэкэнде.
Вот очень понятный материал с примером на тему у Glide — платформы для построения data-driven приложений:
- State management
State management — это процесс отслеживания и управления состоянием вашего приложения, который позволяет динамически обновлять интерфейс в ответ на действия пользователя без перезагрузки страницы. Рассмотрим три примера, чтобы лучше понять, как это работает:
- Сохранение не сохраненного текста: Представьте, что пользователь заполняет форму регистрации на веб-сайте, вводя свои данные (имя, email и т. д.). Каждое изменение, которое пользователь вносит в форму, является изменением состояния приложения. State management позволяет сохранить эти данные в реальном времени, обеспечивая их актуальность до момента, когда пользователь решит отправить форму.
- Отображение элементов в зависимости от выбора пользователя: Допустим, у вас есть опция «Показать дополнительную информацию» на веб-странице. Когда пользователь выбирает эту опцию, на экране появляется дополнительный блок информации. Это изменение состояния: выбранная опция вызывает изменение в интерфейсе, не требуя перезагрузки страницы.
- Боковое меню: На веб-сайте есть боковое меню. Когда пользователь нажимает на пункт меню, содержимое основного экрана меняется, но страница не перезагружается, и пользователь остаётся на той же странице. Это пример state management, когда интерфейс динамически обновляется в зависимости от действий пользователя.
Честно говоря, короткого видео с доступным объяснением темы я не нашла. Можно посмотреть, как работает Custom states в Bubble.io (самая продвинутая no-code платформа для создания сложных сервисов) или State Management у FlutterFlow (самая продвинутая no-code платформа для создания мобильных приложений). Но начинать с этого точно не стоит.
Для старта достаточно понимать, что такое State Management. Это точно не первая функциональность, которая потребуется приложению. Но и сильно откладывать использование функциональности не стоит, она вам здорово облегчит жизнь.
- API интеграции
No-code платформы всегда предполагают наличие каких-то ограничений. Эти ограничения почти всегда можно обойти с помощью кода или с помощью сторонних сервисов. Если вы хотите прибегнуть к сторонним сервисам, это значит их интеграцию по API (Application Programming Interface). API — это набор правил и инструментов, которые позволяют различным программам взаимодействовать друг с другом.
Что можно сделать с помощью API?
- Прикрутить большую языковую модель (искусственный интеллект), например, OpenAI GPT, для улучшения взаимодействия с пользователем.
- Прикрутить проверку грамматики текста, например, с помощью AI21 Labs API.
- Сделать интеграцию с Notion, Google Sheets, Telegram и многими другими сервисами.
Если у вас есть на уме сервис, который вы хотите интегрировать в своё приложение, необходимо проверить, доступен ли у этого сервиса API. Далее, в документации этого сервиса должна быть инструкция по интеграции.
Итак, мы поняли базовые концепции программирования, которые наиболее актуальны для no-code разработки. Что дальше?
С чего начать обучение?
С практики.
Вижу два оптимальных пути для максимально эффективного, вовлеченного и результативного обучения.
- Путь первый. Придумать приложение, которое вы хотели бы сделать
Пошагово:
1) Сформировать идею, базовое видение.
2) Определитесь с видом разработки.
- Вы хотите Web-приложение или мобильное? Это посадочная страница или полноценное приложение?
3) Выберите платформу для разработки.
- Учтите свой темперамент: вы мыслите стратегически и хотите сразу освоить сложный инструмент для разработки, готовы уделять этому много времени и проявить упорство? Или вам легче начинать с инструмента попроще, чтобы быстрее видеть результаты и не соскочить?
- Для выбора платформы можете использовать табличку, которая поможет сопоставить различные no-code инструменты: в предыдущей статье
4) Найдите обучающие материалы по выбранной платформе.
- Почти все игроки на рынке no-code инструментов предоставляют понятное бесплатное обучение, потому что все заинтересованы в том, чтобы в итоге вы именно за их сервис и платили.
- У Webflow обучающие курсы — это вообще смесь искусства и стендапа, самые вовлекающие курсы из всех, что я когда-либо видела.
- Исключение — Bubble.io. У них нудный и сложный Manual, если выбрали этот инструмент, идите в YouTube. Вот отличное стартовое видео: Build a fully functional web app without code — долгое, но хорошо структурированное видео, можно смотреть в несколько заходов.
- В целом, YouTube — отличный источник знаний для no-code разработчика.
5) Приступайте к разработке.
6) Не бойтесь задавать вопросы на специализированных форумах. Комьюнити очень помогает.
- Путь второй. Сделайте клон существующего приложения.
1) На YouTube полно видео, типа “Build a clone of Airbnb in Bubble”.
2) Этот путь позволяет в более структурированном формате овладеть инструментарием для билдинга конкретной функциональности.
Сколько займет обучение?
Все зависит от выбранной вами платформы и интенсивности обучения. Очень приблизительно, базовое овладение Bubble займет порядка 2-3 месяцев, Webflow — 1 месяц, Glide 2-3 недели.
Изучение no-code разработки требует времени и усилий, но всё получится! Начинайте с практики и не бойтесь задавать вопросы. Удачи в ваших начинаниях!
В своем телеграм-канале пишу про no-code, ИИ и другие технологии, которые делают нашу жизнь проще: )