Как написать бота для сайта

Предисловие.

Веб-бот — это программа, которая автоматизирует ваши действия в интернете.

В этой статье, я объясню общий принцип создания ботов на Python, применив полученные знания, вы сможете создать бота который:

• Получает актуальную информацию о стоимости товара.
• Автоматически участвует в раздачах.
• Пишет сообщения от вашего имени (ссылка на урок).
• Скачивает картинки с сайта (ссылка на урок).

Приступим.

Создаем первого бота на Selenium.

Selenium — это библиотека для автоматизации действий в браузере.

Данный способ подойдет для любого сайта, однако, за все нужно платить. Selenium запускает браузер, отъедая огромный запас оперативной памяти. Используйте его только тогда, когда нужно выполнить JS код на странице.

Первым делом нужно установить библиотеку, для этого введите в консоли:

pip install selenium

Далее, установите веб-драйвер под браузер Firefox отсюда. Также, необходимо установить браузер Mozilla Firefox, если еще не установлен.

Теперь напишем простейшего бота. Для этого, напишите следующий python скрипт.

from selenium import webdriver #Ипортируем библиотеку
from selenium.webdriver.common.by import By
from selenium.webdriver.firefox.firefox_binary import FirefoxBinary

binary = FirefoxBinary('C:/Program Files/Mozilla Firefox/firefox.exe') #Прописываем путь до firefox.exe
browser = webdriver.Firefox(firefox_binary=binary) #создаем объект Firefox браузера
browser.get('https://under-prog.ru') #посредством метода get, переходим по указаному URL

Код скрипта описан в комментариях.

Далее, переместите файл скрипта, в одну папку с веб-драйвером geckodriver.exe

И запустите python скрипт. У вас должен открыться браузер.

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

Хорошо, бот создан, но он бесполезен. Единственное на что он способен, это заходить на сайт. Давайте добавим ему новых функций. Например, сделаем так, чтобы бот лайкал посты на сайте.

Бот лайкающий посты на сайте.

Последовательность действий у нас следующая.

1. Зайти на сайт under-prog.ru (открыть браузер)
2. Пройтись по каждому из постов.
3. Нажать кнопку лайк, если она не нажата.
4. Закрыть браузер.

Первый пункт мы уже сделали, перейдем ко второму.

Пройтись по каждому из постов.

На этом этапе, нужно понимать разметку HTML.

Зайдите на сайт, и нажмите кнопку F12.

У вас откроются инструменты разработчика. Изучив разметку, мы понимаем, что все посты находятся в теге article.

Сейчас нам нужно получить ссылку, на каждый пост. Для этого будем использовать этот css селектор.

article div div.blog-entry-content header.entry-header h2.entry-title a

Данный селектор указывает:

• На элемент с тегом a
• который находится находится внутри тега h2 с классом entry-title
• тот, в свою очередь, находится внутри тега header с классом entry-header
• тег header находится внутри тега div с классом blog-entry-content
• тот, находится в теге div
• тег div находится внутри тега article

Теперь, дополним бота.

link = browser.find_elements(By.CSS_SELECTOR, 'article div div.blog-entry-content header.entry-header h2.entry-title a')[0].get_attribute('href')
print(link)

Разберем новую функцию.

browser.find_elements(By.CSS_SELECTOR, css_селектор)

Данная функция ищет элементы по css селектору. В результате своей работы, она возвращает массив элементов.

link = browser.find_elements(By.CSS_SELECTOR, 'article div div.blog-entry-content header.entry-header h2.entry-title a')[0].get_attribute('href')

В-общем, мы из этого массива, достали первый элемент, и при помощи функции get_attribute(), получили значение атрибута href (ссылка на пост).

print(link)

И вывели его на экран.

Запустите скрипт, в консоли должна появится ссылка на первый пост.

Если закинуть массив элементов в цикл, то получится извлечь ссылки на все посты.

from selenium import webdriver #Ипортируем библиотеку
from selenium.webdriver.common.by import By
from selenium.webdriver.firefox.firefox_binary import FirefoxBinary

binary = FirefoxBinary('C:/Program Files/Mozilla Firefox/firefox.exe') #Прописываем путь до firefox.exe
browser = webdriver.Firefox(firefox_binary=binary) #создаем объект Firefox браузера
browser.get('https://under-prog.ru') #посредством метода get, переходим по указаному URL

elements = browser.find_elements(By.CSS_SELECTOR, 'article div div.blog-entry-content header.entry-header h2.entry-title a')
for elem in elements:
    print(elem.get_attribute('href'))

Отлично, ссылки на все посты получены, осталось всем этим постам, поставить лайк.

Нажать кнопку лайк, если она не нажата

Сначала перекопируем наши ссылки в отдельный массив. Замените это:

elements = browser.find_elements(By.CSS_SELECTOR, 'article div div.blog-entry-content header.entry-header h2.entry-title a')
for elem in elements:
    print(elem.get_attribute('href'))

На это:

elements = browser.find_elements(By.CSS_SELECTOR, 'article div div.blog-entry-content header.entry-header h2.entry-title a')
links_arr = []
for elem in elements:
    links_arr.append(elem.get_attribute('href'))

Далее напишем код, отвечающий за нажатие кнопки лайк.

for link in links_arr: #Проходим по каждому элементу массива ссылок
    browser.get(link) #Переходим по ссылке
    if browser.find_element(By.CSS_SELECTOR, 'button.wp_ulike_btn').get_attribute('class').find('wp_ulike_btn_is_active') == -1: #Если кнопка 'лайк' не нажата, тогда
        browser.find_element(By.CSS_SELECTOR, 'button.wp_ulike_btn').click() #кликаем по кнопке 'лайк'

Разберем данные строки.

if browser.find_elements(By.CSS_SELECTOR, 'button.wp_ulike_btn').get_attribute('class').find('wp_ulike_btn_is_active') == -1:

Данная строка ищет кнопку с помощью css_селектора, и получает строку с названиями классов нашей кнопки.

Далее, при помощи функции find (стандартная функция python), мы получаем индекс подстроки ‘wp_ulike_btn_is_active‘, если не удалось найти подстроку, функция find возвращает -1, этим мы и воспользовались в нашем условии. Т.е. если атрибут ‘class‘ не содержит подстроку ‘wp_ulike_btn_is_active‘, то.

browser.find_elements(By.CSS_SELECTOR, 'button.wp_ulike_btn').click()

Кликаем по кнопке лайк.

