Сложные примеры

Элемент формы (form)

Главным для элемента <form> является атрибут action, который указывает обработчик данных для формы. Обработчик данных — это файл, описывающий, что нужно делать с данными формы. Данные формы отправляются с помощью method = «post»:

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

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

Функция преобразует данные, введенные пользователем, которые могут содержать нежелательные HTML-тэги. Производятся следующие преобразования:

‘&’ (амперсанд) преобразуется в ‘&’
‘<‘ (знак «меньше чем») преобразуется в ‘<’
‘>’ (знак «больше чем») преобразуется в ‘>’

Эти манипуляции предотвращает использование злоумышленниками кода путем внедрения скрипта (атаки с межсайтовым скриптингом) в формы.

Получается, no-code — это дешево, и он скоро вытеснит классическую разработку?

Не совсем — no-code быстрее и дешевле по сравнению с классической разработкой, но такие решения тоже стоят денег. Хотя в no-code development порог вхождения ниже, чем в кодинг, таким специалистам тоже нужен набор специальных навыков и знаний. И за эти компетенции нужно платить.

No-code не вытеснит классическую разработку — у продуктов, разработанных без кода, есть свои ограничения. Рассмотрим основные недостатки ноукода.

Ограничения платформ. Если вы пишете мобильное приложение с нуля, можно прикрутить к проекту какие угодно фичи. В ноукоде вы собираете продукт из готовых шаблонов. Поэтому вы ограничены функционалом платформ — например, приложение, собранное в Glide, нельзя загрузить в App Store.

Но если не удается адаптировать идею проекта под возможности платформы, есть два выхода. Первый — сменить инструмент. Например, проблему с загрузкой приложения в App Store решит Adalo.

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

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

База подписчиков и ее автоматическое обновление;
Привязка банковской карты к приложению;
Интеграция с платежными системами.

Один из вариантов решения этой проблемы — совместить Integromat и GetCourse. В Integromat запускается цепочка добавления новых пользователей в базу и смены статуса оплаты, а через GetCourse можно интегрировать приложение с системами платежей и подключить автоплатежи.

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

Хранение данных. Интеграция со сторонними сервисами может привести к тому, что данные не сохранятся или сохранятся без четкой структуры. Поэтому стоит обратиться к low-code или классической разработке, если проект работает с большим массивом данных.

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

What about material-ui

Working with HTML plain vanilla controls is good enough if you want to learn how the libraries work without adding additional noise, but in real life projects you use a set of components libraries, advanced custom components… How can we integrate these components with React Final Form + Fonk?

The React Final Form field component exposes a render prop where you can use your own custom component.
This render prop feeds the inner content with several args that will let you wire up your custom component with React Final Form
What you usually do in a real project is create a wrapper per component, so that you don’t have to worry about repeating your connection plumbing in every single form.

Below you will find the same example as built before but now using Material UI

Custom Validation

Angular нам предоставляет возможность помимо использования стандартных валидаторов класса , также описать свою валидацию.

Для этого нам необходимо описать метод в файле компонента. Давайте, к примеру, сделаем валидатор, который будет проверять длину введенного тайтла:

Листинг 8.11 | Файл: src/app/all-products/all-products.component.ts

...
  ngOnInit() {
  	this.products = this.dataService.products;

  	this.form = new FormGroup({
  		title: new FormControl('', ),
  		details: new FormGroup({
  			price: new FormControl('100', ),
  			quantity: new FormControl('1', Validators.max(100))
  		})
  	});
  }

  checkLength(control: FormControl) {
  	if (control.value.length <= 2) {
  		return {
  			'lengthError': true
  		}
  	}
  	return null;
  }
...

Мы описали метод , в котором как параметр принимаем типа . В таком случае сюда попадет наше поле, дальше мы сможем получить его свойство и получить длину строки, которая передана с помощью свойства . Если это значение будет меньше или равно 2, значит нам нужно вернуть (имя этого свойства вы можете задать любое), или вернуть , если длина строки больше 2.

Теперь нам нужно добавить этот метод-валидатор к нашему экземпляру класса (см. строку 25 в листинге 8.11).

