Веб-дизайн. Личный кабинет от Nolim

Разработка no code

Личный кабинет от Nolim

Ты узнаешь о no-code разработке и попадешь в 2% дизайнеров, которые профессионально создают ЛК любой сложности на Тильде.

Модуль 1. Ознакомительный

Модуль 1. 1-7 уроки

Создаем страницу профиля в блоке TX01

⚠️ Ознакомься с изменениями в подключении сервисов к Airtable в связи с прекращением создания ключей API с 1 августа 2023 г. Ссылка на видео тут

В Tilda:

Создаем новую страницу, добавляем блок TX01.
В блоке делаем заготовку для страницы профиля.
Создаем вторую страницу для регистрации пользователя. Добавляем форму с полями для ввода. Обязательно указывай имена переменных.
Переходим в настройки Личного кабинета. Создаем группу и добавляем в эту группу "Страницу профиля".
В настройках группы устанавливаем опцию "Добавлять пользователей в группу без подтверждения".
Далее переходим в Настройки сайта → Формы → Личный кабинет → Добавляем группу созданную в шаге 4.
Возвращаемся на страницу с формой регистрации и во вкладке "Контент" подключаем к форме приемщики данных: Группу из Личного кабинета и Webhook который создали в уроке #3.

Опубликовываем.

В Make:

Проверяем работу Webhook в Make.
Добавляем базу Airtable которую настроили в уроке #2.
Настраиваем в связке соответствующие поля из Webhook в Airtable.
Тестируем работу связки. Успехом считается попадание данных пользователя в нашу таблицу.

В Airtable:
Открываем базу, добавляем новое поле "Отображение информации" типа "Formula"
Добавляем формулу:
'Имя: '&{Имя}&'
Email: '&Email&'
Телефон: '&{Телефон}&'
Пол: '&{Пол}
Проверяем, что данные в формулу подтянулись корректно.

В Collabza: Заполняем поля для интеграции

Берем API ключ из Airtable: Настройки → Developer hub → API key → копируем и вставляем в поле интеграции.

ID базы можно найти по ссылке https://airtable.com/api копируем и вставляем в поле

Название таблицы — вписываем название листа в таблице

Вписываем название вида таблицы

Кому доступны данные — "Только авторизованным, которые есть в списке"

Название поля в таблице для определения тех, кому доступны записи — в нашем случае мы проводим проверку по полю Email.

Задаем название интеграции

Вписываем ID блока TX01 со страницы профиля(которую создали) в Tilda

Тип блока: выбираем TX01

ТЕКСТ: Вписываем название столбца с формулой.

Нажимаем кнопку "Создать", после создания скрипта копируем его и переходим в Tilda.

На странице профиля добавляем блок T123 и вставляем код интеграции.

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

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

Шаг 1: Определить техническое задание

Не обязательно расписывать большой документ, достаточно просто накидать на бумаге ответы на три основных вопроса:

1.⠀Какую задачу и за счет каких инструментов мы решаем?
2.⠀Какие роли есть в проекте?
3.⠀Какие процессы необходимо реализовать?

Шаг 2: Создать страницы в Tilda

Рекомендуем начинать именно с создания внешних страниц.

Определить где и как будут располагаться элементы, откуда будут отправляться данные, как они будут отображаться и т. д.

Шаг 3: Подготовить базу данных в Airtable

Продумать структуру и создать заготовку для хранения и обработки данных.

Шаг 4: Создать сценарий записи данных в базу

Иными словами настроить передачу данных с внешних страниц на Tilda в базу Airtable. В этом поможет сервис Make.

Шаг 5: Настроить отображение данных из базы на внешних страницах

Для этого необходимо настроить соответствующие интеграции в сервисе Collabza.

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

Модуль 2. Онлайн-школа

Модуль 1. 1-7 уроки

Создаем страницу профиля в блоке TX01

⚠️ Ознакомься с изменениями в подключении сервисов к Airtable в связи с прекращением создания ключей API с 1 августа 2023 г. Ссылка на видео тут

В Tilda:

Создаем новую страницу, добавляем блок TX01.
В блоке делаем заготовку для страницы профиля.
Создаем вторую страницу для регистрации пользователя. Добавляем форму с полями для ввода. Обязательно указывай имена переменных.
Переходим в настройки Личного кабинета. Создаем группу и добавляем в эту группу "Страницу профиля".
В настройках группы устанавливаем опцию "Добавлять пользователей в группу без подтверждения".
Далее переходим в Настройки сайта → Формы → Личный кабинет → Добавляем группу созданную в шаге 4.
Возвращаемся на страницу с формой регистрации и во вкладке "Контент" подключаем к форме приемщики данных: Группу из Личного кабинета и Webhook который создали в уроке #3.

Опубликовываем.

В Make:

Проверяем работу Webhook в Make.
Добавляем базу Airtable которую настроили в уроке #2.
Настраиваем в связке соответствующие поля из Webhook в Airtable.
Тестируем работу связки. Успехом считается попадание данных пользователя в нашу таблицу.

В Airtable:
Открываем базу, добавляем новое поле "Отображение информации" типа "Formula"
Добавляем формулу:
'Имя: '&{Имя}&'
Email: '&Email&'
Телефон: '&{Телефон}&'
Пол: '&{Пол}
Проверяем, что данные в формулу подтянулись корректно.

В Collabza: Заполняем поля для интеграции

Берем API ключ из Airtable: Настройки → Developer hub → API key → копируем и вставляем в поле интеграции.

ID базы можно найти по ссылке https://airtable.com/api копируем и вставляем в поле

Название таблицы — вписываем название листа в таблице

Вписываем название вида таблицы

Кому доступны данные — "Только авторизованным, которые есть в списке"

Название поля в таблице для определения тех, кому доступны записи — в нашем случае мы проводим проверку по полю Email.

Задаем название интеграции

Вписываем ID блока TX01 со страницы профиля(которую создали) в Tilda

Тип блока: выбираем TX01

ТЕКСТ: Вписываем название столбца с формулой.

Нажимаем кнопку "Создать", после создания скрипта копируем его и переходим в Tilda.

На странице профиля добавляем блок T123 и вставляем код интеграции.

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

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

Шаг 1: Определить техническое задание

Не обязательно расписывать большой документ, достаточно просто накидать на бумаге ответы на три основных вопроса:

1.⠀Какую задачу и за счет каких инструментов мы решаем?
2.⠀Какие роли есть в проекте?
3.⠀Какие процессы необходимо реализовать?

Шаг 2: Создать страницы в Tilda

Рекомендуем начинать именно с создания внешних страниц.

Определить где и как будут располагаться элементы, откуда будут отправляться данные, как они будут отображаться и т. д.

Шаг 3: Подготовить базу данных в Airtable

Продумать структуру и создать заготовку для хранения и обработки данных.

Шаг 4: Создать сценарий записи данных в базу

Иными словами настроить передачу данных с внешних страниц на Tilda в базу Airtable. В этом поможет сервис Make.

Шаг 5: Настроить отображение данных из базы на внешних страницах

Для этого необходимо настроить соответствующие интеграции в сервисе Collabza.

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