VK Mini Apps — это платформа для создания мини-приложений, работающих внутри ВКонтакте. На ней можно создать продукт любого масштаба — от лендинга до сложного сервиса с множеством функций. А ещё вы можете портировать на площадку ваше веб-приложение, чтобы получить доступ к огромной аудитории VK Mini Apps и новым возможностям монетизации. В этой статье поделюсь пошаговой инструкцией, как превратить в сервис любое веб-приложение — на примере планировщика задач.
Всем хабропривет. Я Леонид Шевчук, старший разработчик. Четыре года создаю мини-приложения. Руковожу командой фронтенд-разработки VK Знакомств. Наш сервис разработан как мини-приложение ВКонтакте. Это яркий пример того, что на платформе VK Mini Apps можно делать продукты с очень развитой функциональностью.
Эта статья пригодится тем, кто ещё не работал с нашей платформой, поэтому я буду рассказывать очевидные для опытных разработчиков вещи. Сначала мы освежим в памяти, на каких технологиях делаются современные веб-приложения. Затем научимся портировать в VK Mini Apps — на примере приложения для планирования дел, написанного на React. И сделаем это так, чтобы оно выглядело органично для платформы. А для чего это всё нужно? Сейчас объясню.
У VK Mini Apps огромная аудитория, унаследованная от ВКонтакте. И вы можете бесплатно (или дёшево) получать трафик для своих приложений, когда пройдёте модерацию и попадёте в каталог платформы. Более того, если ваше мини-приложение будет достаточно крутым, оно может получить бесплатный фичеринг — попадёт в тематическую подборку на платформе. Это настоящий буст трафика. Например, «Печенька с предсказаниями» — мини-апп с DAU 350 000, а его сделали три джуна и один мидл.
Перед тем как начать
Мини-приложения представляют собой одностраничные веб-приложения, которые встраиваются в платформу с помощью iFrame или WebView. Здесь нет конструктора наподобие Tilda, никакого zerocode — вам нужно владеть привычными для любого веб-разработчика технологиями: JavaScript, HTML и CSS. Однако порог вхождения гораздо ниже, чем в нативной разработке под Android или iOS.
Ещё нужно владеть каким-нибудь UI-фреймворком. Рекомендую React JS (документация, руководство для новичков): он значительно упрощает разработку веб-приложения. На нём написана и наша библиотека с готовыми компонентами VKUI, в других фреймворках этими компонентами пользоваться не получится. Но при этом React JS — не обязательная технология для мини-приложений. Просто с другими фреймворками придётся самостоятельно решать, какие библиотеки компонентов использовать или изобретать собственные компоненты. И, скорее всего, они будут несовместимы с ВКонтакте.
Начало
Я не буду рассказывать, как писать приложения на React, статья несколько о другом. Поэтому сразу перескочим на шаг вперёд: мы приготовили для вас приложение-планировщик (TODO List), можете ознакомиться с его репозиторием. Он умеет:
добавлять и удалять задачи;
помечать задачи выполненными;
подсчитывать количество выполненных задач.
Теперь оформим его как мини-приложение в VK Mini Apps.
Интересные статьи
Интересные статьи
