Espruino:Примеры/Кастомизация приложений для Bangle.js

Материал из Онлайн справочника
Перейти к навигацииПерейти к поиску

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


Кастомизация приложений для Bangle.js[1]

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

Это руководство написано с расчётом на то, что вы уже прошли вот это руководство, где объясняется, как добавить приложение в загрузчик приложений Bangle.js, и знаете, что нужно делать для того, чтобы предложить своё приложение на рассмотрение, а также уже имеете на руках приложение, которое можно кастомизировать.

Идея кастомизатора крайне проста. Вы создаёте веб-страницу, которая будет помогать пользователю кастомизировать его приложение. Эта страница будет появляться после клика по кнопке в загрузчике приложений, а после завершения кастомизации эта веб-страница предоставит загрузчику приложений список файлов, которые нужно загрузить на Bangle.js.

Давайте создадим простое приложение, которое будет показывать текст, введённый на HTML-странице.

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

Создайте в папке своего приложения файл под названием «custom.html» и добавьте в него:

<html>
  <head>
    <link rel="stylesheet" href="../../css/spectre.min.css">
  </head>
  <body>

    <p>Some text: <input type="text" id="mytext" class="form-input" value="http://espruino.com"></p>
    <p>Click <button id="upload" class="btn btn-primary">Upload</button></p>

    <script src="../../core/lib/customize.js"></script>

    <script>
      // После клика на кнопку загрузки...
      document.getElementById("upload").addEventListener("click", function() {
        // берём текст, который надо добавить:
        var text = document.getElementById("mytext").value;
        // создаём текст приложения при помощи шаблонной строки:
        var app = `
var txt = ${JSON.stringify(text)};
g.clear(1);
g.setFontAlign(0,0);
g.setFont("6x8");
g.drawString(txt,120,120);
`;
        // отправляем готовое приложение 
        // (вдобавок к содержимому «app.json»):
        sendCustomizedApp({
          storage:[
            {name:"myapp.app.js", url:"app.js", content:app},
          ]
        });
      });

    </script>
  </body>
</html>

Теперь редактируем JSON-файл своего приложения и прямо перед "storage" добавляем строчку "custom": "custom.html".

Поскольку теперь мы загружаем JS-файл своего приложения напрямую, мы также можем заменить {"name":"myapp.app.js", "url":"app.js"} на {"name":"myapp.app.js"}, удалив исходный файл приложения app.js.

Примечание: Мы задаём в sendCustomizedApp() фрагмент url:"app.js" для JS-файлов – независимо от того, существует ли файл app.js и был ли он вообще загружен. С помощью этого фрагмента загрузчик приложений понимает, что это JavaScript-файл (по его расширению), и соответственно, может уменьшить и токенизировать его.

Что ж, теперь всё готово! Запустите загрузчик приложений и сможете начать кастомизировать своё приложение.

Примечание: Здесь мы каждый раз создаём полноценный JS-файл своего приложения, но особой нужды в этом нет. Например, приложение OpenStreetMap загружает из файла текст приложения, а потом просто загружает дополнительные JSON-файлы и текст.

См.также

Внешние ссылки