Espruino:Примеры/Добавление приложения в загрузчик приложений Bangle.js: различия между версиями
Материал из Онлайн справочника
Перейти к навигацииПерейти к поиску
Myagkij (обсуждение | вклад) |
Myagkij (обсуждение | вклад) Нет описания правки |
||
| Строка 7: | Строка 7: | ||
Если у вас есть приложение (созданное, например, с помощью [https://www.espruino.com/Bangle.js+First+App этого руководства]), то вы, возможно, захотите добавить его в [https://banglejs.com/apps/ загрузчик приложений Bangle.js], чтобы его могли установить и другие пользователи. | Если у вас есть приложение (созданное, например, с помощью [https://www.espruino.com/Bangle.js+First+App этого руководства]), то вы, возможно, захотите добавить его в [https://banglejs.com/apps/ загрузчик приложений Bangle.js], чтобы его могли установить и другие пользователи. | ||
Примечание: Чтобы максимально упростить ситуацию с копирайтом, GitHub-репозиторий [https://github.com/espruino/BangleApps BangleApps] и весь код в нём распространяются по лицензии MIT. Поэтому, предлагая своё приложение, вы автоматически соглашаетесь, что ваш код тоже будет распространяться по [https://ru.wikipedia.org/wiki/Лицензия_MIT лицензии MIT], так что вам нужно будет убедиться, что в вашем приложении нет никаких данных или изображений, защищённых копирайтом (на которые у вас нет права бесплатного распространения). | Примечание: Чтобы максимально упростить ситуацию с копирайтом, GitHub-репозиторий [https://github.com/espruino/BangleApps BangleApps] и весь код в нём распространяются по лицензии [[MIT]]. Поэтому, предлагая своё приложение, вы автоматически соглашаетесь, что ваш код тоже будет распространяться по [https://ru.wikipedia.org/wiki/Лицензия_MIT лицензии MIT], так что вам нужно будет убедиться, что в вашем приложении нет никаких данных или изображений, защищённых копирайтом (на которые у вас нет права бесплатного распространения). | ||
==Создание ответвления (форка)== | ==Создание ответвления (форка)== | ||
Первый шаг – это создание «форка» загрузчика приложений Bangle.js (т.е. создание вашей собственной копии): | Первый шаг – это создание ''«форка»'' загрузчика приложений [[Bangle.js]] (т.е. создание вашей собственной копии): | ||
* Перейдите в GitHub-репозиторий [https://github.com/espruino/BangleApps BangleApps]. | * Перейдите в GitHub-репозиторий [https://github.com/espruino/BangleApps BangleApps]. | ||
* Зарегистрируйтесь/залогиньтесь в GitHub (справа вверху страницы). | * Зарегистрируйтесь/залогиньтесь в GitHub (справа вверху страницы). | ||
* Кликните на кнопку Fork справа вверху репозитория BangleApps. | * Кликните на кнопку '''Fork''' справа вверху репозитория '''BangleApps'''. | ||
== Включение GitHub Pages == | == Включение GitHub Pages == | ||
Теперь давайте включим сервис GitHub Pages, который позволит просматривать и использовать вашу собственную копию репозитория: | Теперь давайте включим сервис '''GitHub Pages''', который позволит просматривать и использовать вашу собственную копию репозитория: | ||
* Нажмите на Settings вверху. | * Нажмите на '''Settings''' вверху. | ||
* Пролистайте вниз до пункта GitHub Pages. | * Пролистайте вниз до пункта '''GitHub Pages'''. | ||
* В меню Source выберите пункт master и нажмите на кнопку Save. | * В меню '''Source''' выберите пункт '''master''' и нажмите на кнопку '''Save'''. | ||
* Страница обновится, а в разделе GitHub Pages появится вот такое сообщение: | * Страница обновится, а в разделе '''GitHub Pages''' появится вот такое сообщение: | ||
<syntaxhighlight lang="javascript" enclose="div"> | <syntaxhighlight lang="javascript" enclose="div"> | ||
| Строка 30: | Строка 30: | ||
* Перейдите по ссылке https://ваш_никнейм.github.io/BangleApps, после чего должна открыться копия вашего собственного загрузчика приложений. | * Перейдите по ссылке https://ваш_никнейм.github.io/BangleApps, после чего должна открыться копия вашего собственного загрузчика приложений. | ||
Примечание: Вы можете хостить загрузчик приложений сами, но это нужно делать с помощью HTTPS- | '''Примечание:''' Вы можете хостить загрузчик приложений сами, но это нужно делать с помощью [[HTTPS-сервер]]а (не [[HTTP]]), чтобы мог работать [[Web Bluetooth]]. | ||
== Добавление своего приложения == | == Добавление своего приложения == | ||
Если вы прошли [https://www.espruino.com/Bangle.js+First+App руководство «Первое приложение для Bangle.js (таймер)»], то у вас уже должно быть приложение с ID «timer», так что давайте им и воспользуемся. Нам нужно создать новую папку с таким же названием в папке «apps». | Если вы прошли [https://www.espruino.com/Bangle.js+First+App руководство «Первое приложение для Bangle.js (таймер)»], то у вас уже должно быть приложение с [[ID]] ''«timer»'', так что давайте им и воспользуемся. Нам нужно создать новую папку с таким же названием в папке ''«apps»''. | ||
[https://github.com/espruino/BangleApps/tree/master/apps/_example_app Вот] пример того, как может выглядеть эта папка. | [https://github.com/espruino/BangleApps/tree/master/apps/_example_app Вот] пример того, как может выглядеть эта папка. | ||
Опытные GitHub-разработчики наверняка знают, как клонировать репозиторий на свой локальный компьютер, но если вы не хотите или не знаете, как это сделать, то это можно сделать и онлайн: | Опытные [[GitHub]]-разработчики наверняка знают, как клонировать репозиторий на свой локальный компьютер, но если вы не хотите или не знаете, как это сделать, то это можно сделать и онлайн: | ||
* Перейдите в свой репозиторий BangleApps по ссылке https://github.com/ваш_никнейм/BangleApps | * Перейдите в свой репозиторий '''BangleApps''' по ссылке https://github.com/ваш_никнейм/BangleApps | ||
* Кликните на папку «apps» | * Кликните на папку '''«apps»''' | ||
* Кликните на кнопку Add file, а потом на Create new file | * Кликните на кнопку '''Add file''', а потом на '''Create new file''' | ||
* Теперь впишите в названии файла «timer/app.js» и скопируйте JavaScript-код приложения в окно редактора. Если кода нет, и вы просто хотите попробовать что-нибудь, напишите: | * Теперь впишите в названии файла '''«timer/app.js»''' и скопируйте [[JavaScript]]-код приложения в окно редактора. Если кода нет, и вы просто хотите попробовать что-нибудь, напишите: | ||
<syntaxhighlight lang="javascript" enclose="div"> | <syntaxhighlight lang="javascript" enclose="div"> | ||
| Строка 48: | Строка 48: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
* Теперь кликните на кнопку Commit new file | * Теперь кликните на кнопку '''Commit new file''' | ||
* Откроется новое окно с папкой «BangleApps/apps/timer». Давайте добавим иконку приложения | * Откроется новое окно с папкой '''«BangleApps/apps/timer»'''. Давайте добавим иконку приложения | ||
* В [https://www.espruino.com/Bangle.js+First+App руководстве «Первое приложение для Bangle.js (таймер)»] мы загрузили для иконки 48-пиксельный PNG-файл, так что давайте им и воспользуемся | * В [https://www.espruino.com/Bangle.js+First+App руководстве «Первое приложение для Bangle.js (таймер)»] мы загрузили для иконки ''48''-пиксельный [[PNG]]-файл, так что давайте им и воспользуемся | ||
* Переименуйте этот файл на ПК на «app.js» (в GitHub нет возможности переименовывать файлы) | * Переименуйте этот файл на [[ПК]] на '''«app.js»''' (в [[GitHub]] нет возможности переименовывать файлы) | ||
* Будучи в папке «BangleApps/apps/timer», кликните на Add file > Upload files, загрузите файл и кликните на Commit Changes | * Будучи в папке '''«BangleApps/apps/timer»''', кликните на '''Add file > Upload files''', загрузите файл и кликните на '''Commit Changes''' | ||
Теперь нам надо загрузить иконку, но в том виде, который будет понятен Bangle.js. | Теперь нам надо загрузить иконку, но в том виде, который будет понятен [[Bangle.js]]. | ||
* Откройте [http://www.espruino.com/Image+Converter конвертер изображений] | * Откройте [http://www.espruino.com/Image+Converter конвертер изображений] | ||
* Нажмите на кнопку «Выберите файл» и загрузите файл «app.png» | * Нажмите на кнопку '''«Выберите файл»''' и загрузите файл '''«app.png»''' | ||
* Поставьте галочки рядом с пунктами Use Compression и Transparency | * Поставьте галочки рядом с пунктами '''Use Compression''' и '''Transparency''' | ||
* Задайте в меню Colours пункт 4 bit Mac Palette и посмотрите на превью. Если вам не понравилась эта цветовая палитра, выберите пункт 8 bit Web Palette (но, если возможно, лучше остановиться на 4 bit Mac Palette, т.к. эта настройка требует в два раза меньше памяти, чем 8 bit Web Palette) | * Задайте в меню '''Colours''' пункт '''4 bit Mac Palette''' и посмотрите на превью. Если вам не понравилась эта цветовая палитра, выберите пункт '''8 bit Web Palette''' (но, если возможно, лучше остановиться на '''4 bit Mac Palette''', т.к. эта настройка требует в два раза меньше памяти, чем '''8 bit Web Palette''') | ||
* В меню Output As выберите настройку Image String | * В меню '''Output As''' выберите настройку '''Image String''' | ||
* Внизу должен появиться текст вроде var img = E.toArrayBuffer(atob("...")). Выделите и скопируйте только часть с E.toArrayBuffer(atob("...")) – без части var img =. | * Внизу должен появиться текст вроде '''var img = E.toArrayBuffer(atob("..."))'''. Выделите и скопируйте только часть с '''E.toArrayBuffer(atob("..."))''' – без части '''var img ='''. | ||
* Вернитесь на GitHub в папку «BangleApps/apps/timer» и создайте новый файл под названием «app-icon.js» с кодом E.toArrayBuffer(atob("...")), который скопировали выше, а затем кликните на Commit new File. | * Вернитесь на [[GitHub]] в папку '''«BangleApps/apps/timer»''' и создайте новый файл под названием '''«app-icon.js»''' с кодом '''E.toArrayBuffer(atob("..."))''', который скопировали выше, а затем кликните на '''Commit new File'''. | ||
На этом этапе можно добавить файл-чейнжлог, чтобы пользователи могли видеть, что изменилось, если вы выпустили разные версии своего приложения. Но мы это пока пропустим. | На этом этапе можно добавить файл-чейнжлог, чтобы пользователи могли видеть, что изменилось, если вы выпустили разные версии своего приложения. Но мы это пока пропустим. | ||
| Строка 68: | Строка 68: | ||
Наконец, давайте добавим описание нашего приложения. Например, [https://github.com/espruino/BangleApps/blob/master/apps/_example_app/add_to_apps.json такое]. | Наконец, давайте добавим описание нашего приложения. Например, [https://github.com/espruino/BangleApps/blob/master/apps/_example_app/add_to_apps.json такое]. | ||
* Вернитесь в корневую директорию репозитория BangleApps | * Вернитесь в корневую директорию репозитория [[BangleApps]] | ||
* Кликните на файл «apps.json» | * Кликните на файл '''«apps.json»''' | ||
* Кликните на маленькую иконку с карандашом справа вверху – это включит режим редактирования | * Кликните на маленькую иконку с карандашом справа вверху – это включит режим редактирования | ||
* Теперь пролистайте вниз и добавьте в конец файла следующее: | * Теперь пролистайте вниз и добавьте в конец файла следующее: | ||
| Строка 92: | Строка 92: | ||
Более подробно о формате этого файла читайте [https://github.com/espruino/BangleApps/blob/master/README.md тут]. | Более подробно о формате этого файла читайте [https://github.com/espruino/BangleApps/blob/master/README.md тут]. | ||
'''Очень важно добавить дополнительную запятую в конце последнего элемента JSON- | '''Очень важно добавить дополнительную запятую в конце последнего элемента [[JSON-код]]а (как в первой строчке выше).''' | ||
* Теперь кликните на Commit Changes и готово! | * Теперь кликните на '''Commit Changes''' и готово! | ||
Примечание: Если вы работаете с локальной копией GitHub-репозитория, то можете запустить файл «bin/sanitycheck.js», который быстро проверит описание вашего приложения на предмет того, всё ли там нормально (иконки, код и т.д.). | '''Примечание:''' Если вы работаете с локальной копией GitHub-репозитория, то можете запустить файл '''«bin/sanitycheck.js»''', который быстро проверит описание вашего приложения на предмет того, всё ли там нормально (иконки, код и т.д.). | ||
== Использование нового приложения == | == Использование нового приложения == | ||
* Вернитесь в свой репозиторий BangleApps по ссылке https://ваш_никнейм.github.io/BangleApps (не забудьте поменять фрагмент «ваш_никнейм» на свой никнейм в GitHub) | * Вернитесь в свой репозиторий '''BangleApps''' по ссылке https://ваш_никнейм.github.io/BangleApps (не забудьте поменять фрагмент ''«ваш_никнейм»'' на свой никнейм в GitHub) | ||
* Там должно быть приложение My Timer App – кликните на кнопку загрузки рядом с ним | * Там должно быть приложение '''My Timer App''' – кликните на кнопку загрузки рядом с ним | ||
* Теперь нажмите на кнопку BTN3 на Bangle.js и откройте лаунчер – ваше приложение будет там! | * Теперь нажмите на кнопку '''BTN3''' на [[Bangle.js]] и откройте лаунчер – ваше приложение будет там! | ||
Примечание: Если загрузчик приложений не работает, то скорее всего это из-за ошибки в файле «apps.json», который вы редактировали ранее. | '''Примечание:''' Если загрузчик приложений не работает, то скорее всего это из-за ошибки в файле '''«apps.json»''', который вы редактировали ранее. | ||
== Документация о вашем приложении == | == Документация о вашем приложении == | ||
| Строка 110: | Строка 110: | ||
У нашего приложения небольшое описание, но многим другим приложениям требуется чуть побольше документации о том, как их использовать. | У нашего приложения небольшое описание, но многим другим приложениям требуется чуть побольше документации о том, как их использовать. | ||
Чтобы добавить эту документацию так, чтобы её потом было легко и просто найти из загрузчика приложений, нужно создать файл «README.md» (файл на языке [https://ru.wikipedia.org/wiki/Markdown Markdown]) в папке нашего приложения. | Чтобы добавить эту документацию так, чтобы её потом было легко и просто найти из загрузчика приложений, нужно создать файл ''«README.md»'' (файл на языке [https://ru.wikipedia.org/wiki/Markdown Markdown]) в папке нашего приложения. | ||
Затем добавляем в JSON- | Затем добавляем в [[JSON-файл]]е описания вот это: | ||
<syntaxhighlight lang="javascript" enclose="div"> | <syntaxhighlight lang="javascript" enclose="div"> | ||
| Строка 118: | Строка 118: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Теперь, когда кто-то найдёт ваше приложение в загрузчике приложений, он также увидит гиперссылку «Read more...» («Читать далее...»). Если кликнуть на неё, это откроет окно с вашей документацией. | Теперь, когда кто-то найдёт ваше приложение в загрузчике приложений, он также увидит гиперссылку '''«Read more...» («Читать далее...»)'''. Если кликнуть на неё, это откроет окно с вашей документацией. | ||
== Внесение изменений == | == Внесение изменений == | ||
| Строка 124: | Строка 124: | ||
Если вы хотите внести в своё приложение какие-то изменения, просто отредактируйте нужные файлы в своём репозитории. Кроме того, если вы предлагаете своё приложение для широкой публики, предполагается, что вы также добавите чейнжлог-файл, чтобы зрители могли видеть, что изменилось в вашем приложении. | Если вы хотите внести в своё приложение какие-то изменения, просто отредактируйте нужные файлы в своём репозитории. Кроме того, если вы предлагаете своё приложение для широкой публики, предполагается, что вы также добавите чейнжлог-файл, чтобы зрители могли видеть, что изменилось в вашем приложении. | ||
* Добавьте файл под названием «BangleApps/apps/timer/ChangeLog» – он должен выглядеть примерно так: | * Добавьте файл под названием '''«BangleApps/apps/timer/ChangeLog»''' – он должен выглядеть примерно так: | ||
<syntaxhighlight lang="javascript" enclose="div"> | <syntaxhighlight lang="javascript" enclose="div"> | ||
| Строка 132: | Строка 132: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Отредактируйте строчку "version":"0.01" в файле «apps.json», чтобы она соответствовала последнему номеру версии в файле-чейнжлоге. | Отредактируйте строчку '''"version":"0.01"''' в файле '''«apps.json»''', чтобы она соответствовала последнему номеру версии в файле-чейнжлоге. | ||
== Как предложить своё приложение на главный загрузчик приложений Bangle.js == | == Как предложить своё приложение на главный загрузчик приложений Bangle.js == | ||
| Строка 138: | Строка 138: | ||
Теперь у нас есть готовое приложение, которое можно предложить для публикации в официальном загрузчике приложений. | Теперь у нас есть готовое приложение, которое можно предложить для публикации в официальном загрузчике приложений. | ||
Разработчики Bangle.js пишут, что стараются принимать все присылаемые им приложения, но это по очевидным причинам не касается неисправных приложений и приложений, которые не подходят для детей. Но ваши приложения всегда можно будет загрузить из вашего собственного загрузчика приложений по ссылке https://ваш_никнейм.github.io/BangleApps. | Разработчики [[Bangle.js]] пишут, что стараются принимать все присылаемые им приложения, но это по очевидным причинам не касается неисправных приложений и приложений, которые не подходят для детей. Но ваши приложения всегда можно будет загрузить из вашего собственного загрузчика приложений по ссылке '''https://ваш_никнейм.github.io/BangleApps'''. | ||
* В своей копии главного репозитория (https://github.com/ваш_никнейм/BangleApps) кликните на Pull request справа вверху | * В своей копии главного репозитория ('''https://github.com/ваш_никнейм/BangleApps''') кликните на '''Pull request''' справа вверху | ||
* Пролистайте вниз, чтобы посмотреть, какие файлы были изменены и добавлены, и убедитесь, что всё нормально | * Пролистайте вниз, чтобы посмотреть, какие файлы были изменены и добавлены, и убедитесь, что всё нормально | ||
* Если всё в порядке, кликайте на Create Pull Request | * Если всё в порядке, кликайте на '''Create Pull Request''' | ||
* На следующей странице напишите короткий заголовок в поле Title и описание на вкладке Write, чтобы разработчики примерно понимали, что это за приложение | * На следующей странице напишите короткий заголовок в поле '''Title''' и описание на вкладке '''Write''', чтобы разработчики примерно понимали, что это за приложение | ||
* Кликните на Create pull request | * Кликните на '''Create pull request''' | ||
Это создаст запрос на публикацию вашего приложения и покажет жёлтый текст «Some checks haven’t completed yet» («Некоторые проверки ещё не выполнены»). | Это создаст запрос на публикацию вашего приложения и покажет жёлтый текст '''«Some checks haven’t completed yet» («Некоторые проверки ещё не выполнены»).''' | ||
Разработчики применяют ко всем предлагаемым приложениям скрипт «bin/sanitycheck.js» при помощи [https://travis-ci.org/ Travis CI]. Это помогает быстро оценить, всё ли в порядке, но не сможет выловить баги в вашем приложении, а лишь убедится, что загрузчик приложений работает нормально. | Разработчики применяют ко всем предлагаемым приложениям скрипт '''«bin/sanitycheck.js»''' при помощи [https://travis-ci.org/ Travis CI]. Это помогает быстро оценить, всё ли в порядке, но не сможет выловить баги в вашем приложении, а лишь убедится, что загрузчик приложений работает нормально. | ||
Через какое-то время жёлтый текст должен смениться на зелёный текст «All checks have passed» («Все проверки пройдены») или «Checks failed» («Проверки не пройдены»). Если проверки не были пройдены, ваше приложение в таком состоянии одобрено не будет, но вы всегда можете кликнуть на Show all Checks > Details и посмотреть, какие были допущены ошибки. Если вы исправите их в своём репозитории, статус проверок будет обновлён. | Через какое-то время жёлтый текст должен смениться на зелёный текст '''«All checks have passed» («Все проверки пройдены»)''' или '''«Checks failed» («Проверки не пройдены»)'''. Если проверки не были пройдены, ваше приложение в таком состоянии одобрено не будет, но вы всегда можете кликнуть на '''Show all Checks > Details''' и посмотреть, какие были допущены ошибки. Если вы исправите их в своём репозитории, статус проверок будет обновлён. | ||
== Дополнительные материалы == | == Дополнительные материалы == | ||
По этой ссылке можно найти [https://www.espruino.com/Bangle.js#tutorials большое количество руководств] по Bangle.js. | По этой ссылке можно найти [https://www.espruino.com/Bangle.js#tutorials большое количество руководств] по [[Bangle.js]]. | ||
Пример формата приложений и JSON- | Пример формата приложений и [[JSON-файл]]ов смотрите в [https://github.com/espruino/BangleApps README-файле загрузчика приложений Bangle.js]. | ||
=См.также= | =См.также= | ||
Версия от 13:34, 6 марта 2021
Перевод: Максим Кузьмин
Проверка/Оформление/Редактирование: Мякишев Е.А.
Добавление приложения в загрузчик приложений Bangle.js[1]
Если у вас есть приложение (созданное, например, с помощью этого руководства), то вы, возможно, захотите добавить его в загрузчик приложений 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.
См.также
Внешние ссылки