Осталось закрыть браузер, делается это с помощью функции quit().

browser.quit()

Бот завершен, запустите скрипт, и наслаждайтесь автоматизацией.

Делаем браузер невидимым

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

Добавьте следующий код перед инициализацией браузера:

option = webdriver.FirefoxOptions()
option.headless = True

Здесь, мы переопредили настройки браузера, осталось передать их, нашему браузеру.

browser = webdriver.Firefox(options=option)

Теперь, порядок.

Полный код бота:

from selenium import webdriver #Ипортируем библиотеку
from selenium.webdriver.common.by import By
from selenium.webdriver.firefox.firefox_binary import FirefoxBinary

binary = FirefoxBinary('C:/Program Files/Mozilla Firefox/firefox.exe') #Прописываем путь до firefox.exe
browser = webdriver.Firefox(firefox_binary=binary) #создаем объект Firefox браузера
browser.get('https://under-prog.ru') #посредством метода get, переходим по указаному URL

elements = browser.find_elements(By.CSS_SELECTOR, 'article div div.blog-entry-content header.entry-header h2.entry-title a')
links_arr = []
for elem in elements:
    links_arr.append(elem.get_attribute('href'))
    
for link in links_arr:
    browser.get(link)
    if browser.find_element(By.CSS_SELECTOR, 'button.wp_ulike_btn').get_attribute('class').find('wp_ulike_btn_is_active') == -1:
        browser.find_element(By.CSS_SELECTOR, 'button.wp_ulike_btn').click()
    
browser.quit()

Итоговый результат.

Время на прочтение
3 мин

Количество просмотров 6.8K

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

Что получим?

Что мы получим? Получим бота ( пример бота), который умеет искать по сайту и присылает пользователю ссылку на статью или набор ссылок на статьи. В названии я написал WordPress, но по идее любой сайт. который поддерживает RestApi. Показывать буду на примере своего сайта, для которого это делал. Итак есть контентный сайт gdesnimali.ru, сайт на wordpress и каждый пост там — это описание локаций того или иного фильма. Искать мы будем только по названию фильма, а оно указано в заголовке, поэтому интересует поиск только по заголовку. Мы ожидаем, что в бота человек напишет название фильма, а в ответ хочет получить все что найдет поисковик на сайте.

Создание бота в телеграм

Идем по ссылке t.me/BotFather — это чат бот для создания ботов. Там пишем /newbot, он попросит выбрать нас название для своего бота, обязательное требование, чтобы название заканчивалось на _bot, поэтому у меня gdesnimali_bot

Если название подошло, то нам покажется сообщение где будет токен, он то нам и нужен. Выглядит это примерно так:

Use this token to access the HTTP API:
5133698220:AAHqiEwVzn0lH2nrwqntlHNmYeQecGL0x

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

Но не спешите уходить из бота, он знает еще две нужные нам команды:

/setuserpic — отправляйте команду и следом картинуку, которая будет аватаркой бота.

/setdescription — отправляйте команду и следом описание вашего бота, которое будет высвечиваться пользователю до нажатия кнопки старт. Тут важно емко и интересно описать, что бот делает, чтобы пользователь не удалил его сразу.

Адаптируем код

Итак, я не программист, поэтому кто-то может уйти в депрессию от моего кода, но главное — он работает. Код просто копируем и правим пару мест

import telebot
import requests
from telebot import types

bot =  telebot.TeleBot('ВОТ ТУТ НУЖНО ВСТАВИТЬ КОД ОТ ТЕЛЕГРАМ')
bot.remove_webhook()


@bot.message_handler(commands=['start'])
def start_message(message):
  user_id = message.from_user.id
  pressStartButton = 'Кнопка старт'
  
  markup = types.ReplyKeyboardMarkup(resize_keyboard=True)
  filmSearchButton = types.KeyboardButton('ВОТ ТУТ КНОПКА ДЛЯ СТАРТА ПОИСКА')
  markup.add (filmSearchButton)
  
  bot.send_message(message.chat.id, "ВОТ ТУТ ПРИВЕТСТВЕННОЕ СООБЩЕНИЕ БОТА ПОСЛЕ КНОПКИ СТАРТ", 
                  parse_mode='html', reply_markup=markup)
 
  
  
@bot.message_handler(content_types=['text'])
def lalala (message):
 if message.chat.type == 'private':
   if message.text == 'ВОТ ТУТ КНОПКА ДЛЯ СТАРТА ПОИСКА':
     bot.send_message(message.chat.id, 'ВОТ ТУТ ОПИСАНИЕ ЧТО МОЖНО ИСКАТЬ')
   else:
      user_id = message.from_user.id
      searchQuery = message.text
      url = f"ВОТ ТУТ АДРЕС ВАШЕГО САЙТА wp-json/wp/v2/posts?search={searchQuery}"
      responce = requests.get(url) 
      if not responce.json():
        bot.send_message(message.chat.id, 'Я ничего не нашел по вашему запросу') 
      for SearchResult in responce.json():
        title = SearchResult['title']
        completeMessage = f"{title['rendered']} {SearchResult['link']}"
        bot.send_message(message.chat.id, completeMessage)
        
          
 
bot.polling(none_stop=True)

Что нужно в нем поменять?

Где надпись «ВОТ ТУТ НУЖНО ВСТАВИТЬ КОД ОТ ТЕЛЕГРАМ» — нужно вставить код который вы получили в телеграм при создании бота.

Где надпись «ВОТ ТУТ АДРЕС ВАШЕГО САЙТА» — должно получиться вот так, только вначале ваш сайт — f»https://gdesnimali.ru/wp-json/wp/v2/posts?search={searchQuery}»

