Соедините мобильное приложение и Spark Core — международный проект IoT Day

Автор Джен Лупер

Это пятый ежегодный международный день Интернета вещей! Если вы не знакомы с этим всемирным празднованием всего сущего в Интернете, вы можете  узнать об этом здесь . Согласно этому веб-сайту, «настало время начать важные разговоры о технологиях, безопасности, конфиденциальности данных и огромном потенциале, на который способен« Интернет вещей »».

В духе демонстрации одной маленькой вещи, на которую способно устройство Интернета вещей, я подумал, что продемонстрирую, как подключить Spark Core к мобильному приложению. В этой демонстрации мы создадим очень простую игру «красный свет, зеленый свет». Удивите своих детей или, по крайней мере, развлеките свою кошку этими мигающими огнями с дистанционным управлением.

Вот что мы собираемся создать:

Почему Spark Core?

Spark Core, с его родственными устройствами Electron и Proton, являются продуктами  Spark.io . Ядро изначально было успешным продуктом Kickstarter и продавалось как плата Arduino с поддержкой Wi-Fi. Он поставляется с собственной IDE, где вы можете подключиться к ядру, написать код в стиле Arduino и «прошить» его на Spark через WiFi. Управлять ядром очень просто, так как его можно обновлять удаленно; Вам не нужно отключать устройство и подключать его к компьютеру, чтобы обновить его. Он также имеет тесную интеграцию с Cylon.js , который мы также будем использовать для этой демонстрации.

Настройте Spark Core

Если вы использовали свое Spark Core для различных  проектов , возможно, у вас уже был «прошит» код на устройство. Для удаленного использования вашего ядра вы должны очистить его и вернуть в заводской режим. Для этого следуйте инструкциям  здесь,  чтобы перевести ядро ​​в «режим прослушивания». Используйте мобильное приложение, которое доступно для вашего ядра, чтобы сбросить его.

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

Окончательный проводной проект будет выглядеть так:

Подключите светодиоды и макет

Для нашей маленькой игры мы собираемся подключить два светодиода, один красный и один зеленый. Хороший способ спланировать свою проводную стратегию — использовать  диаграмму Fritzing . Для этого проекта используйте эту готовую схему Fritzing, чтобы получить правильную проводку.

Диаграмма предоставлена ​​Spark.io

Вместе с Spark Core вам понадобятся три  соединительных кабеля «мужчина-мужчина» , два  резистора по 1 кОм ,  макетная плата  (чтобы вам не пришлось беспокоиться о пайке) и  красные и зеленые светодиоды .

Я обнаружил, что  SideKick Basic Arduino Kit , доступный в Radio Shack, неоценим в моих проектах по взлому аппаратного обеспечения, но вы можете найти хорошее оборудование на таких сайтах, как  Adafruit  или собственный магазин Spark.io  .

Установите Cylon.js

Теперь нам нужно запустить небольшой install-fest, чтобы запустить и запустить Cylon.js и использовать его в мобильном приложении. Cylon.js  был создан теми же хорошими людьми, которые создали  KidsRuby  и другие библиотеки робототехники для Ruby и Go. Чтобы установить Cylon.js для Spark, следуйте инструкциям по установке  здесь . Поскольку это модуль npm, на вашем компьютере должны быть установлены Node.js и npm, после чего вы можете установить cylon и cylon-spark:

npm install -g cylon cylon-spark

Cylon.js очень интересен, поскольку он позволяет нам взаимодействовать с роботами и устройствами IoT с помощью JavaScript. Это универсальный магазин для устройств IoT на базе JS, и это здорово! Хотя он зависит от Node.js, он также доступен, по крайней мере частично, для гибридных мобильных приложений на основе Cordova, таких как то, которое я предлагаю создать.

Используя модуль Browserify npm, мы можем запустить Cylon.js в нашем приложении. Cylon предлагает ограниченную поддержку большого количества IoT-платформ, которые можно «просмотреть» и запустить в мобильном приложении: список этих платформ доступен  здесь . К счастью для нас, Spark — одна из таких платформ! Итак, давайте начнем «Browserifying» нашу реализацию Cylon.

Примечание. Spark.io предлагает собственную библиотеку SparkJS, с помощью которой вы можете напрямую взаимодействовать со своим устройством Spark. Я решил использовать Cylon.js, потому что я хочу использовать его для других устройств IoT и потому что он поддерживает использование в мобильных приложениях из коробки. Изучение SparkJS в моем списке интересных вещей, которые стоит попробовать с Spark Core, однако!

Browserify

Теперь вам нужно установить модуль Browserify npm, если у вас его нет:

npm install -g browserify

Browserify  — это удобный инструмент, который позволяет вам запрашивать модули в браузере, объединяя все необходимые зависимости в один файл, который вы можете использовать в своем приложении.

После установки войдите в свою учетную запись на Spark.io и получите токен доступа Spark Core из меню:

Также запишите идентификатор устройства, которое вы используете:

Далее нам нужно создать скрипт для «browserify».

var Cylon = require('cylon');

var robot = Cylon.robot({

  connections: {
    spark: { adaptor: 'spark', accessToken: 'my-access-token', deviceId: 'my-device-id' }
  },

  devices: {
    red: { driver: 'led', pin: 'D0'},
    green: { driver: 'led', pin: 'D1'}
  },

  work: function(my) {
    //start with both lights off
    my.red.turnOff()
    my.green.turnOff()   
  },

  lightUp: function(color) {
    if (color === "green"){
      robot.devices.red.turnOff()
      robot.devices.green.turnOn()
    }
    else {
      robot.devices.green.turnOff()
      robot.devices.red.turnOn()
    }
  }


}).start();

$( "#redBtn" ).click(function() {
      robot.commands.lightUp("red");
});
$( "#greenBtn" ).click(function() {
      robot.commands.lightUp("green");
});

browserify -r cylon-spark -r cylon-gpio spark-script.js > browser_script.js

npm install -g appbuilder

appbuilder simulate

browserify -r cylon-spark -r cylon-gpio spark-script.js > scripts/browser_script.js

<script src="scripts/browser_script.js"></script>

var robot = Cylon.robot({
//snip
}).start();

$( "#redBtn" ).click(function() {
      robot.commands.lightUp("red");
});
$( "#greenBtn" ).click(function() {
      robot.commands.lightUp("green");
});