Espruino:Примеры/Добавление приложения в загрузчик приложений Bangle.js: различия между версиями
Myagkij (обсуждение | вклад) (Новая страница: «{{Espruino/Панель перехода}} {{Перевод от Сubewriter}} {{Myagkij-редактор}} =<ref>[ www.espruino.com - ]</ref>= <syntaxhighligh...») |
Myagkij (обсуждение | вклад) |
||
| (не показано 7 промежуточных версий 2 участников) | |||
| Строка 3: | Строка 3: | ||
{{Myagkij-редактор}} | {{Myagkij-редактор}} | ||
=<ref>[ www.espruino.com - ]</ref>= | =Добавление приложения в загрузчик приложений Bangle.js<ref>[https://www.espruino.com/Bangle.js+App+Loader www.espruino.com - Adding an app to the Bangle.js App Loader]</ref>= | ||
Если у вас есть приложение (созданное, например, с помощью [https://www.espruino.com/Bangle.js+First+App этого руководства]), то вы, возможно, захотите добавить его в [https://banglejs.com/apps/ загрузчик приложений Bangle.js], чтобы его могли установить и другие пользователи. | |||
<syntaxhighlight lang=" | Примечание: Чтобы максимально упростить ситуацию с копирайтом, GitHub-репозиторий [https://github.com/espruino/BangleApps BangleApps] и весь код в нём распространяются по лицензии [[MIT]]. Поэтому, предлагая своё приложение, вы автоматически соглашаетесь, что ваш код тоже будет распространяться по [https://ru.wikipedia.org/wiki/Лицензия_MIT лицензии MIT], так что вам нужно будет убедиться, что в вашем приложении нет никаких данных или изображений, защищённых копирайтом (на которые у вас нет права бесплатного распространения). | ||
==Создание ответвления (форка)== | |||
Первый шаг – это создание ''«форка»'' загрузчика приложений [[Bangle.js]] (т.е. создание вашей собственной копии): | |||
* Перейдите в GitHub-репозиторий [https://github.com/espruino/BangleApps BangleApps]. | |||
* Зарегистрируйтесь/залогиньтесь в GitHub (справа вверху страницы). | |||
* Кликните на кнопку '''Fork''' справа вверху репозитория '''BangleApps'''. | |||
== Включение GitHub Pages == | |||
Теперь давайте включим сервис '''GitHub Pages''', который позволит просматривать и использовать вашу собственную копию репозитория: | |||
* Нажмите на '''Settings''' вверху. | |||
* Пролистайте вниз до пункта '''GitHub Pages'''. | |||
* В меню '''Source''' выберите пункт '''master''' и нажмите на кнопку '''Save'''. | |||
* Страница обновится, а в разделе '''GitHub Pages''' появится вот такое сообщение: | |||
<syntaxhighlight lang="javascript"> | |||
Your site is ready to be published at https://ваш_никнейм.github.io/BangleApps | |||
</syntaxhighlight> | |||
* Перейдите по ссылке https://ваш_никнейм.github.io/BangleApps, после чего должна открыться копия вашего собственного загрузчика приложений. | |||
{{Примечание1|Вы можете хостить загрузчик приложений сами, но это нужно делать с помощью [[HTTPS-сервер]]а (не [[HTTP]]), чтобы мог работать [[Web Bluetooth]].}} | |||
== Добавление своего приложения == | |||
Если вы прошли [https://www.espruino.com/Bangle.js+First+App руководство «Первое приложение для Bangle.js (таймер)»], то у вас уже должно быть приложение с [[ID]] ''«timer»'', так что давайте им и воспользуемся. Нам нужно создать новую папку с таким же названием в папке ''«apps»''. | |||
[https://github.com/espruino/BangleApps/tree/master/apps/_example_app Вот] пример того, как может выглядеть эта папка. | |||
Опытные [[GitHub]]-разработчики наверняка знают, как клонировать репозиторий на свой локальный компьютер, но если вы не хотите или не знаете, как это сделать, то это можно сделать и онлайн: | |||
* Перейдите в свой репозиторий '''BangleApps''' по ссылке https://github.com/ваш_никнейм/BangleApps | |||
* Кликните на папку '''«apps»''' | |||
* Кликните на кнопку '''Add file''', а потом на '''Create new file''' | |||
* Теперь впишите в названии файла '''«timer/app.js»''' и скопируйте [[JavaScript]]-код приложения в окно редактора. Если кода нет, и вы просто хотите попробовать что-нибудь, напишите: | |||
<syntaxhighlight lang="javascript"> | |||
E.showMessage("My\nSimple\nApp","My App") | |||
</syntaxhighlight> | |||
* Теперь кликните на кнопку '''Commit new file''' | |||
* Откроется новое окно с папкой '''«BangleApps/apps/timer»'''. Давайте добавим иконку приложения | |||
* В [https://www.espruino.com/Bangle.js+First+App руководстве «Первое приложение для Bangle.js (таймер)»] мы загрузили для иконки ''48''-пиксельный [[PNG]]-файл, так что давайте им и воспользуемся | |||
* Переименуйте этот файл на [[ПК]] на '''«app.js»''' (в [[GitHub]] нет возможности переименовывать файлы) | |||
* Будучи в папке '''«BangleApps/apps/timer»''', кликните на '''Add file > Upload files''', загрузите файл и кликните на '''Commit Changes''' | |||
Теперь нам надо загрузить иконку, но в том виде, который будет понятен [[Bangle.js]]. | |||
* Откройте [http://www.espruino.com/Image+Converter конвертер изображений] | |||
* Нажмите на кнопку '''«Выберите файл»''' и загрузите файл '''«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'''. | |||
На этом этапе можно добавить файл-чейнжлог, чтобы пользователи могли видеть, что изменилось, если вы выпустили разные версии своего приложения. Но мы это пока пропустим. | |||
Наконец, давайте добавим описание нашего приложения. Например, [https://github.com/espruino/BangleApps/blob/master/apps/_example_app/add_to_apps.json такое]. | |||
* Вернитесь в корневую директорию репозитория [[BangleApps]] | |||
* Кликните на файл '''«apps.json»''' | |||
* Кликните на маленькую иконку с карандашом справа вверху – это включит режим редактирования | |||
* Теперь пролистайте вниз и добавьте в конец файла следующее: | |||
<syntaxhighlight lang="javascript"> | |||
}, | |||
{ "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} | |||
] | |||
} | |||
] | |||
</syntaxhighlight> | |||
Более подробно о формате этого файла читайте [https://github.com/espruino/BangleApps/blob/master/README.md тут]. | |||
'''Очень важно добавить дополнительную запятую в конце последнего элемента [[JSON-код]]а (как в первой строчке выше).''' | |||
* Теперь кликните на '''Commit Changes''' и готово! | |||
{{Примечание1|Если вы работаете с локальной копией GitHub-репозитория, то можете запустить файл '''«bin/sanitycheck.js»''', который быстро проверит описание вашего приложения на предмет того, всё ли там нормально (иконки, код и т.д.).}} | |||
== Использование нового приложения == | |||
* Вернитесь в свой репозиторий '''BangleApps''' по ссылке https://ваш_никнейм.github.io/BangleApps (не забудьте поменять фрагмент ''«ваш_никнейм»'' на свой никнейм в GitHub) | |||
* Там должно быть приложение '''My Timer App''' – кликните на кнопку загрузки рядом с ним | |||
* Теперь нажмите на кнопку '''BTN3''' на [[Bangle.js]] и откройте лаунчер – ваше приложение будет там! | |||
{{Примечание1|Если загрузчик приложений не работает, то скорее всего это из-за ошибки в файле '''«apps.json»''', который вы редактировали ранее.}} | |||
== Документация о вашем приложении == | |||
У нашего приложения небольшое описание, но многим другим приложениям требуется чуть побольше документации о том, как их использовать. | |||
Чтобы добавить эту документацию так, чтобы её потом было легко и просто найти из загрузчика приложений, нужно создать файл ''«README.md»'' (файл на языке [https://ru.wikipedia.org/wiki/Markdown Markdown]) в папке нашего приложения. | |||
Затем добавляем в [[JSON-файл]]е описания вот это: | |||
<syntaxhighlight lang="javascript"> | |||
"readme":"README.md", | |||
</syntaxhighlight> | |||
Теперь, когда кто-то найдёт ваше приложение в загрузчике приложений, он также увидит гиперссылку '''«Read more...» («Читать далее...»)'''. Если кликнуть на неё, это откроет окно с вашей документацией. | |||
== Внесение изменений == | |||
Если вы хотите внести в своё приложение какие-то изменения, просто отредактируйте нужные файлы в своём репозитории. Кроме того, если вы предлагаете своё приложение для широкой публики, предполагается, что вы также добавите чейнжлог-файл, чтобы зрители могли видеть, что изменилось в вашем приложении. | |||
* Добавьте файл под названием '''«BangleApps/apps/timer/ChangeLog»''' – он должен выглядеть примерно так: | |||
<syntaxhighlight lang="javascript"> | |||
0.01: Новое приложение! | |||
0.02: Исправлен баг с отсчётом | |||
0.03: Добавлен более красивый текст! | |||
</syntaxhighlight> | |||
Отредактируйте строчку '''"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»''' при помощи [https://travis-ci.org/ Travis CI]. Это помогает быстро оценить, всё ли в порядке, но не сможет выловить баги в вашем приложении, а лишь убедится, что загрузчик приложений работает нормально. | |||
Через какое-то время жёлтый текст должен смениться на зелёный текст '''«All checks have passed» («Все проверки пройдены»)''' или '''«Checks failed» («Проверки не пройдены»)'''. Если проверки не были пройдены, ваше приложение в таком состоянии одобрено не будет, но вы всегда можете кликнуть на '''Show all Checks > Details''' и посмотреть, какие были допущены ошибки. Если вы исправите их в своём репозитории, статус проверок будет обновлён. | |||
== Дополнительные материалы == | |||
По этой ссылке можно найти [https://www.espruino.com/Bangle.js#tutorials большое количество руководств] по [[Bangle.js]]. | |||
Пример формата приложений и [[JSON-файл]]ов смотрите в [https://github.com/espruino/BangleApps README-файле загрузчика приложений Bangle.js]. | |||
=См.также= | =См.также= | ||
=Внешние ссылки= | =Внешние ссылки= | ||
| Строка 16: | Строка 166: | ||
<references /> | <references /> | ||
{{Навигационная таблица/Espruino | {{Навигационная таблица/Портал/Espruino}} | ||
Текущая версия от 17:03, 22 мая 2023
Добавление приложения в загрузчик приложений 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, после чего должна открыться копия вашего собственного загрузчика приложений.
Добавление своего приложения
Если вы прошли руководство «Первое приложение для 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 и готово!
Использование нового приложения
- Вернитесь в свой репозиторий BangleApps по ссылке https://ваш_никнейм.github.io/BangleApps (не забудьте поменять фрагмент «ваш_никнейм» на свой никнейм в GitHub)
- Там должно быть приложение My Timer App – кликните на кнопку загрузки рядом с ним
- Теперь нажмите на кнопку BTN3 на Bangle.js и откройте лаунчер – ваше приложение будет там!
Документация о вашем приложении
У нашего приложения небольшое описание, но многим другим приложениям требуется чуть побольше документации о том, как их использовать.
Чтобы добавить эту документацию так, чтобы её потом было легко и просто найти из загрузчика приложений, нужно создать файл «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.
См.также
Внешние ссылки
