DEV Community: Ayush

API Versioning in Minimal API.

Ayush — Sun, 02 Jun 2024 07:18:52 +0000

Hello guys, Sorry I took so so so soooooooooo, long break, I came back with this topic, I know I haven't covered properly my previous posts, but I'll continue again. Apart from this, let's continue this topic, as you seen in the title, Its API versioning in Minimal API, but in ASP.NET Core 8, yes you can do that with .NET 6 or higher version.

What is API Versioning?

As you've seen in the fake API sites, which provide the fake API for your building and learning skills of Web Apps, or other Platforms, If you don't know about the Fake APIs, then visit the given links down below:

As you can see their given fake API URL segment have /v1 in the Platzi API, that's indicating the URLSegmentVersioning which can be access by passing the v1 to define, that its using the API version 1.0 and you can define which API endpoints can use as v1 or v2 or depricated. If you don't get my point, then you can search more on internet.

Prerequisite

.NET 8 SDK.
Visual Studio Code
Knowledge about the extension method.
Asp.Versioning.Http
Asp.Versioning.Mvc.ApiExplorer

You can start with default template of dotnet and start creating your first, Minimal API, maybe you know already because you're smarter, but still, I'll do the developer thing Copy and Paste 😁.



dotnet new web -o MinimalApi -f .net8.0

Tadow Your Minimall API template is created, open that folder into your Visual Studio Code, you code will look like this simple, example given below:

Install packages



dotnet add package Asp.Versioning.Http



dotnet add package Asp.Versioning.Mvc.ApiExplorer

Now create a service folder inside your project folder and add a file ApiVersionExtension.cs, your file look like this:

Now use this extension method into you Program.cs file, so that it can be defined globally, as you can see in the extension method, there's line



config.ApiVersionReader = ApiVersionReader.Combine(
                new QueryStringApiVersionReader("api-version"),
                new HeaderApiVersionReader("api-x-version")
            );

This class QueryStringApiVersionReader defines that you can give your API version as /endpoint?api-version=1 and same goes to the second class HeaderApiVersionReader which defines that you can pass the api-x-version property to Header of API and give the version value, to the endpoint.
Next and final step, to define the API endpoints and give the api-endpoints version.

In variable apiVersionSet I've provided 2nd version as current and 1st version as deprecated.



dotnet run



dotnet watch

You can run one of those commands to run your API, from first of all you'll see your browser as this:

Now change the URL on the search bar to http://localhost:5202?api-version=2 and your API executed and display the text message.

As you can see in the Header, the deprecated and supported API version. I hope this post is helpful for you and now you can create your own API versions.

E-Commerce with Angular & Firebase, part three.

Ayush — Sat, 20 Jan 2024 15:30:00 +0000

Hello friends, I hope you all are doing well and creating or setting up your project as per my last 2 blog posts (parts one and two). If you haven't gone through those posts then please follow in sequential and also follow me on my social media platform from my profile.
This is the 3rd blog post, I'll share how to set up the firebase in angular, I've installed the firebase in the part one blog, check that out, now I'll create the Firebase project in the firebase console if you know how to create the firebase project, then its good to know, if you don't know 🤔, follow this article or this.

Steps to configure Firebase:

Step 1: Copy the configuration code which will be provided by firebase and copy that code into your src\firebase.config.ts file, yeah you should create that file to store that configuration file. It'll look like this:

const firebaseConfig = {
  apiKey: "********Your key********",
  authDomain: "********Your auth domain*******",
  projectId: "*******Your project id******",
  storageBucket: "******Your storage bucket id*******",
  messagingSenderId: "*****Message sender id*****",
  appId: "******Your app id*******",
  measurementId: "******Your measurement id********"
};

Inside this file, you've to export some variables, so this file will act like a global or centralized singleton object, which can handle the cloud I/O process, so there will not be new instances of an object while using the firebase.
so firebase.config.ts file looks like this:

import { initializeApp } from 'firebase/app'
import { collection, getFirestore } from 'firebase/firestore'
import { getAuth } from "firebase/auth"

const app = initializeApp(firebaseConfig)
export const db = getFirestore(app)
export const auth = getAuth(app)
export const productEntity = collection(db, "Products")

Now as you've seen I'm exporting the two variables db which is firestore and performing the task related to Firestore database, And the productEntity is a collection that refers to that particular collection where all products were saved.
As per our need, we'll create more collection references to make the RDBMS kind of structure in the Firestore Database because it's a NoSQL database.
So that's it for this blog, now you know how to configure Firebase into your Angular, next we'll set up the entities and user authentication.
Take care 🫡.

E-Commerce with Angular & Firebase, part two.

Ayush — Sat, 20 Jan 2024 01:00:00 +0000

