Espruino:Примеры/Добавление приложения в загрузчик приложений Bangle.js

Содержание

Резерв

Справочник по API

Модули

Примеры

Резерв

Резерв

Резерв

Резерв

Резерв

Перевод: Максим Кузьмин

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

Добавление приложения в загрузчик приложений Bangle.js

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

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

Создание ответвления (форка)

Первый шаг – это создание «форка» загрузчика приложений Bangle.js (т.е. создание вашей собственной копии):

• Перейдите в GitHub-репозиторий BangleApps.
• Зарегистрируйтесь/залогиньтесь в GitHub (справа вверху страницы).
• Кликните на кнопку Fork справа вверху репозитория BangleApps.

Включение GitHub Pages

Теперь давайте включим сервис GitHub Pages, который позволит просматривать и использовать вашу собственную копию репозитория:

• Нажмите на Settings вверху.
• Пролистайте вниз до пункта GitHub Pages.
• В меню Source выберите пункт master и нажмите на кнопку Save.
• Страница обновится, а в разделе GitHub Pages появится вот такое сообщение:

Your site is ready to be published at https://ваш_никнейм.github.io/BangleApps

• Перейдите по ссылке https://ваш_никнейм.github.io/BangleApps, после чего должна открыться копия вашего собственного загрузчика приложений.

Примечание: Вы можете хостить загрузчик приложений сами, но это нужно делать с помощью HTTPS-сервера (не HTTP), чтобы мог работать Web Bluetooth.

Добавление своего приложения

Если вы прошли руководство «Первое приложение для Bangle.js (таймер)», то у вас уже должно быть приложение с ID «timer», так что давайте им и воспользуемся. Нам нужно создать новую папку с таким же названием в папке «apps».

Вот пример того, как может выглядеть эта папка.

Опытные GitHub-разработчики наверняка знают, как клонировать репозиторий на свой локальный компьютер, но если вы не хотите или не знаете, как это сделать, то это можно сделать и онлайн:

• Перейдите в свой репозиторий BangleApps по ссылке https://github.com/ваш_никнейм/BangleApps
• Кликните на папку «apps»
• Кликните на кнопку Add file, а потом на Create new file
• Теперь впишите в названии файла «timer/app.js» и скопируйте JavaScript-код приложения в окно редактора. Если кода нет, и вы просто хотите попробовать что-нибудь, напишите:

E.showMessage("My\nSimple\nApp","My App")

• Теперь кликните на кнопку Commit new file
• Откроется новое окно с папкой «BangleApps/apps/timer». Давайте добавим иконку приложения
• В руководстве «Первое приложение для Bangle.js (таймер)» мы загрузили для иконки 48-пиксельный PNG-файл, так что давайте им и воспользуемся
• Переименуйте этот файл на ПК на «app.js» (в GitHub нет возможности переименовывать файлы)
• Будучи в папке «BangleApps/apps/timer», кликните на Add file > Upload files, загрузите файл и кликните на Commit Changes

Теперь нам надо загрузить иконку, но в том виде, который будет понятен Bangle.js.

• Откройте конвертер изображений
• Нажмите на кнопку «Выберите файл» и загрузите файл «app.png»
• Поставьте галочки рядом с пунктами Use Compression и Transparency
• Задайте в меню Colours пункт 4 bit Mac Palette и посмотрите на превью. Если вам не понравилась эта цветовая палитра, выберите пункт 8 bit Web Palette (но, если возможно, лучше остановиться на 4 bit Mac Palette, т.к. эта настройка требует в два раза меньше памяти, чем 8 bit Web Palette)
• В меню Output As выберите настройку Image String
• Внизу должен появиться текст вроде var img = E.toArrayBuffer(atob("...")). Выделите и скопируйте только часть с E.toArrayBuffer(atob("...")) – без части var img =.
• Вернитесь на GitHub в папку «BangleApps/apps/timer» и создайте новый файл под названием «app-icon.js» с кодом E.toArrayBuffer(atob("...")), который скопировали выше, а затем кликните на Commit new File.

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

Наконец, давайте добавим описание нашего приложения. Например, такое.

• Вернитесь в корневую директорию репозитория BangleApps
• Кликните на файл «apps.json»
• Кликните на маленькую иконку с карандашом справа вверху – это включит режим редактирования
• Теперь пролистайте вниз и добавьте в конец файла следующее:

},
{ "id": "timer",
  "name": "My Timer App",
  "shortName":"My Timer",
  "icon": "app.png",
  "version":"0.01",
  "description": "Это описание для моего приложения-таймера",
  "tags": "",
  "storage": [
    {"name":"timer.app.js","url":"app.js"},
    {"name":"timer.img","url":"app-icon.js","evaluate":true}
  ]
}
]

Более подробно о формате этого файла читайте тут.

Очень важно добавить дополнительную запятую в конце последнего элемента JSON-кода (как в первой строчке выше).

• Теперь кликните на Commit Changes и готово!

Примечание: Если вы работаете с локальной копией GitHub-репозитория, то можете запустить файл «bin/sanitycheck.js», который быстро проверит описание вашего приложения на предмет того, всё ли там нормально (иконки, код и т.д.).

Использование нового приложения

• Вернитесь в свой репозиторий BangleApps по ссылке https://ваш_никнейм.github.io/BangleApps (не забудьте поменять фрагмент «ваш_никнейм» на свой никнейм в GitHub)
• Там должно быть приложение My Timer App – кликните на кнопку загрузки рядом с ним
• Теперь нажмите на кнопку BTN3 на Bangle.js и откройте лаунчер – ваше приложение будет там!

Примечание: Если загрузчик приложений не работает, то скорее всего это из-за ошибки в файле «apps.json», который вы редактировали ранее.

Документация о вашем приложении

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

Чтобы добавить эту документацию так, чтобы её потом было легко и просто найти из загрузчика приложений, нужно создать файл «README.md» (файл на языке Markdown) в папке нашего приложения.

Затем добавляем в JSON-файле описания вот это:

"readme":"README.md",

Теперь, когда кто-то найдёт ваше приложение в загрузчике приложений, он также увидит гиперссылку «Read more...» («Читать далее...»). Если кликнуть на неё, это откроет окно с вашей документацией.

Внесение изменений

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

• Добавьте файл под названием «BangleApps/apps/timer/ChangeLog» – он должен выглядеть примерно так:

0.01: Новое приложение! 0.02: Исправлен баг с отсчётом 0.03: Добавлен более красивый текст!

Отредактируйте строчку "version":"0.01" в файле «apps.json», чтобы она соответствовала последнему номеру версии в файле-чейнжлоге.

Как предложить своё приложение на главный загрузчик приложений Bangle.js

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

Разработчики Bangle.js пишут, что стараются принимать все присылаемые им приложения, но это по очевидным причинам не касается неисправных приложений и приложений, которые не подходят для детей. Но ваши приложения всегда можно будет загрузить из вашего собственного загрузчика приложений по ссылке https://ваш_никнейм.github.io/BangleApps.

• В своей копии главного репозитория (https://github.com/ваш_никнейм/BangleApps) кликните на Pull request справа вверху
• Пролистайте вниз, чтобы посмотреть, какие файлы были изменены и добавлены, и убедитесь, что всё нормально
• Если всё в порядке, кликайте на Create Pull Request
• На следующей странице напишите короткий заголовок в поле Title и описание на вкладке Write, чтобы разработчики примерно понимали, что это за приложение
• Кликните на Create pull request

Это создаст запрос на публикацию вашего приложения и покажет жёлтый текст «Some checks haven’t completed yet» («Некоторые проверки ещё не выполнены»).

Разработчики применяют ко всем предлагаемым приложениям скрипт «bin/sanitycheck.js» при помощи Travis CI. Это помогает быстро оценить, всё ли в порядке, но не сможет выловить баги в вашем приложении, а лишь убедится, что загрузчик приложений работает нормально.

Через какое-то время жёлтый текст должен смениться на зелёный текст «All checks have passed» («Все проверки пройдены») или «Checks failed» («Проверки не пройдены»). Если проверки не были пройдены, ваше приложение в таком состоянии одобрено не будет, но вы всегда можете кликнуть на Show all Checks > Details и посмотреть, какие были допущены ошибки. Если вы исправите их в своём репозитории, статус проверок будет обновлён.

Дополнительные материалы

По этой ссылке можно найти большое количество руководств по Bangle.js.

Пример формата приложений и JSON-файлов смотрите в README-файле загрузчика приложений Bangle.js.