Purpose of the article: To showcase the innovative features of the Electron Lock/Unlock Reminder App, emphasizing its ability to enhance productivity and streamline task management through customizable, persistent reminders.
Tools and Technology: Electron, JavaScript, Node.js, HTML/CSS
Keywords: Electron, productivity app, system reminders, task management, customizable notifications, cross-platform compatibility.
Introduction
- The Task Reminder app is a useful tool for reminding users to stay organized and concentrate on their tasks.
- It helps users with custom reminders that remain active when the system is locked, and prevents important tasks from being overlooked.
- Using the features of Electron, the app sends prompt reminders, once the system is unlocked. This makes it easy to incorporate it into the user’s process.
- This application stands out for its integration with system events, cross-platform compatibility, persistent reminder storage, and a customizable interface.
- Being a flexible tool, output is improved and coordination with the user’s everyday activities and choices is established.
Content Index:
- Prerequisites
- Features
- Getting Started
- Application Structure
- IPC Communication
- Unlock Popup
- Conclusion
- Webliography
Prerequisites:
Before getting started, ensure you have installed the prerequisites given below:
Node.js Installed: You should ensure that Node.js has been installed on your system from the official website Node.js Downloads. The version of the Node that supports this application is 18.20.1.
Ensure Node Version Compatibility: Verify that the Node.js version is compatible with the Electron version you plan to use. Check the Electron documentation for the compatibility table.
Visual Studio Code Installed: Install Visual Studio Code to write and run your code. You need to download it from the official website.
Creating a New Electron Project: Set up a new project by creating a new directory and initializing it as a npm package. You can make it by running the commands below in your terminal:
• mkdir electron-lock-unlock-reminder
• cd electron-lock-unlock-reminder
• npm init -y
Install Electron and Electron Store: Install Electron and Electron Store as dependencies for your project. You can install them by running the following commands:
• npm install electron.
• npm install electron-store.
• With these prerequisites fulfilled, you will be ready to start developing the Electron Lock/Unlock Reminder App.
Features:
Personalized Reminders Supported by Electron Store Integration:
Users enjoy the flexibility of crafting reminders tailored to their tasks and preferences. Through integration with the Electron Store, reminders are seamlessly stored even when the system is locked.
Prompt Notifications Powered by Power Monitor Module Utilization:
Timely reminders greet users upon unlocking the system, facilitated by the vigilant detection of system lock/unlock events through Electron’s Power Monitor module. This dynamic interplay ensures users remain informed and on schedule, maximizing productivity and time management efforts.
Intuitive Interface Facilitating Seamless Interaction:
With this interface, the app offers user-friendly experience for setting, managing, and interacting with reminders. This approach helps users to customize reminders and prioritize tasks according to their preferences, resulting in a more productive and organized workflow.
File Structure:
Manually Create the Files:
The following files should be created manually in Visual Studio Code:
• index.js
• index.html
• unlock-popup.html
Creating a new project:
Below are the steps to develop a new electron project:
• Open the command prompt and give the command npm init –y to create a new project.
• Open Visual Studio code with the “code .”.
- Install the dependencies, such as electron, electron store, and electron builder, which will automatically be added to the Package.Json file, as shown below.
- Commands to run to install those dependencies are:
◦ NPM install electron
◦ NPM install electron store
◦ NPM install electron-builder
Add Start Script: To easily run the Electron app, add the following script in your package.json file under the “scripts” section:
Run the Application: Now, to run the Electron application, use the following command in your terminal:
npm start
Flow of the Project:
Let’s break down the flow of the project file by file:
Index.js:
• This file is the entry point of the Electron application.
• It requires modules such as electron, http, electron store, and net.
• It creates an instance of an electron store to store messages persistently.
• It sets up an HTTP server listening on port 3000.
• When the Electron app is ready (app.whenReady(). then (create Window)), it calls the create Window function to create the main browser window.
• It listens to the power monitor’s ‘unlock-screen’ event. When the screen is unlocked, it retrieves the last stored message from the store and shows a popup if there is any stored message.
• It listens to the store message event sent from the renderer process to store new messages in the store.
• It defines the showUnlockPopup function as a way to create and display a custom popup window.
Index.html:
• This HTML file contains the user interface for setting reminders.
• It includes input fields for the title and message, along with a button to store the message.
• It also includes a div for displaying online status and a hidden div for displaying custom popup messages.
Unlock-popup.html:
• This HTML file contains the layout for the unlocked popup window.
• It displays the title and message of the reminder.
• It includes a close button to close the popup window.
How our application works:
• When the Electron app starts, the main window is created, and the HTTP server starts.
• Users can input a title and message in the main window and click the “Store Message” button.
• Priority Task Reminders:
Before locking the system, users should add reminders for priority tasks they need to complete after a break or lunch. These reminders will be stored when the system is locked.
• When a message is stored, it is sent to the main process (index.js) via IPC.
• The main process stores the message in the Electron store.
• If the screen is unlocked while the app runs, the main process retrieves the last stored message and displays it in a custom popup window.
• The custom popup window (unlock-popup.html) displays the title and message of the reminder.
• Users can close the popup window by clicking the close button.
Conclusion:
In summary, the Electron app allows users to input and store messages, which are saved in the main process. When the screen is unlocked, the app retrieves and displays the last stored message in a custom popup window, reminding users of their tasks.
Author Bio:
Anusha KASI
Software Engineer - Data Engineering - Digital Transformation
An accomplished Software Developer with 2.4 years of experience, adept in Angular, HTML, CSS, and JavaScript. Driven by innovation, I excel at creating user-centric solutions that optimize productivity and task management. Passionate about delivering high-quality outputs that align with modern technological advancements.
