Sunday, February 18, 2018

Telegram-бот. Цензура чата (часть 1)

 

Задача

Есть желание ввести цензуру в Telegram-чате с помощью бота? Отлично! Ведь бот — компромисс и замечательный помощник в управлении чатом. Администрировать чаты, сдерживать "неспортивное" поведение, банить и ограничивать права участников Telegram-боты могут вполне самостоятельно и успешно.

Подготовка

Итак, приступаем. Создаем бота в рамках хакатона KonigHack 2018.
Верстаем презентацию: 


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

Как установить бота?

Теперь добавляем бота в группу и делаем его администратором:
https://t.me/GDGCensorChat.

При этом важно:

  • Группа должна быть открытой
  • Бот должен быть администратором группы.

Программируем основу бота

Копируем базовый функционал бота из старого репозитория.

Возможные проблемы

Проблема 1

Не приходят сообщения из группы.

Решение

https://github.com/yagop/node-telegram-bot-api/issues/174#issuecomment-244632667

Настраиваем редактирование сообщений. Доступен метод, представленный 19 мая 2017
года: deleteMessage.

Проблема 2

При копировании кода бота, копируются также и старые версии библиотеки: https://github.com/yagop/node-telegram-bot-api.

Решение

Стандартное обновление. После обновления библиотеки, бот будет автоматически удалять сообщения с матерными словами.

Таким образом, основа бота готова.

Улучшаем обработку сообщений

Два часа провел в поиске сервиса API для удаления бранных слов.
Бесплатного сервиса, к сожалению, не нашел ☹️.

Что делает бот

  1. Обрабатывает каждое сообщение.
  2. Удаляет сообщение при обнаружении мата
  3. Формирует ответ пользователю.

Формирование ответа

Записываем и употребляем БНФ конструкции:

<ответ> ::= <слова до> <имя пользователя> <слова после> <смайл>: \n <цензурный текст> 

<слова до> ::=
А |
Ой, |
Хм...  |
Ого! |
Эй, |
Ой-вэй, |
Эх, |
Капец!

<имя пользователя>::=
<имя> <фамилия> |
<никнейм>

<слова после> ::=
негодует |
повысил градус беседы |
высказался |
сказанул |
ропчет |
щебечет |
гаркнул |
не подумал, что сказал |
додумался |
прозрел 

<смайл> ::=
😂 |
🙉 |
🙊 |
🙈 |
😱 |
🐤 |
🦄  |
🌸 |
💔 |

Обучение бота

Для обучения бота существуют две команды:
/t - проверка мата в словаре
/s - добавления нецензурного слова в словарь.

Для тестирования бота есть группа:
https://t.me/GDGCensorChat

Можно напрямую написать боту:

Размещение бота на сервере Heroku

  1. Создаем новый пайплайн с названием приложения: gdg-censor-bot
  2. Подключаем пайплайн к репозиторию VadimCpp/gdg-censor-bot
  3. Добавляем новое приложение в раздел production
  4. Заходим в BotFather и указываем домен приложения для нашего бота: https://gdg-censor-bot.herokuapp.com/
  5. При запуске приложения на продакте, webHook устанавливается автоматически.

Итого

Телеграм-боты - это клево! 👍
Телеграм боты - это сила! 💪👊
Стоит ли их использовать для своих задач? Однозначно! И даже не сомневайтесь!


Первая версия бота, сделанного на хакатоне находится в открытом доступе:
https://github.com/VadimCpp/gdg-censor-bot

Хотите помочь?

Просто присоединяйтесь к группе:
https://t.me/GDGCensorChat

Тут можно свободно тестировать все мыслимые и немыслимые бранные слова.

Обратная связь:
ВК: https://vk.com/vadimcpp
Телеграм: @vadimcpp

Продолжение

О том, какие вопросы надо решить создателям бота, можно почитать в части 2.

Monday, February 12, 2018

Знакомство с es6 и игра "Лабиринт"

Проблема

Все чаще встречается javascript код стандарта es6. Необходимо ознакомиться с синтаксисом языка. И посмотреть, что он может.

Исследование

Хорошие материалы находятся тут:

http://ccoenraets.github.io/es6-tutorial/