Hi guys,
Welcome back to another blog series of an e-commerce project with angular and firebase, so this is the second blog post, if you were dragged here from Google or any news field then you should check out my first blog or part one, where I've shared the installation part.
So let's begin with this second blog or part two, in this blog I'll cover the setup, how we'll gonna setup the project or set the tailwindcss and daisyUi, I've provided the documentation link to install and setup the tailwindcss and daisyUi. And also cover up the Result design pattern.
So what's the design pattern, then it is a way to design the application system.
In software engineering, a software design pattern is a general, reusable solution to a commonly occurring problem within a given context in software design. It is not a finished design that can be transformed directly into source or machine code. Rather, it is a description or template for how to solve a problem that can be used in many different situations. Design patterns are formalized best practices that the programmer can use to solve common problems when designing an application or system.
Is that enough knowledge to get started with the design pattern? I guess yes otherwise you all get bored 😁.
So again I came up with that result design pattern idea from this blog post that I found useful, for ASP.NET CORE, I've followed this design pattern and implement in this angular. let's dive into the coding.

Setup TailwindCSS and daisyUi:

Follow the documentation that I've provided the link, it's easy to set up those frameworks into this framework Angular.
After following the documentation, not me on social media, so follow me too there.
Let's create a Result design pattern.

Result Design pattern:

Rule number one, simply create a model folder in the src\app\models and create a new file named interfaces you can create a structure like src\app\models\interfaces\IResult.ts, So you can also create a interfaces folder or file, its upto you, but I'll create a folder and inside folder I'll create IResult.ts file where I can store all new interfaces that I want. That's a pretty long paragraph for a bullet point 😂.
Rule number two, if you create the IResult.ts file then define the properties now, so it should look like this:

export interface IResult {
    succeed: boolean
    error?: IBaseError,
    errors?: string[],
    data?: any
}

Your file has code that looks like this, or you can add your properties too, Now it's time to implement this interface into class.

Rule number three, create another file in the models folder, and name it, Result.ts, before we implement that let's add another interface too inside the interfaces folder, the file name should be IBaseError.ts, and it looks like this:

export interface IBaseError {
    code: string
    description: string
}

Rule number four, implement those interfaces, first start with IBaseError.ts file. Create BaseError.ts file inside the models folder which will be the class.

import { IBaseError } from "./interfaces/IBaseError";

export class BaseError implements IBaseError {
    code: string = "";
    description: string = "";
    public constructor(code: string, description: string) {
        this.code = code
        this.description = description
    }
    public static readonly None = new BaseError("","")
}

Now create Result.ts file which is also a class, which inherits the IResult.ts file.

import { BaseError } from "./BaseError";
import { IBaseError } from "./interfaces/IBaseError";
import { IResult } from "./interfaces/IResult";

export class Result implements IResult {
    succeed: boolean = false;
    error?: IBaseError;
    errors?: string[];
    data?: any;
    message?: string;

    private constructor(succeed: boolean, error?: IBaseError, errors?: string[], data?: any, message?: string) {
        this.succeed = succeed
        this.error = error
        this.errors = errors
        this.data = data
        this.message = message
    }

    public static onSuccess = <TData>(data?: TData, message?: string) => new Result(true, BaseError.None, [""], data, message);
    public static onFailure = (error?: IBaseError, errors?: string[]) => new Result(false, error, errors);
}

Now create a StatusError.ts file inside the models folder and it'll be like using the BaseError.ts file which returns the properties as an error.

import { BaseError } from "./BaseError";

export class StatusError {
    public static readonly BadRequest = new BaseError("400", "You request isn't valid, please confirm the request body or header.");
    public static readonly Unauthorize = new BaseError("401", "Unauthorize to this resource.");
    public static readonly NotFound = new BaseError("404", "Content or data was not found.");
    public static readonly InternalServerError = new BaseError("500", "Internal server error occured, contact admin or try again after sometime.")
}

So this is our Result design pattern for now, and in the next blog we'll see the use-case of this result design pattern and set up the firebase in the angular, I hope this post will be helpful for you all, then share this to your friends who are code hunger 😂.

E-Commerce with Angular & Firebase, part one.

Ayush — Fri, 19 Jan 2024 23:30:00 +0000

Hello guys,
Long time no post yet, sorry for that, I'm back with this project idea for beginners as well as advanced. I came up with a blog series where we'll cover all the build functionality that an e-commerce site has, and try to make it a production level of quality.
So this is the first part as part one, in this blog, I'll cover the installation and packages that we'll gonna use in this project.

Which policy is the best ?
Honesty ❌
Documentation ✅

Pre-requisites 🤓:

Installation 📖:

First start with Angular CLI installation, if you don't have the Angular CLI installed in your system, then you should run this command to install it globally in your system.

npm i -g @angular/cli

Or if you've already installed it and it is an older version, that needs an upgrade ?, then you should run this command to update your CLI and core of Angular.

