DEV Community: Oskar Codes

How I remade AirDrop from iOS on Windows

Oskar Codes — Sat, 27 Mar 2021 22:40:13 +0000

AirDrop has always been a truly useful feature of Apple's ecosystem, as it lets you share text, files, and images between Apple devices with ease. However, if you're like me and prefer using a Windows PC with an iOS device, there's no way to seamlessly share data between the two devices, without having to email yourself or something like that.

So, I came up with this idea, to recreate iOS's famous AirDrop, but available for Windows as well.
The project's architecture I opted for was the following:

An iOS shortcut sends data to a database when something is shared
A Python program on my PC picks up that data
Then the data is presented in a notification
If that notification is clicked the data is copied to the clipboard

Easy, right?

The database I chose was Firebase's realtime database, by Google, as it is incredibly easy to use, and is completely free.
Once the realtime database was set up, I had to make the iOS shortcut.
An interesting feature that fit exactly my needs, was the "Show in Share Sheets" feature for shortcuts. As the name says, it shows the shortcut in the Share menu, which lets you create a shortcut that does various stuff with the shared data as input. Exactly what I needed!

As you can see the shortcut appears in share sheets:

Then, the shortcut would simply make an HTTP POST request to Firebase, with the shortcut's input passed in the body of the request.

So now, I had a shortcut that could send anything shareable on iOS, to Firebase. Now my PC just had to pick up that data.

First things first, so I started with creating a connection to Firebase. For that a single dependency was needed:

import firebase_admin
from firebase_admin import credentials
from firebase_admin import db

Imported using pip like so:

pip install firebase-admin

Then, my Python script had to get authenticated in order to access Firebase, which was done using an authentication JSON file. If you’re following this article as a tutorial, the method to get that JSON file is explained here. So here’s the code for authentication:

configFile = 'config.json'
cred = credentials.Certificate(configFile)
app = firebase_admin.initialize_app(cred, {
  'databaseURL': 'myDataBaseUrl' # this is not my actual database URL, for security purposes
})

Once that was done, my script had to listen for new data in the real-time database. That was easily done with the listen method, however one issue remained. The listen method actually sends the entire contents of the database the first time it is executed, which wasn’t the behaviour I was looking for. That was easily fixed though, whit a boolean toggle, like so:

hasGotFirst = False

def listener(data):
  global hasGotFirst
  if hasGotFirst:
    # Here we’ll use the fetched data
  hasGotFirst = True

# Here we just listen at the root of the database
db.reference('/').listen(listener)

Then, I wanted the data to be displayed in a beautiful notification when it was received, and then copied to the clipboard when that notification was clicked. For that, I added another two dependencies:

from win10toast_click import ToastNotifier # Notifications
import pyperclip # Clipboard

Imported using pip like so:

pip install win10toast-click
pip install pyperclip

Then, the Python script would display a notification when data was retrieved and copy that data to the clipboard in the notification’s click callback. Here’s the full code:

def listener(data):
  global hasGotFirst
  if hasGotFirst:
    msg = str(data.data['value']) # Get the 'value' property from the data
    toaster.show_toast("Data Sent From Phone", msg, callback_on_click=click, icon_path='')
  hasGotFirst = True

def click(data):
  pyperclip.copy(data)

So now the AirDrop was basically working! I could share a string of text from my phone and it would magically appear in a notification on my PC that I could copy by clicking on it!

If I were to share a note containing the text "Hello from iOS!", a notification would appear, like this:

However to make the process even smoother, I added automatic URL detection, which added a couple more packages:

import re
import webbrowser

Both are available by default, so no installing is needed for those two.

As for the code, it simply checks for a URL pattern when data is retrieved using the re module, and if it evaluates to true, that URL is then opened using the webbrowser module, like so:

def listener(data):
  global hasGotFirst
  if hasGotFirst:
    msg = str(data.data['value'])
    matches = re.match(r'https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)', msg)
    if matches:
      webbrowser.open(msg)
    else:
      toaster.show_toast("Data Sent From Phone", msg, callback_on_click=lambda val=msg: click(val), icon_path='')
  hasGotFirst = True

And now we’re completely done! With the Python script running in the background, I can now share data between my iOS phone and my Windows computer with ease.