Основные моменты:

  • стандарт es6 не поддерживается браузерами или поддерживается частично. Поэтому программисты придумали компилировать js код стандарта es6 в js код стандарта es5
  • область видимости переменных let. Переменные доступны в пределах блока, в котором они объявлены.
  • деструктурирующее присваивание. Пример: [a, b] = [ 100, 200 ]
  • стрелочные функции.  Пример: () => { return "something"; }
  • поддержка классов
  • промисы

Кодинг

На одном хакатоне родилась игра. Маленький ленивец Лени выбирается из лабиринта повседневности... 🙂

Написана на es6. Поиграть можно прямо тут:



Исходники находятся тут: https://vadimcpp.github.io/Labyrinth/

Кодинг

Писать игры — прикольно. Только пост не об этом. Стандарт es6 довольно привлекательный. Есть ли смысл учить es6? Да.
Есть ли смысл использовать es6 повсюду? Нет.

Иконка для сайта

Что такое иконка для сайта?


Иконка для сайта - значок веб-сайта (спасибо, Википедия). Значок сайта используется во многих местах. Примеры.

В браузере:



В закладках:



Закладки в браузере на смартфоне:



Добавление значка на главный экран:



Главный экран смартфона:



Из примеров видно, что у некоторых сайтов нет значка или значок заменен буквой.


Как сделать иконку на все случаи жизни?


Воспользоваться универсальным решением - https://realfavicongenerator.net/:
  • проверьте, каких значков не хватает вашему сайту;
  • создайте свой набор значков.
Да, мы не ошиблись, написав "набор значков". У каждой операционной системы и браузера свои требования к размерам иконок. Поэтому на выходе получаем список иконок, который выглядит примерно так:



Сайтом пользоваться легко.


Полезные ссылки


Проверить сайт:
https://realfavicongenerator.net/

Сгенерировать иконки для сайта:
https://realfavicongenerator.net/

Sunday, February 11, 2018

Красивая навигация на Vue

 

Проблема

На сайте http://touchemod.vadimcpp.ru/ реализована красивая навигация:
  • плавный скроллинг;
  • подсветка текущего раздела;
  • закрепление вверху экрана.
Необходимо реализовать такую же навигацию, только на движке Vue.js.

Исследование

Какая есть информация в интернете?

Первым делом приступил к обзору информации в интернете. Информации дофига. Изначально тут было много ссылок на Vue сайты, но толку не было. Решил приступить к кодингу 🙂

Кодинг

Так как уровень знаний Vue - базовый, буду использовать только простые решения. Такое решение - vue-fixed-header. Используя css стили буду изменять цвета и размеры элементов. Будет клево.

Кнопки делаю цветными, указываю оранжевый цвет. При наведении курсора мышки применяю эффект saturateMaterial дизайн показывает, как приподнять кнопку над канвасом.
Улучшим текст заголовка. Добавим оранжевую тень. Теперь заголовок видно на светлом и темном фоне.
Теперь приступим к маленьким экранам. На смартфоне навигация будет выглядеть иначе.  В правом верхнем углу экрана разместим гамбургер. Это такая кнопка из трех горизонтальных полосок 🍔

На мобильных устройствах навигация выглядит так:

Не хватает выпадающего меню. Не нашел в интернете хорошего, годного к употреблению компонента. Написал свой:


Исходники показать не могу, ссылка на сайт будет позже.

Итого

Среди всего множества библиотек не смог найти готовое решение и изобрел велосипед снова. Мой велосипед состоит из таких частей:
  • выпадающий список и гамбургер в мобльной версии;
  • никаких выпадающих списков в десктопной версии;
  • при скроллинге навигация закрепляется наверху экрана.
Исходники показать не могу.

Другие статьи

Хотелось сделать нечто похожее на Scroll HeaderКогда я использую этот компонент в своей работе, я напишу об этом отдельно.


Wednesday, February 7, 2018

Пример анализа роста компетенций у программиста

 

Проблема

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

Старый код

Когда стал изучать веб-технологии, появился сайт EliteGames. Ссылка будет позже, а пока только картинка:
Исходники тут: https://github.com/VadimCpp/TheEliteGames
Сперва настраиваем среду для работы. Нашлась старая инструкция (аж 23 апреля 2016 года):


