August 2023 - AdnanTech

How to free up space in Mac

Posted on August 31, 2023December 6, 2023 by adnanafzal565

In this article, we will show you how you can free up some space in your Mac. If you are running low on space, this is for you.

My Mac was running on 5-6 GB and it keeps getting lower as I work more. So I did the following actions and now my Mac has 37 GB of free space.

1. Goto “home”.

2. Enable hidden files by pressing Command + shift + dot

3. If you do not do iOS development, then it is safe to remove the “.cocoapods” folder.

4. After that, you need to check each folder and see if there is any cache folder in it. You can safely remove all cache folders inside each folder.

4. Then you need to go to “Library”.

5. Remove the “Caches” folder.

6. When you uninstall an app, its files remain there in the “Library” folder. So check all the apps/software that you have uninstalled or no longer use, and delete their folders too.

If you follow the above steps, it will free up a lot of space in your Mac.

Check if time is passed – Python

Posted on August 27, 2023 by adnanafzal565

In this tutorial, you will learn how to check if the time is passed in Python.

First, we will get the future time in UTC. In order to get this, first we will get the current time in UTC.

Then we will add 24 hours in it.

After that, we will get time_struct object from it. This will be used to get the Unix timestamp.

Then we will the Unix timestamp using the time_struct object.

Same can be done for getting the current time in UTC but without adding 24 hours in it.

delta is the difference between future Unix timestamp and current one.

Then we will convert the seconds into minutes by dividing it to 60 since each minute has 60 seconds.

And again dividing that to 60 since each hour has 60 minutes. This will return the number of hours since the time is passed.

Finally, we will check if the delta is less than or equal to zero. If it is, it means that the time is passed. If not, it means that the time is not passed yet.

from datetime import datetime, timezone, timedelta
import time
 
future_time = datetime.now(timezone.utc)        # current datetime in UTC
future_time = future_time + timedelta(hours=24) # current time + 24 hours
future_time = future_time.timetuple()           # instance of time.struct_time
future_time = time.mktime(future_time)          # Unix timestamp
 
current_time = datetime.now(timezone.utc)       # current datetime in UTC
current_time = current_time.timetuple()         # instance of time.struct_time
current_time = time.mktime(current_time)        # Unix timestamp
 
delta = future_time - current_time              # difference between future datetime and current datetime (in seconds)
delta = delta / 60 / 60                         # convert seconds into hours
 
if delta <= 0:                                  # check if the time is passed
    print("Time passed")
else:
    print("Time not passed")

You can check the real-world example of this in the URL shortener app we created in Python.

Convert UTC to local timezone – Python

Posted on August 27, 2023 by adnanafzal565

Here’s how you can get the date and time in UTC and convert it to user’s local timezone in Python.

from fastapi import FastAPI
from datetime import datetime, timezone as timezone_module
from dateutil import tz
 
app = FastAPI()
 
utc = datetime.now(timezone_module.utc)
 
# Hardcode zones:
from_zone = tz.gettz("UTC")
to_zone = tz.gettz("Asia/Karachi")
 
# you can get user's local timezone in Javascript using following code:
# Intl.DateTimeFormat().resolvedOptions().timeZone
 
# Tell the datetime object that it's in UTC time zone since 
# datetime objects are 'naive' by default
utc = utc.replace(tzinfo=from_zone)
 
# Convert time zone
local = utc.astimezone(to_zone)
 
# get in readable format
local = local.strftime("%b %d, %Y %H:%M:%S")
 
print(local)

Comments has been added with each line for explanation. You can check its real-world example in a URL shortener app we created in Python.

How to fix CORS error in FastAPI Python

Posted on August 27, 2023November 8, 2023 by adnanafzal565

If you are developing an application and getting CORS error in Python FastAPI, then you can fix it by first importing the CORS middleware from FastAPI module. Then you need to add that middleware in your FastAPI “app” instance. Allow all origins, all credentials, and all methods and headers.

from fastapi import FastAPI
 
from fastapi.middleware.cors import CORSMiddleware
 
app = FastAPI()
 
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"]
)

It will fix CORS error in your Python FastAPI. Learn how to create a URL shortener app in Python.

Replace all occurrences in a string – Javascript

Posted on August 25, 2023 by adnanafzal565

To replace all the occurrences in a string in Javascript, we will use the following method.

For example, you have the following string variable.

1	`let` `string =` `"adnan_tech_com"`

And you want to replace all underscores with a white space.

You can use the following code to replace all occurrences of underscores with a whitespace.

