DEV Community: Mayur Kadam

Angular run-time Environment Config

Mayur Kadam — Sat, 12 Sep 2020 13:40:20 +0000

Configuration of multiple environment

Mayur Kadam — Sun, 26 Jul 2020 13:44:43 +0000

Angular Custom Push Notification

Mayur Kadam — Fri, 01 May 2020 14:32:22 +0000

Battery Indicator Python Script

Mayur Kadam — Sat, 29 Feb 2020 14:37:08 +0000

A laptop user you must take caution about your battery because the battery is also the most important component
If you are using an old laptop then you might be a wonder to protect your battery from getting overcharged as well wanted to protect from getting drain at 0%
Even if you have a new and very high spec laptop still you need to take caution or protect your battery to get overcharged.
So, in this case, you might use any battery percentage indicator application on our laptop to save your battery life.
and what if I tell you!! You can do the same things with the help of a simple python script.
as it is a simple python script so it won't use your laptop many resources it just uses a little bit of resource of your laptop
so even you have a very low spec laptop with you then you can simply use this script to give battery percentage alert.
as this script is written in python so that you can run this on any OS as it is platform-independent language. so you no need to worry about compatibility.

Script Introduction
so basically in this python script, I simply monitor the battery percentage and also look for sockets is get a plug or not based on that you will get notified and notified in the sense of you will hear the voice which will warn you or about your battery percentage as well as on your screen notification will be appear in right side corner so that it will draw your attention.
In order to use this script you simply need to copy below code and save it as whatever name you want but make it extension as .pyw
by making extension .pyw so it can run in the background and also run this script continuously in the background simply create it a shortcut and paste it into the startup folder so whenever your computer is restarted this program will run in background and base on your battery status it will warn you.

import psutil
import time
import pyttsx3
from win10toast import ToastNotifier # also need to install win32api
import threading

toaster = ToastNotifier()
x=pyttsx3.init()
x.setProperty('rate',130)
x.setProperty('volume',8)
count = 0

def show_notification(show_text):
   toaster.show_toast(show_text,
                       icon_path='battery_indicator.ico',
                       duration=10)
   # loop the toaster over some period of time
   while toaster.notification_active():
      time.sleep(0.1)

def monitor():
   while (True):
      time.sleep(10)
      battery = psutil.sensors_battery()
      plugged = battery.power_plugged
      percent = int(battery.percent)

      if percent < 40:
         if plugged == False:
            processThread = threading.Thread(target=show_notification, args=("Your Battery at "+str(percent)+"% Please plug the cable",))  # <- note extra ','
            processThread.start()
            x.say("Your battery is getting low so charge it right now")
            x.runAndWait()
            count = 0
      elif percent == 100:
         if plugged == True:
            processThread = threading.Thread(target=show_notification, args=("Charging is getting complete",))  # <- note extra ','
            processThread.start()
            x.say("Charging is getting complete")
            x.runAndWait()
      elif percent == 90:
         if plugged == True:
            if count == 0:
               processThread = threading.Thread(target=show_notification, args=("Your Battery at 90% Please plug out the cable",))  # <- note extra ','
               processThread.start()
               x.say("Your battery at 90% ")
               x.runAndWait()
               count = count + 1

if __name__ == "__main__":
   monitor()

script link:- https://gist.github.com/ddc6faf2ece824930fda1ed74b78fea4.git

so far now you very well know how we are going to use this script. and if you still wanted to know how each line of python code works. then you can watch the below video for more details.

Clipboard Text Manipulation Python Script

Mayur Kadam — Fri, 21 Feb 2020 14:21:37 +0000

Angular 8 + Firebase Cloud Messaging Push Notifications

Mayur Kadam — Sat, 25 Jan 2020 15:04:22 +0000

Are you looking for push notification which is normally you seen in ANDROID application or IOS application which is basically giving popup on your device notification tab when the application is closed user still received the notification. The same things can happen with your web application. In the case of the web application, you will receive the notification when the browser tab is not active and this is done by with the help of a service worker.

Now you might be wondering what is service worker ? or what is push notification ? as well so before i begin to explain it’s procedure it's better to understand some terminologies.

First, take look into what is Push Notifications

A push notification is a message popup similar to SMS. App publishers can send them at any time; users don’t have to be in the app or using their devices to receive them. They can do a lot of things; for example, they can show the latest sports scores, get a user to take any action, such as downloading a coupon or let a user know about an event, such as a flash sale.

Push notifications look like SMS text messages and mobile alerts, but they only reach users who have installed your app. Each mobile platform and browsers have support for push notifications. It gives applications the ability to receive messages pushed to them from a server, whether or not the web app is in the foreground, or even currently loaded, on a user agent.

Second, look for prerequisites of Push Notifications

as we looking push notifications in angular 8 so you must have installed Node.js version > 10. NPM will be updated also because it will be used by default. Here, I am using Node version 10.16.3 and install the latest version of Angular CLI else you can upgrade your older version into the latest CLI by command.


 install -g @angular/cli@latest

