DEV Community: ankit-brijwasi

Generate API docs under a minute in Django

ankit-brijwasi — Sat, 26 Aug 2023 18:09:36 +0000

Greetings everyone!

In this post, I'll be telling you, how we can generate API docs for any Django rest framework project, in less then a minute!

If that sounds interesting, follow along😁

Step 1: Installing the drf_yasg package

Note: you may find other packages for auto generating your API docs, but most of them are outdated and not maintained, that's why I'll recommend you to stick with drf_yasg

let's start by installing the drf_yasg package into your local development environment

(env) $ pip install drf_yasg

Once the package is installed, include it to the INSTALLED_APPS array, in your settings.py file

# settings.py
...
INSTALLED_APPS = [
    # other packages
    'drf_yasg'
]
...

with this drf_yasg will be installed in your django project

Step 2: Update your root urls file

Once the package is installed, open the root urls.py file of your project

/mydjangoproject
  |-mydjangoproject
  |   |-__init__.py
  |   |-wsgi.py
  |   |-asgi.py
  |   |-urls.py     # <---- This file
  |   |-settings.py
  |-app1
  |-app2

Once it is opened, update it with following code-

# existing imports
...

# import get_schema_view and openapi from drf_yasg
from drf_yasg.views import get_schema_view
from drf_yasg import openapi

# create the schema view
schema_view = get_schema_view(
    openapi.Info(
        title="My Django APIs",
        default_version='v1',
        description="Creating API docs was never this easy!!",
    ),
    public=True
)

# include the schema_view in the urlpatterns
urlpatterns = [
   # existing routes
   ...

   path('docs', schema_view.with_ui('swagger', cache_timeout=0)),
   path('redoc', schema_view.with_ui('redoc', cache_timeout=0)),
]

And it's done, now open 127.0.0.1:8000/docs route and you'll see the swagger page with all of your apis!

If you want the redoc version, just go to the 127.0.0.1:8000/redoc page and redoc api docs will appear there!

Swagger Page

If you have any problems mention them on the comments😉
Cheers!

Mastering Web Navigation: How to Save Time and Effort with Text-Fragments

ankit-brijwasi — Wed, 26 Jul 2023 04:28:33 +0000

Recently, I was reading an article, and it was very long! The annoying part was that, everytime I came back, I had to go through the contents again and again, until I found an intresting trick to solve this on the web.😁

Follow along with me, If you are also facing the same issue

Quick Solution

A hack to solve this problem, that I found is by using the, text-fragments feature that most of the modern web browsers now a days support

Syntax-

https://example.com/some-blog#:~:text=<TEXT YOU WANT TO SAVE>

If there are spaces, then denote them using %20

Demo

visit this page

When it opens, you'll see that the browser automatically, highlights and scrolls to the position where the text, Below is a gif is present

PS: While most websites support this feature, it's essential to bear in mind that a few might not be optimized yet.

Happy Browsing! 😇

MongoDB Atlas Hackathon 2022 on DEV

ankit-brijwasi — Thu, 08 Dec 2022 23:29:30 +0000

What We built

Hello and welcome to our project for this hackathon! Our project is called FastPanel, and it is a Django inspired admin panel for FARM stack.

It is highly customizable and fully integratable with any project that uses FARM stack as its core.

For Demonstrating FastPanel, we have created a wrapper project on top of it, called DevDuels - A real-time multiplayer coding battleground!

Category Submission:

About Real-time

Screenshots

FastPanel app page

FastPanel app models page

FastPanel list document

FastPanel create a new document

FastPanel update a document

FasPanel Delete a document

FastPanel Profile Page

DevDuels

DevDuels user registration

DevDuels create event

DevDuels join a event

DevDuels event info

DevDuels coding ground

DevDuels scoreboard

Description

FastPanel is a library built using, preact, FastAPI, and MongoDB. It has a seamless integration with any FARM stack project, to demonstrate FastPanel we have created a wrapper project on top of it, which is called, DevDuels, As the name suggests this is a simple platform where dev's can compete with each other, in a coding battleground.

DevDuels uses, changeStreams to send real-time database updates to the its frontend client which is built using react.

Tech-Stack's used

FastPanel
- MongoDB as its primary DB
- FastAPI as the core backend framework, to create APIs
- pReact as the frontend client, to consume the APIs
DevDuels
- MongoDB as its primary DB
- MongoDB change streams to send real-time updates to the backend server
- FastAPI as the core backend framework, to create APIs
- React as the frontend client, to consume the APIs

Application Structure

Link to Source Code

ankit-brijwasi / fastPanel

A Django inspired admin panel for FastAPI and MongoDB developers

FastPanel: The Modern Admin Panel for FastAPI and MongoDB Developers

Meet FastPanel – the new-age dashboard crafted for developers using FastAPI and MongoDB, with a user-friendly interface powered by pReact.

FastPanel steps up as the modern twist on the classic Django admin panel. It's tailored for folks diving into FastAPI and MongoDB, offering a smooth experience for managing your projects.

Think of it as your go-to tool for streamlining your work, letting you focus on what really counts – creating awesome apps.

So, get ready to explore the future of admin panels with FastPanel.

Build and install the FastPanel library

Build the library using-

$ python setup.py sdist

Install the library

$ pip install dist/fastpanel-1.x.x.tar.gz

FYI: pip version will be released soon!😉😁

Configure FastPanel into your application

Create the fastpanel.yaml configuration file, here's the general format for that-

secret_key: <MY SECRET KEY> # enter the secret key for your

…

View on GitHub

ankit-brijwasi / devduels-frontend

DevDuels

React frontend for connecting with the devduels backend

Run the server

Install all the dependencies using,

$ npm install

Run the server using,

$ npm start

View on GitHub

navdeepm20 / fast-pannel

This is the admin panel designed in Preact to be used with FastApi with its wrapper. This fulfills the need of a modern admin panel required for FastApi.

FastPanel

A modern admin panel that power up the FastApi Projects to scale without thinking about an admin pannel. This project is combination of two modules the frontend and the backend and support project with MongoDb as the primary database. The backend project can be found here https://github.com/ankit-brijwasi/fastPanel

Requirements

Major Dependencies

Preact
React Router Dom
Material UI
For more refer to package.json.

Project Information

CLI Commands

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# test the production build locally
npm run serve

# run tests with jest and enzyme
npm run test

For detailed explanation on how things work, checkout the CLI Readme.

View on GitHub

Permissive License

MIT License

Background

As more and more people are using microservice architecture in their projects, the demand for NoSQL databases like MongoDB is increasing at an astounding rate, but the old and matured frameworks like Django don't have a built-in support for them, and needs manual configuration!

As a result, nowadays frameworks like FastAPI are becoming more and more popular, Which is good, but there are some parts of Django which are super helpful for developers, like its built-in Admin Panel, which is customizable down to its core!

Taking an inspiration from this, me and my friend @navdeepm20 , decided that, we'll be building a new admin panel, which can support the new and modern frameworks and databases, like FastAPI & MongoDB.

How we built it

While building the application, We learned a lot about mongodb, things like, changestreams, indexes, relationships, and etc.

The most fascinating feature for me personally was the changesteams, and I realized just how useful mongodb is, in a microservice architecture.

Overall, It was a very fun experience working with mongodb and its python connector motor

Additional Resources/Info

Google, Stackoverflow, github issues, mongodb docs, fastapi docs, mui docs, and pReact docs!

Contributors

ankit-brijwasiFollow

Backend developer at Neurobit Innovations, India who loves to create inspiring #code and cool shortcuts. Python and JS ❤.

Navdeep MishraFollow

💻 Software Engineer | #️⃣ Full Stack | 😎Tech Enthusiast | ❤️ Music 🔥

Connect FastAPI & Golang services using gRPC

ankit-brijwasi — Sun, 06 Nov 2022 11:27:09 +0000

Hello Devs! Recently I started learning Protocol buffers & gRPC, and gotta tell you, this tech is amazing!

THIS POST REQUIRES A PRIOR KNOWLEDGE OF GRPC, GOLANG, AND PYTHON

Follow along with this post to get a hands-on demo on how to establish communication between different microservices that are running on different codebases using gRPC.

Find the code for this post here.

Directory Structure

fastapi-and-golang-grpc-demo
|-fastapi
    |-app
    |-env
    |-requirements.txt
|-protobufs
    |-auth.proto
|-main.go
|-Readme.md
|-go.mod

Create the auth protobuf file

Open the auth.proto file on your favourite code editor, and add the following code to it



syntax = "proto3";
package auth;
option go_package = "auth.utils/auth";


message AuthenticationRequest {
    string token = 1;
}

message AuthenticationResponse {
    int64 user_id       = 1;
    bool  token_valid   = 2;
}

service Auth {
    rpc Authenticate (AuthenticationRequest) returns (AuthenticationResponse);
}

Read more about protocol buffers here.

Add the Go service

1. Initialize the go application with



$ go mod init auth-ms

2. Generate the gRPC code



