Espruino:Примеры/BLE и сервис If This Then That: различия между версиями

Материал из Онлайн справочника
Перейти к навигацииПерейти к поиску
(Новая страница: «{{Espruino/Панель перехода}} {{Перевод от Сubewriter}} {{Myagkij-редактор}} =<ref>[ www.espruino.com - ]</ref>= <syntaxhighligh...»)
 
Нет описания правки
Строка 3: Строка 3:
{{Myagkij-редактор}}
{{Myagkij-редактор}}


=<ref>[ www.espruino.com - ]</ref>=
=BLE и сервис If This Then That <ref>[https://www.espruino.com/BLE+IFTTT www.espruino.com - Bluetooth LE and If This Then That]</ref>=


В сервисе [https://ifttt.com/ If This Then That] есть [https://ifttt.com/maker_webhooks апплет Maker], упрощающий взаимодействие (например активацию) с устройствами через интернет.


<syntaxhighlight lang="javascript" enclose="div">
Если вы используете [[Espruino-устройство]], [https://www.espruino.com/Internet подключенное напрямую к интернету], вам нужно будет всего лишь вызвать специальный URL (позже мы расскажем, как это сделать).
Но при использовании [[Puck.js]] вам понадобится '''«мост»''' – нечто, что будет принимать сообщения по [[BLE]] и превращать их в веб-страничные запросы в интернете.


== Получение URL-ссылки IFTT ==
* Создаем аккаунт в [https://ifttt.com/ If This Then That].
* В правом верхнем углу кликаем на '''New Applet'''.
* Кликаем на '''+this''', ищем '''Webhooks''' и кликаем на него.
* Кликаем на '''Receive a web request'''.
* Вводим '''«puck_pressed»''' в поле для названия события.
* Кликаем на '''+that''' и выбираем задачу, которую надо выполнить. Возможно, '''email''', чтобы отправить самому себе электронное письмо.
* Прокликиваем через оставшиеся страницы и кликаем на '''Finish'''.
* Теперь, чтобы найти [[URL]], переходим в [https://ifttt.com/maker_webhooks эпплет Maker].
* Справа вверху кликаем на '''Settings'''.
* Сервис покажет [[URL]] вроде: '''«https://maker.ifttt.com/use/jghfJHGFhjkgHJKGjhgJHgkHfRDhgfKJtfrjgh»'''
* Копируем этот [[URL]] и вставляем в адресную строку браузера
* Вверху будет показано [[URL]] вроде '''«https://maker.ifttt.com/trigger/{event}/with/key/jghfJHGFhjkgHJKGjhgJHgkHfRDhgfKJtfrjgh»'''
* Заменяем '''{event}''' на '''puck_pressed''' (который ввели ранее) и получаем [[URL]] вроде:
'''https://maker.ifttt.com/trigger/puck_pressed/with/key/jghfJHGFhjkgHJKGjhgJHgkHfRDhgfKJtfrjgh'''
Это то, что вам нужно будет скопировать и вставить ниже. Или же этот [[URL]] можно будет использовать для доступа, если вы используете [[Espruino-плату]], подключенную к интернету.
== HTML-код ==
Создаем веб-страницу, содержащую код ниже. Её нужно будет хостить на [[HTTPS]].
О том, как это делать, можно прочесть, например, [https://www.espruino.com/Web%20Bluetooth тут].
<syntaxhighlight lang="html5" enclose="div">
<html>
<head>
  <title>IFTTT Web Bluetooth Example</title>
</head>
<body>
  <pre id="log"></pre>
  <button>Click here to start</button><br/>
  <iframe id="ifttt" style="width:640px;height:32px"></iframe>
  <script src="https://www.puck-js.com/puck.js"></script>
  <script type="text/javascript">
    // ------------------------------------- ЗАМЕНИ МЕНЯ
    var URL = "https://maker.ifttt.com/trigger/puck_pressed/with/key/jghfJHGFhjkgHJKGjhgJHgkHfRDhgfKJtfrjgh";
    // ------------------------------------- ЗАМЕНИ МЕНЯ
    var button = document.getElementsByTagName('button')[0];
    var logelement = document.getElementById('log');
    var iftttRequests = 0;
    function log(txt) {
      logelement.innerHTML += txt+"\n";
    }
    function ifttt() {
      document.getElementById('ifttt').src = URL+"?"+iftttRequests;
      iftttRequests++;
    }
    // Вызывается, когда мы получаем строчку данных:
    function onLine(v) {
      log("Получили: "+JSON.stringify(v));
      if (v.indexOf("Pressed")>=0) {
        log("Вызываем IFTTT");
        ifttt();
      }
    }
    // После клика подключаемся или отключаемся:
    var connection;
    button.addEventListener("click", function() {
      if (connection) {
        log("Отключаем соединение");
        connection.close();
        connection = undefined;
      }
      log("Создаем соединение");
      Puck.connect(function(c) {
        if (!c) {
          log("Подключиться не удалось!");
          return;
        }
        log("Подключение...");
        connection = c;
        // Обрабатываем полученные данные
        // и вызываем online() каждый раз, когда получаем строчку:
        var buf = "";
        connection.on("data", function(d) {
          buf += d;
          var i = buf.indexOf("\n");
          while (i>=0) {
            onLine(buf.substr(0,i));
            buf = buf.substr(i+1);
            i = buf.indexOf("\n");
          }
        });
        // Сначала выполняем сброс Puck.js.
        connection.write("\x10reset();\n", function() {
          // Ждем, пока Puck.js выполнит сброс.
          setTimeout(function() {
            // Теперь даём Puck.js команду
            // передавать по Bluetooth текущие данные о яркости
            // 10 раз в секунду.
connection.write("\x10setWatch(function(){Bluetooth.println('Нажата');},BTN,{repeat:true,debounce:50,edge:'rising'});\n",
              function() { log("Готово!"); });
          }, 1500);
        });
      });
    });
  </script>
</body>
</html>
</syntaxhighlight>
</syntaxhighlight>
Осталось кликнуть на '''Click here to start''' – теперь, когда вы будете нажимать на кнопку на [[Puck.js]], это будет вызывать IFTT.
'''Примечание:''' Если вы веб-разработчик, вам наверняка захочется сделать так, чтобы код выше использовал AJAX-запрос. Но, к сожалению, в IFTT нельзя задать заголовок '''Access-Control-Allow-Origin''', так что вам придется, скорее всего, использовать IFrame.


=См.также=
=См.также=

Версия от 22:36, 28 февраля 2021

Перевод: Максим Кузьмин
Проверка/Оформление/Редактирование: Мякишев Е.А.


BLE и сервис If This Then That [1]

В сервисе If This Then That есть апплет Maker, упрощающий взаимодействие (например активацию) с устройствами через интернет.

Если вы используете Espruino-устройство, подключенное напрямую к интернету, вам нужно будет всего лишь вызвать специальный URL (позже мы расскажем, как это сделать). Но при использовании Puck.js вам понадобится «мост» – нечто, что будет принимать сообщения по BLE и превращать их в веб-страничные запросы в интернете.

Получение URL-ссылки IFTT

  • Создаем аккаунт в If This Then That.
  • В правом верхнем углу кликаем на New Applet.
  • Кликаем на +this, ищем Webhooks и кликаем на него.
  • Кликаем на Receive a web request.
  • Вводим «puck_pressed» в поле для названия события.
  • Кликаем на +that и выбираем задачу, которую надо выполнить. Возможно, email, чтобы отправить самому себе электронное письмо.
  • Прокликиваем через оставшиеся страницы и кликаем на Finish.
  • Теперь, чтобы найти URL, переходим в эпплет Maker.
  • Справа вверху кликаем на Settings.
  • Сервис покажет URL вроде: «https://maker.ifttt.com/use/jghfJHGFhjkgHJKGjhgJHgkHfRDhgfKJtfrjgh»
  • Копируем этот URL и вставляем в адресную строку браузера
  • Вверху будет показано URL вроде «https://maker.ifttt.com/trigger/{event}/with/key/jghfJHGFhjkgHJKGjhgJHgkHfRDhgfKJtfrjgh»
  • Заменяем {event} на puck_pressed (который ввели ранее) и получаем URL вроде:

https://maker.ifttt.com/trigger/puck_pressed/with/key/jghfJHGFhjkgHJKGjhgJHgkHfRDhgfKJtfrjgh

Это то, что вам нужно будет скопировать и вставить ниже. Или же этот URL можно будет использовать для доступа, если вы используете Espruino-плату, подключенную к интернету.

HTML-код

Создаем веб-страницу, содержащую код ниже. Её нужно будет хостить на HTTPS.

О том, как это делать, можно прочесть, например, тут.

<html>
 <head>
   <title>IFTTT Web Bluetooth Example</title>
 </head>
 <body>
  <pre id="log"></pre>
  <button>Click here to start</button><br/>
  <iframe id="ifttt" style="width:640px;height:32px"></iframe>
  <script src="https://www.puck-js.com/puck.js"></script>
  <script type="text/javascript">
    // ------------------------------------- ЗАМЕНИ МЕНЯ
    var URL = "https://maker.ifttt.com/trigger/puck_pressed/with/key/jghfJHGFhjkgHJKGjhgJHgkHfRDhgfKJtfrjgh";
    // ------------------------------------- ЗАМЕНИ МЕНЯ
    var button = document.getElementsByTagName('button')[0];
    var logelement = document.getElementById('log');
    var iftttRequests = 0;
    function log(txt) {
      logelement.innerHTML += txt+"\n";
    }

    function ifttt() {
      document.getElementById('ifttt').src = URL+"?"+iftttRequests;
      iftttRequests++;
    }

    // Вызывается, когда мы получаем строчку данных:
    function onLine(v) {
      log("Получили: "+JSON.stringify(v));
      if (v.indexOf("Pressed")>=0) {
        log("Вызываем IFTTT");
        ifttt();
      }
    }

    // После клика подключаемся или отключаемся:
    var connection;
    button.addEventListener("click", function() {
      if (connection) {
        log("Отключаем соединение");
        connection.close();
        connection = undefined;
      }
      log("Создаем соединение");
      Puck.connect(function(c) {
        if (!c) {
          log("Подключиться не удалось!");
          return;
        }
        log("Подключение...");
        connection = c;
        // Обрабатываем полученные данные
        // и вызываем online() каждый раз, когда получаем строчку:
        var buf = "";
        connection.on("data", function(d) {
          buf += d;
          var i = buf.indexOf("\n");
          while (i>=0) {
            onLine(buf.substr(0,i));
            buf = buf.substr(i+1);
            i = buf.indexOf("\n");
          }
        });
        // Сначала выполняем сброс Puck.js.
        connection.write("\x10reset();\n", function() {
          // Ждем, пока Puck.js выполнит сброс.
          setTimeout(function() {
            // Теперь даём Puck.js команду 
            // передавать по Bluetooth текущие данные о яркости
            // 10 раз в секунду.
connection.write("\x10setWatch(function(){Bluetooth.println('Нажата');},BTN,{repeat:true,debounce:50,edge:'rising'});\n",
              function() { log("Готово!"); });
          }, 1500);
        });
      });
    });
  </script>
 </body>
</html>

Осталось кликнуть на Click here to start – теперь, когда вы будете нажимать на кнопку на Puck.js, это будет вызывать IFTT.

Примечание: Если вы веб-разработчик, вам наверняка захочется сделать так, чтобы код выше использовал AJAX-запрос. Но, к сожалению, в IFTT нельзя задать заголовок Access-Control-Allow-Origin, так что вам придется, скорее всего, использовать IFrame.

См.также

Внешние ссылки