Wappler — мощный и необычный конструктор сайтов и мобильных приложений

Хочу познакомить вас с программой Wappler. Это nocode-инструмент полного цикла, который позволяет создавать сайты, мобильные и десктопные приложения визуально без знания языков программирования.

Справа вверху видна панель управления структурой страницы, а под ней — свойства выбранного в структуре элемента Изображение с официального сайта
Справа вверху видна панель управления структурой страницы, а под ней — свойства выбранного в структуре элемента Изображение с официального сайта

То есть вы верстаете страницы, создаете базу данных, составляете к базе запросы, описываете логику на бэкенде и фронтенде, подключаетесь к внешним API — и всё это визуально через UI, без вмешательства в код.

Wappler не так известен, как его более именитые собратья в лице Bubble, Webflow, Tilda, Adalo, Directual и остальных. Но у программы есть много интересных преимуществ по сравнению с конкурентами.

Преимущества Wappler

1. С Wappler вы платите только за пользование программой. Вам не нужно платить отдельно за каждый сайт или приложение, которое вы создаёте. Вам так же не нужно доплачивать за снятие ограничений по траффику, запросам, пользователям, записям в базе, хранению файлов или за что-то еще.

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

2. Нет никаких искусственных ограничений характеристик вашего сайта или приложения (запросы, записи в БД, траффик и т.д.).

3. С Wappler вам сразу принадлежит весь исходный код вашего проекта. Это значит, что после того, как сайт готов, вы размещаете его на своем хостинге и, теоретически, подписку на программу можете не продлевать.

4. Можно самому выбрать, как технологический стек использовать. Для базы данных доступны MySQL / MariaDB, Postgres, SQLite, Microsoft SQL Server. Для бэкенда можно выбрать между PHP, NodeJS, ASP.NET и Classic ASP. В качестве бэкенд-фреймворка используется собственная разработка команды, которую они незамысловато называли Server Connect.

5. На фронтенде, помимо стандартного набора HTML, CSS, JS и JQuery, можно подключить фреймворки верстки Bootstrap или Framework7. Последний специально создан для мобильных приложений. Собственный фронтенд-фреймворк программы называется App Connect.

Все элементы, доступные к добавлению на страницу, разбиты на тематические разделы Изображение с официального сайта
Все элементы, доступные к добавлению на страницу, разбиты на тематические разделы Изображение с официального сайта

6. Для мобильных приложений используется фреймворк Cordova (в прошлом известный как PhoneGap). Таким образом, мобильные приложения будут гибридные.

7. Не обязательно верстать страницы самому. Можно использовать любые готовые платные или бесплатные html-шаблоны или заказать верстку специалисту. После этого вы просто открываете html-страницы в Wappler и подключаете к ним вывод нужных данных.

8. Добавляйте где хотите свой код на PHP или JS.

9. В Wappler встроена поддержка Docker, Git, Socket.io, Stripe, OAuth2, Font Awesome.

10. В результате того, что итоговые страницы проекта — обычный html-css-js без переусложнений, то страницы загружаются быстро и не имеют проблем с SEO.

11. Разработка идет на вашем компьютере ("на локалке"), поэтому просмотр и тестирование сайта происходит без задержек.

12. Сама программа написана на ElectronJS, поэтому интерфейс тоже работает быстро. Соединение с интернетом не требуется.

13. Можно включить одновременное отображение самой страницы и её html-кода. Это удобно, потому что многие изменения быстрее вносить напрямую в исходники.

Пример работы в режиме разделенного экрана Изображение с официального сайта
Пример работы в режиме разделенного экрана Изображение с официального сайта

14. Поддерживаются SSR, SPA, PWA.

15. Можно включить кэширование данных через Redis. Это особенно актуально, если вы хотите использовать в качестве базы данных Airtable, Notion или другой сервис с ограничением на количество запросов в секунду.

16. Программа стоит дешево в сравнении с конкурентами — 40 евро в месяц для фрилансеров, 60 евро для компаний и 20 евро для студентов и НКО.

17. Есть trial-версия на 7 дней, при этом никакие функций в ней не урезаны. И я знаю, о чем вы подумали. Да, после окончания триала можно удалить программу, почистить следы и поставить заново, и повторять это каждую неделю. Конечно, работающий профессионал так делать не будет, а просто купит недорогую лицензию. Но для обучения или при финансовых сложностях можно пользоваться и таким вот бесконечным триалом.

Минусы Wappler

Конечно, у Wappler есть и свои минусы и ограничения. Главным образом, они вызваны малоизвестностью программы и ее необычным подходом.

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

