Начало работы с Arduino Web Editor на разных платформах

Начните программировать онлайн с помощью Arduino Web Editor, сохраняйте свои эскизы в облаке и всегда работайте в последней версии IDE.

Программное обеспечение

Для дальнейшей работы нам понадобится только онлайн среда разработки Ардуино:

• Arduino Web Editor

Эта онлайн версия стала очень серьезной альтернативой Arduino IDE, которая является десктопной версией среды разработки.

Arduino Web Editor и Платформа Создателей

Веб-редактор Arduino позволяет писать код и загружать эскизы на любую официальную плату Arduino с помощью веб-браузера (Chrome, Firefox, Safari и Edge). Мы рекомендуем вам использовать Google Chrome.

Эта IDE (интегрированная среда разработки) является частью Arduino Create, онлайн-платформы, которая позволяет разработчикам писать код, получать доступ к учебным пособиям, настраивать платы и обмениваться проектами. Официальное видео от создателей линейки этих плат:

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

Arduino Web Editor размещается в Интернете, поэтому приложение всегда в курсе новейших функций и поддерживает новые платы.

Эта среда разработки позволяет вам писать код и сохранять его в облаке, всегда резервируя его и делая доступным с любого устройства. Она автоматически распознает любую плату Arduino (Genuino), подключенную к вашему ПК, и настраивается соответствующим образом.

Аккаунт Arduino - это все, что вам нужно для начала работы.

Регистрируемся на arduino.cc

Создайте новую учетную запись на сайт arduino.cc по этой ссылке.

Заполните регистрационную форму, затем нажмите кнопку «Создать учетную запись» (англ. - Create Account). Вы получите электронное письмо со ссылкой для активации вашей учетной записи. Нажмите на ссылку и откроется новая страница с подтвержденной информацией вашего аккаунта.

Обратите внимание, что вы также можете использовать эту учетную запись, чтобы писать сообщения на официальном форуме arduino.cc, покупать товары в официальном интернет-магазине, добавлять комментарии в блог, а также создавать учебные пособия в Arduino Project Hub.

Вход в Arduino Web Editor

Как только вы успешно создали учетную записи, перейдите по ссылке create.arduino.cc/editor.

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

Выбор платформы: Windows, Mac или Linux

Arduino Web Editor может работать на различных платформах. Если вы используете Windows, Mac или Linux, выполните простой процесс установки плагина Arduino Web Editor (GitHub), который позволяет загружать эскизы из браузера на плату.

Если вы столкнулись с проблемой при установке плагина, то вы можете создать сообщение на форуме arduino.cc, где помогут решить вашу проблему. В конце процесса установки плагина вы будете перенаправлены на страницу входа.

Выбор платформы: Chrome OS

Есть 2 основных варианта использования приложения для Chrome.

1. В образовательной среде (Education Environment), если в вашем классе используются устройства с Chrome OS: для начала перейдите по этой ссылке и подпишитесь на план, который соответствует потребностям вашей школы. Планы начинаются от $0,20 за ученика в месяц.
2. Как частный пользователь, владеющий ChromeBook или ChromeBox (private user owning a ChromeBook or ChromeBox): вы можете установить приложение Arduino Create Chrome из Google App Store.

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

Составляющие Arduino Web Editor

После входа в систему вы готовы начать использовать Arduino Web Editor. Веб-приложение состоит из трех основных частей, назовем их столбцами.

Первый (1) столбец позволяет вам перемещаться между:

• Скетчбук (Sketchbook): коллекция всех ваших эскизов (так называемые "sketch" (скетч или эскиз) - это программы, которые вы загружаете на свою плату);
• Примеры (Examples): эскизы только для чтения, которые демонстрируют все основные команды Arduino (встроенная вкладка) и поведение ваших библиотек (на вкладке библиотеки);
• Библиотеки (Libraries): пакеты, которые могут быть включены в ваш эскиз, чтобы обеспечить дополнительные функциональные возможности;
• Последовательный монитор (Serial monitor): функция, которая позволяет вам получать и отправлять данные на вашу плату через USB-кабель;
• Помощь (Help): полезные ссылки и словарь терминов Arduino;
• Предпочтения (Preferences): параметры для настройки внешнего вида и поведения вашего редактора, такие как размер текста и цветовая тема.

При выборе каждый пункт меню показывает свои параметры на боковой панели (второй (2) столбец).

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

Заставляем светодиод мигать из браузера

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

Дважды проверьте, отображается ли веб-редактор так, как вам нравится, проверьте на панели «Настройки» (Preferences) несколько параметров.

Подключите плату Arduino или Genuino к вашему компьютеру.

Платы и последовательные порты автоматически обнаруживаются и выбираются одним раскрывающимся списком. Выберите из списка плату Arduino / Genuino, на которую вы хотите загрузить эскиз.

Давайте попробуем пример.

1. Выберите «Примеры» (Examples) в меню слева,
2. Затем «Основные» (Basic),
3. Далее «Мигать» (Blink).

Эскиз Blink теперь отображается в области кода.

void setup() {
  pinMode(LED_BUILTIN, OUTPUT);
}

void loop() {
  digitalWrite(LED_BUILTIN, HIGH);
  delay(1000);
  digitalWrite(LED_BUILTIN, LOW);
  delay(1000);
}

Чтобы загрузить его на свою плату, нажмите кнопку «Загрузить» (Upload, стрелка вправо) рядом с раскрывающимся списком.

Ярлык «Занят» (BUSY) заменяет кнопки во время проверки и загрузки кода. Если загрузка прошла успешно, в нижней области вывода появится сообщение «Успешно: загрузка завершена» (Success: Done uploading).

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