once the project environment has been done you also require a firebase account to connect your web application into the cloud messaging.

1 ) simply visit into firebase.google.com

2 ) if you are new then click on sign up else you can log in into your old account

3) once login click into go to console tab which is in the top right corner
4) then click into Create a project

5) once the project has been created then look for its project settings General tab and create one app for getting its credentials

6 ) once your app is ready then simply copy its config for future use

7) also copy the server key from the Cloud Messaging tab

Now your all prerequisites are complete 🙂

Now Create the Angular Project

Let’s create an Angular 8 project by using the following command:


 new push-notification
   cd push-notification

here we are using the firebase so we need to install that library so enter the following command in the same project directory.


 install firebase @angular/fire --save
   npm install firebase --save
   npm audit fix (if any vulnerabilities found else ignore)

Now you have to create some file so follow the instruction carefully.

1) create manifest.json file save this file in the same folder where index.html file resides. We need to add a manifest.json file to our app and register it with the Angular CLI. Push Notifications use the service worker browser extension, which must be registered in this manifest.

```{

"gcm_sender_id": "YOUR-SENDER-ID"
}


then link it in the index.html file.

```<link

 rel="manifest" href="./manifest.json">

create firebase-messaging-sw.js Push messaging requires a service worker. This allows your app to detect new messages, even after the app has been closed by the user. and create this file in the same directory of manifest.json file which is in src/ directory. Note:- Before importing the below script you need to check the latest version it's better if you import the latest version of the CDN link, so here i importing 7.6.0 version links.



importScripts('https://www.gstatic.com/firebasejs/7.6.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.6.0/firebase-messaging.js');
  firebase.initializeApp({
   apiKey: “from firebase config”,
   authDomain: “from firebase config”,
   databaseURL: “from firebase config”,
   projectId: “from firebase config”,
   storageBucket: “from firebase config”,
   messagingSenderId: “from firebase config”,
   appId: “from firebase config”,
   measurementId: “from firebase config”
});
  const messaging = firebase.messaging();

we need to register these files in angular-cli.json



"assets": [
    "src/favicon.ico",
    "src/assets",
    "src/firebase-messaging-sw.js", // add this one
    "src/manifest.json" // this one also 
]

Now you have to create the service provider in my case I'm going to create a messaging service provider in the service folder which is an app directory. so move into the app directory and enter bellow command by cmd.



mkdir service
cd service
ng g s messaging

once service has been created you have to paste below exact code into messaging.service.ts file



import { Injectable } from '@angular/core';
import { AngularFireMessaging } from '@angular/fire/messaging';
import { BehaviorSubject } from 'rxjs'
@Injectable()
export class MessagingService {
currentMessage = new BehaviorSubject(null);
constructor(private angularFireMessaging: AngularFireMessaging) {
this.angularFireMessaging.messaging.subscribe(
(_messaging) => {
_messaging.onMessage = _messaging.onMessage.bind(_messaging);
_messaging.onTokenRefresh = _messaging.onTokenRefresh.bind(_messaging);
}
)
}
requestPermission() {
this.angularFireMessaging.requestToken.subscribe(
(token) => {
console.log(token);
},
(err) => {
console.error('Unable to get permission to notify.', err);
}
);
}
receiveMessage() {
this.angularFireMessaging.messages.subscribe(
(payload) => {
console.log("new message received. ", payload);
this.currentMessage.next(payload);
})
}
}

let’s understand its functions

requestPermission(): Browser/ device will ask to user for permission to receive notification. After permission is granted by the user, firebase will return a token that can use as a reference to send a notification to the browser.

receiveMessage(): This function will be triggered when a new message has received.

Update the Environment files



export const environment = {
production: false,
firebase: {
  apiKey: “from firebase config”,
  authDomain: “from firebase config”,
  databaseURL: “from firebase config”,
  projectId: “from firebase config”,
  storageBucket: “from firebase config”,
  messagingSenderId: “from firebase config”,
  appId: “from firebase config”,
  measurementId: “from firebase config”
}
};

Update the Components files

first, we will update the App Module File



import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { AppRoutingModule } from ‘./app-routing.module’;
import { AppComponent } from ‘./app.component’;
import { AngularFireMessagingModule } from ‘@angular/fire/messaging’;
import { AngularFireDatabaseModule } from ‘@angular/fire/database’;
import { AngularFireAuthModule } from ‘@angular/fire/auth’;
import { AngularFireModule } from ‘@angular/fire’;
import { MessagingService } from ‘./service/messaging.service’;
import { environment } from ‘../environments/environment’;
import { AsyncPipe } from ‘../../node_modules/@angular/common’;
@NgModule({
   declarations: [AppComponent],
   imports: [
      AppRoutingModule,
      BrowserModule,
      AngularFireDatabaseModule,
      AngularFireAuthModule,
      AngularFireMessagingModule,
      AngularFireModule.initializeApp(environment.firebase),
   ],
   providers: [MessagingService,AsyncPipe],
   bootstrap: [AppComponent]
})
export class AppModule { }