Теперь, чтобы проверить что мы получаем в объект давайте временно уберем у кнопки атрибут disabled, не вводя название отправим форму:
Тут мы видим, что у свойства есть свойство-объект , у которого в свою очередь есть два свойства наших валидаторов — (наш кастомный валидатор) и (стандартный валидатор Angular). Значения означают, что оба валидатора вернули ошибку, т.к. мы отправили пустое поле Название.

Зная эту информацию мы можем добавить сообщение об ошибке, если будет введено недостаточное количество символов или поле будет совсем пустым (тогда выведем 2 ошибки).

В файле шаблона добавим следующие изменения:

Листинг 8.12 | Файл: src/app/all-products/all-products.component.html

...
      <form ="form" (ngSubmit)="onSubmit()">
        <div class="form-group">
          <label for="title">Название</label>
          <input type="text" id="title" class="form-control" formControlName="title">
          <p *ngIf="form.get('title').invalid && form.get('title').touched">
            <span *ngIf="form.get('title').errors">Поле не должно быть пустым! </span>
            <span *ngIf="form.get('title').errors">Название должно иметь больше 2х символов</span>
          </p>
        </div>
        <div formGroupName="details">
          <div class="form-group">
            <label for="price">Цена</label>
            <input type="number" id="price" class="form-control" formControlName="price">
            <p *ngIf="form.get('details.price').invalid && form.get('details.price').touched" style="color: red">Значение поля не валидно.</p>
          </div>
          <div class="form-group">
            <label for="quantity">Количество (шт.)</label>
            <input type="number" id="quantity" class="form-control" formControlName="quantity">
          </div>
        </div>
        <button class="btn btn-success" type="submit" ="!form.valid">Добавить</button>
      </form>
...

Мы добавляем сообщение об ошибке в случае, если поле Название было «затронуто» пользователем, но при этом не проходит валидацию. Вторая проверка (в тегах ) будет для вывода отдельных сообщений об ошибке в случае если поле не заполнено совсем или название имеет меньше 2x символов.

Custom record validations

Well, we’ve had a great time adding field validations, but there are validations that are tied up to the whole record we are editing rather than to a given field. For instance, let’s face this scenario: You are not allowed to transfer more than 1000 € to Switzerland using this form (for instance: you have to go through another form where some additional documentation is required).

The best place to fire this validation is at record level.

Record validation functions accept the whole form record info as input parameter, and return the
result of the validation (it accepts both flavours sync and promise based). Let’s check the code for this validator:

./src/custom-validators/switzerland-transfer.validator.js

In order to set it up in our form validation schema there is a section called record where we can add our validation:

./src/form-validation.js

Now let’s add some plumbing in the UI code to display the record error message (it will only be displayed once IBAN and Amount fields have been touched).

./src/playground.jsx

Let’s check this out in action:

Шаг 5: Создайте контроллер

Теперь вам нужно создать контроллер, просто добавив указанную ниже команду, и сгенерировать новый контроллер ресурсов – PostController.

php artisan make:controller PostController --resource

После выполнения данной команды вы найдете новый файл по следующему пути: «app / Http / Controllers / PostController.php». Там вы увидите уже сформированные методы, такие как показано ниже. Теперь вам нужно добавить следующие коды в ваши функции:

1) index() => этот метод предоставляет вам все данные из базы данных.

2) create() => это метод для создания новой записи.

3) store() => этот метод хранит данные в вашей базе данных.

3) show() => этот метод показывает запись.

3) edit() => используя этот метод, мы можем отредактировать нашу запись.

3) update() => это метод для обновления записи.

7) destroy() => используя этот метод, мы можем удалить нашу запись.

Теперь откройте файл PostController.php и добавьте в него приведенный ниже код.

app/Http/Controllers/PostController.php

<?php

namespace App\Http\Controllers;

use App\Models\Post;
use Illuminate\Http\Request;

class PostController extends Controller
{
    /**
     * Отображает список ресурсов
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $posts = Post::all();

        return view('posts.index', compact('posts'));
    }

    /**
     * Выводит форму для создания нового ресурса
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
       return view('posts.create');
    }

    /**
     * Помещает созданный ресурс в хранилище
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $request->validate();

        Post::create($request->all());

        return redirect()->route('posts.index')->with('success','Post created successfully.');
    }

    /**
     * Отображает указанный ресурс.
     *
     * @param  \App\Models\Post  $post
     * @return \Illuminate\Http\Response
     */
    public function show(Post $post)
    {
      return view('posts.show',compact('post'));
    }

