Геоинформация в 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
    axios.get( " https://restcountries.eu/rest/v2/alpha/ "
              + 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. Этот метод поддерживается во всех операционных средах.

Выход:

Node.js JavaScript HTML CSS

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

html

javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