If you want the full source code, it is available on GitHub: https://github.com/oskar-codes/windows-airdrop

VueJS QuickStart

Oskar Codes — Mon, 04 Jan 2021 09:52:13 +0000

VueJS is a JavaScript framework mainly used to create user interfaces and single-page applications.
It lets you add logic to HTML code, and lets you easily link JavaScript data with HTML content.
We’ll see in this tutorial the main features in order for you to get started building cool web apps.
If you're discovering Vue for the first time, I encourage you to try out the examples presented in this article. The only way to learn is by practicing for yourself!

Set up the project

To include Vue in your project, simply add the following script tag in the head section of your document.

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

Then add a div with the id of app in the body section, that will contain your entire web application.

<div id="app"></div>

Then, add another script tag, where your JavaScript code will be. We’ll create an app variable to setup Vue.

<script>
const app = new Vue({
  el: '#app', // refers to container div
  data: {
    message: 'Hello World!' // just some example data
  }
})
</script>

Any data you want to use with Vue has to be in the data object, like the message property of value 'Hello Vue!'.

And that’s it to setup Vue! We'll now look at the key features of Vue. Remember that Vue can only be used in the element you specified, which in my case is the div with the app id.

Including variables in HTML

The following code snippet will add the value of the message variable in the div. If the value changes, the HTML is automatically updated.

<h1>{{ message }}</h1>

To update the message variable, you have to refer to it as app.message, as it is a property of the app object.

Conditions in HTML

To render HTML if a certain condition is met, you can use the v-if directive.

data: {
  displayMessage: false
}

<h1 v-if="displayMessage">This message will only be shown if displayMessage is true!</h1>

For loops in HTML

Let's say you have a fruitNames array, like so:

data: {
  fruitNames: ["Apple", "Pear", "Banana"]
}

You can create an HTML list of that array very easily using Vue:

<ul>
  <li v-for="fruit in fruitNames">{{ fruit }}</li>
</ul>

That code will output the following HTML list:

Apple
Pear
Banana

And again, if the array is modified, the HTML list will update accordingly.

You can also access the index in a Vue for loop, like so:

<ul>
  <li v-for="(fruit, index) in fruitNames">{{ index }}: {{ fruit }}</li>
</ul>

The code above will output this list:

0: Apple
1: Pear
2: Banana

Furthermore, you can loop over a number range, like so:

<ul>
  <li v-for="i in 5">{{ index }}</li>
</ul>

This example will produce this list:

Binding HTML attributes

Just like you can bind text inside HTML elements to JavaScript variables, you can bind attributes of HTML elements to use variables.
Here’s an example. Let’s say you have an <input> for a chat app, and want to bind its placeholder attribute to the name of the recipient. Here’s how you would do it using Vue:

data: {
  recipient: "John"
}

<input v-bind:placeholder="'Send a message to' + recipient">

If recipient changes, the input’s placeholder will update!
The best part is that you can do this for any HTML attribute, like title or class.
And because v-bind is one of the most used Vue directives, it can be shortened to a single :. Which means it would be :placeholder instead of v-bind:placeholder in the example above.

Exception with `v-on`

To bind "on" HTML attributes, such as onclick or onchange, you shouldn't use the v-bind directive, instead the v-on directive, like so:

<button v-for="i in 10" v-on:click="doSomeStuff(i)">{{i}}</button>

This example will create 10 buttons, and each one will call doSomeStuff with their index passed as parameter.

Again, v-on is a very commonly used directive, so it has it's own shorthand: @click is the same as v-on:click.

Input binding

When programming webpages, you'll often find yourself wanting to bind the value of an HTML input, with a JavaScript variable. Vue makes that super easy, with the v-model directive. Here's how you use it:

data {
  name: 'John'
}

<input v-model="name">
<p>{{name}}</p>

This example will initialize a name property with the default value of 'John', and then create an HTML input that will automatically change that property whenever the input is changed.

Conclusion

As we have seen, Vue is truly a game-changer when it comes to connecting the HTML DOM with JavaScript, as it provides various logic elements to HTML. Problems such as conditional rendering and state management is easily solved when using Vue.

Send automated Discord messages through Webhooks using JavaScript (Part 2 - Embeds)