npm i -g @angular/cli@17

npm i -g @angular/core@17

You can follow the main documentation too, read docs.

Create a new angular project:

If you know this step then you can skip that step to create a new angular project, if you're new to angular then sir, follow me or you can follow the main documentation.
To create a new project, open your destination folder, open the terminal or command prompt, and run this command to create a new angular project folder.

ng new ecommerce --routing --style=css --no-standalone

Hit the enter key and another option will ask you, whether you want SSR (Server-side rendering) or not?, so type n for no, and hit enter, It'll create a new ecommerce folder of the angular project.

Install packages:

Open this project in your text editor or Visual Studio Code, open the terminal panel of Visual Studio Code, and run this command to install the packages, that we'll gonna use to build our e-commerce project.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
npm i -D daisyui@latest
npm install firebase

Run these commands one by one, so that every package will installed properly, if you know how to install all packages in one shot, then its beneficial to you and for me too, because I don't know, so comment down in the comment section so that I wanna know, what'll be the command to achieve it one single command.
Now see you and I have finished the pre-requisites for this blog post, just one thing is left, and that's the design patterns, we'll gonna have that in my upcoming blog posts.

UseEffect hook in ReactJs with Typescript (Beginner)

Ayush — Sun, 01 Oct 2023 08:22:08 +0000

Hello, FRIEDNZZZZZZZZZ......,
Sorry for the late, I haven't posted another blog in the last week. I'm here with the new topic useEffect() hook, How it works, and how we can use it in a proper manner. If you're ready then hit the like button with you BIG THUMB 👍.

What is useEffect, that's the big question 🤔.

useEffect is a React hook that allows you to perform side effects in your components. Side effects are any actions that interact with the outside world, such as fetching data, updating the DOM, or using timers.
useEffect takes two arguments: a function that contains the side effect logic, and an array of dependencies that controls when the effect runs. For example, if you want to fetch some data from an API when your component mounts, you can use useEffect like this:



useEffect(()=>{}, [])

above the code is a syntax, let's do the code and see how can we fetch the API data.

Get the data from API:

To do that we should import useEffect() into our component and if you're familiar with Json Placeholder, then use it as a fake API, But it actually provides a fake API for testing and for learning purposes.
that's the link for this fake API.



import { useEffect, useState } from 'react'

interface IDataModel {
  userId: number,
  id: number,
  body: string,
  title: string
}

export default function App() {
  const [data, setData] = useState<IDataModel[]>([])
  useEffect(() => {
    const GetPost = async () => {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'GET',
        headers: {
          "Content-Type": "application/json"
        }
      })
      const json = await response.json() as IDataModel[]
      if (response.ok) setData(json)
    }
    GetPost()
  }, [data])
  return (
    <div className='row container-fluid py-3'>{
      data && data.map(post => <div className='col-lg-4 mb-3' key={post.id}>
        <div className="card">
          <div className="card-body">
            <div>Post number: {post.id}</div>
            <div className="card-title fs-4 fw-normal">{post.title.slice(0, 10)}</div>
            <div>{post.body.slice(0, 20)}</div>
          </div>
        </div>
      </div>)
    }</div>
  )
}

In the above code, we saw that I use two hooks one is useState<IDataModel[]>([]) to get the response data and map those data into the JSX as you see. If you don't know about the useState<T>() hook then you should check my previous post.
In the useEffect(()=>{}, [data]) I pass the data into the array of dependencies because I want to run the useEffect when there are changes in the data variable. Now you got the point, useEffect works when a dependency changes its value.
And you'll get the result as shown below.

I use Bootstrap for UI in this ReactJs, If you don't know how to use the Bootstrap package in it, then check out my previous post, where you find out, How to install Bootstrap in ReactJs.
As you can see now the data from the API is fetched. You can also perform CRUD operation from your logic. You can also say that it's a Read operation from CRUD and in the next post, we'll perform other operations too.
Thanks for reading my blog and please also share with your Reactjs friends too, Namaste.

ReactJs with typescript (Beginner)

Ayush — Sun, 17 Sep 2023 10:53:23 +0000

Quotes of the day

Dreams can come true when you want to make it true.

Hi, Friends welcome to my new post. In this post, we'll talk about ReactJs with Typescript Chicha at the beginner level. So let's start with the command to create React App, the command is given below.
If you're not familiar with TypeScript then you should follow this link and cheat code like GTA game has.
Want ReactJs Cheat Code in Typescript? Here it is

Create React App.



npx create-react-app my-app --template typescript

I know you all know the command, but let others know that command too 😁. After that command, you'll notice that there's a new folder created on the folder that you selected. Open it on your choice of text editor, I open it on VScode and replace the App.tsx file code from my given code, but that's the basic code, nothing big deal, just simple JSX code 🥲. The code is given in Modify your code.

