Cделать веб-приложение за 10 дней

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

---

Если вы только начинаете работать с Bubble, прочитайте этот обзор. А данная инструкция — перевод и адаптация оригинального гида из блога Bubble.

---

День 0. Создаём аккаунт в Bubble

Действие на 1 минуту. Поэтому можно сделать это перед сном, чтобы начать следующий день приобщённым к миру ноукода.

Аккаунт в Bubble бесплатный — и не нужно передавать программе данные карты, нет ограниченного по времени пробного периода (можно отдельно подключить бесплатный 14-дневный пробный период по премиум-тарифу). Создать аккаунт можно с помощью Google-аккаунта и через любую почту.

День 1. Знакомимся с Bubble

Действий на 20 минут.

Придумайте название для приложения и выберете из списка тип — блог, CRM, дашборд, лендинги, маркетплейс, онлайн-магазин, SAAS-сервис, соцсеть или что-то другое. Затем выберите, будет ли это приложение для внутреннего или внешнего использования и укажите цель создания.

Откроется рабочая область и начнётся небольшой онбординг с подсказками. Первые из них будут касаться дополнительных настроек, как выбор рабочего языка приложения (на котором, например, пользователи будет получать электронные письма), настройка фавикона (маленькая иконка на закладке в браузере).

Изучите интерфейс, настройки сеток и форматирования, поперетаскивать с панели элементы и попробовать их настроить. Отметьте для себя интересные функции. На этом этапе рекомендуют посмотреть вводный ролик и серию «Введение» от Bubble. 

День 2. Проходим интерактивные уроки

Действий на 1 час.

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

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

День 3. Проходим интерактивные уроки без подсказок

Действий на час с небольшим.

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

День 4. Создаём базу данных

Действий на час-два. Получится быстрее, если есть опыт в работе с базами и с данными.

• Разобьём эту задачу на две. Первую выполним не в Bubble.

Берите листок бумаги или откройте знакомую программу, в которой можете быстро ориентироваться и писать или даже в той, что даёт возможность визуализировать данные и связи между ними — Google Docs, любые таблицы, Notion, Miro. Пропишите в вольной форме из чего строится приложение.

Например, делаем онлайн-магазин книг. У нас будет каталог книг. Он состоит из книг с названием, обложкой, описанием, жанром, артикулом и так далее. У книги будет цена. А ещё в магазине будут покупатели — пользователи приложения. Сделаем им личный кабинет и корзину — там они будут делать заказы. А ещё у нас будет администратор онлайн-магазина. Он будет следить за порядком — у него будет свой личный кабинет, пароль.

Всё это (слова, выделенные жирным шрифтом) — данные приложения. Книга, пользователь, заказ, админ — это тип данных. У каждого типа есть свои атрибуты — обложка, название и описание, артикул и так далее. После мозгоштурма у вас должно получиться что-то такое:

Вторая часть задачи — заведение базы данных в Bubble. Во вкладке Data нужно создать соответствующие блоки данных. Во форме ввода New type добавляем типы данных; по кнопке Create a new field добавляем типам данных атрибуты — и выбираем формат: изображение, дата, число, текст, адрес и так далее. Через выбор формата также устанавливаются связи между данными — и создаётся реляционная база данных (подробнее о том, как её делать читайте тут).

❗️Немного о базах данных в Bubble. Это ключевой шаг в создании приложения. Он отличает Bubble от других ноукод-платформ. Для создания базы данных обычно нужны инженерные навыки, но с Bubble все, что нужно — логическое мышление для организации данных приложения. База данных в Bubble позволят создавать динамические страницы, настраивать рабочие процессы, собирать входные данные от пользователей — и вообще заставлять приложение жить.

Не можете сами разобраться с построением баз данных? Хотите научиться мыслить как инженер и жонглировать данными? Записывайтесь на наш курс веб-разработки без кода! 

День 5. Делаем страницы приложения и настраиваем стили

Действие займёт пару часов — но всё зависит от того, насколько вам это понравится.

