Forem: Raunak Tamang

[Boost]

Raunak Tamang — Tue, 04 Nov 2025 18:34:18 +0000

Sunny Tamang

Nov 2 '25

pygitzen : a Python TUI Git client inspired by LazyGit!

#git #pythongit #github #python

Comments

1 min read

Contact form in material UI and firestore

Raunak Tamang — Sun, 04 Apr 2021 09:17:04 +0000

store data in firestore via the form in react and Material UI

save the contact form details in firestore

Available Scripts

In the project directory, you can run:

`npm start`

Runs the app in the development mode.\
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.\
You will also see any lint errors in the console.

step 1.

Let's create new react app and install the firebase and material UI in the project

npx create-react-app projectName

npm install -s firebase

npm install -s @material-ui/core

npm install -s @material-ui/styles

step 2.

create a firebase.js file for all the firebase config

it looks like this:

import firebase from 'firebase/app'
import firestore from 'firebase/firebase-firestore'

const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: ""
};

firebase.initializeApp(firebaseConfig);

export const db = firebase.firstore()

note: firebase config can be found under the project setting in firebase

step 3.

create a form to collect data from user and update in firestore

<div class={classes.root}>
        <Typography variant='h3'>contact us</Typography>
        <br />
        <br />
        <br />
        <form noValidate=''>
          <Grid
            container
            direction='column'
            justify='center'
            alignItems='center'
          >
            <Grid container item>
              <TextField
                require={true}
                id='name'
                label='Name'
                variant='outlined'
                autoComplete='new-name'
                fullWidth
                value={name}
                onChange={(e) => setName(e.target.value)}
              />
            </Grid>
            <br />
            <br />
            <Grid container item>
              <TextField
                required
                id='email'
                label='Email'
                variant='outlined'
                autoComplete='new-email'
                fullWidth
                value={email}
                onChange={(e) => setEmail(e.target.value)}
              />
            </Grid>
            <br />
            <br />
            <Grid container item>
              <TextField
                required
                id='message'
                label='Message'
                fullWidth
                multiline
                rows={4}
                value={message}
                variant='outlined'
                onChange={(e) => setMessage(e.target.value)}
              />
            </Grid>
            <br />
            <br />
            <br />
            <br />
            <Grid container item>
              <Button
                variant='contained'
                fullWidth
                color='primary'
                onClick={onSubmitHandler}
              >
                Submit
              </Button>    
            </Grid>
          </Grid>
        </form>
        <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
          <Alert onClose={handleClose} severity='success'>
            message submitted successfully!
          </Alert>
        </Snackbar>
      </div>

note: snackbar is for an alert that the user data is submitted successfully

so the gonna look like this

now we create state for our form input so we can capture on change values from the input field and write firestore command to save data in firestore.



const classes = useStyle()
    const [name, setName] = useState('');
    const [email, setEmail] = useState('');
    const [message, setMessage] = useState('');
    const [open, setOpen] = useState(false)


 const onSubmitHandler = (e) =>{
        e.preventDefault()
        db.collection('contact').add({
            name: name,
            email:email,
            message :message,
        })
        .then(() => {
            setOpen(true);
        })
        .catch((error) =>{
            alert(error.message)
        })

       setName("")
       setEmail("")
       setMessage("")

    }

create a function for snackbar

   const handleClose = (e, reason) =>{
        if (reason === 'clickaway'){
           return(
               console.log("working")
           ) 
        }
        setOpen(false)
    }

    function Alert(props) {
      return <MuiAlert elevation={6} variant='filled' {...props} />;
    }

for styling the elements

we use makesStyles function from material to design our form


const useStyle = makeStyles((theme) => ({
    root:{
        width:"450px",
        marginTop:"150px",
        marginLeft:"600px"

    }
}))

note: we call usestyle ()
by using other variable(in this case i use classes = useStyles())

So that's it everyone
Hope you Enjoy!

for source code visit my Github Repo : https://github.com/cyber-hoax/react-firestore

unknown image updater using Django

Raunak Tamang — Mon, 01 Feb 2021 06:52:23 +0000

Unknown_Updater

update image from unknown to know folder or delete the image from directory using Django.

This is one of the side experiments I have done with Django.

prerequisite

Django

python

Creating an app in Django

python3 manage.py startapp updater

settings.py

we have to integrate the HTML page from the backend for that we have to set the directory.

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

set the static directory to fetch the images

STATIC_URL = '/updater/'

STATICFILES_DIRS = [os.path.join(BASE_DIR, "updater")]

models.py

creating a database with three fields first name, second name and uid, which can be utilize to identify uniqueness between users

from django.db import models

class UserDetail(models.Model):
    first_name = models.CharField(max_length=50)
    last_name = models.CharField(max_length=50)
    hybrid_uid = models.CharField(max_length=50, default="")