Где надпись «ВОТ ТУТ КНОПКА ДЛЯ СТАРТА ПОИСКА» (Обратите внимание она в коде два раза, оба раза должно быть одинаково до символа» — нужно написать просто на русском запрос на поиск, у меня написано «Искать фильм» — это кнопка которая будет снизу в меню, при ее нажатии он выведет сообщение «ВОТ ТУТ ОПИСАНИЕ, ЧТО МОЖНО ИСКАТЬ» — у меня это «Введите название фильма».

Готово, теперь вам нужно просто сохранить этот код в файле питон, т.е. он должен заканчиваться на .py, например bot.py проще всего код вставить в обычный блокнот, там поправить и потом нажать «сохранить как» и сразу опубликовать с нужным форматом .py

Запуск на сервере

Бот должен где-то работать и он не может это делать на серверах телеграм.

Для своего бота я использую VPS сервер своего сайта и это было отдельным приключением все там настроить и установить. Вам я предлагаю использовать, как минимум на первое время хостинг pythoneverywhere. Он бесплатный для одного проекта. И есть отличная инструкция как запустить там бота. Я не буду ее переписывать, просто используйте код полуенный выше вместо кода в инструкции (Например эта: ссылка на инструкцию).

В этой статье разберём, как добавить на сайт простой чат-бот SimpleChatbot и создать для него необходимый сценарий диалога.

О чат-боте SimpleChatbot

SimpleChatbot — это простой чат-бот для сайта, сценарий диалога которого определяется JSON-файлом или данными, расположенными непосредственно в скрипте. Состоит он из 2 частей: клиентской и северной. Первая написана на чистом JavaScript, вторая — на PHP.

SimpleChatbot очень прост в настройке и установке на сайт. Он не зависит от сторонних сервисов и библиотек. Для его работы (серверной стороны) нужен веб-сервер Nginx, Apache или любой другой, умеющий выполнять php-скрипты.

Демо чат-бота

На клиентской стороне кроме самого скрипта чат-бота («chatbot.js») используется ещё FingerPrint JS. Он применяется для создания отпечатка браузера (выполнение анонимной идентификации клиента). Сам чат-бот непосредственно от него не зависит. Его действие заключается в формировании некоторого идентификатора, который затем сохраняется в LocalStorage и используется чат-ботом для передачи его на сервер. А серверу он нужен только для создания файла с соответствующим именем, в который он будет сохранять всю переписку бота с этим пользователем. По умолчанию файлы сохраняются в папку chats.

Пример содержимого каталога chats:

В этом примере имеются 2 файла. Каждый из них – это некий диалог бота с определённым клиентом.

Если его открыть, то мы увидим весь контент «разговора».

Например:

Если обратно вернуться к FingerPrint JS и немного углубиться в эту тему, то увидим, что значение, которое он генерирует сохраняется в LocalStorage. При этом в качестве имени ключа используется значение configChatbot.key. По сути, здесь не важно, что использовать, FingerPrint JS , или какую-то другую библиотеку, или свой код, главное, чтобы он создавал некий идентификатор клиента и помещал его в хранилище.

Исходный код этого чат-бота является открытым и находится на GitHub. Текущая версия 1.3.2. В качестве лицензии, используется MIT. Эта лицензия позволяет данное программное обеспечение использовать как в бесплатных, так и в коммерческих проектах (при условии, что текст лицензии поставляется вместе с этим программным обеспечением).

Установка чат-бота на сайт

Порядок действий:

1. Скачать последний релиз SimpleCatbot (v. 1.3.2) с GitHub и распаковать его.

2. Загрузить папку «chatbot» в корень вашего сайта или любое другое место. Если вы выбрали последнее, то в этом случае необходимо будет ещё в определённых местах изменить отредактировать пути к файлам.

3. Добавить стили (файл «chatbot.css») к странице:

<link rel="stylesheet" href="/chatbot/chatbot.css">

4. Подключить скрипты («fp2.js» и «chatbot.js»):

<!-- FingerPrint JS -->
<script src="/chatbot/fp2.js"></script>
<!-- ChatBot JS -->
<script src="/chatbot/chatbot.js"></script>

Код «chatbot.js» написан на синтаксисе, который поддерживается всеми используемые в данное время браузерами включая IE11.

<!-- FingerPrint JS -->
<script src="/chatbot/fp2.js"></script>
<!-- ChatBot JS -->
<script src="/chatbot/chatbot.js"></script>

5. Поместить в HTML документ кнопку, посредством которой будем вызывать окно чат-бота:

<!-- Кнопка для вызова окна чат-бота -->
<div class="chatbot__btn">
  <div class="chatbot__tooltip d-none">Есть вопрос?</div>
</div>

Далее необходимо поместить на страницу скрипт после подключения этих файлов.

1 вариант скрипта – с загрузкой сценария диалога из JSON файла («/data/data-1.json») посредством AJAX.

// конфигурация чат-бота
const configChatbot = {};
// CSS-селектор кнопки, посредством которой будем вызывать окно диалога с чат-ботом
configChatbot.btn = '.chatbot__btn';
// ключ для хранения отпечатка браузера
configChatbot.key = 'fingerprint';
// реплики чат-бота
configChatbot.replicas = '/data/data-1.json';
// корневой элемент
configChatbot.root = SimpleChatbot.createTemplate();
// URL chatbot.php
configChatbot.url = '/chatbot/chatbot.php';
// переменная для хранения экземпляра
let chatbot = null;
// добавление ключа для хранения отпечатка браузера в LocalStorage
let fingerprint = localStorage.getItem(configChatbot.key);
if (!fingerprint) {
  Fingerprint2.get(function (components) {
    fingerprint = Fingerprint2.x64hash128(components.map(function (pair) {
      return pair.value
    }).join(), 31)
    localStorage.setItem(configChatbot.key, fingerprint)
  });
}
// при клике по кнопке configChatbot.btn
document.querySelector(configChatbot.btn).onclick = function (e) {
  this.classList.add('d-none');
  const $tooltip = this.querySelector('.chatbot__tooltip');
  if ($tooltip) {
    $tooltip.classList.add('d-none');
  }
  configChatbot.root.classList.toggle('chatbot_hidden');
  if (chatbot) {
    return;
  }
  // получение json-файла, содержащего сценарий диалога для чат-бота через AJAX
  const request = new XMLHttpRequest();
  request.open('GET', configChatbot.replicas, true);
  request.responseType = 'json';
  request.onload = function () {
    const status = request.status;
    if (status === 200) {
      const data = request.response;
      // для поддержки IE11
      if (typeof data === 'string') {
        configChatbot.replicas = JSON.parse(data);
      } else {
        configChatbot.replicas = data;
      }
      // инициализация SimpleChatbot
      chatbot = new SimpleChatbot(configChatbot);
      chatbot.init();
    } else {
      console.log(status, request.response);
    }
  };
  request.send();
};

Настройка чат-бота выполняется посредством установки определённых ключей configChatbot:

• configChatbot.btn — селектор кнопки, посредством которой будем вызывать окно диалога с чат-ботом;
• configChatbot.key — имя ключа LocalStorage, в котором будет храниться отпечаток браузера;
• configChatbot.replicas — URL json-файла, содержащего сценарий диалога для чат-бота;
• configChatbot.root — ссылка, на корневой элемент чат-бота;
• configChatbot.url — путь к файлу chatbot.php.

Инициализация чат-бота в коде выполняется так:

let chatbot = new SimpleChatbot(configChatbot);
chatbot.init();

2 вариант скрипта – с помещением данных для чат-бота непосредственно в сценарий.

// конфигурация чат-бота
const configChatbot = {};
// CSS-селектор кнопки, посредством которой будем вызывать окно диалога с чат-ботом
configChatbot.btn = '.chatbot__btn';
// ключ для хранения отпечатка браузера
configChatbot.key = 'fingerprint';
// реплики чат-бота
configChatbot.replicas = { /*...*/ };
// корневой элемент
configChatbot.root = SimpleChatbot.createTemplate();
// URL chatbot.php
configChatbot.url = '/chatbot/chatbot.php';
// создание SimpleChatbot
let chatbot = new SimpleChatbot(configChatbot);
// при клике по кнопке configChatbot.btn
document.querySelector(configChatbot.btn).onclick = function (e) {
  this.classList.add('d-none');
  const $tooltip = this.querySelector('.chatbot__tooltip');
  if ($tooltip) {
    $tooltip.classList.add('d-none');
  }
  configChatbot.root.classList.toggle('chatbot_hidden');
  chatbot.init();
};
// добавление ключа для хранения отпечатка браузера в LocalStorage
let fingerprint = localStorage.getItem(configChatbot.key);
if (!fingerprint) {
  Fingerprint2.get(function (components) {
    fingerprint = Fingerprint2.x64hash128(components.map(function (pair) {
      return pair.value
    }).join(), 31)
    localStorage.setItem(configChatbot.key, fingerprint)
  });
}

Настройка чат-бота в этом варианте практически ничем отличается от способа с JSON за исключением того, что данные здесь уже находятся непосредственно в скрипте (в configChatbot.replicas), и их не нужно дополнительно загружать через AJAX.

Составление диалога для чат-бота

Написание реплик для чат-бота выполняется в формате объекта. При создании объекта необходимо определить 2 ключа. Первый ключ (bot) отвечает за сообщения бота, а второй (human) — пользователя.

configChatbot.replicas = {
  bot: { /* ... */ },
  human: { /* ... */ }
}

Далее в bot необходимо поместить сами реплики. Описание их также выполняется в формате объекта. В качестве ключа используется число, а в роли значения – объект, состоящий из свойств content и human. В content помещаем сам контент, а в human – массив ответов для пользователя.

configChatbot.replicas = {
  bot: {
    0: { content: 'Привет! Я Инфинити - бот поддержки сайта <a href="https://itchief.ru" target="_blank">itchief.ru</a>', human: [0, 1, 2] },
    /* ... */
  },
  human: { /* ... */ }
}

Кстати, работа чат-бота всегда стартует с приветственного сообщения бота, заданного в 0. После показа этой реплики и некоторой паузы будет выведены варианты ответов для пользователя, указанные в human.

Создание ответов для пользователя выполняется аналогичным образом. Т.е. в content помещаем ответ пользователя, который будет выведен в виде кнопки, а в bot – номер следующей реплики бота при выборе этого ответа пользователем.

configChatbot.replicas = {
  bot: {
    0: { content: 'Привет! Я Инфинити - бот поддержки сайта <a href="https://itchief.ru" target="_blank">itchief.ru</a>', human: [0, 1, 2] },
    /* ... */
  },
  human: {
    0: { content: 'Привет! Я рад с тобой познакомиться', bot: 1 },
    1: { content: 'Салют!', bot: 2 },
    2: { content: 'Приветик, Инфинити!', bot: 2 },
    /* ... */
  }
}

Но если нужно, чтобы пользователь не просто выбрал один из предоставленных ему ответов, а ввёл некоторые данные. То в этом случае в качестве значения content нужно указать пустую строку. В этом сценарии пользователю станет доступно поле для ввода (input) информации и кнопка, с помощью которой её можно будет отправить.

Если данные, которые ввёл пользователь вы хотите использовать в репликах, то им необходимо задать имя. Осуществляется это с помощью свойства name.

configChatbot.replicas = {
  bot: {
    0: { content: 'Привет! Я Инфинити - бот поддержки сайта <a href="https://itchief.ru" target="_blank">itchief.ru</a>', human: [0, 1, 2] },
    1: { content: 'Я тоже рад, как мне к Вам обращаться', human: [3] },
    2: { content: 'Как мне к Вам обращаться?', human: [3] },
    /* ... */
  },
  human: {
    0: { content: 'Привет! Я рад с тобой познакомиться', bot: 1 },
    1: { content: 'Салют!', bot: 2 },
    2: { content: 'Приветик, Инфинити!', bot: 2 },
    3: { content: '', bot: 3, name: 'name' },
    /* ... */
  }
}

Например, в этом примере, мы установили данным, которые введёт пользователь, имя name. Далее эти данные мы можем использовать в репликах бота используя это имя, заключенное в двойные фигурные скобки (например, {{name}}).

configChatbot.replicas = {
  bot: {
    0: { content: 'Привет! Я Инфинити - бот поддержки сайта <a href="https://itchief.ru" target="_blank">itchief.ru</a>', human: [0, 1, 2] },
    1: { content: 'Я тоже рад, как мне к Вам обращаться', human: [3] },
    2: { content: 'Как мне к Вам обращаться?', human: [3] },
    3: { content: '{{name}}, что Вас интересует?', human: [4, 5] },
    /* ... */
  },
  human: {
    0: { content: 'Привет! Я рад с тобой познакомиться', bot: 1 },
    1: { content: 'Салют!', bot: 2 },
    2: { content: 'Приветик, Инфинити!', bot: 2 },
    3: { content: '', bot: 3, name: 'name' },
    4: { content: 'Меня интересует, как я могу использовать этот чат-бот у себя на сайте', bot: 4 },
    5: { content: 'Хочу оставить запрос разработчику чат-бота', bot: 5 },
    /* ... */
  }
}

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

Пример сценария:

configChatbot.replicas = {
  bot: {
    0: {
      content: 'Привет! Я Инфинити - бот поддержки сайта <a href="https://itchief.ru" target="_blank">itchief.ru</a>', human: [0, 1, 2]
    },
    1: { content: 'Я тоже рад, как мне к Вам обращаться?', human: [3] },
    2: { content: 'Как мне к Вам обращаться?', human: [3] },
    3: { content: '{{name}}, что Вас интересует?', human: [4, 5] },
    4: { content: '{{name}}, для этого перейдите на <a href="https://itchief.ru/javascript/chatbot-for-website" target="_blank">эту страницу</a>. Она содержит подробную инструкцию по использованию этого чат-бота.', human: [6] },
    5: { content: "{{name}}, какой у Вас вопрос?", human: [7] },
    6: { content: '{{name}}, мы получили Ваш вопрос! Скажите, как с Вами удобнее будет связаться?', human: [8, 9] },
    7: { content: '{{name}}, укажите пожалуйста ваш телефон', human: [10] },
    8: { content: '{{name}}, укажите пожалуйста ваш Email ниже', human: [10] },
    9: { content: 'Готово! {{name}}, мы свяжемся с вами в ближайшее время по {{contact}}. Всего хорошего!', human: [6] },
  },
  human: {
    0: { content: 'Привет! Я рад с тобой познакомиться', bot: 1 },
    1: { content: 'Салют!', bot: 2 },
    2: { content: 'Приветик, Инфинити!', bot: 2 },
    3: { content: '', bot: 3, name: 'name' },
    4: { content: 'Меня интересует, как я могу использовать этот чат-бот у себя на сайте', bot: 4 },
    5: { content: 'Хочу оставить запрос разработчику чат-бота', bot: 5 },
    6: { content: 'В начало', bot: 3 },
    7: { content: '', bot: 6, name: '' },
    8: { content: 'по телефону', bot: 7 },
    9: { content: 'по email', bot: 8 },
    10: { content: '', bot: 9, name: 'contact' },
  }
}

Когда сценарий у вас готов, его следует, если вы используете 2 вариант скрипта, поместить вместо этой строчки:

configChatbot.replicas = { /*...*/ };

При использовании 1 варианта скрипта, его необходимо перевести в строку JSON. Для этого можно воспользоваться каким-нибудь онлайн сервисом или стандартным JavaScript методом stringify:

configChatbot.replicas = { /* ... */ };
const json = JSON.stringify(configChatbot.replicas);
console.log(json);

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

Новые возможности чат-бота

В SimpleChatbot начиная с версии 1.2.0 для бота можно указывать сразу несколько сообщений. Для этого их необходимо передать в формате массива. Такие сообщения будут выведены последовательно друга за другом в виде отдельных реплик.

Например:

bot: {
  0: { content: ['Привет!', 'Я Инфинити - бот поддержки сайта <a href="https://itchief.ru" target="_blank">itchief.ru</a>'], human: [0, 1, 2] },
  ...

В версии 1.3.0 добавлена возможность отправки сообщения клавишей Enter, метод reset для очистки (сброса) чата и кнопка для вызова этого метода.

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

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

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

Разработку мы будем осуществлять в Astra Linux, которую настроили в предыдущей статье

А чтобы не изобретать велосипед мы будем использовать готовую библиотеку:

https://github.com/irazasyed/telegram-bot-sdk

Но для её установки нам потребуется Composer!

Установка Composer

Установим Composer, это популярный установщик библиотек для PHP. Данный метод рекомендуется в документации для использования при установке.

Актуальную команду для установки вы можете найти на странице проекта –

https://getcomposer.org/doc/faqs/how-to-install-composer-programmatically.md

Создадим папку для будущего бота:

sudo mkdir -p /var/phpbots/landing-bot

Перейдем в папку

sudo cd /var/phpbots/landing-bot

Для упрощения разработки установим права доступа на папку:

sudo chmod -R 777 /var/phpbots/landing-bot

Обратите внимание! При установке на продакшн-сервер права 777 на папку ставить строго не рекомендуется!

Запустим

sudo wget https://raw.githubusercontent.com/composer/getcomposer.org/76a7060ccb93902cd7576b67264ad91c8a2700e2/web/installer -O - -q | php –

Перенесем скрипт в папку

/usr/local/bin/

Таким образом он будет глобально:

sudo mv composer.phar /usr/local/bin/composer

Проверим корректность установки:

sudo composer self-update

You are already using the latest available Composer version 2.1.5 (stable channel).

Установка библиотеки telegram-bot-sdk

Обратите внимание строго не рекомендуется запускать composer из под пользователя root.

Используйте учетную запись обычного пользователя! 

Запустим установку.

composer require irazasyed/telegram-bot-sdk ^2.0

./composer.json has been created

Running composer update irazasyed/telegram-bot-sdk

Loading composer repositories with package information

Updating dependencies

Lock file operations: 20 installs, 0 updates, 0 removals

  - Locking doctrine/inflector (2.0.3)

…

  - Locking symfony/translation-contracts (v2.4.0)

Writing lock file

Installing dependencies from lock file (including require-dev)

Package operations: 20 installs, 0 updates, 0 removals

  - Downloading doctrine/inflector (2.0.3)

…

  - Downloading irazasyed/telegram-bot-sdk (v2.3.0)

  - Installing doctrine/inflector (2.0.3): Extracting archive

…

  - Installing irazasyed/telegram-bot-sdk (v2.3.0): Extracting archive

15 package suggestions were added by new dependencies, use `composer suggest` to see details.

Generating autoload files

10 packages you are using are looking for funding.

Use the `composer fund` command to find out more!

Я сильно сократил вывод команды, для экономии места!

После окончания установки будет создана папка

vendor

и два файла

composer.json 

composer.lock

На этом установка библиотеки закончена!

Создание бота в Телеграм

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

Откройте в Телеграм раздел Все чаты и введите в строку поиска:

@BotFather 

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

В чат боту напишем

 /newbot

Alright, a new bot. How are we going to call it? Please choose a name for your bot.

Напишем имя бота. Так как я создаю тестового бота, то и назову его:

Ru-Test9999-bot

Good. Now let's choose a username for your bot. It must end in `bot`. Like this, for example: TetrisBot or tetris_bot.

Теперь нам нужно придумать внешнее имя, это имя, по которому его можно будет найти в Телеграм.

Обратите внимание, что многие имена уже зарегистрированы и даже имя Ru-Test9999-bot занято! Будем импровизировать:

Ru_Test9999_bot

Если всё прошло успешно, вы получите сообщение:

Done! Congratulations on your new bot. You will find it at t.me/Ru_Test9999_bot. You can now add a description, about section and profile picture for your bot, see /help for a list of commands. By the way, when you've finished creating your cool bot, ping our Bot Support if you want a better username for it. Just make sure the bot is fully operational before you do this.

Use this token to access the HTTP API:

1234567890:XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Keep your token secure and store it safely, it can be used by anyone to control your bot.


For a description of the Bot API, see this page: https://core.telegram.org/bots/api

 Нас интересует строчка вида:

1234567890:XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Это токен вашего бота и вы должны бережно его хранить в недоступном месте! Никому не сообщать и не забывать удалять его из исходного кода, если размещаете его на github.com!

Для теста я создал группу:

altuninvv-dev

и при создании ввел имя бота

Ru_Test9999_bot

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

Так же откроем Управление группой и сделаем Ru_Test9999_bot администратором.

На этом настройка бота завершена.

Чтобы бот из Телеграм имел доступ к программному коду на вашем сервере нам потребуется доменное имя и доступ к серверу по протоколу https://

Настройка Nginx

Бот должен быть доступен по https://. Давайте настроим Nginx для предоставления доступа к файлу с ботом.

Чтобы защититься от разных «хацкеров» я рекомендую создать на веб-сервере папку с длинным именем. Для этого сгенерируем UUID:

python -c 'import uuid; print(str(uuid.uuid4()))'

d2549d33-255a-40a6-8cce-36c8f7efe780

Каждый раз при запуске результат будет разным!

Создадим папку для веб-сервера

sudo mkdir /var/www/phpbots

В папке создадим симлинк до папки /var/phpbots/landing-bot

cd /var/www/phpbots

sudo ln -s /var/phpbots/landing-bot d2549d33-255a-40a6-8cce-36c8f7efe780

Теперь, если мы напишем:

ls /var/www/phpbots/d2549d33-255a-40a6-8cce-36c8f7efe780

composer.json  composer.lock  vendor

То увидим содержимое папки /var/phpbots/landing-bot

 Создадим файл конфигурации для nginx

server {
        listen 9966 default_server;
        listen [::]:9966 default_server;


        root /var/www/phpbots;

        # Add index.php to the list if you are using PHP
        index index.php index.html;

        server_name _;


        location / {
                try_files $uri $uri/ /index.php;
        }


        location ~ .php$ {
                fastcgi_pass 127.0.0.1:9000;
                fastcgi_index  index.php;
                fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
                include        fastcgi_params;
                include /etc/nginx/fastcgi.conf;
        }
}

Откроем 

http://192.168.1.42:9966

Получим

403 Forbidden

nginx/1.14.1

Создадим в папке

/var/www/phpbots/d2549d33-255a-40a6-8cce-36c8f7efe780

файл test.php с содержимым:

<?php echo phpinfo(); ?>

Откроем

http://192.168.1.42:9966/d2549d33-255a-40a6-8cce-36c8f7efe780/test.php

Откроется страница с phpinfo()

Настройка туннеля с помощью ngrok.com

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

Чтобы решить эту проблемы мы воспользуемся бесплатным планом сервиса https://ngrok.com

Установим клиент ngrok на наш локальный сервер:

Зарегистрируйтесь на сайте и в разделе

https://dashboard.ngrok.com/get-started/setup

Скачайте файл ngrok-stable-linux-amd64.zip

На момент написания статьи ссылка была такой:

https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-linux-amd64.zip

Но лучше скопировать свежую!

Скачаем в папку обычного пользователя, опять же, не запускайте ничего от root без необходимости!

cd ~

wget https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-linux-amd64.zip

Обратите внимание мы будем запускать ngrok от обычного пользователя!

Распакуем архив:

unzip ngrok-stable-linux-amd64.zip

Archive:  ngrok-stable-linux-amd64.zip

  inflating: ngrok

На странице

https://dashboard.ngrok.com/get-started/setup

вы найдете команду для добавления вашего токена в локальное хранилище ngrok

скопируйте и запустите строчку вида:

./ngrok authtoken XXXXXXXXXXваштокенXXXXXXXXXXXXXXXXXXXXXXX

Authtoken saved to configuration file: /home/user/.ngrok2/ngrok.yml

Запустим ngrok: 

./ngrok https 9966

ngrok by @inconshreveable                                                                                                          (Ctrl+C to quit)

Session Status                online
Account                       Vasiliy Altunin (Plan: Free)
Version                       2.3.40
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http:// bc8ab1191806.ngrok.io -> http://localhost:9966
Forwarding                    https:// bc8ab1191806.ngrok.io -> http://localhost:9966

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

Откроем

https://bc8ab1191806.ngrok.io/d2549d33-255a-40a6-8cce-36c8f7efe780/test.php

Обратите внимание, bc8ab1191806 меняется каждый раз, когда вы перезапускаете ngrok. Чтобы получить постоянное имя придется купить подписку!

Но нам для написания и отладки бота хватит и бесплатного функционала.

Откроем ссылку 

https://bc8ab1191806.ngrok.io/d2549d33-255a-40a6-8cce-36c8f7efe780/test.php

И увидим свою страницу phpinfo().

Привязываем Вебхук (Webhook)

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

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

Создадим файл для будущего бота:

python -c 'import uuid; print(str(uuid.uuid4()))'

6a98fbdb-9fc1-4681-878a-4e4292b79332

sudo touch /var/phpbots/landing-bot/6a98fbdb-9fc1-4681-878a-4e4292b79332.php

Откроем в браузере:

https://bc8ab1191806.ngrok.io/d2549d33-255a-40a6-8cce-36c8f7efe780/6a98fbdb-9fc1-4681-878a-4e4292b79332.php

Получим пустую страницу – это хорошо, значит файл доступен.

Далее не забудьте заменить

1234567890:XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

На ваш токен!

Обратите внимание, мы добавили bot перед токеном ЭТО ВАЖНО!

Привяжем URL

Для этого укажем токен и адрес файла с ботом!

curl https://api.telegram.org/bot1234567890:XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/setWebhook?url=  https://bc8ab1191806.ngrok.io/d2549d33-255a-40a6-8cce-36c8f7efe780/6a98fbdb-9fc1-4681-878a-4e4292b79332.php

{"ok":true,"result":true,"description":"Webhook was set"}

Таким образом мы установили Вебхук!

Пишем код для бота

 Напишем простой код для бота: 

<?php
include('vendor/autoload.php');

$token = "1234567890:XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX ";

use TelegramBotApi;

$telegram = new Api($token);
$result = $telegram->getWebhookUpdates();

$text = $result["message"]["text"];
$chat_id = $result["message"]["chat"]["id"];

if($text == "/start"){
    $r = "Hello user!";
    
    $telegram->sendMessage(['chat_id' => $chat_id, 'text' => $r]);
}

Откроем ссылку:

https://bc8ab1191806.ngrok.io/d2549d33-255a-40a6-8cce-36c8f7efe780/6a98fbdb-9fc1-4681-878a-4e4292b79332.php

Notice: Undefined index: message in /var/phpbots/landing-bot/vendor/illuminate/support/Collection.php on line 1290

Notice: Trying to access array offset on value of type null in /var/phpbots/landing-bot/6a98fbdb-9fc1-4681-878a-4e4292b79332.php on line 12

Notice: Undefined index: message in /var/phpbots/landing-bot/vendor/illuminate/support/Collection.php on line 1290

Notice: Trying to access array offset on value of type null in /var/phpbots/landing-bot/6a98fbdb-9fc1-4681-878a-4e4292b79332.php on line 13

Notice: Trying to access array offset on value of type null in /var/phpbots/landing-bot/6a98fbdb-9fc1-4681-878a-4e4292b79332.php on line 13 

Так ка мы вызываем бот напрямую, он выдает множество нотисов, это нормально!

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

Откроем телеграм и найдем бот Ru_Test9999_bot нажмем на кнопку Запустить

И получим ответ:

 

Поздравляю! Мы с вами написали простой бот для Телеграм.

Заключение

Сегодня мы рассмотрели создание простого Телеграм-бота.

Был установлен Composer PHP.

С его помощью мы установили библиотеку для разработки Телеграм-ботов — telegram-bot-sdk.

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

Настроили Nginx и скрипт для бота.

Установили ngrok для организации доступа к боту, размещенному на нашем локальном сервере, из интернета.

Привязали Вебхук к публичному адресу ngrok.

Написали и протестировали простой Телеграм-бот.

В следующей части мы рассмотрим отправку сообщения с формы сайта в группу Телеграм.

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

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

Что мы получим? Получим бота ( t.me/GdeSnimali_bot ), который умеет искать по сайту и присылает пользователю ссылку на статью или набор ссылок на статьи. В названии я написал WordPress, но по идее любой сайт. который поддерживает RestApi. Показывать буду на примере своего сайта, для которого это делал (Сочтите за рекламу, ибо не зря же я статью писал — сходите и зацените сайтик). Итак есть контентный сайт gdesnimali.ru, сайт на wordpress и каждый пост там — это описание локаций того или иного фильма. Искать мы будем только по названию фильма, а оно указано в заголовке, поэтому интересует поиск только по заголовку. Мы ожидаем, что в бота человек напишет название фильма, а в ответ хочет получить все что найдет поисковик на сайте.

Создание бота в телеграм

Идем по ссылке t.me/BotFather — это чат бот для создания ботов. Там пишем /newbot, он попросит выбрать нас название для своего бота, обязательное требование, чтобы название заканчивалось на _bot, поэтому у меня gdesnimali_bot

Если название подошло, то нам покажется сообщение где будет токен, он то нам и нужен. Выглядит это примерно так:

Use this token to access the HTTP API:
5133698220:AAHqiEwVzn0lH2nrwqntlHNmYeQecGL0x

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

Но не спешите уходить из бота, он знает еще две нужные нам команды:

/setuserpic — отправляйте команду и следом картинуку, которая будет аватаркой бота.

/setdescription — отправляйте команду и следом описание вашего бота, которое будет высвечиваться пользователю до нажатия кнопки старт. Тут важно емко и интересно описать, что бот делает, чтобы пользователь не удалил его сразу.

Адаптируем код

Итак, я не программист, поэтому кто-то может поймать депрессию от моего кода, но главное — он работает. Код просто копируем и правим пару мест

Что нужно в нем поменять?

Где надпись «ВОТ ТУТ НУЖНО ВСТАВИТЬ КОД ОТ ТЕЛЕГРАМ» — нужно вставить код который вы получили в телеграм при создании бота.

Где надпись «ВОТ ТУТ АДРЕС ВАШЕГО САЙТА» — должно получиться вот так, только вначале ваш сайт — f»https://gdesnimali.ru/wp-json/wp/v2/posts?search={searchQuery}»

Где надпись «ВОТ ТУТ КНОПКА ДЛЯ СТАРТА ПОИСКА» (Обратите внимание она в коде два раза, оба раза должно быть одинаково до символа» — нужно написать просто на русском запрос на поиск, у меня написано «Искать фильм» — это кнопка которая будет снизу в меню, при ее нажатии он выведет сообщение «ВОТ ТУТ ОПИСАНИЕ, ЧТО МОЖНО ИСКАТЬ» — у меня это «Введите название фильма».

Готово, теперь вам нужно просто сохранить этот код в файле питон, т.е. он должен заканчиваться на .py, например bot.py проще всего код вставить в обычный блокнот, там поправить и потом нажать «сохранить как» и сразу опубликовать с нужным форматом .py

Запуск на сервере

Бот должен где-то работать и он не может это делать на серверах телеграм.

Для своего бота я использую VPS сервер своего сайта и это было отдельным приключением все там настроить и установить. Вам я предлагаю использовать, как минимум на первое время хостинг pythoneverywhere. Он бесплатный для одного проекта. И есть отличная инструкция как запустить там бота. Я не буду ее переписывать, просто используйте код полуенный выше вместо кода в инструкции.

Спасибо за внимание — надеюсь у вас получится отличный бот!

Чат-бот для сайта

2021 / 07 / 16

Время чтения ≈

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

Волею судьбы мне понадобилось написать бота для сайта, навигация по которому полностью построена на ajax.

Я уже сталкивался с такой проблемой и прекрастно понимаю, что php-шная библиотека curl вполне справляется со своей задачей и в этом случае с ajax-ом, но, видать, я был не первым таким умником и разработчики сайта защитились от ботов постоянно меняя ajax-запросы, да еще и генерируя их с помощью javascript.

Все статьи цикла
Промучившись три ночи, я осознал, что нужно писать интерпретатор javascript, вот только занятие это, мягко говоря, не благодарное, покопавшись в интернете я нашел уже 2 готовых (весь остальной абзац к делу фактически не относится):

Для java. (пользуясь случаем хочу отметить, что вопреки распространенному мнению, java и javascript – два совершенно разных языка, а приставку «java» javascript приобрел в последний момент и только в маркетинговых целях).

Благодаря случайно попавшейся месяц назад на глаза батиной книжке Питера Нотона за 1996 год я понял, что java – язык без сомнения интересный и позволяющий решить много специфических задач язык. Вот только я, как и большинство, думаю, не смогу взять и написать бота на нем, java требует не малых усилий по изучению, и если и изучать его, то не для написания одной маленькой программки.
Для python. Наверно в начале весны от одного человека (руководителя одной из конторок по производству сайтов, как он сам себя называет) слышал восторженный отзыв об этом языке программирования, в котором обсирались все известные мне серверные языки и прославлялся великий и могучий python. Из этого монолога я также узнал, что для конторы, по заказу на python-е сейчас пишется CMS и почти завершена. Вот только:
говорил он не своими словами, а словами программиста, который эту CMS пишет, сам же он даже не знает, как этот самый python выглядит.
в программировании этот человек не идет дальше лабороторок в институте и даже плохо в нем соображает, все его программирование ограничивается навигацией в интерактивных flesh мультиках,
даже после полутора лет своей работы контора убыточна,
возможно из-за предыдущего пункта она, по сути, не легальна и представляет собой просто N-ое количество друзей работающих за идею,
CMS все еще не доработана даже до beta-версии.

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

После еще одной бессонной ночи впустую, мой засыпающий мозг вспомнил о Delphi. О той старенькой 7-ой версии, которую машинально устанавливаю после каждого форматирования диска, но с которой, по сути, не работал уже лет пять или даже семь. (Кстати, думаю, в C++Builder все те же самые огурцы лежат, но лично не проверял.)

Там, на вкладке internet притаился компонент TWebBrowser, он является встроенным в Delphi экземпляром Internet Explorer-а, в котором уже есть так нужный мне интерпретатор javascript.

Как сделать (создать) бот программу(кликер)?

При этом мы получаем почти безграничную власть над этим творением Microsoft-а.

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

Дальше пойдут примеры кода, которые собирались еще в лохматые времена для Delphi 6 и я не уверен, что они будут работать на новых версиях. (в 7-ой версии работают точно)

Итак, перво-наперво, после размещения компонента TWebBrowser на форме, нам нужно загрузить в него страницу, для этого служит метод Navigate:
WebBrowser.Navigate(‘http://vvy.me’);

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

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

добавляем в uses модуть MSHTML
добавляем переменные:
WB_Doc : IHTMLDocument2; // В этой переменной будет хранится интерфейс взаимодействия со всем WebBrowser-ом WB_HTMLWindow : IHTMLWindow2; // А тут уже наше окно, с которым и работает javascript

и конечно кусок кода в процедуре onDocumentComplete
WebBrowser1.Document.QueryInterface(IHTMLDocument2, WB_Doc); WB_HTMLWindow := WB_Doc.parentWindow; if not Assigned(WB_HTMLWindow) then showmessage(‘авот фих тебе’) else showmessage(‘ все OK’);

Но на самом деле все немного сложнее, событие onDocumentComplete возникает при:

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

При этом во время возникновения события объект браузера может быть не доступен, но мы можем убедится в возможности взаимодействия с WebBrowser-ом по его свойству ReadyState, если все хорошо, то оно должно быть равно 4 или READYSTATE_COMPLETE, кому как нравится. Все остальные значения от 0 до 3 в нашем контексте мало интересны и лишь обозначают степень готовности WebBrowser-а к работе с ним.

Что бы добраться до html-кода страницы мы можем применить вот такую функцию:
function GetHtml(doc: IHtmlDocument2): string; var iDisp: IDispatch; iCollection: IHTMLElementCollection; begin result := »; iCollection := doc.all.Tags(‘HTML’) as IHTMLElementCollection; iDisp := iCollection.item(0, 0); result := (iDisp as IHTMLElement).outerHTML; end;

Хоть она и вернула все содержимое в виде одной строки, кодовые символы
в наличии, и все прекрасно загружается например в TMemo с переносом строк:
Memo.Lines.Add(GetHtml(WB_Doc));

Смертельный номер! Функция GetHtml вернет нам не просто html-код страницы, а код, в котором выполнились уже все скрипты, т.е вместо
<script language=»javascript»> document.write(‘Я работаю!’); </script>

Мы получим
<script language=»javascript»> document.write(‘Я работаю!’); </script> Я работаю!

И даже больше: мы можем обращаться к html-элементам страницы, например заполнять input-ты или отправлять формы средствами Delphi, но что б не курить мануалы еще и по этому вопросу я поступаю хитрее, а точнее выполняю javascript, например:
WB_HTMLWindow.execScript(‘alert(“Тадам!”)’, ‘javascript’);

Схема работы получается предельно простая (с примерами как получилось у меня):

Загружаем первую страницу
Например, код ссылки, в том виде как ее получил WebBrowser
<a>Далее</a>

Получаем цункцией GetHtml ее html-код с уже отработавшими скриптами
Наша ссылка получилась вот такой
<a onclick=»qwerty()»>Далее</a>

И малого того, что событие onclick задается в самом javascript, так еще и функцию qwerty явно прогнали через абсфукатор, но это нам не помешает
Регулярками вытаскиваем код из события onclick
qwerty()

С помощью .execScript запускаем событие onclick, вернее код из него
Из многочисленных событий onDocumentComplete ифом(if) выбираем то, в котором WebBrowser.ReadyState равно 4 и только тогда продолжаем работу.

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

И так по кругу

Кстати, в TWebBrowser частенько не выполняются правильно написанные скрипты, которые выполняются в обычном IE, в этом случае на экран выскакивает стандартное окошко об ошибке в javascript, с предложением запустить отладку. И, кроме того, что они мельтешат перед глазами, они еще иступарят нам весь компонент делая его не доступным до момента загрузки нового url-а, да и всю программу, подобно процедуре showmessage(). Это можно решить, назначив свойству Silent значение true. Оно поможет нам отключить все ошибки javascript в TWebBrowser, но оставит нам сообщения об ошибках взаимодействия с самим компонентом, что жизненно важно при отладке.

У TWebBrowser еще куча плюшек, но лично мне хватило перечисленных, а еще все это работает не только в компонентах WebBrowser, но и окнах Internet Explorer-а, достаточно получить указатель на окно программы и вперед!

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