Рубрики
Без рубрики

Создайте свой собственный виджет iOS с JavaScript

Как создать свой собственный виджет домашнего экрана iOS с чистым JavaScript. Помечено JavaScript, Showdev, iOS.

Мы создадим наш собственный виджет iOS с чистым JavaScript. Чтобы добиться этого, мы будем использовать отличное приложение, называемое сценарием. С помощью сценариев вы можете создавать сценарии JavaScript и запустить их на вашем устройстве iOS. Вы можете использовать эти скрипты для автоматизации разных вещей на вашем устройстве, а также отображать скрипт в виджете домашнего экрана iOS. Основная цель этого учебника состоит в том, чтобы предоставить начальное руководство для создания писативаемых виджетов. Поэтому мы построим простой виджет для изучения оснований и некоторых полезных трюков для построения сквасимых виджетов. Созданный виджет отобразит следующую запланированную дату запуска SpaceX, как показано на рисунке ниже.

Некоторые базовые знания JavaScript будут полезными, но не нужны. Как уже упоминалось ранее, мы используем Ссылки Приложение для создания нашего виджета, поэтому вы должны установить его на вашем устройстве. Для более легкого развития и тестирования на MacOS я рекомендую Ссылки на рабочем столе приложение (бета). Альтернатива синхронизирует ваши сценарии, используя iCloud и редактировать скрипты внутри папки iCloud на рабочем столе, что также должно работать в других операционных системах. Это позволяет вам редактировать скрипт в вашем любимом текстовом редакторе и проверить его на вашем устройстве iOS.

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

async function createWidget() {
  // Create new empty ListWidget instance
  let listwidget = new ListWidget();

  // Return the created widget
  return listwidget;
}

let widget = await createWidget();

// Check where the script is running
if (config.runsInWidget) {
  // Runs inside a widget so add it to the homescreen widget
  Script.setWidget(widget);
} else {
  // Show the medium widget inside the app
  widget.presentMedium();
}
Script.complete();

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

Теперь, когда мы можем запустить базовый виджет, давайте добавим некоторое содержание. Макет виджета основан на стеках, которые удерживают различные отображаемые элементы. Стеки могут быть вложены друг в друга. По умолчанию ListWidget стекает его контент вертикально, что можно изменить, если вы этого хотите.

Совет № 1 Когда вы хотите отладить более сложные макеты, добавьте цветную границу на ваши элементы, чтобы вы могли легко обнаружить его размер и положение.

Сначала мы установим цвет фона и после этого мы добавляем некоторые направляющиеся в наш виджет и дайте ему какое-то укладка. Поэтому вставьте следующий фрагмент внутри Createwidget () Метод после новый listwidget (); Отказ

  // Set new background color
  listwidget.backgroundColor = new Color("#000000");

  // Add widget heading
  let heading = listwidget.addText("🚀Next🚀");
  heading.centerAlignText();
  heading.font = Font.lightSystemFont(25);
  heading.textColor = new Color("#ffffff");

  // Spacer between heading and launch date
  listwidget.addSpacer(15);

Чтобы установить цвет фона, мы устанавливаем backgroundcolor Свойство созданного экземпляра виджета списка. Мы назначаем новый цвет с шестнадцатеричным значением # 000000 , что даст нам черный фон. После этого мы добавляем новый текст на наш виджет и сохраните его в переменную заголовка. Используя переменную, теперь мы можем получить доступ к добавленному тексту и дать ему укладку. В нашем случае мы выровним текстовым центром, измените шрифт по умолчанию и дайте ему белый цвет текста. Если вы заинтересованы в различных вариантах для текста, а другие поддерживаемые шрифты, пожалуйста, посетите WidgetText и Шрифт Документация по сценарии. Наконец, мы добавляем некоторое расстояние между нашей созданной заголовком и следующим элементом, что будет нашей датой запуска.

Чтобы отобразить следующую запланированную дату запуска, мы должны получить наши данные с API. Поэтому мы будем использовать следующие API Документация SpaceXData.com API Отказ

⚠️ Sidenote ⚠️. Если вы используете API, который требует ключа API или секрет, никогда не делитесь своим скриптом ключом внутри. Каждый другой человек может использовать API с вашим доступом, если ключ получат публику, например, на github. Всегда храните ключ в переменной в начале вашего сценария, чтобы легко найти и удалить его перед использованием. Даже лучше, не сложный код ключа и вместо этого пропустите его как аргумент к вашему сценарию.

Чтобы получить данные из API, мы добавим следующие две новые функции на наш скрипт.

async function getNextLaunch() {
  // Query url
  const url = "https://api.spacexdata.com/v4/launches/next";

  // Initialize new request
  const request = new Request(url);

  // Execute the request and parse the response as json
  const response = await request.loadJSON();

  // Return the returned launch data
  return response;
}

function getLaunchDateTime(launchData) {
  // Parse launch date to new date object
  const launchDateTime = new Date(launchData.date_utc);
  return launchDateTime;
}

Первая функция отправляет запрос на указанный URL и анализирует ответ как JSON, который затем будет возвращен. Вторая функция – это просто небольшой помощник, который извлечет строку даты из предоставленного набора данных и возвращает ее в качестве объекта даты. Теперь мы можем назвать ранее определенные функции внутри CreatewidTet () Чтобы получить данные из API и получите дату запуска. Поэтому просто добавьте следующие строки внутри CreatewidTet () Функция после listwidget.addspacer ()

  // Fetch next launch date
  let launch = await getNextLaunch();
  let launchDateTime = getLaunchDateTime(launch);

Теперь, когда мы получили данные наших API, нам нужно отобразить ее внутри нашего виджета. Чтобы добиться этого, мы создаем две новые функции, которые добавят наш текст на виджет и примените к нему некоторое основное форматирование.

function addDateText(stack, text) {
  let dateText = stack.addText(text);
  dateText.centerAlignText();
  dateText.font = Font.semiboldSystemFont(20);
  dateText.textColor = new Color("#ffffff");
}

function displayLaunchDateTime(stack, launchDateTime, precision) {
  // Check if next launch date is precise enough and display different details based on the precision
  if (precision == "hour") {

    // Add launch date
    const dateOptions = { year: "numeric", month: "2-digit", day: "2-digit" };
    let datestring = launchDateTime.toLocaleDateString(undefined, dateOptions);
    addDateText(stack, datestring);

    // Add launch time
    const timeOptions = { hour: "numeric", minute: "numeric" };
    let timestring = launchDateTime.toLocaleTimeString(undefined, timeOptions);
    addDateText(stack, timestring);
  } else if (precision == "day") {

    // Add launch date
    const dateOptions = { year: "numeric", month: "2-digit", day: "2-digit" };
    let datestring = launchDateTime.toLocaleDateString(undefined, dateOptions);
    addDateText(stack, datestring);
  } else {
    addDateText(stack, "No day for next launch given");
  }
}

AddDateText () Функция получает экземпляр, к которому функция должна добавить текст и строку, которая содержит текст, который должен отображаться. После этого функция добавляет данный текст в данный стек и применяет некоторую стайлинг к элементу.

Наконечник # 2 Если вы хотите отобразить текст с переменной длиной, вы можете добавить министрукватор () от 0 до 1 к тексту. Это указывает сумму, который текст будет масштабироваться, чтобы поместиться внутри виджета.

DisplyLaunchDateTime () Функция немного сложнее. Он получает экземпляр, к которому следует добавить текст, экземпляр DateTime, который должен быть отображен, и параметр прецизионного. Точность отправляется с ответом API следующего запуска. Он определяет, насколько именно известно время запуска, которое мы будем использовать для решения того, мы отображим только день или время запуска. Внутри DisplyLaunchtime () Функция, мы проверяем данную точность. На основании этого мы применим правильный формат на наш экземпляр даты и добавить его в стек, позвонив AddDateText () Отказ Если на следующей дате запуска неизвестна точно, мы отображаем сообщение о том, что следующий день запуска еще не известен.

Сейчас внутри нашего Createwidget () Функция мы можем позвонить в DisplyLaunchDateTime () Функция и передайте наш экземпляр listwidget, созданную дату и точность от ответа API, чтобы отобразить данные. Финал Createwidget Функция показана ниже.

async function createWidget() {
  // Create new empty ListWidget instance
  let listwidget = new ListWidget();

  // Set new background color
  listwidget.backgroundColor = new Color("#000000");

  // Add widget heading
  let heading = listwidget.addText("🚀Next🚀");
  heading.centerAlignText();
  heading.font = Font.lightSystemFont(25);
  heading.textColor = new Color("#ffffff");

  // Spacer between heading and launch date
  listwidget.addSpacer(15);

  // Fetch next launch date
  let launch = await getNextLaunch();
  let launchDateTime = getLaunchDateTime(launch);

  // Add the launch time to the widget
  displayLaunchDateTime(listwidget, launchDateTime, launch.date_precision);

  // Return the created widget
  return listwidget;
}

Чтобы отобразить виджет на домашнем экране, вам необходимо создать скрипт внутри приложения для скрисы (вы можете найти последний скрипт в Gist ниже). После этого добавьте новый маленький виджет на сценарию на ваш домашний экран, который должен дать вам пустой виджет. Теперь вы можете долго нажать виджет, отредактируйте виджет и выберите созданный сценарий в конфигурации виджета. Это вы должны увидеть ваш созданный виджет на вашем экране. 🚀🚀.

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

Счастливое кодирование 👨🏼💻.

Оригинал: “https://dev.to/matthri/create-your-own-ios-widget-with-javascript-5a11”

Читайте ещё по теме: