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

На связи «Делаем IT» — мы входим в ТОП-2 разработчиков корпоративных решений «под ключ» в России и СНГ по версии Рейтинга Рунета за 2023 год.

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

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

Главная особенность True School — уникальный набор предметов. Например, в ней студенты изучают математику через призму финансовой грамотности, а русский язык через ораторское искусство. Также на площадке размещаются лекции преподавателей из студентов разных стран — это по-настоящему уникальный контент, к которому в других случаях трудно получить доступ. Например, один из уроков провел профессор из Стэнфорда.

True School — это «Школа 2.0». Современная, легкая, технологичная — именно такой ее видит создатель проекта. Из этой философии мы сформулировали 3 основные идеи, которых придерживались в разработке.

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

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

➡Защищенность. В True School публикуется уникальный контент, которого нет на других площадках. Поэтому для и клиента было важно снизить вероятность того, что к платформе смогут получить доступ люди без оплаченной подписки.

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

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

А дело все в том, что основной образовательный контент на платформе — видео. Предполагается, что один ролик могут смотреть до 300 человек одновременно.

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

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

В случае с True School мы решили немного поэкспериментировать с библиотеками и инструментами. Вот какой стек технологий мы применяли на проекте:

➡Next.js — фронтенд.

➡PHP и Laravel— бэкенд.

➡Filament — админка.

➡PostgreSQL — база данных.

True School стал нашим первым проектом в сфере онлайн-образования. При этом в плане функций он не преподнес никаких сюрпризов и особых сложностей — набор фишек у платформы довольно стандартный.

➡Первое куда попадает пользователь — страница авторизации.

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

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

➡На странице регистрации тоже все стандартно — потенциальным студентам нужно ввести имя, фамилию, email и пароль для доступа к платформе.

Далее необходимо подтвердить регистрацию на почте и оплатить подписку на 30, 180 или 365 дней.

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

➡На главной странице пользователь может перейти в Shorts — это сборником коротких роликов-сторисов с полезной информацией.

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

➡Вкладка с уроками выполнена в виде сетки карточек.

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

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

Мы сделали так, чтобы ролики выдавались студентам по cron-скрипту. На сервере лежит программа, которая раз в определенный период отдает видео. Получается, что у каждого пользователя своя очередь к лекциям. Все зависит от того, когда он зарегистрировался.

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

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

➡Мы реализовали все core-фишки, даже несмотря на ограниченный бюджет. При этом ни одна важная функция не осталась за бортом.

➡Платформа получилась быстрой и легкой. Как с точки зрения бэкенда, так и фронта. Все как мы планировали изначально.

➡Сайт выдерживает нагрузки с большим запасом.

➡ Мы разработали административную панель для загрузки контента и работы с пользователями.

➡Сейчас проект True School полностью запущен.