$ protoc --go_out=. --go-grpc_out=. protobufs/auth.proto

3. Update the dependencies



$ go mod tidy

4. Let's create our gRPC server for golang, add the following code in the main.go file



package main

import (
    "context"
    "flag"
    "fmt"
    "log"
    "net"

    pb "auth-ms/auth.utils/auth"

    "google.golang.org/grpc"
)

var (
    port = flag.Int("port", 50051, "port to run the server on")
)

type server struct {
    pb.UnimplementedAuthServer
}

// extend the rpc service created in auth.proto
func (s *server) Authenticate(ctx context.Context, req *pb.AuthenticationRequest) (*pb.AuthenticationResponse, error) {
        token := req.GetToken()
        log.Printf("Received: %v", token)

        // add some logic to verify token
        return &pb.AuthenticationResponse{UserId: 1, TokenValid: true}, nil
}

func main() {
    flag.Parse()
    lis, err := net.Listen("tcp", fmt.Sprintf(":%d", *port))

    if err != nil {
        log.Fatalln("Unable to start the server on port", *port)
    }

    grpc_server := grpc.NewServer()
    pb.RegisterAuthServer(grpc_server, &server{})
    log.Println("Started server at", lis.Addr())

    if err := grpc_server.Serve(lis); err != nil {
        log.Fatalln("Failed to start server at", lis.Addr())
    }
}

5. Start the gRPC server and keep it opened



$ go run main.go -port 8080
2022/11/06 16:26:39 Started server at [::]:8080

Add the FastAPI Service

1. Install the dependencies



$  pip install fastapi uvicorn grpcio-tools~=1.30

2. Generate the gRPC code



$ cd ./fastapi/app/
$ python -m grpc_tools.protoc -I ../protobufs --python_out=. --grpc_python_out=. ../protobufs/auth.proto

3. Create the FastAPI server



from fastapi import FastAPI
import grpc

from compiled_pb.auth_pb2_grpc import AuthStub
from compiled_pb.auth_pb2 import AuthenticationRequest

app = FastAPI()


@app.get("/token/verify/")
def verify_token(token: str):
    # gRPC client for making RPC calls to the server
    channel = grpc.insecure_channel("localhost:8080")
    client = AuthStub(channel)
    request = AuthenticationRequest(token=token)
    response = client.Authenticate(request)

    data = {
        "user_id": response.user_id,
        "is_token_valid": response.token_valid
    }
    return data

4. Start the FastAPI sever



uvicorn main:app --host 127.0.0.1 --port 8000 --reload
INFO:     Will watch for changes in these directories: ['/home/ankit/practice/golang_gRPC/fastapi/app']
INFO:     Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)
INFO:     Started reloader process [8652] using StatReload
INFO:     Started server process [8654]
INFO:     Waiting for application startup.
INFO:     Application startup complete.

Now, go to, http:127.0.0.1:8000/docs and hit the, /token/verify/ route.

VOILÀ, As soon as you hit the api request, there will be an internal RPC call to the go gRPC server.

Happy Coding!😊😇

Ghost Cloud

ankit-brijwasi — Tue, 30 Aug 2022 00:00:00 +0000

Overview of My Submission

Ghost Cloud is an online platform for sharing files, and its a cloud-first microservices application. Once someone uploads a file it becomes publicly available in the platform and other persons can also view and save it. With the help of redis, tasks like file compression and uploading are completely asynchronous and Event Driven for the user.

The application consists of 5-tier microservices. That are performing various tasks.

Submission Category:

Inspired by Microservice Mavens

Architecture

Screenshots

| Home

| View File

| Save File Page

| Upload File

Language Used

Python
Javascript

Link to Code

Find the code here-
https://github.com/ankit-brijwasi/ghost-cloud

YouTube Explaination

Collaborators

Solo by @ankitbrijwasi

More Information about Redis Stack

Here some resources to help you quickly get started using Redis Stack. If you still have questions, feel free to ask them in the Redis Discord or on Twitter.

Getting Started