Если это так, поздравляю! Вы успешно запрограммировали свою плату на мигание ее встроенного светодиода!

Иногда ваш Arduino уже запрограммирована эскизом Blink. В этом случае измените время задержки (delay), изменив число в скобках на 100 и снова загрузите эскиз Blink на плату. Теперь светодиод должен мигать намного быстрее.

Поддерживаемые платы

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

В настоящее время поддерживаются только официальные платы Arduino или Genuino, в также несколько сертифицированных плат и плат AtHeart. Вы можете найти полный список поддерживаемых плат, нажав на выпадающий список плат и нажав «Выбрать другую плату и порт» (Select Other Board and Port).

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

Полный список поддерживаемого оборудования отображается во всплывающем окне. Создатели постоянно работают над расширением этого списка.

Последовательный монитор

В онлайн-редакторе Arduino последовательный монитор доступен на боковой панели, при щелчке по нему отображается панель.

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

Если вы хотите что-то напечатать и познакомиться с Serial Monitor, вы можете попробовать:

 Examples -> 03.Analog -> AnalogInOutSerial

const int analogInPin = A0;
const int analogOutPin = 9;

int sensorValue = 0;
int outputValue = 0;

void setup() {
  Serial.begin(9600);
}

void loop() {
  sensorValue = analogRead(analogInPin);
  outputValue = map(sensorValue, 0, 1023, 0, 255);
  analogWrite(analogOutPin, outputValue);

  Serial.print("sensor = ");
  Serial.print(sensorValue);
  Serial.print("\t output = ");
  Serial.println(outputValue);

  delay(2);
}

Нажмите Загрузить (Upload) и посмотрите значения, напечатанные на панели.

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

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

Если вы используете другие программы, которые обмениваются данными через этот порт (например, Processing или Desktop IDE), появится сообщение о том, что порт используется другим программным обеспечением.

Если вы хотите использовать порт с другим программным обеспечением или просто хотите остановить поток выходных значений, вы можете нажать кнопку Отключить (Disconnect) на панели.

Документирование проектов

Документирование вашего проекта всегда отличная идея. Перейдите на панель «Примеры» (Examples) и выберите эскиз «Исчезать» (Fade).

int led = 9;
int brightness = 0;
int fadeAmount = 5;

void setup() {
  pinMode(led, OUTPUT);
}

void loop() {
  analogWrite(led, brightness);

  brightness = brightness + fadeAmount;

  if (brightness <= 0 || brightness >= 255) {
    fadeAmount = -fadeAmount;
  }
  delay(30);
}

Откройте вкладку «layout.png» и «schematic.png». Иллюстрации покажут вам, как собрать вашу схему.

Когда вы работаете над своими собственными проектами, вы можете добавить свои собственные изображения в документацию, щелкнув последнюю вкладку в области кода и выбрав «Импортировать файл в эскиз» (Import File into Sketch).

Делимся своими скетчами

Каждый созданный вами эскиз имеет уникальный URL, похожий на Google Docs. Нажмите кнопку «Поделиться» (Share) и скопируйте предоставленный URL в новую вкладку браузера, чтобы проверить его.

Если вы дадите кому-нибудь URL-адрес, он сможет увидеть ваш код, добавить его копию в свою книгу Sketchbook в облаке или скачать его.

Если вы напишите урок на Project Hub и добавите ссылку в раздел «Программное обеспечение» (Software), ваш код будет встроен и всегда будет оставаться актуальным.

Создатели рассматривают Arduino Sketch как блок, который включает в себя всё необходимое для воплощения идеи в жизнь. Когда кто-то поделится с вами эскизом, вы оба получите доступ к коду, макету для электроники, а также к полному уроку (при его наличии). Это предоставит вам возможность создания собственного проекта на основе оригинального.

Вы даже можете встроить свой эскиз в веб-страницу, скопировав код в окне «Поделиться».

Библиотеки и Arduino Web Editor

Сообщество Arduino написало более 700 библиотек, которые вы можете включить в свои эскизы, не устанавливая ничего. Вы можете просмотреть их все в Диспетчере библиотек (Library Manager) и выбрать те, которые вам нравятся больше всего.

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

Все предоставленные библиотеки находятся на серверах создателей Arduino Create. Если вы используете их и делитесь своим эскизом с кем-нибудь, то они могут просто добавить копию вашего кода в свой альбом и скомпилировать его.

Совместное использование скетча и связанных с ним библиотек может быть достаточно неудобным, что решается с помощью онлайн-редактора. Кроме того процесс разработки однозначно ускорится. Попробуйте, например, "Thermostat Bot" (ссылка), в котором используются различные предоставляемые библиотеки.

Но что, если вы хотите выбрать конкретную версию библиотеки? Ищите ее в Менеджере Библиотек и добавьте в избранное.

Она появится на вкладке «Избранное» (Favorite) на панели «Библиотеки» (Libraries). Оттуда вы можете выбрать конкретную версию и включить ее в свой эскиз.

Создатели добавили метаданные в эскиз с номером версии, чтобы можно было сообщить Arduino Builder версию, которая вам действительно нужна.

При создании эскиза всегда сначала идут пользовательские библиотеки, затем избранные и, наконец, встроенные библиотеки Arduino.

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

Но что, если вы хотите использовать свою собственную пользовательскую библиотеку в Arduino Web IDE? Просто заархивируйте свою пользовательскую библиотеку и нажмите кнопку «Импорт» (Import) на панели «Библиотека» (Library).

Если вы хотите импортировать несколько пользовательских библиотек одновременно, вы можете сделать это, создав один zip-файл, который содержит их все, и просто импортируйте его.

Все изображения принадлежат проекту arduino.cc - официальному сайту плат Ардуино.