Это очень приятный день! Сегодня вы прочувствуете магию ноукода. Переходим к созданию страниц вашего цифрового продукта.

Страницы — это экраны вашего приложения. Вот примеры: 

• домашняя страница — или экран с приветствием, регистрацией, авторизацией;
• основная страница — там, где будет отражаться суть приложения (например, каталог с книгами);
• специальные страницы — например, личные кабинеты;
• ре-используемые страницы — экраны, которые будут повторяться: хедер и футер, поп-апы с формами и прочее.

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

А следующий шаг — настройка стилей во вкладке Styles.

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

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

День 6. Создаём элементы на страницах и связываем между собой

Действий на 3-4 часа.

Это трудный день — но в нём ждёт продолжение магии ноукода. 

Вернитесь к страницам-экранам. Разместите на них элементы. Теперь уже все, которые планируете использовать, и с заданными ранее стилями. Размещайте кнопки, текстовые блоки, изображения. Перетаскивайте элементы с панели инструментов и настраивайте их в рабочей области.

Самое главное, с чем сегодня надо поработать — группы.

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

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

Плагины Bubble — крутая вещь, которая позволяет усилить и без того довольно мощный инструмент Bubble. Если вам нужны дополнительные элементы, как, например, редактор текстов или мульти-дропбокс — плагины помогут. Если надо встроить Zoom-видео или гугл-карту — то помогут интеграции API.

День 7. Связываем элементы с рабочими процессами

Действий на 3+ часов — это самый трудный день: день, когда ваше приложение оживёт.

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

Настраивать элементы можно по клику на каждый из них — по кнопке Start/Edit workflow. Второй способ — через вкладку Workflow на левой панели. Вот, что на этом этапе пора сделать:

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

Это трудоёмкий шаг — чтобы облегчить его для себя, постарайтесь следовать логике работы приложения и переносить представление о том, каким должно быть приложение, в реальность. Остальное — дело техники поиска нужных функций в бабле.

Совершить этот шаг очень приятно: после него приложение оживёт и будет почти готово.

День 8. Добавляем правила конфиденциальности

Действий на 30 минут. 

В приложениях нужно настраивать разрешения и допуски к данным — особенно, если вы запланировали, что разные данные пользователи должны видеть разные данные. По умолчанию посетитель интернета увидит все типы данных и страницы приложения. Поэтому идём во вкладку Data и настраиваем поэтому перейдите на вкладку Privacy и по клику на кнопку «Define a new rule» настройте выбранные правила конфиденциальности и отображения.

День 9. Тестируем приложение

Действий на любое желаемое время.

• Тестировать приложение можно через режим предварительного просмотра  Preview. В этом режиме можно самостоятельно пройти путь пользователя и посмотреть, как и что у вас получилось.
• Обратите внимание на ошибки на верхней панели — красные значки восклицательного знака в треугольнике. Рядом указано количество ошибок — если кликнуть по значку, выпадет весь список ошибок от системы: с описанием и указанием «места» ошибки.   
• Наконец, попросите помощи друга — дайте другому человеку протестировать приложение и указать на слабые места и удачные решения. Чем больше людей посмотрит приложение и протестирует его — тем лучше.

День 10. Запускаем приложение!

Действий на один клик.

Когда вы будете готовы развернуть приложение в Bubble, переходите на один платных планов. Тут можно подключить любой свой домен — без него в URL-строке после названия приложения будет приписка bubbleapps.io. На платных тарифах больше аналитики и больше возможностей. Но если вы просто хотели узнать, как создать приложение, а не запускать его в большой мир — всё готово, вы великолепны!

Вместо 11 дня

После запуска одного приложения наверняка захочется ещё! Или переделывать получившееся. Постарайтесь не упускать это вдохновение и проработать моменты, которые не получились в течение этих 10 дней. Окунайтесь в бабл—комьюнити, ищите других ноукодеров, спрашивайте или гуглите ответы.

Либо присоединяйтесь к нашим курсам — у нас нетворкинг, помощь действующих ноукодеров и методичное обучение работе в Bubble.