Sign up for a free Redis Cloud account using this link and use the Redis Stack database in the cloud.
Based on the language/framework you want to use, you will find the following client libraries:
- Redis OM .NET (C#)
  - Watch this getting started video
  - Follow this getting started guide
- Redis OM Node (JS)
  - Watch this getting started video
  - Follow this getting started guide
- Redis OM Python
  - Watch this getting started video
  - Follow this getting started guide
- Redis OM Spring (Java)
  - Watch this getting started video
  - Follow this getting started guide

The above videos and guides should be enough to get you started in your desired language/framework. From there you can expand and develop your app. Use the resources below to help guide you further:

Developer Hub - The main developer page for Redis, where you can find information on building using Redis with sample projects, guides, and tutorials.
Redis Stack getting started page - Lists all the Redis Stack features. From there you can find relevant docs and tutorials for all the capabilities of Redis Stack.
Redis Rediscover - Provides use-cases for Redis as well as real-world examples and educational material
RedisInsight - Desktop GUI tool - Use this to connect to Redis to visually see the data. It also has a CLI inside it that lets you send Redis CLI commands. It also has a profiler so you can see commands that are run on your Redis instance in real-time
Youtube Videos
- Official Redis Youtube channel
- Redis Stack videos - Help you get started modeling data, using Redis OM, and exploring Redis Stack
- Redis Stack Real-Time Stock App from Ahmad Bazzi
- Build a Fullstack Next.js app with Fireship.io
- Microservices with Redis Course by Scalable Scripts on freeCodeCamp

Happy Coding

Cheers

Have you tried the unpack operator in python?

ankit-brijwasi — Sun, 30 Jan 2022 19:13:23 +0000

The one thing, which I love in Python is its unpack operator (* and **). This operator can be used with any iterable(list, dictionary, tuple, etc). It makes the code very elegant, adds performance to the code and I can do a ton of things using it.

Here are some of my use cases for the unpack operator-

1. Pass function parameters-

Often times, it happens that, the function has too much parameters with long names, and passing each value to parameter makes the code harder to read.

To tackle this problem you can use unpack operator(* if there are positional arguments or ** if there are keyword arguments)

example-

def my_func1(*args, **kwargs):
  '''
  args is a tuple, so you can use indexing to get the values
  kwargs is a dict, so you can use, kwargs.get(param_name) to access the value
  '''
  print(args)
  print(kwargs)

positional_args = (1, 2, 3, 4)
keyword_args = { 'arg1': 1, 'arg2': 2, 'arg3': 3 }

my_func1(*positional_args, **keyword_args)

In this way you can make your code more readable, and if the values for the function are static then, you can import them from a seperate file.

2. Update list or dictionary-

Using Unpack operator we can update a list or dict without using any inbuilt function

list1 = [1, 2, 3]
dict1 = {'a': 1, 'b': 2}

# add a new element
list1 = [*list1, 10]
dict1 = {**dict1, 'c': 3}

print(list1, dict1)

3. Merge a list or dictionary-

list1 = [1, 2, 3]
list2 = [4, 5, 6]

list3 = [*list1, *list2]

dict1 = {'a': 1, 'b': 2}
dict2 = {'c': 3, 'c': 4}

dict3 = {**dict1, **dict2}

4. Split an iterable into multiple parts

my_string = "hello devs!"

sub_str1, *sub_str2 = my_string

print(sub_str1)
print(sub_str2)

Thanks for reading this post
Have an awesome day!😇

Running Docker Containers created using docker-compose

ankit-brijwasi — Wed, 20 Oct 2021 15:37:05 +0000

So, Recently I was experimenting with docker, and it occured to me that, how can I access the docker containers that are created using, docker-compose.

when I used, the docker ps -a command, I can see all my containers that are created by docker-compose.

But when I tried to run a container, It didn't run.

The answer to this was quite simple.

1. To start a container use-

$ docker container start container_name

Note: The configuration specified for the container in the docker-compose file will be applied to the container by default so, you don't have to do them manually.

2. To stop a container use-

$ docker container stop container_name

3. To open up bash in the container use-

$ docker container exec -it container_name bash
bash-5.1#

And that's it!
Thanks for reading!
Have a marvelous day!😇

Connect To Postgres database running on a Docker container using psql

ankit-brijwasi — Sat, 16 Oct 2021 05:54:44 +0000

Recently while working, I was required to connect to a database that was running on a docker container using psql.

If you are also dealing with something like this, then, follow along

1. Start the docker container

$ docker run -d container_name

2. Now run the following command

$ psql -h localhost -p 5432 -U username -d database_name
Password for user username:

psql (12.8 (Ubuntu 12.8-0ubuntu0.20.04.1))
Type "help" for help.
database_name=>

And that's it
Thank you for reading!
Have a nice day!😇

Enable Dark mode in chrome on Ubuntu

ankit-brijwasi — Fri, 17 Sep 2021 11:09:03 +0000

Recently I started using Ubuntu as my default OS for programming and I am loving working in it!

But there was an issue which I faced, By default in Google Chrome dark mode is not enabled and it was kind of a letdown.

After digging up the Internet I found that In order to enable the Dark mode I needed to edit the google-chrome.desktop file.

If you are also dealing with a similar issue then, just follow along

Firstly open, the google-chrome.desktop file using,
sudo gedit /usr/share/applications/google-chrome.desktop

After the file has been opened, you will need to edit two lines

1. Search for the line-

Exec=/usr/bin/google-chrome-stable %U

replace it with-

Exec=/usr/bin/google-chrome-stable %U --enable-features=WebUIDarkMode --force-dark-mode

2. Search for the line-

Exec=/usr/bin/google-chrome-stable

replace it with-

Exec=/usr/bin/google-chrome-stable --enable-features=WebUIDarkMode --force-dark-mode

Now, Save the file and restart Chrome. Dark mode should be enabled now

Thanks for reading!
Have a nice day!😇

What is DOM?! and how to manipulate it using JavaScript?

ankit-brijwasi — Fri, 03 Jul 2020 09:28:44 +0000

When I first started my path on web development, The one thing which I kept on hearing from every Instructor was the word DOM but I was never able to understand it properly, like is it the HTML markup of a web page, or is it the code of the web page which is available on the DevTools of the browser, or is it something else.

Follow this post if you are also wondering the same thing!

What is DOM?

The W3C(World Wide Web Consortium) defines DOM as -

Document Object Model (DOM) is an application programming interface (API) for valid HTML and well-formed XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated.

In simple words, The DOM is an API that is loaded by the browser to represent the HTML code present on a web page as a tree of objects or a node tree.

Each node or object in this tree is an HTML element that can be added, updated, or deleted dynamically by using a scripting language such as JavaScript.

What is DOM manipulation?

DOM manipulation means changing the way of how elements in a web page are added, updated, or removed by the browser.

Always remember that all the HTML elements in the DOM are defined as objects.

We can manipulate the DOM by using DOM methods and DOM properties

The DOM methods are the actions that can be performed on the HTML elements, whereas, DOM properties are values of these HTML elements that we can set or change

Example -

<html>
 <body>
  <p id="demo"></p>
  <script>
    let element = document.getElementById("demo");
    element.innerHTML = "I am being inserted to the web page by JavaScript dynamically";
  </script>
 </body>
</html>

Output-

In the above code, getElementById is a DOM method and innerHTML is DOM property

getElementById DOM method is used to find the HTML elements by ID.

innerHTML DOM property is used get or change the HTML elements values.

In this example, the getElementById finds the HTML element with id="demo" and then stores it in a variable element. After that, we are using the innerHTML DOM property to dynamically modify the content of the HTML element that is stored inside the element variable(i.e. the <p> tag)

You may be wondering that in the let element = document.getElementById("demo"); line what is document? well, document is an object that is the owner(parent) of all other objects present on the web page.

Some more DOM methods -

.getElementsByClassName(name) - gets the elements by class name
.getElementsByTagName(name) - gets the elements by tag name
.createElement(element) - creates an element
.removeChild(element) - removes an element
.appendChild(element) - Adds an HTML element

Some more DOM properties -

.id - gets the id of an element
.className - gets the class of an element
.clientHeight - gets the height of an element
.attributes - gets the assigned attributes of the element

You can find all the DOM methods and properties here

If you want a more detailed and in-depth explanation (including a small project🤩) of this then you can check out the video explanation of the same here.

Also, If you find this post helpful then please like and share this
post and also help me get 3k subscribers on my YOUTUBE CHANNEL.

Thank You, and you are #awesome💙😊

I created a cool Spinner component using JavaScript

ankit-brijwasi — Tue, 30 Jun 2020 15:54:27 +0000

Hey, I hope you are having a marvelous day, In this post, I want to tell you about this cool component, I created using javascript.

The component is Spinner, by which users can generate coupons. Its usage is pretty simple, the user will enter his/her credentials and submit the form. after which the spinner spins and gives the user a coupon🤗.

The great thing about this component is that as all the wheel markup, styling and images are being injected by JavaScript, due to which this component can be loaded asynchronously🤩 this makes initial DOM light-weighted resulting in a great performance.

There's something more, as we are using JavaScript to inject the components of the Spinner, which means we can also remove all the injected markup of the component from the DOM, as soon as the component leaves the screen🤩. That means all the unnecessary markup will no longer be present in the DOM when it is no longer needed😌.

You can see a detailed explanation of the component here

For a tutorial on how I created this component, help me get 15 likes on the above video😊.

Thank You, and you are #awesome💙