Modify your code



export default function App(): JSX.Element {
  return (
    <div>App</div>
  )
}

In the above code, you're seeing that the function has a return type that's JSX.Element, which helps to VScode in understanding the code block and gives you the emmet and code suggestion.
I simply change and run the application by giving the command in the terminal.



npm start

and your application starts and your default browser will open your beautiful React App, like mine, see below 😁.

Install Bootstrap

Well, It's not looking good right now 🙁. But we'll make it pretty. Now I'm gonna use Bootstrap in this React Application, it's like a makeup kit for this girl (React App). Run this command which is given below:



npm install bootstrap

Your Bootstrap is installed into your React Application, now let's smash that Bootstrap make-up kit on your React App 🫡. Now import the Bootstrap into index.tsx file, the code is given below.



import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap'

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.Fragment>
    <App />
  </React.Fragment>
);

reportWebVitals();

Implement logics

Now we're all set. She has now makeup on it and now let's implement our logic on it, The very simple and worldwide example is Count. We'll implement the counting by clicking the increment button and decrement button and we'll use the useState() hooks for this.

Change the App.tsx file again with the code given below.



import { useState } from "react"

export default function App(): JSX.Element {

  const [count, setCount] = useState<number>(0)

  const increment = () => {
    setCount(count + 1)
  }

  const decrement = () => {
    if (count > 0) {
      setCount(count - 1)
    }
  }

  return (
    <>
      <div className="d-flex w-full justify-content-around align-items-center pt-5">
        <button type="button" onClick={decrement} className="btn btn-danger w-25">-</button>
        <h1 className="display-5 fw-normal">{count}</h1>
        <button type="button" onClick={increment} className="btn btn-primary w-25">+</button>
      </div>
    </>
  )
}

As you've seen in the useState<number>(0) hook, it is a generic type in the typescript, you can also define the initial value or default value type by using generic type hooks or you can skip this generic type, it's up to you, but this will resolve our understanding of DS (Data Structure). because when we know about the DS or data then we also know their predefined functions or inbuilt functions of the datatype.
Now save the file and see the output.

Kawai 😍
That's it for this post, In the next blog we'll discuss how the parent feeds the data to his child.
Gooooooooood Byeeeeeeeeee....

Understanding ASP.NET CORE with Angular Project.

Ayush — Sat, 16 Sep 2023 06:54:07 +0000

Quotes of the day

Kal kare so aaj kar, aaj kare so ab.

Hi, everyone welcome back to my blog series. In the last blog, I shared a post in which, I said that I'd start a blog series where I'll post a project series-wise in which I'll use new technologies like ASPN.NET Core Web API, Angular and Azure and more.

I'll start a project named Buttler, which I created during my college time period. So I will share their ER-Diagram and DFD to better understand the project in this post.

This project is nothing but for learning those technologies are best practices. It is a food ordering system in which there are 3 types of users Admin, Staff, and User, where users can make orders for their food items and track their order status or cancel their orders.
On the other hand admin and staff users can update their food status for tracking. Admin can create new staff users and manipulates them according to their requirement, where staff can manipulate the users. Never mind you can understand better when you see the DFD which is given below.

So now you can understand the flow better.
Now moving to the Entities we'll use in this project are, given below.

We'll create those entities with a Code-First approach and everything will be code-first, if you're not good at the code-first approach then you can begin with the database-first approach you can use that ER to create or make tables in your database.

So that's all from my side in this post, see in the next post with the monolithic project structure of ASP.NET Core Web API.

Namaste

ASP.NET Core with Angular Series begins.

Ayush — Thu, 14 Sep 2023 16:44:37 +0000

Hi, I'm going to start a blog series, like every YouTubers create videos on YouTube, But I'll write post blogs here. Because I'm shy person to shoot myself and I'm not a handsome guy.
And I'm new here and, I'm very happy to help you and you can also help me, if you think that there's a fix in my code or project. In that way we can help each other.
In my next post we'll start to discuss what we'll create.
And the most satisfied thing is this project will be from Scratch, so for the beginner it's a great opportunity to learn from scratch.
See you on the next blog
We'll learn new technologies like Angular, ASP.NET Core and the SQL Server.
If we learn about those and completed this series, then we'll take that project on Azure level.
From now, we'll just develop the whole project locally on our system, so before we start this you've the better understanding of C#, SQL Server and the TypeScript or JavaScript for Angular purpose.
And I would request you to install the Visual Studio Community or You can also use your choice of IDE or Text editor like Visual Studio Code etc. And also install the .Net Core SDK, SSMS too for Database.

Thank you for your concertation here, if you like the post then share this news to your friends, who wants to start his journey in these technologies and let me know that in Comments, that which IDE should I choose for this tutorial, higher the comments, will be the winner and I'll tag him/her on my next post.

The End : N@m@$te