1	`string = string.split("_").join(" ")` `// adnan tech com`

Explanation

First, you need to split the string by underscore. It will return an array.

let string = "adnan_tech_com"
 
string = string.split("_") // ["adnan", "tech", "com"]

Then we can join the array by whitespace.

let string = "adnan_tech_com"
 
string = string.split("_")
 
string = string.join(" ") // adnan tech com

Don’t use replace()

You should not use “replace” function because it will replace only the first occurrence in a string.

let string = "adnan_tech_com"
 
string = string.replace("_", " ") // adnan tech_com

Checkout our more tutorials on Javascript.

How to fix CORS error in Socket IO NodeJS

Posted on August 23, 2023November 8, 2023 by adnanafzal565

In this short tutorial, I will show you how you can fix CORS error in socket IO in NodeJS.

First, you need to use the socket IO import statement in following way:

const socketIO = require("socket.io")(http, {
    cors: {
        origin: "*"
    }
})

Then, with your Express app instance, you can set the following headers.

// Add headers before the routes are defined
app.use(function (req, res, next) {
 
    // Website you wish to allow to connect
    res.setHeader("Access-Control-Allow-Origin", "*")
 
    // Request methods you wish to allow
    res.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, PATCH, DELETE")
 
    // Request headers you wish to allow
    res.setHeader("Access-Control-Allow-Headers", "X-Requested-With,content-type,Authorization")
 
    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader("Access-Control-Allow-Credentials", true)
 
    // Pass to next layer of middleware
    next()
})

Create middleware for specific route – Python

Posted on August 17, 2023November 8, 2023 by adnanafzal565

If you are creating an API in Python, and came across a problem where you have to create a middleware but for only specific route. For example, you are creating a user authentication system and want to create a middleware that checks if the user is logged-in. But you want to use that middleware for only few routes, not for all routes. Then this tutorial is for you.

This can be done by creating subapps in Python. To create a subapp in Python, first we need to create a file where we will save the global variable of our subapp.

Create a file, let’s say config.py, and write the following code in it.

# config.py
 
from fastapi import FastAPI
 
my_middleware_app = FastAPI()

Now create a file for our middleware, I am naming it my_middleware.py. Following will be the code of this file.

from fastapi import Request
from config import my_middleware_app
 
from fastapi.responses import JSONResponse
from fastapi.encoders import jsonable_encoder
 
@my_middleware_app.middleware("http")
async def my_func(request: Request, call_next):
    if "Authorization" in request.headers:
        print(request.headers["Authorization"])
 
        request.state.name = "Adnan"
        response = await call_next(request)
        return response
    else:
        return JSONResponse(content=jsonable_encoder("Authorization header not provided."))

Explanation:

First, it imports the subapp “my_middleware_app” from “config” module.
Then it imports “JSONResponse” and “jsonable_encoder” from “fastapi” modules. They will be required to send the response back to the client.
- You can learn more about it from fastapi official documentation.
Then we are creating a middleware using our subapp “my_middleware_app”.
In this, we are checking if the request has “Authorization” header provided.
- To learn more about authorization in Python, check our tutorial on user authentication.
If not, then we are sending an error.
If provided, then we are attaching a “name” variable with the request and pass it to the route.

Now let me show you, how the route can use this middleware and how route can access the “name” variable.

Following will be the content of our main.py file where the route will be created.

# main.py
 
from fastapi import FastAPI, Request
from config import my_middleware_app
import my_middleware
 
app = FastAPI()
 
@my_middleware_app.post("/my-route")
def my_route(request: Request):
    return request.state.name
 
app.mount("/", my_middleware_app)

We first imported the subapp module and the middleware.

Then we created an instance of FastAPI (the main app).

After that, we are creating a post route using our subapp. In this route, we are using the “name” variable we created in our middleware.

To send value from middleware to route, we can use request.state object.

And lastly, we are mounting the subapp to our main app.

Creating a middleware and using it just for specific route in Python is a bit confusing sometimes. So if you face any problem in following this, please do not hesitate to get in touch with me.

Create global variable between modules – Python

Posted on August 16, 2023 by adnanafzal565

In this tutorial, we will show you how you can create global variable and access them in different modules in Python.

First, you need to create a file, let’s say “config.py“. And write all your global variables in it.

# config.py
 
my_name = "Adnan"

Here, I have created a global variable my_name. In order to access it in any other module, simply import it. Then you can use them as normal variables.

# any_other_module.py
 
# method 1
 
