DEV Community: sium_hossain

How to enable hot reload in your Gin project

sium_hossain — Thu, 22 Aug 2024 11:46:32 +0000

Gin is one of the fastest frameworks in the Go world. However, there is one feature missing in Gin is hot realod. So that in this blog I can show you how can you enable hot reaload feature in your Gin project.

Suppose this is your main.go fie

package main

import (
    "fmt"
    "net/http"
    "github.com/gin-gonic/gin"
)

func successResponse(data interface{}) gin.H {
    return gin.H{
        "status": "success",
        "data": data,
    }
}

func successResponseWithMessageAndCode(data interface{}, message string, code int,c *gin.Context) {
    c.JSON(code, gin.H{
        "status": "success",
        "data": data,
        "message": message,
    })
}

func main() {
    r := gin.Default()
    fmt.Println("Hello World")
    r.GET("/", func(c *gin.Context) {
        data:= map[string]interface{}{
            "message": "Hello World",
        }
        successResponseWithMessageAndCode(data, "Success", http.StatusOK, c)
    })

    r.GET("/hello", func(c *gin.Context) {
        c.JSON(http.StatusOK, gin.H{
            "message": "Hello World",
        })
    })

    r.Run("localhost:8080")

}

So we can use Air (https://github.com/air-verse/air) - Live reload for your Go apps

Install Air by using this command 👇

go install github.com/air-verse/air@latest

Then add .air.toml file using this command

air init

If the air command is not found, it might be because the Go bin directory is not in your PATH

In that case I’m using fish terminal

First, let's find out where Go installs binaries. Run this command:

echo $GOPATH/bin

If $GOPATH is not set, the default location is usually ~/go/bin.

Now, let's add this directory to your PATH in Fish. Open your Fish configuration file:

nano ~/.config/fish/config.fish

Add the following line to the file:

set -gx PATH $PATH $GOPATH/bin

If $GOPATH is not set, use the full path, like:

set -gx PATH $PATH ~/go/bin

Save the file and exit the editor.
Reload your Fish configuration:

 ~/.config/fish/config.fish

Now try running air again:

air

If you are using bash terminal you have to edit your .~/bashrc file.

Now edit .air.toml file

root = "."
tmp_dir = "tmp"

[build]
cmd = "go build -o ./tmp/main ."
bin = "tmp/main"
full_bin = "APP_ENV=dev APP_USER=air ./tmp/main"
include_ext = ["go", "tpl", "tmpl", "html"]
exclude_dir = ["assets", "tmp", "vendor"]
include_dir = []
exclude_file = []
log = "air.log"
delay = 1000 # ms
stop_on_error = true
send_interrupt = false
kill_delay = 500 # ms

[log]
time = false

[color]
main = "magenta"
watcher = "cyan"
build = "yellow"
runner = "green"

[misc]
clean_on_exit = true

Ensure your Gin application listens on localhost instead of just :8080 for better hot-reload behavior

r.Run("localhost:8080")

And now instead of run go run main.go , just run air and then see the magic.

This is the first Chrome extension I built as a hobby

sium_hossain — Mon, 06 May 2024 05:46:58 +0000

This is the first Chrome extension I built as a hobby.
check that out 👉 https://lnkd.in/eXYurFVs

🔐 Secure your computer tabs with a password when others use your device

🤔 Have you ever had to share your device with someone and worried they might access websites you want to keep private? Tab Protector is here to help. Set a password for any tab you choose, ensuring that any specific URL under the root domain is secure. Just remember not to pin it to your Chrome extension bar 😅

Represent a directory tree in a Github README.md

sium_hossain — Sun, 16 Apr 2023 05:47:59 +0000

Do you want to add your project structure tree in your .readme file?

Install tree



sudo apt install tree

Just type tree inside of your project directory



tree

If you want to ignore a folder from your tree like node_modules, you can do this by



tree -I node_modules

How about you want to ignore multiple folder from your tree, you can do this by



tree -I "node_modules|venv|lib"

Scalable & Event Driven simple ticket buying system with Kafka & Python

sium_hossain — Wed, 01 Mar 2023 17:52:28 +0000

Apache Kafka is a distributed event store and stream-processing platform. It is an open-source system developed by the Apache Software Foundation written in Java and Scala. The project aims to provide a unified, high-throughput, low-latency platform for handling real-time data feeds.

We are gonna build a simple ticket buying system just to understand basic consumer and producer functionality in Kafka

First of all we need to setup kafka, zookeeper and python kafka package.

For kafka and zookeeper I'm using docker for installation. Here is the docker-compose.yml file

version: '2'
services:
  zookeeper:
    image: confluentinc/cp-zookeeper:latest
    environment:
      ZOOKEEPER_CLIENT_PORT: 2181
      ZOOKEEPER_TICK_TIME: 2000
    ports:
      - 22181:2181
  kafka:
    image: confluentinc/cp-kafka:5.3.1
    depends_on:
      - zookeeper
    ports:
      - 29092:29092
    environment:
      KAFKA_BROKER_ID: 1
      KAFKA_ZOOKEEPER_CONNECT: zookeeper:2181
      KAFKA_ADVERTISED_LISTENERS: PLAINTEXT://kafka:9092,PLAINTEXT_HOST://localhost:29092
      KAFKA_LISTENER_SECURITY_PROTOCOL_MAP: PLAINTEXT:PLAINTEXT,PLAINTEXT_HOST:PLAINTEXT
      KAFKA_INTER_BROKER_LISTENER_NAME: PLAINTEXT
      KAFKA_OFFSETS_TOPIC_REPLICATION_FACTOR: 1

And also you have to install kafka-python-package

pip install kafka-python

All things done! Let's get into coding

Summary

Let's think from frontend, suppose user will request of buying ticket from fronted, behind the scene our kafka producer will send streams of data to the Kafka cluster with respected data. And one kafka consumer will allows applications to read streams of data from the cluster. And we can make as producer and consumer API as much as we need for different different task.

Code

producer.py

import json
from faker import Faker
# faker package just use for some random data

fake = Faker() 
from kafka import KafkaProducer

producer = KafkaProducer(bootstrap_servers="localhost:29092")
for i in range(40_000):

    data = {
        "tiket_id":i,
        "user_id": fake.name(),
        "price": 100,
        "bank_account": fake.bban()
    }

    producer.send("order_details", json.dumps(data).encode("utf-8"))
# order details: is just an event name in kafka cluster
    print(f"done sending ..{i}")

transaction.py responsible for receiving those data and build another producer in kafka cluster just for calculation total revenue and total amount of sold ticket

from kafka import KafkaConsumer, KafkaProducer
import json

KAFKA_TOPIC = "order_details"

producer = KafkaProducer(bootstrap_servers="localhost:29092")

consumer = KafkaConsumer(
    KAFKA_TOPIC,
    bootstrap_servers="localhost:29092"
)

print('start listening"')

while True:
    for i in consumer:
        print('ongoing transaction')
        consumed_message = json.loads(i.value.decode())
        data = {
            "price":consumed_message["price"] #retrieve price data from previous producer which is now in kafka cluster 
        }

        producer.send("analytics", json.dumps(data).encode("utf-8")) #then just demo purpose I created another producer for calculation
        print("Successful transaction..")

analytics.py

from kafka import KafkaConsumer, KafkaProducer
import json

KAFKA_TOPIC = "analytics"
consumer = KafkaConsumer(
    KAFKA_TOPIC,
    bootstrap_servers="localhost:29092"
)
print('start listening"')

while True:
    total_ticket_sell = 0
    revenue = 0
    for i in consumer:
        consumed_message = json.loads(i.value.decode())
        total_ticket_sell += 1
        revenue += consumed_message['price']
        print("============\n\n")
        print("Receiving order")
        print('----------------')
        print(f'total ticket sell so far: {total_ticket_sell}')
        print(f'total revenue so far: {revenue}')

Done, now time for testing. Keep in mind you run your docker compose file and 3 python file in 3 different terminal just to see what happening.

N:B run 2 consumer file at first, then the producer.py file

Hls and Dash packaging simultaneously with Ffmpeg and Shaka packager

sium_hossain — Sat, 28 Jan 2023 11:04:35 +0000

Dash is the open-source equivalent of Apple's HLS technology, used for the same purpose: to deliver live videos or on-demand videos over the web, dynamically changing the quality based on the internet connection of the ﬁnal user.

HlS it's a standard created by apple in order to deliver audio/video streaming using ordinary web servers.

Following formula will produce a multi-bit-rate version of our master with h264 constrained encoding

ffmpeg -i input.mp4 -c:v h264 -crf 22 -tune film -profile:v main -level:v 4.0 -maxrate 5000k -bufsize 10000k -r 25 -keyint_min 25 -g 50 -sc_threshold 0 -c:a aac -ar 44100 -b:a 128k -ac 2 -pix_fmt yuv420p -movflags +faststart 1080.mp4 -s 1280x720 -c:v h264 -crf 24 -tune film -profile:v main -level:v 4.0 -maxrate 2500k -bufsize 5000k -r 25 -keyint_min 25 -g 50 -sc_threshold 0 -c:a aac -ar 44100 -b:a 128k -ac 2 -pix_fmt yuv420p -movflags +faststart 720.mp4 -s 854x480 -c:v h264 -crf 30 -tune film -profile:v main -level:v 4.0 -maxrate 1250k -bufsize 2500k -r 25 -keyint_min 25 -g 50 -sc_threshold 0 -c:a aac -ar 44100 -b:a 96k -ac 2 -pix_fmt yuv420p -movflags +faststart 480.mp4 -s 640x360 -c:v h264 -crf 33 -tune film -profile:v main -level:v 4.0 -maxrate 900k -bufsize 1800k -r 25 -keyint_min 25 -g 50 -sc_threshold 0 -c:a aac -ar 44100 -b:a 96k -ac 2 -pix_fmt yuv420p -movflags +faststart 360.mp4 -s 320x24 -c:v h264 -crf 36 -tune film -profile:v main -level:v 4.0 -maxrate 625k -bufsize 1250k -r 25 -keyint_min 25 -g 50 -sc_threshold 0 -c:a aac -ar 22050 -b:a 64k -ac 1 -pix_fmt yuv420p -movflags +faststart 240.mp4

All tags described in my previous blog

Create multi-bitrate DASH and HLS playlist with Shaka packager

Shaka packager official documentation, check_out installation and user guide from their official doc

./packager-linux-x64 in=1080.mp4,stream=audio,output=audio.mp4,playlist_name=audio.m3u8,hls_group_id=audio,hls_name=ENGLISH \
                                          in=1080.mp4,stream=video,output=h264_1080.mp4,playlist_name=h264_1080p.m3u8,iframe_playlist_name=h264_1080p_iframe.m3u8 \
                                          in=480.mp4,stream=video,output=h264_480p.mp4,playlist_name=h264_480p.m3u8,iframe_playlist_name=h264_480p_iframe.m3u8 \
                                          in=360.mp4,stream=video,output=h264_360p.mp4,playlist_name=h264_360p.m3u8,iframe_playlist_name=h264_360p_iframe.m3u8 \
                                          in=240.mp4,stream=video,output=h264_240p.mp4,playlist_name=h264_240p.m3u8,iframe_playlist_name=h264_240p_iframe.m3u8 \
                                          --hls_master_playlist_output h264_master.m3u8 \
                                          --mpd_output h264.mpd

Explanation

in : in=your_input_video.mp4, input command
stream : stream=audio for extract only audio file from input file and stream=video for extract only video file from input file

Previously we got different chunk file for different resolution from FFmpeg previous command like 1080.mp4,720.mp4,480.mp4 etc.

For making playlist we have to put respected file one by one

  in=1080.mp4,stream=video,output=h264_1080.mp4,playlist_name=h264_1080p.m3u8,iframe_playlist_name=h264_1080p_iframe.m3u8 \
                                          in=480.mp4,stream=video,output=h264_480p.mp4,playlist_name=h264_480p.m3u8,iframe_playlist_name=h264_480p_iframe.m3u8 \
                                          in=360.mp4,stream=video,output=h264_360p.mp4,playlist_name=h264_360p.m3u8,iframe_playlist_name=h264_360p_iframe.m3u8 \
                                          in=240.mp4,stream=video,output=h264_240p.mp4,playlist_name=h264_240p.m3u8,iframe_playlist_name=h264_240p_iframe.m3u8 \

--hls_master_playlist_output: Generator master playlist for hls streaming
--mpd_output h264.mpd: Generator master playlist for dash streaming

Producing dash streming using ffmpeg and bento4

sium_hossain — Thu, 26 Jan 2023 05:21:04 +0000

Dash is the open-source equivalent of Apple's HLS technology, used for the same purpose: to deliver live videos or on-demand videos over the web, dynamically changing the quality based on the internet connection of the ﬁnal user.

Following formula will produce a multi-bit-rate version of our master with h264 constrained encoding

ffmpeg -i input.mp4 -c:v h264 -crf 22 -tune film -profile:v main -level:v 4.0 -maxrate 5000k -bufsize 10000k -r 25 -keyint_min 25 -g 50 -sc_threshold 0 -c:a aac -ar 44100 -b:a 128k -ac 2 -pix_fmt yuv420p -movflags +faststart 1080.mp4 -s 1280x720 -c:v h264 -crf 24 -tune film -profile:v main -level:v 4.0 -maxrate 2500k -bufsize 5000k -r 25 -keyint_min 25 -g 50 -sc_threshold 0 -c:a aac -ar 44100 -b:a 128k -ac 2 -pix_fmt yuv420p -movflags +faststart 720.mp4 -s 854x480 -c:v h264 -crf 30 -tune film -profile:v main -level:v 4.0 -maxrate 1250k -bufsize 2500k -r 25 -keyint_min 25 -g 50 -sc_threshold 0 -c:a aac -ar 44100 -b:a 96k -ac 2 -pix_fmt yuv420p -movflags +faststart 480.mp4 -s 640x360 -c:v h264 -crf 33 -tune film -profile:v main -level:v 4.0 -maxrate 900k -bufsize 1800k -r 25 -keyint_min 25 -g 50 -sc_threshold 0 -c:a aac -ar 44100 -b:a 96k -ac 2 -pix_fmt yuv420p -movflags +faststart 360.mp4 -s 320x24 -c:v h264 -crf 36 -tune film -profile:v main -level:v 4.0 -maxrate 625k -bufsize 1250k -r 25 -keyint_min 25 -g 50 -sc_threshold 0 -c:a aac -ar 22050 -b:a 64k -ac 1 -pix_fmt yuv420p -movflags +faststart 240.mp4

All tags described in my previous blog

Create multi-bitrate DASH playlist with Bento4

In order to create a multi-bitrate DASH playlist with Bent04, we need to perform 2 separate action.

First one dedicated at the fragmentation of each file(version) of our master video, mp4fragment command will responsible for this task

Sample command:
mp4fragment 1080.mp4 1080-f.mp4
mp4fragment: this will launch Bento4's Mp4 Fragment tool
1080.mp4: this is the input ﬁle to be fragmented
1080-f.mp4: this is an example output's ﬁlename

Now we have to repeat this command for each version of our master video

mp4fragment 1080.mp4 1080-f.mp4&&mp4fragment 720.mp4 720-f.mp4&&mp4fragment 480.mp4 480-f-.mp4&&mp4fragment 360.mp4 360-f.mp4&&mp4fragment 240.mp4 240-f.mp4

Generate DASH playlist

In order to generate a DASH playlist with our segmented mp4s, we will use another tool from Bento4 called mp4dash using following command:

mp4dash 240-f.mp4 360-f.mp4 480-f.mp4 720-f.mp4 1080-f.mp4

This will generate a folder titled "output" which will
contain 2 separate folders: one called "audio" dedicated for the audio streaming and another called "video" containing the segments of each of the 5 variations of our master video. And finally we will find the "stream.mpd" file which is the DASH playlist itself.

producing HLS Packaging using FFmpeg & Bento4

sium_hossain — Sat, 21 Jan 2023 05:43:33 +0000

HlS it's a standard created by apple in order to deliver audio/video streaming using ordinary web servers.

If we want to prepare a video into a standard HLS stream, we will need both FFMPEG and Bento4.

Install Bento4 by docker

docker file and compose.yml file location: https://github.com/alfg/docker-bento4

docker pull alfg/bento4

run your command by

docker run -it --rm alfg/bento4 mp4info

Convert your master into multi-bit rate with FFMPEG
To begin, we will have 1 master file that will need to be converted in different bit rates

Let's say our master file is in 1080p(1920x1080). For our streaming needs, we need convert that file into multi bit rate for smoothing user experience

ffmpeg -i input.mp4 -c:v h264 -crf 22 -tune film -profile:v main -level:v 4.0 -maxrate 5000k -bufsize 10000k -r 25 -keyint_min 25 -g 50 -sc_threshold 0 -c:a aac -ar 44100 -b:a 128k -ac 2 -pix_fmt yuv420p -movflags +faststart 1080.mp4 -s 1280x720 -c:v h264 -crf 24 -tune film -profile:v main -level:v 4.0 -maxrate 2500k -bufsize 5000k -r 25 -keyint_min 25 -g 50 -sc_threshold 0 -c:a aac -ar 44100 -b:a 128k -ac 2 -pix_fmt yuv420p -movflags +faststart 720.mp4 -s 854x480 -c:v h264 -crf 30 -tune film -profile:v main -level:v 4.0 -maxrate 1250k -bufsize 2500k -r 25 -keyint_min 25 -g 50 -sc_threshold 0 -c:a aac -ar 44100 -b:a 96k -ac 2 -pix_fmt yuv420p -movflags +faststart 480.mp4 -s 640x360 -c:v h264 -crf 33 -tune film -profile:v main -level:v 4.0 -maxrate 900k -bufsize 1800k -r 25 -keyint_min 25 -g 50 -sc_threshold 0 -c:a aac -ar 44100 -b:a 96k -ac 2 -pix_fmt yuv420p -movflags +faststart 360.mp4 -s 320x24 -c:v h264 -crf 36 -tune film -profile:v main -level:v 4.0 -maxrate 625k -bufsize 1250k -r 25 -keyint_min 25 -g 50 -sc_threshold 0 -c:a aac -ar 22050 -b:a 64k -ac 1 -pix_fmt yuv420p -movflags +faststart 240.mp4

-i input.mp4: Master file
-c:v h264: Convert master file into h164 codec
-crf 22: Constant Rate Factor(CRF). Value can be anything from 0(lossless) up to 50(lowest)
-tune flim: especially suitable for ﬁlm content
-profile:v main -level 4.0: Compress frames for compatibility reasons
-maxrate 5000k -bufsize 10000k: Along with the -crf option enabled this will instruct FFMPEG to encode our video with a speciﬁc constrained mode
-r 25 -keyint_min 25 -g 50: Instruction for produce a 25 FPS file with the recommended distance between key frames every 2 seconds
-sc_threshold 0: Instruction no to insert key frame at scene changes
-c:a aac -ar 44100 -b:a 128k -ac 2: This will produce a standard AAC audio file at 44.100 KHz, at 128 Kbps, in stereo
-pix_fmt yuv420p: option for produce a video compatible with major video players, including Apple's QuickTime
-movflags +faststart: The -movflags +faststart instruction is advised whenever there is a streaming case-scenario. This particular instruction tells FFMPEG to move a speciﬁc part of an Mp4 File, called "atom"
1080.mp4: outfile name
\: Backslash symbol means Escape. It is used also as a new line delimiter
-s 1280x720: Instruction for resize the input file into desire resolution

1080.mp4 - For the 1920x1080 resolution
720.mp4 - For the 1280x720 resolution
480.mp4 - For the 854x480 resolution
360.mp4 - For the 640x360 resolution
240.mp4 - For the 426x240 resolution

1080.mp4 - AAC Audio at 128 Kbps, 44.100 kHz, Stereo
720.mp4 - same as 1080.mp4
480.mp4 - AAC Audio at 96 Kbps, 44.100 kHz, Stereo
360.mp4 - same as 480.mp4
240.mp4 - AAC Audio at 64 Kbpx, 22.050 kHz, Mono

Create multi-bitrate HLS playlist with Bento4

mp4hls 240.mp4 360.mp4 480.mp4 720.mp4 1080.mp4 --verbose --segment-duration 6 --output-single-file

mp4hls: this will launch Bento4's Mp4HLS tool
240.mp4 360.mp4 480.mp4 720.mp4 1080.mp4: Five input file
--verbose: Enable verbose mode. This will print progress in terminal. If any error happens in processing, it will show that error
--segment-duration 6: This will produce standard 6 second segment, as per Apple's technical requirements
--output-single-file: This will store segment data in a single output file per input file. In working directory, it will create a output directory containing all the HLS playlist and media files.

This whole directory can be then uploaded onto our web server, so to stream and deliver our desired HLS playlists.

All about FFMPEG, Bento4, Shaka packager (a very fast video and audio converter)

sium_hossain — Thu, 19 Jan 2023 09:34:17 +0000

Convert audio or video one format to another

ffmpeg -i example.wav example.mp3 #for audio
ffmpeg -i master.mov master.mp4 #for video mov to mp4 format

-i: stands for input

More complex command

ffmpeg -i mysong.wav -af loudnorm -c:a mp3
-b:a 256k -ar 48000 mysong.mp3

-af: Apply audio filter, Audio Filter Loudnorm: EBU R128 loudness normalization. Includes both dynamic and linear normalization modes. Support for both single pass (livestreams, files) and double pass (files) modes. This algorithm can target IL, LRA, and maximum true peak. In dynamic mode, to accurately detect true peaks, the audio stream will be upsampled to 192 kHz
-c:a: Option for which format we want to export
-b:a: Bitrate of audio
-ar: Audio rate - create an output ﬁle with a speciﬁc audio sampling rate

If we want to cut a portion from a long video with other option we can do that by

ffmpeg -i https://long_video_link
-t 00:02:30 -c:v h264 -b:v 3M -c:a aac -b:a
128k -ar 44100 -ac 2 example.mp4

-i: stands for input
-t: process only for specific duration
-c:v: video codec h265 --> mp4
-b:v: video bitrate
-c:a: audio codec
-ar: Audio rate or sampling rate
-ac: Number audio channels - 2 channels left and right

Basic concept about frame

I-frame: Frame stores the whole picture, standard format of FFMPEG
P-frame: Frame stores changes between the current picture and previous ones
B-frame: Frame stores differences with previous or future pictures

Convert a video into specific frame rate

ffmpeg -i YOUR_INPUT -c:v h264 -keyint_min
25 -g 50 -sc_threshold 0 OUTPUT.mp4

-i: stands for input
-c:v: video coder
-keyint_min: minimum interval to set a keyframe
-g: Group of pictures, the maximum keyframe interval. In this example- every 50 frames, or 2 seconds, assuming that your input runs at 25 FPS
-sc_threshold: This option will make sure not to add any new keyframe at scene changes

Extract audio from video by Ffmpeg

ffmpeg -i example.mov -vn -c:a mp3 -b:a
128k -ar 44100 -ac 2 example.mp3

-vn: no video

Extract only video by Ffmpeg

ffmpeg -i example.mp4 -an -c:v copy example.mp4

-an: no audio

Different `h264` encoding approaches

Constant Rate Factor: which keeps the best quality and care less about the ﬁle size.
CRF scale is 0-51, where 0 is lossless, 23 is default and 51 is worst quality possible. Lower value leads to higher quality. Consider 17 or 18 to be visually lossless or nearly so; it should look the same or nearly the same as the input but it isn't technically lossless

Presets: A preset is a collection of options that will provide a certain encoding speed to compression ratio
Available option -

ultrafast
superfast
veryfast
faster
fast
medium
slow
slower
veryslow
placebo

Using fast saves about 10% encoding time, faster 25%. ultrafast will save 55% at the expense of much lower quality.

The tune option

film – use for high quality movie content
animation – good for cartoons
grain – preserves the grain structure in old, grainy film material
stillimage – good for slideshow-like content
fastdecode – allows faster decoding by disabling certain filters
zerolatency – good for fast encoding and low-latency streaming
psnr – only used for codec development
ssim – only used for codec development

ffmpeg -i example.mp4 -c:v h264 -preset ultrafast -crf 0 output.mp4

================== Stay tuned for next part =================

Creating a desktop shortcut for a shell script (Ex:How to add Android Studio to the launcher)

sium_hossain — Sat, 14 Jan 2023 18:47:01 +0000

You can set desktop icon in your machine of any kind of .sh executable file. Here we can use android studio studio.sh file to set it as desktop app icon.
When you download android studio from Android studio official site and after extract you will get studio.sh executable file. And you can run android studio from terminal by



./studio.sh

But who used terminal to run a application, let's set a desktop icon

Create a studio.desktop file in desktop location or you can set name as your wish like - name.desktop



[Desktop Entry]
Version=1.0
Type=Application
Name=Android Studio
Exec= sh /path/to/studio.sh #path to your studio.sh file mine is /usr/local/android-studio/bin/studio.sh
Icon=/usr/local/android-studio/bin/studio.png #path to your application icon 
Categories=Development;IDE;
Terminal=false
StartupNotify=true
StartupWMClass=jetbrains-android-studio
Name[en_GB]=android-studio.desktop

Paste that piece of code into studio.desktop file

Save it...

Then go to your desktop, and you will see the icon of your application. But you will see an error something like launch your application. So you have to give permission to launch that application. Right-click your mouse on that icon, and you will get an option

Voila... now we can run our script as a desktop icon 😎

legacy-install-failure Encountered error while trying to install package:psycopg2-binary

sium_hossain — Tue, 08 Nov 2022 12:10:10 +0000

Shortnote

Install When you're using Ubuntu 22.04/ubuntu 22.10

sudo apt-get install libpq5=14.5-0ubuntu0.22.04.1 && sudo apt-get install libpq-dev

Bonus
Django old version doesn't work well with psycopg2-binary latest or version > 8
You can resolve this issue by installing

pip install psycopg2-binary==2.8.6

Hope it will save you some time

How can ignore a files that have already been committed to the repo?

sium_hossain — Sun, 30 Oct 2022 08:03:55 +0000

If a file already committed and pushed into your github repo. And you forgot to add in .gitignore and make your push. Then you can ignore that file by ( make sure you add that file name in .gitignore ) -

Remove the files from the index (not the actual files in the working copy)

git rm -r --cached .

Add these removals to the Staging Area

git add .

git commit -m "your commit message"

Voila 🐌

Integrate Fastapi websocket connection with vue 3 (Composition APi)

sium_hossain — Tue, 18 Oct 2022 05:53:18 +0000

Part1: FastAPI

Create virtualenv (optional)
Install FastAPI and all necessary things by-



pip install fastapi uvicorn websockets

Create main.py file



from fastapi import FastAPI
app = FastAPI()

@app.get("/")
def root():
    return {"msg":"welcome"}

and Run by -



uvicorn main:app --reload

Open this link in your browser http://127.0.0.1:8000

If you see something like this you are ready to go.

Now let's create websocket endpoint -




from fastapi import FastAPI, WebSocket

app = FastAPI()


# @app.get("/")
# def root():
#     return {"msg":"welcome"}

@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
    await websocket.accept()
    while True:

        data = await websocket.receive_text()
        print(data)
        await websocket.send_text(f"{data}")

This async function will await until accept connection from frontend via await websocket.accept(). And then when connection is created, our websocket will ready to communicate with frontend until connection closed.



 data = await websocket.receive_text()

By this line of code we will receive data from frontend.



await websocket.send_text(f"{data}")

And by this line of code we are able to send data to frontend. And that's how we create two way communication.

Part2: Vue3 (Frontend)

let's create vue3 applicaion- Vue3 installation guide



npm init vue@latest

Delete all of the boilerplate code. And let's code in app.vue file just for make things easier.



<script setup>
import { onMounted,ref } from 'vue'

const data = ref()
const inputData = ref()
const connection = new WebSocket("ws://localhost:8000/ws")


function submit()  {
  connection.send(inputData.value)
}
onMounted(() => {

  connection.onmessage = function(e){

    data.value = e.data

  }

})

</script>

<template>

  <h1>hello {{data}}</h1>
  <input type="text" v-model="inputData" @keyup.enter="submit()">
  <button @click="submit()">submit</button>
  <RouterView />
</template>

Start building connection with fastAPI websocket by-



const connection = new WebSocket("ws://localhost:8000/ws")

In mounted hook we start listen what message is send by backend. Abd whatever data comes from backend we can store those data and can render it in tamplate by-



onMounted(() => {

  connection.onmessage = function(e){

    data.value = e.data

  }

})



<!-- in template -->
<template>

  <h1>hello {{data}}</h1>

</template>

Let's create a input field and send data from frontend and again receive those data in frontend via backend.



<template>

  <h1>hello {{data}}</h1>
  <input type="text" v-model="inputData" @keyup.enter="submit()">
  <button @click="submit()">submit</button>
  <RouterView />
</template>

And In submit() function we will send data to the backend




function submit()  {
  connection.send(inputData.value)
}

Voila.... We are done 😎. Now you can do more experiment. Retrieve data from database and send it to frontend something like that. Or whatever you may wish.

Source Code: https://github.com/siumhossain/fastApi-Vue3-webSocket