views.py

in view.py we right all our business logic inside of it

from django.shortcuts import render
import os
import shutil
# Create your views here.

from django.http import HttpResponseRedirect
from django.shortcuts import redirect
from .models import UserDetail
from unknown_updater import settings

#grab all the images in list and render in frontend
def index(request ):

    fileNames = os.listdir('updater/unknown/')
    hists = [ file for file in fileNames]
    print(hists)
    names = UserDetail.objects.all()


    print(names)

    #extract value from form from forntend
    if request.method == 'POST' :
        if request.POST['submit'] == 'Submit':
            a = request.POST['user_id']
            firstName, lastName = a.split(' ', )
            print(firstName) 
            print(lastName)
            uids  = UserDetail.objects.get(first_name=firstName ,last_name = lastName)
            print(uids.hybrid_uid)
            files = request.POST["img"]
            source_directory = settings.BASE_DIR+"/updater/unknown/"+str(files)
            destination_directory = settings.BASE_DIR+"/updater/known_user/"+str(uids.hybrid_uid)+"/"+str(files)
            shutil.move(source_directory , destination_directory)
            print(files)
            return HttpResponseRedirect('/polls')
        else:
            if request.POST['submit'] == 'delete':
                files = request.POST["img"]
                os.remove(settings.BASE_DIR+"/updater/unknown/"+str(files))
                print(files)
                return HttpResponseRedirect('/polls')



    return render(request , 'home.html', {'hists':hists , 'names' : names})

for full source code click on the GitHub link:
https://github.com/cyber-hoax/Unknown_Updater/blob/main/README.md

Send and Receive message in WhatsApp using twilio & python

Raunak Tamang — Fri, 11 Sep 2020 15:25:14 +0000

Previously, i made WhatsApp automation using python selenium, this time i thought to do more with it and used twilio to send and receive messages from WhatsApp using twilio and flask

prerequisite:

$ pip install flask
$ pip install twilio
install ngrok
make twilio trial account

first for most integrate your number with twilio sandbox

app.py

packagae to import :

from flask import Flask, request ,render_template
from twilio.twiml.messaging_response import MessagingResponse 

from twilio.rest import Client

For sending message

app.py

@app.route("/" , methods = ['GET' , 'POST'])

def index():

    if request.method == "POST":
        fname = request.form['fname']
        lname = request.form['lname']
        pname = request.form['pname']


        sid = 'account_sid'
        auth = 'auth_token'

        client = Client(sid,auth)

        message = client.messages.create(
             from_='whatsapp:+14155238886',  
             body='hello ' +  str(fname) + " " +  str(lname) +  ' welcome to Tanzible',   
             to='whatsapp:+91'+str(pname)
        )

        return 'registration successfully'

    return render_template('index.html')

for receiving message

first we have to configure ngrok to put localhost to on public address

so download ngrok and install it via command line where is you ngrok file

./ngrok http 5000

5000 is by default port given by flask

def msg(request):
    if request.method == 'POST':
        resp = MessagingResponse()
        resp.message("Thank you for contacting us! Our team will shortly in touch with you ")
        print(resp)
        return str(resp)

That's all folk !

check code in my GitHub https://github.com/cyber-hoax/WhatsApp_twilio

login auth and registration using Django and PostgreSQL

Raunak Tamang — Fri, 17 Jul 2020 07:13:45 +0000

create login authentication and registration with postgresql in django

Installation
creata an virtual environment

$ virtualenv envname

(i hope you know how to activate the environment) if you don't have installed virtual environment in your PC

$ pip install virtualenv

install django in your environment

$ pip install django

$ pip3 install django

Create django project

django-admin startproject projcetname

Test
here I'm using authentication as my app check if everything set up nicely!

python manage.py runserver

and open browser go to localhost:8000

create an app inside the project

python manage.py startapp appname

now see you will have a new folder with your app name

then create a urls.py folder inside your app folder for routing

setup views.py for workflow and urls.py(authentication ) for routing
copy the path module from main urls.py form your project and setup route how you want it inside (urlpatterns =[])

from django.urls import path
from . import views
urlpatterns = [
path('', views.index , name='index'),
path('register', views.register, name='register' ),
path('custom',views.custom , name= 'custom'),
path('home',views.home , name= 'home'),]

the below file links your app urls