from config import my_name
 
print(my_name)

There is another method to import the module.

# any_other_module.py
 
# method 2
 
import config
 
print(config.my_name)

That is how you can create global variable and use it in multiple modules in Python. Kindly let me know if you face any problem in following this.

Get age from date of birth – Javascript

Posted on August 13, 2023 by adnanafzal565

Suppose you are given a date of birth of any user and you have to get his age from it. You can do it in Javascript using the following code:

const date = new Date("1993-07-27")
const current_date = new Date()
 
let age = current_date.getTime() - date.getTime()
// 948161820692
 
age = new Date(age)
// 2000-01-18T02:17:18.105Z
 
age = age.getFullYear()
// 2000
 
age = age - 1970
// 30

JWT Authentication in Python and Mongo DB

Posted on August 12, 2023 by adnanafzal565

In the previous tutorial, we created a URL shortener app where user can make their URL short and easily shareable. In this tutorial, we are going to add authentication using JWT (Json Web Token) in Python.

Create a Vuex store

First, we need to create a Vuex store. So run the following command in your “web” folder to install Vuex module:

1	`> npm` `install` `vuex`

After that, go to your “web/src” folder and create a file named “store.js”. Write the following code in that file.

import { createStore } from "vuex"
 
export default createStore({
    state() {
        return {
            user: null
        }
    },
 
    mutations: {
        set_user(state, user) {
            state.user = user
        }
    },
 
    getters: {
        get_user(state) {
            return state.user
        }
    }
})

This will be used to get and set the global variable “user” throughout the application.

Fetch authenticated user

Then goto your AppHeader component and import the following modules:

import axios from "axios"
import swal from "sweetalert2"
import store from "../../store"

And change your export default object to the following:

export default {
    name: "AppHeader",
 
    computed: {
        user() {
            return store.getters.get_user
        }
    },
 
    methods: {
 
        async get_data() {
            const formData = new FormData()
            formData.append("access_token", localStorage.getItem(this.$access_token_key))
            formData.append("timezone", Intl.DateTimeFormat().resolvedOptions().timeZone)
             
            try {
                const response = await axios.post(
                    this.$api_url + "/me",
                    formData
                )
                 
                if (response.data.status == "success") {
                    store.commit("set_user", response.data.user)
                }
            } catch (exp) {
                console.log(exp)
            }
        }
    },
 
    mounted() {
        this.get_data()
    }
}

This will call can AJAX to the Python API to fetch the authenticated user and save them in Vuex store. Now we need to create an API in Python that will handle this request.

Open terminal in your “api” folder and run the following command to install JWT module. It will be used for generating Json Web Tokens.

1	`> pip3` `install` `pyjwt`

Open your “api/api.py” file and import this module.

1	`import` `jwt, time`

We will also be needing time module to convert the current time into Unix timestamp. That will be used to expire the JWT after 24 hours.

Then create a variable for JWT secret. It can be any random string.

1	`jwt_secret` `=` `"qwertyuiopasdfgfhjklzxcvbnm"`

Then create the following API.

@app.post("/me")
def get_user(timezone: Annotated[str, Form()], access_token: Annotated[str, Form()]):
 
    user = None
 
    try:
        payload = jwt.decode(access_token, jwt_secret, algorithms = "HS256")
         
        dt1 = time.mktime(datetime.now().timetuple())
        dt2 = payload["exp"]
        delta = dt2 - dt1
        delta = delta / 60 / 60
 
        if delta <= 0:
            return {
                "status": "error",
                "message": "You have been logged-out."
            }
 
        user = db["users"].find_one({
            "$and": [{
                "_id": ObjectId(payload["user_id"])
            }, {
                "access_token": access_token
            }]
        })
 
        if user == None:
            return {
                "status": "error",
                "message": "You have been logged-out."
            }
 
        return {
            "status": "success",
            "message": "User has been fetched.",
            "user": {
                "_id": str(user["_id"]),
                "name": user["name"],
                "email": user["email"]
            }
        }
    except Exception as error:
        return {
            "status": "error",
            "message": "You have been logged-out.",
            "error": str(error)
        }
    else:
        pass
    finally:
        pass

The API will first decode the JWT. It will return payload containing “user_id” and “exp” in Unix timestamp. “exp” is expiry date of JWT.

Then it takes the difference between current time and the expiry time. Difference “delta” will be in seconds. So we will convert it into hours and check if it is greater than 24.

If JWT is not expired yet, we will check if the user exists using his ID and access token. And return the response to the client.

