.Net Core- Integrates OpenAI ChatGPT APIs in .Net Core Web Api

ChatGPT is a natural language processing model created as an AI-powered chatbot. It is designed to help customers interface with businesses more efficiently and effectively, providing human-like responses in real-time. The model is trained to recognize the context of customer requests, understand the content of conversations, and generate answers to customer queries.

By integrating ChatGPT with our .Net Core Web Api, we can elevate our aplication’s capabilities and provide users with a more interactive experience.

Here we are going to see the step-by-step integration of OpenAI’s ChatGPT APIs into .Net Core Web API.

Signup for an OpenAI API Key

To use the OpenAI’s ChatGPT APIs in your .Net Core Web Api, the first step is to signup for API Key. Go to OpenAI website and create your account by providing your details like name, email address and password.Once you have created your account, create your API key as shown below-

Its important to keep your API key safe and secure, as it provides access to use OpenAI’s ChatGPT APIs. Once you have your API key, you are ready to move on to the next step.

Angular- HTML Template in Angular Component

 In Angular Component post, we have seen that a component consists HTML template, component class, and Metadata. In this post we will see the HTML template in detail-

Html template is nothing but regular Html code with some additional Angular syntax to communicate with the component class.

Angular API interprets the HTML template of a component and generates the HTML and renders it. We can declare the HTML template of a component in two ways-

• Inline Template
• Linked Template

Angular- Component LifeCycle

In Angular, a component instance has a lifecycle that starts with instantiating the component class and rendering the view with its child view.

The lifecycle continues with change detection, as Angular checks to see when data-bound properties change, and updates both the view and the component instance as needed.

The sequence of Lifecycle events

After the application instantiates a component or directive by calling its constructor, Angular calls the hook methods you have implemented at the appropriate point in the lifecycle of that instance.

Angular executes hook methods in the following sequence.

Respond to Lifecycle Events

Respond to events in the lifecycle of a component or directive by implementing one or more of the lifecycle hook interfaces in the Angular core library.

Angular- Component

Angular is a framework for developing SPA applications. A SPA application view is made of one or more components. A component represents the view in the Angular application.

Components are the main building block for any Angular application. Each component consists of the following: 

1. HTML template that declares what renders on the page 
2. A TypeScript class that defines the behavior
3. Component Metadata

HTML Template

HTML template is nothing a regular HTML code with angular-specific syntax to communicate with the component class.

Angular - Development Setup

Angular is a JavaScript framework for building web applications. It is maintained by Google and is widely used for creating dynamic single-page applications (SPAs) and complex user interfaces.

In the last post, we get a brief introduction to Angular. In this post, we will follow the steps to set up a development environment for Angular.

1. Install Node.js and npm- Node.js is a runtime environment that allows you to run JavaScript code outside of a web browser. npm is a package manager for Node.js that allows you to install and manage packages and dependencies for your project. To install Node.js and npm, go to the official Node.js website and download the installer for your operating system. Once downloaded, run the installer and follow the on-screen instructions.
2. Install Angular CLI- Angular CLI is a command-line interface tool that helps you create, manage, and deploy Angular projects. To install Angular CLI, open a terminal or command prompt and run the following command-

   npm install -g @angular/cli

Angular- Introduction

What is Angular?

Angular is a JavaScript framework for building web applications. It is maintained by Google and is widely used for creating dynamic single-page applications (SPAs) and complex user interfaces.

Angular provides some powerful features such as two-way data binding, dependency injection, directives, and services that make it easy to build robust and scalable applications.

Below are some features Angular provides-

1. Component-based architecture- Angular is based on a component-based architecture, which allows developers to create reusable, modular components that can be quickly composed into larger applications.
2. Two-way data binding- Angular provides two-way data binding, which allows changes made to the model to be automatically reflected in the view and vice versa. This eliminates the need for complex event handling and makes it easier to keep the view and model in sync.
3. Dependency Injection- Angular's dependency injection system makes it easy to manage dependencies and reduce coupling between components. This helps to improve the maintainability and testability of the application.

Single Page Application (SPA)

What is Single Page Application (SPA)?

A Single Page Application (SPA) is a web application that loads a single HTML page and dynamically updates its content as the user interacts with the application, without requiring a full page reload. 

This approach is different from traditional web applications, where clicking on a link or button would cause the browser to request a new page from the server, which would then be rendered in the browser.

Angular Reactive Form - File validators for File Upload

File upload fuctionality is a very common use case in applications. Whenever we allow users to upload files to server, we should have both client side and server side validation. Most likely we validates file size and file extension.
In this post, we are going to see the validators for File Upload functionality in Aangular Reactive Form.

file-validations.ts

In file-validations.ts, we have three validators- FileExtension validator, FileMaxSize validator and FIle Minimum size validator.

import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
const FILE_MAX_SIZE = 2048;
const FILE_MIN_SIZE = 1024;
export class FileValidations {
  public static fileExtensionValidator(
    acceptedExtensions: string[]
  ): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
      if (control.value) {
        const ext = control.value.split('.').pop();
        if (!acceptedExtensions.includes(ext)) {
          return {
            fileExtension: {
              acceptedExtensions: acceptedExtensions,
              actualExtension: ext,
            },
          };
        }
      }
      return null;
    };
  }
  public static fileMaxSizeValidator(files: FileList): ValidatorFn {
    return (): ValidationErrors | null => {
      if (files.length > 0) {
        if (Math.round(files[0].size / 1024) > FILE_MAX_SIZE) {
          return {
            fileMaxSize: {
              requiredSize: `${Math.round(FILE_MAX_SIZE) / 1024}MB`,
              actualSize: `${Math.round(
                Math.round(files[0].size / 1024) / 1024
              )}MB`,
            },
          };
        }
      }
      return null;
    };
  }
  public static fileMinSizeValidator(files: FileList): ValidatorFn {
    return (): ValidationErrors | null => {
      if (files.length > 0) {
        if (Math.round(files[0].size / 1024) < FILE_MIN_SIZE) {
          return {
            fileMinSize: {
              requiredSize: `${Math.round(FILE_MIN_SIZE) / 1024}MB`,
              actualSize: `${Math.round(
                Math.round(files[0].size / 1024) / 1024
              )}MB`,
            },
          };
        }
      }
      return null;
    };
  }
}