from django.contrib import admin
from django.urls import path , include
urlpatterns = [
path('',include('authentication.urls')),
path('admin/', admin.site.urls),

for html
to use html in your project make the templates foleder and put all your html file. and set the directory in setting.py file in TEMPLATES section.

'DIRS': [os.path.join(BASE_DIR, 'templates')],

for CSS,js,media
for all these stuff you can make a static folder and put all these here. set the directory in setting.py file in below STATIC_URL variable.

STATICFILES_DIRS = [
    os.path.join(BASE_DIR,'static')
]

STATIC_ROOT = os.path.join(BASE_DIR,'assests')
setting database
In setting.py file in the project directory lookup to DATABASES variable set your engine name, database name, user, password, host and port

DATABASES = {
    'default': {
    'ENGINE': 'django.db.backends.postgresql',
    'NAME': 'test',
    'USER': 'postgres',
    'PASSWORD': '8080',
    'HOST':'localhost'

}

}

you have to install an adapter to connect your database with your application so we have to install psyopg2

pip install psyopg2

pip3 install psycopg2

for login auth:

def index(request):

if request.method == 'POST':
    username = request.POST['username']
    password = request.POST['password']

    user = auth.authenticate(username = username, password =password  )

    if user is not None:
        auth.login(request , user)
        return redirect('/home')    
    else:
        messages.info(request, 'invalid username or password')
        return redirect("/")
else:
    return render(request,'index.html')

for registration :
def register(request):

if request.method == 'POST':

    email = request.POST['email']
    username = request.POST['username']
    password= request.POST['password']


    user = User.objects.create_user(username = username , password = password , email = email)
    user.save()
    print('user created')
    return redirect('/custom')

return render(request,'register.html')


def custom(request):
    return render(request, 'custom.html')


def home(request):
    return render(request, 'home.html')

that's all look into authentication folder and template folder for how things work especially views.py and urls.py file. these both are import file for communicating between the application and main projects

Github link https://github.com/cyber-hoax/login_auth_django_postgres

stream multiple camera using OpenCV

Raunak Tamang — Mon, 06 Jul 2020 06:29:01 +0000

hey folks, recently I am working on a project which needs hand-on experience on OpenCV. As I am a newbie in the OpenCV framework I tried to use the basic kinds of stuff out of it, so I started to work with reading the camera and stream it. just simple and easy kind of stuff.


import numpy as np
    import cv2


    #capture the webcam
    vid1 = cv2.VideoCapture(0)
    vid2 = cv2.VideoCapture(1)
    vid3 = cv2.VideoCapture('http://192.168.2.2:5000/video') 
                                          #ipwebcam address 


    while True:                    #while true, read the camera
        ret , frame = vid1.read()
        re1 , frame1 = vid2.read()
        ret2 , frame2 = vid3.read()

        if (ret):
            cv2.imshow('cam0',frame)    #frame with name and 
                                        variable of the camera 
            cv2.imshow('cam1', frame1)
            cv2.imshow('cam3',frame2)

        if cv2.waitKey(1) & 0xFF == ord('q'):      #to break the 
                                    loop and terminate the program 
            break

    vid1.release()
    vid2.release()
    vid3.release()


you can check out this in GitHub too
https://github.com/cyber-hoax/camera_stream_openCV

automate WhatsApp messages using Python

Raunak Tamang — Sat, 06 Jun 2020 10:36:14 +0000

Project Title
Automate WhatsApp for sending messages to any particular person or group in WhatsApp.

Getting Started
It's not totally automated as the QR scan should be scanned manually. Everything is working fine with code as you soon run the code chrome will pop up and open WhatsApp web and scan the QR code from your phone. then type the contact name in the console box and the message you want to send and the number of times you wanna send.

prerequisites
Selenium Library

Chrome driver

installing

install selenium

python3 -m pip install selenium

Download and install chromedriver

download chrome driver here
code :

import web driver from selenium

from selenium import webdriver

creating an obect to open chrome and set the path inside () of chrome driver

driver = webdriver.Chrome('/Users/rauna/Downloads/chromedriver')

passing the WhatsApp url

driver.get('https://web.whatsapp.com/')

getting data from user

name = input('enter the name of user')
msg = input('enter your message')
count = int(input("enter the count"))
input('enter after scanning QR code')

saving the defined contact name from your WhatsApp chat in user variable

user = driver.find_element_by_xpath('//span[@title = "{}"]'.format(name))

user.click()

name of span class of contatct

msg_box = driver.find_element_by_class_name('_13mgZ')

for i in range(count):
msg_box.send_keys(msg)
button = driver.find_element_by_class_name('_3M-N-')
button.click()

snippet from above code:
user = driver.find_element_by_xpath('//span[@title = "{}"]'.format(name))

you can see why [@title = "{}"] because user providing the name of the contact person you wanna send the message screenshot

msg_box = driver.find_element_by_class_name('_13mgZ')

('_13mgZ') is the class name of typing box you can see the image below

screenshot

button = driver.find_element_by_class_name('_3M-N-')

('_3M-N-') is the class name of send button as you can see in image below

screenshot

Output :
screenshot

screenshot

check out GitHub for a better understanding link is here:
https://github.com/cyber-hoax/automatewhatsapp

python #selenium #automation #WhatsApp