If you test the app now, and open your browser’s “Network” tab. You will see that right now you are getting “status” as “error”. This is because no user is signed-in yet.

Login/signup

In your AppHeader component, create the following links in navbar.

<template v-if="user == null">
    <li class="nav-item">
        <router-link class="nav-link" to="/login">Login</router-link>
    </li>
 
    <li class="nav-item">
        <router-link class="nav-link" to="/signup">Sign up</router-link>
    </li>
</template>
 
<li class="nav-item" v-else>
    <a href="javascript:void(0)" v-on:click="logout" class="nav-link">Logout</a>
</li>

Right now, it will show you login and sign up links. We will first do the sign up feature.

Sign up

Create a file named “SignupComponent.vue” in your “web/src/components” folder. Open “web/src/main.js” and import the SignupComponent:

1	`import` `SignupComponent from` `"./components/SignupComponent.vue"`

And add it in “routes” array.

1	`{ path:` `"/signup", component: SignupComponent },`

Following will be the content of SignupComponent.

<template>
    <div class="container" style="margin-top: 50px;">
        <div class="row">
            <div class="offset-md-3 col-md-6">
 
                <h2 style="margin-bottom: 30px; text-align: center;">Sign up</h2>
 
                <form method="POST" v-on:submit.prevent="signup">
                    <div class="form-group">
                        <label>Enter name</label>
                        <input type="text" class="form-control" name="name" required />
                    </div>
 
                    <br />
 
                    <div class="form-group">
                        <label>Enter email</label>
                        <input type="email" class="form-control" name="email" required />
                    </div>
 
                    <br />
 
                    <div class="form-group">
                        <label>Enter password</label>
                        <input type="password" class="form-control" name="password" required />
                    </div>
 
                    <br />
 
                    <input type="submit" v-bind:value="isLoading ? 'Loading...' : 'Register'" v-bind:disabled="isLoading" name="submit" class="btn btn-primary" />
                </form>
            </div>
        </div>
    </div>
</template>
 
<script>
 
    import axios from "axios"
    import swal from "sweetalert2"
 
    export default {
        name: "SignupComponent",
 
        data() {
            return {
                isLoading: false
            }
        },
 
        methods: {
            signup: async function () {
                const form = event.target;
                const formData = new FormData(form);
 
                this.isLoading = true;
 
                try {
                    const response = await axios.post(
                        this.$api_url + "/signup",
                        formData
                    );
                     
                    swal.fire("Signup", response.data.message, response.data.status)
 
                    if (response.data.status == "success") {
                        form.reset();
                    }
                } catch (exp) {
                    console.log(exp)
                } finally {
                    this.isLoading = false
                }
            }
        }
    }
</script>

Then in your “api/api.py”, we need to create an API in Python that will handle this request. We need to encrypt the passwords before storing them in database. So install the bcrypt module in Python.

1	`> pip3` `install` `bcrypt`

Then import it in “api/api.py”.

1	`import` `bcrypt`

And then create an API that will save the user’s data in database.

@app.post("/signup")
def signup(name: Annotated[str, Form()], email: Annotated[str, Form()], password: Annotated[str, Form()]):
 
    user = db["users"].find_one({
        "email": email
    })
 
    if user != None:
        return {
            "status": "error",
            "message": "Email already exists."
        }
 
    db["users"].insert_one({
        "name": name,
        "email": email,
        "password": bcrypt.hashpw(password.encode("UTF-8"), bcrypt.gensalt()),
        "created_at": datetime.now(timezone_module.utc)
    })
 
    return {
        "status": "success",
        "message": "Account has been created. Please login now."
    }

Login

Create a file named “LoginComponent.vue” in your “web/src/components” folder. Open “web/src/main.js” and import the LoginComponent:

1	`import` `LoginComponent from` `"./components/LoginComponent.vue"`

And add it in “routes” array.

1	`{ path:` `"/login", component: LoginComponent },`

Following will be the content of LoginComponent:

<template>
    <div class="container" style="margin-top: 50px;">
        <div class="row">
            <div class="offset-md-3 col-md-6">
 
                <h2 style="margin-bottom: 30px; text-align: center;">Login</h2>
 
                <form method="POST" v-on:submit.prevent="login">
 
                    <div class="form-group">
                        <label>Enter email</label>
                        <input type="email" class="form-control" name="email" required />
                    </div>
 
                    <br />
 
                    <div class="form-group">
                        <label>Enter password</label>
                        <input type="password" class="form-control" name="password" required />
                    </div>
 
                    <br />
 
                    <input type="submit" v-bind:value="isLoading ? 'Loading...' : 'Login'" v-bind:disabled="isLoading" name="submit" class="btn btn-primary" />
                </form>
            </div>
        </div>
    </div>