then in the HTML part, we can use pipe async and JSON



{{ message | async | json }}

And now update the App Components file



import { Component } from ‘@angular/core’;
import { MessagingService } from ‘./service/messaging.service’;
@Component({
  selector: ‘app-root’,
  templateUrl: ‘./app.component.html’,
  styleUrls: [‘./app.component.css’]
})
export class AppComponent {
  title = ‘push-notification’;
  message;
  constructor(private messagingService: MessagingService) { }
ngOnInit() {
  this.messagingService.requestPermission()
  this.messagingService.receiveMessage()
  this.message = this.messagingService.currentMessage
 }
}

Finally, we did the Setup process... 😉

Now run the project
run application using ng serve -o after compilation is complete, open can your browser and browser will ask for permission.

once you click on the allow button than it will print the token id on browser console sometime it will take time to load the token id but surely you will get that id in console dialog.

now we are ready to go…

Now look for sending a push notification

You can also hit Firebase Cloud Messaging directly using cURL.



curl -X POST \
  https://fcm.googleapis.com/fcm/send \
  -H 'Authorization: key=YOUR-SERVER-KEY' \
  -H 'Content-Type: application/json' \
  -d '{ 
 "notification": {
  "title": "Hey there", 
  "body": "Subscribe to mighty ghost hack youtube channel"
 },
 "to" : "YOUR-GENERATED-TOKEN"
}'

Also, you can use the postman for sending the request i will demonstrate you by the postman

copy below JSON request and enter into the body part and also provide authorization key in the header section of postman before sending any request over googleapis and authorization key is nothing but the legacy serve key which we saw in prerequisite sections.



{
 "notification": {
 "title": "Hey there", 
 "body": "Subscribe to might ghost hack youtube channel"
 },
 "to" : "YOUR-GENERATED-TOKEN"
}

once all done we can send the request to the server https://fcm.googleapis.com/fcm/send

once i click on the send button on postman i will receive the popup and one thing important you have to note down when your project is in active tab means open in browser or you are in the same tab then message will appear on HTML but it will not give you any popup until and unless you minimize it or move into another tab. when you move into another tab or minimize the browser than service worker doing his work to show you the popup message

now let me show the popup when the project tab is not in an active mode

now look in active mode

Video Tutorial

That’s it 😃

hope you get it how easily we can configure the angular project to receive the push notification.

If you want to look into the project than here is the GitHub link:- mayurkadampro/Angular-Push-Notification

Learn How To Deploy Angular app on Github

Mayur Kadam — Thu, 16 Jan 2020 16:53:10 +0000

As you are reading this post then you might become exciting to know about how very easily you can deploy ur angular application over Github. so before you move forward I’m assuming that you might have Github account already and must have the basic knowledge of angular application at least you done the angular setup on your machine.

So we will go step by step by assuming you right now don’t have any kind of project ready yet so we will start from the beginning of project creation.

1) Create an Angular App

To create a new workspace and initial starter app:
Open cmd and Run the CLI command ng new and provide the name my-app, as shown here

ng new my-app

and it will open your browser directly with default template as shown below

So we successfully did the application creation part 😃

2) Create a Github Repository

Create a new repository on GitHub.

Once you click on create repository button you will see the command to push your local project into GitHub and To avoid errors, do not initialize the new repository with README, license, or gitignore files.

so we finally push our newly created project on Github 😃

3) Install GitHub page package

Add angular-cli-ghpages to your project by entering the following command on cmd.

npm i -g angular-cli-ghpages --save

once all installation is getting complete next you have to build the app by the following command.

ng build --prod --base-href "https://username.github.io/repository_name/"

In my case, it could be

ng build --prod --base-href "https://mayurkadampro.github.io/Angular_deploy_demo/"

lastly, enter the below commands which creates a new branch called gh-pages and pushes the compiled code to the branch.

ngh --dir=dist/[project-name] OR angular-cli-ghpages

so we also upload the build over a Github.
Once we did that thing also then you ready to see your beautiful website over Github now you navigate to the URL to see the project running, it might take a few minutes for the app to become live. 😇

Still, Confuse ?? Then Check out below video

Here is deployed angular project which is hosted to GitHub -https://mayurkadampro.github.io/Angular_deploy_demo/

also, you can check your gh-pages -https://github.com/mayurkadampro/Angular_deploy_demo/tree/gh-pages

That’s it 🙂
hope you get it how very easily you will deploy your project over Github. if you have any queries then you can comment out also I will happy to respond to your query.

python simple snippest for remove tags, links and symbol from data without using regex📃

Mayur Kadam — Wed, 15 Jan 2020 18:21:09 +0000

PARENTHESES CheckerJava Program

Mayur Kadam — Tue, 14 Jan 2020 03:02:47 +0000

What is Cross-Site Scripting

Mayur Kadam — Sat, 11 Jan 2020 10:33:45 +0000

https://link.medium.com/9YBgMWuL82

Cross-site scripting Attack Tutorial

Mayur Kadam — Sat, 11 Jan 2020 10:09:02 +0000