2. Если вы исполнитель, то вам нужно суметь убедить заказчика, почему стоит делать проект именно на этом конструкторе.

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

4. Порог входа высоковат, особенно для новичков в разработке. Это осложняется тем, что документация вся на английском, официальных видео-инструкций нет вообще, сообщество небольшое, а на "детские" вопросы на форуме отвечать на любят. Но при должном упорстве со всем можно разобраться, даже если это ваш первый ноукод-инструмент. Если же у вас есть опыт в ноукоде или в программировании, то сложностей быть не должно.

Wappler предоставляет готовые шаблоны для создания страниц Изображение с официального сайта
Wappler предоставляет готовые шаблоны для создания страниц Изображение с официального сайта

5. В программе нет и не планируется готовых интеграций с другими сервисами, за редкими исключениями вроде платежной системы Stripe. Логика Wappler тут такая: "Открывайте документацию API нужного вам сервиса и сами ручками пишите нужные запросы". Может звучит и пугающе, но на практике всё не так сложно. Знание английского языка, само собой, очень пригодится.

6. Wappler хоть и дает все возможности для визуальной верстки страниц, но вам в любом случае придётся разбираться, как работают html, css и Bootstrap. Опять же, это не так сложно, как кажется. Все ответы по верстке давно есть в первой строчке выдачи гугла и ютуба.

7. Нет готовых стартовых проектов, которые можно скачать или купить.

Кому пригодится Wappler

Резюмируем, в каких случаях стоит попробовать Wappler:

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

2. Вы столкнулись с какими-то ограничениями в других ноукод-инструментах (в скорости, пользователях, трафике, запросах и т.д.).

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

4. Вы уже немного разбираетесь в html, css, js или хотели бы разобраться.

5. Вы разработчик сайтов или мобильных приложений, и хотите попробовать nocode-инструмент, максимально приближенный к вашей обычной работе.

6. Вы хотите создавать лендинги как на Tilda, но связывать их с Airtable или аналогичным сервисом.

В Wappler можно визуально связывать элементы на странице с данными из базы или внешнего API Изображение с официального сайта
В Wappler можно визуально связывать элементы на странице с данными из базы или внешнего API Изображение с официального сайта

С чего начать изучение Wappler

Если Wappler вас заинтересовал, то вот полезные ссылки для обучения:

Очень наглядно и в том числе с гифками показывается работа в разных частях программы.

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

Если ответа нет в документации — лучше сразу искать там.

Хорошие актуальные видеоуроки на английском. Доступны бесплатно с промокодом "newuser".

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

До того, как Wappler стал самостоятельным продуктом, проект много лет развивался как набор плагинов к Adobe Dreamweaver под названием DMXzone. И хотя при переходе к самостоятельному продукту интерфейс поменялся, да и много времени ушло с тех пор, но общие принципы работы программы и ее модулей остались теми же. Поэтому в крайнем случае можно обращаться и к официальном ютуб-каналу DMXzone или к статьям на сайте: там просто море коротких инструкций на все случаи. Хотя контент там уже очень старый.

Тут без комментариев

Тут тоже без комментариев.

Что дальше

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

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

А пока что приглашаю всех, кого заинтересовала статья, в Telegram-чат по Wappler. Если у вас появились вопросы или сложности с программой, напишите там, и я постараюсь помочь. Или оставляйте комментарии тут под статьёй, я всем отвечу.

Если вы хотите обсудить создание сайта или мобильного приложения в Wappler, то пишите мне в Telegram @nickneustroev.

Заинтриговал ли вас Wappler?
Да, выглядит очень интересно!
Ну не знаю...
Не вижу преимуществ
Я не в курсе этого вашего "ноукода"
2323
27 комментариев

Поскорее бы демка, а так софт выглядит пушечно.

2
Ответить

демо кода увидеть бы

1
Ответить

Если вы про html-код страницы, который получается в итоге, то там ничего лишнего. У меня например, обычный bootstrap. 

1
Ответить

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

Ответить

Wappler - nocode.
Только вам нужно будет знать вот это, вот это, вот это, разбираться здесь, здесь и здесь, и немного тут и тут. Платить сюда. Дорого? У других ещё дороже и с ограничениями.
Вот такой у нас "ноукод". Велкам. 

1
Ответить

А как вы представляете правильный "ноукод"?

Ответить

Ноукодеры есть в треде, поделитесь  есть ли спрос на такую "разработку", сколько можно в мес. поднимать на этом? (по каналам в телеге и историям в инсте складывается впечатление, что зарабатывают больше чем обычные разработчики) 

Ответить