</template>
 
<script>
 
    import axios from "axios"
    import swal from "sweetalert2"
    import store from "../store"
 
    export default {
        name: "LoginComponent",
 
        methods: {
            login: async function () {
                const form = event.target;
                const formData = new FormData(form);
 
                this.isLoading = true;
 
                try {
                    const response = await axios.post(
                        this.$api_url + "/login",
                        formData
                    )
 
                    if (response.data.status == "success") {
                        // get access token from server
                        const access_token = response.data.access_token
 
                        // save in local storage
                        localStorage.setItem(this.$access_token_key, access_token)
 
                        store.commit("set_user", response.data.user)
                        form.reset()
 
                        // to go to home page without refreshing
                        this.$router.push("/")
                    } else {
                        swal.fire("Error", response.data.message, "error")
                    }
                } catch (exp) {
                    console.log(exp)
                } finally {
                    this.isLoading = false
                }
            }
        }
    }
</script>

Once user is logged-in, we will save the access token in local storage and redirect the user to home page. In your main.js file, create a variable that will hold the key for local storage value.

1	`app.config.globalProperties.$access_token_key =` `"access_token"`

Now in your “api/api.py” import the timedelta module. We will be using this module to add 24 hours in current date for setting expiry date of JWT.

1	`from` `datetime` `import` `timedelta`

Create the following API in Python that will do the authentication using JWT.

@app.post("/login")
def login(email: Annotated[str, Form()], password: Annotated[str, Form()]):
 
    user = db["users"].find_one({
        "email": email
    })
 
    if user == None:
        return {
            "status": "error",
            "message": "Email does not exists."
        }
 
    if bcrypt.checkpw(password.encode("UTF-8"), user["password"]) != True:
        return {
            "status": "error",
            "message": "Password is in-correct."
        }
 
    access_token = jwt.encode({
        "user_id": str(user["_id"]),
        "time": datetime.now(timezone_module.utc).timetuple(),
        "exp": datetime.now(timezone_module.utc) + timedelta(hours=24)
    }, jwt_secret, algorithm = "HS256")
 
    db["users"].find_one_and_update({
        "_id": user["_id"]
    }, {
        "$set": {
            "access_token": access_token
        }
    })
 
    return {
        "status": "success",
        "message": "Login successfully.",
        "access_token": access_token,
        "user": {
            "_id": str(user["_id"]),
            "name": user["name"],
            "email": user["email"]
        }
    }

It will first check if the email exists. Then it will check the password against the hashed password saved in database. Then it will generate an access token using algorithm “HS256”.

Test the app now. You will be able to login now. And once logged-in, you will no longer see login/signup links in the navbar. Instead, you will see a button for logout.

Logout

Logout button in navbar already have an onclick listener attached to it. We need to create its method in AppHeader component.

async logout() {
    const formData = new FormData()
    formData.append("access_token", localStorage.getItem(this.$access_token_key))
     
    try {
        const response = await axios.post(
            this.$api_url + "/logout",
            formData
        )
         
        if (response.data.status == "success") {
            store.commit("set_user", null)
            localStorage.removeItem(this.$access_token_key)
            this.$router.push("/login")
        }
    } catch (exp) {
        console.log(exp)
    }
},

This will call an AJAX to the Python API. Once user is logged-out, it will:

Set the “user” store value to null.
Remove access token from local storage.
Redirect the user to login page.

Last step we need, is to create an API in Python that will handle this AJAX request.

# api/api.py
 
@app.post("/logout")
def logout(access_token: Annotated[str, Form()]):
    try:
        payload = jwt.decode(access_token, jwt_secret, algorithms = "HS256")
 
        db["users"].find_one_and_update({
            "_id": ObjectId(payload["user_id"])
        }, {
            "$unset": {
                "access_token": 1
            }
        })
 
        return {
            "status": "success",
            "message": "User has been logged-out."
        }
    except Exception as error:
        return {
            "status": "error",
            "message": "You have been logged-out.",
            "error": str(error)
        }

It simply removes the “access_token” key from that user’s Mongo DB document. Try to logout now, you will be redirected to login page and you will again see the login/signup links in the navbar.

So that’s how you can do the user authentication in Python using JWT.