Я запускаю цикл статей посвящённых разработке WebApps для телеграм ботов. Что это такое можно узнать по этой ссылке. Если вкратце, то это когда в бота встраивается web интерфейс и пользователь может с ним взаимодействовать. При этом обычные функции бота никуда не исчезают, наоборот они могут органично дополнить web интерфейс.
Что же мы будем делать?
Обычно, когда я изучаю новую для себя технологию, я придумываю какой-нибудь маленький проект который я смогу реализовать на этой технологии, параллельно изучая её. И этот случай не станет исключением. Это будет бот использующий API по собакам. Вот ссылка на него. Основная задача состоит в создании web интерфейса. Я хочу наполнить его различными анимациями, и потренироваться создавать списки контента. Ведь WebApp по сути решают большинство проблем и закрывают недостатки обычных ботов, такие как: отсутствие анимаций, и невозможность показывать список контента.
Что нам понадобиться?
Во-первых нужно изучить HTML и CSS, это понадобиться чтобы сделать разметку web интерфейса. Во-вторых необходимо разобраться с WebApp API. Это часть Bot API использует для инициализации WebApp, получения событий, и для отправки ответов на действия пользователя.
План работ
Давайте составим план работ. Выполнение каждого пункта плана будет сопровождаться выходом статьи. После выполнение всех пунктов плана, мы получим готовый WebApp, который я даже запущу на сервере, так чтобы все могли опробывать конечный результат!
Вот собственно сам план:
- Создание web интерфейса
- Подключение этого интерфейса к боту и получение событий
- Добавление анимаций
- Внедрение дополнительных функций в WebApp
- Загрузка бота на сервер
Как я уже и сказал, процесс работы над каждым пунктом будет отражён в соотвествующий статье. Статьи будут выходить у меня в канале раз в неделю по выходным. Приступим к работе.
Знакомство с HTML
Мне повезло, я буду работать с HTML не впервые. HTML использовался мною для форматирования текстов в android приложениях. Основной функцией моего WebApp будет показ картинки с собакой, и возможность поставить ей “лайк” или “дизлайк”. Эту возможность я реализую с помощью этого API. Но в этой статье не будет материала об этом. В рамках этого выпуска, я просто сделаю web интерфейс.
И так я хочу сделать вот такой интерфейс:
Выглядит просто, как раз подойдёт чтобы ознакомиться с HTML и CSS. HTML нужен чтобы наметить основные элементы. А CSS позволит дополнить этот каркас приятным оформлением. Здесь я не буду обучать вас этому. В этой статье я буду показываться процесс работы. Я только лишь оставлю ссылку на видео по которому я разбирался со всем этим. Вот оно. Кстати я буду писать код в IntelliJ IDEA. Я выбрал её, потому что она мне хорошо знакома. Есть и другие IDE в которых можно реализовать подобный проект. Например, SublimeText, Atom, VisualStudio Code и другие. Если собирётесь работать вместе со мной, выбирать тот, который вам больше нравиться.
Я написал разметку и подключил шрифты, но пока не использовал их. Вот что у меня получилось:
Это голый HTML - каркас нашего будущего web интерфейса.
Знакомство с CSS
Теперь необходимо наполнить этот каркас оформлением. Для этого используется CSS. По сути это просто описание правил по которым будет рисоваться каждый тег в HTML. После примерно полутора часа разбирательства с CSS, я наконец пришёл к желаемому результату:
Я узнал, что процесс создания web интерфейсов, называется вёрстка. Это радикально отличается от того с чем мне приходилось работать до этого. Но мне понравилось.
Заключение
Было не просто разобраться с вёрсткой. Да, я и не разобрался до конца. Ещё многому предстоит научиться. В будущим я планирую делать WebApp Bots часто, поэтому с вёрсткой следует разобраться хорошо. Что-то для меня было понятно, ведь я пришёл из мира Android, и многие концепции схожи. Но есть кардинальные различия, из-за этого придётся приложить много усилий к освоению web вёрстке.
В следующий статье, я покажу следующий этап работы над данным проектом. Там уже будут технические детали. А здесь я просто решил сделать такой пилотный выпуск. Не вникая в детали, просто моменты из работы над проектом. Кстати если кому интересно, я выкладываю весь код на GitHub, вот ссылка на репозиторий. Перейдя по ссылке вы сможете ознакомиться с файлами проекта, и даже изменить их. До встречи в новых выпусках!
Ссылка на мой телеграм