Oskar Codes — Fri, 03 Apr 2020 06:15:24 +0000

In a recent post, I explained how one could send messages on Discord through a Webhook using JavaScript XMLHttpRequests. In this post, I'm gonna continue on that topic by explaining how you can send cool embeds like this one:

This is done by specifying an array of embed objects in the XMLHttpRequest, that represent each embed to send, like so:

var params = {
  username: "My Webhook Name",
  avatar_url: "",
  content: "The message to send",
  embeds: [
    { /* embed 1 data */ },
    { /* embed 2 data */ },
    etc...
  ]
}

How the embed's data is structured

However, before jumping straight into the code, you'll first have to understand the embed data architecture that is required to correctly format a Discord embed.
Please note that all fields are optional. All you need to send a valid Discord message, is the content field, or at least one embed object.

author: object containing data about the embed's author
- name: name of the author
- url: url of the author. name becomes a hyperlink
- icon_url: url of author icon
title: title of the embed
url: url of the embed
description: the body text of the embed
fields: an array containing optional field objects
- name: name of the field
- value: value of the field
- inline: if set to true, the fields will be displayed on the same line, but there can only be 3 max on the same line or 2 max if you specified a thumbnail
thumbnail: object containing data about the embed's thumbnail
- url: url of the thumbnail image
image: object containing data about the embed's image
- url: url of the image
footer: object containing data about the embed's footer
- text: footer text
- icon_url: footer icon image url
timestamp: embed's timestamp, formatted in ISO8601 format (yyyy-mm-ddThh:mm:ss.msZ)
color: the embed's color code. You cannot use HEX, as it isn't supported. What you can do, is to convert your HEX code to a valid decimal numeral value, using the function below.

The following helper function converts a HEX code to a decimal numeral value, that can be used in the color field of an embed:

function hexToDecimal(hex) {
  return parseInt(hex.replace("#",""), 16)
}

How to format such data in JavaScript

This data tree can be easily created and manipulated in JavaScript, as all you have to do is create an embed object, and populate the fields with data, like so:

var myEmbed = {
  author: {
    name: "Captain Hook"
  },
  title: "My new embed",
  description: "This is a cool-looking Discord embed, sent directly from JavaScript!",
  color: hexToDecimal("#ff0000")
}

That embed has only a few object fields populated, as no field is required, but you can add more if you wish. Just check the field's name in the data tree above, and add it!

To send it, you can specify that object as the first element of the embed array in the XMLHttpRequest's data, like so:

var params = {
  username: "My Webhook Name",
  embeds: [ myEmbed ]
}

If you want multiple embeds in the same message, you can add additional embed objects to the embeds array.

And then to finally send your embed, you have to set up an XMLHttpRequest, just like in the previous tutorial:

var request = new XMLHttpRequest();
request.open("POST", "https://discordapp.com/api/webhooks/675812904469004338/82nx6cw6Tvx5edryjRgQhVJ4rPenfQTovyKcvAynyIxG0zy1AI0qP0qNSwpahx2TAJ0z");
// again, replace the url in the open method with yours
request.setRequestHeader('Content-type', 'application/json');

var myEmbed = {
  author: {
    name: "Captain Hook"
  },
  title: "My new embed",
  description: "This is a cool-looking Discord embed, sent directly from JavaScript!",
  color: hexToDecimal("#ff0000")
}

var params = {
  username: "My Webhook Name",
  embeds: [ myEmbed ]
}

request.send(JSON.stringify(params));

// function that converts a color HEX to a valid Discord color
function hexToDecimal(hex) {
  return parseInt(hex.replace("#",""), 16)
}

And there you go! If you followed each step carefully, you should get a cool embed popping up in your Discord channel, like this one:

Quick JavaScript tip #3: deep clone an array

Oskar Codes — Thu, 05 Mar 2020 18:02:05 +0000

When programming in JavaScript, you might face a situation where you have to clone an array, which means you want to create a second variable containing the same array as the original one. At first glance, this might seem like a simple problem; just assign the original array to a new variable. But JavaScript doesn't work like that with arrays. Let's see why with an example.

var a = [1,2,3]; // create the original array
var b = a; // store it in another variable "b"

b[1] = 4; // assign 4 to the second element of the array "b"

