Wappler — no-code-инструмент, с помощью которого можно создавать сайты и мобильные приложения без знания программирования. Это инструмент полного цикла, в нем можно собрать проект целиком, начиная от  базы данных и заканчивая версткой.

Wappler имеет ряд уникальных особенностей, которые отличают его от конкурентов, таких как Bubble и Webflow.

Задать вопросы по Wappler и пообщаться с экспертами можно в русскоязычном сообществе.

Особенности Wappler

1. Код всегда ваш

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

2. Стоит от 10 до 60 € в месяц

Вы платите только постоянную плату за пользование программой — от 10 до 60 евро в месяц, в зависимости от тарифа. Количество ваших проектов, количество их пользователей, посещаемость и другие факторы не влияют на цену.

Сервис предлагает бесплатный 7-дневный период, причем без ограничения функциональности. Есть тариф Wappler Basic, если вам нужна только верстка, и Wappler Pro со всеми функциями. Тариф Pro стоит €19 для студентов и НКО, €39 для фрилансеров и €59 для компаний — за одно рабочее место разработчика в месяц.

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

Однако, в случае с Wappler вам нужно самостоятельно оплачивать хостинг, домен, файловое хранилище и нести другие сопутствующие расходы, если они есть.

3. Сайты работают быстро

Собственные фреймворки, которые используются для создания проектов на Wappler, в скорости работы не уступают популярным современным фреймворкам. Для верстки используется Bootstrap последней версии. В качестве базы данных можно подключать на выбор MySQL, PostgreSQL, MS SQL, SQLite.

В результате скорость работы сайта такая же, как в случае с классической разработкой.

4. Можно делать приложения для мобильных и ПК

Wappler позволяет создавать не только веб-сайты, но мобильные и даже десктопные приложения.

Мобильные создаются на технологии Cordova. Это означает, что фронтенд будет построен с помощью обычных веб-технологий: JS, HTML, CSS. Для этих целей в Wappler есть Framework7.

5. Подходит для любых целей

Wappler можно использовать для разных типов веб-проектов:

  • лендингов;
  • информационных порталов;
  • блогов;
  • веб-сервисов;
  • интернет-магазинов;
  • социальных сетей;
  • калькуляторов;
  • форм сбора данных;
  • административных панелей;
  • дашбордов;
  • CRM-систем.

6. Его легко связать с другими сервисами

Wappler может обмениваться данными с любыми сервисами, у которых есть REST API.

Ваш проект можно сочетать с другими no-code-инструментами, чтобы получить максимум удобства. Примеры таких комбинаций:

  • фронтенд на Wappler, а база данных в Airtable, Notion или даже в «Google Таблицах»;
  • фронтенд на Wappler и бэкенд на Integromat, Directual или Bubble;
  • Wappler в качестве бэкенда, а фронтенд на Webflow и т. д.

Wappler вполне может заменить Integromat и выполнять нужные действия по вебхукам, триггерам или по расписанию. За операции не придется платить.

Примеры проектов

Wappler пока не самый популярный инструмент для зерокодинговой разработки, поэтому на нем не так много публичных кейсов, особенно в русскоязычной среде.

В первую очередь, стоит посмотреть на официальный сайт проекта, который тоже сделан в Wappler.

Много интересных кейсов есть на сайте студии Swiss Web Factory, которая специализируется на Wappler. Особое место в их портфолио занимают сайты зоопарков. Есть даже интерактивная карта. На форуме можно посмотреть, как выглядит административная панель этих сайтов. Еще у студии есть сайты музеев и археологов.

На форуме тоже есть интересные кейсы:

Русскоязычный кейс на Wappler — калькулятор для рассчета стоимости звукоизоляции для компании «Втишине». На этом проекте Wappler используется только для фронтенда и работает в связке с Airtable, Integromat и «Google Таблицами». Кейс подробно описан на vc.ru.

Много простых примеров симпатичной верстки можно посмотреть и на демо-страницах Wappler: портфолио, страница продукта, вертикальный слайдер, карточки в стиле Pinterest, простая страница с меню, слайдер для портфолио, для блога, слайдер на полный экран.

Интерфейс Wappler

Инструкция по работе с Wappler займет большую статью. Но мы попробуем кратко описать интерфейс.

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

2. Можно включить режим Split, чтобы видеть не только саму страницу, но также и её код. Иногда быстрее будет вносить изменения на странице напрямую через код.

3. В левой панели за иконками спрятано 7 разделов. Назовем их сверху вниз:

  • Site Management — для управления страницами и файлами;
  • Git Management — для управления встроенной системой контроля версий;
  • Workflows — для работы с Server Actions (они же экшены, сценарии, процедуры). При клике на конкретный экшен открывается его редактирование;
  • Database Manager — для подключения к базам данных и редактирования данных;
  • Routes — для настройки системы адресов сайта;
  • Theme Manager — для настройки темы Bootstrap;
  • Search — для поиска по проекту.

4. Справа сверху панель с 4 вкладками:

  • App Structure — показывает всю структуру проекта. Сюда относятся как элементы верстки Bootstrap, так и фронтенд-компоненты (формы, модальные окна, управление cookies, сценарии, подключение к бэкенду, переменные, генераторы таблиц и т. д.);
  • Design — позволяет визуально настроить CSS-стили для выбранного элемента;
  • Styles — показывает, какие стили применяются к выбранному элементу (аналогично инспектору стилей в браузере);
  • DOM — показывает всю HTML-структуру файла.

5. Справа снизу панель настройки свойств выбранного элемента. Тут элементам можно визуально добавить различные Bootstrap-классы. А также тут настраивается связь элемента с нужными данными и его поведение при определенных событиях.

Настройка рабочего окружения

Когда вы создаете новый проект в Wappler, ему обязательно нужно выбрать язык/фреймворк (Server Model), а также тип хостинга (Hosting Type) для вашей стартовой площадки.

В качестве Server Model рекомендуем выбирать NodeJS — так будет чуть больше возможностей. Однако, при желании, можно работать и с PHP. Server Model нужно выбирать внимательно — вы не сможете поменять этот выбор в процессе.

Hosting Type это настройки хостинга. Вариантов очень много, и в рамках вводной статьи про них не рассказать. Новичкам рекомендуем выбирать Custom Hosting. Это значит, что подключение будет идти к собственному хостингу по классической схеме, без Docker-контейнеров. Если вы уже ранее размещали CMS на хостинге, то процесс будет вам знаком.

Но чтобы начать локальную разработку, не обязательно сразу иметь хостинг. Просто выберите Hosting Type: Custom Hosting при создании проекта и отложите настройку хостинга на потом.Если вы хотите использовать базу данных MySQL или PostgreSQL, вам нужно установить локальный сервер БД. Например, в составе пакета WAMP. Но есть вариант попроще — выбрать базу данных SQLite, которая не требует сервера.

Где учиться

Главный источник информации по работе с Wappler для новичков — это официальная документация. К счастью, все инструкции с подробными скриншотами, а текста минимум. Даже если вы не знаете английский, читать документацию можно с автоматическим переводом страниц.

Если вы не нашли ответа в документации, ищите его на официальном форуме.

Также рекомендуем всем новичкам посмотреть небольшой качественный видеокурс на английском языке. Он доступен бесплатно с промокодом «newuser».

На YouTube-канале Wappler тоже есть много обучающих видео. Стоить иметь в виду, что все они неофициальные, т. е. подготовлены участниками сообщества на личном энтузиазме.

На русском языке есть видеокурс об основах работы в Wappler в связке с Airtable. Из него можно почерпнуть основы работы в Wappler. Но важно помнить:

  • В этих уроках показывается вариант хостинга через Docker Hosting. Это допустимый подход со своими плюсами и минусами. Но это не самый лучший вариант для зерокодеров, у которых нет навыков сопровождения VPS-сервера.
  • В этих уроках в качестве базы данных используется Airtable. У это этого варианта есть свои плюсы, но рекомендуем начинающим сразу работать с полноценной собственной базой данных.

Эти и другие видео доступны и напрямую на русскоязычном YouTube-канале, посвященном Wappler.

Если не получается самостоятельно разобраться в чем-то, можно обратиться за помощью в русскоязычный чат по Wappler в Telegram.

Вывод — кому подходит Wappler

Подход, который применяет Wappler, принципиально отличается от того, что делают его конкуренты.

Другие no-code-инструменты противопоставляют себя классической веб-разработке и по сути с нуля конструируют свои собственные закрытые системы.

Wappler, наоборот, максимально использует те же подходы и open-source инструменты, которые уже распространены в обычном веб-программировании. Именно поэтому скорость созданных в нем проектов не уступает обычным веб-проектам на коде.

Пока конкуренты пытаются заменить классическую веб-разработку, Wappler пытается сделать ее более доступной, почти не меняя. Какой подход в итоге победит — покажет время.

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

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

Для полноценного создания проектов на Wappler нужно понимать основы веб-технологий:

  • JSON;
  • REST API;
  • Базы данных и SQL;
  • HTML и CSS;
  • Bootstrap 5;
  • JavaScript;
  • хостинг и администрирование сервера.

При желании в основах можно разобраться за несколько вечеров, прямо в процессе разработки вашего первого проекта. Wappler заслуживает того, чтобы его попробовать.

Чтобы стать профессиональным зерокодером, освоить Bubble, Webflow, Adalo и другие инструменты, возьми абонемент на все курсы университета ZEROCODER. Получи знания, которые помогут зарабатывать сотни тысяч рублей.

Записаться на бесплатный вебинар