По инструкции видно, что два года назад не понимал, что такое npm. В репозитории отсутствует package.json. Не знал о существовании browsersync. Больно смотреть 😱

Улучшение кода

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

  1. Добавляю в репозиторий файл index_new.txt - в нем буду записывать изменения в инструкции;
  2. Добавляю в репозиторий файлы package.json и package-lock.json. Теперь установка всех пакетов будет производиться одной командой: npm install;
  3. Автоматизировую все действия;
  4. Улучшаю пути и выкладываю сайт на GithubPages.

Итого

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

Выводы:
  • храните старый исходный код. Если хватит смелости, выложите его на Github, чтобы точно не пропал никуда. Файл install.txt я оставлю на память, хоть он в проекте не нужен.
  • оцените сами, насколько ваш код соответствует золотому правилу: "Пишите код так, как будто вы его пишите для себя в будущем!"
  • попробуйте улучшить свой код.
Посмотреть сайт можно тут: http://vadimcpp.github.io/TheEliteGames/

Sunday, February 4, 2018

Улучшение интерфейса

Необходимо доработать сайт:
  • улучшить интерфейс;
  • добавить кнопку "скопировать", которая будет копировать анонсы событий;
  • добавить детальное описание событий.
Это нужно для того, чтобы с сайтом было удобно работать.


Исследование


Этот сайт довольно простой. Поэтому здесь я буду использовать стили PureCSS. С этими стилями мне еще не приходилось работать. Это будет первый опыт. Сейчас сайт выглядит так:



Посмотрим, как изменится сайт в конце поста.


Кодинг


Пошаговый процесс:
  1. Развернуть рабочую среду. Написать инструкции по развертыванию проекта;
  2. Подключить стили PureCSS;
  3. Агрегировать весь javascript функционал в классе App;
  4. Добавить заголовок на страницу Neon at codepen.io;
  5. Использовать паттерн MVC, в котором класс App выступает контроллером;
  6. В класс GoogleCаlendar вынести загрузку данных. Этот класс будет моделью;
  7. Создать SimpleView - простой список событий. Этот класс - наше представление;
  8. Убрать стили PureCSS - никуда не годятся 😡;
  9. Добавить bootstrap 4, теперь сайт выглядит так:

  10. Добавить ссылки на соцсети;
  11. Добавить кнопку "Скопировать расписание", подключить clipboard.js;
  12. Добавить раздел с детальным описанием событий - класс DetailedView. Этот класс - второе представление наших данных;
  13. Обновить сайт.


Итого


Реализация этого небольшого проекта ушло два вечера и выходной.
Стоит ли использовать стили PureCSS? Нет, лучше Bootstrap.
Что делать с этим дальше? Не знаю.

Посмотреть сайт: https://events4friends.ru/
Посмотреть исходники: https://github.com/VadimCpp/events4friends


Другие статьи


Планируется:
  • автоматический постинг списка событий в соцсети;
  • улучшить интерфейс;
  • создать vue.js компонент.

Thursday, February 1, 2018

Мероприятия в Google Calendar

Есть календарь Google, в котором записаны все мероприятия, которые планируется посетить. Есть желание делиться с друзьями событиями в удобном формате.


Исследование


Создан публичный календарь и записано пару событий. Публичный календарь доступен по ссылке: https://calendar.google.com/calendar/events4friends

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

В интернете есть готовый пример:
https://www.milanlund.com/blog/javascript-library-google-calendar

Попробуем адаптировать под свои нужды.


Кодинг


На сайте google calendar создать отдельный календарь, который предназначен только для анонсов событий: концерты, игры, дискотеки, туры, поездки и т.д.

Затем в настройках доступа календаря установить публичный доступ.

В Google Developer Console создать новый проект: "events4friends". Подключить для проекта Calendar API. Получить ключ и запустить проект на локальном компьютере. Работает:



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




Итого


Календарь от Google - крутой:
  • очень просто создавать события;
  • предоставить другу доступ на редактирование событий;
  • много разнообразных вариантов использования;
  • легко обрабатывать события программным путем.
Стоит ли использовать Google Calendar? Да!

Посмотреть сайт: https://events4friends.ru/
Посмотреть исходники: https://github.com/VadimCpp/events4friends