    /**
     * Выводит форму для редактирования указанного ресурса
     *
     * @param  \App\Models\Post  $post
     * @return \Illuminate\Http\Response
     */
    public function edit(Post $post)
    {
        return view('posts.edit',compact('post'));
    }

    /**
     * Обновляет указанный ресурс в хранилище
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Models\Post  $post
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, Post $post)
    {
        $request->validate();

        $post->update($request->all());

        return redirect()->route('posts.index')->with('success','Post updated successfully');
    }

    /**
     * Удаляет указанный ресурс из хранилища
     *
     * @param  \App\Models\Post  $post
     * @return \Illuminate\Http\Response
     */
    public function destroy(Post $post)
    {
      $post->delete();

       return redirect()->route('posts.index')
                       ->with('success','post deleted successfully');
    }
}

2.10.1 Контролируемые компоненты

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

Мы можем скомбинировать обе эти особенности, делая состояние React “единственным источником
достоверной информации (истины)”. В свою очередь React-компонент, который отрисовывает форму,
также контролирует, что происходит на этой форме в ответ на последующий ввод пользователя.
Элемент ввода формы (например, ), значение которого контролируется React, в этом случае
называется «контролируемый компонент».

К примеру, если в предыдущем примере мы хотим делать лог имени, когда форма отправляется, мы можем написать
форму как контролируемый компонент:

Код

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

В подходе «контролируемый компонент», любая модификация состояния имеет соответствующий обработчик.
Это делает простым изменение или проверку данных, вводимых пользователем. К примеру, если мы
хотим, чтобы логин вводился только в верхнем регистре, мы можем написать как:

Код

CodeScene

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

Плюсы

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

Стоимость

бесплатный анализ до 5 проектов;
от 249 $ в месяц за неограниченное число репозиториев.

А где можно ноукодить?

Существуют специальные платформы для создания ноукод-продуктов. Мы собрали для вас основные инструменты для применения в разных сферах.

Конструкторы сайтов

Ghost.Это платформа для создания блогов, в которой можно выбрать готовый шаблон или разработать свой дизайн. У Ghost открыт API и доступны интеграции со сторонними сервисами, например, с системами платежей.

Notion.Это гибкий инструмент, который позволяет вести заметки, управлять задачами и собирать базы знаний. С его помощью можно собрать mood board для будущего дизайн-проекта, сделать job board для стартапа, собрать CRM или вести корпоративный блог.

Веб-приложения

Bubble. Визуальная часть продукта в нем строится по принципу drag-and-drop — пользователь вручную перетаскивает элементы, регулирует их размеры и настраивает внешний вид. К элементам можно добавить события и связать их с данными. Например, при авторизации пользователей их данные будут попадать в CRM-систему.

Мобильные приложения

Glide.Это платформа для сборки приложений. Базу данных здесь выполняют встроенные таблицы или Google Таблицы. В редакторе можно настраивать интерфейс и создавать пользовательские сценарии.

Adalo.Эта платформа, в отличие от Glide, позволяет размещать приложения в App Store и Google Play и настраивать пуш-уведомления. Пользователь размещает элементы на пустом экране, закрепляет за ними действия и привязывает их к данным.

Валидация сущностей JPA

Persistence Layer – это последняя линия проверки данных. По умолчанию Spring Data использует Hibernate, который поддерживает Bean Validation из коробки.

Persistence Layer правильное место для проверки?

Обычно мы не хотим делать проверку так поздно, поскольку это означает, что бизнес-код работал с потенциально невалидными объектами, что может привести к непредвиденным ошибкам.

Допустим, необходимо хранить объекты нашего класса в базе данных.

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

Bean Validation запускается Hibernate только после того как вызовет flush.

Валидация на стороне клиента

Последнее обновление: 08.12.2019

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

Для определения валидации на стороне клиента необходимо подключить в представлении специальные скрипты валидации:

<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validation.unobtrusive/3.2.10/jquery.validate.unobtrusive.min.js"></script>

