Geo Information in ElectronJS

ElectronJS is an Open Source Framework used for building Cross-Platform native desktop applications using web technologies such as HTML, CSS, and JavaScript which are capable of running on Windows, macOS, and Linux operating systems. It combines the Chromium engine and NodeJS into a Single Runtime.

Electron provides us with a way by which we can fetch the Country code and Language code of the native System using the Instance methods of the built-in app module. The Country codes fetched by Electron follow certain ISO (International Standard Organization) standards. Hence we can use these codes further to fetch more information about the Country and the Language of the user using 3rd party REST APIs and present it to the user in a human-readable format. This particular feature is useful for detecting languages, adding i18n Internationalization, and fetching information that is specific to the country such as the Currency. This tutorial will demonstrate how to fetch Country and Language Information in Electron.

We assume that you are familiar with the prerequisites as covered in the above-mentioned link. For Electron to work, node and npm need to be pre-installed in the system.

Project Structure: 

Geo Information in Electron: The app Module is part of the Main Process. To import and use the app Module in the Renderer Process, we will be using Electron remote module. For more details on the remote module.
Example: Follow the given Steps to fetch Country and Language Information in Electron. 

Step 1: Follow the Steps given in Dynamic Styling in ElectronJS to set up the basic Electron Application. Copy the Boilerplate code for the main.js file and the index.html file as provided in the article. We will continue building our application using the same code base. Additionally, install the Axios package using npm. This package is a Promise-based HTTP Client. It is used for making HTTP calls to REST APIs. We will be using this package to fetch the Geo information for the user. For more information on Axios. 

npm install axios --save

Also, perform the necessary changes mentioned for the package.json file to launch the Electron Application. 
package.json: 

{
  "name": "electron-local",
  "version": "1.0.0",
  "description": "Locales in Electron",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [
    "electron"
  ],
  "author": "Radhesh Khanna",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.19.2",
    "electron": "^8.3.0"
  }
}

Output: At this point, our basic Electron Application is set up. Upon launching the application, we should see the following result.

Step 2: Add the following code snippets in the index.html and index.js file for fetching Language and Country Information in Electron.
index.html: Add the following snippet in that file. The Detect Information in Electron button does not have any functionality associated with it yet. To change this, add the following code snippet in the index.js file.

<h3>
      Language and Country Information in Electron
</h3>
<button id="detect">
    Detect Information in Electron
</button>

index.js: Add the following snippet in that file. 

const electron = require("electron");
const electron = require("electron");
const axios = require("axios");

// Importing app Module using Electron remote
const app = electron.remote.app;

let detect = document.getElementById("detect");
detect.addEventListener("click", () => {
    let locale = app.getLocale();
    let 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);
        });
});

A detailed Explanation of all the Instance methods of the app module used in the code is given below. For more detailed information on the app module.

app.getLocale() This method is used to return the current application Locale (Language Code). It uses Chromium's l10n_util library to fetch the locale from the native System. For all possible values returned by this method. This method does not take in any parameters and it returns a String value with the current detected locale. On Windows, this method can only be used after the ready event of the app module is emitted. This method is supported in all OS environments. 
Note: We can also set a custom locale by using a Command line Switch in Electron. We can simply pass the Command line Switch at application startup by either using the command line property of the app module or making changes to the start script of the package.json when launching the Electron application. We can use the --lang Command line Switch to set a custom locale.
package.json: Make the following changes in that file. 

"scripts": {
  "start": "electron --lang=hi . "
},

If we now use the app.getLocale() method, it will return the value of the custom locale. For more detailed information on the app.getLocale() method.

app.getLocaleCountryCode() This method is used to return the user operating system's locale two-letter ISO 3166 Country Code. The value is fetched from native OS APIs. This method returns a String value with the detected country code. When this method is unable to detect the country code using the native OS APIs, it will return an empty String. This method does not take in any parameters. For more detailed information on the app.getLocaleCountryCode() method. In our code, we have used this Country Code value to fetch Geo-Information using 3rd Party REST APIs. This method is supported in all OS environments.

Output: