Exploring Blazor forms and form validations

We will learn how to create a form in a Blazor app. The form will support built-in client-side validations with the help of data annotations. We will implement a custom client-side validator for the form. We will also add a custom form validator component for business logic validation along with the client-side validator.

You can see a GIF showing the app in action at https://www.syncfusion.com/blogs/wp-content/uploads/2021/07/Creating-a-Student-Registartion-Form-in-Blazor-WebAssembly.gif

Create A Multi-Language Translator Using Blazor And Azure Cognitive Services

We will create a Multilanguage translator using Blazor and the Translator Azure Cognitive Service. The application will accept the text to translate and the target language as the input and returns the translated text and the detected language for the input text as the output. This app will support more than 60 languages for translation.

We will cover the following concepts:

1. What is Azure Cognitive Services?
2. What is Azure Translator Service?
3. Create the Azure Translator Cognitive Services resource
4. Create and configure a Blazor Server-Side application
5. Create the Blazor UI Component
6. Execution Demo

You can see a GIF showing the app in action at https://i0.wp.com/ankitsharmablogs.com/wp-content/uploads/2020/02/BlazorTranslator.gif

Creating Full-Stack Web Apps Using Blazor WebAssembly

We will create a full-stack application using Blazor WebAssembly with the help of EF Core database first approach. We will create a sample Employee Record Management System and perform CRUD operations on it. We will use a form to accept the user inputs. The form will have client-side validations and contains a dropdown list, which will bind to a database table. We will also provide a filter option to the user to filter the employee records based on employee name.

We will cover the following concepts in this talk:

1. What is Blazor WebAssembly?
2. Creating the DB layer for the application
3. Scaffolding the models using EF Core DB first approach
4. Creating UI Layer
5. Form validations
6. CRUD operations
7. Execution demo

Internationalization in Angular

We will learn how to make our Angular app available in different languages using Internationalization(i18n). This talk will walk you through the process of Angular i18n by using their very much improved built-in I18n module. For the purposes of this session, we will create a sample Angular application and serve it in three different languages – English, French, and German. We will also deploy this app on Firebase to see how i18n works in the production environment. We will use Angular material for styling the app.

We will learn about Angular localize package which was released as part of Angular 9.

The talk is roughly based on my article https://phrase.com/blog/posts/angular-9-tutorial-on-i18n/

Creating Full-Stack Web Apps Using Blazor Server

We will create a full-stack application using the Blazor server with the help of the EF Core database first approach. We will create a sample Employee Record Management System and perform CRUD operations on it. We will use a form to accept the user inputs. The form will have client-side validations and contains a dropdown list, which will bind to a database table. We will also provide a filter option to the user to filter the employee records based on employee names.

We will cover the following concepts in this talk:

1. What is Blazor server?
2. Creating the DB layer for the application
3. Scaffolding the models using EF Core DB first approach
4. Creating UI Layer
5. Form validations
6. CRUD operations
7. Execution demo

Create An Optical Character Reader Using Blazor And Azure Computer Vision

we will create an optical character recognition (OCR) application using Blazor and the Azure Computer Vision Cognitive Service. Computer Vision is an AI service that analyzes content in images. We will use the OCR feature of Computer Vision to detect the printed text in an image. The application will extract the text from the image and detects the language of the text. This app will support 25 different languages.

We will cover the following concepts:

1. What is Azure Cognitive Services?
2. What is Computer Vision?
3. Create the Azure Computer Vision Cognitive Service resource
4. Create and configure a Blazor Server-Side application
5. Create the Blazor UI Component
6. Execution Demo

You can see a GIF showing the app in action at https://ankitsharmablogs.com/wp-content/uploads/2020/02/BlazorComputerVision.gif

WorkShop : Blazor - Zero to Hero in 100 minutes

This workshop will provide a hands-on knowledge on Blazor framework. The first 20 mins of the workshop will cover the theoretical part where I will talk about Blazor and its features, how Blazor runs .NET in Browser and what are the advantages of using Blazor In the next 100 mins I will explain how to create a full stack web application using Blazor, EF Core and SQL Server. The complete application will be built in the workshop with live coding.

I will cover the following key features in this workshop
• Authentication in a Blazor application
• Forms and form validation
• JavaScript Interop

Create Smart Angular Apps Using Azure Computer Vision

we will create an optical character recognition (OCR) application using Angular and the Azure Computer Vision Cognitive Service. Computer Vision is an AI service that analyzes content in images. We will use the OCR feature of Computer Vision to detect the printed text in an image. The application will extract the text from the image and detects the language of the text. This app will support 25 different languages.

We will cover the following concepts:

1. What is Azure Cognitive Services?
2. What is Computer Vision?
3. Create the Azure Computer Vision Cognitive Service resource
4. Create and configure an Angular application
5. Integrate the Azure computer vision cognitive service with the app
6. Execution Demo

I have already published an article on the same topic.

https://www.freecodecamp.org/news/how-to-create-an-optical-character-reader-using-angular-and-azure-computer-vision/

Creating Full-Stack Web Apps Using .NET and Angular

We will create a full-stack application using Angular, .NET, and EF Core. We will create a sample Employee Record Management System and perform CRUD operations on it. The app will have a form to accept the user inputs with the required client-side validations. We will provide the option to search the employee records based on the employee's name.

We will cover the following concepts in this talk:

1. Creating the DB objects using SQL Server
2. Scaffolding the Model using EF core DB first approach
3. Creating the RESTful web API with .NET using the repository pattern
4. Implementing Dependency Injection in the web API
5. Creating the front-end of the application using Angular

GitHub: https://github.com/AnkitSharma-007/angular-with-dotnet5

Blazor: Client-side development with C#

Main Idea:
Blazor is an open source .NET web framework that allows us to create client-side applications using C#/Razor and HTML. In this session I will explain the core concepts of Blazor framework. The audience will learn What is Blazor, how it works and what are its’ features. I will also explain how to create and execute a web application using Blazor with the help of live code demo.

Topics:
1. What is Blazor?
2. What is WebAssembly?
3. How Blazor works?
4. How does Blazor run in the browser?
5. Features of Blazor
6.Create and execute a Blazor application with live code demo

Conclusion:
This session will help the audience to understand the basics of Blazor framework. They will learn how Blazor allows us to write and execute C# for client-side web application. They will also understand the application development process by seeing a live code demo of a web app created with Blazor.

Create a Blogging App with Angular and Firebase

We will create a blogging app, using Angular and Google Cloud Firestore.
The attendees will learn how to create a real-world application using core Angular concepts.
At the end of this workshop, each attendee will have their blogging app created and hosted on Firebase.

Creating a real-world application is the best way to learn any technology rather than just reading blogs or watching tutorial videos. Therefore, I have prepared this session in such a way that the attendees can learn right from creating a blank Angular app to making a full-fledged real-world application. We will cover all the major features of Angular and the attendees will learn how to create a real-world application using Angular concepts.

We will explore the following Angular concepts in this workshop:

1. Using Cloud Firestore with an Angular application
2. Angular material and Bootstrap
3. Template-driven forms
4. Google authentication using Firebase
5. Implementing auth-guards in Angular
6. Creating custom pipes
7. Hosting an Angular app on Firebase

This sample application is hosted at https://blogsite-30c69.firebaseapp.com/

Prerequisites for this workshop :
1. A gmail account to login into Firebase
2. Attendees should set up Angular development environment by installing the following free software :
- node.js (LTS Version)
- Visual Studio Code
- Angular CLI

Exploring Blazor – The open source framework for creating web UI with .NET

Blazor is an open source .NET web framework based on C#/Razor and HTML that runs in the browser with WebAssembly. It simplifies web development by allowing us to write .NET-based web apps that run client-side in web browsers. This alleviates the problem of moving to a new JavaScript framework. We can take advantage of the existing knowledge of C# to write both client-side and server-side applications and have a full-stack .NET development experience. This workshop is divided in three sections as mentioned below.

Section 1 : Introduction to Blazor
we will understand the basics of Blazor framework. The topics mentioned below will be covered in this section.
• What is Blazor?
• What is WebAssembly?
• How does Blazor run in the browser?
• Features of Blazor
• Why should we use Blazor?

Section 2 : Exploring the building blocks of Blazor
The concepts that we will learn in this section will help us to understand how the Blazor framework is designed, and how Blazor works as a framework. We will explore the concepts mentioned below.
• Blazor components
• Data binding in Blazor
• Event handling with Blazor
• Life cycle methods of Blazor
• Routing in Blazor

Section 3 : Creating a Single Page Application (SPA) using Blazor
We will create a SPA having a standard three tier architecture. The underlying framework for our application will be .NET Core 3. We will use SQL Server 2017 as our database. We will explore the following concepts in this session.
1. Database Layer
• Creating the DB objects using SQL Server
2. API Layer
• Scaffolding the Model using EF core DB first approach
• Creating the RESTful web API using the repository design pattern
• Implementing Dependency Injection in the web API
3. UI Layer
• Creating Blazor components
• Adding forms and validations to capture user inputs
• Adding the navigation link for our component
4. Deploy the application on IIS

At the end of this workshop the attendees will have a complete understanding of the Blazor framework and they will be able to create rich and interactive web applications using Blazor as a frontend and SQL Server as the database provider.

Securing Angular App Using JWT

Ever increasing cyber-attacks makes security an indispensable part of a modern web application. This session will explain about the importance of web security and how can we secure an Angular application. We will explore the concepts of JWT and learn how to implement JWT based authentication in a full stack application created using Angular and ASP.NET Core.

We will explore the following concepts in this talk.
1. Web Security – What and Why
2. What is JWT?
3. Structure of JWT
4. How do JWT work?
5. Implementing JWT in an Angular app using .NET core
6. Code demo

This talk will be based on my article at https://ankitsharmablogs.com/policy-based-authorization-in-angular-using-jwt/

Building modern web apps with Angular and Firebase

We will learn how to create a rich web application using Angular and Firebase. We will create an employee management system which uses Angular on frontend and Google cloud firestore as database. The application will have Google based authentication configured with the help of firebase. We will also use bootstrap for styling the application.
We will cover the following concepts in this talk.
• Creating a project on Firebase
• Configuring Google cloud firestore database
• Adding firebase project to Angular application
• Template-driven form
• Implementing auth-guards in Angular
• Configuring Google authentication for our application
• Deploying the app on the firebase

Reactive programming with Angular and Firebase using NgRx

This talk will explore the concepts of reactive programming. We will learn about NgRx and how to implement it in an angular application that uses Google Cloud Firestore as database.

Reactive programming is an asynchronous programming paradigm concerned with data streams and the propagation of change. It enhances the user experience by making the application more responsive. NgRx is a framework for building reactive applications in Angular.

We will explore the following concepts in this talk.

• What is Reactive programming
• What is NgRx?
• When and why should you use NgRx?
• Using Google Cloud Firestore with an Angular application
• Adding ngrx/store and ngrx/effects in the application
• Code demo

We will talk about the following NgRx packages
• Store
• Effects
• Store Devtools

Demo: https://ngrx-firebase-4d734.web.app/
GitHub: https://github.com/AnkitSharma-007/ngrx-firebase

Reactive programming with Angular and Firebase

Reactive programming is an asynchronous programming paradigm concerned with data streams and the propagation of change. It enhances the user experience by making the application more responsive. NgRx is a framework for building reactive applications in the Angular world.

In this workshop, we will explore the concepts of reactive programming. The attendees will learn the core concepts of NgRx and how to implement it in an angular application that uses Google Cloud Firestore as its database.

We will create an employee management system using Angular and Google Cloud Firestore. We will implement the NgRx packages in the application and also learn how to host the app on Firebase.

We will explore the following concepts in this workshop:

1. What is Reactive programming?
2. What is NgRx?
3. When and why should you use NgRx?
4. Using Google Cloud Firestore with an Angular application
5. Template-driven forms
6. Adding ngrx/store and ngrx/effects in the application
7. Debugging the app using ngrx/store-devtools
8. Hosting the app on Firebase

Demo: https://ngrx-firebase-4d734.web.app/
GitHub: https://github.com/AnkitSharma-007/ngrx-firebase

How can you create strictly typed Reactive forms with Angular?

We will learn how to create a strictly typed reactive form which is introduced with Angular 14. We will implement the in-built and custom async validations to the form.

We will cover the following concepts:
- A general overview of Reactive forms
- Create a model and bind it to the form controls
- Built-in form validations
- Custom form validations
- Execution Demo