Актуальная версия скриптов в будущем может отличаться. Но по умолчанию эти же скрипты по умолчанию уже есть в проекте в папке wwwroot/lib,
и мы можем совместить подключение из CDN и подключение из проекта (в случае есть из CDN не удастся подключиться):

<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.17.0/jquery.validate.min.js"
    asp-fallback-src="~/lib/jquery-validation/dist/jquery.validate.min.js"
    asp-fallback-test="window.jQuery && window.jQuery.validator">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validation.unobtrusive/3.2.10/jquery.validate.unobtrusive.min.js"
    asp-fallback-src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"
    asp-fallback-test="window.jQuery && window.jQuery.validator && window.jQuery.validator.unobtrusive">
</script>

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

Кроме того, в проекте по типу Web Application (Model-View-Controller) по умолчанию в папке Views/Shared добавляется
файл частичного представления _ValidationScriptsPartial, который опять же содержит подключения выше упомянутых скриптов:

<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

Поэтому в принципе мы можем подключать скрипты через данное частичное представление.

Для валидации и отображения ошибок фреймворк MVC использует атрибуты валидации в дополнение к метаданным свойств модели. Когда MVC производит рендеринг
элементов формы с помощью tag-хелперов или html-хелперов, к элементам формы добавляются data-атрибуты HTML 5.

Например, пусть в модели определено свойство Name:


public string Name { get; set; }

Тогда следующее определение поля ввода с помощью tag-хелперов:

<label asp-for="Name"></label><br />
<input type="text" asp-for="Name" />
<span asp-validation-for="Name"></span>

сгенерирует следующую разметку:

<label for="Name">Name</label><br />
<input type="text" data-val="true" data-val-required="Не указано имя" id="Name" name="Name" value="" />
<span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>

Стилизация сообщений об ошибках

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

.field-validation-error {
    color: #b94a48;
}
 
.field-validation-valid {
    display: none;
}
 
input.input-validation-error {
    border: 1px solid #b94a48;
}
 
input.input-validation-error {
    border: 0 none;
}
 
.validation-summary-errors {
    color: #b94a48;
}
 
.validation-summary-valid {
    display: none;
}

Класс добавляется для сводки ошибок всей модели над формой. Класс добавляется
к элементам , которые отображают текст ошибки. И класс добавляется для полей ввода, которые содержат
некорректные данные. Управляя этими классами, мы можем должным образом стилизовать элементы формы.

НазадВперед

Валидация форм

Последнее обновление: 05.01.2021

Реализации валидации форм в React.js предусматривает проверку их введенных значений, и если эти значения сооветстуют
требованиям, тогда происходит изменение состояния компонента. Так, определим следующую страницу index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Формы в React</title>
</head>
<body>
    <div id="app"></div>
       
    <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
       
    <script type="text/babel">
    class UserForm extends React.Component {
      constructor(props) {
        super(props);
        var name = props.name;
        var nameIsValid = this.validateName(name);
        var age = props.age;
        var ageIsValid = this.validateAge(age);
        this.state = {name: name, age: age, nameValid: nameIsValid, ageValid: ageIsValid};
  
        this.onNameChange = this.onNameChange.bind(this);
        this.onAgeChange = this.onAgeChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
      }
        validateAge(age){
            return age>=0;
        }
        validateName(name){
            return name.length>2;
        }
        onAgeChange(e) {
            var val = e.target.value;
            var valid = this.validateAge(val);
            this.setState({age: val, ageValid: valid});
        }
        onNameChange(e) {
            var val = e.target.value;
            console.log(val);
            var valid = this.validateName(val);
            this.setState({name: val, nameValid: valid});
        }
  
        handleSubmit(e) {
            e.preventDefault();
            if(this.state.nameValid ===true && this.state.ageValid===true){
                alert("Имя: " + this.state.name + " Возраст: " + this.state.age);
            }
        }
  
        render() {
            // цвет границы для поля для ввода имени
            var nameColor = this.state.nameValid===true?"green":"red";
            // цвет границы для поля для ввода возраста
            var ageColor = this.state.ageValid===true?"green":"red";
            return (
                <form onSubmit={this.handleSubmit}>
                    <p>
                        <label>Имя:</label><br />
                        <input type="text" value={this.state.name} 
                            onChange={this.onNameChange} style={{borderColor:nameColor}} />
                    </p>
                    <p>
                        <label>Возраст:</label><br />
                        <input type="number" value={this.state.age} 
                            onChange={this.onAgeChange}  style={{borderColor:ageColor}} />
                    </p>
                    <input type="submit" value="Отправить" />
                </form>
            );
        }
    }
    ReactDOM.render(
        <UserForm name="" age="0" />,
        document.getElementById("app")
    )
    </script>
</body>
</html>

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

var nameColor = this.state.nameValid===true?"green":"red";
var ageColor = this.state.ageValid===true?"green":"red";

При определении поля ввода каждое поле связывается с определенным значением в state:

<input type="text" value={this.state.name} onChange={this.onNameChange} style={{borderColor:nameColor}} />
<input type="number" value={this.state.age} onChange={this.onAgeChange}  style={{borderColor:ageColor}} />

И для каждого поля ввода определен свой обработчик onChange, в котором происходит валидация и изменение введенного значения:

НазадВперед

Атрибут type

Этот атрибут говорит, какое поле ввода отобразить для обработки данных, например, уже знакомое поле типа

Также существуют другие стандартные типы полей, вроде , и для валидации чисел, URL’ов и телефонных номеров соотвествено.

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

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

Wizard Form / Funnel

Довольно распространенный кейс хранить информацию юзера пока он переходит по разным страницам/секциям. Мы рекомендуем использовать библиотеки управления состоянием, для хранения введенных юзером данных на разных страницах/секциях. В этом примере, мы используем как библиотеку для управления состоянием (вы можете заменить ее на , если более знакомы с ней).

Шаг 1: Настройте страницы и хранилище.

Шаг 2: Создайте страницы, настройте их так, чтобы они агрегировали данные, при клике на «submit» данные записывались в хранилище и передавались на следующую страницу формы.

Шаг 3: Настройте финальное действие со всеми данными из хранилища.

Следуюя шаблону выше, вы сможете построить «wizard form/funnel» для агрегации данных юзера с нескольких страниц.

5 последних уроков рубрики «HTML5»

В этом уроке я покажу процесс создания собственных HTML тегов. Пользовательские теги решают множество задач: HTML документы становятся проще, а строк кода становится меньше.
Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.
HTML5 — глоток свежего воздуха в современном вебе. Она повлиял не только на классический веб, каким мы знаем его сейчас. HTML5 предоставляет разработчикам ряд API для создания и улучшения сайтов с ориентацией на мобильные устройства. В этой статье мы рассмотрим API для работы с вибрацией.
Веб дизайнеры частенько сталкиваются с необходимостью создания форм. Данная задача не простая, и может вызвать головную боль (особенно если вы делаете что-то не стандартное, к примеру, много-страничную форму). Для упрощения жизни можно воспользоваться фрэймворком. В этой статье я покажу вам несколько практических приёмов для создания форм с помощью фрэймворка Webix.
Знакомство с фрэймворком Webix

В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.

Круто, а как я могу научиться ноукодить?

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

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

Ghost — форум от создателей платформы. Здесь можно стать частью сообщества разработчиков, найти ответы на вопросы или задать свои.

Notion — серия гидов и туториалов. На сайте есть фильтрация материалов по тематикам: продакт-менеджмент, проджект-менеджмент, дизайн и так далее.

Bubble Academy — туториалы, видео и интерактивные уроки. Также у площадки есть маркетплейс, где можно купить готовый шаблон или плагин для своей идеи.

Airtable Guides и Webinars — здесь можно найти руководства по использованию инструмента в разных ситуациях. Например, при планировании запуска продукта или управлении PR-кампанией.

Directual Documentation — база знаний с подробным описанием возможностей платформы и основных функций. Там же можно найти видеоуроки.

Glide: Getting Started — серия статей для начинающих разработчиков и анонсы обновлений инструмента.

Adalo Resources — статьи и видеоуроки от изучения интерфейса платформы до интеграций со сторонними сервисами.

Онлайн-курсы. Курсы — подходящее решение для тех, у кого нет времени для самостоятельного поиска информации.

Nucode — бесплатные подборки видеоуроков по различным ноукод-платформам.

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

Если вас заинтересовал ноукод, но вы еще не определились с направлением, попробуйте профориентационный интенсив от Университета Зерокодинга.