// now let's see the output...
console.log(b); // results in [1,4,3]
console.log(a); // also results in [1,4,3]

This behavior is due to JavaScript actually giving a reference to b, and not the value, which means that modifying b will instead update a because b is just a reference to a.

One way to solve this issue would be to unpack the original array in the new one, like so:

var a = [1,2,3]; // create the original array
var b = [...a]; // unpack "a" to "b"

b[1] = 4; // assign 4 to the second element of the array "b"

// now let's see the output...
console.log(b); // results in [1,4,3]
console.log(a); // results in [1,2,3]

Yay! This works! But there is an issue with this, as unpacking still keeps references in lower level arrays, which means that this solution wouldn't work with an array like this one: [[1,2],[3,4]]. Here's an example showing the problem:

var a = [[1,2],[3,4]]; // create the original array
var b = [...a]; // unpack "a" to "b"

b[0].push(3); // add 3 to the first element of the array "b"

// now let's see the output...
console.log(b); // results in [[1,2,3],[3,4]]
console.log(a); // also results in [[1,2,3],[3,4]]

As you can see, a is also modified, because the inner arrays of b are still references to a. What we want is to deep clone the original array, and not keep references to the previous one.
However, if you know that the array you are cloning is only one dimensional, you are totally free to use this method, as it is quite simple and easy to read.

Now the solution to deep clone arrays that I prefer, and that is most commonly used in my experience, is to use JSON parse and stringify:

var a = [[1,2],[3,4]]; // create the original array
var b = JSON.parse(JSON.stringify(a)); // stringify and then parse "a"

b[0].push(3); // add 3 to the first element of the array "b"

// now let's see the output...
console.log(b); // results in [[1,2,3],[3,4]]
console.log(a); // results in [[1,2],[3,4]]

And there you go! You now know how to deep clone arrays in JavaScript.
However, this solution isn't very beautiful to read, so an option is to add a new deep cloning method to the Array prototype (I'll call it val):

// define the method
Array.prototype.val = function() {
  return JSON.parse(JSON.stringify(this));
}

// and use it like so
var a = [[1,2],[3,4]];
var b = a.val(); // successfully deep clones the original array

Please note that the JSON parse and stringify solution also works with JavaScript objects, so you could add the val method I used with arrays to the Object prototype in order to deep clone objects.

Send automated Discord messages through Webhooks using JavaScript

Oskar Codes — Sun, 09 Feb 2020 18:23:20 +0000

I'm sure you've heard of Discord, the all-in-one voice and text chat app, and maybe you're even using it. Well did you know that it is possible to send automated messages in Discord servers directly from JavaScript? It's called Webhooks. Let's see how to easily set one up in order for you to integrate it with your app, or even just have fun sending custom messages.
This works by sending a post request with some JSON data to a unique URL Discord provides when you create your Webhook.

Create the Webhook

Discord provides a feature to create Webhooks, but note that it is only available in server channels, not in direct messages. To create a Webhook, click the cog next to the channel in which you wish to set up your Webhook:

Then head to the Webhooks tab, and hit Create Webhook. You'll then be able to specify the name, which is the name that is used when sending messages if none is specifided in the JSON post request.
You can also adjust the channel, and add a default image. Again, that image can later be customized from the JSON post request.

Then at the bottom, you'll get the unique Webhook URL. Copy it and save it somewhere, as we will use it later.

Setup the JavaScript file

In order to send POST requests to your webhook, you'll have to set up some form of JavaScript environment in which you can execute code. In my case I'll just simply create a local HTML file that I'll name index.html. Inside it I'll create a basic button that executes the JavaScript function sendMessage().
Here's the code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Discord Webhook Tutorial</title>
  </head>
  <body>
    <button onclick="sendMessage()">Send</button>
  </body>
</html>

Then I'll add a script tag in which I'll declare the sendMessage function:

<script>
  function sendMessage() {

  }
</script>

Inside of that function I'll create a new XMLHttpRequest, and I'll save the return value in the request variable. The first parameter will be "POST", because we want to do a POST request to the Webhook. The second parameter is your Webhook URL, that you got when creating your Webhook. If you don't have it, go to your Webhook's settings, and copy it from there.

Please note that the URL specified below is the URL referencing my Discord channel, so you need to change it in order for the code to work in your Discord channel.

Your sendMessage function should look like this:

function sendMessage() {
      const request = new XMLHttpRequest();
      request.open("POST", "https://discordapp.com/api/webhooks/676118118082281513/ZS5YcWhurzokBrKX9NgexqtxrJA5Pu2Bo4i7_JsIxC-JIbPBVhSZkcVVukGOro52rnQA");
      // replace the url in the "open" method with yours
}

Then I'll call the setRequestHeader method, and specify the "Content-type" to be "application/json" in order to indicate that what we're sending is JSON data, like so:

request.setRequestHeader('Content-type', 'application/json');

Then, I'll declare a params object, containing the JSON data we want to send to our Webhook:

const params = {
    username: "My Webhook Name",
    avatar_url: "",
    content: "The message to send"
}

If you don't specify a username or avatar, it will default to the one you chose when creating the Webhook. The content attribute can't be empty, otherwise the request will fail.

And then for the last step, we need to send the actual data, like so:

request.send(JSON.stringify(params));

Notice how JSON.stringify is used. It converts our params object to a valid string that can be sent.

Here's the final HTML file in case you want it:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Discord Webhook Tutorial</title>
  </head>
  <body>
    <button onclick="sendMessage()">Send</button>
  </body>

  <script>
    function sendMessage() {
      const request = new XMLHttpRequest();
      request.open("POST", "https://discordapp.com/api/webhooks/676118118082281513/ZS5YcWhurzokBrKX9NgexqtxrJA5Pu2Bo4i7_JsIxC-JIbPBVhSZkcVVukGOro52rnQA");

      request.setRequestHeader('Content-type', 'application/json');

      const params = {
        username: "My Webhook Name",
        avatar_url: "",
        content: "The message to send"
      }

      request.send(JSON.stringify(params));
    }
  </script>
</html>

And now it's time to test it out! In my case I'll open up Chrome to execute my HTML file, and press the Send button in order to send the message.
And there you go! A message was sent from "My Webhook Name", and it says "The message to send", just like I specified:

If I had specified an avatar URL, it would have replaced the default Discord icon.

And that's basically it! You can now integrate this in your own application, to send automated messages when an event occurs in you app!

In a later tutorial, we'll see how to create embeds, in order to send really cool messages, like this one:

Quick JavaScript tip #2: declare global variables from a function

Oskar Codes — Fri, 07 Feb 2020 15:03:20 +0000

In JavaScript, variables declared using var are local if declared from within a function, or otherwise global. That means that a variable declared inside a function can only be accessed from within that function.
Here's an example:

var x = "Hello World";

function myFunc() {
  var y = "Hi";

  console.log(x); // "Hello World"
  console.log(y); // "Hi"
}

console.log(x); // "Hello World"
console.log(y); // Uncaught ReferenceError: y is not defined

But once in a while, you'll find yourself having to declare a global variable from a function. How can that be achieved? Let's start by understanding how global variables work.

When you declare a global variable in JavaScript, it actually creates a property of the window object. Here's an example:

var x = "Hello World";

console.log(x); // "Hello World"
console.log(window.x); // "Hello World"

This means that to declare a global variable from a function, you can manually set it as a property of the window object, like so:

function myFunc() {
  window.x = "Hello World";
}

console.log(x); // "Hello World"

Quick JavaScript tip #1: setInterval() with modifiable delay

Oskar Codes — Wed, 05 Feb 2020 13:57:19 +0000

The JavaScript setInterval method repeatedly executes a function. It takes two parameters: the function to execute, and a delay in milliseconds between each execution. But how can that delay be changed during runtime? Let’s see.

You’re maybe thinking of using a variable as the second parameter of the setInterval method, like so:

var delay = 1000;
setInterval(myFunction, delay);

// some logic modifying the delay

But that doesn’t work, because the setInterval method takes the value of the delay variable, and not an actual reference. So how can we make this work?

The easiest way is to set a timeout instead of an interval at the end of each execution, and pass a variable as the second parameter. That way, each time a new timeout is set the value of that variable is used, like so:

var delay = 1000;

function loop() {
  // your logic here, where you can update the delay
  setTimeout(loop, delay);
}

loop();

Notice how we have to manually execute the loop function, which isn’t very optimized.
A possible optimization would be this:

var delay = 1000;

(function loop() {
  // your logic here, where you can update the delay
  setTimeout(loop, delay);
})();

What I did here is to enclose the loop function inside parentheses, and then immediately execute it once using () just like a normal function. For reference, this is called an "Immediately Invoked Function Expression".

ElectronJS QuickStart

Oskar Codes — Tue, 04 Feb 2020 19:56:04 +0000

Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS, which basically means that if you know how to code a website, you can easily create desktop apps!
Now getting started with Electron can be quite tedious, which is why I'm going to explain how to get started in a few steps.

What you need to get started

To develop desktop apps using Electron, I personally use Visual Studio Code, but most code editors that have a terminal included should work.
You'll also need to install the NodeJS runtime.

Setting up your project

Now that you've got the right tools, let's get started setting up the project. To do so, you'll have to create a folder containing your project, and then open that folder using your code editor (VSCode in my case).
Then open up a new terminal window inside your code editor. Here's how it's done in VSCode:

Then type in npm init. This will setup your package.json file.
You'll have to enter the following information:

Package name: your project's name (lowercase and no spaces)
Version: you can just hit enter for this one as it will default to 1.0.0
Description: just enter some basic information about the purpose of your project
Entry point: this one is quite important. It is the javascript file that will be executed when launching the project. I will name mine window.js as it will handle all of our desktop application's windows.
Test command: this is the command that will be executed when typing npm test in the terminal. In our case we want it to be electron . because we want Electron to launch our application. The dot specifies the directory in which the Electron project is stored, which is just the root directory here, but if you want to store your project files somewhere else, you can adjust the directory.

The remaining fields are just some information for when you'll publish your project on npmjs. I'll leave all those fields empty for now.

Once you confirm, a file called package.json will be created.
It should resemble something like this:

Notice the script object, containing test which has the value of electron ., which means running npm test will execute your project. You can add other scripts there, such as the start script. More about that here.

And to finish setting up your project, you'll have to install electron using npm. This is very easy, as all you have to do is type npm install electron in the terminal window.
Note that a package-lock.json file is created, but you don't have to worry about it.

Displaying a window

Now that everything is set up, we can start coding! Let's begin by creating the window.js file, that will handle our app's windows.
Right click in the file explorer, and hit "New file". Remember, you have to name it as the entry point of your project in order to execute it when launching your app!

I'll start by declaring four variables:

const electron = require("electron");
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow;

The first one is a reference to electron. The second one is a reference to the app object of the first constant, which will be used to detect app events, such as when the user launches the app. The third constant is a reference to electron's BrowserWindow, which lets us display an HTML document in the application window. The last variable is just a holder variable that is uninitialized for now, as we will use it later.

Then I'll asign a function to the "ready" event using the app.on function. It will be triggered when the app is launched, and inside of it i'll set up the mainWindow variable with some options defining the size in pixels of the window.
Here is a list of all the available options.

app.on('ready', function() {
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800
  })
}

Still inside the app.on function, I'll add the following code to handle closing the window:

mainWindow.on('closed', function() {
  mainWindow = null;
})

And finally, still inside the app.on function, I'll add the following line, to display an HTML file named index.html:

mainWindow.loadURL(`file://${__dirname}/index.html`);

Notice how __dirname is used in order to reference the current directory.

The final code should look like this:

const electron = require("electron");
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow;

app.on('ready', function() {
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800
  })

  mainWindow.on('closed', function() {
    mainWindow = null;
  })

  mainWindow.loadURL(`file://${__dirname}/index.html`);
});

Displaying your HTML file

Now let's create the HTML file that is going to be displayed in the window. Right click in the file explorer and hit "New file". I'll name mine index.html.

Inside it i'll just write a basic web page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test project</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

Now you can just type npm test in the terminal, and you should see the HTML file appearing!

And now it's up to you to create your app! Because we're using NodeJS and Electron, you have the simplicity of creating websites combined with the power of Node. You can install modules from npmjs or use the preinstalled ones to extend the capabilities of your project! For example, the preinstalled Filesystem module let's you interact with locally stored files directly in JavaScript, which is great!
If you don't know what to create, here are some apps made using electron, from which you can inspire yourself.