electron.fw.png

Repository

What Will I Learn?

You will learn to create an electron project
You will learn how to lock and unlock files
You will learn the child_process module and the exec namespace
You will learn command line operations in electron
You will learn how to write and process .bat files.

Requirements

Atom Editor

Difficulty

Intermediate

Tutorial Contents

We will make a video player with the electron to increase your electron knowledge in this tutorials.

This application will also hide the videos you upload to this application at the same time in your computer.

The application will be logged in with a username and password so that no one else can watch your videos.

We will store the videos in the file we hide, and we will only have access to the hidden file in the application so that it will not be able to find the file on the computer.

I will use Bootstrap for the application screen.
I will use Angularjs and Angular-ui-router for video upload and video playback.
I will use Jquery for login operations.

You should have information about these before you start building the application.

Here's what I will tell you on this article.

Electron application from scratch will be created.
Installation and inclusion of auxiliary elements required for application.
Writing folder hiding code as .bat file.
Running the .bat file with the electron application.

Let's start building our application.

Electron Application Creation

In order to create an electron application, electron must be installed in our computer.

It is quite simple to install electrons, but Node Packaged Modules (npm) must be installed. To install npm, please click here to install nodejs.

After installing npm, it is enough to write the following code to the command line to set up the electron globally.
npm install -g electron

The next step will be to create the package.json file by going into the file where you will place your application.

We can use the npm init command to create a package.json file.

After this code a number of questions will be asked at the command line. When you answer the question and write yes, a package.json file is created.

Where the main.js file is written in front of the main property. this file is the file where we write our electron codes.

With the atom editor open the package.json file and create main.js file.

I need to load the app and BrowserWindow modules.

The app module represents the application, while the BrowserWindow module represents the window to be opened.

const {app,BrowserWindow}=require('electron')

Create a new window in a function and add the screen file to this window.

const path=require('path')
const url=require('url')

let win 

function createWindow() {
    
    win =new BrowserWindow({width:1000,height:800})

    win.loadURL(url.format({
        pathname:path.join(__dirname,'index.html'),
        protocol:'file',
        slashes:true
    }))  

    win.openDevTools();// Developer Tool

}

I added the index.html page to the window created with win so that the index.html page was our view page.

I also set up the developer tool so that I can easily see when I make any mistakes.

Let's run the application with the app module.

app.on('ready',createWindow)

Create an index.html page and place the following code in it.

<!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>Hidden Video Player</title>
    <script>
         
    </script>
</head>
<body>
   <h1>Hidden Video Player</h1>
</body>
</html>

To run the application, it is enough to run the following code where the package.json file is located.

electron .

Upload and Include Bootstrap,Angularjs and Jquery Files

I will include the angularjs, angular-ui-router and bootstrap cdn in the project in this section and will download the jquery project files using npm.

Let's start by downloading jquery first. at the command line we can download the following code where the application files are located.

npm i jquery

So the nodu_modules folder is created and jquery is downloaded into it so we can use jquery now.

The new version of index.html is as follows.

<!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">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" 
    integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script>
    <title>Hidden Video Player</title>
</head>
<body>
   <h1>Hidden Video Player</h1>
</body>
</html>

Writing Folder Hiding Code as .bat File.

Let's open a text file and code it, we will convert this text file to a .bat file when the encoding is finished.

We need to open it with a password when opening it on the command line because we do not want to access this file from the outside.

We need to capture the value in the command line in the text file.

We will create a file called ElectronFiles in this .bat file to move our files in the field that the file is in.

When the ElectronFiles file is locked it will be invisible and will be visible when the lock is opened.

We will run it with a password to run this .bat file and run it with a command to shut it off.

When the .bat file is run, the status of the ElectronFiles folder is checked.

Code:
cls
@ECHO OFF
set arg1=%1
title Folder ElectronFiles
if EXIST "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}" goto UNLOCK
if NOT EXIST ElectronFiles goto MDLocked

The command to lock the ElectronFiles file is below.

:LOCK
ren ElectronFiles "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}"
attrib +h +s "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}"
echo Folder locked
goto End

The command is down when the lock is unlocked.

:UNLOCK
if NOT %arg1%==123456 goto FAIL
attrib -h -s "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}"
ren "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}" ElectronFiles
echo Folder Unlocked successaaaay
goto End

The setting to turn off or turn off is below.

:CONFIRM
if %arg1%==e goto LOCK
if %arg1%==E goto LOCK
if %arg1%==h goto END
if %arg1%==H goto END
echo Invalid choice.
goto CONFIRM

The following command works when there is an error.

:FAIL
echo Invalid password
goto end

The following command will run when there is no error.

:MDLocked
md ElectronFiles
echo Locker created successaaaay
goto End
:End

Save as electron.bat and unlock and unlock

So we opened the lock and now shut it back.

Running .bat File with Electron

To run the .bat file with electron, we need to load the exec namespaces in the child_process module so we can run the .bat files we know instead with the command.

For this application we have to run the electron.bat password command when the application is opened so the hidden ElectronFiles file will be open.

We also need to run electron.bat e when the application is closed.

I need to install the module to use the exec() function.

const exec=require('child_process').exec

In the createWindow() function, we will run the exec() function to make the files visible.

const bat=exec('cmd /c electron.bat 123456',{cwd:"D:\\electron\\hiddenVideoPlayer-part1\\bats"},function(){
            
    });

The first parameter of the exec () function is used to enter the command to be executed.
The second parameter is the path to the .bat file.
We must run the exec () function before the application is closed so that the ElectronFiles file is hidden.

app.on('before-quit', () => {
    const bat=exec('cmd /c electron.bat e',{cwd:"D:\\electron\\hiddenVideoPlayer-part1\\bats"},function(){
            
    });
    app.quit()
})

app.on('closed', () => {
    const bat=exec('cmd /c electron.bat e',{cwd:"D:\\electron\\hiddenVideoPlayer-part1\\bats"},function(){
            
    });
    app.quit()
})

The file will now be visible and accessible when we run our application.

The file is hidden when the application is closed and disappears completely when the refresh is made.

Proof of Work Done

https://github.com/pckurdu/hidden-video-player-application-with-electron-part-1

Hidden Video Player Application with Electron (Part 1)