Геоинформация в ElectronJS

Опубликовано: 1 Августа, 2021

ElectronJS - это платформа с открытым исходным кодом, используемая для создания кроссплатформенных нативных настольных приложений с использованием веб-технологий, таких как HTML, CSS и JavaScript, которые могут работать в операционных системах Windows, macOS и Linux. Он объединяет движок Chromium и NodeJS в единую среду выполнения.

Электрон дает нам способ , с помощью которого мы можем выборку код страны и код языка родной системы с помощью методов экземпляра встроенного модуля приложения. Коды стран, полученные компанией Electron, соответствуют определенным стандартам ISO (Международной организации по стандартизации). Следовательно, мы можем использовать эти коды в дальнейшем, чтобы получить дополнительную информацию о стране и языке пользователя с помощью сторонних REST API и представить ее пользователю в удобочитаемом формате. Эта особенность полезна для определения языков, добавления интернационализации i18n и для получения информации, специфичной для страны, такой как валюта . В этом руководстве будет показано, как получить информацию о стране и языке в Electron.

Мы предполагаем, что вы знакомы с предварительными условиями, описанными в вышеупомянутой ссылке. Для работы Electron в системе должны быть предварительно установлены node и npm.

  • Структура проекта:

Геоинформация в Electron: модуль приложения является частью основного процесса . Чтобы импортировать и использовать модуль приложения в процессе рендеринга , мы будем использовать удаленный модуль Electron. Подробнее об удаленном модуле.
Пример: следуйте инструкциям по получению информации о стране и языке в Electron.

  • Шаг 1. Следуйте инструкциям в разделе «Динамическое стилирование в ElectronJS», чтобы настроить базовое приложение Electron. Скопируйте код Boilerplate для файлов main.js и index.html, как указано в статье. Мы продолжим создавать наше приложение, используя ту же кодовую базу. Дополнительно установите пакет axios с помощью npm . Этот пакет является HTTP-клиентом на основе обещаний. Он используется для HTTP-вызовов REST API. Мы будем использовать этот пакет для получения географической информации для пользователя. Для получения дополнительной информации о axios.
npm установить axios --save
  • Также внесите необходимые изменения, упомянутые в файле package.json, чтобы запустить приложение Electron.
    package.json:
{
  "name": "электронно-локальный",
  "версия": "1.0.0",
  "description": "Локали в Электроне",
  "main": "main.js",
  "scripts": {
    "старт": "электрон".
  },
  "ключевые слова": [
    "электрон"
  ],
  «автор»: «Радхеш Ханна»,
  "лицензия": "ISC",
  "dependencies": {
    "axios": "^ 0.19.2",
    "электрон": "^ 8.3.0"
  }
}
  • Вывод: На этом этапе настроено наше основное электронное приложение. После запуска приложения мы должны увидеть следующий результат.

  • Шаг 2. Добавьте следующие фрагменты кода в файлы index.html и index.js для получения информации о языке и стране в Electron.
    index.html: добавьте в этот файл следующий фрагмент. Кнопка «Обнаружить информацию в электронном» еще не имеет связанных с ней функций. Чтобы изменить это, добавьте следующий фрагмент кода в файл index.js.

html




< h3 >
Language and Country Information in Electron
</ h3 >
< button id = "detect" >
Detect Information in Electron
</ button >
  • index.js: добавьте в этот файл следующий фрагмент.

javascript




const electron = require( "electron" );
const axios = require( "axios" );
// Importing app Module using Electron remote
const app = electron.remote.app;
var detect = document.getElementById( "detect" );
detect.addEventListener( "click" , () => {
var locale = app.getLocale();
var country = app.getLocaleCountryCode();
console.log( "Locale Detected - " , locale);
console.log( "Country Detected - " , country);
// Making an HTTP GET REST API call
+ country).then((res) => {
console.log(res);
console.log( "Country - " , res.data.name);
});
});

Подробное объяснение всех методов экземпляра модуля приложения, используемых в коде, приведено ниже. Для получения более подробной информации о модуле приложения.

  • app.getLocale () Этот метод используется для возврата текущего языкового стандарта приложения (языкового кода). Он использует библиотеку l10n_util Chromium для получения локали из собственной системы. Для всех возможных значений, возвращаемых этим методом. Этот метод не принимает никаких параметров и возвращает значение String с текущим обнаруженным языковым стандартом. В Windows этот метод можно использовать только после того, как будет сгенерировано событие готовности модуля приложения. Этот метод поддерживается во всех операционных средах.
    Примечание. Мы также можем установить пользовательский языковой стандарт с помощью переключателя командной строки в Electron. Мы можем просто передать переключатель командной строки при запуске приложения, используя свойство CommandLine модуля приложения или внеся изменения в стартовый скрипт package.json при запуске приложения Electron. Мы можем использовать переключатель командной строки –lang, чтобы установить пользовательский языковой стандарт.
    package.json: внесите в этот файл следующие изменения.
 "scripts": {
  "start": "electronics --lang = hi."
},
  • Если мы теперь воспользуемся методом app.getLocale () , он вернет значение пользовательского языкового стандарта. Более подробная информация о методе app.getLocale () .
  • app.getLocaleCountryCode () Этот метод используется для возврата двухбуквенного кода страны ISO 3166 языкового стандарта операционной системы пользователя. Значение извлекается из собственных API ОС. Этот метод возвращает значение String с обнаруженным кодом страны. Если этот метод не может определить код страны с помощью собственных API-интерфейсов ОС, он вернет пустую строку. Этот метод не принимает никаких параметров. Для получения более подробной информации о методе app.getLocaleCountryCode () . В нашем коде мы использовали это значение кода страны для получения географической информации с помощью сторонних REST API. Этот метод поддерживается во всех операционных средах.

Выход: